Frontend: Add citations toggle (#930)

feat(assistants_web): added citations toggle

Author: ezawadski

src/interfaces/assistants_web/src/app/(main)/settings/Settings.tsx

@@ -4,7 +4,15 @@ import { PropsWithChildren, useState } from 'react';
 
 import { StatusConnection } from '@/components/AgentSettingsForm/StatusConnection';
 import { MobileHeader } from '@/components/Global';
-import { Button, DarkModeToggle, Icon, ShowStepsToggle, Tabs, Text } from '@/components/UI';
+import {
+  Button,
+  DarkModeToggle,
+  Icon,
+  ShowCitationsToggle,
+  ShowStepsToggle,
+  Tabs,
+  Text,
+} from '@/components/UI';
 import { TOOL_GMAIL_ID, TOOL_SLACK_ID } from '@/constants';
 import { useDeleteAuthTool, useListTools, useNotify } from '@/hooks';
 import { cn, getToolAuthUrl } from '@/utils';
@@ -102,6 +110,7 @@ const Advanced = () => {
         Advanced
       </Text>
       <ShowStepsToggle />
+      <ShowCitationsToggle />
     </Wrapper>
   );
 };

src/interfaces/assistants_web/src/components/MessageRow/CitationTextHighlighter.tsx

@@ -6,7 +6,7 @@ import { PropsWithChildren } from 'react';
 import { Citation } from '@/components/MessageRow';
 import { useContextStore } from '@/context';
 import { Breakpoint, useBrandedColors, useBreakpoint, useChatRoutes } from '@/hooks';
-import { useCitationsStore } from '@/stores';
+import { useCitationsStore, useSettingsStore } from '@/stores';
 import { cn, createStartEndKey } from '@/utils';
 
 const FALLBACK_CODE_SNIPPET_TEXT = '[source]';
@@ -40,6 +40,7 @@ export const CitationTextHighlighter: React.FC<Props> = ({
   const {
     citations: { citationReferences },
   } = useCitationsStore();
+  const { showCitations } = useSettingsStore();
   const startEndKey = createStartEndKey(start, end);
 
   const { text, lightText, bg, contrastText, hover, dark, light } = useBrandedColors(agentId);
@@ -88,25 +89,31 @@ export const CitationTextHighlighter: React.FC<Props> = ({
   }
 
   return (
-    <Popover className="group contents" as="span">
-      <PopoverButton
-        as="span"
-        className={cn(
-          'cursor-pointer rounded bg-transparent',
-          light(text),
-          dark(lightText),
-          hover(bg),
-          hover(contrastText)
-        )}
-      >
-        {content}
-      </PopoverButton>
-      <PopoverPanel
-        anchor="bottom"
-        className="z-tooltip h-fit w-[466px] rounded border bg-white p-4 dark:border-volcanic-400 dark:bg-volcanic-200"
-      >
-        <Citation generationId={generationId} citationKey={startEndKey} agentId={agentId} />
-      </PopoverPanel>
-    </Popover>
+    <>
+      {showCitations ? (
+        <Popover className="group contents" as="span">
+          <PopoverButton
+            as="span"
+            className={cn(
+              'cursor-pointer rounded bg-transparent',
+              light(text),
+              dark(lightText),
+              hover(bg),
+              hover(contrastText)
+            )}
+          >
+            {content}
+          </PopoverButton>
+          <PopoverPanel
+            anchor="bottom"
+            className="z-tooltip h-fit w-[466px] rounded border bg-white p-4 dark:border-volcanic-400 dark:bg-volcanic-200"
+          >
+            <Citation generationId={generationId} citationKey={startEndKey} agentId={agentId} />
+          </PopoverPanel>
+        </Popover>
+      ) : (
+        <span>{content}</span>
+      )}
+    </>
   );
 };

src/interfaces/assistants_web/src/components/UI/ShowCitationsToggle.tsx

@@ -0,0 +1,23 @@
+import { Switch, Text } from '@/components/UI';
+import { useSettingsStore } from '@/stores';
+
+export const ShowCitationsToggle = () => {
+  const { showCitations, setShowCitations } = useSettingsStore();
+
+  const handleSwitchShowCitations = (checked: boolean) => {
+    setShowCitations(checked);
+  };
+
+  return (
+    <section className="mb-4 flex gap-6">
+      <Text styleAs="label" className="font-medium">
+        Show citations
+      </Text>
+      <Switch
+        checked={showCitations}
+        onChange={(checked: boolean) => handleSwitchShowCitations(checked)}
+        showCheckedState
+      />
+    </section>
+  );
+};

src/interfaces/assistants_web/src/components/UI/ShowStepsToggle.tsx

@@ -9,7 +9,7 @@ export const ShowStepsToggle = () => {
   };
 
   return (
-    <section className="flex gap-6">
+    <section className="mb-4 flex gap-6">
       <Text styleAs="label" className="font-medium">
         Show thinking steps
       </Text>

src/interfaces/assistants_web/src/components/UI/index.ts

@@ -22,6 +22,7 @@ export * from './LongPressMenu';
 export * from './Modal';
 export * from './RadioGroup';
 export * from './Shortcut';
+export * from './ShowCitationsToggle';
 export * from './ShowStepsToggle';
 export * from './Skeleton';
 export * from './Slider';

src/interfaces/assistants_web/src/stores/persistedStore.ts

@@ -51,10 +51,12 @@ export const useSettingsStore = () => {
       isLeftPanelOpen: state.isLeftPanelOpen,
       isRightPanelOpen: state.isRightPanelOpen,
       showSteps: state.showSteps,
+      showCitations: state.showCitations,
       setLeftPanelOpen: state.setLeftPanelOpen,
       setRightPanelOpen: state.setRightPanelOpen,
       setUseAssistantKnowledge: state.setUseAssistantKnowledge,
       setShowSteps: state.setShowSteps,
+      setShowCitations: state.setShowCitations,
       isHotKeysDialogOpen: state.isHotKeysDialogOpen,
       setIsHotKeysDialogOpen: state.setIsHotKeysDialogOpen,
     }),

src/interfaces/assistants_web/src/stores/slices/settingsSlice.ts

@@ -5,6 +5,7 @@ const INITIAL_STATE = {
   isLeftPanelOpen: true,
   isRightPanelOpen: false,
   showSteps: true,
+  showCitations: true,
   isHotKeysDialogOpen: false,
 };
 
@@ -13,6 +14,7 @@ type State = {
   isLeftPanelOpen: boolean;
   isRightPanelOpen: boolean;
   showSteps: boolean;
+  showCitations: boolean;
   isHotKeysDialogOpen: boolean;
 };
 
@@ -21,6 +23,7 @@ type Actions = {
   setLeftPanelOpen: (isOpen: boolean) => void;
   setRightPanelOpen: (isOpen: boolean) => void;
   setShowSteps: (showSteps: boolean) => void;
+  setShowCitations: (showCitations: boolean) => void;
   setIsHotKeysDialogOpen: (isOpen: boolean) => void;
 };
 
@@ -53,6 +56,12 @@ export const createSettingsSlice: StateCreator<SettingsStore, [], [], SettingsSt
       showSteps: showSteps,
     }));
   },
+  setShowCitations(showCitations: boolean) {
+    set((state) => ({
+      ...state,
+      showCitations: showCitations,
+    }));
+  },
   setIsHotKeysDialogOpen(isOpen: boolean) {
     set((state) => ({
       ...state,