@cntyclub/agent-react 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { ChatMessage, ChatMessageBubble, Markdown, Collapsible, CollapsibleTrigger, ChatToolChip, cn, CollapsiblePanel, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Button, Group, Spinner, Menu, MenuTrigger, MenuPopup, MenuItem, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Tooltip, TooltipTrigger, TooltipContent, Chat, ChatMessages, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, ChatTypingIndicator, ChatInput, useMediaQuery, TooltipProvider, Fab, DataTablePaged } from '@cntyclub/ui-react';
-import { ChevronDownIcon, CheckIcon, ShieldAlertIcon, CheckCheckIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, Maximize2Icon, XIcon, Trash2Icon, SparklesIcon, CodeIcon } from 'lucide-react';
-import * as React3 from 'react';
+import { Button, cn, ChatMessage, ChatMessageBubble, Markdown, Spinner, Checkbox, Collapsible, CollapsibleTrigger, ChatToolChip, CollapsiblePanel, ChatToolCard, ChatToolCardHeader, ChatToolCardActions, Group, Menu, MenuTrigger, MenuPopup, MenuItem, ChatHeader, ChatHeaderAvatar, ChatHeaderTitle, ChatHeaderActions, Tooltip, TooltipTrigger, TooltipContent, Chat, ChatMessages, ChatEmptyState, ChatEmptyStateIcon, ChatEmptyStateTitle, ChatEmptyStateDescription, ChatSuggestions, ChatSuggestion, ChatTypingIndicator, useMediaQuery, TooltipProvider, Fab, DataTablePaged } from '@cntyclub/ui-react';
+import { FileTextIcon, XIcon, PaperclipIcon, ArrowUpIcon, Maximize2Icon, ListChecksIcon, ChevronDownIcon, CheckIcon, ShieldAlertIcon, CheckCheckIcon, UploadCloudIcon, HistoryIcon, SquarePenIcon, Minimize2Icon, Trash2Icon, SparklesIcon, DownloadIcon, CodeIcon } from 'lucide-react';
+import * as React5 from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/api-client.ts
@@ -25,13 +25,15 @@ var AgentApiClient = class {
     const base = this.config.apiBaseUrl.replace(/\/$/, "");
     const separator = path.includes("?") ? "&" : "?";
     const url = `${base}${path}${separator}client_id=${encodeURIComponent(this.config.clientId)}`;
+    const isFormData = typeof FormData !== "undefined" && options.body instanceof FormData;
+    const headers = {
+      Authorization: `Bearer ${token}`,
+      "X-Agent-Client-Id": this.config.clientId
+    };
+    if (!isFormData) headers["Content-Type"] = "application/json";
     const response = await fetch(url, {
-      body: options.body === void 0 ? void 0 : JSON.stringify(options.body),
-      headers: {
-        Authorization: `Bearer ${token}`,
-        "Content-Type": "application/json",
-        "X-Agent-Client-Id": this.config.clientId
-      },
+      body: options.body === void 0 ? void 0 : isFormData ? options.body : JSON.stringify(options.body),
+      headers,
       method: options.method ?? "GET"
     });
     if (response.status === 204) return void 0;
@@ -49,7 +51,15 @@ var AgentApiClient = class {
   getConfig() {
     return this.request("/agent-mode/config/");
   }
-  sendMessage(message, conversationId) {
+  sendMessage(message, conversationId, files) {
+    if (files && files.length > 0) {
+      const form = new FormData();
+      form.append("client_id", this.config.clientId);
+      form.append("message", message);
+      if (conversationId) form.append("conversation_id", conversationId);
+      for (const file of files) form.append("files", file, file.name);
+      return this.request("/agent-mode/chat/", { body: form, method: "POST" });
+    }
     return this.request("/agent-mode/chat/", {
       body: {
         client_id: this.config.clientId,
@@ -78,6 +88,176 @@ var AgentApiClient = class {
   }
 };
 
+// src/file-support.ts
+var DEFAULT_ACCEPT = [".txt", ".md", ".markdown", ".csv", ".tsv", ".log", ".docx"];
+var DEFAULT_MAX_SIZE_MB = 5;
+function fileUploadEnabled(config) {
+  return config.fileUpload?.enabled !== false;
+}
+function acceptedExtensions(config) {
+  const accept = config.fileUpload?.accept;
+  return accept && accept.length > 0 ? accept.map((ext) => ext.toLowerCase()) : DEFAULT_ACCEPT;
+}
+function maxSizeMb(config) {
+  return config.fileUpload?.maxSizeMb ?? DEFAULT_MAX_SIZE_MB;
+}
+function acceptAttribute(config) {
+  return acceptedExtensions(config).join(",");
+}
+function extensionOf(filename) {
+  const dot = filename.lastIndexOf(".");
+  return dot >= 0 ? filename.slice(dot).toLowerCase() : "";
+}
+function validateFile(config, file) {
+  const extensions = acceptedExtensions(config);
+  if (!extensions.includes(extensionOf(file.name))) {
+    return `\u201C${file.name}\u201D isn\u2019t a supported text file. Allowed: ${extensions.join(", ")}.`;
+  }
+  const limit = maxSizeMb(config);
+  if (file.size > limit * 1024 * 1024) {
+    return `\u201C${file.name}\u201D is too large (max ${limit} MB).`;
+  }
+  return null;
+}
+function formatBytes(bytes) {
+  if (!bytes && bytes !== 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function AgentComposer({
+  acceptAttribute: acceptAttribute2,
+  className,
+  disabled,
+  files,
+  onPickFiles,
+  onRemoveFile,
+  onSubmit,
+  onValueChange,
+  placeholder = "Ask anything\u2026",
+  value
+}) {
+  const textareaRef = React5.useRef(null);
+  const inputRef = React5.useRef(null);
+  const canSubmit = !disabled && (value.trim().length > 0 || files.length > 0);
+  const submit = React5.useCallback(() => {
+    if (!canSubmit) return;
+    onSubmit(value.trim());
+  }, [canSubmit, onSubmit, value]);
+  React5.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 144)}px`;
+  }, [value]);
+  const handlePick = (event) => {
+    const picked = Array.from(event.target.files ?? []);
+    if (picked.length) onPickFiles?.(picked);
+    event.target.value = "";
+  };
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      className: cn("shrink-0 bg-background p-3 pt-1.5", className),
+      "data-slot": "agent-composer",
+      onSubmit: (event) => {
+        event.preventDefault();
+        submit();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-1.5 rounded-2xl border border-input bg-popover p-1.5 shadow-xs transition-[border-color,box-shadow] duration-150 focus-within:border-ring/64 focus-within:ring-2 focus-within:ring-ring/24 dark:bg-input/32",
+            disabled && "opacity-64"
+          ),
+          children: [
+            files.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 px-1 pt-1", children: files.map((file, index) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "flex max-w-52 items-center gap-1.5 rounded-lg border border-border/72 bg-muted/48 py-1 pr-1 pl-2 text-xs",
+                children: [
+                  /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: file.name }),
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", children: formatBytes(file.size) }),
+                  onRemoveFile ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "aria-label": `Remove ${file.name}`,
+                      className: "flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground [&_svg]:size-3",
+                      onClick: () => onRemoveFile(index),
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(XIcon, {})
+                    }
+                  ) : null
+                ]
+              },
+              `${file.name}-${index}`
+            )) }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1.5", children: [
+              onPickFiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    accept: acceptAttribute2,
+                    className: "hidden",
+                    multiple: true,
+                    onChange: handlePick,
+                    ref: inputRef,
+                    type: "file"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": "Attach files",
+                    className: "shrink-0",
+                    disabled,
+                    onClick: () => inputRef.current?.click(),
+                    size: "icon-sm",
+                    type: "button",
+                    variant: "ghost",
+                    children: /* @__PURE__ */ jsx(PaperclipIcon, {})
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  className: "max-h-36 min-h-8 flex-1 resize-none self-center bg-transparent py-1.5 pl-1.5 text-sm outline-none placeholder:text-muted-foreground",
+                  disabled,
+                  onChange: (event) => onValueChange(event.target.value),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" && !event.shiftKey) {
+                      event.preventDefault();
+                      submit();
+                    }
+                  },
+                  placeholder,
+                  ref: textareaRef,
+                  rows: 1,
+                  value
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "Send message",
+                  className: "shrink-0 rounded-full before:rounded-full",
+                  disabled: !canSubmit,
+                  size: "icon-sm",
+                  type: "submit",
+                  children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/message-group.ts
 function groupMessages(messages) {
   const items = [];
@@ -147,7 +327,21 @@ function groupMessages(messages) {
 }
 function MessageItem({ message }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ jsx(ChatMessage, { from: "user", children: /* @__PURE__ */ jsx(ChatMessageBubble, { from: "user", children: message.content }) });
+    const attachments = message.attachments ?? [];
+    return /* @__PURE__ */ jsxs(ChatMessage, { from: "user", children: [
+      attachments.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-1.5", children: attachments.map((attachment) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "flex max-w-52 items-center gap-1.5 rounded-lg border border-border/72 bg-muted/48 px-2 py-1 text-muted-foreground text-xs",
+          children: [
+            /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: attachment.filename })
+          ]
+        },
+        attachment.id
+      )) }) : null,
+      message.content ? /* @__PURE__ */ jsx(ChatMessageBubble, { from: "user", children: message.content }) : null
+    ] });
   }
   if (message.role === "assistant") {
     if (!message.content || !message.content.trim()) return null;
@@ -355,20 +549,146 @@ function resolveToolPresentation(describe, toolName, args) {
   }
   return { details, summary, title };
 }
-function StepTables({ blocks, stepKey }) {
-  const tables = (blocks ?? []).filter((block) => block.type === "table");
-  if (tables.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: tables.map((block, index) => {
-    const { columns, rows } = toDisplayTable(block);
+function DownloadButton({ block, size = "sm" }) {
+  if (!block.download_url) {
+    return /* @__PURE__ */ jsx(Button, { disabled: true, size, variant: "outline", children: size === "icon-sm" ? /* @__PURE__ */ jsx(DownloadIcon, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DownloadIcon, {}),
+      " Download"
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      render: (
+        // eslint-disable-next-line jsx-a11y/anchor-has-content
+        /* @__PURE__ */ jsx("a", { download: block.filename, href: block.download_url, rel: "noopener noreferrer", target: "_blank" })
+      ),
+      size,
+      variant: size === "icon-sm" ? "outline" : "default",
+      children: [
+        /* @__PURE__ */ jsx(DownloadIcon, {}),
+        size === "icon-sm" ? null : "Download"
+      ]
+    }
+  );
+}
+function DocumentViewer({ block, onClose }) {
+  React5.useEffect(() => {
+    const onKey = (event) => event.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs("div", { "aria-modal": "true", className: "fixed inset-0 z-[60] flex flex-col bg-background", role: "dialog", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-border/72 border-b px-4 py-3", children: [
+      /* @__PURE__ */ jsx(FileTextIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "truncate font-medium text-sm", children: block.title || block.filename }),
+        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs uppercase", children: [
+          block.format,
+          block.size_bytes ? ` \xB7 ${formatBytes(block.size_bytes)}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(DownloadButton, { block }),
+      /* @__PURE__ */ jsx(Button, { "aria-label": "Close preview", onClick: onClose, size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ jsx(XIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: /* @__PURE__ */ jsxs("pre", { className: "mx-auto max-w-3xl whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground", children: [
+      block.preview || "(no preview available \u2014 download to view)",
+      block.preview_truncated ? "\n\n\u2026 preview truncated. Download for the full file." : ""
+    ] }) })
+  ] });
+}
+function DocumentCard({ block }) {
+  const [open, setOpen] = React5.useState(false);
+  const previewLines = (block.preview || "").split("\n").slice(0, 6).join("\n");
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-full overflow-hidden rounded-xl border border-border bg-card shadow-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-border/72 border-b px-3 py-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary/8 text-primary [&_svg]:size-4", children: /* @__PURE__ */ jsx(FileTextIcon, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "truncate font-medium text-sm", children: block.title || block.filename }),
+        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs uppercase", children: [
+          block.format,
+          block.size_bytes ? ` \xB7 ${formatBytes(block.size_bytes)}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { "aria-label": "Preview", onClick: () => setOpen(true), size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ jsx(Maximize2Icon, {}) }),
+      /* @__PURE__ */ jsx(DownloadButton, { block, size: "icon-sm" })
+    ] }),
+    previewLines ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(
+          "block w-full cursor-pointer px-3 py-2 text-left transition-colors hover:bg-accent/40"
+        ),
+        onClick: () => setOpen(true),
+        type: "button",
+        children: /* @__PURE__ */ jsx("pre", { className: "max-h-28 overflow-hidden whitespace-pre-wrap break-words font-mono text-[11px] leading-snug text-muted-foreground", children: previewLines })
+      }
+    ) : null,
+    open ? /* @__PURE__ */ jsx(DocumentViewer, { block, onClose: () => setOpen(false) }) : null
+  ] });
+}
+function TaskChecklist({ tasks }) {
+  if (!tasks || tasks.length === 0) return null;
+  const done = tasks.filter((task) => task.status === "done").length;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-full rounded-xl border border-border bg-card p-3 shadow-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-1.5 font-medium text-sm", children: [
+      /* @__PURE__ */ jsx(ListChecksIcon, { className: "size-4 text-muted-foreground" }),
+      "Tasks",
+      /* @__PURE__ */ jsxs("span", { className: "ml-auto text-muted-foreground text-xs", children: [
+        done,
+        "/",
+        tasks.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: tasks.map((task, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 text-sm", children: [
+      task.status === "in_progress" ? /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-3.5", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          "aria-hidden": true,
+          checked: task.status === "done",
+          className: "pointer-events-none shrink-0",
+          readOnly: true,
+          tabIndex: -1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "min-w-0",
+            task.status === "done" && "text-muted-foreground line-through",
+            task.status === "in_progress" && "font-medium"
+          ),
+          children: task.title
+        }
+      )
+    ] }, `${index}-${task.title}`)) })
+  ] });
+}
+function StepBlocks({ blocks, stepKey }) {
+  const visible = (blocks ?? []).filter(
+    (block) => block.type === "table" || block.type === "document" || block.type === "tasks"
+  );
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: visible.map((block, index) => {
+    const key = `${stepKey}-block-${index}`;
+    if (block.type === "document") {
+      return /* @__PURE__ */ jsx(DocumentCard, { block }, key);
+    }
+    if (block.type === "tasks") {
+      return /* @__PURE__ */ jsx(TaskChecklist, { tasks: block.tasks }, key);
+    }
+    const table = block;
+    const { columns, rows } = toDisplayTable(table);
     return /* @__PURE__ */ jsx("div", { className: "w-full max-w-full", children: /* @__PURE__ */ jsx(
       DataTablePaged,
       {
         columns,
         pageSize: 8,
         rows,
-        totalCount: typeof block.pagination?.count === "number" ? block.pagination.count : block.row_count
+        totalCount: typeof table.pagination?.count === "number" ? table.pagination.count : table.row_count
       }
-    ) }, `${stepKey}-table-${index}`);
+    ) }, key);
   }) });
 }
 function RawJsonDisclosure({ result }) {
@@ -400,7 +720,7 @@ function StepDetail({
   ] });
 }
 function ToolActivityGroup({ describeToolCall, steps }) {
-  const [open, setOpen] = React3.useState(false);
+  const [open, setOpen] = React5.useState(false);
   if (steps.length === 0) return null;
   const last = steps[steps.length - 1];
   const anyRunning = steps.some((step) => step.status === "running");
@@ -430,7 +750,7 @@ function ToolActivityGroup({ describeToolCall, steps }) {
       ),
       /* @__PURE__ */ jsx(CollapsiblePanel, { children: /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-col gap-1.5", children: steps.map((step) => /* @__PURE__ */ jsx(StepDetail, { describeToolCall, step }, step.callId)) }) })
     ] }),
-    steps.map((step) => /* @__PURE__ */ jsx(StepTables, { blocks: step.blocks, stepKey: step.callId }, `${step.callId}-tables`))
+    steps.map((step) => /* @__PURE__ */ jsx(StepBlocks, { blocks: step.blocks, stepKey: step.callId }, `${step.callId}-blocks`))
   ] });
 }
 function ToolApprovalCard({
@@ -503,21 +823,73 @@ function AgentPanel({
   onClose,
   onToggleAgentMode
 }) {
-  const [draft, setDraft] = React3.useState("");
-  const [view, setView] = React3.useState("chat");
+  const [draft, setDraft] = React5.useState("");
+  const [view, setView] = React5.useState("chat");
+  const [files, setFiles] = React5.useState([]);
+  const [uploadError, setUploadError] = React5.useState(null);
+  const [dragging, setDragging] = React5.useState(false);
+  const dragDepth = React5.useRef(0);
   const agentName = config.agentName ?? chat.agentInfo?.name ?? "Assistant";
+  const uploadEnabled = fileUploadEnabled(config);
   const suggestions = config.suggestions ?? [
     "What can you help me with?",
     "Give me a quick summary of my data."
   ];
-  const handleSubmit = React3.useCallback(
+  const addFiles = React5.useCallback(
+    (incoming) => {
+      const accepted = [];
+      let rejection = null;
+      for (const file of incoming) {
+        const error = validateFile(config, file);
+        if (error) {
+          rejection = error;
+          continue;
+        }
+        accepted.push(file);
+      }
+      setUploadError(rejection);
+      if (accepted.length) setFiles((current) => [...current, ...accepted].slice(0, 10));
+    },
+    [config]
+  );
+  const removeFile = React5.useCallback((index) => {
+    setFiles((current) => current.filter((_, i) => i !== index));
+  }, []);
+  const handleSubmit = React5.useCallback(
     (text) => {
+      const staged = files;
       setDraft("");
-      void chat.send(text);
+      setFiles([]);
+      setUploadError(null);
+      void chat.send(text, staged);
     },
-    [chat]
+    [chat, files]
   );
-  const openHistory = React3.useCallback(() => {
+  const onDragEnter = React5.useCallback(
+    (event) => {
+      if (!uploadEnabled || !event.dataTransfer?.types?.includes("Files")) return;
+      dragDepth.current += 1;
+      setDragging(true);
+    },
+    [uploadEnabled]
+  );
+  const onDragLeave = React5.useCallback((event) => {
+    if (!event.dataTransfer?.types?.includes("Files")) return;
+    dragDepth.current = Math.max(0, dragDepth.current - 1);
+    if (dragDepth.current === 0) setDragging(false);
+  }, []);
+  const onDrop = React5.useCallback(
+    (event) => {
+      if (!uploadEnabled) return;
+      event.preventDefault();
+      dragDepth.current = 0;
+      setDragging(false);
+      const dropped = Array.from(event.dataTransfer?.files ?? []);
+      if (dropped.length) addFiles(dropped);
+    },
+    [addFiles, uploadEnabled]
+  );
+  const openHistory = React5.useCallback(() => {
     setView("history");
     void chat.refreshConversations();
   }, [chat]);
@@ -526,11 +898,20 @@ function AgentPanel({
     "div",
     {
       className: cn(
-        "flex min-h-0 flex-col overflow-hidden bg-background text-foreground",
+        "relative flex min-h-0 flex-col overflow-hidden bg-background text-foreground",
         className
       ),
       "data-slot": "agent-panel",
+      onDragEnter,
+      onDragLeave,
+      onDragOver: uploadEnabled ? (event) => event.preventDefault() : void 0,
+      onDrop,
       children: [
+        dragging && view === "chat" ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-40 flex flex-col items-center justify-center gap-2 bg-background/85 backdrop-blur-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 rounded-2xl border-2 border-primary/40 border-dashed px-8 py-6 text-center", children: [
+          /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-8 text-primary" }),
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-sm", children: "Drop text files to attach" }),
+          /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: acceptAttribute(config).replaceAll(",", " \xB7 ") })
+        ] }) }) : null,
         /* @__PURE__ */ jsxs(ChatHeader, { children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
             /* @__PURE__ */ jsx(ChatHeaderAvatar, {}),
@@ -671,15 +1052,30 @@ function AgentPanel({
             )),
             busy ? /* @__PURE__ */ jsx(ChatTypingIndicator, {}) : null
           ] }) }),
-          chat.error ? /* @__PURE__ */ jsxs("div", { className: "mx-3 mb-1 flex items-center justify-between gap-2 rounded-lg bg-destructive/10 px-3 py-2 text-destructive text-xs", children: [
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: chat.error }),
-            /* @__PURE__ */ jsx("button", { className: "shrink-0 cursor-pointer font-medium", onClick: chat.clearError, type: "button", children: "Dismiss" })
+          chat.error || uploadError ? /* @__PURE__ */ jsxs("div", { className: "mx-3 mb-1 flex items-center justify-between gap-2 rounded-lg bg-destructive/10 px-3 py-2 text-destructive text-xs", children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: chat.error ?? uploadError }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "shrink-0 cursor-pointer font-medium",
+                onClick: () => {
+                  chat.clearError();
+                  setUploadError(null);
+                },
+                type: "button",
+                children: "Dismiss"
+              }
+            )
           ] }) : null,
           /* @__PURE__ */ jsx(
-            ChatInput,
+            AgentComposer,
             {
+              acceptAttribute: acceptAttribute(config),
               className: cn(agentMode && "mx-auto w-full max-w-3xl"),
               disabled: busy || chat.pendingApprovals.length > 0,
+              files,
+              onPickFiles: uploadEnabled ? addFiles : void 0,
+              onRemoveFile: removeFile,
               onSubmit: handleSubmit,
               onValueChange: setDraft,
               placeholder: chat.pendingApprovals.length > 0 ? "Approve or decline the pending action first\u2026" : `Ask ${agentName}\u2026`,
@@ -692,16 +1088,16 @@ function AgentPanel({
   );
 }
 function useAgentChat(config) {
-  const client = React3.useMemo(() => new AgentApiClient(config), [config]);
-  const [agentInfo, setAgentInfo] = React3.useState(null);
-  const [conversationId, setConversationId] = React3.useState(null);
-  const [conversations, setConversations] = React3.useState([]);
-  const [messages, setMessages] = React3.useState([]);
-  const [pendingApprovals, setPendingApprovals] = React3.useState([]);
-  const [sending, setSending] = React3.useState(false);
-  const [resolvingApprovalId, setResolvingApprovalId] = React3.useState(null);
-  const [error, setError] = React3.useState(null);
-  React3.useEffect(() => {
+  const client = React5.useMemo(() => new AgentApiClient(config), [config]);
+  const [agentInfo, setAgentInfo] = React5.useState(null);
+  const [conversationId, setConversationId] = React5.useState(null);
+  const [conversations, setConversations] = React5.useState([]);
+  const [messages, setMessages] = React5.useState([]);
+  const [pendingApprovals, setPendingApprovals] = React5.useState([]);
+  const [sending, setSending] = React5.useState(false);
+  const [resolvingApprovalId, setResolvingApprovalId] = React5.useState(null);
+  const [error, setError] = React5.useState(null);
+  React5.useEffect(() => {
     let cancelled = false;
     client.getConfig().then((info) => {
       if (!cancelled) setAgentInfo(info);
@@ -711,11 +1107,11 @@ function useAgentChat(config) {
       cancelled = true;
     };
   }, [client]);
-  const handleFailure = React3.useCallback((err) => {
+  const handleFailure = React5.useCallback((err) => {
     const message = err instanceof AgentApiError ? err.message : "Something went wrong. Please try again.";
     setError(message);
   }, []);
-  const applyResponse = React3.useCallback(
+  const applyResponse = React5.useCallback(
     (response) => {
       if (response.status === "error" && !response.messages?.length) {
         setError(response.message ?? "The assistant could not answer.");
@@ -736,13 +1132,14 @@ function useAgentChat(config) {
     },
     []
   );
-  const send = React3.useCallback(
-    async (text) => {
+  const send = React5.useCallback(
+    async (text, files) => {
       if (sending) return;
+      if (!text.trim() && !(files && files.length)) return;
       setSending(true);
       setError(null);
       try {
-        const response = await client.sendMessage(text, conversationId);
+        const response = await client.sendMessage(text, conversationId, files);
         applyResponse(response);
       } catch (err) {
         handleFailure(err);
@@ -752,7 +1149,7 @@ function useAgentChat(config) {
     },
     [applyResponse, client, conversationId, handleFailure, sending]
   );
-  const resolveApproval = React3.useCallback(
+  const resolveApproval = React5.useCallback(
     async (callId, approve) => {
       if (resolvingApprovalId) return;
       setResolvingApprovalId(callId);
@@ -768,13 +1165,13 @@ function useAgentChat(config) {
     },
     [applyResponse, client, handleFailure, resolvingApprovalId]
   );
-  const newChat = React3.useCallback(() => {
+  const newChat = React5.useCallback(() => {
     setConversationId(null);
     setMessages([]);
     setPendingApprovals([]);
     setError(null);
   }, []);
-  const refreshConversations = React3.useCallback(async () => {
+  const refreshConversations = React5.useCallback(async () => {
     try {
       const { conversations: list } = await client.listConversations();
       setConversations(list);
@@ -782,7 +1179,7 @@ function useAgentChat(config) {
       handleFailure(err);
     }
   }, [client, handleFailure]);
-  const openConversation = React3.useCallback(
+  const openConversation = React5.useCallback(
     async (id) => {
       setError(null);
       try {
@@ -796,7 +1193,7 @@ function useAgentChat(config) {
     },
     [client, handleFailure]
   );
-  const deleteConversation = React3.useCallback(
+  const deleteConversation = React5.useCallback(
     async (id) => {
       try {
         await client.deleteConversation(id);
@@ -808,7 +1205,7 @@ function useAgentChat(config) {
     },
     [client, conversationId, handleFailure, newChat]
   );
-  const clearError = React3.useCallback(() => setError(null), []);
+  const clearError = React5.useCallback(() => setError(null), []);
   return {
     agentInfo,
     clearError,
@@ -843,11 +1240,11 @@ function readStored(clientId) {
   }
 }
 function useAlwaysApprove(clientId) {
-  const [approved, setApproved] = React3.useState(() => /* @__PURE__ */ new Set());
-  React3.useEffect(() => {
+  const [approved, setApproved] = React5.useState(() => /* @__PURE__ */ new Set());
+  React5.useEffect(() => {
     setApproved(readStored(clientId));
   }, [clientId]);
-  const persist = React3.useCallback(
+  const persist = React5.useCallback(
     (next) => {
       setApproved(next);
       if (typeof window === "undefined") return;
@@ -858,8 +1255,8 @@ function useAlwaysApprove(clientId) {
     },
     [clientId]
   );
-  const isAlwaysApproved = React3.useCallback((toolName) => approved.has(toolName), [approved]);
-  const setAlwaysApprove = React3.useCallback(
+  const isAlwaysApproved = React5.useCallback((toolName) => approved.has(toolName), [approved]);
+  const setAlwaysApprove = React5.useCallback(
     (toolName) => {
       if (approved.has(toolName)) return;
       const next = new Set(approved);
@@ -868,7 +1265,7 @@ function useAlwaysApprove(clientId) {
     },
     [approved, persist]
   );
-  const clearAlwaysApprove = React3.useCallback(
+  const clearAlwaysApprove = React5.useCallback(
     (toolName) => {
       if (!approved.has(toolName)) return;
       const next = new Set(approved);
@@ -880,16 +1277,16 @@ function useAlwaysApprove(clientId) {
   return { clearAlwaysApprove, isAlwaysApproved, setAlwaysApprove };
 }
 function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React3.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React5.useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = React3.useCallback(
+  const setOpen = React5.useCallback(
     (next) => {
       setUncontrolledOpen(next);
       onOpenChange?.(next);
     },
     [onOpenChange]
   );
-  const [agentMode, setAgentMode] = React3.useState(false);
+  const [agentMode, setAgentMode] = React5.useState(false);
   const isDesktop = useMediaQuery("(min-width: 640px)", {
     defaultSSRValue: true,
     ssr: true
@@ -899,14 +1296,14 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
   const alwaysApprove = useAlwaysApprove(config.clientId);
   const { pendingApprovals, resolveApproval, resolvingApprovalId } = chat;
   const { isAlwaysApproved } = alwaysApprove;
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!open || resolvingApprovalId) return;
     const target = pendingApprovals.find((approval) => isAlwaysApproved(approval.tool_name));
     if (target) void resolveApproval(target.id, true);
   }, [open, pendingApprovals, resolvingApprovalId, isAlwaysApproved, resolveApproval]);
-  const lastNavigatedMessageId = React3.useRef(null);
+  const lastNavigatedMessageId = React5.useRef(null);
   const { messages } = chat;
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!open || fullscreen || !config.navigate || !config.pages?.length) return;
     const toolMessages = messages.filter((message) => message.role === "tool");
     const latest = toolMessages[toolMessages.length - 1];
@@ -918,7 +1315,7 @@ function AgentWidget({ config, onOpenChange, open: controlledOpen }) {
     const path = mapping.buildRoute ? mapping.buildRoute(args) : mapping.route;
     if (path) config.navigate(path);
   }, [config, fullscreen, messages, open]);
-  const closePanel = React3.useCallback(() => {
+  const closePanel = React5.useCallback(() => {
     setOpen(false);
     setAgentMode(false);
   }, [setOpen]);
@@ -997,6 +1394,6 @@ function defineAgentConfig(config) {
   return config;
 }
 
-export { AgentApiClient, AgentApiError, AgentPanel, AgentWidget, MessageItem, ToolActivityGroup, ToolApprovalCard, defineAgentConfig, deriveDetails, groupMessages, humanizeToolName, resolveToolPresentation, useAgentChat, useAlwaysApprove };
+export { AgentApiClient, AgentApiError, AgentComposer, AgentPanel, AgentWidget, DEFAULT_ACCEPT, DocumentCard, MessageItem, TaskChecklist, ToolActivityGroup, ToolApprovalCard, acceptAttribute, acceptedExtensions, defineAgentConfig, deriveDetails, fileUploadEnabled, formatBytes, groupMessages, humanizeToolName, resolveToolPresentation, useAgentChat, useAlwaysApprove, validateFile };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map