Merge pull request #505 from dcSpark/paulccari/update-ollama-warning

fix: update ollama tools alert
dcSpark · Oct 18, 2024 · 7462ed7 · 7462ed7
2 parents d680740 + 25eec57
commit 7462ed7
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 41 deletions.
diff --git a/apps/shinkai-desktop/src/components/chat/chat-action-bar/chat-config-action-bar.tsx b/apps/shinkai-desktop/src/components/chat/chat-action-bar/chat-config-action-bar.tsx
@@ -4,9 +4,7 @@ import { useTranslation } from '@shinkai_network/shinkai-i18n';
 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 { useGetLLMProviders } from '@shinkai_network/shinkai-node-state/v2/queries/getLLMProviders/useGetLLMProviders';
 import {
-  Alert,
   Button,
   Form,
   Popover,
@@ -30,9 +28,7 @@ import {
   Switch,
   Textarea,
 } from '@shinkai_network/shinkai-ui';
-import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { Settings2 } from 'lucide-react';
-import { InfoCircleIcon } from 'primereact/icons/infocircle';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { UseFormReturn } from 'react-hook-form';
@@ -41,7 +37,6 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { useAuth } from '../../../store/auth';
-import { useSettings } from '../../../store/settings';
 import { actionButtonClassnames } from '../conversation-footer';
 
 export const chatConfigFormSchema = z.object({
@@ -59,33 +54,14 @@ interface ChatConfigFormProps {
 }
 
 function ChatConfigForm({ form }: ChatConfigFormProps) {
-  const selectedAIModel = useSelectedAIModel();
-
-  const isOllamaProvider = selectedAIModel?.model?.split(':')?.[0] === 'ollama';
-
   return (
     <div className="space-y-6">
       <FormField
         control={form.control}
         name="stream"
         render={({ field }) => (
           <FormItem className="flex w-full flex-col gap-3">
-            {isOllamaProvider && (
-              <Alert
-                className={cn(
-                  'cursor-default [&>svg]:static [&>svg~*]:pl-0',
-                  'flex w-full items-center gap-2 rounded-lg px-3 py-2',
-                )}
-                variant="info"
-              >
-                <InfoCircleIcon className="h-3.5 w-3.5 shrink-0" />
-                <span className="whitespace-nowrap text-xs">
-                  Turn off stream if you want to use{' '}
-                  <span className="font-semibold">Tools</span>
-                </span>
-              </Alert>
-            )}
-            <div className="flex gap-1">
+            <div className="flex gap-3">
               <FormControl>
                 <Switch
                   checked={field.value}
@@ -252,20 +228,6 @@ function ChatConfigForm({ form }: ChatConfigFormProps) {
   );
 }
 
-const useSelectedAIModel = () => {
-  const defaultAgentId = useSettings((state) => state.defaultAgentId);
-  const auth = useAuth((state) => state.auth);
-
-  const { llmProviders } = useGetLLMProviders({
-    nodeAddress: auth?.node_address ?? '',
-    token: auth?.api_v2_key ?? '',
-  });
-  const selectedProvider = llmProviders?.find(
-    (provider) => provider.id === defaultAgentId,
-  );
-  return selectedProvider;
-};
-
 export function UpdateChatConfigActionBar() {
   const auth = useAuth((state) => state.auth);
   const { inboxId: encodedInboxId = '' } = useParams();

diff --git a/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx b/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx
@@ -30,6 +30,7 @@ import { useGetChatConversationWithPagination } from '@shinkai_network/shinkai-n
 import { useGetLLMProviders } from '@shinkai_network/shinkai-node-state/v2/queries/getLLMProviders/useGetLLMProviders';
 import { useGetWorkflowSearch } from '@shinkai_network/shinkai-node-state/v2/queries/getWorkflowSearch/useGetWorkflowSearch';
 import {
+  Alert,
   Button,
   ChatInputArea,
   Form,
@@ -55,6 +56,7 @@ import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { partial } from 'filesize';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Paperclip, SendIcon, X, XIcon } from 'lucide-react';
+import { InfoCircleIcon } from 'primereact/icons/infocircle';
 import { useEffect, useMemo, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useForm, useWatch } from 'react-hook-form';
@@ -383,7 +385,10 @@ function ConversationEmptyFooter() {
                         <PromptSelectionActionBar />
                         <WorkflowSelectionActionBar />
                       </div>
-                      <CreateChatConfigActionBar form={chatConfigForm} />
+                      <div className="flex items-center gap-2">
+                        <ToolsDisabledAlert />
+                        <CreateChatConfigActionBar form={chatConfigForm} />
+                      </div>
                     </div>
 
                     <ChatInputArea
@@ -772,7 +777,10 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
                         <PromptSelectionActionBar />
                         <WorkflowSelectionActionBar />
                       </div>
-                      <UpdateChatConfigActionBar />
+                      <div className="flex items-center gap-2">
+                        <ToolsDisabledAlert />
+                        <UpdateChatConfigActionBar />
+                      </div>
                     </div>
 
                     <ChatInputArea
@@ -1025,3 +1033,50 @@ function useFirstMessageWorkflow() {
 
   return firstMessageWorkflow;
 }
+
+const useSelectedAIModel = () => {
+  const defaultAgentId = useSettings((state) => state.defaultAgentId);
+  const auth = useAuth((state) => state.auth);
+
+  const { llmProviders } = useGetLLMProviders({
+    nodeAddress: auth?.node_address ?? '',
+    token: auth?.api_v2_key ?? '',
+  });
+  const selectedProvider = llmProviders?.find(
+    (provider) => provider.id === defaultAgentId,
+  );
+  return selectedProvider;
+};
+
+const ToolsDisabledAlert = () => {
+  const selectedAIModel = useSelectedAIModel();
+
+  const isOllamaProvider = selectedAIModel?.model?.split(':')?.[0] === 'ollama';
+
+  return isOllamaProvider ? (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Alert
+            className={cn(
+              'cursor-pointer [&>svg]:static [&>svg~*]:pl-0',
+              'flex w-full items-center gap-2 rounded-lg px-3 py-1.5',
+            )}
+            variant="info"
+          >
+            <InfoCircleIcon className="h-3.5 w-3.5 shrink-0" />
+            <span className="whitespace-nowrap text-xs">Tools disabled</span>
+          </Alert>
+        </TooltipTrigger>
+        <TooltipPortal>
+          <TooltipContent>
+            <p>
+              Turn off streaming in chat config to allow tool usage (Ollama
+              limitation).
+            </p>
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    </TooltipProvider>
+  ) : null;
+};