feat: misc fixes, UI improvements, perf improvements (#598)

* feat: tasks out of experimental * feat: remove registration code * fix: improve remove llm modal * refactor: button + unify * feat: set timeout request 10 min * clean up * fix: update prompt * unify buttons * unify buttons * fix types * fix types * refactor: chat message and improve performance * refacotr: tooltip provider * disable react scan * feat: implement enable/disable all tools, search files * fix UI * fixes * fixes * feat: enable search files * fix: enable more than 3 files upload * clean up * fix types * fix
dcSpark · Jan 17, 2025 · bb4305c · bb4305c
1 parent b12c2ba
commit bb4305c
Show file tree

Hide file tree

Showing 58 changed files with 2,654 additions and 2,098 deletions.
diff --git a/apps/shinkai-desktop/src/App.tsx b/apps/shinkai-desktop/src/App.tsx
@@ -1,6 +1,6 @@
 import { I18nProvider } from '@shinkai_network/shinkai-i18n';
 import { QueryProvider } from '@shinkai_network/shinkai-node-state';
-import { Toaster } from '@shinkai_network/shinkai-ui';
+import { Toaster, TooltipProvider } from '@shinkai_network/shinkai-ui';
 import { info } from '@tauri-apps/plugin-log';
 import { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -18,19 +18,21 @@ function App() {
   }, []);
   useSyncStorageSecondary();
   return (
-    <I18nProvider>
-      <ErrorBoundary FallbackComponent={FullPageErrorFallback}>
-        <AnalyticsProvider>
-          <QueryProvider>
-            <OAuthConnect />
-            <Router>
-              <AppRoutes />
-            </Router>
-            <Toaster />
-          </QueryProvider>
-        </AnalyticsProvider>
-      </ErrorBoundary>
-    </I18nProvider>
+    <TooltipProvider delayDuration={0}>
+      <I18nProvider>
+        <ErrorBoundary FallbackComponent={FullPageErrorFallback}>
+          <AnalyticsProvider>
+            <QueryProvider>
+              <OAuthConnect />
+              <Router>
+                <AppRoutes />
+              </Router>
+              <Toaster />
+            </QueryProvider>
+          </AnalyticsProvider>
+        </ErrorBoundary>
+      </I18nProvider>
+    </TooltipProvider>
   );
 }
 

diff --git a/apps/shinkai-desktop/src/components/agent/agent-form.tsx b/apps/shinkai-desktop/src/components/agent/agent-form.tsx
@@ -1,9 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { PlusIcon } from '@radix-ui/react-icons';
 import { useTranslation } from '@shinkai_network/shinkai-i18n';
-import { Agent } from '@shinkai_network/shinkai-message-ts/api/agents/types';
-import { JobConfig } from '@shinkai_network/shinkai-message-ts/api/jobs/types';
-import { ShinkaiPath } from '@shinkai_network/shinkai-message-ts/api/jobs/types';
 import { DEFAULT_CHAT_CONFIG } from '@shinkai_network/shinkai-node-state/v2/constants';
 import { useCreateAgent } from '@shinkai_network/shinkai-node-state/v2/mutations/createAgent/useCreateAgent';
 import { useUpdateAgent } from '@shinkai_network/shinkai-node-state/v2/mutations/updateAgent/useUpdateAgent';
@@ -100,11 +97,19 @@ function AgentForm({ mode }: AgentFormProps) {
   const auth = useAuth((state) => state.auth);
   const navigate = useNavigate();
   const { t } = useTranslation();
-  const setSetJobScopeOpen = useSetJobScope((state) => state.setSetJobScopeOpen);
+  const setSetJobScopeOpen = useSetJobScope(
+    (state) => state.setSetJobScopeOpen,
+  );
   const selectedKeys = useSetJobScope((state) => state.selectedKeys);
-  const selectedFileKeysRef = useSetJobScope((state) => state.selectedFileKeysRef);
-  const selectedFolderKeysRef = useSetJobScope((state) => state.selectedFolderKeysRef);
-  const onSelectedKeysChange = useSetJobScope((state) => state.onSelectedKeysChange);
+  const selectedFileKeysRef = useSetJobScope(
+    (state) => state.selectedFileKeysRef,
+  );
+  const selectedFolderKeysRef = useSetJobScope(
+    (state) => state.selectedFolderKeysRef,
+  );
+  const onSelectedKeysChange = useSetJobScope(
+    (state) => state.onSelectedKeysChange,
+  );
 
   const { data: agent } = useGetAgent({
     agentId: agentId ?? '',
@@ -135,21 +140,25 @@ function AgentForm({ mode }: AgentFormProps) {
       scope: {
         vector_fs_items: [],
         vector_fs_folders: [],
-        vector_search_mode: "FillUpTo25k"
-      }
+        vector_search_mode: 'FillUpTo25k',
+      },
     },
   });
 
   // Effect to update form when selected items change
   useEffect(() => {
-    if (selectedKeys || selectedFileKeysRef.size > 0 || selectedFolderKeysRef.size > 0) {
+    if (
+      selectedKeys ||
+      selectedFileKeysRef.size > 0 ||
+      selectedFolderKeysRef.size > 0
+    ) {
       const agentData = {
         ...form.getValues(),
         scope: {
           vector_fs_items: Array.from(selectedFileKeysRef.values()),
           vector_fs_folders: Array.from(selectedFolderKeysRef.values()),
-          vector_search_mode: "FillUpTo25k"
-        }
+          vector_search_mode: 'FillUpTo25k',
+        },
       };
       form.setValue('scope', agentData.scope);
     }
@@ -161,7 +170,7 @@ function AgentForm({ mode }: AgentFormProps) {
       const scope = {
         vector_fs_items: Array.from(selectedFileKeysRef.values()),
         vector_fs_folders: Array.from(selectedFolderKeysRef.values()),
-        vector_search_mode: "FillUpTo25k"
+        vector_search_mode: 'FillUpTo25k',
       };
       form.setValue('scope', scope);
     }
@@ -179,7 +188,8 @@ function AgentForm({ mode }: AgentFormProps) {
       form.setValue('config', {
         custom_prompt: agent.config?.custom_prompt ?? '',
         custom_system_prompt: agent.config?.custom_system_prompt ?? '',
-        temperature: agent.config?.temperature ?? DEFAULT_CHAT_CONFIG.temperature,
+        temperature:
+          agent.config?.temperature ?? DEFAULT_CHAT_CONFIG.temperature,
         top_k: agent.config?.top_k ?? DEFAULT_CHAT_CONFIG.top_k,
         top_p: agent.config?.top_p ?? DEFAULT_CHAT_CONFIG.top_p,
         use_tools: agent.config?.use_tools ?? true,
@@ -189,26 +199,27 @@ function AgentForm({ mode }: AgentFormProps) {
       form.setValue('llmProviderId', agent.llm_provider_id);
 
       // Set selected files and folders
-      if (agent.scope?.vector_fs_items?.length || agent.scope?.vector_fs_folders?.length) {
-        const selectedVRFilesPathMap = agent.scope.vector_fs_items.reduce<Record<string, { checked: boolean }>>(
-          (acc: Record<string, { checked: boolean }>, filePath: string) => {
-            acc[filePath] = {
-              checked: true,
-            };
-            return acc;
-          },
-          {},
-        );
-
-        const selectedVRFoldersPathMap = agent.scope.vector_fs_folders.reduce<Record<string, { checked: boolean }>>(
-          (acc: Record<string, { checked: boolean }>, folderPath: string) => {
-            acc[folderPath] = {
-              checked: true,
-            };
-            return acc;
-          },
-          {},
-        );
+      if (
+        agent.scope?.vector_fs_items?.length ||
+        agent.scope?.vector_fs_folders?.length
+      ) {
+        const selectedVRFilesPathMap = agent.scope.vector_fs_items.reduce<
+          Record<string, { checked: boolean }>
+        >((acc: Record<string, { checked: boolean }>, filePath: string) => {
+          acc[filePath] = {
+            checked: true,
+          };
+          return acc;
+        }, {});
+
+        const selectedVRFoldersPathMap = agent.scope.vector_fs_folders.reduce<
+          Record<string, { checked: boolean }>
+        >((acc: Record<string, { checked: boolean }>, folderPath: string) => {
+          acc[folderPath] = {
+            checked: true,
+          };
+          return acc;
+        }, {});
 
         onSelectedKeysChange({
           ...selectedVRFilesPathMap,
@@ -218,7 +229,7 @@ function AgentForm({ mode }: AgentFormProps) {
         form.setValue('scope', {
           vector_fs_items: agent.scope.vector_fs_items,
           vector_fs_folders: agent.scope.vector_fs_folders,
-          vector_search_mode: agent.scope.vector_search_mode || "FillUpTo25k"
+          vector_search_mode: agent.scope.vector_search_mode || 'FillUpTo25k',
         });
       }
     }
@@ -283,8 +294,8 @@ function AgentForm({ mode }: AgentFormProps) {
       scope: {
         vector_fs_items: Array.from(selectedFileKeysRef.values()),
         vector_fs_folders: Array.from(selectedFolderKeysRef.values()),
-        vector_search_mode: "FillUpTo25k"
-      }
+        vector_search_mode: 'FillUpTo25k',
+      },
     };
 
     if (mode === 'edit') {
@@ -306,7 +317,10 @@ function AgentForm({ mode }: AgentFormProps) {
 
   return (
     <TooltipProvider>
-      <SubpageLayout className="max-w-4xl" title={mode === 'edit' ? 'Edit Agent' : 'Create new Agent'}>
+      <SubpageLayout
+        className="max-w-4xl"
+        title={mode === 'edit' ? 'Edit Agent' : 'Create new Agent'}
+      >
         <p className="text-gray-80 -mt-8 py-3 pb-6 text-center text-sm">
           Create and explore custom AI agents with tailored instructions and
           diverse skills.
@@ -406,11 +420,10 @@ function AgentForm({ mode }: AgentFormProps) {
                     </span>
                     <div className="flex items-center gap-1">
                       <Button
-                        className="h-[30px] text-xs"
                         onClick={() => {
                           navigate('/tools/create');
                         }}
-                        size="auto"
+                        size="xs"
                         variant="outline"
                       >
                         <PlusIcon className="mr-1 size-3.5" />
@@ -802,7 +815,9 @@ function AgentForm({ mode }: AgentFormProps) {
                     >
                       <div className="flex items-center gap-2">
                         <FilesIcon className="h-4 w-4" />
-                        <p className="text-xs text-white">{t('vectorFs.localFiles')}</p>
+                        <p className="text-xs text-white">
+                          {t('vectorFs.localFiles')}
+                        </p>
                       </div>
                       {Object.keys(selectedKeys || {}).length > 0 ? (
                         <Badge className="bg-brand inline-flex h-5 w-5 items-center justify-center rounded-full border-gray-200 p-0 text-center text-gray-50">
@@ -846,4 +861,4 @@ function AgentForm({ mode }: AgentFormProps) {
   );
 }
 
-export default AgentForm; 
+export default AgentForm;
diff --git a/apps/shinkai-desktop/src/components/agent/agents.tsx b/apps/shinkai-desktop/src/components/agent/agents.tsx
@@ -44,13 +44,13 @@ function Agents() {
     <div className="flex h-full flex-col space-y-3">
       <div className="absolute right-3 top-0">
         <Button
-          className="px-4"
+          className="min-w-[100px]"
           onClick={() => {
             navigate('/add-agent');
           }}
           size="sm"
         >
-          <Plus className="mr-2 h-4 w-4" />
+          <Plus className="h-4 w-4" />
           <span>Add Agent</span>
         </Button>
       </div>
@@ -67,7 +67,7 @@ function Agents() {
           </div>
 
           <Button
-            className="px-4"
+            className="min-w-[100px]"
             onClick={() => {
               navigate('/add-agent');
             }}

diff --git a/apps/shinkai-desktop/src/components/chat/chat-action-bar/ai-update-selection-action-bar.tsx b/apps/shinkai-desktop/src/components/chat/chat-action-bar/ai-update-selection-action-bar.tsx
@@ -20,14 +20,15 @@ import {
 import { AIAgentIcon } from '@shinkai_network/shinkai-ui/assets';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { BoltIcon, BotIcon, ChevronDownIcon } from 'lucide-react';
+import { memo } from 'react';
 import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import { useGetCurrentInbox } from '../../../hooks/use-current-inbox';
 import { useAuth } from '../../../store/auth';
 import { actionButtonClassnames } from '../conversation-footer';
 
-export function AIModelSelector({
+export function AIModelSelectorBase({
   value,
   onValueChange,
 }: {
@@ -143,7 +144,13 @@ export function AIModelSelector({
     </DropdownMenu>
   );
 }
-export function AiUpdateSelectionActionBar({ inboxId }: { inboxId?: string }) {
+export const AIModelSelector = memo(AIModelSelectorBase);
+
+export function AiUpdateSelectionActionBarBase({
+  inboxId,
+}: {
+  inboxId?: string;
+}) {
   const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const currentInbox = useGetCurrentInbox(inboxId);
@@ -179,3 +186,7 @@ export function AiUpdateSelectionActionBar({ inboxId }: { inboxId?: string }) {
     />
   );
 }
+export const AiUpdateSelectionActionBar = memo(
+  AiUpdateSelectionActionBarBase,
+  (prevProps, nextProps) => prevProps.inboxId === nextProps.inboxId,
+);
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
@@ -33,7 +33,7 @@ import {
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { Settings2 } from 'lucide-react';
 import { InfoCircleIcon } from 'primereact/icons/infocircle';
-import { useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { UseFormReturn } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
@@ -257,7 +257,7 @@ function ChatConfigForm({ form }: ChatConfigFormProps) {
   );
 }
 
-export function UpdateChatConfigActionBar() {
+export function UpdateChatConfigActionBarBase() {
   const auth = useAuth((state) => state.auth);
   const { inboxId: encodedInboxId = '' } = useParams();
   const inboxId = decodeURIComponent(encodedInboxId);
@@ -368,17 +368,19 @@ export function UpdateChatConfigActionBar() {
                   <div className="flex items-center justify-end gap-2">
                     <PopoverClose asChild>
                       <Button
-                        className="h-9 min-w-[100px] gap-2 rounded-xl"
-                        size="sm"
+                        className="min-w-[100px]"
+                        rounded="lg"
+                        size="xs"
                         variant="outline"
                       >
                         <span>{t('common.cancel')}</span>
                       </Button>
                     </PopoverClose>
                     <PopoverClose asChild>
                       <Button
-                        className="h-9 min-w-[100px] gap-2 rounded-xl"
-                        size="sm"
+                        className="min-w-[100px]"
+                        rounded="lg"
+                        size="xs"
                         type={'submit'}
                       >
                         <span>{t('common.save')}</span>
@@ -395,6 +397,9 @@ export function UpdateChatConfigActionBar() {
     </div>
   );
 }
+
+export const UpdateChatConfigActionBar = memo(UpdateChatConfigActionBarBase);
+
 export function CreateChatConfigActionBar({
   form,
 }: {
@@ -444,10 +449,7 @@ export function CreateChatConfigActionBar({
                       </Button>
                     </PopoverClose>
                     <PopoverClose asChild>
-                      <Button
-                        className="h-9 min-w-[100px] gap-2 rounded-xl"
-                        size="sm"
-                      >
+                      <Button className="min-w-[100px]" rounded="lg" size="xs">
                         <span>{t('common.save')}</span>
                       </Button>
                     </PopoverClose>

diff --git a/apps/shinkai-desktop/src/components/chat/chat-action-bar/file-selection-action-bar.tsx b/apps/shinkai-desktop/src/components/chat/chat-action-bar/file-selection-action-bar.tsx
@@ -16,7 +16,7 @@ type FileUploadInputProps = {
   onClick: () => void;
 };
 
-export function FileSelectionActionBar({
+function FileSelectionActionBarBase({
   onClick,
   inputProps,
 }: FileUploadInputProps) {
@@ -45,3 +45,7 @@ export function FileSelectionActionBar({
     </>
   );
 }
+export const FileSelectionActionBar = React.memo(
+  FileSelectionActionBarBase,
+  () => true,
+);