- feature: added info about file processing

apps/shinkai-visor/src/components/inbox/inbox.tsx

@@ -11,7 +11,12 @@ import {
 import { useSendMessageToJob } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMessageToJob/useSendMessageToJob';
 import { useSendMessageToInbox } from '@shinkai_network/shinkai-node-state/lib/mutations/sendMesssageToInbox/useSendMessageToInbox';
 import { useGetChatConversationWithPagination } from '@shinkai_network/shinkai-node-state/lib/queries/getChatConversation/useGetChatConversationWithPagination';
-import { ChevronRight, Inbox as InboxIcon, Loader2 } from 'lucide-react';
+import {
+  ChevronRight,
+  Inbox as InboxIcon,
+  Loader2,
+  Terminal,
+} from 'lucide-react';
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
@@ -20,6 +25,8 @@ import { cn } from '../../helpers/cn-utils';
 import { useAuth } from '../../store/auth/auth';
 import { InboxInput } from '../inbox-input/inbox-input';
 import { Message } from '../message/message';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
+import DotsLoader from '../ui/dots-loader';
 import { ScrollArea } from '../ui/scroll-area';
 import { Skeleton } from '../ui/skeleton';
 
@@ -58,6 +65,8 @@ export const Inbox = () => {
   const [decodedInboxId, setDecodedInboxId] = useState<string>('');
   const [isJobInbox, setIsJobInbox] = useState<boolean>(false);
   const [isJobProcessing, setIsJobProcessing] = useState<boolean>(false);
+  const [isJobProcessingFile, setIsJobProcessingFile] =
+    useState<boolean>(false);
   const fetchPreviousMessages = useCallback(async () => {
     const firstMessage = data?.pages?.[0]?.[0];
     fromPreviousMessagesRef.current = true;
@@ -108,7 +117,7 @@ export const Inbox = () => {
   }, [data?.pages]);
   useEffect(() => {
     const [firstMessagePage] = data?.pages || [];
-    const lastMessage = ([...firstMessagePage || []]).pop();
+    const lastMessage = [...(firstMessagePage || [])].pop();
     if (lastMessage) {
       const isLocal = isLocalMessage(
         lastMessage,
@@ -118,6 +127,19 @@ export const Inbox = () => {
       setIsJobProcessing(isJobInbox && (isSendingMessage || isLocal));
     }
   }, [data?.pages, auth, isSendingMessage, isJobInbox]);
+  useEffect(() => {
+    const [firstMessagePage] = data?.pages || [];
+    const lastMessage = [...(firstMessagePage || [])].pop();
+    if (lastMessage) {
+      const fileInbox = getMessageFilesInbox(lastMessage);
+      const isLocal = isLocalMessage(
+        lastMessage,
+        auth?.shinkai_identity ?? '',
+        auth?.profile ?? ''
+      );
+      setIsJobProcessingFile(isJobProcessing && isLocal && !!fileInbox);
+    }
+  }, [data?.pages, auth, isJobProcessing]);
   const submitSendMessage = (value: string) => {
     if (!auth) return;
     fromPreviousMessagesRef.current = false;
@@ -276,6 +298,23 @@ export const Inbox = () => {
             ))}
         </div>
       </ScrollArea>
+      {isJobProcessingFile && (
+        <Alert className="shadow-lg">
+          <Terminal className="h-4 w-4" />
+          <AlertTitle className="text-sm">
+            <FormattedMessage id="file-processing-alert-title" />
+          </AlertTitle>
+          <AlertDescription className="text-xs">
+            <div className="flex flex-row space-x-2 items-center">
+              <span>
+                <FormattedMessage id="file-processing-alert-description" />
+              </span>
+              <DotsLoader className="w-4 h-4"></DotsLoader>
+            </div>
+          </AlertDescription>
+          <Terminal className="h-4 w-4" />
+        </Alert>
+      )}
       <InboxInput
         disabled={isSendingMessage}
         loading={isJobProcessing}

apps/shinkai-visor/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '../../helpers/cn-utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'background-secondary-600/50 text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    className={cn(alertVariants({ variant }), className)}
+    ref={ref}
+    role="alert"
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    ref={ref}
+    {...props}
+  />
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    ref={ref}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

apps/shinkai-visor/src/lang/en.json

@@ -52,5 +52,7 @@
   "empty-agents-message": "Connect your first agent to start asking Shinkai AI. Try connecting OpenAI",
   "today": "Today",
   "yesterday": "Yesterday",
-  "installed-sucessfully": "Shinkai Visor was installed sucessfully, navigate to a website and use the action button to start asking Shinkai AI"
+  "installed-sucessfully": "Shinkai Visor was installed sucessfully, navigate to a website and use the action button to start asking Shinkai AI",
+  "file-processing-alert-title": "Your file is being processed",
+  "file-processing-alert-description": "It can take a few minutes"
 }