@mieweb/ui 0.9.0-dev.4 → 0.9.0-dev.6

package/dist/chunk-3SD7PDCV.js

@@ -0,0 +1,1878 @@
+import { Dropdown, DropdownItem, DropdownSeparator } from './chunk-TZX76ZNZ.js';
+import { AlertTriangle, X2, Paperclip, Plus, Mic, Square, Loader2, ArrowUp, Check, Bot, ChevronUp } from './chunk-BKSPDTX4.js';
+import { cn } from './chunk-TQONQSJO.js';
+import { useEscapeKey } from './chunk-T4ME7QCT.js';
+import { useClickOutside } from './chunk-62ZOA6PX.js';
+import { useAnchoredPosition } from './chunk-WSNMQQ4P.js';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronUp as ChevronUp$1, Check as Check$1, ChevronRight, ChevronLeft } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var MENU_OFFSET_PX = 6;
+var MENU_MAX_HEIGHT_PX = 320;
+function optionKey(option) {
+  return `${option.provider}\0${option.model}`;
+}
+function renderedOptionKey(option, index) {
+  return `${option.id ?? optionKey(option)}\0${index}`;
+}
+function groupByProvider(models) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const model of models) {
+    const group = groups.get(model.provider);
+    if (group) {
+      group.push(model);
+    } else {
+      groups.set(model.provider, [model]);
+    }
+  }
+  return Array.from(groups, ([provider, options]) => ({ provider, options }));
+}
+function getProviderLabel(models, provider) {
+  return models.find((model) => model.provider === provider && model.providerLabel)?.providerLabel ?? provider;
+}
+function ComposerModelSelector({
+  models,
+  value,
+  providerFilter,
+  onProviderFilterChange,
+  onChange,
+  disabled = false,
+  variant = "default",
+  className,
+  boundaryRef,
+  placeholder = "Model",
+  anyLabel = "Any",
+  emptyLabel = "No models",
+  ariaLabel = "Model",
+  effortOptions,
+  effort = null,
+  defaultEffort,
+  onEffortChange,
+  effortLabel = "Effort",
+  effortHint,
+  defaultBadgeLabel = "Default",
+  backLabel = "Back"
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [view, setView] = React.useState("models");
+  const [effortHighlight, setEffortHighlight] = React.useState(0);
+  const [internalProviderFilter, setInternalProviderFilter] = React.useState(null);
+  const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  const listRef = React.useRef(null);
+  const effortListRef = React.useRef(null);
+  const menuId = React.useId();
+  const {
+    anchorRef: triggerRef,
+    floatingRef: menuRef,
+    style: menuStyle
+  } = useAnchoredPosition({
+    open,
+    placement: "top-start",
+    offset: MENU_OFFSET_PX,
+    matchMinWidth: true,
+    maxHeight: MENU_MAX_HEIGHT_PX,
+    allowFlip: false,
+    boundaryRef
+  });
+  const activeProviderFilter = providerFilter === void 0 ? internalProviderFilter : providerFilter;
+  const selectedKey = value ? optionKey(value) : null;
+  const selectedOption = models.find(
+    (model) => optionKey(model) === selectedKey
+  );
+  const providers = React.useMemo(
+    () => Array.from(new Set(models.map((model) => model.provider))),
+    [models]
+  );
+  const providerLabels = React.useMemo(
+    () => new Map(
+      providers.map((provider) => [
+        provider,
+        getProviderLabel(models, provider)
+      ])
+    ),
+    [models, providers]
+  );
+  const filteredModels = React.useMemo(
+    () => activeProviderFilter === null ? models : models.filter((model) => model.provider === activeProviderFilter),
+    [activeProviderFilter, models]
+  );
+  const groupedModels = React.useMemo(
+    () => groupByProvider(filteredModels),
+    [filteredModels]
+  );
+  const groupedRenderedModels = React.useMemo(() => {
+    let index = 0;
+    return groupedModels.map((group) => ({
+      provider: group.provider,
+      options: group.options.map((option) => {
+        const rendered = {
+          option,
+          index,
+          key: renderedOptionKey(option, index)
+        };
+        index += 1;
+        return rendered;
+      })
+    }));
+  }, [groupedModels]);
+  const renderedModels = React.useMemo(
+    () => groupedRenderedModels.flatMap((group) => group.options),
+    [groupedRenderedModels]
+  );
+  const getOptionId = React.useCallback(
+    (index) => `${menuId}-option-${index}`,
+    [menuId]
+  );
+  const getEffortOptionId = React.useCallback(
+    (index) => `${menuId}-effort-option-${index}`,
+    [menuId]
+  );
+  const activeOptionId = open && renderedModels[highlightedIndex] ? getOptionId(highlightedIndex) : void 0;
+  const selectedRenderedIndex = React.useMemo(
+    () => selectedKey ? renderedModels.findIndex(
+      (renderedModel) => optionKey(renderedModel.option) === selectedKey
+    ) : -1,
+    [renderedModels, selectedKey]
+  );
+  const setProvider = React.useCallback(
+    (provider) => {
+      if (providerFilter === void 0) {
+        setInternalProviderFilter(provider);
+      }
+      onProviderFilterChange?.(provider);
+    },
+    [onProviderFilterChange, providerFilter]
+  );
+  const close = React.useCallback(
+    (restoreFocus = true) => {
+      setOpen(false);
+      if (restoreFocus) {
+        triggerRef.current?.focus({ preventScroll: true });
+      }
+    },
+    [triggerRef]
+  );
+  const selectModel = React.useCallback(
+    (model) => {
+      onChange({ provider: model.provider, model: model.model });
+      close();
+    },
+    [close, onChange]
+  );
+  const efforts = React.useMemo(() => effortOptions ?? [], [effortOptions]);
+  const activeEffortOptionId = open && efforts[effortHighlight] ? getEffortOptionId(effortHighlight) : void 0;
+  const selectedEffortOption = efforts.find(
+    (option) => option.value === effort
+  );
+  const selectEffort = React.useCallback(
+    (value2) => {
+      onEffortChange?.(value2);
+      close();
+    },
+    [close, onEffortChange]
+  );
+  const handleEffortKeyDown = (event) => {
+    if (efforts.length === 0) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setEffortHighlight((current) => (current + 1) % efforts.length);
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setEffortHighlight(
+        (current) => (current - 1 + efforts.length) % efforts.length
+      );
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      setEffortHighlight(0);
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      setEffortHighlight(efforts.length - 1);
+    }
+    if (event.key === "ArrowLeft" || event.key === "Backspace") {
+      event.preventDefault();
+      setView("models");
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const highlighted = efforts[effortHighlight];
+      if (highlighted) selectEffort(highlighted.value);
+    }
+  };
+  const outsideRefs = React.useMemo(
+    () => [triggerRef, menuRef],
+    [triggerRef, menuRef]
+  );
+  useClickOutside(outsideRefs, () => close(false), open);
+  useEscapeKey(close, open);
+  React.useEffect(() => {
+    if (!open) return;
+    setHighlightedIndex(selectedRenderedIndex >= 0 ? selectedRenderedIndex : 0);
+  }, [activeProviderFilter, open, selectedRenderedIndex]);
+  React.useEffect(() => {
+    if (!open) return;
+    setView("models");
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const current = efforts.findIndex((option) => option.value === effort);
+    setEffortHighlight(current >= 0 ? current : 0);
+  }, [effort, efforts, open]);
+  React.useEffect(() => {
+    if (!open) return;
+    setHighlightedIndex(
+      (current) => Math.min(current, Math.max(renderedModels.length - 1, 0))
+    );
+  }, [open, renderedModels.length]);
+  React.useEffect(() => {
+    if (!open) return;
+    requestAnimationFrame(() => {
+      const target = view === "effort" ? effortListRef.current : listRef.current;
+      target?.focus({ preventScroll: true });
+    });
+  }, [open, view]);
+  const handleTriggerKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setOpen(true);
+    }
+  };
+  const handleMenuKeyDown = (event) => {
+    if (renderedModels.length === 0) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setHighlightedIndex((current) => (current + 1) % renderedModels.length);
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setHighlightedIndex(
+        (current) => (current - 1 + renderedModels.length) % renderedModels.length
+      );
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      setHighlightedIndex(0);
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      setHighlightedIndex(renderedModels.length - 1);
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const highlightedModel = renderedModels[highlightedIndex]?.option;
+      if (highlightedModel) {
+        selectModel(highlightedModel);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onClick: () => setOpen((current) => !current),
+        onKeyDown: handleTriggerKeyDown,
+        "data-slot": "composer-model-selector-trigger",
+        className: cn(
+          variant === "ghost" ? [
+            "inline-flex max-w-full min-w-0 items-center gap-1 rounded-md px-2 py-1 text-xs",
+            "text-neutral-600 dark:text-neutral-400",
+            "transition-colors duration-150",
+            "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-700 dark:hover:text-white",
+            "focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none",
+            "disabled:pointer-events-none disabled:opacity-40"
+          ] : [
+            "inline-flex h-8 max-w-full items-center gap-1.5 rounded-full border px-2.5 text-sm font-medium",
+            "border-border bg-background text-foreground shadow-sm",
+            "hover:bg-muted/50",
+            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+            "disabled:cursor-not-allowed disabled:opacity-50"
+          ],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: selectedOption?.label ?? selectedOption?.model ?? placeholder }),
+          selectedEffortOption && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "composer-model-selector-trigger-effort",
+              className: "text-muted-foreground min-w-0 truncate font-normal",
+              children: selectedEffortOption.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronUp$1,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "shrink-0",
+                variant === "ghost" ? "h-3 w-3" : "h-3.5 w-3.5"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: menuRef,
+          style: menuStyle,
+          "data-slot": "composer-model-selector-menu",
+          className: cn(
+            "border-border bg-card text-card-foreground flex w-80 max-w-full flex-col rounded-lg border shadow-lg",
+            "animate-in fade-in overflow-hidden duration-100"
+          ),
+          children: [
+            view === "models" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "composer-model-selector-provider-filter",
+                  className: "border-border flex min-h-9 items-center gap-1 overflow-x-auto overflow-y-hidden border-b p-2",
+                  children: [null, ...providers].map((provider) => {
+                    const selected = activeProviderFilter === provider;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-pressed": selected,
+                        onMouseDown: (event) => event.preventDefault(),
+                        onClick: () => setProvider(provider),
+                        className: cn(
+                          "inline-flex h-6 shrink-0 items-center justify-center rounded-full px-2.5 text-xs font-medium whitespace-nowrap transition-colors",
+                          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+                          selected ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                        ),
+                        children: provider === null ? anyLabel : providerLabels.get(provider) ?? provider
+                      },
+                      provider ?? "all-providers"
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: listRef,
+                  id: menuId,
+                  role: "listbox",
+                  "aria-label": ariaLabel,
+                  "aria-activedescendant": activeOptionId,
+                  tabIndex: -1,
+                  onKeyDown: handleMenuKeyDown,
+                  className: "min-h-0 flex-1 overflow-y-auto p-1",
+                  children: groupedModels.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-3 py-4 text-center text-sm", children: emptyLabel }) : groupedRenderedModels.map((group) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      role: "group",
+                      "aria-label": providerLabels.get(group.provider) ?? group.provider,
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "text-muted-foreground px-3 py-1.5 text-xs font-semibold uppercase", children: providerLabels.get(group.provider) ?? group.provider }),
+                        group.options.map((renderedModel) => {
+                          const { index, key, option: model } = renderedModel;
+                          const selected = optionKey(model) === selectedKey;
+                          const highlighted = index === highlightedIndex;
+                          return /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              id: getOptionId(index),
+                              type: "button",
+                              role: "option",
+                              "aria-selected": selected,
+                              onMouseDown: (event) => event.preventDefault(),
+                              onClick: () => selectModel(model),
+                              onMouseEnter: () => setHighlightedIndex(index),
+                              className: cn(
+                                "flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm",
+                                "focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:outline-none",
+                                highlighted && "bg-muted",
+                                selected && "bg-primary/10 text-primary"
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: model.label ?? model.model }),
+                                selected && /* @__PURE__ */ jsx(
+                                  Check$1,
+                                  {
+                                    "aria-hidden": "true",
+                                    className: "text-primary h-4 w-4 shrink-0"
+                                  }
+                                )
+                              ]
+                            },
+                            key
+                          );
+                        })
+                      ]
+                    },
+                    group.provider
+                  ))
+                }
+              ),
+              efforts.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-border border-t p-1", children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "composer-model-selector-effort-row",
+                  "aria-haspopup": "listbox",
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => setView("effort"),
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm",
+                    "hover:bg-muted transition-colors",
+                    "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: effortLabel }),
+                    selectedEffortOption && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground min-w-0 truncate", children: selectedEffortOption.label }),
+                    /* @__PURE__ */ jsx(
+                      ChevronRight,
+                      {
+                        "aria-hidden": "true",
+                        className: "text-muted-foreground h-4 w-4 shrink-0 rtl:-scale-x-100"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ] }),
+            view === "effort" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "border-border flex items-center gap-1 border-b p-2", children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "composer-model-selector-effort-back",
+                  "aria-label": backLabel,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => setView("models"),
+                  className: cn(
+                    "inline-flex h-6 shrink-0 items-center gap-1 rounded-full px-2 text-xs font-medium",
+                    "text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
+                    "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      ChevronLeft,
+                      {
+                        "aria-hidden": "true",
+                        className: "h-3.5 w-3.5 rtl:-scale-x-100"
+                      }
+                    ),
+                    effortLabel
+                  ]
+                }
+              ) }),
+              effortHint && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground px-3 pt-2 text-xs", children: effortHint }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: effortListRef,
+                  id: menuId,
+                  role: "listbox",
+                  "aria-label": effortLabel,
+                  "aria-activedescendant": activeEffortOptionId,
+                  tabIndex: -1,
+                  onKeyDown: handleEffortKeyDown,
+                  className: "min-h-0 flex-1 overflow-y-auto p-1",
+                  children: efforts.map((option, index) => {
+                    const selected = option.value === effort;
+                    const highlighted = index === effortHighlight;
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        id: getEffortOptionId(index),
+                        type: "button",
+                        role: "option",
+                        "aria-selected": selected,
+                        onMouseDown: (event) => event.preventDefault(),
+                        onClick: () => selectEffort(option.value),
+                        onMouseEnter: () => setEffortHighlight(index),
+                        className: cn(
+                          "flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm",
+                          "focus-visible:ring-ring transition-colors focus-visible:ring-2 focus-visible:outline-none",
+                          highlighted && "bg-muted",
+                          selected && "bg-primary/10 text-primary"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                            /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label }),
+                            option.description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block truncate text-xs", children: option.description })
+                          ] }),
+                          option.value === defaultEffort && /* @__PURE__ */ jsx("span", { className: "bg-muted text-muted-foreground shrink-0 rounded px-1.5 py-0.5 text-xs", children: defaultBadgeLabel }),
+                          selected && /* @__PURE__ */ jsx(
+                            Check$1,
+                            {
+                              "aria-hidden": "true",
+                              className: "text-primary h-4 w-4 shrink-0"
+                            }
+                          )
+                        ]
+                      },
+                      option.value
+                    );
+                  })
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+ComposerModelSelector.displayName = "ComposerModelSelector";
+function getFileType(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (mimeType.includes("pdf") || mimeType.includes("document") || mimeType.includes("text")) {
+    return "document";
+  }
+  return "file";
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function validateFile(file, acceptedTypes, maxSize) {
+  if (acceptedTypes && acceptedTypes.length > 0) {
+    const isAccepted = acceptedTypes.some((type) => {
+      if (type.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(type.toLowerCase());
+      }
+      if (type.endsWith("/*")) {
+        return file.type.startsWith(type.replace("/*", "/"));
+      }
+      return file.type === type;
+    });
+    if (!isAccepted) {
+      return { valid: false, error: "File type not supported" };
+    }
+  }
+  if (maxSize && file.size > maxSize) {
+    return {
+      valid: false,
+      error: `File too large (max ${formatFileSize(maxSize)})`
+    };
+  }
+  return { valid: true };
+}
+function generateAttachmentId() {
+  return `attachment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+var DEFAULT_ACCEPTED_FILE_TYPES = [
+  "image/*",
+  "video/*",
+  ".pdf",
+  ".doc",
+  ".docx"
+];
+var DEFAULT_MAX_FILE_SIZE = 25 * 1024 * 1024;
+function AttachmentPreviewItem({
+  attachment,
+  onRemove,
+  onRetry,
+  disabled = false,
+  className
+}) {
+  const { file, previewUrl, type, state, progress } = attachment;
+  const isImage = type === "image";
+  const isVideo = type === "video";
+  const isUploading = state === "uploading";
+  const isFailed = state === "failed";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative overflow-hidden rounded-lg",
+        "bg-neutral-100 dark:bg-neutral-800",
+        "border border-neutral-200 dark:border-neutral-700",
+        isFailed && "border-red-500",
+        className
+      ),
+      children: [
+        (isImage || isVideo) && previewUrl ? /* @__PURE__ */ jsxs("div", { className: "relative h-20 w-20", children: [
+          isVideo ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              src: previewUrl,
+              "aria-label": file.name,
+              muted: true,
+              playsInline: true,
+              preload: "metadata",
+              className: cn(
+                "h-full w-full object-cover",
+                (isUploading || isFailed) && "opacity-50"
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: previewUrl,
+              alt: file.name,
+              className: cn(
+                "h-full w-full object-cover",
+                (isUploading || isFailed) && "opacity-50"
+              )
+            }
+          ),
+          isVideo && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "h-6 w-6 text-white drop-shadow",
+              fill: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+            }
+          ) })
+        ] }) : (
+          /* File preview */
+          /* @__PURE__ */ jsxs("div", { className: "flex h-20 w-20 flex-col items-center justify-center p-2", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "h-8 w-8 text-neutral-500",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "mt-1 max-w-full truncate px-1 text-xs text-neutral-600 dark:text-neutral-400", children: file.name.split(".").pop()?.toUpperCase() })
+          ] })
+        ),
+        isUploading && progress !== void 0 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "text-center text-white", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "mx-auto h-6 w-6 animate-spin",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "mt-1 text-xs", children: [
+            progress,
+            "%"
+          ] })
+        ] }) }),
+        isFailed && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "mx-auto h-6 w-6 text-red-400",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                }
+              )
+            }
+          ),
+          onRetry && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onRetry,
+              disabled,
+              className: "mt-1 text-xs text-white underline hover:no-underline disabled:no-underline disabled:opacity-50",
+              children: "Retry"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            disabled,
+            className: cn(
+              "absolute -end-1 -top-1 z-10",
+              "rounded-full p-1",
+              "bg-neutral-900 text-white",
+              "opacity-0 group-hover:opacity-100",
+              "focus:ring-primary-500 focus:opacity-100 focus:ring-2 focus:outline-none",
+              "transition-opacity",
+              "disabled:cursor-not-allowed disabled:group-hover:opacity-0"
+            ),
+            "aria-label": `Remove ${file.name}`,
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: "h-3 w-3",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute start-0 end-0 bottom-0",
+              "bg-black/70 px-1 py-0.5",
+              "opacity-0 group-hover:opacity-100",
+              "transition-opacity"
+            ),
+            children: /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-white", children: file.name })
+          }
+        )
+      ]
+    }
+  );
+}
+AttachmentPreviewItem.displayName = "AttachmentPreviewItem";
+var AttachmentPicker = React.forwardRef(
+  ({
+    onFilesSelected,
+    acceptedTypes = DEFAULT_ACCEPTED_FILE_TYPES,
+    maxFileSize = DEFAULT_MAX_FILE_SIZE,
+    maxFiles = 10,
+    multiple = true,
+    disabled = false,
+    onError,
+    className,
+    children
+  }, ref) => {
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const handleClick = () => {
+      inputRef.current?.click();
+    };
+    const handleChange = (event) => {
+      const files = Array.from(event.target.files || []);
+      if (files.length === 0) return;
+      const validFiles = [];
+      for (const file of files.slice(0, maxFiles)) {
+        const validation = validateFile(file, acceptedTypes, maxFileSize);
+        if (validation.valid) {
+          validFiles.push(file);
+        } else if (onError) {
+          onError(`${file.name}: ${validation.error}`);
+        }
+      }
+      if (files.length > maxFiles && onError) {
+        onError(`Maximum ${maxFiles} files allowed`);
+      }
+      if (validFiles.length > 0) {
+        onFilesSelected(validFiles);
+      }
+      event.target.value = "";
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept: acceptedTypes.join(","),
+          multiple,
+          onChange: handleChange,
+          disabled,
+          className: "sr-only",
+          "aria-label": "Select files to attach"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClick,
+          disabled,
+          "data-slot": "attachment-picker-button",
+          className: cn(
+            "inline-flex items-center justify-center",
+            "rounded-full p-2",
+            "text-neutral-500 hover:text-neutral-700",
+            "dark:text-neutral-400 dark:hover:text-neutral-200",
+            "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+            "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "transition-colors",
+            className
+          ),
+          "aria-label": "Attach files",
+          children: children || /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              className: "h-5 w-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+AttachmentPicker.displayName = "AttachmentPicker";
+function DragDropZone({
+  onFilesDropped,
+  acceptedTypes,
+  maxFileSize,
+  maxFiles = 10,
+  disabled = false,
+  onError,
+  overlayLabel = "Drop files here",
+  children,
+  className
+}) {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const dragCounterRef = React.useRef(0);
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    dragCounterRef.current++;
+    if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragging(false);
+    }
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (disabled) return;
+    setIsDragging(false);
+    dragCounterRef.current = 0;
+    const files = Array.from(event.dataTransfer.files);
+    if (files.length === 0) return;
+    const validFiles = [];
+    for (const file of files.slice(0, maxFiles)) {
+      const validation = validateFile(file, acceptedTypes, maxFileSize);
+      if (validation.valid) {
+        validFiles.push(file);
+      } else if (onError) {
+        onError(`${file.name}: ${validation.error}`);
+      }
+    }
+    if (files.length > maxFiles && onError) {
+      onError(`Maximum ${maxFiles} files allowed`);
+    }
+    if (validFiles.length > 0) {
+      onFilesDropped(validFiles);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      className: cn("relative", className),
+      children: [
+        children,
+        isDragging && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 z-50",
+              "flex items-center justify-center",
+              "bg-primary-50/90 dark:bg-primary-900/90",
+              "border-primary-500 border-2 border-dashed",
+              "rounded-lg"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  className: "text-primary-800 mx-auto h-12 w-12",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-primary-700 dark:text-primary-300 mt-2 text-sm font-medium", children: overlayLabel })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+DragDropZone.displayName = "DragDropZone";
+function CameraButton({
+  onCapture,
+  useFrontCamera = false,
+  disabled = false,
+  className
+}) {
+  const inputRef = React.useRef(null);
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+  const handleChange = (event) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onCapture(file);
+    }
+    event.target.value = "";
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        capture: useFrontCamera ? "user" : "environment",
+        onChange: handleChange,
+        disabled,
+        className: "sr-only",
+        "aria-label": "Take a photo"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled,
+        className: cn(
+          "inline-flex items-center justify-center",
+          "rounded-full p-2",
+          "text-neutral-500 hover:text-neutral-700",
+          "dark:text-neutral-400 dark:hover:text-neutral-200",
+          "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+          "focus:ring-primary-500 focus:ring-2 focus:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "transition-colors",
+          className
+        ),
+        "aria-label": "Take a photo",
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-hidden": "true",
+            className: "h-5 w-5",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+CameraButton.displayName = "CameraButton";
+function activeMentionQuery(value, caret) {
+  const upToCaret = value.slice(0, caret);
+  const match = /(^|\s)@([^\s@]*)$/.exec(upToCaret);
+  if (!match) return null;
+  const query = match[2];
+  return { query, start: caret - query.length - 1 };
+}
+function useMentionAutocomplete({
+  options,
+  value,
+  setValue,
+  textareaRef
+}) {
+  const enabled = !!options && options.length > 0;
+  const [mention, setMention] = React.useState(null);
+  const [highlight, setHighlight] = React.useState(0);
+  const listId = React.useId();
+  const optionId = React.useCallback(
+    (index) => `${listId}-option-${index}`,
+    [listId]
+  );
+  const suggestions = React.useMemo(() => {
+    if (!mention || !options) return [];
+    const q = mention.query.toLowerCase();
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [mention, options]);
+  const menuOpen = enabled && mention !== null && suggestions.length > 0;
+  const {
+    anchorRef,
+    floatingRef,
+    style: menuStyle
+  } = useAnchoredPosition({
+    open: menuOpen,
+    placement: "top-start",
+    maxHeight: 224
+  });
+  const clampedHighlight = menuOpen ? Math.min(highlight, suggestions.length - 1) : -1;
+  const activeOptionId = menuOpen ? optionId(clampedHighlight) : void 0;
+  const sync = React.useCallback(
+    (nextValue, caret) => {
+      if (!enabled) return;
+      setMention(activeMentionQuery(nextValue, caret));
+      setHighlight(0);
+    },
+    [enabled]
+  );
+  const insert = (option) => {
+    if (!mention) return;
+    const insertValue = option.value ?? option.label.split(" ")[0];
+    const before = value.slice(0, mention.start);
+    const after = value.slice(mention.start + 1 + mention.query.length);
+    const insertText = `@${insertValue} `;
+    setValue(before + insertText + after);
+    setMention(null);
+    const caret = before.length + insertText.length;
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (el) {
+        el.focus();
+        el.setSelectionRange(caret, caret);
+      }
+    });
+  };
+  const handleKeyDown = (event) => {
+    if (!menuOpen) return false;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setHighlight(
+        (h) => (Math.min(h, suggestions.length - 1) + 1) % suggestions.length
+      );
+      return true;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setHighlight(
+        (h) => (Math.min(h, suggestions.length - 1) - 1 + suggestions.length) % suggestions.length
+      );
+      return true;
+    }
+    if (event.key === "Enter" || event.key === "Tab") {
+      event.preventDefault();
+      const chosen = suggestions[clampedHighlight];
+      if (chosen) insert(chosen);
+      return true;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setMention(null);
+      return true;
+    }
+    return false;
+  };
+  const inputProps = enabled ? {
+    "aria-controls": menuOpen ? listId : void 0,
+    "aria-activedescendant": activeOptionId,
+    "aria-autocomplete": "list"
+  } : {};
+  return {
+    enabled,
+    menuOpen,
+    suggestions,
+    highlight: clampedHighlight,
+    listId,
+    optionId,
+    anchorRef,
+    floatingRef,
+    menuStyle,
+    sync,
+    insert,
+    setHighlight,
+    handleKeyDown,
+    inputProps
+  };
+}
+function MentionMenu({
+  mention,
+  label = "Mention",
+  dataSlot = "composer-mention-list"
+}) {
+  if (!mention.menuOpen) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: mention.floatingRef,
+        style: mention.menuStyle,
+        id: mention.listId,
+        role: "listbox",
+        "aria-label": label,
+        "data-slot": dataSlot,
+        className: "w-64 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800",
+        children: mention.suggestions.map((option, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: mention.optionId(i),
+            role: "option",
+            "aria-selected": i === mention.highlight,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              mention.insert(option);
+            },
+            onMouseEnter: () => mention.setHighlight(i),
+            className: cn(
+              "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
+              i === mention.highlight ? "bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100" : "text-neutral-700 dark:text-neutral-200"
+            ),
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label }),
+                option.description && /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs text-neutral-400", children: option.description })
+              ] }),
+              option.meta && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: option.meta })
+            ]
+          }
+        ) }, option.id))
+      }
+    ),
+    document.body
+  );
+}
+MentionMenu.displayName = "MentionMenu";
+var iconButtonClasses = cn(
+  "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg",
+  "text-neutral-500 dark:text-neutral-400",
+  "transition-colors duration-150",
+  "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-700 dark:hover:text-white",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+  "disabled:pointer-events-none disabled:opacity-40"
+);
+var selectorTriggerClasses = cn(
+  "flex min-w-0 items-center gap-1 rounded-md px-2 py-1 text-xs",
+  "text-neutral-600 dark:text-neutral-400",
+  "transition-colors duration-150",
+  "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-700 dark:hover:text-white",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
+  "disabled:pointer-events-none disabled:opacity-40"
+);
+var MAX_INPUT_HEIGHT = 160;
+var ChatComposer = React.forwardRef(function ChatComposer2({
+  onSend,
+  value: controlledValue,
+  onValueChange,
+  placeholder = "Type a message\u2026",
+  disabled = false,
+  isSending = false,
+  autoFocus = false,
+  maxLength,
+  showCharacterCount = false,
+  canSendWhenEmpty = false,
+  maxHeight = MAX_INPUT_HEIGHT,
+  textareaProps,
+  addMenuItems,
+  allowAttachments = true,
+  acceptedFileTypes,
+  maxFileSize,
+  maxAttachments = 10,
+  mentionOptions,
+  replyTo = null,
+  onCancelReply,
+  showMic = false,
+  onMicClick,
+  micSlot,
+  micBehavior = "always",
+  isStreaming = false,
+  onStop,
+  showAgentSelector = false,
+  agents = [],
+  selectedAgent = null,
+  onAgentChange,
+  showModelSelector = false,
+  modelSelectorProps,
+  readOnly = false,
+  readOnlyMessage = "You have read-only access and cannot send messages.",
+  onError,
+  attachmentLimitLabel,
+  sendFailedLabel = "Failed to send message",
+  sendingLabel = "Sending message\u2026",
+  inputLabel = "Message input",
+  addMenuLabel = "Add to message",
+  attachFilesLabel = "Attach files",
+  micLabel = "Start voice input",
+  sendLabel = "Send message",
+  stopLabel = "Stop generating",
+  agentSelectorLabel = "Select agent",
+  mentionListLabel = "Mention",
+  dropFilesLabel = "Drop files here",
+  replyingToLabel = "Replying to",
+  cancelReplyLabel = "Cancel reply",
+  className
+}, ref) {
+  const [internalValue, setInternalValue] = React.useState("");
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const [attachments, setAttachments] = React.useState([]);
+  const attachmentsRef = React.useRef(attachments);
+  attachmentsRef.current = attachments;
+  const textareaRef = React.useRef(null);
+  const fileInputRef = React.useRef(null);
+  const [addMenuOpen, setAddMenuOpen] = React.useState(false);
+  const [agentMenuOpen, setAgentMenuOpen] = React.useState(false);
+  const replyToId = replyTo?.id;
+  React.useEffect(() => {
+    if (replyToId !== void 0) {
+      textareaRef.current?.focus();
+    }
+  }, [replyToId]);
+  const hasText = value.trim().length > 0;
+  const hasContent = hasText || attachments.length > 0;
+  const isOverLimit = maxLength !== void 0 && value.length > maxLength;
+  const canSend = (hasContent || canSendWhenEmpty) && onSend !== void 0 && !disabled && !isSending && !isStreaming && !isOverLimit;
+  const setValue = React.useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const mention = useMentionAutocomplete({
+    options: mentionOptions,
+    value,
+    setValue,
+    textareaRef
+  });
+  const resizeTextarea = React.useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    if (textarea.scrollHeight === 0) return;
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, []);
+  React.useLayoutEffect(resizeTextarea, [resizeTextarea, value]);
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || typeof ResizeObserver === "undefined") return;
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(resizeTextarea);
+    });
+    observer.observe(textarea);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [resizeTextarea]);
+  const addFiles = React.useCallback(
+    (files) => {
+      if (files.length === 0) return;
+      const limitMessage = attachmentLimitLabel ?? `Attachment limit reached (max ${maxAttachments})`;
+      const room = maxAttachments - attachmentsRef.current.length;
+      if (files.length > room) {
+        onError?.(limitMessage, { reason: "attachment-limit" });
+        if (room <= 0) return;
+      }
+      const staged = [];
+      for (const file of files.slice(0, Math.max(room, 0))) {
+        const typeCheck = validateFile(file, acceptedFileTypes, void 0);
+        if (!typeCheck.valid) {
+          onError?.(`${file.name}: ${typeCheck.error}`, {
+            reason: "file-type",
+            file
+          });
+          continue;
+        }
+        const sizeCheck = validateFile(file, void 0, maxFileSize);
+        if (!sizeCheck.valid) {
+          onError?.(`${file.name}: ${sizeCheck.error}`, {
+            reason: "file-size",
+            file
+          });
+          continue;
+        }
+        const type = getFileType(file.type);
+        staged.push({
+          id: generateAttachmentId(),
+          file,
+          type,
+          previewUrl: type === "image" || type === "video" ? URL.createObjectURL(file) : void 0
+        });
+      }
+      if (staged.length > 0) {
+        attachmentsRef.current = [...attachmentsRef.current, ...staged];
+        setAttachments((current) => [...current, ...staged]);
+      }
+    },
+    [
+      maxAttachments,
+      acceptedFileTypes,
+      maxFileSize,
+      onError,
+      attachmentLimitLabel
+    ]
+  );
+  const removeAttachment = React.useCallback((id) => {
+    const target = attachmentsRef.current.find(
+      (attachment) => attachment.id === id
+    );
+    if (target?.previewUrl) URL.revokeObjectURL(target.previewUrl);
+    attachmentsRef.current = attachmentsRef.current.filter(
+      (attachment) => attachment.id !== id
+    );
+    setAttachments(
+      (current) => current.filter((attachment) => attachment.id !== id)
+    );
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      for (const attachment of attachmentsRef.current) {
+        if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);
+      }
+    };
+  }, []);
+  const handleFileInputChange = (event) => {
+    const files = Array.from(event.target.files ?? []);
+    addFiles(files);
+    event.target.value = "";
+  };
+  const handlePaste = (event) => {
+    if (!allowAttachments) return;
+    const files = Array.from(event.clipboardData.files);
+    if (files.length > 0) {
+      event.preventDefault();
+      addFiles(files);
+    }
+  };
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      addFiles,
+      focus: () => textareaRef.current?.focus(),
+      getTextarea: () => textareaRef.current
+    }),
+    [addFiles]
+  );
+  const handleSend = () => {
+    if (!canSend || !onSend) return;
+    const message = {
+      content: value.trim(),
+      attachments: attachments.map((attachment) => attachment.file),
+      // Only add the key when replying — hosts may key-check the payload.
+      ...replyTo ? { replyToId: replyTo.id } : {}
+    };
+    for (const attachment of attachments) {
+      if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);
+    }
+    attachmentsRef.current = [];
+    setAttachments([]);
+    setValue("");
+    try {
+      Promise.resolve(onSend(message)).catch(() => {
+        onError?.(sendFailedLabel, { reason: "send-failed" });
+      });
+    } catch {
+      onError?.(sendFailedLabel, { reason: "send-failed" });
+    }
+    textareaRef.current?.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (mention.handleKeyDown(event)) return;
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      handleSend();
+    }
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "chat-composer",
+        role: "status",
+        className: cn(
+          "flex items-center gap-2 rounded-xl border px-4 py-3 text-sm",
+          "border-amber-300 bg-amber-50 text-amber-900",
+          "dark:border-amber-700 dark:bg-amber-950 dark:text-amber-200",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { "data-slot": "chat-composer-readonly", children: readOnlyMessage })
+        ]
+      }
+    );
+  }
+  const showAddMenu = allowAttachments || addMenuItems && addMenuItems.length > 0;
+  const micVisible = (showMic || onMicClick !== void 0 || micSlot !== void 0) && (micBehavior === "always" || !hasContent);
+  const showSelectorRow = showAgentSelector || showModelSelector;
+  const selectedAgentOption = agents.find((agent) => agent.id === selectedAgent) ?? null;
+  const cells = {
+    input: "col-span-3 col-start-1 row-start-1 px-1 pt-1 md:col-span-1 md:col-start-2 md:self-end md:px-0 md:py-1.5",
+    textarea: "px-2 pt-2 pb-1 md:py-1.5",
+    add: "col-start-1 row-start-2 pb-2 ps-2 md:row-start-1 md:self-end md:p-1.5 md:pe-0.5",
+    actions: "col-start-3 row-start-2 flex items-center gap-1 pb-2 pe-2 md:row-start-1 md:self-end md:gap-0.5 md:p-1.5 md:ps-0.5"
+  };
+  const composerCard = /* @__PURE__ */ jsxs(Fragment, { children: [
+    replyTo && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "chat-composer-reply-preview",
+        className: cn(
+          "flex items-center gap-2 rounded-t-2xl px-4 py-2",
+          "bg-neutral-50 dark:bg-neutral-800/50",
+          "border-b border-neutral-200 dark:border-neutral-700",
+          "border-s-primary-500 border-s-4"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { role: "status", className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-primary-800 dark:text-primary-400 block text-xs font-medium", children: [
+              replyingToLabel,
+              " ",
+              replyTo.senderName
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-neutral-600 dark:text-neutral-300", children: replyTo.content })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "chat-composer-cancel-reply",
+              "aria-label": cancelReplyLabel,
+              disabled,
+              onClick: onCancelReply,
+              className: iconButtonClasses,
+              children: /* @__PURE__ */ jsx(X2, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    ),
+    attachments.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "chat-composer-attachments",
+        className: "flex flex-wrap gap-2 px-3 pt-3",
+        children: attachments.map((attachment) => /* @__PURE__ */ jsx(
+          AttachmentPreviewItem,
+          {
+            attachment: { ...attachment, state: "pending" },
+            onRemove: () => removeAttachment(attachment.id),
+            disabled
+          },
+          attachment.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto]", children: [
+      /* @__PURE__ */ jsxs("div", { className: cells.input, ref: mention.anchorRef, children: [
+        /* @__PURE__ */ jsx(
+          MentionMenu,
+          {
+            mention,
+            label: mentionListLabel,
+            dataSlot: "chat-composer-mention-list"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ...textareaProps,
+            ref: textareaRef,
+            "data-slot": "chat-composer-input",
+            value,
+            onChange: (event) => {
+              textareaProps?.onChange?.(event);
+              setValue(event.target.value);
+              mention.sync(
+                event.target.value,
+                event.target.selectionStart ?? event.target.value.length
+              );
+            },
+            onKeyDown: (event) => {
+              textareaProps?.onKeyDown?.(event);
+              if (event.defaultPrevented) return;
+              handleKeyDown(event);
+            },
+            onClick: (event) => {
+              textareaProps?.onClick?.(event);
+              if (event.defaultPrevented) return;
+              const el = event.currentTarget;
+              mention.sync(el.value, el.selectionStart ?? el.value.length);
+            },
+            onPaste: (event) => {
+              textareaProps?.onPaste?.(event);
+              if (event.defaultPrevented) return;
+              handlePaste(event);
+            },
+            placeholder,
+            disabled,
+            autoFocus,
+            rows: 1,
+            "aria-label": inputLabel,
+            ...mention.inputProps,
+            style: {
+              ...textareaProps?.style,
+              maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+            },
+            className: cn(
+              "block w-full resize-none bg-transparent",
+              "rounded-lg text-sm",
+              cells.textarea,
+              "text-neutral-900 placeholder:text-neutral-400 dark:text-white dark:placeholder:text-neutral-500",
+              // Ring the input itself on focus rather than the whole shell.
+              "focus:ring-primary-500 focus:ring-1 focus:outline-none",
+              "disabled:cursor-not-allowed",
+              textareaProps?.className
+            )
+          }
+        )
+      ] }),
+      showAddMenu && /* @__PURE__ */ jsx("div", { className: cells.add, children: /* @__PURE__ */ jsxs(
+        Dropdown,
+        {
+          placement: "top-start",
+          open: addMenuOpen,
+          onOpenChange: setAddMenuOpen,
+          trigger: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "chat-composer-add-button",
+              "aria-label": addMenuLabel,
+              disabled,
+              className: iconButtonClasses,
+              children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          ),
+          children: [
+            allowAttachments && /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4", "aria-hidden": "true" }),
+                onClick: () => {
+                  setAddMenuOpen(false);
+                  fileInputRef.current?.click();
+                },
+                children: attachFilesLabel
+              }
+            ),
+            allowAttachments && addMenuItems && addMenuItems.length > 0 && /* @__PURE__ */ jsx(DropdownSeparator, {}),
+            addMenuItems?.map((item) => /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: item.icon,
+                disabled: item.disabled,
+                variant: item.variant,
+                checked: item.checked,
+                onClick: () => {
+                  setAddMenuOpen(false);
+                  item.onSelect?.();
+                },
+                children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label })
+              },
+              item.id
+            ))
+          ]
+        }
+      ) }),
+      allowAttachments && /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          multiple: true,
+          accept: acceptedFileTypes?.join(","),
+          onChange: handleFileInputChange,
+          className: "hidden",
+          "aria-hidden": "true",
+          tabIndex: -1
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: cells.actions, children: [
+        showCharacterCount && maxLength !== void 0 && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-slot": "chat-composer-char-count",
+            "aria-live": "polite",
+            className: cn(
+              "pe-1 text-xs tabular-nums",
+              isOverLimit ? "font-medium text-red-700 dark:text-red-400" : "text-neutral-500 dark:text-neutral-400"
+            ),
+            children: [
+              value.length,
+              "/",
+              maxLength
+            ]
+          }
+        ),
+        micVisible && (micSlot != null ? (
+          // Normalize slot content (e.g. a RecordButton) to the 32px
+          // control row: taller content overflow-centers instead of
+          // inflating the pill and pushing the other cells apart. A div
+          // so block-level slot content stays valid HTML.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "chat-composer-mic-slot",
+              className: "flex h-8 shrink-0 items-center",
+              children: micSlot
+            }
+          )
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "chat-composer-mic-button",
+            "aria-label": micLabel,
+            disabled,
+            onClick: onMicClick,
+            className: iconButtonClasses,
+            children: /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        )),
+        isStreaming && onStop ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "chat-composer-stop-button",
+            "aria-label": stopLabel,
+            disabled,
+            onClick: onStop,
+            className: cn(
+              iconButtonClasses,
+              "text-neutral-700 dark:text-neutral-200"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Square,
+              {
+                className: "h-3.5 w-3.5 fill-current",
+                "aria-hidden": "true"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "chat-composer-send-button",
+            "aria-label": isSending ? sendingLabel : sendLabel,
+            "aria-busy": isSending || void 0,
+            disabled: !canSend,
+            onClick: handleSend,
+            className: cn(
+              iconButtonClasses,
+              canSend && "bg-primary-800 hover:bg-primary-700 dark:bg-primary-600 dark:hover:bg-primary-500 text-white hover:text-white dark:hover:text-white"
+            ),
+            children: isSending ? /* @__PURE__ */ jsx(
+              Loader2,
+              {
+                className: "h-4 w-4 animate-spin",
+                "aria-hidden": "true"
+              }
+            ) : /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+  const selectorsRow = showSelectorRow && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chat-composer-selectors",
+      className: "flex items-center justify-between gap-2 px-2 pt-1",
+      children: [
+        showAgentSelector ? /* @__PURE__ */ jsx(
+          Dropdown,
+          {
+            placement: "top-start",
+            open: agentMenuOpen,
+            onOpenChange: setAgentMenuOpen,
+            trigger: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "data-slot": "chat-composer-agent-trigger",
+                "aria-label": selectedAgentOption ? `${agentSelectorLabel}: ${selectedAgentOption.label}` : agentSelectorLabel,
+                disabled,
+                className: selectorTriggerClasses,
+                children: [
+                  selectedAgentOption?.icon ?? /* @__PURE__ */ jsx(Bot, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: selectedAgentOption?.label ?? agentSelectorLabel }),
+                  /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3 shrink-0", "aria-hidden": "true" })
+                ]
+              }
+            ),
+            children: agents.map((agent) => /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                icon: agent.icon,
+                role: "menuitemradio",
+                "aria-checked": agent.id === selectedAgent,
+                onClick: () => {
+                  setAgentMenuOpen(false);
+                  onAgentChange?.(agent.id);
+                },
+                children: /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block truncate", children: agent.label }),
+                    agent.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-neutral-500 dark:text-neutral-400", children: agent.description })
+                  ] }),
+                  agent.id === selectedAgent && /* @__PURE__ */ jsx(
+                    Check,
+                    {
+                      className: "text-primary-600 dark:text-primary-400 h-4 w-4 shrink-0",
+                      "aria-hidden": "true"
+                    }
+                  )
+                ] })
+              },
+              agent.id
+            ))
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+        showModelSelector && modelSelectorProps && /* @__PURE__ */ jsx(
+          ComposerModelSelector,
+          {
+            variant: "ghost",
+            ...modelSelectorProps,
+            disabled: disabled || modelSelectorProps.disabled
+          }
+        )
+      ]
+    }
+  );
+  const card = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chat-composer-card",
+      className: cn(
+        "rounded-2xl border border-neutral-200 bg-white shadow-sm",
+        "dark:border-[#2e2e30] dark:bg-[#1c1c1e]"
+      ),
+      children: composerCard
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chat-composer",
+      className: cn(
+        "flex w-full flex-col",
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        allowAttachments ? /* @__PURE__ */ jsx(
+          DragDropZone,
+          {
+            onFilesDropped: addFiles,
+            maxFiles: Number.MAX_SAFE_INTEGER,
+            disabled,
+            overlayLabel: dropFilesLabel,
+            children: card
+          }
+        ) : card,
+        selectorsRow
+      ]
+    }
+  );
+});
+ChatComposer.displayName = "ChatComposer";
+
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, ChatComposer, ComposerModelSelector, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_MAX_FILE_SIZE, DragDropZone, MentionMenu, generateAttachmentId, getFileType, useMentionAutocomplete, validateFile };
+//# sourceMappingURL=chunk-3SD7PDCV.js.map
+//# sourceMappingURL=chunk-3SD7PDCV.js.map