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, logSubscriptionEvent } = usePlusSubscription();
@@ -159,6 +160,8 @@ export const FeedSettingsAISection = (): ReactElement => {
           icon={null}
         />
       </section>
+      <Divider className="bg-border-subtlest-tertiary" />
+      <SmartPrompts />
     </>
   );
 };

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

@@ -129,4 +129,7 @@ export * from './ShieldWarning';
 export * from './ShieldPlus';
 export * from './Sidebar';
 export * from './Folder';
+export * from './EditPrompt';
+export * from './CustomPrompt';
+export * from './TLDR';
 export * from './Privacy';

packages/shared/src/components/modals/common.tsx

@@ -214,6 +214,12 @@ const AddToCustomFeedModal = dynamic(
     ),
 );
 
+const SmartPromptModal = dynamic(() =>
+  import(
+    /* webpackChunkName: "smartPromptModal" */ './plus/SmartPromptModal'
+  ).then((mod) => mod.SmartPromptModal),
+);
+
 const CookieConsentModal = dynamic(
   () =>
     import(
@@ -264,6 +270,7 @@ export const modals = {
   [LazyModal.ClickbaitShield]: ClickbaitShieldModal,
   [LazyModal.MoveBookmark]: MoveBookmarkModal,
   [LazyModal.AddToCustomFeed]: AddToCustomFeedModal,
+  [LazyModal.SmartPrompt]: SmartPromptModal,
   [LazyModal.CookieConsent]: CookieConsentModal,
   [LazyModal.ReportUser]: ReportUserModal,
 };

packages/shared/src/components/modals/common/types.ts

@@ -62,6 +62,7 @@ export enum LazyModal {
   AddToCustomFeed = 'addToCustomFeed',
   CookieConsent = 'cookieConsent',
   ReportUser = 'reportUser',
+  SmartPrompt = 'smartPrompt',
 }
 
 export type ModalTabItem = {