From 9282f6805475a8e117a3830d7193e0d02d937d8e Mon Sep 17 00:00:00 2001
From: Paul Ccari <46382556+paulclindo@users.noreply.github.com>
Date: Wed, 24 Jul 2024 19:55:45 -0500
Subject: [PATCH] fix: send workflow when upload files (#388)

* fix: upload files workflowName

* fixes

* more fixes
---
 .../src/pages/chat/chat-conversation.tsx      | 52 ++++++++++++++-----
 apps/shinkai-desktop/src/pages/create-job.tsx |  7 ++-
 libs/shinkai-message-ts/src/api/methods.ts    |  3 +-
 .../src/lib/mutations/createJob/index.ts      |  1 +
 .../sendMesssageWithFilesToInbox/index.ts     |  2 +
 .../sendMesssageWithFilesToInbox/types.ts     |  1 +
 .../src/lib/query-provider.tsx                |  2 +-
 7 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx b/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx
index f7fd2f0da..28398434d 100644
--- a/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx
+++ b/apps/shinkai-desktop/src/pages/chat/chat-conversation.tsx
@@ -234,7 +234,10 @@ const ChatConversation = () => {
       },
     });
 
-  const { file } = chatForm.watch();
+  const currentFile = useWatch({
+    control: chatForm.control,
+    name: 'file',
+  });
 
   const {
     data,
@@ -327,6 +330,9 @@ const ChatConversation = () => {
     setMessageContent(''); // trick to clear the ws stream message
     if (!auth || data.message.trim() === '') return;
     fromPreviousMessagesRef.current = false;
+    const workflowVersion = workflowSelected?.version;
+    const workflowName = workflowSelected?.name;
+
     if (data.file) {
       await sendTextMessageWithFilesForInbox({
         nodeAddress: auth?.node_address ?? '',
@@ -335,7 +341,10 @@ const ChatConversation = () => {
         receiver: auth.shinkai_identity,
         message: data.message,
         inboxId: inboxId,
-        files: [file],
+        files: [currentFile],
+        workflowName: workflowSelected
+          ? `${workflowName}:::${workflowVersion}`
+          : undefined,
         my_device_encryption_sk: auth.my_device_encryption_sk,
         my_device_identity_sk: auth.my_device_identity_sk,
         node_encryption_pk: auth.node_encryption_pk,
@@ -348,8 +357,7 @@ const ChatConversation = () => {
 
     if (isJobInbox(inboxId)) {
       const jobId = extractJobIdFromInbox(inboxId);
-      const workflowVersion = workflowSelected?.version;
-      const workflowName = workflowSelected?.name;
+
       await sendMessageToJob({
         nodeAddress: auth.node_address,
         jobId: jobId,
@@ -390,6 +398,7 @@ const ChatConversation = () => {
 
   useEffect(() => {
     chatForm.reset();
+    setWorkflowSelected(undefined);
   }, [chatForm, inboxId]);
 
   const isLimitReachedErrorLastMessage = useMemo(() => {
@@ -402,6 +411,18 @@ const ChatConversation = () => {
     return errorCode === ErrorCodes.ShinkaiBackendInferenceLimitReached;
   }, [data?.pages]);
 
+  const isWorkflowSelectedAndFilesPresent =
+    workflowSelected && currentFile !== undefined;
+
+  useEffect(() => {
+    if (isWorkflowSelectedAndFilesPresent) {
+      chatForm.setValue(
+        'message',
+        `${formatWorkflowName(workflowSelected.name)} - ${workflowSelected.description}`,
+      );
+    }
+  }, [chatForm, isWorkflowSelectedAndFilesPresent, workflowSelected]);
+
   return (
     <div className="flex max-h-screen flex-1 flex-col overflow-hidden pt-2">
       <ConversationHeader />
@@ -482,7 +503,7 @@ const ChatConversation = () => {
                           autoFocus
                           bottomAddons={
                             <Button
-                              className="h-[40px] w-[40px] self-end rounded-xl p-3"
+                              className="hover:bg-app-gradient h-[40px] w-[40px] self-end rounded-xl bg-gray-500 p-3 disabled:bg-gray-100"
                               disabled={isLoadingMessage}
                               onClick={chatForm.handleSubmit(onSubmit)}
                               size="icon"
@@ -494,7 +515,10 @@ const ChatConversation = () => {
                               </span>
                             </Button>
                           }
-                          disabled={isLoadingMessage}
+                          disabled={
+                            isLoadingMessage ||
+                            isWorkflowSelectedAndFilesPresent
+                          }
                           // isLoading={isLoadingMessage}
                           onChange={field.onChange}
                           onSubmit={chatForm.handleSubmit(onSubmit)}
@@ -522,9 +546,9 @@ const ChatConversation = () => {
                                       </TooltipTrigger>
                                       <TooltipPortal>
                                         <TooltipContent
-                                          align="start"
+                                          align="end"
                                           alignOffset={-10}
-                                          className="max-w-[600px]"
+                                          className="max-w-[400px]"
                                           side="top"
                                           sideOffset={10}
                                         >
@@ -544,23 +568,23 @@ const ChatConversation = () => {
                                   </button>
                                 </div>
                               )}
-                              {file && (
+                              {currentFile && (
                                 <div className="relative mt-1 flex min-w-[180px] max-w-[220px] items-center gap-2 self-start rounded-lg border border-gray-200 px-2 py-2.5">
-                                  {getFileExt(file?.name) &&
-                                  fileIconMap[getFileExt(file?.name)] ? (
+                                  {getFileExt(currentFile?.name) &&
+                                  fileIconMap[getFileExt(currentFile?.name)] ? (
                                     <FileTypeIcon
                                       className="text-gray-80 h-7 w-7 shrink-0"
-                                      type={getFileExt(file?.name)}
+                                      type={getFileExt(currentFile?.name)}
                                     />
                                   ) : (
                                     <Paperclip className="text-gray-80 h-4 w-4 shrink-0" />
                                   )}
                                   <div className="space-y-1">
                                     <span className="line-clamp-1 break-all text-left text-xs">
-                                      {file?.name}
+                                      {currentFile?.name}
                                     </span>
                                     <span className="line-clamp-1 break-all text-left text-xs text-gray-100">
-                                      {size(file?.size)}
+                                      {size(currentFile?.size)}
                                     </span>
                                   </div>
                                   <button
diff --git a/apps/shinkai-desktop/src/pages/create-job.tsx b/apps/shinkai-desktop/src/pages/create-job.tsx
index a58248615..261197f52 100644
--- a/apps/shinkai-desktop/src/pages/create-job.tsx
+++ b/apps/shinkai-desktop/src/pages/create-job.tsx
@@ -275,11 +275,16 @@ const CreateJobPage = () => {
     control: createJobForm.control,
     name: 'content',
   });
+  const currentFiles = useWatch({
+    control: createJobForm.control,
+    name: 'files',
+  });
 
   const debounceMessage = useDebounce(currentMessage, 500);
 
   const isWorkflowSelectedAndFilesPresent =
-    workflowSelected && Object.keys(selectedKeys ?? {}).length > 0;
+    workflowSelected &&
+    (Object.keys(selectedKeys ?? {}).length > 0 || currentFiles?.length > 0);
 
   const {
     data: workflowRecommendations,
diff --git a/libs/shinkai-message-ts/src/api/methods.ts b/libs/shinkai-message-ts/src/api/methods.ts
index 773eea732..8681b8ba1 100644
--- a/libs/shinkai-message-ts/src/api/methods.ts
+++ b/libs/shinkai-message-ts/src/api/methods.ts
@@ -149,6 +149,7 @@ export const sendTextMessageWithFilesForInbox = async (
   files: File[],
   setupDetailsState: CredentialsPayload,
   workflow: string | undefined,
+  workflowName: string | undefined,
 ): Promise<{ inboxId: string; message: ShinkaiMessage }> => {
   const fileUploader = new FileUploader(
     nodeAddress,
@@ -160,7 +161,7 @@ export const sendTextMessageWithFilesForInbox = async (
     sender_subidentity,
     receiver,
     workflow,
-    undefined,
+    workflowName,
   );
 
   await fileUploader.createFolder();
diff --git a/libs/shinkai-node-state/src/lib/mutations/createJob/index.ts b/libs/shinkai-node-state/src/lib/mutations/createJob/index.ts
index dd1f61b9a..414e1bc89 100644
--- a/libs/shinkai-node-state/src/lib/mutations/createJob/index.ts
+++ b/libs/shinkai-node-state/src/lib/mutations/createJob/index.ts
@@ -92,6 +92,7 @@ export const createJob = async ({
           profile_identity_sk,
         },
         workflow,
+        workflowName,
       )
     : await sendMessageToJob(
         nodeAddress,
diff --git a/libs/shinkai-node-state/src/lib/mutations/sendMesssageWithFilesToInbox/index.ts b/libs/shinkai-node-state/src/lib/mutations/sendMesssageWithFilesToInbox/index.ts
index 9b4375996..0bc686195 100644
--- a/libs/shinkai-node-state/src/lib/mutations/sendMesssageWithFilesToInbox/index.ts
+++ b/libs/shinkai-node-state/src/lib/mutations/sendMesssageWithFilesToInbox/index.ts
@@ -11,6 +11,7 @@ export const sendMessageWithFilesToInbox = async ({
   inboxId,
   files,
   workflow,
+  workflowName,
   my_device_encryption_sk,
   my_device_identity_sk,
   node_encryption_pk,
@@ -33,5 +34,6 @@ export const sendMessageWithFilesToInbox = async ({
       profile_identity_sk,
     },
     workflow,
+    workflowName,
   );
 };
diff --git a/libs/shinkai-node-state/src/lib/mutations/sendMesssageWithFilesToInbox/types.ts b/libs/shinkai-node-state/src/lib/mutations/sendMesssageWithFilesToInbox/types.ts
index f39dd45ae..247d9f58d 100644
--- a/libs/shinkai-node-state/src/lib/mutations/sendMesssageWithFilesToInbox/types.ts
+++ b/libs/shinkai-node-state/src/lib/mutations/sendMesssageWithFilesToInbox/types.ts
@@ -11,6 +11,7 @@ export type SendMessageWithFilesToInboxInput = CredentialsPayload & {
   message: string;
   inboxId: string;
   workflow?: string;
+  workflowName?: string;
   files: File[];
 };
 export type SendMessageWithFilesToInboxOutput = {
diff --git a/libs/shinkai-node-state/src/lib/query-provider.tsx b/libs/shinkai-node-state/src/lib/query-provider.tsx
index 420bc0c89..aa9d69b55 100644
--- a/libs/shinkai-node-state/src/lib/query-provider.tsx
+++ b/libs/shinkai-node-state/src/lib/query-provider.tsx
@@ -8,7 +8,7 @@ export const QueryProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/*<ReactQueryDevtools initialIsOpen={false} />*/}
     </QueryClientProvider>
   );
 };