frontend: Add Advanced settings + global Show steps (#808)

* Add global show steps and advanced settings

* Set to false by defualt

src/backend/routers/chat.py

@@ -60,6 +60,7 @@ async def chat_stream(
         ctx,
     ) = process_chat(session, chat_request, request, ctx)
 
+
     return EventSourceResponse(
         generate_chat_stream(
             session,

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

@@ -3,7 +3,7 @@
 import { PropsWithChildren, useState } from 'react';
 
 import { MobileHeader } from '@/components/Global';
-import { Button, DarkModeToggle, Icon, Tabs, Text } from '@/components/UI';
+import { Button, DarkModeToggle, Icon, ShowStepsToggle, Tabs, Text } from '@/components/UI';
 import { useDeleteAuthTool, useListTools, useNotify } from '@/hooks';
 import { cn, getToolAuthUrl } from '@/utils';
 
@@ -14,7 +14,11 @@ const tabs = [
   </div>,
   <div className="flex items-center gap-2" key="company">
     <Icon name="sun" kind="outline" />
-    <Text>appearance</Text>
+    <Text>Appearance</Text>
+  </div>,
+  <div className="flex items-center gap-2" key="company">
+    <Icon name="settings" kind="outline" />
+    <Text>Advanced</Text>
   </div>,
   <div className="flex items-center gap-2" key="private">
     <Icon name="profile" kind="outline" />
@@ -53,6 +57,7 @@ export const Settings = () => {
         >
           <Connections />
           <Appearance />
+          <Advanced />
           <Profile />
         </Tabs>
       </section>
@@ -66,30 +71,44 @@ const Wrapper: React.FC<PropsWithChildren> = ({ children }) => (
 
 const Connections = () => (
   <Wrapper>
-    <Text className="mb-10 dark:text-mushroom-950">
-      A list of connections that your assistants can access
+    <Text styleAs="h5" className="mb-6">
+      Connections your assistants can access
     </Text>
     <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
       <GoogleDriveConnection />
     </div>
   </Wrapper>
 );
 
-const Profile = () => {
+const Appearance = () => {
   return (
     <Wrapper>
-      <Button label="Sign out" href="/logout" kind="secondary" icon="sign-out" theme="default" />
+      <Text styleAs="h5" className="mb-6">
+        Mode
+      </Text>
+      <DarkModeToggle />
     </Wrapper>
   );
 };
 
-const Appearance = () => {
+const Advanced = () => {
   return (
     <Wrapper>
       <Text styleAs="h5" className="mb-6">
-        Appearance
+        Advanced
       </Text>
-      <DarkModeToggle />
+      <ShowStepsToggle />
+    </Wrapper>
+  );
+};
+
+const Profile = () => {
+  return (
+    <Wrapper>
+      <Text styleAs="h5" className="mb-6">
+        User Profile
+      </Text>
+      <Button label="Log out" href="/logout" kind="secondary" icon="sign-out" theme="default" />
     </Wrapper>
   );
 };

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

@@ -12,8 +12,10 @@ import {
   LongPressMenu,
 } from '@/components/UI';
 import { Breakpoint, useBreakpoint } from '@/hooks';
+import { useSettingsStore } from '@/stores';
 import { useExperimentalFeatures } from '@/hooks/use-experimentalFeatures';
 import { SynthesisStatus } from '@/hooks/use-synthesizer';
+
 import {
   type ChatMessage,
   isAbortedMessage,
@@ -62,7 +64,14 @@ export const MessageRow = forwardRef<HTMLDivElement, Props>(function MessageRowI
 
   const [isShowing, setIsShowing] = useState(false);
   const [isLongPressMenuOpen, setIsLongPressMenuOpen] = useState(false);
+
+  // For showing thinking steps
+  const { showSteps } = useSettingsStore();
   const [isStepsExpanded, setIsStepsExpanded] = useState(true);
+
+  useEffect(() => {
+    setIsStepsExpanded(showSteps);
+  }, [showSteps]);
 
   const { data: experimentalFeatures } = useExperimentalFeatures();
   const { longPressProps } = useLongPress({

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

@@ -0,0 +1,23 @@
+import { Switch, Text } from '@/components/UI';
+import { useSettingsStore } from '@/stores';
+
+export const ShowStepsToggle = () => {
+  const { showSteps, setShowSteps } = useSettingsStore();
+
+  const handleSwitchShowSteps = (checked: boolean) => {
+    setShowSteps(checked);
+  };
+
+  return (
+    <section className="flex gap-6">
+      <Text styleAs="label" className="font-medium">
+        Show thinking steps
+      </Text>
+      <Switch
+        checked={showSteps}
+        onChange={(checked: boolean) => handleSwitchShowSteps(checked)}
+        showCheckedState
+      />
+    </section>
+  );
+};

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 './ShowStepsToggle';
 export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';

src/interfaces/assistants_web/src/constants/tools.ts

@@ -17,7 +17,6 @@ export const AGENT_SETTINGS_TOOLS = [
   TOOL_HYBRID_WEB_SEARCH_ID,
   TOOL_PYTHON_INTERPRETER_ID,
   TOOL_WEB_SCRAPE_ID,
-  TOOL_CALCULATOR_ID,
 ];
 
 export const TOOL_FALLBACK_ICON = 'circles-four';

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

@@ -50,9 +50,11 @@ export const useSettingsStore = () => {
       disabledAssistantKnowledge: state.disabledAssistantKnowledge,
       isLeftPanelOpen: state.isLeftPanelOpen,
       isRightPanelOpen: state.isRightPanelOpen,
+      showSteps: state.showSteps,
       setLeftPanelOpen: state.setLeftPanelOpen,
       setRightPanelOpen: state.setRightPanelOpen,
       setUseAssistantKnowledge: state.setUseAssistantKnowledge,
+      setShowSteps: state.setShowSteps,
     }),
     shallow
   );

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

@@ -4,42 +4,51 @@ const INITIAL_STATE = {
   disabledAssistantKnowledge: [],
   isLeftPanelOpen: true,
   isRightPanelOpen: false,
+  showSteps: true,
 };
 
 type State = {
   disabledAssistantKnowledge: string[];
   isLeftPanelOpen: boolean;
   isRightPanelOpen: boolean;
+  showSteps: boolean;
 };
 
 type Actions = {
   setUseAssistantKnowledge: (useKnowledge: boolean, agentId: string) => void;
   setLeftPanelOpen: (isOpen: boolean) => void;
   setRightPanelOpen: (isOpen: boolean) => void;
+  setShowSteps: (showSteps: boolean) => void;
 };
 
 export type SettingsStore = State & Actions;
 
 export const createSettingsSlice: StateCreator<SettingsStore, [], [], SettingsStore> = (set) => ({
-  setUseAssistantKnowledge(useKnowledge, agentId) {
+  setUseAssistantKnowledge(useKnowledge: boolean, agentId: string) {
     set((state) => ({
       ...state,
       disabledAssistantKnowledge: useKnowledge
         ? state.disabledAssistantKnowledge.filter((id) => id !== agentId)
         : [...state.disabledAssistantKnowledge, agentId],
     }));
   },
-  setLeftPanelOpen(isOpen) {
+  setLeftPanelOpen(isOpen: boolean) {
     set((state) => ({
       ...state,
       isLeftPanelOpen: isOpen,
     }));
   },
-  setRightPanelOpen(isOpen) {
+  setRightPanelOpen(isOpen: boolean) {
     set((state) => ({
       ...state,
       isRightPanelOpen: isOpen,
     }));
   },
+  setShowSteps(showSteps: boolean) {
+    set((state) => ({
+      ...state,
+      showSteps: showSteps,
+    }));
+  },
   ...INITIAL_STATE,
 });