@meetsmore-oss/use-ai-client 1.14.1 → 1.16.0

package/dist/index.js

@@ -56,7 +56,9 @@ var defaultStrings = {
     /** File size error (use {filename} and {maxSize} placeholders) */
     fileSizeError: 'File "{filename}" exceeds {maxSize}MB limit',
     /** File type error (use {type} placeholder) */
-    fileTypeError: 'File type "{type}" is not accepted'
+    fileTypeError: 'File type "{type}" is not accepted',
+    /** Error when too many files are attached (use {max} placeholder) */
+    maxAttachmentsError: "You can attach at most {max} files per message"
   },
   // Floating button
   floatingButton: {
@@ -374,6 +376,12 @@ function shouldSubmitOnEnter(e, mode) {
   return e.metaKey || e.ctrlKey;
 }
 
+// src/types.ts
+import { EventType, ErrorCode, TOOL_APPROVAL_REQUEST } from "@meetsmore-oss/use-ai-core";
+var DEFAULT_ENABLED_FEATURES = {
+  slashCommands: true
+};
+
 // src/components/MarkdownContent.tsx
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -1399,6 +1407,9 @@ async function getTransformedContent(files, transformer, context, onProgress) {
   transformationCache.set(cacheKey, results);
   return results;
 }
+function normalizeUploadResult(result) {
+  return typeof result === "string" ? { url: result } : result;
+}
 async function toContentPart(attachment, backend) {
   if (attachment.transformedContent !== void 0) {
     return {
@@ -1411,16 +1422,12 @@ async function toContentPart(attachment, backend) {
       }
     };
   }
-  const url = await backend.prepareForSend(attachment.file);
-  if (attachment.file.type.startsWith("image/")) {
-    return { type: "image", url };
+  const result = normalizeUploadResult(await backend.prepareForSend(attachment.file));
+  const isImage = attachment.file.type.startsWith("image/");
+  if ("ref" in result) {
+    return isImage ? { type: "image_ref", ref: result.ref } : { type: "file_ref", ref: result.ref, mimeType: attachment.file.type, name: attachment.file.name };
   }
-  return {
-    type: "file",
-    url,
-    mimeType: attachment.file.type,
-    name: attachment.file.name
-  };
+  return isImage ? { type: "image_url", url: result.url } : { type: "file_url", url: result.url, mimeType: attachment.file.type, name: attachment.file.name };
 }
 async function processAttachments(attachments, config) {
   const { getCurrentChat, backend = new EmbedFileUploadBackend(), transformers = {}, onFileProgress } = config;
@@ -1523,7 +1530,12 @@ function useFileUpload({
   const enabled = config !== void 0;
   const maxFileSize = config?.maxFileSize ?? DEFAULT_MAX_FILE_SIZE;
   const acceptedTypes = config?.acceptedTypes;
+  const maxAttachments = config?.maxAttachments;
   const transformers = config?.transformers;
+  const attachmentsRef = useRef3(attachments);
+  useEffect3(() => {
+    attachmentsRef.current = attachments;
+  }, [attachments]);
   useEffect3(() => {
     if (fileError) {
       const timer = setTimeout(() => setFileError(null), 3e3);
@@ -1559,7 +1571,13 @@ function useFileUpload({
   }, [getCurrentChat, transformers]);
   const handleFiles = useCallback2(async (files) => {
     const fileArray = Array.from(files);
+    let currentCount = attachmentsRef.current.length;
     for (const file of fileArray) {
+      if (maxAttachments !== void 0 && currentCount >= maxAttachments) {
+        const errorMsg = strings.fileUpload.maxAttachmentsError.replace("{max}", String(maxAttachments));
+        setFileError(errorMsg);
+        break;
+      }
       if (file.size > maxFileSize) {
         const errorMsg = strings.fileUpload.fileSizeError.replace("{filename}", file.name).replace("{maxSize}", String(Math.round(maxFileSize / (1024 * 1024))));
         setFileError(errorMsg);
@@ -1578,14 +1596,17 @@ function useFileUpload({
         preview
       };
       setAttachments((prev) => [...prev, attachment]);
+      attachmentsRef.current = [...attachmentsRef.current, attachment];
+      currentCount++;
       const transformerKey = findTransformerPattern(file.type, transformers);
       if (transformerKey) {
         runTransformer(attachmentId, file, transformerKey);
       }
     }
-  }, [maxFileSize, acceptedTypes, strings, transformers, runTransformer]);
+  }, [maxFileSize, acceptedTypes, maxAttachments, strings, transformers, runTransformer]);
   const removeAttachment = useCallback2((id) => {
     setAttachments((prev) => prev.filter((a) => a.id !== id));
+    attachmentsRef.current = attachmentsRef.current.filter((a) => a.id !== id);
     setProcessingState((prev) => {
       const next = new Map(prev);
       next.delete(id);
@@ -1594,6 +1615,7 @@ function useFileUpload({
   }, []);
   const clearAttachments = useCallback2(() => {
     setAttachments([]);
+    attachmentsRef.current = [];
     setProcessingState(/* @__PURE__ */ new Map());
   }, []);
   const openFilePicker = useCallback2(() => {
@@ -2164,7 +2186,16 @@ function FeedbackButton({ type, isSelected, onClick, selectedColor, unselectedCo
   );
 }
 function hasFileContent(content) {
-  return Array.isArray(content) && content.some((part) => part.type === "file");
+  return Array.isArray(content) && content.some((part) => part.type === "file" || part.type === "attachment_ref");
+}
+function fileChipInfo(part) {
+  if (part.type === "file") {
+    return { name: part.file.name, size: part.file.size };
+  }
+  if (part.type === "attachment_ref") {
+    return { name: part.name, size: part.size };
+  }
+  return null;
 }
 function UseAIChatPanel({
   onSendMessage,
@@ -2189,6 +2220,7 @@ function UseAIChatPanel({
   fileProcessing,
   commands = [],
   onSaveCommand,
+  enabledFeatures,
   onRenameCommand,
   onDeleteCommand,
   closeButton,
@@ -2202,6 +2234,8 @@ function UseAIChatPanel({
 }) {
   const strings = useStrings();
   const theme = useTheme();
+  const features = { ...DEFAULT_ENABLED_FEATURES, ...enabledFeatures };
+  const slashCommandsEnabled = features.slashCommands;
   const displayMessages = mergeAssistantMessagesForDisplay(messages);
   const [input, setInput] = useState6("");
   const chatHistoryDropdown = useDropdownState();
@@ -2776,7 +2810,7 @@ function UseAIChatPanel({
                             maxWidth: "80%"
                           },
                           children: [
-                            message.role === "user" && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx12(
+                            message.role === "user" && slashCommandsEnabled && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx12(
                               "button",
                               {
                                 "data-testid": "save-command-button",
@@ -2834,14 +2868,10 @@ function UseAIChatPanel({
                                   wordWrap: "break-word"
                                 },
                                 children: [
-                                  message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.filter((part) => part.type === "file").map((part, idx) => /* @__PURE__ */ jsx12(
-                                    FilePlaceholder,
-                                    {
-                                      name: part.file.name,
-                                      size: part.file.size
-                                    },
-                                    idx
-                                  )) }),
+                                  message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.flatMap((part, idx) => {
+                                    const info = fileChipInfo(part);
+                                    return info ? [/* @__PURE__ */ jsx12(FilePlaceholder, { name: info.name, size: info.size }, idx)] : [];
+                                  }) }),
                                   message.role === "assistant" ? /* @__PURE__ */ jsxs9(Fragment, { children: [
                                     message.reasoningParts && message.reasoningParts.length > 0 && /* @__PURE__ */ jsx12(
                                       Reasoning,
@@ -3380,6 +3410,7 @@ function UseAIChat({ floating = false, submitMode }) {
     fileProcessing: ctx.fileProcessing,
     commands: ctx.commands.list,
     onSaveCommand: ctx.commands.save,
+    enabledFeatures: ctx.enabledFeatures,
     onRenameCommand: ctx.commands.rename,
     onDeleteCommand: ctx.commands.delete,
     executingTool: ctx.tools.executing,
@@ -3411,7 +3442,7 @@ function UseAIChat({ floating = false, submitMode }) {
 
 // src/client.ts
 import { io } from "socket.io-client";
-import { EventType } from "@meetsmore-oss/use-ai-core";
+import { EventType as EventType2 } from "@meetsmore-oss/use-ai-core";
 import { v4 as uuidv42 } from "uuid";
 var UseAIClient = class {
   /**
@@ -3517,7 +3548,7 @@ var UseAIClient = class {
     });
   }
   handleEvent(event) {
-    if (event.type === EventType.RUN_STARTED) {
+    if (event.type === EventType2.RUN_STARTED) {
       this._currentAssistantMessage = {
         id: uuidv42(),
         role: "assistant",
@@ -3529,31 +3560,31 @@ var UseAIClient = class {
       this._currentReasoningBlockText = "";
       this._currentMessageContent = "";
     }
-    if (event.type === EventType.TEXT_MESSAGE_START) {
+    if (event.type === EventType2.TEXT_MESSAGE_START) {
       const e = event;
       this._currentMessageId = e.messageId;
       this._currentMessageContent = "";
-    } else if (event.type === EventType.TEXT_MESSAGE_CONTENT) {
+    } else if (event.type === EventType2.TEXT_MESSAGE_CONTENT) {
       const e = event;
       this._currentMessageContent += e.delta;
-    } else if (event.type === EventType.TEXT_MESSAGE_END) {
+    } else if (event.type === EventType2.TEXT_MESSAGE_END) {
       if (this._currentAssistantMessage) {
         this._currentAssistantMessage.content = this._currentMessageContent;
       }
       this._currentMessageId = null;
-    } else if (event.type === EventType.TOOL_CALL_START) {
+    } else if (event.type === EventType2.TOOL_CALL_START) {
       const e = event;
       this.currentToolCalls.set(e.toolCallId, {
         name: e.toolCallName,
         args: ""
       });
-    } else if (event.type === EventType.TOOL_CALL_ARGS) {
+    } else if (event.type === EventType2.TOOL_CALL_ARGS) {
       const e = event;
       const toolCall = this.currentToolCalls.get(e.toolCallId);
       if (toolCall) {
         toolCall.args += e.delta;
       }
-    } else if (event.type === EventType.TOOL_CALL_END) {
+    } else if (event.type === EventType2.TOOL_CALL_END) {
       const e = event;
       const toolCall = this.currentToolCalls.get(e.toolCallId);
       if (toolCall) {
@@ -3566,17 +3597,17 @@ var UseAIClient = class {
           }
         });
       }
-    } else if (event.type === EventType.REASONING_MESSAGE_START) {
+    } else if (event.type === EventType2.REASONING_MESSAGE_START) {
       this._currentReasoningBlockText = "";
-    } else if (event.type === EventType.REASONING_MESSAGE_CONTENT) {
+    } else if (event.type === EventType2.REASONING_MESSAGE_CONTENT) {
       const e = event;
       this._currentReasoningBlockText += e.delta;
-    } else if (event.type === EventType.REASONING_MESSAGE_END) {
+    } else if (event.type === EventType2.REASONING_MESSAGE_END) {
       this._currentReasoningBlocks.push({
         text: this._currentReasoningBlockText
       });
       this._currentReasoningBlockText = "";
-    } else if (event.type === EventType.REASONING_ENCRYPTED_VALUE) {
+    } else if (event.type === EventType2.REASONING_ENCRYPTED_VALUE) {
       const e = event;
       if (e.subtype === "message" && this._currentReasoningBlocks.length > 0) {
         const lastBlock = this._currentReasoningBlocks[this._currentReasoningBlocks.length - 1];
@@ -3587,7 +3618,7 @@ var UseAIClient = class {
           tc.encryptedValue = e.encryptedValue;
         }
       }
-    } else if (event.type === EventType.TOOL_CALL_RESULT) {
+    } else if (event.type === EventType2.TOOL_CALL_RESULT) {
       const e = event;
       const alreadyTracked = this._pendingToolResults.some(
         (r) => "toolCallId" in r && r.toolCallId === e.toolCallId
@@ -3600,7 +3631,7 @@ var UseAIClient = class {
           toolCallId: e.toolCallId
         });
       }
-    } else if (event.type === EventType.STEP_FINISHED) {
+    } else if (event.type === EventType2.STEP_FINISHED) {
       if (this._currentAssistantToolCalls.length > 0 && this._currentAssistantMessage) {
         const reasoningParts = this._currentReasoningBlocks.length > 0 ? [...this._currentReasoningBlocks] : void 0;
         const assistantMsg = {
@@ -3618,10 +3649,10 @@ var UseAIClient = class {
         this._currentReasoningBlocks = [];
         this._currentMessageContent = "";
       }
-    } else if (event.type === EventType.RUN_FINISHED) {
+    } else if (event.type === EventType2.RUN_FINISHED) {
       this.finalizeRun({ aborted: false });
     }
-    if (event.type === EventType.RUN_FINISHED || event.type === EventType.RUN_ERROR) {
+    if (event.type === EventType2.RUN_FINISHED || event.type === EventType2.RUN_ERROR) {
       this._currentRunId = null;
     }
     this.eventHandlers.forEach((handler) => handler(event));
@@ -3659,31 +3690,13 @@ var UseAIClient = class {
   async sendPrompt(prompt, multimodalContent, forwardedProps) {
     let messageContent = prompt;
     if (multimodalContent && multimodalContent.length > 0) {
-      messageContent = multimodalContent.map((part) => {
-        if (part.type === "text") {
-          return { type: "text", text: part.text };
-        } else if (part.type === "image") {
-          return { type: "image", url: part.url };
-        } else if (part.type === "file") {
-          return {
-            type: "file",
-            url: part.url,
-            mimeType: part.mimeType
-          };
-        } else {
-          return {
-            type: "transformed_file",
-            text: part.text,
-            originalFile: part.originalFile
-          };
-        }
-      });
+      messageContent = multimodalContent;
     }
     const userMessage = {
       id: uuidv42(),
       role: "user",
+      // @ag-ui/core declares Message.content as `string`; the wire also carries MultimodalContent[].
       content: messageContent
-      // Type cast needed for Message type compatibility
     };
     this._messages.push(userMessage);
     const runId = uuidv42();
@@ -3914,7 +3927,7 @@ var UseAIClient = class {
    */
   onTextMessage(handler) {
     return this.onEvent("text-message-handler", (event) => {
-      if (event.type === EventType.TEXT_MESSAGE_END && this._currentMessageContent) {
+      if (event.type === EventType2.TEXT_MESSAGE_END && this._currentMessageContent) {
         handler(this._currentMessageContent);
       }
     });
@@ -3928,7 +3941,7 @@ var UseAIClient = class {
    */
   onToolCall(handler) {
     return this.onEvent("tool-call-handler", (event) => {
-      if (event.type === EventType.TOOL_CALL_END) {
+      if (event.type === EventType2.TOOL_CALL_END) {
         const e = event;
         const toolCall = this.currentToolCalls.get(e.toolCallId);
         if (toolCall) {
@@ -4381,6 +4394,7 @@ function buildPersistedParts(message, attachments, fileContent) {
     parts.push({ type: "text", text: message });
   }
   const transformedByKey = /* @__PURE__ */ new Map();
+  const nonTransformedParts = [];
   for (const part of fileContent) {
     if (part.type === "transformed_file") {
       const key = `${part.originalFile.name}:${part.originalFile.size}:${part.originalFile.mimeType}`;
@@ -4390,6 +4404,8 @@ function buildPersistedParts(message, attachments, fileContent) {
       } else {
         transformedByKey.set(key, [part]);
       }
+    } else {
+      nonTransformedParts.push(part);
     }
   }
   for (const attachment of attachments) {
@@ -4401,6 +4417,18 @@ function buildPersistedParts(message, attachments, fileContent) {
         text: transformed.text,
         originalFile: transformed.originalFile
       });
+      continue;
+    }
+    const part = nonTransformedParts.shift();
+    const ref = part && (part.type === "image_ref" || part.type === "file_ref") ? part.ref : void 0;
+    if (ref) {
+      parts.push({
+        type: "attachment_ref",
+        ref,
+        name: attachment.file.name,
+        mimeType: attachment.file.type,
+        size: attachment.file.size
+      });
     } else {
       parts.push({
         type: "file",
@@ -4453,9 +4481,18 @@ function transformMessagesToClientFormat(persistedMessages) {
 ${p.text}`
             }];
           }
+          if (p.type === "attachment_ref") {
+            return [
+              p.mimeType.startsWith("image/") ? { type: "image_ref", ref: p.ref } : { type: "file_ref", ref: p.ref, mimeType: p.mimeType, name: p.name }
+            ];
+          }
           return [];
         });
-        return { id: msg.id, role: "user", content: parts };
+        return {
+          id: msg.id,
+          role: "user",
+          content: parts
+        };
       }
     }
   });
@@ -5381,11 +5418,6 @@ function useFeedback({
 
 // src/hooks/useServerEvents.ts
 import { useState as useState13, useCallback as useCallback11, useRef as useRef10 } from "react";
-
-// src/types.ts
-import { EventType as EventType2, ErrorCode, TOOL_APPROVAL_REQUEST } from "@meetsmore-oss/use-ai-core";
-
-// src/hooks/useServerEvents.ts
 function useServerEvents({
   toolSystem,
   saveAIResponse,
@@ -5439,21 +5471,21 @@ function useServerEvents({
   const handleServerEvent = useCallback11(async (client, event) => {
     const ts = toolSystemRef.current;
     const strs = stringsRef.current;
-    if (event.type === EventType2.RUN_STARTED) {
+    if (event.type === EventType.RUN_STARTED) {
       messageCountAtRunStartRef.current = client.messages.length;
       runIdAtRunStartRef.current = client.currentRunId ?? void 0;
       hasTextFromPriorStepRef.current = false;
       setStreamingReasoning("");
-    } else if (event.type === EventType2.REASONING_MESSAGE_START) {
+    } else if (event.type === EventType.REASONING_MESSAGE_START) {
       setStreamingReasoning((prev) => prev ? prev + "\n\n" : prev);
-    } else if (event.type === EventType2.REASONING_MESSAGE_CONTENT) {
+    } else if (event.type === EventType.REASONING_MESSAGE_CONTENT) {
       const reasoningEvent = event;
       setStreamingReasoning((prev) => prev + reasoningEvent.delta);
-    } else if (event.type === EventType2.TEXT_MESSAGE_START) {
+    } else if (event.type === EventType.TEXT_MESSAGE_START) {
       if (hasTextFromPriorStepRef.current) {
         setStreamingText((prev) => prev + "\n\n");
       }
-    } else if (event.type === EventType2.TOOL_CALL_START) {
+    } else if (event.type === EventType.TOOL_CALL_START) {
       const e = event;
       const tool = ts.aggregatedToolsRef.current[e.toolCallName];
       const title = e.annotations?.title ?? tool?._options?.annotations?.title ?? null;
@@ -5462,7 +5494,7 @@ function useServerEvents({
         executingToolFallbackRef.current = fallbacks[Math.floor(Math.random() * fallbacks.length)];
       }
       setExecutingTool({ toolCallId: e.toolCallId, title });
-    } else if (event.type === EventType2.TOOL_CALL_END) {
+    } else if (event.type === EventType.TOOL_CALL_END) {
       const toolCallEnd = event;
       const toolCallId = toolCallEnd.toolCallId;
       setExecutingTool((prev) => prev?.toolCallId === toolCallId ? null : prev);
@@ -5487,16 +5519,16 @@ function useServerEvents({
     } else if (event.type === TOOL_APPROVAL_REQUEST) {
       const e = event;
       ts.handleApprovalRequest(e);
-    } else if (event.type === EventType2.TEXT_MESSAGE_CONTENT) {
+    } else if (event.type === EventType.TEXT_MESSAGE_CONTENT) {
       const contentEvent = event;
       hasTextFromPriorStepRef.current = true;
       setStreamingText((prev) => prev + contentEvent.delta);
-    } else if (event.type === EventType2.TEXT_MESSAGE_END) {
-    } else if (event.type === EventType2.RUN_FINISHED) {
+    } else if (event.type === EventType.TEXT_MESSAGE_END) {
+    } else if (event.type === EventType.RUN_FINISHED) {
       const finishedEvent = event;
       await persistFinalResponse(client, { aborted: false, traceId: finishedEvent.runId });
       resetRunUiState();
-    } else if (event.type === EventType2.RUN_ERROR) {
+    } else if (event.type === EventType.RUN_ERROR) {
       const errorEvent = event;
       const errorCode = errorEvent.message;
       if (errorCode === ErrorCode.ABORTED) {
@@ -5697,6 +5729,7 @@ function UseAIProvider({
   forwardedPropsProvider,
   fileUploadConfig: fileUploadConfigProp,
   commandRepository,
+  enabledFeatures,
   renderChat = true,
   theme: customTheme,
   strings: customStrings,
@@ -5949,6 +5982,7 @@ function UseAIProvider({
       rename: renameCommand,
       delete: deleteCommand
     },
+    enabledFeatures,
     ui: {
       isOpen: isChatOpen,
       setOpen: handleSetChatOpen
@@ -5992,6 +6026,7 @@ function UseAIProvider({
     fileProcessing: fileProcessingState,
     commands,
     onSaveCommand: saveCommand,
+    enabledFeatures,
     onRenameCommand: renameCommand,
     onDeleteCommand: deleteCommand,
     executingTool: serverEvents.executingTool,
@@ -6225,7 +6260,7 @@ function useAI(options = {}) {
   }, [enabled, client]);
   const handleAGUIEvent = useCallback14(async (event) => {
     switch (event.type) {
-      case EventType2.TEXT_MESSAGE_END: {
+      case EventType.TEXT_MESSAGE_END: {
         const content = client?.currentMessageContent;
         if (content) {
           setResponse(content);
@@ -6233,7 +6268,7 @@ function useAI(options = {}) {
         }
         break;
       }
-      case EventType2.RUN_ERROR: {
+      case EventType.RUN_ERROR: {
         const errorEvent = event;
         const error2 = new Error(errorEvent.message);
         setError(error2);