@mieweb/ui 0.8.0-dev.18 → 0.8.0-dev.19

package/dist/index.js

@@ -76,7 +76,7 @@ export { Checkbox, CheckboxGroup, checkboxVariants } from './chunk-753Z3NXL.js';
 export { ClampedText } from './chunk-L6MDULYB.js';
 export { CollabStatus, defaultCollabStatusLabels, useYjsCollabStatus } from './chunk-SVSHA7XV.js';
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './chunk-BJKAVWED.js';
-export { miewebUIPreset, miewebUISafelist } from './chunk-V3YV2FYF.js';
+export { miewebUIPreset, miewebUISafelist } from './chunk-PDS7OM73.js';
 export { Accordion } from './chunk-KRU6IGV7.js';
 import { Alert, AlertTitle, AlertDescription } from './chunk-3JWAABYI.js';
 export { Alert, AlertDescription, AlertTitle, alertVariants } from './chunk-3JWAABYI.js';
@@ -12580,12 +12580,21 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
     },
     [isControlled, onValueChange]
   );
-  React13.useLayoutEffect(() => {
+  const resizeTextarea = React13.useCallback(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
     textarea.style.height = "auto";
+    if (textarea.scrollHeight === 0) return;
     textarea.style.height = `${textarea.scrollHeight}px`;
-  }, [value]);
+  }, []);
+  React13.useLayoutEffect(resizeTextarea, [resizeTextarea, value]);
+  React13.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(resizeTextarea);
+    observer.observe(textarea);
+    return () => observer.disconnect();
+  }, [resizeTextarea]);
   const addFiles = React13.useCallback(
     (files) => {
       if (!allowAttachments || files.length === 0) return;
@@ -12726,291 +12735,311 @@ var ChatComposer = React13.forwardRef(function ChatComposer2({
   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;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "chat-composer",
-      className: cn(
-        "rounded-xl border border-neutral-200 bg-white shadow-sm",
-        "dark:border-neutral-700 dark:bg-neutral-800",
-        disabled && "opacity-60",
-        className
-      ),
-      children: [
-        attachments.length > 0 && /* @__PURE__ */ jsx(
-          "div",
+  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,
           {
-            "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__ */ jsx("div", { className: cells.input, children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ...textareaProps,
+          ref: textareaRef,
+          "data-slot": "chat-composer-input",
+          value,
+          onChange: (event) => {
+            textareaProps?.onChange?.(event);
+            setValue(event.target.value);
+          },
+          onKeyDown: (event) => {
+            textareaProps?.onKeyDown?.(event);
+            if (event.defaultPrevented) return;
+            handleKeyDown(event);
+          },
+          onPaste: (event) => {
+            textareaProps?.onPaste?.(event);
+            if (event.defaultPrevented) return;
+            handlePaste(event);
+          },
+          placeholder,
+          disabled,
+          autoFocus,
+          rows: 1,
+          "aria-label": inputLabel,
+          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,
               {
-                attachment: { ...attachment, state: "pending" },
-                onRemove: () => removeAttachment(attachment.id),
-                disabled
+                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 })
               },
-              attachment.id
+              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
+            ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "px-1 pt-1", children: /* @__PURE__ */ jsx(
-          "textarea",
+        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",
           {
-            ...textareaProps,
-            ref: textareaRef,
-            "data-slot": "chat-composer-input",
-            value,
-            onChange: (event) => {
-              textareaProps?.onChange?.(event);
-              setValue(event.target.value);
-            },
-            onKeyDown: (event) => {
-              textareaProps?.onKeyDown?.(event);
-              if (event.defaultPrevented) return;
-              handleKeyDown(event);
-            },
-            onPaste: (event) => {
-              textareaProps?.onPaste?.(event);
-              if (event.defaultPrevented) return;
-              handlePaste(event);
-            },
-            placeholder,
+            type: "button",
+            "data-slot": "chat-composer-mic-button",
+            "aria-label": micLabel,
             disabled,
-            autoFocus,
-            rows: 1,
-            "aria-label": inputLabel,
-            style: {
-              ...textareaProps?.style,
-              maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
-            },
+            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(
-              "block w-full resize-none bg-transparent",
-              "rounded-lg px-2 pt-2 pb-1 text-sm",
-              "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
+              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__ */ jsxs(
-          "div",
+        ) : /* @__PURE__ */ jsx(
+          "button",
           {
-            "data-slot": "chat-composer-toolbar",
-            className: "flex items-center gap-1 px-2 pb-2",
-            children: [
-              showAddMenu && /* @__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: "ms-auto flex items-center gap-1", 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 ?? /* @__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" })
-                  }
-                )
-              ] })
-            ]
+            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" })
           }
-        ),
-        showSelectorRow && /* @__PURE__ */ jsxs(
-          "div",
+        )
+      ] })
+    ] })
+  ] });
+  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,
           {
-            "data-slot": "chat-composer-selectors",
-            className: "flex items-center justify-between gap-2 border-t border-neutral-100 px-2 py-1.5 dark:border-neutral-700",
-            children: [
-              showAgentSelector ? /* @__PURE__ */ jsx(
-                Dropdown,
-                {
-                  placement: "top-start",
-                  open: agentMenuOpen,
-                  onOpenChange: setAgentMenuOpen,
-                  trigger: /* @__PURE__ */ jsxs(
-                    "button",
+            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,
                     {
-                      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"
-                          }
-                        )
-                      ]
+                      className: "text-primary-600 dark:text-primary-400 h-4 w-4 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
-                }
-              )
-            ]
+                  )
+                ] })
+              },
+              agent.id
+            ))
+          }
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+        showModelSelector && modelSelectorProps && /* @__PURE__ */ jsx(
+          ComposerModelSelector,
+          {
+            variant: "ghost",
+            ...modelSelectorProps,
+            disabled: disabled || modelSelectorProps.disabled
           }
         )
       ]
     }
   );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chat-composer",
+      className: cn(
+        "flex w-full flex-col",
+        disabled && "opacity-60",
+        className
+      ),
+      children: [
+        /* @__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
+          }
+        ),
+        selectorsRow
+      ]
+    }
+  );
 });
 ChatComposer.displayName = "ChatComposer";
 var MODE_META = {