@mieweb/ui 0.10.0-dev.2 → 0.10.0-dev.21

package/dist/{chunk-ACCAXVOG.js → chunk-2ABWFQQH.js}

@@ -1,4 +1,4 @@
-import { Dropdown, DropdownItem, DropdownSeparator } from './chunk-ZGRCSNPK.js';
+import { Dropdown, DropdownItem, DropdownSeparator } from './chunk-TF7YWJHU.js';
 import { useClickOutside } from './chunk-62ZOA6PX.js';
 import { useAnchoredPosition } from './chunk-WSNMQQ4P.js';
 import { useEscapeKey } from './chunk-T4ME7QCT.js';
@@ -1251,6 +1251,27 @@ var selectorTriggerClasses = cn(
   "disabled:pointer-events-none disabled:opacity-40"
 );
 var MAX_INPUT_HEIGHT = 160;
+var TOUCH_DEVICE_QUERY = "(hover: none) and (pointer: coarse)";
+var subscribeTouchDevice = (onChange) => {
+  const query = window.matchMedia?.(TOUCH_DEVICE_QUERY);
+  query?.addEventListener("change", onChange);
+  return () => query?.removeEventListener("change", onChange);
+};
+var getTouchDeviceSnapshot = () => window.matchMedia?.(TOUCH_DEVICE_QUERY).matches ?? false;
+var getServerTouchDeviceSnapshot = () => false;
+var CARD_INTERACTIVE_SELECTOR = [
+  "button",
+  "a",
+  "input",
+  "textarea",
+  "select",
+  "label",
+  "video",
+  '[role="listbox"]',
+  '[role="menu"]',
+  '[data-slot="chat-composer-reply-preview"]',
+  '[data-slot="chat-composer-attachments"]'
+].join(",");
 var ChatComposer = React.forwardRef(function ChatComposer2({
   onSend,
   value: controlledValue,
@@ -1262,8 +1283,10 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
   maxLength,
   showCharacterCount = false,
   canSendWhenEmpty = false,
+  submitOnEnter = "desktop",
   maxHeight = MAX_INPUT_HEIGHT,
   textareaProps,
+  leadingSlot,
   addMenuItems,
   allowAttachments = true,
   acceptedFileTypes,
@@ -1313,12 +1336,23 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
   const fileInputRef = React.useRef(null);
   const [addMenuOpen, setAddMenuOpen] = React.useState(false);
   const [agentMenuOpen, setAgentMenuOpen] = React.useState(false);
+  const isTouchDevice = React.useSyncExternalStore(
+    subscribeTouchDevice,
+    getTouchDeviceSnapshot,
+    getServerTouchDeviceSnapshot
+  );
+  const sendsOnEnter = submitOnEnter === "always" || submitOnEnter === "desktop" && !isTouchDevice;
   const replyToId = replyTo?.id;
   React.useEffect(() => {
     if (replyToId !== void 0) {
       textareaRef.current?.focus();
     }
   }, [replyToId]);
+  React.useEffect(() => {
+    if (!autoFocus) return;
+    if (window.matchMedia?.(TOUCH_DEVICE_QUERY).matches) return;
+    textareaRef.current?.focus();
+  }, []);
   const hasText = value.trim().length > 0;
   const hasContent = hasText || attachments.length > 0;
   const isOverLimit = maxLength !== void 0 && value.length > maxLength;
@@ -1470,9 +1504,20 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
     }
     textareaRef.current?.focus();
   };
+  const keepInputFocus = (event) => {
+    event.preventDefault();
+  };
+  const focusInputFromCard = (event) => {
+    if (disabled) return;
+    const target = event.target;
+    if (target.closest(CARD_INTERACTIVE_SELECTOR)) return;
+    event.preventDefault();
+    textareaRef.current?.focus();
+  };
   const handleKeyDown = (event) => {
     if (mention.handleKeyDown(event)) return;
-    if (event.key === "Enter" && !event.shiftKey) {
+    if (event.nativeEvent.isComposing) return;
+    if (event.key === "Enter" && !event.shiftKey && sendsOnEnter) {
       event.preventDefault();
       handleSend();
     }
@@ -1570,6 +1615,12 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
         /* @__PURE__ */ jsx(
           "textarea",
           {
+            enterKeyHint: sendsOnEnter ? "send" : "enter",
+            inputMode: "text",
+            autoCapitalize: "sentences",
+            autoCorrect: "on",
+            spellCheck: true,
+            dir: "auto",
             ...textareaProps,
             ref: textareaRef,
             "data-slot": "chat-composer-input",
@@ -1600,7 +1651,6 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
             },
             placeholder,
             disabled,
-            autoFocus,
             rows: 1,
             "aria-label": inputLabel,
             ...mention.inputProps,
@@ -1610,7 +1660,9 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
             },
             className: cn(
               "block w-full resize-none bg-transparent",
-              "rounded-lg text-sm",
+              // 16px below `sm`: iOS zooms the page when focusing an input
+              // with a smaller font.
+              "rounded-lg text-base sm: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.
@@ -1621,54 +1673,73 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
           }
         )
       ] }),
-      showAddMenu && /* @__PURE__ */ jsx("div", { className: cells.add, children: /* @__PURE__ */ jsxs(
-        Dropdown,
+      (showAddMenu || leadingSlot != null) && /* @__PURE__ */ jsxs(
+        "div",
         {
-          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" })
-            }
+          className: cn(
+            cells.add,
+            leadingSlot != null && "flex items-center gap-0.5"
           ),
           children: [
-            allowAttachments && /* @__PURE__ */ jsx(
-              DropdownItem,
+            leadingSlot != null && /* @__PURE__ */ jsx(
+              "div",
               {
-                icon: /* @__PURE__ */ jsx(Paperclip, { className: "h-4 w-4", "aria-hidden": "true" }),
-                onClick: () => {
-                  setAddMenuOpen(false);
-                  fileInputRef.current?.click();
-                },
-                children: attachFilesLabel
+                "data-slot": "chat-composer-leading-slot",
+                className: "flex h-8 shrink-0 items-center",
+                children: leadingSlot
               }
             ),
-            allowAttachments && addMenuItems && addMenuItems.length > 0 && /* @__PURE__ */ jsx(DropdownSeparator, {}),
-            addMenuItems?.map((item) => /* @__PURE__ */ jsx(
-              DropdownItem,
+            showAddMenu && /* @__PURE__ */ jsxs(
+              Dropdown,
               {
-                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
-            ))
+                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",
         {
@@ -1731,6 +1802,7 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
             "data-slot": "chat-composer-stop-button",
             "aria-label": stopLabel,
             disabled,
+            onMouseDown: keepInputFocus,
             onClick: onStop,
             className: cn(
               iconButtonClasses,
@@ -1752,6 +1824,7 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
             "aria-label": isSending ? sendingLabel : sendLabel,
             "aria-busy": isSending || void 0,
             disabled: !canSend,
+            onMouseDown: keepInputFocus,
             onClick: handleSend,
             className: cn(
               iconButtonClasses,
@@ -1835,16 +1908,21 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
       ]
     }
   );
-  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
-    }
+  const card = (
+    // Pointer-only convenience: the textarea stays the keyboard/AT target.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "chat-composer-card",
+        onMouseDown: focusInputFromCard,
+        className: cn(
+          "cursor-text rounded-2xl border border-neutral-200 bg-white shadow-sm",
+          "dark:border-[#2e2e30] dark:bg-[#1c1c1e]"
+        ),
+        children: composerCard
+      }
+    )
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1884,5 +1962,5 @@ function notifyComposerMigrationOnce(surface) {
 }
 
 export { AttachmentPicker, AttachmentPreviewItem, CameraButton, ChatComposer, ComposerModelSelector, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_MAX_FILE_SIZE, DragDropZone, generateAttachmentId, getFileType, notifyComposerMigrationOnce, validateFile };
-//# sourceMappingURL=chunk-ACCAXVOG.js.map
-//# sourceMappingURL=chunk-ACCAXVOG.js.map
+//# sourceMappingURL=chunk-2ABWFQQH.js.map
+//# sourceMappingURL=chunk-2ABWFQQH.js.map