feat: hide reset options and workflow misc fixes (#393)

* feat: hide some reset options * fix: slash command list * fix: search input focus * fix: error message * fix: sticky date badge * fix: types * fixes * fix pagination limit * fix: refactor to adjust container width only using css * fix: overflow * refactor
dcSpark · Jul 31, 2024 · e67baec · e67baec
1 parent bdef762
commit e67baec
Show file tree

Hide file tree

Showing 16 changed files with 234 additions and 277 deletions.
diff --git a/apps/shinkai-desktop/src/components/error-boundary.tsx b/apps/shinkai-desktop/src/components/error-boundary.tsx
@@ -1,11 +1,13 @@
 const FullPageErrorFallback = ({ error }: { error: Error }) => {
   return (
     <div
-      className="flex h-screen flex-col items-center justify-center text-red-400"
+      className="flex h-screen flex-col items-center justify-center px-8 text-red-400"
       role="alert"
     >
       <p>Something went wrong. Try refreshing the app.</p>
-      <pre>{error.message}</pre>
+      <pre className="whitespace-pre-wrap text-balance break-all text-center">
+        {error.message}
+      </pre>
     </div>
   );
 };

diff --git a/apps/shinkai-desktop/src/components/reset-storage-before-connect-confirmation-prompt.tsx b/apps/shinkai-desktop/src/components/reset-storage-before-connect-confirmation-prompt.tsx
@@ -7,9 +7,9 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
+  // AlertTitle,
   Button,
 } from '@shinkai_network/shinkai-ui';
-import { useNavigate } from 'react-router-dom';
 
 import {
   useShinkaiNodeKillMutation,
@@ -27,8 +27,8 @@ export const ResetStorageBeforeConnectConfirmationPrompt = ({
   onRestore?: () => void;
   onReset?: () => void;
 } & AlertDialogProps) => {
-  const navigate = useNavigate();
-  const { t, Trans } = useTranslation();
+  // const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const { mutateAsync: shinkaiNodeKill } = useShinkaiNodeKillMutation();
   const { mutateAsync: shinkaiNodeSpawn } = useShinkaiNodeSpawnMutation();
@@ -41,12 +41,12 @@ export const ResetStorageBeforeConnectConfirmationPrompt = ({
     }
   };
 
-  const restore = async () => {
-    navigate('/restore');
-    if (typeof onRestore === 'function') {
-      onRestore();
-    }
-  };
+  // const restore = async () => {
+  //   navigate('/restore');
+  //   if (typeof onRestore === 'function') {
+  //     onRestore();
+  //   }
+  // };
 
   const reset = async (preserveKeys: boolean) => {
     await shinkaiNodeKill();
@@ -70,71 +70,35 @@ export const ResetStorageBeforeConnectConfirmationPrompt = ({
                 <span className="text-sm">
                   {t('shinkaiNode.resetNodeWarning.description')}
                 </span>
-                <div className="flex flex-col space-y-1">
-                  <span className="text-xs">
-                    <span aria-label="restore" className="emoji" role="img">
-                      🔑
-                    </span>
-                    <Trans
-                      components={{
-                        b: <b className="ml-1" />,
-                      }}
-                      i18nKey="shinkaiNode.resetNodeWarning.option1"
-                    />
-                  </span>
-                  <span className="text-xs">
-                    <span aria-label="reset data" className="emoji" role="img">
-                      🗑️
-                    </span>
-                    <Trans
-                      components={{
-                        b: <b className="ml-1" />,
-                      }}
-                      i18nKey="shinkaiNode.resetNodeWarning.option2"
-                    />
-                  </span>
-                  <span className="text-xs">
-                    <span aria-label="reset all" className="emoji" role="img">
-                      💣
-                    </span>
-                    <Trans
-                      components={{
-                        b: <b className="ml-1" />,
-                      }}
-                      i18nKey="shinkaiNode.resetNodeWarning.option3"
-                    />
-                  </span>
-                </div>
+                <div className="flex flex-col space-y-1" />
               </div>
             </div>
           </AlertDialogDescription>
         </AlertDialogHeader>
-        <AlertDialogFooter className="mt-4 grid gap-2">
-          <Button className="mt-0 flex-1 text-sm" onClick={() => restore()}>
-            <span aria-label="restore" className="emoji" role="img">
-              🔑 {t('common.restore')}
-            </span>
-          </Button>
+        <AlertDialogFooter className="mt-4 grid gap-2.5">
+          {/*<Button className="mt-0 flex-1 text-sm" onClick={() => restore()}>*/}
+          {/*  <span aria-label="restore" className="emoji" role="img">*/}
+          {/*    🔑 {t('common.restore')}*/}
+          {/*  </span>*/}
+          {/*</Button>*/}
           <Button
-            className="mt-0 flex-1 text-sm"
+            className="flex-1 text-sm"
             onClick={() => reset(true)}
-            variant={'ghost'}
-          >
-            <span aria-label="reset" className="emoji" role="img">
-              🗑️ {t('common.resetData')}
-            </span>
-          </Button>
-          <Button
-            className="mt-0 flex-1 text-sm"
-            onClick={() => reset(false)}
-            variant={'ghost'}
+            variant={'destructive'}
           >
-            <span aria-label="reset all" className="emoji" role="img">
-              💣 {t('common.resetAll')}
-            </span>
+            <span>{t('common.resetData')}</span>
           </Button>
+          {/*<Button*/}
+          {/*  className="mt-0 flex-1 text-sm"*/}
+          {/*  onClick={() => reset(false)}*/}
+          {/*  variant={'ghost'}*/}
+          {/*>*/}
+          {/*  <span aria-label="reset all" className="emoji" role="img">*/}
+          {/*    💣 {t('common.resetAll')}*/}
+          {/*  </span>*/}
+          {/*</Button>*/}
           <Button
-            className="mt-0 flex-1 text-sm"
+            className="flex-1 text-sm"
             onClick={() => cancel()}
             variant={'outline'}
           >

diff --git a/apps/shinkai-desktop/src/components/workflow/context/workflow-selection-context.tsx b/apps/shinkai-desktop/src/components/workflow/context/workflow-selection-context.tsx
@@ -153,6 +153,7 @@ const WorkflowSearchDrawer = ({
         </SheetHeader>
         <div className="relative mb-4 flex h-10 w-full items-center">
           <Input
+            autoFocus
             className="placeholder-gray-80 !h-full bg-transparent py-2 pl-10"
             onChange={(e) => {
               setSearchQuery(e.target.value);

diff --git a/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx b/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx
@@ -287,10 +287,8 @@ const ChatConversation = () => {
   } | null>(null);
 
   useEffect(() => {
-    console.log('data: ', data);
     if (data?.pages && data.pages.length > 0 && data.pages[0].length > 0) {
       const firstMessage = data.pages[0][0];
-      console.log('firstMessage: ', firstMessage);
       if (firstMessage.workflowName) {
         const [name, version] = firstMessage.workflowName.split(':::');
         setFirstMessageWorkflow({ name, version });

diff --git a/apps/shinkai-desktop/src/pages/create-job.tsx b/apps/shinkai-desktop/src/pages/create-job.tsx
@@ -308,7 +308,7 @@ const CreateJobPage = () => {
   );
 
   useEffect(() => {
-    if (currentMessage?.endsWith('/')) {
+    if (currentMessage?.length === 1 && currentMessage === '/') {
       setWorkflowSelectionDrawerOpen(true);
     }
   }, [currentMessage]);
@@ -658,20 +658,6 @@ const CreateJobPage = () => {
         selectedKeys={selectedKeys}
         setIsKnowledgeSearchOpen={setIsKnowledgeSearchOpen}
       />
-      {/*<WorkflowSearchDrawer*/}
-      {/*  isWorkflowSearchDrawerOpen={isWorkflowSearchDrawerOpen}*/}
-      {/*  onSelectWorkflow={() => {*/}
-      {/*    if (*/}
-      {/*      Object.keys(selectedKeys ?? {}).length > 0 ||*/}
-      {/*      currentMessage.endsWith('/')*/}
-      {/*    ) {*/}
-      {/*      createJobForm.setValue('content', '');*/}
-      {/*    }*/}
-      {/*  }}*/}
-      {/*  selectedWorkflow={selectedWorkflow}*/}
-      {/*  setIsWorkflowSearchDrawerOpen={setWorkflowSearchDrawerOpen}*/}
-      {/*  setSelectedWorkflow={setSelectedWorkflow}*/}
-      {/*/>*/}
     </SubpageLayout>
   );
 };

diff --git a/libs/shinkai-i18n/locales/en-US.json b/libs/shinkai-i18n/locales/en-US.json
@@ -178,7 +178,7 @@
     "manager": "Shinkai Node Manager",
     "resetNodeWarning": {
       "title": "Unable to connect",
-      "description": "Your Shinkai Node is currently locked by existing keys. To connect again you have three options:",
+      "description": "Your Shinkai Node is currently locked by existing keys. To connect again, you can reset all your Shinkai Node data.",
       "option1": "<b>Restore:</b> Try to restore your connection using a backed up keys.",
       "option2": "<b>Reset Data:</b> Permanently delete all your Shinkai Node data.",
       "option3": "<b>Reset All:</b> Permanently delete all your Shinkai Node data including the encryption and signing keys."

diff --git a/libs/shinkai-i18n/locales/es-ES.json b/libs/shinkai-i18n/locales/es-ES.json
@@ -107,8 +107,8 @@
     "remove": "Eliminar",
     "rename": "Renombrar",
     "repeatPassphrase": "Confirmar frase de paso",
-    "resetData": "Restablecer Datos",
     "resetAll": "Restablecer Todo",
+    "resetData": "Restablecer Datos",
     "resetFilters": "Restablecer filtros",
     "restore": "Restaurar",
     "retry": "Reintentar",
@@ -462,4 +462,4 @@
   "workflowPlayground": {
     "label": "Área de Juego de Flujo de Trabajo"
   }
-}
+}
diff --git a/libs/shinkai-i18n/locales/id-ID.json b/libs/shinkai-i18n/locales/id-ID.json
@@ -107,8 +107,8 @@
     "remove": "Hapus",
     "rename": "Ganti Nama",
     "repeatPassphrase": "Konfirmasi frasa sandi",
-    "resetData": "Atur Ulang Data",
     "resetAll": "Atur Ulang Semua",
+    "resetData": "Atur Ulang Data",
     "resetFilters": "Reset Filter",
     "restore": "Pulihkan",
     "retry": "Coba lagi",
@@ -462,4 +462,4 @@
   "workflowPlayground": {
     "label": "Taman Bermain Alur Kerja"
   }
-}
+}
diff --git a/libs/shinkai-i18n/locales/ja-JP.json b/libs/shinkai-i18n/locales/ja-JP.json
@@ -107,8 +107,8 @@
     "remove": "削除",
     "rename": "名前を変更",
     "repeatPassphrase": "パスフレーズを確認",
-    "resetData": "データをリセット",
     "resetAll": "すべてリセット",
+    "resetData": "データをリセット",
     "resetFilters": "フィルターをリセット",
     "restore": "復元",
     "retry": "再試行",
@@ -462,4 +462,4 @@
   "workflowPlayground": {
     "label": "ワークフロープレイグラウンド"
   }
-}
+}
diff --git a/libs/shinkai-i18n/locales/zh-CN.json b/libs/shinkai-i18n/locales/zh-CN.json
@@ -107,8 +107,8 @@
     "remove": "移除",
     "rename": "重命名",
     "repeatPassphrase": "确认密码短语",
-    "resetData": "重置数据",
     "resetAll": "重置全部",
+    "resetData": "重置数据",
     "resetFilters": "重置筛选器",
     "restore": "恢复",
     "retry": "重试",
@@ -462,4 +462,4 @@
   "workflowPlayground": {
     "label": "工作流程游乐场"
   }
-}
+}
diff --git a/libs/shinkai-i18n/src/lib/default/index.ts b/libs/shinkai-i18n/src/lib/default/index.ts
@@ -192,7 +192,7 @@ export default {
     resetNodeWarning: {
       title: 'Unable to connect',
       description:
-        'Your Shinkai Node is currently locked by existing keys. To connect again you have three options:',
+        'Your Shinkai Node is currently locked by existing keys. To connect again, you can reset all your Shinkai Node data.',
       option1:
         '<b>Restore:</b> Try to restore your connection using a backed up keys.',
       option2:

diff --git a/libs/shinkai-node-state/src/lib/queries/getChatConversation/types.ts b/libs/shinkai-node-state/src/lib/queries/getChatConversation/types.ts
@@ -1,4 +1,5 @@
 import type { JobCredentialsPayload } from '@shinkai_network/shinkai-message-ts/models';
+import { InfiniteData } from '@tanstack/react-query';
 
 export type GetChatConversationInput = JobCredentialsPayload & {
   nodeAddress: string;
@@ -30,3 +31,8 @@ export type ChatConversationMessage = {
 };
 
 export type GetChatConversationOutput = ChatConversationMessage[];
+
+export type ChatConversationInfiniteData =
+  InfiniteData<GetChatConversationOutput> & {
+    content: ChatConversationMessage[];
+  };
diff --git a/...ai-node-state/src/lib/queries/getChatConversation/useGetChatConversationWithPagination.ts b/...ai-node-state/src/lib/queries/getChatConversation/useGetChatConversationWithPagination.ts
@@ -1,9 +1,13 @@
 import { isJobInbox } from '@shinkai_network/shinkai-message-ts/utils';
-import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { FunctionKey } from '../../constants';
 import { getChatConversation } from '.';
-import { GetChatConversationInput, GetChatConversationOutput } from './types';
+import {
+  ChatConversationInfiniteData,
+  GetChatConversationInput,
+  GetChatConversationOutput,
+} from './types';
 
 export const CONVERSATION_PAGINATION_LIMIT = 12;
 export const CONVERSATION_PAGINATION_REFETCH = 5000;
@@ -14,7 +18,7 @@ export const useGetChatConversationWithPagination = (
   const response = useInfiniteQuery<
     GetChatConversationOutput,
     Error,
-    InfiniteData<GetChatConversationOutput>,
+    ChatConversationInfiniteData,
     [string, GetChatConversationInput],
     { lastKey: string | null }
   >({
@@ -43,6 +47,13 @@ export const useGetChatConversationWithPagination = (
     getNextPageParam: () => {
       return { lastKey: null };
     },
+    select: (data) => {
+      const allMessages = data.pages.flat();
+      return {
+        ...data,
+        content: allMessages,
+      };
+    },
   });
   return response;
 };