diff --git a/src/interfaces/assistants_web/src/app/(main)/settings/Settings.tsx b/src/interfaces/assistants_web/src/app/(main)/settings/Settings.tsx index 6e12433db2..094b3d28ce 100644 --- a/src/interfaces/assistants_web/src/app/(main)/settings/Settings.tsx +++ b/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 + ); }; diff --git a/src/interfaces/assistants_web/src/components/MessageRow/CitationTextHighlighter.tsx b/src/interfaces/assistants_web/src/components/MessageRow/CitationTextHighlighter.tsx index 4c5dce3c02..1125dee940 100644 --- a/src/interfaces/assistants_web/src/components/MessageRow/CitationTextHighlighter.tsx +++ b/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 = ({ 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 = ({ } return ( - - - {content} - - - - - + <> + {showCitations ? ( + + + {content} + + + + + + ) : ( + {content} + )} + ); }; diff --git a/src/interfaces/assistants_web/src/components/UI/ShowCitationsToggle.tsx b/src/interfaces/assistants_web/src/components/UI/ShowCitationsToggle.tsx new file mode 100644 index 0000000000..6bea8a17c0 --- /dev/null +++ b/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 ( +
+ + Show citations + + handleSwitchShowCitations(checked)} + showCheckedState + /> +
+ ); +}; diff --git a/src/interfaces/assistants_web/src/components/UI/ShowStepsToggle.tsx b/src/interfaces/assistants_web/src/components/UI/ShowStepsToggle.tsx index d00f3d799b..70295f9736 100644 --- a/src/interfaces/assistants_web/src/components/UI/ShowStepsToggle.tsx +++ b/src/interfaces/assistants_web/src/components/UI/ShowStepsToggle.tsx @@ -9,7 +9,7 @@ export const ShowStepsToggle = () => { }; return ( -
+
Show thinking steps diff --git a/src/interfaces/assistants_web/src/components/UI/index.ts b/src/interfaces/assistants_web/src/components/UI/index.ts index 2ba8c52615..d7d2c8e614 100644 --- a/src/interfaces/assistants_web/src/components/UI/index.ts +++ b/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'; diff --git a/src/interfaces/assistants_web/src/stores/persistedStore.ts b/src/interfaces/assistants_web/src/stores/persistedStore.ts index 8cf2f99d13..45d48bec21 100644 --- a/src/interfaces/assistants_web/src/stores/persistedStore.ts +++ b/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, }), diff --git a/src/interfaces/assistants_web/src/stores/slices/settingsSlice.ts b/src/interfaces/assistants_web/src/stores/slices/settingsSlice.ts index 8b278667df..d57cdb2777 100644 --- a/src/interfaces/assistants_web/src/stores/slices/settingsSlice.ts +++ b/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 ({ + ...state, + showCitations: showCitations, + })); + }, setIsHotKeysDialogOpen(isOpen: boolean) { set((state) => ({ ...state,