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,