feat: setting addition

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 { webappUrl } 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={`${webappUrl}plus`}
+          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 } =
@@ -131,6 +132,8 @@ export const FeedSettingsAISection = (): ReactElement => {
             )}
           </section>
           <Divider className="bg-border-subtlest-tertiary" />
+          <SmartPrompts />
+          <Divider className="bg-border-subtlest-tertiary" />
         </>
       )}
       <section className="flex flex-col gap-4" aria-busy={isLoading}>

packages/shared/src/contexts/SettingsContext.tsx

@@ -56,6 +56,7 @@ export interface SettingsContextData extends Omit<RemoteSettings, 'theme'> {
   loadedSettings: boolean;
   updateCustomLinks: (links: string[]) => Promise<unknown>;
   updateFlag: (flag: keyof SettingsFlags, value: boolean) => Promise<unknown>;
+  updatePromptFlag: (flag: string, value: boolean) => Promise<unknown>;
   syncSettings: (bootUserId?: string) => Promise<unknown>;
   onToggleHeaderPlacement(): Promise<unknown>;
   setOnboardingChecklistView: (value: ChecklistViewState) => Promise<unknown>;
@@ -275,6 +276,17 @@ export const SettingsContextProvider = ({
             [flag]: value,
           },
         }),
+      updatePromptFlag: (flag: keyof SettingsFlags, value: boolean) =>
+        setSettings({
+          ...settings,
+          flags: {
+            ...settings.flags,
+            prompt: {
+              ...settings.flags.prompt,
+              [flag]: value,
+            },
+          },
+        }),
       setSettings,
       applyThemeMode,
     }),

packages/shared/src/graphql/prompt.ts

@@ -0,0 +1,29 @@
+import { gql } from 'graphql-request';
+
+export type PromptFlags = {
+  icon?: string;
+  color?: string;
+};
+
+export type Prompt = {
+  id: string;
+  label: string;
+  description?: string;
+  createdAt: Date;
+  updatedAt: Date;
+  flags?: PromptFlags;
+};
+
+export const PROMPTS_QUERY = gql`
+  query Prompts {
+    prompts {
+      id
+      label
+      description
+      flags {
+        icon
+        color
+      }
+    }
+  }
+`;

packages/shared/src/graphql/settings.ts

@@ -16,6 +16,7 @@ export type SettingsFlags = {
   sidebarResourcesExpanded: boolean;
   sidebarBookmarksExpanded: boolean;
   clickbaitShieldEnabled: boolean;
+  prompt?: Record<string, boolean>;
 };
 
 export enum SidebarSettingsFlags {

packages/shared/src/hooks/prompt/usePromptsQuery.ts

@@ -0,0 +1,40 @@
+import type { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+import { generateQueryKey, RequestKey, StaleTime } from '../../lib/query';
+import { gqlClient } from '../../graphql/common';
+import { useAuthContext } from '../../contexts/AuthContext';
+import type { Prompt } from '../../graphql/prompt';
+import { PROMPTS_QUERY } from '../../graphql/prompt';
+
+type UsePromptsQueryProps = {
+  queryOptions?: Partial<UseQueryOptions<Prompt[]>>;
+};
+
+type UsePromptsQuery = UseQueryResult<Prompt[]>;
+
+export const usePromptsQuery = ({
+  queryOptions,
+}: UsePromptsQueryProps = {}): UsePromptsQuery => {
+  const { user } = useAuthContext();
+  const enabled = !!user;
+
+  const queryResult = useQuery({
+    queryKey: generateQueryKey(RequestKey.Prompts, user),
+
+    queryFn: async () => {
+      const result = await gqlClient.request<{
+        prompts: Prompt[];
+      }>(PROMPTS_QUERY);
+
+      return result.prompts;
+    },
+    staleTime: StaleTime.OneHour,
+    ...queryOptions,
+    enabled:
+      typeof queryOptions?.enabled !== 'undefined'
+        ? queryOptions.enabled && enabled
+        : enabled,
+  });
+
+  return queryResult;
+};

packages/shared/src/lib/labels.ts

@@ -63,6 +63,7 @@ export const labels = {
       globalPreferenceNotice: {
         clickbaitShield: 'Clickbait shield has been applied for all feeds',
         contentLanguage: 'New language preferences set for all feeds',
+        smartPrompt: 'Smart Prompt setting has been applied for all feeds',
       },
     },
   },

packages/shared/src/lib/log.ts

@@ -235,6 +235,9 @@ export enum LogEvent {
   ShareSource = 'share source',
   ShareTag = 'share tag',
   // End Share
+  // Start Smart Prompts
+  ToggleSmartPrompts = 'toggle smart prompts',
+  // End Smart Prompts
 }
 
 export enum FeedItemTitle {

packages/shared/src/lib/query.ts

@@ -186,6 +186,7 @@ export enum RequestKey {
   UserShortById = 'user_short_by_id',
   BookmarkFolders = 'bookmark_folders',
   FetchedOriginalTitle = 'fetched_original_title',
+  Prompts = 'prompts',
 }
 
 export type HasConnection<