@mieweb/ui 0.10.0-dev.9 → 0.11.0-dev.0

package/dist/{chunk-X4XPNTCZ.cjs → chunk-U2RS574O.cjs}

@@ -1,10 +1,11 @@
 'use strict';
 
-var chunkSGFYA22I_cjs = require('./chunk-SGFYA22I.cjs');
+var chunkPINIBEIU_cjs = require('./chunk-PINIBEIU.cjs');
+var chunkFHY3K6PL_cjs = require('./chunk-FHY3K6PL.cjs');
 var chunkFSGEDDF2_cjs = require('./chunk-FSGEDDF2.cjs');
 var chunkAOHJILLU_cjs = require('./chunk-AOHJILLU.cjs');
-var chunkFHY3K6PL_cjs = require('./chunk-FHY3K6PL.cjs');
 var chunkL7L5S2HO_cjs = require('./chunk-L7L5S2HO.cjs');
+var chunkZ3WMDVMR_cjs = require('./chunk-Z3WMDVMR.cjs');
 var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
 var React = require('react');
 var reactDom = require('react-dom');
@@ -215,7 +216,8 @@ function ComposerModelSelector({
       event.preventDefault();
       setEffortHighlight(efforts.length - 1);
     }
-    if (event.key === "ArrowLeft" || event.key === "Backspace") {
+    const backKey = chunkZ3WMDVMR_cjs.isRtl(triggerRef.current) ? "ArrowRight" : "ArrowLeft";
+    if (event.key === backKey || event.key === "Backspace") {
       event.preventDefault();
       setView("models");
     }
@@ -1273,6 +1275,27 @@ var selectorTriggerClasses = chunkS5RVSXDV_cjs.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__namespace.forwardRef(function ChatComposer2({
   onSend,
   value: controlledValue,
@@ -1284,8 +1307,10 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
   maxLength,
   showCharacterCount = false,
   canSendWhenEmpty = false,
+  submitOnEnter = "desktop",
   maxHeight = MAX_INPUT_HEIGHT,
   textareaProps,
+  leadingSlot,
   addMenuItems,
   allowAttachments = true,
   acceptedFileTypes,
@@ -1335,12 +1360,23 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
   const fileInputRef = React__namespace.useRef(null);
   const [addMenuOpen, setAddMenuOpen] = React__namespace.useState(false);
   const [agentMenuOpen, setAgentMenuOpen] = React__namespace.useState(false);
+  const isTouchDevice = React__namespace.useSyncExternalStore(
+    subscribeTouchDevice,
+    getTouchDeviceSnapshot,
+    getServerTouchDeviceSnapshot
+  );
+  const sendsOnEnter = submitOnEnter === "always" || submitOnEnter === "desktop" && !isTouchDevice;
   const replyToId = replyTo?.id;
   React__namespace.useEffect(() => {
     if (replyToId !== void 0) {
       textareaRef.current?.focus();
     }
   }, [replyToId]);
+  React__namespace.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;
@@ -1492,9 +1528,20 @@ var ChatComposer = React__namespace.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();
     }
@@ -1592,6 +1639,12 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
         /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
+            enterKeyHint: sendsOnEnter ? "send" : "enter",
+            inputMode: "text",
+            autoCapitalize: "sentences",
+            autoCorrect: "on",
+            spellCheck: true,
+            dir: "auto",
             ...textareaProps,
             ref: textareaRef,
             "data-slot": "chat-composer-input",
@@ -1622,7 +1675,6 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
             },
             placeholder,
             disabled,
-            autoFocus,
             rows: 1,
             "aria-label": inputLabel,
             ...mention.inputProps,
@@ -1632,7 +1684,9 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
             },
             className: chunkS5RVSXDV_cjs.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.
@@ -1643,54 +1697,73 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
           }
         )
       ] }),
-      showAddMenu && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cells.add, children: /* @__PURE__ */ jsxRuntime.jsxs(
-        chunkSGFYA22I_cjs.Dropdown,
+      (showAddMenu || leadingSlot != null) && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
         {
-          placement: "top-start",
-          open: addMenuOpen,
-          onOpenChange: setAddMenuOpen,
-          trigger: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              "data-slot": "chat-composer-add-button",
-              "aria-label": addMenuLabel,
-              disabled,
-              className: iconButtonClasses,
-              children: /* @__PURE__ */ jsxRuntime.jsx(chunkL7L5S2HO_cjs.Plus, { className: "h-4 w-4", "aria-hidden": "true" })
-            }
+          className: chunkS5RVSXDV_cjs.cn(
+            cells.add,
+            leadingSlot != null && "flex items-center gap-0.5"
           ),
           children: [
-            allowAttachments && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkSGFYA22I_cjs.DropdownItem,
+            leadingSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                icon: /* @__PURE__ */ jsxRuntime.jsx(chunkL7L5S2HO_cjs.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__ */ jsxRuntime.jsx(chunkSGFYA22I_cjs.DropdownSeparator, {}),
-            addMenuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              chunkSGFYA22I_cjs.DropdownItem,
+            showAddMenu && /* @__PURE__ */ jsxRuntime.jsxs(
+              chunkPINIBEIU_cjs.Dropdown,
               {
-                icon: item.icon,
-                disabled: item.disabled,
-                variant: item.variant,
-                checked: item.checked,
-                onClick: () => {
-                  setAddMenuOpen(false);
-                  item.onSelect?.();
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: item.label })
-              },
-              item.id
-            ))
+                placement: "top-start",
+                open: addMenuOpen,
+                onOpenChange: setAddMenuOpen,
+                trigger: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "chat-composer-add-button",
+                    "aria-label": addMenuLabel,
+                    disabled,
+                    className: iconButtonClasses,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkL7L5S2HO_cjs.Plus, { className: "h-4 w-4", "aria-hidden": "true" })
+                  }
+                ),
+                children: [
+                  allowAttachments && /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkPINIBEIU_cjs.DropdownItem,
+                    {
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(chunkL7L5S2HO_cjs.Paperclip, { className: "h-4 w-4", "aria-hidden": "true" }),
+                      onClick: () => {
+                        setAddMenuOpen(false);
+                        fileInputRef.current?.click();
+                      },
+                      children: attachFilesLabel
+                    }
+                  ),
+                  allowAttachments && addMenuItems && addMenuItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkPINIBEIU_cjs.DropdownSeparator, {}),
+                  addMenuItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkPINIBEIU_cjs.DropdownItem,
+                    {
+                      icon: item.icon,
+                      disabled: item.disabled,
+                      variant: item.variant,
+                      checked: item.checked,
+                      onClick: () => {
+                        setAddMenuOpen(false);
+                        item.onSelect?.();
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: item.label })
+                    },
+                    item.id
+                  ))
+                ]
+              }
+            )
           ]
         }
-      ) }),
+      ),
       allowAttachments && /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -1753,6 +1826,7 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
             "data-slot": "chat-composer-stop-button",
             "aria-label": stopLabel,
             disabled,
+            onMouseDown: keepInputFocus,
             onClick: onStop,
             className: chunkS5RVSXDV_cjs.cn(
               iconButtonClasses,
@@ -1774,6 +1848,7 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
             "aria-label": isSending ? sendingLabel : sendLabel,
             "aria-busy": isSending || void 0,
             disabled: !canSend,
+            onMouseDown: keepInputFocus,
             onClick: handleSend,
             className: chunkS5RVSXDV_cjs.cn(
               iconButtonClasses,
@@ -1798,7 +1873,7 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
       className: "flex items-center justify-between gap-2 px-2 pt-1",
       children: [
         showAgentSelector ? /* @__PURE__ */ jsxRuntime.jsx(
-          chunkSGFYA22I_cjs.Dropdown,
+          chunkPINIBEIU_cjs.Dropdown,
           {
             placement: "top-start",
             open: agentMenuOpen,
@@ -1819,7 +1894,7 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
               }
             ),
             children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(
-              chunkSGFYA22I_cjs.DropdownItem,
+              chunkPINIBEIU_cjs.DropdownItem,
               {
                 icon: agent.icon,
                 role: "menuitemradio",
@@ -1857,16 +1932,21 @@ var ChatComposer = React__namespace.forwardRef(function ChatComposer2({
       ]
     }
   );
-  const card = /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "chat-composer-card",
-      className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "chat-composer-card",
+        onMouseDown: focusInputFromCard,
+        className: chunkS5RVSXDV_cjs.cn(
+          "cursor-text rounded-2xl border border-neutral-200 bg-white shadow-sm",
+          "dark:border-[#2e2e30] dark:bg-[#1c1c1e]"
+        ),
+        children: composerCard
+      }
+    )
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -1917,5 +1997,5 @@ exports.generateAttachmentId = generateAttachmentId;
 exports.getFileType = getFileType;
 exports.notifyComposerMigrationOnce = notifyComposerMigrationOnce;
 exports.validateFile = validateFile;
-//# sourceMappingURL=chunk-X4XPNTCZ.cjs.map
-//# sourceMappingURL=chunk-X4XPNTCZ.cjs.map
+//# sourceMappingURL=chunk-U2RS574O.cjs.map
+//# sourceMappingURL=chunk-U2RS574O.cjs.map