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

package/dist/index.js

@@ -1,7 +1,7 @@
 import {
   generateChatId,
   generateMessageId
-} from "./chunk-EGKUR4C7.js";
+} from "./chunk-QTQR7MAU.js";
 
 // src/useAI.ts
 import { useState as useState11, useEffect as useEffect10, useRef as useRef11, useCallback as useCallback10, useMemo as useMemo6 } from "react";
@@ -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: {
@@ -378,8 +380,131 @@ function MarkdownContent({ content }) {
   );
 }
 
-// src/components/FileChip.tsx
+// src/components/Spinner.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Spinner({
+  size = 16,
+  color = "currentColor",
+  trackColor,
+  strokeWidth = 2
+}) {
+  const radius = 10;
+  const circumference = 2 * Math.PI * radius;
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      "data-testid": "spinner",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      style: {
+        animation: "use-ai-spin 1s linear infinite"
+      },
+      children: [
+        /* @__PURE__ */ jsx3("style", { children: `
+          @keyframes use-ai-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        ` }),
+        /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: radius,
+            fill: "none",
+            stroke: trackColor || color,
+            strokeWidth,
+            opacity: trackColor ? 1 : 0.25
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: radius,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeDasharray: circumference,
+            strokeDashoffset: circumference * 0.75,
+            style: {
+              transformOrigin: "center"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ProgressBar.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ProgressBar({
+  progress,
+  size = 16,
+  color = "currentColor",
+  trackColor,
+  strokeWidth = 2
+}) {
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+  const radius = 10;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference * (1 - clampedProgress / 100);
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      "data-testid": "progress-bar",
+      role: "progressbar",
+      "aria-valuenow": clampedProgress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      style: {
+        transform: "rotate(-90deg)"
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: radius,
+            fill: "none",
+            stroke: trackColor || color,
+            strokeWidth,
+            opacity: trackColor ? 1 : 0.25
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: radius,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeDasharray: circumference,
+            strokeDashoffset,
+            style: {
+              transition: "stroke-dashoffset 0.2s ease"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/FileChip.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function formatFileSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -394,11 +519,14 @@ function truncateFilename(name, maxLength = 20) {
   if (maxBaseLength < 5) return name.substring(0, maxLength - 3) + "...";
   return baseName.substring(0, maxBaseLength) + "..." + ext;
 }
-function FileChip({ attachment, onRemove, disabled }) {
+function FileChip({ attachment, onRemove, disabled, processingState }) {
   const theme = useTheme();
   const { file, preview } = attachment;
   const isImage = file.type.startsWith("image/");
-  return /* @__PURE__ */ jsxs2(
+  const isProcessing = processingState?.status === "processing";
+  const hasError = processingState?.status === "error";
+  const progress = processingState?.progress;
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       "data-testid": "file-chip",
@@ -411,10 +539,12 @@ function FileChip({ attachment, onRemove, disabled }) {
         borderRadius: "8px",
         fontSize: "13px",
         color: theme.textColor,
-        maxWidth: "200px"
+        maxWidth: "200px",
+        position: "relative",
+        opacity: isProcessing ? 0.7 : 1
       },
       children: [
-        isImage && preview ? /* @__PURE__ */ jsx3(
+        isImage && preview ? /* @__PURE__ */ jsx5(
           "img",
           {
             src: preview,
@@ -426,7 +556,7 @@ function FileChip({ attachment, onRemove, disabled }) {
               objectFit: "cover"
             }
           }
-        ) : /* @__PURE__ */ jsx3(
+        ) : /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
@@ -442,8 +572,8 @@ function FileChip({ attachment, onRemove, disabled }) {
             children: "\u{1F4CE}"
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsx5(
             "div",
             {
               style: {
@@ -456,28 +586,28 @@ function FileChip({ attachment, onRemove, disabled }) {
               children: truncateFilename(file.name)
             }
           ),
-          /* @__PURE__ */ jsx3("div", { style: { fontSize: "11px", color: theme.secondaryTextColor }, children: formatFileSize(file.size) })
+          /* @__PURE__ */ jsx5("div", { style: { fontSize: "11px", color: theme.secondaryTextColor }, children: formatFileSize(file.size) })
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5(
           "button",
           {
             "data-testid": "file-chip-remove",
             onClick: onRemove,
-            disabled,
+            disabled: disabled || isProcessing,
             style: {
               background: "transparent",
               border: "none",
               padding: "2px 4px",
-              cursor: disabled ? "not-allowed" : "pointer",
+              cursor: disabled || isProcessing ? "not-allowed" : "pointer",
               color: theme.placeholderTextColor,
               fontSize: "16px",
               lineHeight: 1,
               borderRadius: "4px",
               transition: "all 0.15s",
-              opacity: disabled ? 0.5 : 1
+              opacity: disabled || isProcessing ? 0.5 : 1
             },
             onMouseEnter: (e) => {
-              if (!disabled) {
+              if (!disabled && !isProcessing) {
                 e.currentTarget.style.background = theme.borderColor;
                 e.currentTarget.style.color = theme.textColor;
               }
@@ -488,6 +618,44 @@ function FileChip({ attachment, onRemove, disabled }) {
             },
             children: "\xD7"
           }
+        ),
+        isProcessing && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            "data-testid": "file-chip-processing",
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(255, 255, 255, 0.7)",
+              borderRadius: "inherit"
+            },
+            children: progress !== void 0 ? /* @__PURE__ */ jsx5(ProgressBar, { progress, size: 16, color: theme.secondaryTextColor }) : /* @__PURE__ */ jsx5(Spinner, { size: 16, color: theme.secondaryTextColor })
+          }
+        ),
+        hasError && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            "data-testid": "file-chip-error",
+            style: {
+              position: "absolute",
+              bottom: "-2px",
+              right: "-2px",
+              width: "12px",
+              height: "12px",
+              borderRadius: "50%",
+              background: "#ef4444",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "8px",
+              color: "white",
+              fontWeight: "bold"
+            },
+            children: "!"
+          }
         )
       ]
     }
@@ -495,7 +663,7 @@ function FileChip({ attachment, onRemove, disabled }) {
 }
 function FilePlaceholder({ name, size }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       "data-testid": "file-placeholder",
@@ -512,9 +680,9 @@ function FilePlaceholder({ name, size }) {
         maxWidth: "200px"
       },
       children: [
-        /* @__PURE__ */ jsx3("span", { children: "\u{1F4CE}" }),
-        /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx5("span", { children: "\u{1F4CE}" }),
+        /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsx5(
             "div",
             {
               style: {
@@ -526,7 +694,7 @@ function FilePlaceholder({ name, size }) {
               children: truncateFilename(name)
             }
           ),
-          /* @__PURE__ */ jsx3("div", { style: { fontSize: "11px" }, children: formatFileSize(size) })
+          /* @__PURE__ */ jsx5("div", { style: { fontSize: "11px" }, children: formatFileSize(size) })
         ] })
       ]
     }
@@ -555,7 +723,7 @@ function validateCommandName(name) {
 
 // src/components/CommandAutocomplete.tsx
 import { useEffect, useRef } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var MAX_VISIBLE_ITEMS = 8;
 function CommandAutocomplete({
   commands,
@@ -586,7 +754,7 @@ function CommandAutocomplete({
     }
   }, [highlightedIndex]);
   if (filteredCommands.length === 0) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx6(
       "div",
       {
         "data-testid": "command-autocomplete",
@@ -602,7 +770,7 @@ function CommandAutocomplete({
           overflow: "hidden",
           zIndex: 1005
         },
-        children: /* @__PURE__ */ jsx4(
+        children: /* @__PURE__ */ jsx6(
           "div",
           {
             style: {
@@ -617,7 +785,7 @@ function CommandAutocomplete({
       }
     );
   }
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-testid": "command-autocomplete",
@@ -636,7 +804,7 @@ function CommandAutocomplete({
         overflowY: "auto",
         zIndex: 1005
       },
-      children: filteredCommands.map((cmd, index) => /* @__PURE__ */ jsxs3(
+      children: filteredCommands.map((cmd, index) => /* @__PURE__ */ jsxs5(
         "div",
         {
           ref: (el) => {
@@ -656,8 +824,8 @@ function CommandAutocomplete({
             gap: "8px"
           },
           children: [
-            /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsxs3(
+            /* @__PURE__ */ jsxs5("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxs5(
                 "div",
                 {
                   style: {
@@ -671,7 +839,7 @@ function CommandAutocomplete({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx6(
                 "div",
                 {
                   style: {
@@ -686,7 +854,7 @@ function CommandAutocomplete({
                 }
               )
             ] }),
-            onDelete && /* @__PURE__ */ jsx4(
+            onDelete && /* @__PURE__ */ jsx6(
               "button",
               {
                 "data-testid": "command-delete-button",
@@ -717,7 +885,7 @@ function CommandAutocomplete({
                   e.currentTarget.style.background = "transparent";
                 },
                 title: strings.commands.deleteCommand,
-                children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M2 4H14M6.5 7V11M9.5 7V11M3 4L4 13C4 13.5304 4.21071 14.0391 4.58579 14.4142C4.96086 14.7893 5.46957 15 6 15H10C10.5304 15 11.0391 14.7893 11.4142 14.4142C11.7893 14.0391 12 13.5304 12 13L13 4M5.5 4V2.5C5.5 2.23478 5.60536 1.98043 5.79289 1.79289C5.98043 1.60536 6.23478 1.5 6.5 1.5H9.5C9.76522 1.5 10.0196 1.60536 10.2071 1.79289C10.3946 1.98043 10.5 2.23478 10.5 2.5V4" }) })
+                children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: "M2 4H14M6.5 7V11M9.5 7V11M3 4L4 13C4 13.5304 4.21071 14.0391 4.58579 14.4142C4.96086 14.7893 5.46957 15 6 15H10C10.5304 15 11.0391 14.7893 11.4142 14.4142C11.7893 14.0391 12 13.5304 12 13L13 4M5.5 4V2.5C5.5 2.23478 5.60536 1.98043 5.79289 1.79289C5.98043 1.60536 6.23478 1.5 6.5 1.5H9.5C9.76522 1.5 10.0196 1.60536 10.2071 1.79289C10.3946 1.98043 10.5 2.23478 10.5 2.5V4" }) })
               }
             )
           ]
@@ -735,7 +903,7 @@ function getFilteredCommandsCount(commands, searchPrefix) {
 }
 
 // src/hooks/useSlashCommands.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var MAX_VISIBLE_ITEMS2 = 8;
 function useSlashCommands({
   commands,
@@ -870,7 +1038,7 @@ function useSlashCommands({
       }
     }
   }, [savingMessageId, savingMessageText, commandNameInput, commands, onRenameCommand, onSaveCommand, cancelInlineSave, strings]);
-  const AutocompleteComponent = showAutocomplete && commands.length > 0 ? /* @__PURE__ */ jsx5(
+  const AutocompleteComponent = showAutocomplete && commands.length > 0 ? /* @__PURE__ */ jsx7(
     CommandAutocomplete,
     {
       commands,
@@ -886,7 +1054,7 @@ function useSlashCommands({
     if (savingMessageId !== messageId) {
       return null;
     }
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         "data-testid": "inline-save-command",
@@ -900,9 +1068,9 @@ function useSlashCommands({
           gap: "4px"
         },
         children: [
-          /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-            /* @__PURE__ */ jsx5("span", { style: { color: theme.primaryColor, fontSize: "13px", fontWeight: 500 }, children: "/" }),
-            /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+            /* @__PURE__ */ jsx7("span", { style: { color: theme.primaryColor, fontSize: "13px", fontWeight: 500 }, children: "/" }),
+            /* @__PURE__ */ jsx7(
               "input",
               {
                 ref: commandNameInputRef,
@@ -934,7 +1102,7 @@ function useSlashCommands({
                 }
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 "data-testid": "save-command-confirm",
@@ -952,15 +1120,15 @@ function useSlashCommands({
                   justifyContent: "center"
                 },
                 title: strings.commands.saveCommand,
-                children: /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx5("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
-                  /* @__PURE__ */ jsx5("polyline", { points: "17 21 17 13 7 13 7 21" }),
-                  /* @__PURE__ */ jsx5("polyline", { points: "7 3 7 8 15 8" })
+                children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx7("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+                  /* @__PURE__ */ jsx7("polyline", { points: "17 21 17 13 7 13 7 21" }),
+                  /* @__PURE__ */ jsx7("polyline", { points: "7 3 7 8 15 8" })
                 ] })
               }
             )
           ] }),
-          commandSaveError && /* @__PURE__ */ jsx5(
+          commandSaveError && /* @__PURE__ */ jsx7(
             "div",
             {
               "data-testid": "command-save-error",
@@ -995,9 +1163,150 @@ import { useState as useState2, useRef as useRef3, useCallback as useCallback2,
 // src/fileUpload/types.ts
 var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 
+// src/fileUpload/mimeTypeMatcher.ts
+function matchesMimeType(mimeType, pattern) {
+  if (!pattern.includes("*")) {
+    return mimeType === pattern;
+  }
+  const regexPattern = pattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*");
+  const regex = new RegExp(`^${regexPattern}$`);
+  return regex.test(mimeType);
+}
+function findTransformer(mimeType, transformers) {
+  if (!transformers) {
+    return void 0;
+  }
+  let bestMatch;
+  let bestIsExact = false;
+  let bestLength = -1;
+  for (const [pattern, transformer] of Object.entries(transformers)) {
+    if (!matchesMimeType(mimeType, pattern)) {
+      continue;
+    }
+    const isExact = !pattern.includes("*");
+    if (isExact && !bestIsExact) {
+      bestMatch = transformer;
+      bestIsExact = true;
+      bestLength = pattern.length;
+      continue;
+    }
+    if (isExact === bestIsExact && pattern.length > bestLength) {
+      bestMatch = transformer;
+      bestLength = pattern.length;
+    }
+  }
+  return bestMatch;
+}
+
+// src/fileUpload/EmbedFileUploadBackend.ts
+var EmbedFileUploadBackend = class {
+  /**
+   * Converts a File to a base64 data URL.
+   *
+   * @param file - The File object to convert
+   * @returns Promise resolving to a base64 data URL (e.g., "data:image/png;base64,...")
+   * @throws Error if file reading fails
+   */
+  async prepareForSend(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (typeof reader.result === "string") {
+          resolve(reader.result);
+        } else {
+          reject(new Error("Failed to read file as data URL"));
+        }
+      };
+      reader.onerror = () => {
+        reject(new Error(`Failed to read file: ${file.name}`));
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+};
+
+// src/fileUpload/processAttachments.ts
+var transformationCache = /* @__PURE__ */ new Map();
+function getFileCacheKey(file) {
+  return `${file.name}:${file.size}:${file.lastModified}`;
+}
+async function getTransformedContent(file, transformer, context, onProgress) {
+  const cacheKey = getFileCacheKey(file);
+  const cached = transformationCache.get(cacheKey);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const result = await transformer.transform(file, context, onProgress);
+  transformationCache.set(cacheKey, result);
+  return result;
+}
+async function processAttachments(attachments, config) {
+  const { getCurrentChat, backend = new EmbedFileUploadBackend(), transformers = {}, onFileProgress } = config;
+  const contentParts = [];
+  const chat = await getCurrentChat();
+  const context = { chat };
+  for (const attachment of attachments) {
+    try {
+      if (attachment.transformedContent !== void 0) {
+        contentParts.push({
+          type: "transformed_file",
+          text: attachment.transformedContent,
+          originalFile: {
+            name: attachment.file.name,
+            mimeType: attachment.file.type,
+            size: attachment.file.size
+          }
+        });
+        continue;
+      }
+      const transformer = findTransformer(attachment.file.type, transformers);
+      if (transformer) {
+        onFileProgress?.(attachment.id, { status: "processing" });
+        const transformedText = await getTransformedContent(
+          attachment.file,
+          transformer,
+          context,
+          (progress) => {
+            onFileProgress?.(attachment.id, { status: "processing", progress });
+          }
+        );
+        contentParts.push({
+          type: "transformed_file",
+          text: transformedText,
+          originalFile: {
+            name: attachment.file.name,
+            mimeType: attachment.file.type,
+            size: attachment.file.size
+          }
+        });
+        onFileProgress?.(attachment.id, { status: "done" });
+      } else {
+        const url = await backend.prepareForSend(attachment.file);
+        if (attachment.file.type.startsWith("image/")) {
+          contentParts.push({ type: "image", url });
+        } else {
+          contentParts.push({
+            type: "file",
+            url,
+            mimeType: attachment.file.type,
+            name: attachment.file.name
+          });
+        }
+      }
+    } catch (error) {
+      onFileProgress?.(attachment.id, { status: "error" });
+      throw error;
+    }
+  }
+  return contentParts;
+}
+function clearTransformationCache() {
+  transformationCache.clear();
+}
+
 // src/hooks/useFileUpload.tsx
 import { v4 as uuidv4 } from "uuid";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 async function generateImagePreview(file) {
   if (!file.type.startsWith("image/")) {
     return void 0;
@@ -1030,18 +1339,21 @@ function isTypeAccepted(mimeType, acceptedTypes) {
 function useFileUpload({
   config,
   disabled = false,
-  resetDependency
+  resetDependency,
+  getCurrentChat
 }) {
   const strings = useStrings();
   const theme = useTheme();
   const [attachments, setAttachments] = useState2([]);
   const [isDragging, setIsDragging] = useState2(false);
   const [fileError, setFileError] = useState2(null);
+  const [processingState, setProcessingState] = useState2(/* @__PURE__ */ new Map());
   const fileInputRef = useRef3(null);
   const dragCounterRef = useRef3(0);
   const enabled = config !== void 0;
   const maxFileSize = config?.maxFileSize ?? DEFAULT_MAX_FILE_SIZE;
   const acceptedTypes = config?.acceptedTypes;
+  const transformers = config?.transformers;
   useEffect3(() => {
     if (fileError) {
       const timer = setTimeout(() => setFileError(null), 3e3);
@@ -1051,7 +1363,28 @@ function useFileUpload({
   useEffect3(() => {
     setAttachments([]);
     setFileError(null);
+    setProcessingState(/* @__PURE__ */ new Map());
   }, [resetDependency]);
+  const runTransformer = useCallback2(async (attachmentId, file, transformer) => {
+    setProcessingState((prev) => new Map(prev).set(attachmentId, { status: "processing" }));
+    try {
+      const chat = await getCurrentChat();
+      const context = { chat };
+      const transformedContent = await getTransformedContent(file, transformer, context, (progress) => {
+        setProcessingState((prev) => new Map(prev).set(attachmentId, {
+          status: "processing",
+          progress
+        }));
+      });
+      setAttachments((prev) => prev.map(
+        (a) => a.id === attachmentId ? { ...a, transformedContent } : a
+      ));
+      setProcessingState((prev) => new Map(prev).set(attachmentId, { status: "done" }));
+    } catch (error) {
+      console.error(`[useFileUpload] Transformation failed for ${file.name}:`, error);
+      setProcessingState((prev) => new Map(prev).set(attachmentId, { status: "error" }));
+    }
+  }, [getCurrentChat]);
   const handleFiles = useCallback2(async (files) => {
     const fileArray = Array.from(files);
     for (const file of fileArray) {
@@ -1066,21 +1399,30 @@ function useFileUpload({
         continue;
       }
       const preview = await generateImagePreview(file);
-      setAttachments((prev) => [
-        ...prev,
-        {
-          id: uuidv4(),
-          file,
-          preview
-        }
-      ]);
+      const attachmentId = uuidv4();
+      const attachment = {
+        id: attachmentId,
+        file,
+        preview
+      };
+      setAttachments((prev) => [...prev, attachment]);
+      const transformer = findTransformer(file.type, transformers);
+      if (transformer) {
+        runTransformer(attachmentId, file, transformer);
+      }
     }
-  }, [maxFileSize, acceptedTypes, strings]);
+  }, [maxFileSize, acceptedTypes, strings, transformers, runTransformer]);
   const removeAttachment = useCallback2((id) => {
     setAttachments((prev) => prev.filter((a) => a.id !== id));
+    setProcessingState((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
   }, []);
   const clearAttachments = useCallback2(() => {
     setAttachments([]);
+    setProcessingState(/* @__PURE__ */ new Map());
   }, []);
   const openFilePicker = useCallback2(() => {
     fileInputRef.current?.click();
@@ -1133,7 +1475,7 @@ function useFileUpload({
   }), [handleDragEnter, handleDragOver, handleDragLeave, handleDrop]);
   const DropZoneOverlay = useMemo(() => {
     if (!isDragging || !enabled) return null;
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx8(
       "div",
       {
         style: {
@@ -1148,7 +1490,7 @@ function useFileUpload({
           zIndex: 1010,
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx8(
           "div",
           {
             style: {
@@ -1157,7 +1499,7 @@ function useFileUpload({
               borderRadius: "12px",
               boxShadow: theme.buttonShadow
             },
-            children: /* @__PURE__ */ jsx6("span", { style: { color: theme.primaryColor, fontWeight: 600, fontSize: "16px" }, children: strings.fileUpload.dropFilesHere })
+            children: /* @__PURE__ */ jsx8("span", { style: { color: theme.primaryColor, fontWeight: 600, fontSize: "16px" }, children: strings.fileUpload.dropFilesHere })
           }
         )
       }
@@ -1170,6 +1512,7 @@ function useFileUpload({
     enabled,
     maxFileSize,
     acceptedTypes,
+    processingState,
     fileInputRef,
     handleFiles,
     removeAttachment,
@@ -1187,7 +1530,7 @@ function useFileUpload({
 
 // src/hooks/useDropdownState.tsx
 import { useState as useState3, useCallback as useCallback3, useMemo as useMemo2 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function useDropdownState(options = {}) {
   const { backdropZIndex = 1002, initialOpen = false } = options;
   const [isOpen, setIsOpen] = useState3(initialOpen);
@@ -1202,7 +1545,7 @@ function useDropdownState(options = {}) {
   }, []);
   const Backdrop = useMemo2(() => {
     if (!isOpen) return null;
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         onClick: close,
@@ -1227,7 +1570,7 @@ function useDropdownState(options = {}) {
 }
 
 // src/components/UseAIChatPanel.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function getTextContent(content) {
   if (typeof content === "string") {
     return content;
@@ -1248,12 +1591,14 @@ function UseAIChatPanel({
   onLoadChat,
   onDeleteChat,
   onListChats,
+  onGetChat,
   suggestions,
   availableAgents,
   defaultAgent,
   selectedAgent,
   onAgentChange,
   fileUploadConfig,
+  fileProcessing,
   commands = [],
   onSaveCommand,
   onRenameCommand,
@@ -1275,6 +1620,7 @@ function UseAIChatPanel({
     fileError,
     enabled: fileUploadEnabled,
     acceptedTypes,
+    processingState: fileProcessingState,
     fileInputRef,
     removeAttachment,
     clearAttachments,
@@ -1283,6 +1629,7 @@ function UseAIChatPanel({
     getDropZoneProps,
     DropZoneOverlay
   } = useFileUpload({
+    getCurrentChat: onGetChat ?? (async () => null),
     config: fileUploadConfig,
     disabled: loading,
     resetDependency: currentChatId
@@ -1354,7 +1701,7 @@ function UseAIChatPanel({
       chatHistoryDropdown.close();
     }
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       onClick: () => {
@@ -1372,7 +1719,7 @@ function UseAIChatPanel({
       },
       children: [
         DropZoneOverlay,
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             style: {
@@ -1385,7 +1732,7 @@ function UseAIChatPanel({
               gap: "12px"
             },
             children: [
-              /* @__PURE__ */ jsx8("div", { style: { flex: 1, minWidth: 0, position: "relative" }, children: onListChats ? /* @__PURE__ */ jsxs5(
+              /* @__PURE__ */ jsx10("div", { style: { flex: 1, minWidth: 0, position: "relative" }, children: onListChats ? /* @__PURE__ */ jsxs7(
                 "button",
                 {
                   "data-testid": "chat-history-dropdown-button",
@@ -1418,7 +1765,7 @@ function UseAIChatPanel({
                     e.currentTarget.style.background = "transparent";
                   },
                   children: [
-                    /* @__PURE__ */ jsx8("span", { style: {
+                    /* @__PURE__ */ jsx10("span", { style: {
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       whiteSpace: "nowrap",
@@ -1435,13 +1782,13 @@ function UseAIChatPanel({
                       }
                       return strings.header.newChat;
                     })() }),
-                    /* @__PURE__ */ jsx8("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx8("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    /* @__PURE__ */ jsx10("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx10("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx8("div", { style: { fontSize: "14px", fontWeight: "600", color: theme.textColor, padding: "6px 8px" }, children: strings.header.aiAssistant }) }),
-              /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                availableAgents && availableAgents.length > 1 && onAgentChange && /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, children: [
-                  /* @__PURE__ */ jsxs5(
+              ) : /* @__PURE__ */ jsx10("div", { style: { fontSize: "14px", fontWeight: "600", color: theme.textColor, padding: "6px 8px" }, children: strings.header.aiAssistant }) }),
+              /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                availableAgents && availableAgents.length > 1 && onAgentChange && /* @__PURE__ */ jsxs7("div", { style: { position: "relative" }, children: [
+                  /* @__PURE__ */ jsxs7(
                     "button",
                     {
                       "data-testid": "agent-selector",
@@ -1470,7 +1817,7 @@ function UseAIChatPanel({
                       },
                       title: "Select AI model",
                       children: [
-                        /* @__PURE__ */ jsx8("span", { style: {
+                        /* @__PURE__ */ jsx10("span", { style: {
                           overflow: "hidden",
                           textOverflow: "ellipsis",
                           whiteSpace: "nowrap",
@@ -1479,11 +1826,11 @@ function UseAIChatPanel({
                           const agent = availableAgents.find((a) => a.id === (selectedAgent ?? defaultAgent));
                           return agent?.name || "AI";
                         })() }),
-                        /* @__PURE__ */ jsx8("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx8("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                        /* @__PURE__ */ jsx10("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx10("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                       ]
                     }
                   ),
-                  agentDropdown.isOpen && /* @__PURE__ */ jsx8(
+                  agentDropdown.isOpen && /* @__PURE__ */ jsx10(
                     "div",
                     {
                       style: {
@@ -1503,7 +1850,7 @@ function UseAIChatPanel({
                       },
                       children: availableAgents.map((agent) => {
                         const isSelected = agent.id === (selectedAgent ?? defaultAgent);
-                        return /* @__PURE__ */ jsxs5(
+                        return /* @__PURE__ */ jsxs7(
                           "div",
                           {
                             "data-testid": "agent-option",
@@ -1533,13 +1880,13 @@ function UseAIChatPanel({
                               }
                             },
                             children: [
-                              /* @__PURE__ */ jsxs5("div", { style: { flex: 1, minWidth: 0 }, children: [
-                                /* @__PURE__ */ jsx8("div", { style: {
+                              /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
+                                /* @__PURE__ */ jsx10("div", { style: {
                                   fontSize: "13px",
                                   fontWeight: isSelected ? "600" : "500",
                                   color: isSelected ? theme.primaryColor : theme.textColor
                                 }, children: agent.name }),
-                                agent.annotation && /* @__PURE__ */ jsx8("div", { style: {
+                                agent.annotation && /* @__PURE__ */ jsx10("div", { style: {
                                   fontSize: "11px",
                                   color: theme.secondaryTextColor,
                                   marginTop: "2px",
@@ -1548,7 +1895,7 @@ function UseAIChatPanel({
                                   whiteSpace: "nowrap"
                                 }, children: agent.annotation })
                               ] }),
-                              isSelected && /* @__PURE__ */ jsx8("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx8("path", { d: "M2 7L5.5 10.5L12 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                              isSelected && /* @__PURE__ */ jsx10("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx10("path", { d: "M2 7L5.5 10.5L12 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                             ]
                           },
                           agent.id
@@ -1557,7 +1904,7 @@ function UseAIChatPanel({
                     }
                   )
                 ] }),
-                onNewChat && /* @__PURE__ */ jsx8(
+                onNewChat && /* @__PURE__ */ jsx10(
                   "button",
                   {
                     "data-testid": "new-chat-button",
@@ -1584,10 +1931,10 @@ function UseAIChatPanel({
                       e.currentTarget.style.color = theme.secondaryTextColor;
                     },
                     title: strings.header.newChat,
-                    children: /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx8("path", { d: "M8 3.5V12.5M3.5 8H12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                    children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx10("path", { d: "M8 3.5V12.5M3.5 8H12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
                   }
                 ),
-                onDeleteChat && messages.length > 0 && /* @__PURE__ */ jsx8(
+                onDeleteChat && messages.length > 0 && /* @__PURE__ */ jsx10(
                   "button",
                   {
                     "data-testid": "delete-chat-button",
@@ -1611,7 +1958,7 @@ function UseAIChatPanel({
                       e.currentTarget.style.color = theme.secondaryTextColor;
                     },
                     title: strings.header.deleteChat,
-                    children: /* @__PURE__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx8("path", { d: "M2 4H14M6.5 7V11M9.5 7V11M3 4L4 13C4 13.5304 4.21071 14.0391 4.58579 14.4142C4.96086 14.7893 5.46957 15 6 15H10C10.5304 15 11.0391 14.7893 11.4142 14.4142C11.7893 14.0391 12 13.5304 12 13L13 4M5.5 4V2.5C5.5 2.23478 5.60536 1.98043 5.79289 1.79289C5.98043 1.60536 6.23478 1.5 6.5 1.5H9.5C9.76522 1.5 10.0196 1.60536 10.2071 1.79289C10.3946 1.98043 10.5 2.23478 10.5 2.5V4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx10("path", { d: "M2 4H14M6.5 7V11M9.5 7V11M3 4L4 13C4 13.5304 4.21071 14.0391 4.58579 14.4142C4.96086 14.7893 5.46957 15 6 15H10C10.5304 15 11.0391 14.7893 11.4142 14.4142C11.7893 14.0391 12 13.5304 12 13L13 4M5.5 4V2.5C5.5 2.23478 5.60536 1.98043 5.79289 1.79289C5.98043 1.60536 6.23478 1.5 6.5 1.5H9.5C9.76522 1.5 10.0196 1.60536 10.2071 1.79289C10.3946 1.98043 10.5 2.23478 10.5 2.5V4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
                   }
                 ),
                 closeButton
@@ -1619,7 +1966,7 @@ function UseAIChatPanel({
             ]
           }
         ),
-        chatHistoryDropdown.isOpen && onListChats && /* @__PURE__ */ jsx8(
+        chatHistoryDropdown.isOpen && onListChats && /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -1636,7 +1983,7 @@ function UseAIChatPanel({
               flexDirection: "column",
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx10(
               "div",
               {
                 style: {
@@ -1644,7 +1991,7 @@ function UseAIChatPanel({
                   overflowY: "auto",
                   padding: "8px"
                 },
-                children: chatHistory.length === 0 ? /* @__PURE__ */ jsx8(
+                children: chatHistory.length === 0 ? /* @__PURE__ */ jsx10(
                   "div",
                   {
                     style: {
@@ -1653,9 +2000,9 @@ function UseAIChatPanel({
                       padding: "32px 16px",
                       fontSize: "13px"
                     },
-                    children: /* @__PURE__ */ jsx8("p", { style: { margin: 0 }, children: strings.chatHistory.noChatHistory })
+                    children: /* @__PURE__ */ jsx10("p", { style: { margin: 0 }, children: strings.chatHistory.noChatHistory })
                   }
-                ) : chatHistory.map((chat) => /* @__PURE__ */ jsxs5(
+                ) : chatHistory.map((chat) => /* @__PURE__ */ jsxs7(
                   "div",
                   {
                     "data-testid": "chat-history-item",
@@ -1679,10 +2026,10 @@ function UseAIChatPanel({
                       }
                     },
                     children: [
-                      /* @__PURE__ */ jsx8("div", { style: { fontSize: "13px", fontWeight: "500", color: theme.textColor, marginBottom: "4px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: chat.title || strings.header.newChat }),
-                      /* @__PURE__ */ jsxs5("div", { style: { fontSize: "11px", color: theme.secondaryTextColor }, children: [
+                      /* @__PURE__ */ jsx10("div", { style: { fontSize: "13px", fontWeight: "500", color: theme.textColor, marginBottom: "4px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: chat.title || strings.header.newChat }),
+                      /* @__PURE__ */ jsxs7("div", { style: { fontSize: "11px", color: theme.secondaryTextColor }, children: [
                         new Date(chat.updatedAt).toLocaleDateString([], { month: "short", day: "numeric" }),
-                        currentChatId === chat.id && /* @__PURE__ */ jsxs5("span", { style: {
+                        currentChatId === chat.id && /* @__PURE__ */ jsxs7("span", { style: {
                           marginLeft: "8px",
                           color: theme.primaryColor,
                           fontWeight: "600"
@@ -1701,7 +2048,7 @@ function UseAIChatPanel({
         ),
         chatHistoryDropdown.Backdrop,
         agentDropdown.Backdrop,
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             style: {
@@ -1713,7 +2060,7 @@ function UseAIChatPanel({
               gap: "12px"
             },
             children: [
-              messages.length === 0 && /* @__PURE__ */ jsxs5(
+              messages.length === 0 && /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   style: {
@@ -1724,12 +2071,12 @@ function UseAIChatPanel({
                     gap: "20px"
                   },
                   children: [
-                    /* @__PURE__ */ jsxs5("div", { style: { textAlign: "center", color: theme.secondaryTextColor, fontSize: "14px" }, children: [
-                      /* @__PURE__ */ jsx8("p", { style: { margin: 0, fontSize: "32px", marginBottom: "12px" }, children: "\u{1F4AC}" }),
-                      /* @__PURE__ */ jsx8("p", { style: { margin: 0 }, children: strings.emptyChat.startConversation }),
-                      /* @__PURE__ */ jsx8("p", { style: { margin: "8px 0 0", fontSize: "12px" }, children: strings.emptyChat.askMeToHelp })
+                    /* @__PURE__ */ jsxs7("div", { style: { textAlign: "center", color: theme.secondaryTextColor, fontSize: "14px" }, children: [
+                      /* @__PURE__ */ jsx10("p", { style: { margin: 0, fontSize: "32px", marginBottom: "12px" }, children: "\u{1F4AC}" }),
+                      /* @__PURE__ */ jsx10("p", { style: { margin: 0 }, children: strings.emptyChat.startConversation }),
+                      /* @__PURE__ */ jsx10("p", { style: { margin: "8px 0 0", fontSize: "12px" }, children: strings.emptyChat.askMeToHelp })
                     ] }),
-                    displayedSuggestions.length > 0 && /* @__PURE__ */ jsx8(
+                    displayedSuggestions.length > 0 && /* @__PURE__ */ jsx10(
                       "div",
                       {
                         style: {
@@ -1739,7 +2086,7 @@ function UseAIChatPanel({
                           width: "100%",
                           maxWidth: "320px"
                         },
-                        children: displayedSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx8(
+                        children: displayedSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx10(
                           "button",
                           {
                             "data-testid": "chat-suggestion-button",
@@ -1783,7 +2130,7 @@ function UseAIChatPanel({
                   ]
                 }
               ),
-              messages.map((message) => /* @__PURE__ */ jsxs5(
+              messages.map((message) => /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   "data-testid": `chat-message-${message.role}`,
@@ -1796,7 +2143,7 @@ function UseAIChatPanel({
                   onMouseEnter: () => message.role === "user" && setHoveredMessageId(message.id),
                   onMouseLeave: () => setHoveredMessageId(null),
                   children: [
-                    /* @__PURE__ */ jsxs5(
+                    /* @__PURE__ */ jsxs7(
                       "div",
                       {
                         style: {
@@ -1804,7 +2151,7 @@ function UseAIChatPanel({
                           maxWidth: "80%"
                         },
                         children: [
-                          message.role === "user" && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx8(
+                          message.role === "user" && hoveredMessageId === message.id && onSaveCommand && !slashCommands.isSavingCommand(message.id) && /* @__PURE__ */ jsx10(
                             "button",
                             {
                               "data-testid": "save-command-button",
@@ -1840,14 +2187,14 @@ function UseAIChatPanel({
                                 e.currentTarget.style.transform = "scale(1)";
                                 e.currentTarget.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.15)";
                               },
-                              children: /* @__PURE__ */ jsxs5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                /* @__PURE__ */ jsx8("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
-                                /* @__PURE__ */ jsx8("polyline", { points: "17 21 17 13 7 13 7 21" }),
-                                /* @__PURE__ */ jsx8("polyline", { points: "7 3 7 8 15 8" })
+                              children: /* @__PURE__ */ jsxs7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                /* @__PURE__ */ jsx10("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+                                /* @__PURE__ */ jsx10("polyline", { points: "17 21 17 13 7 13 7 21" }),
+                                /* @__PURE__ */ jsx10("polyline", { points: "7 3 7 8 15 8" })
                               ] })
                             }
                           ),
-                          /* @__PURE__ */ jsxs5(
+                          /* @__PURE__ */ jsxs7(
                             "div",
                             {
                               "data-testid": "chat-message-content",
@@ -1862,7 +2209,7 @@ function UseAIChatPanel({
                                 wordWrap: "break-word"
                               },
                               children: [
-                                message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.filter((part) => part.type === "file").map((part, idx) => /* @__PURE__ */ jsx8(
+                                message.role === "user" && hasFileContent(message.content) && /* @__PURE__ */ jsx10("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }, children: message.content.filter((part) => part.type === "file").map((part, idx) => /* @__PURE__ */ jsx10(
                                   FilePlaceholder,
                                   {
                                     name: part.file.name,
@@ -1870,7 +2217,7 @@ function UseAIChatPanel({
                                   },
                                   idx
                                 )) }),
-                                message.role === "assistant" ? /* @__PURE__ */ jsx8(MarkdownContent, { content: getTextContent(message.content) }) : getTextContent(message.content)
+                                message.role === "assistant" ? /* @__PURE__ */ jsx10(MarkdownContent, { content: getTextContent(message.content) }) : getTextContent(message.content)
                               ]
                             }
                           ),
@@ -1881,7 +2228,7 @@ function UseAIChatPanel({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx10(
                       "div",
                       {
                         style: {
@@ -1900,14 +2247,14 @@ function UseAIChatPanel({
                 },
                 message.id
               )),
-              loading && /* @__PURE__ */ jsx8(
+              loading && /* @__PURE__ */ jsx10(
                 "div",
                 {
                   style: {
                     display: "flex",
                     alignItems: "flex-start"
                   },
-                  children: /* @__PURE__ */ jsx8(
+                  children: /* @__PURE__ */ jsx10(
                     "div",
                     {
                       className: "markdown-content",
@@ -1920,19 +2267,41 @@ function UseAIChatPanel({
                         color: theme.textColor,
                         maxWidth: "80%"
                       },
-                      children: streamingText ? /* @__PURE__ */ jsx8(MarkdownContent, { content: streamingText }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
-                        /* @__PURE__ */ jsx8("span", { style: { opacity: 0.6 }, children: strings.input.thinking }),
-                        /* @__PURE__ */ jsx8("span", { className: "dots", style: { marginLeft: "4px" }, 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: "..." })
                       ] })
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ jsx8("div", { ref: messagesEndRef })
+              /* @__PURE__ */ jsx10("div", { ref: messagesEndRef })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs7(
           "div",
           {
             style: {
@@ -1940,7 +2309,7 @@ function UseAIChatPanel({
               borderTop: `1px solid ${theme.borderColor}`
             },
             children: [
-              fileError && /* @__PURE__ */ jsx8(
+              fileError && /* @__PURE__ */ jsx10(
                 "div",
                 {
                   "data-testid": "file-error",
@@ -1955,7 +2324,7 @@ function UseAIChatPanel({
                   children: fileError
                 }
               ),
-              attachments.length > 0 && /* @__PURE__ */ jsx8(
+              attachments.length > 0 && /* @__PURE__ */ jsx10(
                 "div",
                 {
                   "data-testid": "file-attachments",
@@ -1965,18 +2334,19 @@ function UseAIChatPanel({
                     gap: "8px",
                     marginBottom: "8px"
                   },
-                  children: attachments.map((attachment) => /* @__PURE__ */ jsx8(
+                  children: attachments.map((attachment) => /* @__PURE__ */ jsx10(
                     FileChip,
                     {
                       attachment,
                       onRemove: () => removeAttachment(attachment.id),
-                      disabled: loading
+                      disabled: loading,
+                      processingState: fileProcessingState.get(attachment.id)
                     },
                     attachment.id
                   ))
                 }
               ),
-              /* @__PURE__ */ jsxs5(
+              /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   style: {
@@ -1988,18 +2358,19 @@ function UseAIChatPanel({
                   },
                   children: [
                     slashCommands.AutocompleteComponent,
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx10(
                       "input",
                       {
                         ref: fileInputRef,
                         type: "file",
                         multiple: true,
+                        "data-testid": "file-input",
                         style: { display: "none" },
                         onChange: handleFileInputChange,
                         accept: acceptedTypes?.join(",")
                       }
                     ),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx10(
                       "textarea",
                       {
                         ref: textareaRef,
@@ -2027,7 +2398,7 @@ function UseAIChatPanel({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsxs5(
+                    /* @__PURE__ */ jsxs7(
                       "div",
                       {
                         style: {
@@ -2037,7 +2408,7 @@ function UseAIChatPanel({
                           padding: "4px 8px"
                         },
                         children: [
-                          /* @__PURE__ */ jsx8("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: fileUploadEnabled && /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx10("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: fileUploadEnabled && /* @__PURE__ */ jsx10(
                             "button",
                             {
                               "data-testid": "file-picker-button",
@@ -2069,13 +2440,13 @@ function UseAIChatPanel({
                                 e.currentTarget.style.borderColor = theme.borderColor;
                               },
                               title: strings.fileUpload.attachFiles,
-                              children: /* @__PURE__ */ jsxs5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                /* @__PURE__ */ jsx8("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-                                /* @__PURE__ */ jsx8("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+                              children: /* @__PURE__ */ jsxs7("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                /* @__PURE__ */ jsx10("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                                /* @__PURE__ */ jsx10("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
                               ] })
                             }
                           ) }),
-                          /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx10(
                             "button",
                             {
                               "data-testid": "chat-send-button",
@@ -2096,9 +2467,9 @@ function UseAIChatPanel({
                                 height: "32px",
                                 transition: "all 0.2s"
                               },
-                              children: /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                                /* @__PURE__ */ jsx8("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
-                                /* @__PURE__ */ jsx8("polyline", { points: "5 12 12 5 19 12" })
+                              children: /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                /* @__PURE__ */ jsx10("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+                                /* @__PURE__ */ jsx10("polyline", { points: "5 12 12 5 19 12" })
                               ] })
                             }
                           )
@@ -2111,7 +2482,7 @@ function UseAIChatPanel({
             ]
           }
         ),
-        /* @__PURE__ */ jsx8("style", { children: `
+        /* @__PURE__ */ jsx10("style", { children: `
         /* Markdown content styles */
         .markdown-content > :first-child {
           margin-top: 0 !important;
@@ -2136,7 +2507,7 @@ function UseAIChatPanel({
 }
 
 // src/components/UseAIFloatingChatWrapper.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function UseAIFloatingChatWrapper({
   isOpen,
   onClose,
@@ -2144,8 +2515,8 @@ function UseAIFloatingChatWrapper({
 }) {
   const theme = useTheme();
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx11(
       "div",
       {
         style: {
@@ -2161,7 +2532,7 @@ function UseAIFloatingChatWrapper({
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx11(
       "div",
       {
         style: {
@@ -2180,7 +2551,7 @@ function UseAIFloatingChatWrapper({
         children
       }
     ),
-    /* @__PURE__ */ jsx9("style", { children: `
+    /* @__PURE__ */ jsx11("style", { children: `
         @keyframes fadeIn {
           from { opacity: 0; }
           to { opacity: 1; }
@@ -2200,7 +2571,7 @@ function UseAIFloatingChatWrapper({
 }
 function CloseButton({ onClick }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       "data-testid": "chat-close-button",
@@ -2235,7 +2606,7 @@ function CloseButton({ onClick }) {
 
 // src/components/UseAIChat.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var __UseAIChatContext = createContext3(null);
 function useChatUIContext() {
   const context = useContext3(__UseAIChatContext);
@@ -2259,34 +2630,36 @@ function UseAIChat({ floating = false }) {
     onLoadChat: ctx.history.load,
     onDeleteChat: ctx.history.delete,
     onListChats: ctx.history.list,
+    onGetChat: ctx.history.get,
     suggestions: ctx.suggestions,
     availableAgents: ctx.agents.available,
     defaultAgent: ctx.agents.default,
     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,
     onDeleteCommand: ctx.commands.delete
   };
   if (floating) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       UseAIFloatingChatWrapper,
       {
         isOpen: ctx.ui.isOpen,
         onClose: () => ctx.ui.setOpen(false),
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx12(
           UseAIChatPanel,
           {
             ...chatPanelProps,
-            closeButton: /* @__PURE__ */ jsx10(CloseButton, { onClick: () => ctx.ui.setOpen(false) })
+            closeButton: /* @__PURE__ */ jsx12(CloseButton, { onClick: () => ctx.ui.setOpen(false) })
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsx10(UseAIChatPanel, { ...chatPanelProps });
+  return /* @__PURE__ */ jsx12(UseAIChatPanel, { ...chatPanelProps });
 }
 
 // src/client.ts
@@ -2487,12 +2860,18 @@ var UseAIClient = class {
           return { type: "text", text: part.text };
         } else if (part.type === "image") {
           return { type: "image", url: part.url };
-        } else {
+        } 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
+          };
         }
       });
     }
@@ -2867,7 +3246,8 @@ var LocalStorageChatRepository = class {
       title: options?.title,
       messages: [],
       createdAt: now,
-      updatedAt: now
+      updatedAt: now,
+      metadata: options?.metadata
     };
     await this.enforceMaxChatsLimit();
     await this.saveChat(chat);
@@ -2951,6 +3331,14 @@ var LocalStorageChatRepository = class {
       throw new Error(`Failed to clear all chats: ${error instanceof Error ? error.message : "Unknown error"}`);
     }
   }
+  async updateMetadata(id, metadata, overwrite = false) {
+    const chat = await this.loadChat(id);
+    if (!chat) {
+      throw new Error(`Chat not found: ${id}`);
+    }
+    chat.metadata = overwrite ? metadata : { ...chat.metadata, ...metadata };
+    await this.saveChat(chat);
+  }
   getChatKey(id) {
     return `${STORAGE_KEY_PREFIX}${id}`;
   }
@@ -2989,36 +3377,12 @@ var LocalStorageChatRepository = class {
   }
 };
 
-// src/fileUpload/EmbedFileUploadBackend.ts
-var EmbedFileUploadBackend = class {
-  /**
-   * Converts a File to a base64 data URL.
-   *
-   * @param file - The File object to convert
-   * @returns Promise resolving to a base64 data URL (e.g., "data:image/png;base64,...")
-   * @throws Error if file reading fails
-   */
-  async prepareForSend(file) {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        if (typeof reader.result === "string") {
-          resolve(reader.result);
-        } else {
-          reject(new Error("Failed to read file as data URL"));
-        }
-      };
-      reader.onerror = () => {
-        reject(new Error(`Failed to read file: ${file.name}`));
-      };
-      reader.readAsDataURL(file);
-    });
-  }
-};
-
 // src/hooks/useChatManagement.ts
 import { useState as useState5, useCallback as useCallback4, useRef as useRef5, useEffect as useEffect5 } from "react";
 var CHAT_TITLE_MAX_LENGTH = 50;
+function deepEquals(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
 function generateChatTitle(message) {
   return message.length > CHAT_TITLE_MAX_LENGTH ? message.substring(0, CHAT_TITLE_MAX_LENGTH) + "..." : message;
 }
@@ -3049,7 +3413,11 @@ function transformMessagesToClientFormat(uiMessages) {
 }
 function useChatManagement({
   repository,
-  clientRef
+  clientRef,
+  onSendMessage,
+  setOpen,
+  connected,
+  loading
 }) {
   const [currentChatId, setCurrentChatId] = useState5(null);
   const [pendingChatId, setPendingChatId] = useState5(null);
@@ -3082,18 +3450,18 @@ function useChatManagement({
     const loadedMessages = await loadChatMessages(chatId);
     setMessages(loadedMessages);
   }, [loadChatMessages]);
-  const createNewChat = useCallback4(async () => {
+  const createNewChat = useCallback4(async (options) => {
     console.log("[ChatManagement] createNewChat called - currentChatId:", currentChatId, "pendingChatId:", pendingChatId, "messages.length:", messages.length);
     if (pendingChatId && messages.length === 0) {
-      console.log("[ChatManagement] Pending chat is already blank, not creating new chat");
-      return pendingChatId;
-    }
-    if (currentChatId && !pendingChatId && messages.length === 0) {
-      console.log("[ChatManagement] Current chat is already blank, not creating new chat");
-      return currentChatId;
+      const existingChat = await repository.loadChat(pendingChatId);
+      const optionsMatch = existingChat && existingChat.title === options?.title && deepEquals(existingChat.metadata, options?.metadata);
+      if (optionsMatch) {
+        console.log("[ChatManagement] Last created chat has matching options, reusing:", pendingChatId);
+        return pendingChatId;
+      }
     }
     console.log("[ChatManagement] Creating new chat...");
-    const chatId = await repository.createChat();
+    const chatId = await repository.createChat(options);
     setPendingChatId(chatId);
     setMessages([]);
     if (clientRef.current) {
@@ -3138,6 +3506,22 @@ function useChatManagement({
       }
     }
   }, [currentChatId, repository]);
+  const getCurrentChat = useCallback4(async () => {
+    const chatId = pendingChatId || currentChatId;
+    if (!chatId) return null;
+    const chat = await repository.loadChat(chatId);
+    if (chat?.metadata) {
+      chat.metadata = Object.freeze({ ...chat.metadata });
+    }
+    return chat;
+  }, [pendingChatId, currentChatId, repository]);
+  const updateMetadata = useCallback4(async (metadata, overwrite = false) => {
+    const chatId = pendingChatId || currentChatId;
+    if (!chatId) {
+      throw new Error("No active chat");
+    }
+    await repository.updateMetadata(chatId, metadata, overwrite);
+  }, [pendingChatId, currentChatId, repository]);
   const activatePendingChat = useCallback4(() => {
     if (!pendingChatId) return null;
     console.log("[ChatManagement] Activating pending chat:", pendingChatId);
@@ -3156,7 +3540,7 @@ function useChatManagement({
         console.error("[ChatManagement] Chat not found:", chatId);
         return false;
       }
-      const { generateMessageId: generateMessageId2 } = await import("./types-TVUXB3NB.js");
+      const { generateMessageId: generateMessageId2 } = await import("./types-64CH2HXY.js");
       chat.messages.push({
         id: generateMessageId2(),
         role: "user",
@@ -3192,7 +3576,7 @@ function useChatManagement({
         console.error("[ChatManagement] Chat not found:", currentChatIdValue);
         return;
       }
-      const { generateMessageId: generateMessageId2 } = await import("./types-TVUXB3NB.js");
+      const { generateMessageId: generateMessageId2 } = await import("./types-64CH2HXY.js");
       chat.messages.push({
         id: generateMessageId2(),
         role: "assistant",
@@ -3249,6 +3633,70 @@ function useChatManagement({
     }
   }, [currentChatId, pendingChatId, createNewChat, repository, loadChatMessages, clientRef]);
   const displayedChatId = pendingChatId || currentChatId;
+  const pendingMessagesRef = useRef5([]);
+  const isProcessingQueueRef = useRef5(false);
+  const loadingRef = useRef5(loading);
+  useEffect5(() => {
+    loadingRef.current = loading;
+  }, [loading]);
+  const processMessageQueue = useCallback4(async () => {
+    if (isProcessingQueueRef.current || pendingMessagesRef.current.length === 0 || !onSendMessage) {
+      return;
+    }
+    isProcessingQueueRef.current = true;
+    while (pendingMessagesRef.current.length > 0) {
+      const { message, options } = pendingMessagesRef.current.shift();
+      const { newChat = false, attachments = [], openChat = true, metadata } = options ?? {};
+      if (newChat) {
+        await createNewChat({ metadata });
+      }
+      const fileAttachments = await Promise.all(
+        attachments.map(async (file) => {
+          let preview;
+          if (file.type.startsWith("image/")) {
+            preview = await new Promise((resolve) => {
+              const reader = new FileReader();
+              reader.onload = () => resolve(typeof reader.result === "string" ? reader.result : void 0);
+              reader.onerror = () => resolve(void 0);
+              reader.readAsDataURL(file);
+            });
+          }
+          return {
+            id: crypto.randomUUID(),
+            file,
+            preview
+          };
+        })
+      );
+      await onSendMessage(message, fileAttachments.length > 0 ? fileAttachments : void 0);
+      if (openChat && setOpen) {
+        setOpen(true);
+      }
+      await new Promise((resolve) => {
+        const checkLoading = () => {
+          setTimeout(() => {
+            if (!loadingRef.current) {
+              resolve();
+            } else {
+              checkLoading();
+            }
+          }, 100);
+        };
+        checkLoading();
+      });
+    }
+    isProcessingQueueRef.current = false;
+  }, [onSendMessage, createNewChat, setOpen]);
+  const sendMessage = useCallback4(async (message, options) => {
+    if (!onSendMessage) {
+      throw new Error("sendMessage is not available (onSendMessage callback not provided)");
+    }
+    if (!connected) {
+      throw new Error("Not connected to UseAI server");
+    }
+    pendingMessagesRef.current.push({ message, options });
+    await processMessageQueue();
+  }, [onSendMessage, connected, processMessageQueue]);
   return {
     currentChatId,
     pendingChatId,
@@ -3263,6 +3711,9 @@ function useChatManagement({
     saveUserMessage,
     saveAIResponse,
     reloadMessages,
+    sendMessage,
+    getCurrentChat,
+    updateMetadata,
     currentChatIdSnapshot,
     pendingChatIdSnapshot
   };
@@ -3644,7 +4095,7 @@ function usePromptState({
 }
 
 // src/providers/useAIProvider.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var __UseAIContext = createContext4(null);
 var hasWarnedAboutMissingProvider = false;
 var noOpContextValue = {
@@ -3674,6 +4125,11 @@ var noOpContextValue = {
     },
     list: async () => [],
     clear: async () => {
+    },
+    sendMessage: async () => {
+    },
+    get: async () => null,
+    updateMetadata: async () => {
     }
   },
   agents: {
@@ -3713,7 +4169,8 @@ function UseAIProvider({
   renderChat = true,
   theme: customTheme,
   strings: customStrings,
-  visibleAgentIds
+  visibleAgentIds,
+  onOpenChange
 }) {
   const fileUploadConfig = fileUploadConfigProp === false ? void 0 : fileUploadConfigProp ?? DEFAULT_FILE_UPLOAD_CONFIG;
   const theme = { ...defaultTheme, ...customTheme };
@@ -3721,12 +4178,18 @@ 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);
+  }, [onOpenChange]);
   const [streamingText, setStreamingText] = useState10("");
   const streamingChatIdRef = useRef9(null);
   const clientRef = useRef9(null);
   const repositoryRef = useRef9(
     chatRepository || new LocalStorageChatRepository()
   );
+  const handleSendMessageRef = useRef9(null);
   const {
     registerTools,
     unregisterTools,
@@ -3748,9 +4211,18 @@ function UseAIProvider({
     clientRef,
     connected
   });
+  const stableSendMessage = useCallback9(async (message, attachments) => {
+    if (handleSendMessageRef.current) {
+      await handleSendMessageRef.current(message, attachments);
+    }
+  }, []);
   const chatManagement = useChatManagement({
     repository: repositoryRef.current,
-    clientRef
+    clientRef,
+    onSendMessage: stableSendMessage,
+    setOpen: handleSetChatOpen,
+    connected,
+    loading
   });
   const {
     currentChatId,
@@ -3764,7 +4236,10 @@ function UseAIProvider({
     clearCurrentChat,
     activatePendingChat,
     saveUserMessage,
-    saveAIResponse
+    saveAIResponse,
+    sendMessage,
+    getCurrentChat,
+    updateMetadata
   } = chatManagement;
   const {
     availableAgents,
@@ -3905,7 +4380,6 @@ function UseAIProvider({
     let persistedContent = message;
     let multimodalContent;
     if (attachments && attachments.length > 0) {
-      const backend = fileUploadConfig?.backend ?? new EmbedFileUploadBackend();
       const persistedParts = [];
       if (message.trim()) {
         persistedParts.push({ type: "text", text: message });
@@ -3921,35 +4395,39 @@ function UseAIProvider({
         });
       }
       persistedContent = persistedParts;
-      const contentParts = [];
-      if (message.trim()) {
-        contentParts.push({ type: "text", text: message });
+      if (activeChatId) {
+        await saveUserMessage(activeChatId, persistedContent);
       }
-      for (const attachment of attachments) {
-        try {
-          const url = await backend.prepareForSend(attachment.file);
-          if (attachment.file.type.startsWith("image/")) {
-            contentParts.push({ type: "image", url });
-          } else {
-            contentParts.push({
-              type: "file",
-              url,
-              mimeType: attachment.file.type,
-              name: attachment.file.name
-            });
+      setLoading(true);
+      try {
+        const fileContent = await processAttachments(attachments, {
+          getCurrentChat,
+          backend: fileUploadConfig?.backend,
+          transformers: fileUploadConfig?.transformers,
+          onFileProgress: (_fileId, state) => {
+            setFileProcessingState(state);
           }
-        } catch (error) {
-          console.error("[Provider] Failed to prepare file for send:", error);
+        });
+        multimodalContent = [];
+        if (message.trim()) {
+          multimodalContent.push({ type: "text", text: message });
         }
+        multimodalContent.push(...fileContent);
+      } catch (error) {
+        setLoading(false);
+        throw error;
+      } finally {
+        setFileProcessingState(null);
       }
-      multimodalContent = contentParts;
-    }
-    if (activeChatId) {
-      await saveUserMessage(activeChatId, persistedContent);
+    } else {
+      if (activeChatId) {
+        await saveUserMessage(activeChatId, persistedContent);
+      }
+      setLoading(true);
     }
-    setLoading(true);
     await clientRef.current.sendPrompt(message, multimodalContent);
-  }, [activatePendingChat, currentChatId, saveUserMessage, fileUploadConfig]);
+  }, [activatePendingChat, currentChatId, saveUserMessage, fileUploadConfig, getCurrentChat]);
+  handleSendMessageRef.current = handleSendMessage;
   const value = {
     serverUrl,
     connected,
@@ -3969,7 +4447,10 @@ function UseAIProvider({
       load: loadChat,
       delete: deleteChat,
       list: listChats,
-      clear: clearCurrentChat
+      clear: clearCurrentChat,
+      sendMessage,
+      get: getCurrentChat,
+      updateMetadata
     },
     agents: {
       available: availableAgents,
@@ -3994,12 +4475,14 @@ function UseAIProvider({
     streamingText: effectiveStreamingText,
     suggestions: aggregatedSuggestions,
     fileUploadConfig,
+    fileProcessing: fileProcessingState,
     history: {
       currentId: displayedChatId,
       create: createNewChat,
       load: loadChat,
       delete: deleteChat,
-      list: listChats
+      list: listChats,
+      get: getCurrentChat
     },
     agents: {
       available: availableAgents,
@@ -4015,7 +4498,7 @@ function UseAIProvider({
     },
     ui: {
       isOpen: isChatOpen,
-      setOpen: setIsChatOpen
+      setOpen: handleSetChatOpen
     }
   };
   const isUIDisabled = CustomButton === null || CustomChat === null;
@@ -4038,6 +4521,7 @@ function UseAIProvider({
     selectedAgent,
     onAgentChange: setAgent,
     fileUploadConfig,
+    fileProcessing: fileProcessingState,
     commands,
     onSaveCommand: saveCommand,
     onRenameCommand: renameCommand,
@@ -4045,21 +4529,21 @@ function UseAIProvider({
   };
   const renderDefaultChat = () => {
     if (isUIDisabled) return null;
-    return /* @__PURE__ */ jsx11(UseAIFloatingChatWrapper, { isOpen: isChatOpen, onClose: () => setIsChatOpen(false), children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(UseAIFloatingChatWrapper, { isOpen: isChatOpen, onClose: () => handleSetChatOpen(false), children: /* @__PURE__ */ jsx13(
       UseAIChatPanel,
       {
         ...chatPanelProps,
-        closeButton: /* @__PURE__ */ jsx11(CloseButton, { onClick: () => setIsChatOpen(false) })
+        closeButton: /* @__PURE__ */ jsx13(CloseButton, { onClick: () => handleSetChatOpen(false) })
       }
     ) });
   };
   const renderCustomChat = () => {
     if (!CustomChat) return null;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx13(
       CustomChat,
       {
         isOpen: isChatOpen,
-        onClose: () => setIsChatOpen(false),
+        onClose: () => handleSetChatOpen(false),
         onSendMessage: handleSendMessage,
         messages,
         loading,
@@ -4074,18 +4558,18 @@ function UseAIProvider({
   };
   const renderBuiltInChat = () => {
     if (!renderChat) return null;
-    return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      ButtonComponent && /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      ButtonComponent && /* @__PURE__ */ jsx13(
         ButtonComponent,
         {
-          onClick: () => setIsChatOpen(true),
+          onClick: () => handleSetChatOpen(true),
           connected
         }
       ),
       hasCustomChat ? renderCustomChat() : renderDefaultChat()
     ] });
   };
-  return /* @__PURE__ */ jsx11(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx11(StringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx11(__UseAIContext.Provider, { value, children: /* @__PURE__ */ jsxs7(__UseAIChatContext.Provider, { value: chatUIContextValue, children: [
+  return /* @__PURE__ */ jsx13(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx13(StringsContext.Provider, { value: strings, children: /* @__PURE__ */ jsx13(__UseAIContext.Provider, { value, children: /* @__PURE__ */ jsxs9(__UseAIChatContext.Provider, { value: chatUIContextValue, children: [
     children,
     renderBuiltInChat()
   ] }) }) }) });
@@ -4488,14 +4972,18 @@ export {
   UseAIFloatingButton,
   UseAIFloatingChatWrapper,
   UseAIProvider,
+  clearTransformationCache,
   convertToolsToDefinitions,
   defaultStrings,
   defaultTheme,
   defineTool,
   executeDefinedTool,
+  findTransformer,
   generateChatId,
   generateCommandId,
   generateMessageId,
+  matchesMimeType,
+  processAttachments,
   useAI,
   useAIContext,
   useAIWorkflow,