feat: add tool description + inputs

dcSpark · Dec 17, 2024 · fd3d90f · fd3d90f
1 parent 3032ed9
commit fd3d90f
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 10 deletions.
diff --git a/apps/shinkai-desktop/src/components/chat/components/message.tsx b/apps/shinkai-desktop/src/components/chat/components/message.tsx
@@ -310,7 +310,9 @@ export const MessageBase = ({
                             <AccordionTrigger
                               className={cn(
                                 'min-w-[10rem] py-0 pr-2 no-underline hover:no-underline',
-                                'transition-colors hover:bg-gray-500 [&>svg]:hidden [&[data-state=open]]:bg-gray-500',
+                                'transition-colors hover:bg-gray-500 [&[data-state=open]]:bg-gray-500',
+                                tool.status !== ToolStatusType.Complete &&
+                                  '[&>svg]:hidden',
                               )}
                             >
                               <ToolCard

diff --git a/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx b/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx
@@ -54,7 +54,6 @@ import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { partial } from 'filesize';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Paperclip, X, XIcon } from 'lucide-react';
-import { InfoCircleIcon } from 'primereact/icons/infocircle';
 import { useEffect, useMemo, useRef } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useForm, useWatch } from 'react-hook-form';
@@ -422,6 +421,7 @@ function ConversationEmptyFooter() {
                             {isDragActive && <DropFileActive />}
                             {selectedTool && (
                               <SelectedToolChat
+                                args={selectedTool.args ?? []}
                                 description={selectedTool.description}
                                 name={formatText(selectedTool.name)}
                                 remove={() => {
@@ -475,6 +475,9 @@ function ConversationEmptyFooter() {
                                         key: tool.tool_router_key,
                                         name: tool.name,
                                         description: tool.description,
+                                        args: Object.keys(
+                                          tool.input_args.properties ?? {},
+                                        ),
                                       });
                                     }}
                                     type="button"
@@ -513,7 +516,6 @@ function ConversationEmptyFooter() {
     </div>
   );
 }
-
 function ConversationChatFooter({ inboxId }: { inboxId: string }) {
   const { t } = useTranslation();
 
@@ -755,6 +757,7 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
                             {isDragActive && <DropFileActive />}
                             {selectedTool && (
                               <SelectedToolChat
+                                args={selectedTool.args ?? []}
                                 description={selectedTool.description}
                                 name={formatText(selectedTool.name)}
                                 remove={() => {
@@ -808,6 +811,9 @@ function ConversationChatFooter({ inboxId }: { inboxId: string }) {
                                         key: tool.tool_router_key,
                                         name: tool.name,
                                         description: tool.description,
+                                        args: Object.keys(
+                                          tool.input_args.properties ?? {},
+                                        ),
                                       });
                                     }}
                                     type="button"
@@ -964,21 +970,35 @@ const DropFileActive = () => (
 const SelectedToolChat = ({
   name,
   description,
+  args,
   remove,
 }: {
   name: string;
   description: string;
+  args: string[];
   remove: () => void;
 }) => {
   return (
     <div className="bg-gray-375 relative max-w-full rounded-lg p-1.5 px-2">
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className="flex items-center gap-2 pr-6">
-            <ToolsIcon className="h-3.5 w-3.5" />
-            <div className="line-clamp-1 inline-flex items-center gap-2 text-xs text-gray-100">
-              <span className="text-white">{name} </span>
-              <InfoCircleIcon className="h-3 w-3 shrink-0" />
+          <div className="flex items-start gap-2 pr-6">
+            <ToolsIcon className="mt-1 aspect-square size-3.5" />
+            <div className="flex flex-1 flex-col items-start text-xs text-gray-100">
+              <span className="line-clamp-1 font-medium text-white">
+                {name} -{' '}
+                <span className="text-gray-80 font-light">{description}</span>
+              </span>
+              {args.length > 0 && (
+                <span className="text-gray-80">
+                  <div className="inline-flex gap-1">
+                    <span className="capitalize">Inputs: </span>
+                    <div className="inline-flex font-mono">
+                      {args.join(', ')}
+                    </div>
+                  </div>
+                </span>
+              )}
             </div>
           </div>
         </TooltipTrigger>
@@ -990,7 +1010,7 @@ const SelectedToolChat = ({
             side="top"
             sideOffset={10}
           >
-            {description}
+            wellelele
           </TooltipContent>
         </TooltipPortal>
       </Tooltip>

diff --git a/libs/shinkai-node-state/src/forms/chat/chat-message.ts b/libs/shinkai-node-state/src/forms/chat/chat-message.ts
@@ -8,6 +8,7 @@ export const chatMessageFormSchema = z.object({
       key: z.string().min(1),
       name: z.string().min(1),
       description: z.string().min(1),
+      args: z.array(z.string()).optional(),
     })
     .optional(),
 });

diff --git a/libs/shinkai-node-state/src/forms/chat/create-job.ts b/libs/shinkai-node-state/src/forms/chat/create-job.ts
@@ -9,6 +9,7 @@ export const createJobFormSchema = z.object({
       key: z.string().min(1),
       name: z.string().min(1),
       description: z.string().min(1),
+      args: z.array(z.string()).optional(),
     })
     .optional(),
 });

diff --git a/libs/shinkai-node-state/src/v2/queries/getChatConversation/index.ts b/libs/shinkai-node-state/src/v2/queries/getChatConversation/index.ts
@@ -1,3 +1,4 @@
+import { ToolStatusType } from '@shinkai_network/shinkai-message-ts/api/general/types';
 import {
   downloadFileFromInbox,
   getFileNames,
@@ -84,6 +85,7 @@ const createAssistantMessage = (message: ChatMessage): AssistantMessage => {
       toolRouterKey: tool.tool_router_key,
       name: tool.name,
       args: tool.arguments,
+      status: ToolStatusType.Complete,
     }),
   );
 

diff --git a/libs/shinkai-ui/src/components/chat/message.tsx b/libs/shinkai-ui/src/components/chat/message.tsx
@@ -316,7 +316,9 @@ const MessageBase = ({
                             <AccordionTrigger
                               className={cn(
                                 'min-w-[10rem] py-0 pr-2 no-underline hover:no-underline',
-                                'transition-colors hover:bg-gray-500 [&>svg]:hidden [&[data-state=open]]:bg-gray-500',
+                                'transition-colors hover:bg-gray-500 [&[data-state=open]]:bg-gray-500',
+                                tool.status !== ToolStatusType.Complete &&
+                                  '[&>svg]:hidden',
                               )}
                             >
                               <ToolCard