@mieweb/ui 0.8.0 → 0.9.0-dev.1

package/dist/{chunk-RZJXCI53.js → chunk-KATEJG2F.js}

@@ -1,8 +1,16 @@
-import { AudioPlayer } from './chunk-XO3WLK65.js';
+import { useMentionAutocomplete, validateFile, getFileType, generateAttachmentId, AttachmentPreviewItem, MentionMenu, DragDropZone } from './chunk-IF3X2WZP.js';
+import { Dropdown, DropdownItem, DropdownSeparator } from './chunk-KU3XRHWA.js';
+import { AudioPlayer } from './chunk-VVDE4CHU.js';
+import { AlertTriangle, Paperclip, Plus, Mic, Square, Loader2, ArrowUp, Check, Bot, ChevronUp } from './chunk-BKSPDTX4.js';
 import { cn } from './chunk-TQONQSJO.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React2 from 'react';
+import { useEscapeKey } from './chunk-T4ME7QCT.js';
+import { useClickOutside } from './chunk-62ZOA6PX.js';
+import { useAnchoredPosition } from './chunk-WSNMQQ4P.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React3 from 'react';
 import { cva } from 'class-variance-authority';
+import { createPortal } from 'react-dom';
+import { ChevronUp as ChevronUp$1, Check as Check$1, ChevronRight, ChevronLeft } from 'lucide-react';
 
 var sizeClasses = {
   sm: "h-4 w-4",
@@ -215,9 +223,9 @@ function CollapsiblePill({
   children
 }) {
   const hasContent = Boolean(children);
-  const [isOpen, setIsOpen] = React2.useState(defaultOpen);
-  const contentId = React2.useId();
-  React2.useEffect(() => {
+  const [isOpen, setIsOpen] = React3.useState(defaultOpen);
+  const contentId = React3.useId();
+  React3.useEffect(() => {
     setIsOpen(defaultOpen);
   }, [defaultOpen]);
   const toggle = () => {
@@ -1074,10 +1082,10 @@ function ThinkingBlock({
   streaming,
   defaultCollapsed = false
 }) {
-  const startedAt = React2.useRef(Date.now());
-  const [elapsed, setElapsed] = React2.useState(null);
-  const prevStreaming = React2.useRef(streaming);
-  React2.useEffect(() => {
+  const startedAt = React3.useRef(Date.now());
+  const [elapsed, setElapsed] = React3.useState(null);
+  const prevStreaming = React3.useRef(streaming);
+  React3.useEffect(() => {
     if (prevStreaming.current && !streaming) {
       setElapsed(Math.round((Date.now() - startedAt.current) / 1e3));
     }
@@ -1281,7 +1289,7 @@ var bubbleVariants = cva("rounded-2xl px-4 py-2.5 w-fit max-w-[85%]", {
     variant: "assistant"
   }
 });
-var ChatBubble = React2.forwardRef(
+var ChatBubble = React3.forwardRef(
   ({ className, variant, hasError, accent, style, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1397,7 +1405,1123 @@ function AIMessageDisplay({
     }
   );
 }
+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] = React3.useState(false);
+  const [view, setView] = React3.useState("models");
+  const [effortHighlight, setEffortHighlight] = React3.useState(0);
+  const [internalProviderFilter, setInternalProviderFilter] = React3.useState(null);
+  const [highlightedIndex, setHighlightedIndex] = React3.useState(0);
+  const listRef = React3.useRef(null);
+  const effortListRef = React3.useRef(null);
+  const menuId = React3.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 = React3.useMemo(
+    () => Array.from(new Set(models.map((model) => model.provider))),
+    [models]
+  );
+  const providerLabels = React3.useMemo(
+    () => new Map(
+      providers.map((provider) => [
+        provider,
+        getProviderLabel(models, provider)
+      ])
+    ),
+    [models, providers]
+  );
+  const filteredModels = React3.useMemo(
+    () => activeProviderFilter === null ? models : models.filter((model) => model.provider === activeProviderFilter),
+    [activeProviderFilter, models]
+  );
+  const groupedModels = React3.useMemo(
+    () => groupByProvider(filteredModels),
+    [filteredModels]
+  );
+  const groupedRenderedModels = React3.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 = React3.useMemo(
+    () => groupedRenderedModels.flatMap((group) => group.options),
+    [groupedRenderedModels]
+  );
+  const getOptionId = React3.useCallback(
+    (index) => `${menuId}-option-${index}`,
+    [menuId]
+  );
+  const getEffortOptionId = React3.useCallback(
+    (index) => `${menuId}-effort-option-${index}`,
+    [menuId]
+  );
+  const activeOptionId = open && renderedModels[highlightedIndex] ? getOptionId(highlightedIndex) : void 0;
+  const selectedRenderedIndex = React3.useMemo(
+    () => selectedKey ? renderedModels.findIndex(
+      (renderedModel) => optionKey(renderedModel.option) === selectedKey
+    ) : -1,
+    [renderedModels, selectedKey]
+  );
+  const setProvider = React3.useCallback(
+    (provider) => {
+      if (providerFilter === void 0) {
+        setInternalProviderFilter(provider);
+      }
+      onProviderFilterChange?.(provider);
+    },
+    [onProviderFilterChange, providerFilter]
+  );
+  const close = React3.useCallback(
+    (restoreFocus = true) => {
+      setOpen(false);
+      if (restoreFocus) {
+        triggerRef.current?.focus({ preventScroll: true });
+      }
+    },
+    [triggerRef]
+  );
+  const selectModel = React3.useCallback(
+    (model) => {
+      onChange({ provider: model.provider, model: model.model });
+      close();
+    },
+    [close, onChange]
+  );
+  const efforts = React3.useMemo(() => effortOptions ?? [], [effortOptions]);
+  const activeEffortOptionId = open && efforts[effortHighlight] ? getEffortOptionId(effortHighlight) : void 0;
+  const selectedEffortOption = efforts.find(
+    (option) => option.value === effort
+  );
+  const selectEffort = React3.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 = React3.useMemo(
+    () => [triggerRef, menuRef],
+    [triggerRef, menuRef]
+  );
+  useClickOutside(outsideRefs, () => close(false), open);
+  useEscapeKey(close, open);
+  React3.useEffect(() => {
+    if (!open) return;
+    setHighlightedIndex(selectedRenderedIndex >= 0 ? selectedRenderedIndex : 0);
+  }, [activeProviderFilter, open, selectedRenderedIndex]);
+  React3.useEffect(() => {
+    if (!open) return;
+    setView("models");
+  }, [open]);
+  React3.useEffect(() => {
+    if (!open) return;
+    const current = efforts.findIndex((option) => option.value === effort);
+    setEffortHighlight(current >= 0 ? current : 0);
+  }, [effort, efforts, open]);
+  React3.useEffect(() => {
+    if (!open) return;
+    setHighlightedIndex(
+      (current) => Math.min(current, Math.max(renderedModels.length - 1, 0))
+    );
+  }, [open, renderedModels.length]);
+  React3.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";
+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 = React3.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,
+  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",
+  className
+}, ref) {
+  const [internalValue, setInternalValue] = React3.useState("");
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const [attachments, setAttachments] = React3.useState([]);
+  const attachmentsRef = React3.useRef(attachments);
+  attachmentsRef.current = attachments;
+  const textareaRef = React3.useRef(null);
+  const fileInputRef = React3.useRef(null);
+  const [addMenuOpen, setAddMenuOpen] = React3.useState(false);
+  const [agentMenuOpen, setAgentMenuOpen] = React3.useState(false);
+  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 = React3.useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const mention = useMentionAutocomplete({
+    options: mentionOptions,
+    value,
+    setValue,
+    textareaRef
+  });
+  const resizeTextarea = React3.useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    if (textarea.scrollHeight === 0) return;
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, []);
+  React3.useLayoutEffect(resizeTextarea, [resizeTextarea, value]);
+  React3.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 = React3.useCallback(
+    (files) => {
+      if (!allowAttachments || 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]);
+      }
+    },
+    [
+      allowAttachments,
+      maxAttachments,
+      acceptedFileTypes,
+      maxFileSize,
+      onError,
+      attachmentLimitLabel
+    ]
+  );
+  const removeAttachment = React3.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)
+    );
+  }, []);
+  React3.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);
+    }
+  };
+  React3.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)
+    };
+    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: [
+    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 { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, CollapsiblePill, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
-//# sourceMappingURL=chunk-RZJXCI53.js.map
-//# sourceMappingURL=chunk-RZJXCI53.js.map
+export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChatComposer, ChevronIcon, CloseIcon, CollapsiblePill, ComposerModelSelector, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
+//# sourceMappingURL=chunk-KATEJG2F.js.map
+//# sourceMappingURL=chunk-KATEJG2F.js.map