@mieweb/ui 0.11.0-dev.0 → 0.11.0-dev.10

package/dist/{chunk-TJ4GWQPM.js → chunk-DAAJ3B2T.js}

@@ -2,7 +2,7 @@ import { Dropdown, DropdownItem, DropdownSeparator } from './chunk-OYUIEJPN.js';
 import { useEscapeKey } from './chunk-T4ME7QCT.js';
 import { useClickOutside } from './chunk-62ZOA6PX.js';
 import { useAnchoredPosition } from './chunk-WSNMQQ4P.js';
-import { AlertTriangle, X2, Paperclip, Plus, Mic, Square, Loader2, ArrowUp, Check, Bot, ChevronUp } from './chunk-BKSPDTX4.js';
+import { AlertTriangle, X2, Paperclip, Plus, Mic, Square, Loader2, ArrowUp, Bot, Check, ChevronUp } from './chunk-BKSPDTX4.js';
 import { isRtl } from './chunk-YVKBXNPK.js';
 import { cn } from './chunk-TQONQSJO.js';
 import * as React from 'react';
@@ -1073,6 +1073,96 @@ function CameraButton({
   ] });
 }
 CameraButton.displayName = "CameraButton";
+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"
+);
+function ComposerSelector({
+  options,
+  value,
+  onChange,
+  actions,
+  label,
+  triggerLabel,
+  icon,
+  disabled = false,
+  triggerSlot = "composer-selector-trigger"
+}) {
+  const [open, setOpen] = React.useState(false);
+  if (disabled && open) setOpen(false);
+  const selected = options.find((option) => option.id === value) ?? null;
+  return /* @__PURE__ */ jsxs(
+    Dropdown,
+    {
+      placement: "top-start",
+      open: open && !disabled,
+      onOpenChange: setOpen,
+      disabled,
+      trigger: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "data-slot": triggerSlot,
+          "aria-label": selected ? `${label}: ${selected.label}` : label,
+          disabled,
+          className: selectorTriggerClasses,
+          children: [
+            selected?.icon ?? icon,
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: triggerLabel ?? selected?.label ?? label }),
+            /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3 shrink-0", "aria-hidden": "true" })
+          ]
+        }
+      ),
+      children: [
+        options.map((option) => /* @__PURE__ */ jsx(
+          DropdownItem,
+          {
+            icon: option.icon,
+            role: "menuitemradio",
+            "aria-checked": option.id === value,
+            onClick: () => {
+              setOpen(false);
+              onChange?.(option.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: option.label }),
+                option.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-neutral-500 dark:text-neutral-400", children: option.description })
+              ] }),
+              option.id === value && /* @__PURE__ */ jsx(
+                Check,
+                {
+                  className: "text-primary-600 dark:text-primary-400 h-4 w-4 shrink-0",
+                  "aria-hidden": "true"
+                }
+              )
+            ] })
+          },
+          option.id
+        )),
+        actions && actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DropdownSeparator, {}),
+          actions.map((action) => /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              icon: action.icon,
+              onClick: () => {
+                setOpen(false);
+                action.onSelect();
+              },
+              children: action.label
+            },
+            action.id
+          ))
+        ] })
+      ]
+    }
+  );
+}
 function activeMentionQuery(value, caret) {
   const upToCaret = value.slice(0, caret);
   const match = /(^|\s)@([^\s@]*)$/.exec(upToCaret);
@@ -1244,14 +1334,6 @@ var iconButtonClasses = cn(
   "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 TOUCH_DEVICE_QUERY = "(hover: none) and (pointer: coarse)";
 var subscribeTouchDevice = (onChange) => {
@@ -1309,6 +1391,7 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
   onAgentChange,
   showModelSelector = false,
   modelSelectorProps,
+  selectorsEndSlot,
   readOnly = false,
   readOnlyMessage = "You have read-only access and cannot send messages.",
   onError,
@@ -1337,7 +1420,6 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
   const textareaRef = React.useRef(null);
   const fileInputRef = React.useRef(null);
   const [addMenuOpen, setAddMenuOpen] = React.useState(false);
-  const [agentMenuOpen, setAgentMenuOpen] = React.useState(false);
   const isTouchDevice = React.useSyncExternalStore(
     subscribeTouchDevice,
     getTouchDeviceSnapshot,
@@ -1545,8 +1627,9 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
   }
   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 showModel = showModelSelector && modelSelectorProps != null;
+  const showSelectorsEnd = showModel || selectorsEndSlot != null;
+  const showSelectorRow = showAgentSelector || showModelSelector || selectorsEndSlot != 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",
@@ -1851,60 +1934,33 @@ var ChatComposer = React.forwardRef(function ChatComposer2({
       className: "flex items-center justify-between gap-2 px-2 pt-1",
       children: [
         showAgentSelector ? /* @__PURE__ */ jsx(
-          Dropdown,
+          ComposerSelector,
           {
-            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
-            ))
+            options: agents,
+            value: selectedAgent,
+            onChange: onAgentChange,
+            label: agentSelectorLabel,
+            icon: /* @__PURE__ */ jsx(Bot, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            disabled,
+            triggerSlot: "chat-composer-agent-trigger"
           }
         ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
-        showModelSelector && modelSelectorProps && /* @__PURE__ */ jsx(
-          ComposerModelSelector,
+        showSelectorsEnd && /* @__PURE__ */ jsxs(
+          "div",
           {
-            variant: "ghost",
-            ...modelSelectorProps,
-            disabled: disabled || modelSelectorProps.disabled
+            "data-slot": "chat-composer-selectors-end",
+            className: "flex min-w-0 items-center gap-1",
+            children: [
+              showModel && /* @__PURE__ */ jsx(
+                ComposerModelSelector,
+                {
+                  variant: "ghost",
+                  ...modelSelectorProps,
+                  disabled: disabled || modelSelectorProps.disabled
+                }
+              ),
+              selectorsEndSlot
+            ]
           }
         )
       ]
@@ -1963,6 +2019,6 @@ function notifyComposerMigrationOnce(surface) {
   );
 }
 
-export { AttachmentPicker, AttachmentPreviewItem, CameraButton, ChatComposer, ComposerModelSelector, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_MAX_FILE_SIZE, DragDropZone, generateAttachmentId, getFileType, notifyComposerMigrationOnce, validateFile };
-//# sourceMappingURL=chunk-TJ4GWQPM.js.map
-//# sourceMappingURL=chunk-TJ4GWQPM.js.map
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, ChatComposer, ComposerModelSelector, ComposerSelector, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_MAX_FILE_SIZE, DragDropZone, generateAttachmentId, getFileType, notifyComposerMigrationOnce, validateFile };
+//# sourceMappingURL=chunk-DAAJ3B2T.js.map
+//# sourceMappingURL=chunk-DAAJ3B2T.js.map