@meetsmore-oss/use-ai-client 1.12.0 → 1.13.0

package/dist/index.d.ts

@@ -353,9 +353,8 @@ declare class UseAIClient {
     private serverUrl;
     private socket;
     private eventHandlers;
-    private reconnectAttempts;
-    private maxReconnectAttempts;
     private reconnectDelay;
+    private reconnectDelayMax;
     private _threadId;
     private _tools;
     private _messages;
@@ -737,11 +736,22 @@ interface PersistedFileContent {
     type: 'file';
     file: PersistedFileMetadata;
 }
+/**
+ * Transformed file content part for persisted messages.
+ * Stores the text produced by a client-side FileTransformer (e.g. OCR result)
+ * so the full context survives a page reload / Socket.IO reconnect.
+ */
+interface PersistedTransformedFileContent {
+    type: 'transformed_file';
+    /** The transformed text representation (e.g. OCR'd markdown). */
+    text: string;
+    originalFile: PersistedFileMetadata;
+}
 /**
  * Content part for persisted messages.
- * Can be text or file metadata.
+ * Can be text, file metadata, or transformed file content.
  */
-type PersistedContentPart = PersistedTextContent | PersistedFileContent;
+type PersistedContentPart = PersistedTextContent | PersistedFileContent | PersistedTransformedFileContent;
 /**
  * Content that can be persisted.
  * Simple string for text-only messages, or array for multimodal content.
@@ -1011,6 +1021,19 @@ interface UseToolSystemReturn {
  */
 declare function useToolSystem({ clientRef, buildState, }: UseToolSystemOptions): UseToolSystemReturn;
 
+/**
+ * How the chat textarea should treat the Enter key.
+ *
+ * - `'enter'`     — Enter submits the message, Shift+Enter inserts a newline.
+ *                   Typical desktop behavior.
+ * - `'mod-enter'` — Enter inserts a newline. Cmd/Ctrl+Enter submits the message.
+ *                   Recommended on mobile, where soft keyboards lack modifier
+ *                   keys and the user is expected to tap the send button.
+ *                   ("mod" follows the CodeMirror/ProseMirror convention of
+ *                   meaning Cmd on macOS and Ctrl elsewhere.)
+ */
+type SubmitMode = 'enter' | 'mod-enter';
+
 /**
  * Options for programmatically sending a message via sendMessage().
  */
@@ -1147,6 +1170,8 @@ declare const defaultStrings: {
         API_OVERLOADED: string;
         /** Error when rate limited */
         RATE_LIMITED: string;
+        /** Error when the connection was lost while a response was being generated */
+        CONNECTION_LOST: string;
         /** Error for unknown/unexpected errors */
         UNKNOWN_ERROR: string;
     };
@@ -1547,6 +1572,32 @@ interface UseAIProviderProps extends UseAIConfig {
      * ```
      */
     onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * How the built-in chat panel should treat the Enter key.
+     *
+     * - `'enter'` (default): Enter submits, Shift+Enter inserts a newline.
+     *   Typical desktop behavior.
+     * - `'mod-enter'`: Enter inserts a newline. Cmd/Ctrl+Enter submits.
+     *   Recommended for mobile/touch devices where soft keyboards lack modifier
+     *   keys and the user is expected to tap the send button.
+     *
+     * Can be overridden per-instance via the `submitMode` prop on `<UseAIChat>`.
+     *
+     * @default 'enter'
+     *
+     * @example
+     * ```tsx
+     * import { isMobileApp } from '@/lib/is-mobile';
+     *
+     * <UseAIProvider
+     *   serverUrl="wss://your-server.com"
+     *   submitMode={isMobileApp() ? 'mod-enter' : 'enter'}
+     * >
+     *   <App />
+     * </UseAIProvider>
+     * ```
+     */
+    submitMode?: SubmitMode;
 }
 /**
  * Provider component that manages AI client connection and tool registration.
@@ -1576,7 +1627,7 @@ interface UseAIProviderProps extends UseAIConfig {
  * }
  * ```
  */
-declare function UseAIProvider({ serverUrl, children, systemPrompt, CustomButton, CustomChat, chatRepository, forwardedPropsProvider, fileUploadConfig: fileUploadConfigProp, commandRepository, renderChat, theme: customTheme, strings: customStrings, visibleAgentIds, onOpenChange, }: UseAIProviderProps): react_jsx_runtime.JSX.Element;
+declare function UseAIProvider({ serverUrl, children, systemPrompt, CustomButton, CustomChat, chatRepository, forwardedPropsProvider, fileUploadConfig: fileUploadConfigProp, commandRepository, renderChat, theme: customTheme, strings: customStrings, visibleAgentIds, onOpenChange, submitMode, }: UseAIProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the UseAI context.
  * When used outside a UseAIProvider, returns a no-op context and logs a warning.
@@ -1641,12 +1692,26 @@ interface UseAIChatPanelProps {
     onApproveToolCall?: () => void;
     /** Callback to reject all pending tool calls */
     onRejectToolCall?: (reason?: string) => void;
+    /**
+     * How the textarea should treat the Enter key.
+     *
+     * - `'enter'` (default): Enter submits, Shift+Enter inserts a newline. Suitable
+     *   for desktop.
+     * - `'mod-enter'`: Enter inserts a newline. Cmd/Ctrl+Enter submits. Recommended
+     *   for mobile, where soft keyboards lack modifier keys and the user is
+     *   expected to tap the send button.
+     *
+     * IME composition is always respected regardless of mode.
+     *
+     * @default 'enter'
+     */
+    submitMode?: SubmitMode;
 }
 /**
  * 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, streamingReasoning, currentChatId, onNewChat, onLoadChat, onDeleteChat, onListChats, onGetChat, suggestions, availableAgents, defaultAgent, selectedAgent, onAgentChange, fileUploadConfig, fileProcessing, commands, onSaveCommand, onRenameCommand, onDeleteCommand, closeButton, executingTool, feedbackEnabled, onFeedback, pendingApprovals, onApproveToolCall, onRejectToolCall, }: UseAIChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function UseAIChatPanel({ onSendMessage, messages, loading, connected, streamingText, streamingReasoning, currentChatId, onNewChat, onLoadChat, onDeleteChat, onListChats, onGetChat, suggestions, availableAgents, defaultAgent, selectedAgent, onAgentChange, fileUploadConfig, fileProcessing, commands, onSaveCommand, onRenameCommand, onDeleteCommand, closeButton, executingTool, feedbackEnabled, onFeedback, pendingApprovals, onApproveToolCall, onRejectToolCall, submitMode, }: UseAIChatPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Props for the floating chat wrapper.
@@ -1685,6 +1750,14 @@ interface UseAIChatProps {
      * When false (default), renders inline filling its container.
      */
     floating?: boolean;
+    /**
+     * How the chat textarea should treat the Enter key. Overrides the value
+     * provided on `UseAIProvider` for this instance.
+     *
+     * - `'enter'` (default): Enter submits, Shift+Enter inserts a newline.
+     * - `'mod-enter'`: Enter inserts a newline. Cmd/Ctrl+Enter submits.
+     */
+    submitMode?: SubmitMode;
 }
 /**
  * Standalone chat component that can be placed anywhere within UseAIProvider.
@@ -1711,7 +1784,7 @@ interface UseAIChatProps {
  * </UseAIProvider>
  * ```
  */
-declare function UseAIChat({ floating }: UseAIChatProps): react_jsx_runtime.JSX.Element;
+declare function UseAIChat({ floating, submitMode }: UseAIChatProps): react_jsx_runtime.JSX.Element;
 
 /**
  * LocalStorage-based implementation of ChatRepository.
@@ -2323,6 +2396,12 @@ interface UseServerEventsReturn {
      * (currentToolCalls, currentMessageContent).
      */
     handleServerEvent: (client: UseAIClient, event: AGUIEvent) => Promise<void>;
+    /**
+     * Handles a connection loss. When a disconnect occurs mid-run the server
+     * session is destroyed and the run cannot resume, so we surface an error
+     * message and clear in-flight UI state. No-op when no run is active.
+     */
+    handleDisconnect: () => void;
 }
 /**
  * Hook that owns all server event handling state and logic.
@@ -2458,4 +2537,4 @@ interface UseDropdownStateOptions {
  */
 declare function useDropdownState(options?: UseDropdownStateOptions): UseDropdownStateReturn;
 
-export { type AgentContextValue, type Chat, type ChatContextValue, type ChatMetadata, type ChatPanelProps, type ChatRepository, CloseButton, type CommandContextValue, type CommandRepository, type CreateChatOptions, type CreateCommandOptions, DEFAULT_MAX_FILE_SIZE, type DefinedTool, type DropZoneProps, EmbedFileUploadBackend, type ExecutingToolDisplay, type FileAttachment, type FileProcessingState, type FileProcessingStatus, type FileTransformer, type FileTransformerContext, type FileTransformerMap, type FileUploadBackend, type FileUploadConfig, type FloatingButtonProps, type InlineSaveProps, type ListChatsOptions, type ListCommandsOptions, LocalStorageChatRepository, LocalStorageCommandRepository, type Message, type PendingToolApproval, type PersistedContentPart, type PersistedFileContent, type PersistedFileMetadata, type PersistedMessage, type PersistedMessageContent, type PersistedTextContent, type ProcessAttachmentsConfig, type PromptsContextValue, type RegisterToolsOptions, type SavedCommand, type SendMessageOptions, type ToolExecutionContext, type ToolOptions, type ToolRegistryContextValue, type ToolsDefinition, type TriggerWorkflowOptions, UseAIChat, UseAIChatPanel, type UseAIChatPanelProps, type UseAIChatPanelStrings, type UseAIChatPanelTheme, type UseAIChatProps, UseAIClient, type UseAIConfig, type UseAIContextValue, UseAIFloatingButton, UseAIFloatingChatWrapper, type UseAIOptions, UseAIProvider, type UseAIProviderProps, type UseAIResult, type UseAIStrings, type UseAITheme, type UseAIWorkflowResult, type UseAgentSelectionOptions, type UseAgentSelectionReturn, type UseChatManagementOptions, type UseChatManagementReturn, type UseCommandManagementOptions, type UseCommandManagementReturn, type UseDropdownStateOptions, type UseDropdownStateReturn, type UseFeedbackOptions, type UseFeedbackReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UsePromptStateOptions, type UsePromptStateReturn, type UseServerEventsOptions, type UseServerEventsReturn, type UseSlashCommandsOptions, type UseSlashCommandsReturn, type UseToolSystemOptions, type UseToolSystemReturn, type WorkflowProgress, clearTransformationCache, convertToolsToDefinitions, defaultStrings, defaultTheme, defineTool, executeDefinedTool, findTransformerPattern, generateChatId, generateCommandId, generateMessageId, matchesMimeType, processAttachments, useAI, useAIContext, useAIWorkflow, useAgentSelection, useChatManagement, useCommandManagement, useDropdownState, useFeedback, useFileUpload, useMessageQueue, usePromptState, useServerEvents, useSlashCommands, useStableTools, useStrings, useTheme, useToolSystem, validateCommandName };
+export { type AgentContextValue, type Chat, type ChatContextValue, type ChatMetadata, type ChatPanelProps, type ChatRepository, CloseButton, type CommandContextValue, type CommandRepository, type CreateChatOptions, type CreateCommandOptions, DEFAULT_MAX_FILE_SIZE, type DefinedTool, type DropZoneProps, EmbedFileUploadBackend, type ExecutingToolDisplay, type FileAttachment, type FileProcessingState, type FileProcessingStatus, type FileTransformer, type FileTransformerContext, type FileTransformerMap, type FileUploadBackend, type FileUploadConfig, type FloatingButtonProps, type InlineSaveProps, type ListChatsOptions, type ListCommandsOptions, LocalStorageChatRepository, LocalStorageCommandRepository, type Message, type PendingToolApproval, type PersistedContentPart, type PersistedFileContent, type PersistedFileMetadata, type PersistedMessage, type PersistedMessageContent, type PersistedTextContent, type ProcessAttachmentsConfig, type PromptsContextValue, type RegisterToolsOptions, type SavedCommand, type SendMessageOptions, type SubmitMode, type ToolExecutionContext, type ToolOptions, type ToolRegistryContextValue, type ToolsDefinition, type TriggerWorkflowOptions, UseAIChat, UseAIChatPanel, type UseAIChatPanelProps, type UseAIChatPanelStrings, type UseAIChatPanelTheme, type UseAIChatProps, UseAIClient, type UseAIConfig, type UseAIContextValue, UseAIFloatingButton, UseAIFloatingChatWrapper, type UseAIOptions, UseAIProvider, type UseAIProviderProps, type UseAIResult, type UseAIStrings, type UseAITheme, type UseAIWorkflowResult, type UseAgentSelectionOptions, type UseAgentSelectionReturn, type UseChatManagementOptions, type UseChatManagementReturn, type UseCommandManagementOptions, type UseCommandManagementReturn, type UseDropdownStateOptions, type UseDropdownStateReturn, type UseFeedbackOptions, type UseFeedbackReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UsePromptStateOptions, type UsePromptStateReturn, type UseServerEventsOptions, type UseServerEventsReturn, type UseSlashCommandsOptions, type UseSlashCommandsReturn, type UseToolSystemOptions, type UseToolSystemReturn, type WorkflowProgress, clearTransformationCache, convertToolsToDefinitions, defaultStrings, defaultTheme, defineTool, executeDefinedTool, findTransformerPattern, generateChatId, generateCommandId, generateMessageId, matchesMimeType, processAttachments, useAI, useAIContext, useAIWorkflow, useAgentSelection, useChatManagement, useCommandManagement, useDropdownState, useFeedback, useFileUpload, useMessageQueue, usePromptState, useServerEvents, useSlashCommands, useStableTools, useStrings, useTheme, useToolSystem, validateCommandName };

package/dist/index.js

@@ -94,6 +94,8 @@ var defaultStrings = {
     API_OVERLOADED: "The AI service is currently experiencing high demand. Please try again in a moment.",
     /** Error when rate limited */
     RATE_LIMITED: "Too many requests. Please wait a moment before trying again.",
+    /** Error when the connection was lost while a response was being generated */
+    CONNECTION_LOST: "The connection was lost. Please send your message again.",
     /** Error for unknown/unexpected errors */
     UNKNOWN_ERROR: "An unexpected error occurred. Please try again."
   },
@@ -280,7 +282,17 @@ function getTextFromContent(content) {
   if (typeof content === "string") {
     return content;
   }
-  return content.filter((part) => part.type === "text").map((part) => part.text).join("\n");
+  return content.flatMap((part) => {
+    if (part.type === "text") return [part.text];
+    if (part.type === "transformed_file") return [part.text];
+    return [];
+  }).join("\n");
+}
+function getDisplayTextFromContent(content) {
+  if (typeof content === "string") {
+    return content;
+  }
+  return content.flatMap((part) => part.type === "text" ? [part.text] : []).join("\n");
 }
 
 // src/utils/mergeAssistantMessages.ts
@@ -344,6 +356,17 @@ function mergeAssistantMessagesForDisplay(messages) {
   return result;
 }
 
+// src/utils/keyboard.ts
+function shouldSubmitOnEnter(e, mode) {
+  if (e.key !== "Enter" || e.nativeEvent.isComposing || e.keyCode === 229) {
+    return false;
+  }
+  if (mode === "enter") {
+    return !e.shiftKey;
+  }
+  return e.metaKey || e.ctrlKey;
+}
+
 // src/components/MarkdownContent.tsx
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -2166,7 +2189,8 @@ function UseAIChatPanel({
   onFeedback,
   pendingApprovals = [],
   onApproveToolCall,
-  onRejectToolCall
+  onRejectToolCall,
+  submitMode = "enter"
 }) {
   const strings = useStrings();
   const theme = useTheme();
@@ -2241,7 +2265,7 @@ function UseAIChatPanel({
     if (slashCommands.handleKeyDown(e)) {
       return;
     }
-    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && !(e.keyCode === 229)) {
+    if (shouldSubmitOnEnter(e, submitMode)) {
       e.preventDefault();
       handleSend();
     }
@@ -2339,7 +2363,7 @@ function UseAIChatPanel({
                       if (displayMessages.length > 0) {
                         const firstUserMsg = displayMessages.find((m) => m.role === "user");
                         if (firstUserMsg) {
-                          const textContent = getTextFromContent(firstUserMsg.content);
+                          const textContent = getDisplayTextFromContent(firstUserMsg.content);
                           const maxLength = 30;
                           return textContent.length > maxLength ? textContent.substring(0, maxLength) + "..." : textContent || strings.header.newChat;
                         }
@@ -2645,7 +2669,7 @@ function UseAIChatPanel({
                       {
                         style: {
                           display: "grid",
-                          gridTemplateColumns: "repeat(2, 1fr)",
+                          gridTemplateColumns: "1fr",
                           gap: "8px",
                           width: "100%",
                           maxWidth: "320px"
@@ -2721,7 +2745,7 @@ function UseAIChatPanel({
                               "data-testid": "save-command-button",
                               onClick: (e) => {
                                 e.stopPropagation();
-                                const messageText = getTextFromContent(message.content);
+                                const messageText = getDisplayTextFromContent(message.content);
                                 slashCommands.startSavingCommand(message.id, messageText);
                               },
                               title: "Save as slash command",
@@ -2791,13 +2815,17 @@ function UseAIChatPanel({
                                     }
                                   ),
                                   /* @__PURE__ */ jsx12(MarkdownContent, { content: getTextFromContent(message.content) })
-                                ] }) : getTextFromContent(message.content)
+                                ] }) : (
+                                  // User/tool bubbles: display-only text so transformed_file
+                                  // (e.g. OCR body) isn't dumped into the chat bubble.
+                                  getDisplayTextFromContent(message.content)
+                                )
                               ]
                             }
                           ),
                           slashCommands.renderInlineSaveUI({
                             messageId: message.id,
-                            messageText: getTextFromContent(message.content)
+                            messageText: getDisplayTextFromContent(message.content)
                           })
                         ]
                       }
@@ -3257,9 +3285,10 @@ function useChatUIContext() {
   }
   return context;
 }
-function UseAIChat({ floating = false }) {
+function UseAIChat({ floating = false, submitMode }) {
   const ctx = useChatUIContext();
   const chatPanelProps = {
+    submitMode: submitMode ?? ctx.submitMode,
     onSendMessage: ctx.sendMessage,
     messages: ctx.messages,
     loading: ctx.loading,
@@ -3324,9 +3353,12 @@ var UseAIClient = class {
   }
   socket = null;
   eventHandlers = /* @__PURE__ */ new Map();
-  reconnectAttempts = 0;
-  maxReconnectAttempts = 5;
+  // Reconnect indefinitely so clients recover after extended outages (mobile
+  // app backgrounded long enough for server pingTimeout, airplane mode, etc.).
+  // Socket.IO applies exponential backoff capped at reconnectionDelayMax,
+  // so steady-state retry frequency is ~one attempt per 10s.
   reconnectDelay = 1e3;
+  reconnectDelayMax = 1e4;
   // Session state
   _threadId = null;
   _tools = [];
@@ -3364,14 +3396,14 @@ var UseAIClient = class {
     this.socket = io(this.serverUrl, {
       transports: ["polling", "websocket"],
       reconnection: true,
-      reconnectionAttempts: this.maxReconnectAttempts,
+      reconnectionAttempts: Infinity,
       reconnectionDelay: this.reconnectDelay,
+      reconnectionDelayMax: this.reconnectDelayMax,
       withCredentials: true
     });
     this.socket.on("connect", () => {
       console.log("[UseAI] Connected to server");
       console.log("[UseAI] Transport:", this.socket?.io?.engine?.transport?.name);
-      this.reconnectAttempts = 0;
       const engine = this.socket?.io?.engine;
       if (engine) {
         engine.on("upgrade", (transport) => {
@@ -4176,35 +4208,89 @@ var LocalStorageChatRepository = class {
   }
 };
 
+// src/fileUpload/buildPersistedParts.ts
+function buildPersistedParts(message, attachments, fileContent) {
+  const parts = [];
+  if (message.trim()) {
+    parts.push({ type: "text", text: message });
+  }
+  const transformedByKey = /* @__PURE__ */ new Map();
+  for (const part of fileContent) {
+    if (part.type === "transformed_file") {
+      const key = `${part.originalFile.name}:${part.originalFile.size}:${part.originalFile.mimeType}`;
+      const list = transformedByKey.get(key);
+      if (list) {
+        list.push(part);
+      } else {
+        transformedByKey.set(key, [part]);
+      }
+    }
+  }
+  for (const attachment of attachments) {
+    const key = `${attachment.file.name}:${attachment.file.size}:${attachment.file.type}`;
+    const transformed = transformedByKey.get(key)?.shift();
+    if (transformed) {
+      parts.push({
+        type: "transformed_file",
+        text: transformed.text,
+        originalFile: transformed.originalFile
+      });
+    } else {
+      parts.push({
+        type: "file",
+        file: {
+          name: attachment.file.name,
+          size: attachment.file.size,
+          mimeType: attachment.file.type
+        }
+      });
+    }
+  }
+  return parts;
+}
+
 // src/hooks/useChatManagement.ts
 import { useState as useState7, useCallback as useCallback5, useRef as useRef5, useEffect as useEffect5 } from "react";
 
 // src/utils/messageConversion.ts
 function transformMessagesToClientFormat(persistedMessages) {
   return persistedMessages.map((msg) => {
-    const textContent = getTextFromContent(msg.content);
     switch (msg.role) {
       case "tool":
         return {
           id: msg.id,
           role: "tool",
-          content: textContent,
+          content: getTextFromContent(msg.content),
           toolCallId: msg.toolCallId || ""
         };
       case "assistant":
         return {
           id: msg.id,
           role: "assistant",
-          content: textContent,
+          content: getTextFromContent(msg.content),
           ...msg.toolCalls && msg.toolCalls.length > 0 ? { toolCalls: msg.toolCalls } : {},
           ...msg.reasoningParts && msg.reasoningParts.length > 0 ? { reasoningParts: msg.reasoningParts } : {}
         };
-      case "user":
-        return {
-          id: msg.id,
-          role: "user",
-          content: textContent
-        };
+      case "user": {
+        if (typeof msg.content === "string") {
+          return { id: msg.id, role: "user", content: msg.content };
+        }
+        const parts = msg.content.flatMap((p) => {
+          if (p.type === "text") {
+            return [{ type: "text", text: p.text }];
+          }
+          if (p.type === "transformed_file") {
+            return [{
+              type: "text",
+              text: `[Content of file "${p.originalFile.name}" (${p.originalFile.mimeType})]:
+
+${p.text}`
+            }];
+          }
+          return [];
+        });
+        return { id: msg.id, role: "user", content: parts };
+      }
     }
   });
 }
@@ -4377,7 +4463,7 @@ function useChatManagement({
       };
       chat.messages.push(newMessage);
       if (!chat.title) {
-        const text = getTextFromContent(content);
+        const text = getDisplayTextFromContent(content);
         if (text) {
           chat.title = generateChatTitle(text);
         }
@@ -4421,7 +4507,7 @@ function useChatManagement({
       if (!chat.title) {
         const firstUserMessage = chat.messages.find((msg) => msg.role === "user");
         if (firstUserMessage) {
-          const textContent = getTextFromContent(firstUserMessage.content);
+          const textContent = getDisplayTextFromContent(firstUserMessage.content);
           if (textContent) {
             chat.title = generateChatTitle(textContent);
           }
@@ -5143,6 +5229,8 @@ function useServerEvents({
   const [streamingText, setStreamingText] = useState13("");
   const [streamingReasoning, setStreamingReasoning] = useState13("");
   const streamingChatIdRef = useRef10(null);
+  const loadingRef = useRef10(loading);
+  loadingRef.current = loading;
   const messageCountAtRunStartRef = useRef10(0);
   const hasTextFromPriorStepRef = useRef10(false);
   const [executingToolRaw, setExecutingTool] = useState13(null);
@@ -5238,6 +5326,17 @@ function useServerEvents({
       setLoading(false);
     }
   }, []);
+  const handleDisconnect = useCallback11(() => {
+    if (!loadingRef.current) return;
+    const strs = stringsRef.current;
+    const message = strs.errors[ErrorCode.CONNECTION_LOST] || strs.errors[ErrorCode.UNKNOWN_ERROR];
+    saveAIResponseRef.current(message, "error");
+    setStreamingText("");
+    setStreamingReasoning("");
+    streamingChatIdRef.current = null;
+    setExecutingTool(null);
+    setLoading(false);
+  }, []);
   const executingTool = executingToolRaw ? {
     displayText: executingToolRaw.title ?? executingToolFallbackRef.current ?? strings.toolExecution.fallbackMessages[0]
   } : null;
@@ -5249,7 +5348,8 @@ function useServerEvents({
     executingTool,
     streamingChatIdRef,
     streamingReasoning,
-    handleServerEvent
+    handleServerEvent,
+    handleDisconnect
   };
 }
 
@@ -5415,7 +5515,8 @@ function UseAIProvider({
   theme: customTheme,
   strings: customStrings,
   visibleAgentIds,
-  onOpenChange
+  onOpenChange,
+  submitMode = "enter"
 }) {
   const fileUploadConfig = fileUploadConfigProp === false ? void 0 : fileUploadConfigProp ?? DEFAULT_FILE_UPLOAD_CONFIG;
   const theme = { ...defaultTheme, ...customTheme };
@@ -5474,12 +5575,17 @@ function UseAIProvider({
   } = useCommandManagement({ repository: commandRepository });
   const handleServerEventRef = useRef12(serverEvents.handleServerEvent);
   handleServerEventRef.current = serverEvents.handleServerEvent;
+  const handleDisconnectRef = useRef12(serverEvents.handleDisconnect);
+  handleDisconnectRef.current = serverEvents.handleDisconnect;
   useEffect11(() => {
     console.log("[UseAIProvider] Initializing client with serverUrl:", serverUrl);
     const client = new UseAIClient(serverUrl);
     const unsubscribeConnection = client.onConnectionStateChange((isConnected) => {
       console.log("[UseAIProvider] Connection state changed:", isConnected);
       setConnected(isConnected);
+      if (!isConnected) {
+        handleDisconnectRef.current();
+      }
     });
     console.log("[UseAIProvider] Connecting...");
     client.connect();
@@ -5529,27 +5635,10 @@ function UseAIProvider({
     let persistedContent = message;
     let multimodalContent;
     if (attachments && attachments.length > 0) {
-      const persistedParts = [];
-      if (message.trim()) {
-        persistedParts.push({ type: "text", text: message });
-      }
-      for (const attachment of attachments) {
-        persistedParts.push({
-          type: "file",
-          file: {
-            name: attachment.file.name,
-            size: attachment.file.size,
-            mimeType: attachment.file.type
-          }
-        });
-      }
-      persistedContent = persistedParts;
-      if (activeChatId) {
-        await chatManagement.saveUserMessage(activeChatId, persistedContent);
-      }
       serverEvents.setLoading(true);
+      let fileContent;
       try {
-        const fileContent = await processAttachments(attachments, {
+        fileContent = await processAttachments(attachments, {
           getCurrentChat: chatManagement.getCurrentChat,
           backend: fileUploadConfig?.backend,
           transformers: fileUploadConfig?.transformers,
@@ -5557,17 +5646,21 @@ function UseAIProvider({
             setFileProcessingState(state);
           }
         });
-        multimodalContent = [];
-        if (message.trim()) {
-          multimodalContent.push({ type: "text", text: message });
-        }
-        multimodalContent.push(...fileContent);
       } catch (error) {
         serverEvents.setLoading(false);
         throw error;
       } finally {
         setFileProcessingState(null);
       }
+      persistedContent = buildPersistedParts(message, attachments, fileContent);
+      if (activeChatId) {
+        await chatManagement.saveUserMessage(activeChatId, persistedContent);
+      }
+      multimodalContent = [];
+      if (message.trim()) {
+        multimodalContent.push({ type: "text", text: message });
+      }
+      multimodalContent.push(...fileContent);
     } else {
       if (activeChatId) {
         await chatManagement.saveUserMessage(activeChatId, persistedContent);
@@ -5680,7 +5773,8 @@ function UseAIProvider({
     feedback: {
       enabled: feedback.enabled,
       submit: feedback.submitFeedback
-    }
+    },
+    submitMode
   };
   const isUIDisabled = CustomButton === null || CustomChat === null;
   const ButtonComponent = isUIDisabled ? null : CustomButton || UseAIFloatingButton;
@@ -5713,7 +5807,8 @@ function UseAIProvider({
     onFeedback: feedback.submitFeedback,
     pendingApprovals: toolSystem.pendingApprovals,
     onApproveToolCall: toolSystem.pendingApprovals.length > 0 ? toolSystem.approveAll : void 0,
-    onRejectToolCall: toolSystem.pendingApprovals.length > 0 ? toolSystem.rejectAll : void 0
+    onRejectToolCall: toolSystem.pendingApprovals.length > 0 ? toolSystem.rejectAll : void 0,
+    submitMode
   };
   const renderDefaultChat = () => {
     if (isUIDisabled) return null;