add enable / disable tools in main chat

apps/shinkai-desktop/src/components/chat/chat-action-bar/chat-config-action-bar.tsx

@@ -86,27 +86,6 @@ function ChatConfigForm({ form }: ChatConfigFormProps) {
           </FormItem>
         )}
       />
-      <FormField
-        control={form.control}
-        name="useTools"
-        render={({ field }) => (
-          <FormItem className="flex w-full flex-col gap-3">
-            <div className="flex gap-3">
-              <FormControl>
-                <Switch
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-              <div className="space-y-1 leading-none">
-                <FormLabel className="static space-y-1.5 text-sm text-white">
-                  Enable Tools
-                </FormLabel>
-              </div>
-            </div>
-          </FormItem>
-        )}
-      />
       <FormField
         control={form.control}
         name="temperature"

apps/shinkai-desktop/src/components/chat/chat-action-bar/tools-switch-action-bar.tsx

@@ -0,0 +1,131 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { extractJobIdFromInbox } from '@shinkai_network/shinkai-message-ts/utils/inbox_name_handler';
+import { useUpdateChatConfig } from '@shinkai_network/shinkai-node-state/v2/mutations/updateChatConfig/useUpdateChatConfig';
+import { useGetChatConfig } from '@shinkai_network/shinkai-node-state/v2/queries/getChatConfig/useGetChatConfig';
+import {
+  Switch,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@shinkai_network/shinkai-ui';
+import { ToolsIcon } from '@shinkai_network/shinkai-ui/assets';
+import { cn } from '@shinkai_network/shinkai-ui/utils';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+import { toast } from 'sonner';
+
+import { useAuth } from '../../../store/auth';
+import { actionButtonClassnames } from '../conversation-footer';
+import {
+  chatConfigFormSchema,
+  ChatConfigFormSchemaType,
+} from './chat-config-action-bar';
+
+interface ToolsSwitchActionBarProps {
+  checked: boolean;
+  disabled?: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+export function ToolsSwitchActionBar({
+  disabled,
+  checked,
+  onCheckedChange,
+}: ToolsSwitchActionBarProps) {
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <label
+            className={cn(
+              actionButtonClassnames,
+              'flex min-w-[74px] items-center justify-between gap-2 px-2',
+            )}
+          >
+            <ToolsIcon className="h-4 w-4" />
+            <Switch
+              checked={checked}
+              disabled={disabled}
+              onCheckedChange={onCheckedChange}
+            />
+            <span>AI Actions</span>
+          </label>
+        </TooltipTrigger>
+        <TooltipPortal>
+          <TooltipContent>
+            AI Actions (Tools) {checked ? '(Enabled)' : '(Disabled)'}
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export function UpdateToolsSwitchActionBar() {
+  const auth = useAuth((state) => state.auth);
+  const { inboxId: encodedInboxId = '' } = useParams();
+  const inboxId = decodeURIComponent(encodedInboxId);
+
+  const chatConfigForm = useForm<ChatConfigFormSchemaType>({
+    resolver: zodResolver(chatConfigFormSchema),
+  });
+
+  const { data: chatConfig } = useGetChatConfig(
+    {
+      nodeAddress: auth?.node_address ?? '',
+      token: auth?.api_v2_key ?? '',
+      jobId: extractJobIdFromInbox(inboxId),
+    },
+    { enabled: !!inboxId },
+  );
+
+  useEffect(() => {
+    if (chatConfig) {
+      chatConfigForm.reset({
+        stream: chatConfig.stream,
+        customPrompt: chatConfig.custom_prompt ?? '',
+        temperature: chatConfig.temperature,
+        topP: chatConfig.top_p,
+        topK: chatConfig.top_k,
+        useTools: chatConfig.use_tools,
+      });
+    }
+  }, [chatConfig, chatConfigForm]);
+
+  const { mutateAsync: updateChatConfig, isPending } = useUpdateChatConfig({
+    onError: (error) => {
+      toast.error('Use tools update failed', {
+        description: error.response?.data?.message ?? error.message,
+      });
+    },
+  });
+
+  console.log(chatConfigForm.getValues());
+
+  const handleUpdateTool = async (useTools: boolean) => {
+    await updateChatConfig({
+      nodeAddress: auth?.node_address ?? '',
+      token: auth?.api_v2_key ?? '',
+      jobId: extractJobIdFromInbox(inboxId),
+      jobConfig: {
+        stream: chatConfigForm.getValues().stream,
+        custom_prompt: chatConfigForm.getValues().customPrompt ?? '',
+        temperature: chatConfigForm.getValues().temperature,
+        top_p: chatConfigForm.getValues().topP,
+        top_k: chatConfigForm.getValues().topK,
+        use_tools: useTools,
+      },
+    });
+  };
+
+  return (
+    <ToolsSwitchActionBar
+      checked={chatConfigForm.watch('useTools')}
+      disabled={isPending}
+      onCheckedChange={handleUpdateTool}
+    />
+  );
+}

apps/shinkai-desktop/src/components/chat/conversation-footer.tsx

@@ -73,6 +73,10 @@ import {
 } from './chat-action-bar/chat-config-action-bar';
 import { FileSelectionActionBar } from './chat-action-bar/file-selection-action-bar';
 import PromptSelectionActionBar from './chat-action-bar/prompt-selection-action-bar';
+import {
+  ToolsSwitchActionBar,
+  UpdateToolsSwitchActionBar,
+} from './chat-action-bar/tools-switch-action-bar';
 import { streamingSupportedModels } from './constants';
 import { useSetJobScope } from './context/set-job-scope-context';
 
@@ -365,14 +369,13 @@ function ConversationEmptyFooter() {
                             }}
                             onClick={openFilePicker}
                           />
-                          <input
-                            {...getInputFileProps({
-                              onChange: chatForm.register('files').onChange,
-                            })}
-                            {...chatForm.register('files')}
-                          />
-
                           <PromptSelectionActionBar />
+                          <ToolsSwitchActionBar
+                            checked={chatConfigForm.watch('useTools')}
+                            onCheckedChange={(checked) => {
+                              chatConfigForm.setValue('useTools', checked);
+                            }}
+                          />
                         </div>
                         {!isAgentInbox && (
                           <CreateChatConfigActionBar form={chatConfigForm} />
@@ -524,15 +527,6 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
     },
   });
 
-  const selectedTool = chatForm.watch('tool');
-
-  const promptSelected = usePromptSelectionStore(
-    (state) => state.promptSelected,
-  );
-
-  const currentInbox = useGetCurrentInbox();
-  const isAgentInbox = currentInbox?.agent?.type === 'Agent';
-
   const { data: chatConfig } = useGetChatConfig(
     {
       nodeAddress: auth?.node_address ?? '',
@@ -542,6 +536,40 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
     { enabled: !!inboxId },
   );
 
+  const chatConfigForm = useForm<ChatConfigFormSchemaType>({
+    resolver: zodResolver(chatConfigFormSchema),
+    defaultValues: {
+      stream: chatConfig?.stream ?? DEFAULT_CHAT_CONFIG.stream,
+      customPrompt: chatConfig?.custom_prompt ?? '',
+      temperature: chatConfig?.temperature ?? DEFAULT_CHAT_CONFIG.temperature,
+      topP: chatConfig?.top_p ?? DEFAULT_CHAT_CONFIG.top_p,
+      topK: chatConfig?.top_k ?? DEFAULT_CHAT_CONFIG.top_k,
+      useTools: chatConfig?.use_tools ?? DEFAULT_CHAT_CONFIG.use_tools,
+    },
+  });
+
+  useEffect(() => {
+    if (chatConfig) {
+      chatConfigForm.reset({
+        stream: chatConfig.stream,
+        customPrompt: chatConfig.custom_prompt ?? '',
+        temperature: chatConfig.temperature,
+        topP: chatConfig.top_p,
+        topK: chatConfig.top_k,
+        useTools: chatConfig.use_tools,
+      });
+    }
+  }, [chatConfig, chatConfigForm]);
+
+  const selectedTool = chatForm.watch('tool');
+
+  const promptSelected = usePromptSelectionStore(
+    (state) => state.promptSelected,
+  );
+
+  const currentInbox = useGetCurrentInbox();
+  const isAgentInbox = currentInbox?.agent?.type === 'Agent';
+
   const hasProviderEnableStreaming = streamingSupportedModels.includes(
     currentInbox?.agent?.model.split(':')?.[0] as Models,
   );
@@ -707,6 +735,7 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
                             onClick={openFilePicker}
                           />
                           <PromptSelectionActionBar />
+                          <UpdateToolsSwitchActionBar />
                         </div>
 
                         {!isAgentInbox && <UpdateChatConfigActionBar />}