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

package/dist/{chunk-QWJGEDHV.js → chunk-22CYDCXA.js}

@@ -1,16 +1,8 @@
-import { useMentionAutocomplete, validateFile, getFileType, generateAttachmentId, AttachmentPreviewItem, MentionMenu, DragDropZone } from './chunk-MD3ZY4UO.js';
-import { Dropdown, DropdownItem, DropdownSeparator } from './chunk-TZX76ZNZ.js';
 import { AudioPlayer } from './chunk-VVDE4CHU.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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React3 from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React2 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",
@@ -223,9 +215,9 @@ function CollapsiblePill({
   children
 }) {
   const hasContent = Boolean(children);
-  const [isOpen, setIsOpen] = React3.useState(defaultOpen);
-  const contentId = React3.useId();
-  React3.useEffect(() => {
+  const [isOpen, setIsOpen] = React2.useState(defaultOpen);
+  const contentId = React2.useId();
+  React2.useEffect(() => {
     setIsOpen(defaultOpen);
   }, [defaultOpen]);
   const toggle = () => {
@@ -1082,10 +1074,10 @@ function ThinkingBlock({
   streaming,
   defaultCollapsed = false
 }) {
-  const startedAt = React3.useRef(Date.now());
-  const [elapsed, setElapsed] = React3.useState(null);
-  const prevStreaming = React3.useRef(streaming);
-  React3.useEffect(() => {
+  const startedAt = React2.useRef(Date.now());
+  const [elapsed, setElapsed] = React2.useState(null);
+  const prevStreaming = React2.useRef(streaming);
+  React2.useEffect(() => {
     if (prevStreaming.current && !streaming) {
       setElapsed(Math.round((Date.now() - startedAt.current) / 1e3));
     }
@@ -1289,7 +1281,7 @@ var bubbleVariants = cva("rounded-2xl px-4 py-2.5 w-fit max-w-[85%]", {
     variant: "assistant"
   }
 });
-var ChatBubble = React3.forwardRef(
+var ChatBubble = React2.forwardRef(
   ({ className, variant, hasError, accent, style, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1405,1169 +1397,7 @@ 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,
-  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] = 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 replyToId = replyTo?.id;
-  React3.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 = 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),
-      // 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 { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChatComposer, ChevronIcon, CloseIcon, CollapsiblePill, ComposerModelSelector, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
-//# sourceMappingURL=chunk-QWJGEDHV.js.map
-//# sourceMappingURL=chunk-QWJGEDHV.js.map
+export { AILogoIcon, AIMessageDisplay, AITypingIndicator, ChatBubble, ChevronIcon, CloseIcon, CollapsiblePill, MCPToolCallDisplay, MessageAvatar, RefreshIcon, ResourceLink, SendIcon, SparklesIcon, SpinnerIcon, ToolStatusIcon, getToolIcon };
+//# sourceMappingURL=chunk-22CYDCXA.js.map
+//# sourceMappingURL=chunk-22CYDCXA.js.map