feat: custom prompts

packages/shared/src/components/buttons/common.ts

@@ -209,9 +209,18 @@ export const useGetIconWithSize = (
       size: icon.props?.size ?? buttonSizeToIconSize[size],
       className: classNames(
         icon.props.className,
-        !iconOnly && '!h-6 !w-6 text-base',
-        !iconOnly && iconPosition === ButtonIconPosition.Left && '-ml-2 mr-1',
-        !iconOnly && iconPosition === ButtonIconPosition.Right && '-mr-2 ml-1',
+        !iconOnly && 'text-base',
+        !iconOnly && !icon.props?.size && '!h-6 !w-6',
+        !iconOnly && iconPosition === ButtonIconPosition.Left && 'mr-1',
+        !iconOnly &&
+          !icon.props?.size &&
+          iconPosition === ButtonIconPosition.Left &&
+          '-ml-2',
+        !iconOnly && iconPosition === ButtonIconPosition.Right && 'ml-1',
+        !iconOnly &&
+          !icon.props?.size &&
+          iconPosition === ButtonIconPosition.Right &&
+          '-mr-2',
       ),
     });
 };

packages/shared/src/components/feeds/FeedSettings/components/SmartPrompts.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../typography/Typography';
+import { PlusUser } from '../../../PlusUser';
+import ConditionalWrapper from '../../../ConditionalWrapper';
+import { SimpleTooltip } from '../../../tooltips';
+import { LogEvent, Origin, TargetId } from '../../../../lib/log';
+import { Button, ButtonSize, ButtonVariant } from '../../../buttons/Button';
+import { plusUrl } from '../../../../lib/constants';
+import { DevPlusIcon } from '../../../icons';
+import { usePlusSubscription, useToastNotification } from '../../../../hooks';
+import { usePromptsQuery } from '../../../../hooks/prompt/usePromptsQuery';
+import { FilterCheckbox } from '../../../fields/FilterCheckbox';
+import { useSettingsContext } from '../../../../contexts/SettingsContext';
+import { labels } from '../../../../lib';
+import { useLogContext } from '../../../../contexts/LogContext';
+
+export const SmartPrompts = (): ReactElement => {
+  const { isPlus, logSubscriptionEvent } = usePlusSubscription();
+  const { displayToast } = useToastNotification();
+  const { logEvent } = useLogContext();
+  const { flags, updatePromptFlag } = useSettingsContext();
+  const { prompt: promptFlags } = flags;
+  const { data: prompts, isLoading } = usePromptsQuery();
+
+  return (
+    <section className="flex flex-col gap-4" aria-busy={isLoading}>
+      <div className="flex flex-col">
+        <div className="mb-1 flex items-center gap-2">
+          <Typography
+            tag={TypographyTag.H3}
+            color={TypographyColor.Primary}
+            type={TypographyType.Body}
+            bold
+          >
+            Smart Prompts
+          </Typography>
+          <PlusUser />
+        </div>
+        <Typography
+          className="pr-24"
+          color={TypographyColor.Tertiary}
+          type={TypographyType.Callout}
+        >
+          Level up how you interact with posts using AI-powered prompts. Extract
+          insights, refine content, or run custom instructions to get more out
+          of every post in one click.
+        </Typography>
+      </div>
+      <ConditionalWrapper
+        condition={!isPlus}
+        wrapper={(child) => {
+          return (
+            <SimpleTooltip
+              container={{
+                className: 'max-w-70 text-center typo-subhead',
+              }}
+              content="Upgrade to Plus to unlock Smart Prompts."
+            >
+              <div className="w-fit">{child as ReactElement}</div>
+            </SimpleTooltip>
+          );
+        }}
+      >
+        <div className="flex flex-col gap-2">
+          {prompts?.map(({ id, label, description }) => (
+            <FilterCheckbox
+              key={id}
+              name={`prompt-${id}`}
+              checked={promptFlags?.[id] ?? true}
+              description={description}
+              disabled={!isPlus}
+              onToggleCallback={() => {
+                const newState = !(promptFlags?.[id] || true);
+                updatePromptFlag(id, newState);
+                displayToast(
+                  labels.feed.settings.globalPreferenceNotice.smartPrompt,
+                );
+
+                logEvent({
+                  event_name: LogEvent.ToggleSmartPrompts,
+                  target_id: newState ? TargetId.On : TargetId.Off,
+                  extra: JSON.stringify({
+                    origin: Origin.Settings,
+                  }),
+                });
+              }}
+              descriptionClassName="text-text-tertiary"
+            >
+              <Typography bold>{label}</Typography>
+            </FilterCheckbox>
+          ))}
+        </div>
+      </ConditionalWrapper>
+      {!isPlus && (
+        <Button
+          className="w-fit"
+          tag="a"
+          type="button"
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Medium}
+          href={plusUrl}
+          icon={<DevPlusIcon className="text-action-plus-default" />}
+          onClick={() => {
+            logSubscriptionEvent({
+              event_name: LogEvent.UpgradeSubscription,
+              target_id: TargetId.ClickbaitShield,
+            });
+          }}
+        >
+          Upgrade to Plus
+        </Button>
+      )}
+    </section>
+  );
+};

packages/shared/src/components/feeds/FeedSettings/sections/FeedSettingsAISection.tsx

@@ -25,6 +25,7 @@ import {
 import { Divider } from '../../../utilities';
 import { Switch } from '../../../fields/Switch';
 import { labels } from '../../../../lib';
+import { SmartPrompts } from '../components/SmartPrompts';
 
 export const FeedSettingsAISection = (): ReactElement => {
   const { isPlus, showPlusSubscription, logSubscriptionEvent } =
@@ -39,8 +40,41 @@ export const FeedSettingsAISection = (): ReactElement => {
 
   return (
     <>
+      <section className="flex flex-col gap-4" aria-busy={isLoading}>
+        <div className="flex flex-col">
+          <Typography
+            tag={TypographyTag.H3}
+            color={TypographyColor.Primary}
+            type={TypographyType.Body}
+            bold
+            className="mb-1"
+          >
+            Preferred language
+          </Typography>
+          <Typography
+            color={TypographyColor.Tertiary}
+            type={TypographyType.Callout}
+          >
+            Choose your preferred language for the post titles on the feed
+          </Typography>
+        </div>
+        <LanguageDropdown
+          className={{ container: 'w-full max-w-60' }}
+          name="language"
+          defaultValue={user.language}
+          onChange={(value) => {
+            onLanguageChange(value);
+
+            displayToast(
+              labels.feed.settings.globalPreferenceNotice.contentLanguage,
+            );
+          }}
+          icon={null}
+        />
+      </section>
       {showPlusSubscription && (
         <>
+          <Divider className="bg-border-subtlest-tertiary" />
           <section className="flex flex-col gap-4" aria-busy={isLoading}>
             <div className="flex flex-col">
               <div className="mb-1 flex items-center gap-2">
@@ -131,40 +165,9 @@ export const FeedSettingsAISection = (): ReactElement => {
             )}
           </section>
           <Divider className="bg-border-subtlest-tertiary" />
+          <SmartPrompts />
         </>
       )}
-      <section className="flex flex-col gap-4" aria-busy={isLoading}>
-        <div className="flex flex-col">
-          <Typography
-            tag={TypographyTag.H3}
-            color={TypographyColor.Primary}
-            type={TypographyType.Body}
-            bold
-            className="mb-1"
-          >
-            Preferred language
-          </Typography>
-          <Typography
-            color={TypographyColor.Tertiary}
-            type={TypographyType.Callout}
-          >
-            Choose your preferred language for the post titles on the feed
-          </Typography>
-        </div>
-        <LanguageDropdown
-          className={{ container: 'w-full max-w-60' }}
-          name="language"
-          defaultValue={user.language}
-          onChange={(value) => {
-            onLanguageChange(value);
-
-            displayToast(
-              labels.feed.settings.globalPreferenceNotice.contentLanguage,
-            );
-          }}
-          icon={null}
-        />
-      </section>
     </>
   );
 };

packages/shared/src/components/icons/CustomPrompt/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const CustomPromptIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/icons/EditPrompt/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const EditPromptIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/icons/TLDR/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const TLDRIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/icons/index.ts

@@ -128,3 +128,6 @@ export * from './ShieldWarning';
 export * from './ShieldPlus';
 export * from './Sidebar';
 export * from './Folder';
+export * from './EditPrompt';
+export * from './CustomPrompt';
+export * from './TLDR';