@meetsmore-oss/use-ai-client 1.3.0 → 1.4.0

package/dist/index.d.ts

@@ -645,6 +645,8 @@ declare const defaultStrings: {
         connectingPlaceholder: string;
         /** Loading indicator text */
         thinking: string;
+        /** File processing indicator text (shown during file transformation like OCR) */
+        processingFile: string;
     };
     fileUpload: {
         /** Attach files button tooltip */
@@ -829,6 +831,8 @@ interface UseAIChatPanelProps {
     selectedAgent?: string | null;
     onAgentChange?: (agentId: string | null) => void;
     fileUploadConfig?: FileUploadConfig;
+    /** File processing state for send-time transformations (e.g., OCR) */
+    fileProcessing?: FileProcessingState | null;
     commands?: SavedCommand[];
     onSaveCommand?: (name: string, text: string) => Promise<string>;
     onRenameCommand?: (id: string, newName: string) => Promise<void>;
@@ -840,7 +844,7 @@ interface UseAIChatPanelProps {
  * Chat panel content - fills its container.
  * Use directly for embedded mode, or wrap with UseAIFloatingChatWrapper for floating mode.
  */
-declare function UseAIChatPanel({ onSendMessage, messages, loading, connected, streamingText, currentChatId, onNewChat, onLoadChat, onDeleteChat, onListChats, onGetChat, suggestions, availableAgents, defaultAgent, selectedAgent, onAgentChange, fileUploadConfig, commands, onSaveCommand, onRenameCommand, onDeleteCommand, closeButton, }: UseAIChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function UseAIChatPanel({ onSendMessage, messages, loading, connected, streamingText, currentChatId, onNewChat, onLoadChat, onDeleteChat, onListChats, onGetChat, suggestions, availableAgents, defaultAgent, selectedAgent, onAgentChange, fileUploadConfig, fileProcessing, commands, onSaveCommand, onRenameCommand, onDeleteCommand, closeButton, }: UseAIChatPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Handler for AG-UI events from the server.

package/dist/index.js

@@ -51,7 +51,9 @@ var defaultStrings = {
     /** Input placeholder when connecting */
     connectingPlaceholder: "Connecting...",
     /** Loading indicator text */
-    thinking: "Thinking"
+    thinking: "Thinking",
+    /** File processing indicator text (shown during file transformation like OCR) */
+    processingFile: "Processing file..."
   },
   // File upload
   fileUpload: {
@@ -1244,7 +1246,6 @@ async function processAttachments(attachments, config) {
   const chat = await getCurrentChat();
   const context = { chat };
   for (const attachment of attachments) {
-    onFileProgress?.(attachment.id, { status: "processing" });
     try {
       if (attachment.transformedContent !== void 0) {
         contentParts.push({
@@ -1256,11 +1257,11 @@ async function processAttachments(attachments, config) {
             size: attachment.file.size
           }
         });
-        onFileProgress?.(attachment.id, { status: "done" });
         continue;
       }
       const transformer = findTransformer(attachment.file.type, transformers);
       if (transformer) {
+        onFileProgress?.(attachment.id, { status: "processing" });
         const transformedText = await getTransformedContent(
           attachment.file,
           transformer,
@@ -1278,6 +1279,7 @@ async function processAttachments(attachments, config) {
             size: attachment.file.size
           }
         });
+        onFileProgress?.(attachment.id, { status: "done" });
       } else {
         const url = await backend.prepareForSend(attachment.file);
         if (attachment.file.type.startsWith("image/")) {
@@ -1291,7 +1293,6 @@ async function processAttachments(attachments, config) {
           });
         }
       }
-      onFileProgress?.(attachment.id, { status: "done" });
     } catch (error) {
       onFileProgress?.(attachment.id, { status: "error" });
       throw error;
@@ -1597,6 +1598,7 @@ function UseAIChatPanel({
   selectedAgent,
   onAgentChange,
   fileUploadConfig,
+  fileProcessing,
   commands = [],
   onSaveCommand,
   onRenameCommand,
@@ -2265,7 +2267,29 @@ function UseAIChatPanel({
                         color: theme.textColor,
                         maxWidth: "80%"
                       },
-                      children: streamingText ? /* @__PURE__ */ jsx10(MarkdownContent, { content: streamingText }) : /* @__PURE__ */ jsxs7(Fragment, { children: [
+                      children: streamingText ? /* @__PURE__ */ jsx10(MarkdownContent, { content: streamingText }) : fileProcessing && fileProcessing.status === "processing" ? /* @__PURE__ */ jsxs7("div", { children: [
+                        /* @__PURE__ */ jsx10("span", { style: { opacity: 0.6 }, children: strings.input.processingFile }),
+                        fileProcessing.progress != null && /* @__PURE__ */ jsxs7(Fragment, { children: [
+                          /* @__PURE__ */ jsxs7("span", { style: { opacity: 0.6, marginLeft: "4px" }, children: [
+                            Math.round(fileProcessing.progress),
+                            "%"
+                          ] }),
+                          /* @__PURE__ */ jsx10("div", { style: {
+                            marginTop: "6px",
+                            height: "4px",
+                            borderRadius: "2px",
+                            background: theme.borderColor,
+                            overflow: "hidden"
+                          }, children: /* @__PURE__ */ jsx10("div", { style: {
+                            height: "100%",
+                            width: `${fileProcessing.progress}%`,
+                            borderRadius: "2px",
+                            background: theme.primaryColor,
+                            transition: "width 0.3s ease"
+                          } }) })
+                        ] }),
+                        fileProcessing.progress == null && /* @__PURE__ */ jsx10("span", { className: "dots", style: { marginLeft: "4px" }, children: "..." })
+                      ] }) : /* @__PURE__ */ jsxs7(Fragment, { children: [
                         /* @__PURE__ */ jsx10("span", { style: { opacity: 0.6 }, children: strings.input.thinking }),
                         /* @__PURE__ */ jsx10("span", { className: "dots", style: { marginLeft: "4px" }, children: "..." })
                       ] })
@@ -2613,6 +2637,7 @@ function UseAIChat({ floating = false }) {
     selectedAgent: ctx.agents.selected,
     onAgentChange: ctx.agents.set,
     fileUploadConfig: ctx.fileUploadConfig,
+    fileProcessing: ctx.fileProcessing,
     commands: ctx.commands.list,
     onSaveCommand: ctx.commands.save,
     onRenameCommand: ctx.commands.rename,
@@ -4153,6 +4178,7 @@ function UseAIProvider({
   const [connected, setConnected] = useState10(false);
   const [isChatOpen, setIsChatOpen] = useState10(false);
   const [loading, setLoading] = useState10(false);
+  const [fileProcessingState, setFileProcessingState] = useState10(null);
   const handleSetChatOpen = useCallback9((open) => {
     setIsChatOpen(open);
     onOpenChange?.(open);
@@ -4369,21 +4395,36 @@ function UseAIProvider({
         });
       }
       persistedContent = persistedParts;
-      const fileContent = await processAttachments(attachments, {
-        getCurrentChat,
-        backend: fileUploadConfig?.backend,
-        transformers: fileUploadConfig?.transformers
-      });
-      multimodalContent = [];
-      if (message.trim()) {
-        multimodalContent.push({ type: "text", text: message });
+      if (activeChatId) {
+        await saveUserMessage(activeChatId, persistedContent);
       }
-      multimodalContent.push(...fileContent);
-    }
-    if (activeChatId) {
-      await saveUserMessage(activeChatId, persistedContent);
+      setLoading(true);
+      try {
+        const fileContent = await processAttachments(attachments, {
+          getCurrentChat,
+          backend: fileUploadConfig?.backend,
+          transformers: fileUploadConfig?.transformers,
+          onFileProgress: (_fileId, state) => {
+            setFileProcessingState(state);
+          }
+        });
+        multimodalContent = [];
+        if (message.trim()) {
+          multimodalContent.push({ type: "text", text: message });
+        }
+        multimodalContent.push(...fileContent);
+      } catch (error) {
+        setLoading(false);
+        throw error;
+      } finally {
+        setFileProcessingState(null);
+      }
+    } else {
+      if (activeChatId) {
+        await saveUserMessage(activeChatId, persistedContent);
+      }
+      setLoading(true);
     }
-    setLoading(true);
     await clientRef.current.sendPrompt(message, multimodalContent);
   }, [activatePendingChat, currentChatId, saveUserMessage, fileUploadConfig, getCurrentChat]);
   handleSendMessageRef.current = handleSendMessage;
@@ -4434,6 +4475,7 @@ function UseAIProvider({
     streamingText: effectiveStreamingText,
     suggestions: aggregatedSuggestions,
     fileUploadConfig,
+    fileProcessing: fileProcessingState,
     history: {
       currentId: displayedChatId,
       create: createNewChat,
@@ -4479,6 +4521,7 @@ function UseAIProvider({
     selectedAgent,
     onAgentChange: setAgent,
     fileUploadConfig,
+    fileProcessing: fileProcessingState,
     commands,
     onSaveCommand: saveCommand,
     onRenameCommand: renameCommand,