@mieweb/ui 0.8.0 → 0.9.0-dev.1

package/dist/components/SuperChat/index.cjs

@@ -1,20 +1,21 @@
 'use strict';
 
 var chunkJFLC7SHM_cjs = require('../../chunk-JFLC7SHM.cjs');
-var chunkXS35KPBZ_cjs = require('../../chunk-XS35KPBZ.cjs');
-var chunk26DPQUSB_cjs = require('../../chunk-26DPQUSB.cjs');
-var chunkBOW7ZGI2_cjs = require('../../chunk-BOW7ZGI2.cjs');
+var chunk2A2FLQJC_cjs = require('../../chunk-2A2FLQJC.cjs');
+require('../../chunk-5VXRKOPR.cjs');
+var chunk4SM3I7WE_cjs = require('../../chunk-4SM3I7WE.cjs');
+var chunkJEIW7BSV_cjs = require('../../chunk-JEIW7BSV.cjs');
 require('../../chunk-VBWRH4UW.cjs');
-require('../../chunk-ZZJ4ZVYR.cjs');
-var chunkU3JU6BI5_cjs = require('../../chunk-U3JU6BI5.cjs');
+require('../../chunk-PJ6CC53R.cjs');
 require('../../chunk-I44YNYI6.cjs');
 require('../../chunk-Z5S5JEJD.cjs');
+require('../../chunk-L7L5S2HO.cjs');
 var chunkYVL3XATO_cjs = require('../../chunk-YVL3XATO.cjs');
+var chunkS5RVSXDV_cjs = require('../../chunk-S5RVSXDV.cjs');
 require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-FSGEDDF2.cjs');
-require('../../chunk-MYFZYUPR.cjs');
-var chunkS5RVSXDV_cjs = require('../../chunk-S5RVSXDV.cjs');
-var React4 = require('react');
+require('../../chunk-AOHJILLU.cjs');
+var React2 = require('react');
 var Markdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 var rehypeSanitize = require('rehype-sanitize');
@@ -43,7 +44,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 var Markdown__default = /*#__PURE__*/_interopDefault(Markdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 var rehypeSanitize__default = /*#__PURE__*/_interopDefault(rehypeSanitize);
@@ -178,7 +179,7 @@ function baseComponents() {
       {
         ...props,
         className: chunkS5RVSXDV_cjs.cn(
-          "w-full border-collapse text-sm [&_td]:border [&_td]:border-neutral-200 [&_td]:px-2 [&_td]:py-1 dark:[&_td]:border-neutral-700 [&_th]:border [&_th]:border-neutral-200 [&_th]:px-2 [&_th]:py-1 [&_th]:text-left dark:[&_th]:border-neutral-700",
+          "w-full border-collapse text-sm [&_td]:border [&_td]:border-neutral-200 [&_td]:px-2 [&_td]:py-1 dark:[&_td]:border-neutral-700 [&_th]:border [&_th]:border-neutral-200 [&_th]:px-2 [&_th]:py-1 [&_th]:text-start dark:[&_th]:border-neutral-700",
           props.className
         )
       }
@@ -292,7 +293,7 @@ var transformUrl = (url, key, node) => {
   }
   return Markdown.defaultUrlTransform(url);
 };
-var MarkdownContent = React4__namespace.memo(function MarkdownContent2({
+var MarkdownContent = React2__namespace.memo(function MarkdownContent2({
   text,
   messageId,
   streaming,
@@ -396,13 +397,13 @@ function ParticipantAvatar({
   const isAgent = participant?.kind === "agent";
   const backgroundColor = participant?.color ?? (isAgent ? "var(--mieweb-primary-700, #1f2937)" : "#64748b");
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkU3JU6BI5_cjs.Avatar,
+    chunkJEIW7BSV_cjs.Avatar,
     {
       size: "xs",
       src: participant?.avatar,
       alt: "",
       name: participant?.name ?? "?",
-      fallback: isAgent ? /* @__PURE__ */ jsxRuntime.jsx(chunkXS35KPBZ_cjs.SparklesIcon, { size: "sm" }) : void 0,
+      fallback: isAgent ? /* @__PURE__ */ jsxRuntime.jsx(chunk2A2FLQJC_cjs.SparklesIcon, { size: "sm" }) : void 0,
       style: { backgroundColor },
       "aria-hidden": "true",
       className: "shrink-0"
@@ -487,13 +488,19 @@ function filesToComposerAttachments(files) {
     )
   );
 }
-function CopyMenu({ isSelf, markdown, getHtml, getText }) {
-  const [open, setOpen] = React4__namespace.useState(false);
-  const [copied, setCopied] = React4__namespace.useState(false);
-  const copiedTimer = React4__namespace.useRef(
+var actionRevealClass = "opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100 [@media(pointer:coarse)]:opacity-100";
+var actionButtonClass = "rounded p-1 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200";
+function useMessageCopy({
+  markdown,
+  getHtml,
+  getText,
+  defaultFormat
+}) {
+  const [copied, setCopied] = React2__namespace.useState(false);
+  const copiedTimer = React2__namespace.useRef(
     void 0
   );
-  React4__namespace.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
+  React2__namespace.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
   const flash = () => {
     setCopied(true);
     window.clearTimeout(copiedTimer.current);
@@ -524,21 +531,111 @@ function CopyMenu({ isSelf, markdown, getHtml, getText }) {
     }
   };
   const run = (fn) => {
-    setOpen(false);
     void fn().then(flash, () => {
     });
   };
+  const copyRich = () => run(writeBoth);
+  const copyMarkdown = () => run(() => writeText(markdown || getText()));
+  const copyPlain = () => run(() => writeText(getText()));
+  const copyDefault = defaultFormat === "markdown" ? copyMarkdown : defaultFormat === "plain" ? copyPlain : copyRich;
+  return { copied, copyDefault, copyRich, copyMarkdown, copyPlain };
+}
+function ActionMenuItem({
+  item,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk4SM3I7WE_cjs.DropdownItem, { onClick: () => onSelect(item.onSelect), children: item.description ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-start", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-normal text-neutral-400", children: item.description })
+  ] }) : item.label });
+}
+function FooterActionButton({
+  action,
+  isSelf
+}) {
+  const [open, setOpen] = React2__namespace.useState(false);
+  const onClickCapture = action.submenu ? (e) => {
+    if (e.metaKey || e.ctrlKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      action.onSelect();
+    }
+  } : void 0;
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": `superchat-action-${action.id}`,
+      "aria-label": action.label,
+      title: action.title ?? action.label,
+      onClick: action.submenu ? void 0 : action.onSelect,
+      onClickCapture,
+      className: actionButtonClass,
+      children: action.icon
+    }
+  );
+  if (!action.submenu) return button;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunk4SM3I7WE_cjs.Dropdown,
+    {
+      open,
+      onOpenChange: setOpen,
+      placement: isSelf ? "top-end" : "top-start",
+      trigger: button,
+      children: action.submenu.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        ActionMenuItem,
+        {
+          item,
+          onSelect: (fn) => {
+            setOpen(false);
+            fn();
+          }
+        },
+        item.id
+      ))
+    }
+  );
+}
+var MessageActionsBar = React2__namespace.forwardRef(function MessageActionsBar2({ actions, isSelf }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "superchat-message-actions",
+      className: chunkS5RVSXDV_cjs.cn(
+        "flex items-center gap-0.5",
+        isSelf && "justify-end",
+        actionRevealClass
+      ),
+      children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(FooterActionButton, { action, isSelf }, action.id))
+    }
+  );
+});
+function MessageOverflowMenu({
+  isSelf,
+  actions,
+  footerVisible
+}) {
+  const [open, setOpen] = React2__namespace.useState(false);
+  const select = (fn) => {
+    setOpen(false);
+    fn();
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: chunkS5RVSXDV_cjs.cn(
-        "sticky bottom-2 shrink-0 self-end",
+        "sticky bottom-2 shrink-0 self-end transition-opacity",
         // Rich content (e.g. NITRO tables) layers internals up to z-50, so the
         // open menu's stacking context must clear that.
-        open ? "z-[60]" : "z-10"
+        open ? "z-[60]" : "z-10",
+        // Hand off to the footer bar when it's visible. `invisible` (not
+        // just opacity) drops the hidden button from the tab order so
+        // keyboard users can't focus an unseen control.
+        footerVisible && !open && "pointer-events-none invisible opacity-0"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        chunkBOW7ZGI2_cjs.Dropdown,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        chunk4SM3I7WE_cjs.Dropdown,
         {
           open,
           onOpenChange: setOpen,
@@ -547,32 +644,32 @@ function CopyMenu({ isSelf, markdown, getHtml, getText }) {
             "button",
             {
               type: "button",
-              "data-slot": "superchat-copy-button",
-              "aria-label": "Copy message",
-              className: "rounded p-1 text-neutral-400 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 hover:text-neutral-600 focus-visible:opacity-100 dark:hover:text-neutral-200",
-              children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clipboard, { size: 14, "aria-hidden": "true" })
+              "data-slot": "superchat-overflow-button",
+              "aria-label": "Message actions",
+              className: chunkS5RVSXDV_cjs.cn(actionButtonClass, actionRevealClass),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { size: 14, "aria-hidden": "true" })
             }
           ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunkBOW7ZGI2_cjs.DropdownItem, { onClick: () => run(writeBoth), children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-start", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Copy" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-normal text-neutral-400", children: "Rich text + Markdown" })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              chunkBOW7ZGI2_cjs.DropdownItem,
+          children: actions.map(
+            (action) => action.submenu ? (
+              // Actions with variants collapse to just their submenu — a
+              // top-level default item would duplicate the flyout's options.
+              /* @__PURE__ */ jsxRuntime.jsx(chunk4SM3I7WE_cjs.DropdownSubmenu, { label: action.submenu.label, children: action.submenu.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ActionMenuItem, { item, onSelect: select }, item.id)) }, action.id)
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              chunk4SM3I7WE_cjs.DropdownItem,
               {
-                onClick: () => run(() => writeText(markdown || getText())),
-                children: "Copy as Markdown"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkBOW7ZGI2_cjs.DropdownItem, { onClick: () => run(() => writeText(getText())), children: "Copy as plain text" })
-          ]
+                onClick: () => select(action.onSelect),
+                children: action.label
+              },
+              action.id
+            )
+          )
         }
       )
     }
   );
 }
-var MessageRow = React4__namespace.memo(function MessageRow2({
+var MessageRow = React2__namespace.memo(function MessageRow2({
   message,
   participant,
   isSelf,
@@ -580,21 +677,22 @@ var MessageRow = React4__namespace.memo(function MessageRow2({
   linkBuilder,
   onReferenceClick,
   editable,
-  onMessageEdited
+  onMessageEdited,
+  defaultCopyFormat = "rich"
 }) {
   const streaming = message.status === "streaming";
   const hasBody = !!message.text || (message.content?.length ?? 0) > 0;
-  const [isEditing, setIsEditing] = React4__namespace.useState(false);
-  const [draft, setDraft] = React4__namespace.useState(message.text ?? "");
-  const editRef = React4__namespace.useRef(null);
-  const bubbleRef = React4__namespace.useRef(null);
-  const autosize = React4__namespace.useCallback(() => {
+  const [isEditing, setIsEditing] = React2__namespace.useState(false);
+  const [draft, setDraft] = React2__namespace.useState(message.text ?? "");
+  const editRef = React2__namespace.useRef(null);
+  const bubbleRef = React2__namespace.useRef(null);
+  const autosize = React2__namespace.useCallback(() => {
     const el = editRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
   }, []);
-  React4__namespace.useEffect(() => {
+  React2__namespace.useEffect(() => {
     if (!isEditing) return;
     const el = editRef.current;
     if (!el) return;
@@ -602,6 +700,37 @@ var MessageRow = React4__namespace.memo(function MessageRow2({
     el.setSelectionRange(el.value.length, el.value.length);
     autosize();
   }, [isEditing, autosize]);
+  const canEdit = !!editable && isSelf && !streaming && typeof message.text === "string" && !message.content?.length;
+  const markdownSource = typeof message.text === "string" && message.text ? message.text : message.content?.map((block) => {
+    if (block.type === "code" && block.text) {
+      return `\`\`\`${block.language ?? ""}
+${block.text}
+\`\`\``;
+    }
+    if ((block.type === "text" || block.type === "thinking") && block.text) {
+      return block.text;
+    }
+    return "";
+  }).filter(Boolean).join("\n\n") ?? "";
+  const canCopy = !isEditing && (!!message.content?.length || typeof message.text === "string" && message.text.length > 0);
+  const hasActions = canCopy || canEdit && !isEditing;
+  const copy = useMessageCopy({
+    markdown: markdownSource,
+    getHtml: () => bubbleRef.current?.innerHTML ?? "",
+    getText: () => bubbleRef.current?.textContent ?? "",
+    defaultFormat: defaultCopyFormat
+  });
+  const actionsBarRef = React2__namespace.useRef(null);
+  const [footerVisible, setFooterVisible] = React2__namespace.useState(true);
+  React2__namespace.useEffect(() => {
+    const el = actionsBarRef.current;
+    if (!el || typeof globalThis.IntersectionObserver === "undefined") return;
+    const observer = new globalThis.IntersectionObserver(([entry]) => {
+      setFooterVisible(entry?.isIntersecting ?? false);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasActions]);
   if (message.type === "system") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -633,7 +762,6 @@ var MessageRow = React4__namespace.memo(function MessageRow2({
   const accent = participant?.color;
   const accentTextColor = accessibleAccentTextColor(accent);
   const authorName = participant?.name ?? "Unknown";
-  const canEdit = !!editable && isSelf && !streaming && typeof message.text === "string" && !message.content?.length;
   const startEdit = () => {
     setDraft(message.text ?? "");
     setIsEditing(true);
@@ -677,18 +805,46 @@ var MessageRow = React4__namespace.memo(function MessageRow2({
       requestAnimationFrame(autosize);
     });
   };
-  const markdownSource = typeof message.text === "string" && message.text ? message.text : message.content?.map((block) => {
-    if (block.type === "code" && block.text) {
-      return `\`\`\`${block.language ?? ""}
-${block.text}
-\`\`\``;
-    }
-    if ((block.type === "text" || block.type === "thinking") && block.text) {
-      return block.text;
-    }
-    return "";
-  }).filter(Boolean).join("\n\n") ?? "";
-  const canCopy = !isEditing && (!!message.content?.length || typeof message.text === "string" && message.text.length > 0);
+  const actions = [
+    ...canCopy ? [
+      {
+        id: "copy",
+        label: "Copy message",
+        title: "Copy message (\u2318/Ctrl-click: default format)",
+        icon: copy.copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clipboard, { size: 14, "aria-hidden": "true" }),
+        onSelect: copy.copyDefault,
+        submenu: {
+          label: "Copy as",
+          items: [
+            {
+              id: "copy-rich",
+              label: "Copy as rich text",
+              description: "Rich text + Markdown",
+              onSelect: copy.copyRich
+            },
+            {
+              id: "copy-markdown",
+              label: "Copy as Markdown",
+              onSelect: copy.copyMarkdown
+            },
+            {
+              id: "copy-plain",
+              label: "Copy as plain text",
+              onSelect: copy.copyPlain
+            }
+          ]
+        }
+      }
+    ] : [],
+    ...canEdit && !isEditing ? [
+      {
+        id: "edit",
+        label: "Edit message",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { size: 14, "aria-hidden": "true" }),
+        onSelect: startEdit
+      }
+    ] : []
+  ];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -726,17 +882,6 @@ ${block.text}
                     title: `Edited ${formatTime(message.editedAt)}`,
                     children: "(edited)"
                   }
-                ),
-                canEdit && !isEditing && /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-slot": "superchat-edit-button",
-                    onClick: startEdit,
-                    "aria-label": "Edit message",
-                    className: "rounded p-0.5 text-neutral-400 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 hover:text-neutral-600 focus-visible:opacity-100 dark:hover:text-neutral-200",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { size: 14, "aria-hidden": "true" })
-                  }
                 )
               ]
             }
@@ -749,17 +894,16 @@ ${block.text}
                 isSelf ? "flex-row-reverse" : "flex-row"
               ),
               children: [
-                canCopy && /* @__PURE__ */ jsxRuntime.jsx(
-                  CopyMenu,
+                hasActions && /* @__PURE__ */ jsxRuntime.jsx(
+                  MessageOverflowMenu,
                   {
                     isSelf,
-                    markdown: markdownSource,
-                    getHtml: () => bubbleRef.current?.innerHTML ?? "",
-                    getText: () => bubbleRef.current?.textContent ?? ""
+                    actions,
+                    footerVisible
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkXS35KPBZ_cjs.ChatBubble,
+                  chunk2A2FLQJC_cjs.ChatBubble,
                   {
                     ref: bubbleRef,
                     "data-slot": "superchat-bubble",
@@ -822,7 +966,7 @@ ${block.text}
                     ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                       message.content?.map((block, i) => {
                         if (block.type === "tool_use" && block.toolCall) {
-                          return /* @__PURE__ */ jsxRuntime.jsx(chunkXS35KPBZ_cjs.MCPToolCallDisplay, { toolCall: block.toolCall }, i);
+                          return /* @__PURE__ */ jsxRuntime.jsx(chunk2A2FLQJC_cjs.MCPToolCallDisplay, { toolCall: block.toolCall }, i);
                         }
                         if ((block.type === "text" || block.type === "thinking") && block.text) {
                           return /* @__PURE__ */ jsxRuntime.jsx(
@@ -862,12 +1006,20 @@ ${block.text}
                         streaming,
                         role: participant?.kind === "human" ? "user" : "assistant"
                       }) }),
-                      streaming && !hasBody && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXS35KPBZ_cjs.AITypingIndicator, {}) })
+                      streaming && !hasBody && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunk2A2FLQJC_cjs.AITypingIndicator, {}) })
                     ] })
                   }
                 )
               ]
             }
+          ),
+          hasActions && /* @__PURE__ */ jsxRuntime.jsx(
+            MessageActionsBar,
+            {
+              ref: actionsBarRef,
+              actions,
+              isSelf
+            }
           )
         ] })
       ]
@@ -875,7 +1027,7 @@ ${block.text}
   );
 });
 var sidebarItem = classVarianceAuthority.cva(
-  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors",
+  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-start text-sm transition-colors",
   {
     variants: {
       active: {
@@ -895,11 +1047,12 @@ function VirtualThread({
   onReferenceClick,
   editable,
   onMessageEdited,
+  defaultCopyFormat,
   order,
   conversationId,
   containerProps
 }) {
-  const parentRef = React4__namespace.useRef(null);
+  const parentRef = React2__namespace.useRef(null);
   const virtualizer = reactVirtual.useVirtualizer({
     count: items.length,
     getScrollElement: () => parentRef.current,
@@ -909,7 +1062,7 @@ function VirtualThread({
     getItemKey: (index) => items[index]?.id ?? index
   });
   const count = items.length;
-  React4__namespace.useEffect(() => {
+  React2__namespace.useEffect(() => {
     if (count === 0) return;
     if (order === "desc") {
       virtualizer.scrollToIndex(0, { align: "start" });
@@ -951,7 +1104,8 @@ function VirtualThread({
                 linkBuilder,
                 onReferenceClick,
                 editable,
-                onMessageEdited
+                onMessageEdited,
+                defaultCopyFormat
               }
             ) })
           },
@@ -972,6 +1126,7 @@ function SuperChat({
   order = "asc",
   virtualized = false,
   linkBuilder,
+  defaultCopyFormat,
   className,
   onMessageSent,
   onMessageEdited,
@@ -979,35 +1134,35 @@ function SuperChat({
   onReferenceClick,
   onBack
 }) {
-  const headingId = React4__namespace.useId();
-  const renderText = React4__namespace.useMemo(
+  const headingId = React2__namespace.useId();
+  const renderText = React2__namespace.useMemo(
     () => renderTextContent ?? createMarkdownRenderer({
       plugins: renderPlugins,
       trusted: trustedContent
     }),
     [renderTextContent, renderPlugins, trustedContent]
   );
-  const threadRef = React4__namespace.useRef(null);
-  React4__namespace.useEffect(() => {
+  const threadRef = React2__namespace.useRef(null);
+  React2__namespace.useEffect(() => {
     if (virtualized) return;
     const el = threadRef.current;
     if (!el) return;
     el.scrollTop = order === "desc" ? 0 : el.scrollHeight;
   }, [conversation.thread.length, conversation.id, order, virtualized]);
-  const participantById = React4__namespace.useMemo(() => {
+  const participantById = React2__namespace.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     conversation.participants.forEach((p) => map.set(p.id, p));
     return map;
   }, [conversation]);
-  const orderedThread = React4__namespace.useMemo(() => {
+  const orderedThread = React2__namespace.useMemo(() => {
     const sorted = [...conversation.thread].sort(byTime);
     return order === "desc" ? sorted.reverse() : sorted;
   }, [conversation, order]);
-  const onMessageEditedRef = React4__namespace.useRef(onMessageEdited);
+  const onMessageEditedRef = React2__namespace.useRef(onMessageEdited);
   onMessageEditedRef.current = onMessageEdited;
-  const conversationRef = React4__namespace.useRef(conversation);
+  const conversationRef = React2__namespace.useRef(conversation);
   conversationRef.current = conversation;
-  const handleMessageEdited = React4__namespace.useCallback(
+  const handleMessageEdited = React2__namespace.useCallback(
     (messageId, text) => {
       onMessageEditedRef.current?.(messageId, text, {
         conversation: conversationRef.current
@@ -1016,7 +1171,7 @@ function SuperChat({
     []
   );
   const editable = !readOnly && !!onMessageEdited;
-  const mentionOptions = React4__namespace.useMemo(
+  const mentionOptions = React2__namespace.useMemo(
     () => conversation.participants.filter((p) => p.kind !== "system").map((p) => ({
       id: p.id,
       label: p.name,
@@ -1026,18 +1181,33 @@ function SuperChat({
     })),
     [conversation.participants]
   );
-  const composerAccept = React4__namespace.useMemo(
+  const composerAccept = React2__namespace.useMemo(
     () => acceptTokensFor(acceptedFileTypes),
     [acceptedFileTypes]
   );
-  const handleComposerSend = React4__namespace.useCallback(
+  const [draft, setDraft] = React2__namespace.useState("");
+  const draftEpochRef = React2__namespace.useRef(0);
+  const handleDraftChange = React2__namespace.useCallback((value) => {
+    draftEpochRef.current += 1;
+    setDraft(value);
+  }, []);
+  const handleComposerSend = React2__namespace.useCallback(
     async (message) => {
-      const text = message.content;
-      const mentions = detectMentions(text, conversation.participants);
-      const attachments = await filesToComposerAttachments(
-        message.attachments ?? []
-      );
-      onMessageSent?.(text, { conversation, mentions, attachments });
+      const epoch = draftEpochRef.current;
+      try {
+        const text = message.content;
+        const mentions = detectMentions(text, conversation.participants);
+        const attachments = await filesToComposerAttachments(
+          message.attachments ?? []
+        );
+        await Promise.resolve(
+          onMessageSent?.(text, { conversation, mentions, attachments })
+        );
+      } catch {
+        if (draftEpochRef.current === epoch) {
+          setDraft(message.content);
+        }
+      }
     },
     [conversation, onMessageSent]
   );
@@ -1065,7 +1235,7 @@ function SuperChat({
                     type: "button",
                     onClick: onBack,
                     "aria-label": "Back to conversations",
-                    className: "-ml-1 shrink-0 rounded-md p-1 text-neutral-500 hover:bg-neutral-100 sm:hidden dark:text-neutral-300 dark:hover:bg-neutral-800",
+                    className: "-ms-1 shrink-0 rounded-md p-1 text-neutral-500 hover:bg-neutral-100 sm:hidden dark:text-neutral-300 dark:hover:bg-neutral-800",
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       "svg",
                       {
@@ -1111,7 +1281,7 @@ function SuperChat({
                   onClick: () => onConversationClosed(conversation),
                   "aria-label": "Close conversation",
                   className: "rounded-md p-1 text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(chunkXS35KPBZ_cjs.CloseIcon, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(chunk2A2FLQJC_cjs.CloseIcon, {})
                 }
               )
             ]
@@ -1128,6 +1298,7 @@ function SuperChat({
             onReferenceClick,
             editable,
             onMessageEdited: handleMessageEdited,
+            defaultCopyFormat,
             order,
             conversationId: conversation.id,
             containerProps: {
@@ -1160,23 +1331,27 @@ function SuperChat({
                 linkBuilder,
                 onReferenceClick,
                 editable,
-                onMessageEdited: handleMessageEdited
+                onMessageEdited: handleMessageEdited,
+                defaultCopyFormat
               },
               m.id
             ))
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk26DPQUSB_cjs.MessageComposer,
+          chunk2A2FLQJC_cjs.ChatComposer,
           {
+            value: draft,
+            onValueChange: handleDraftChange,
             onSend: handleComposerSend,
             disabled: readOnly,
             placeholder: readOnly ? "Read-only conversation" : "Type a message\u2026 use @ to address an agent",
             mentionOptions,
-            showAttachmentPicker: !readOnly,
-            showCameraButton: false,
+            allowAttachments: !readOnly,
             acceptedFileTypes: composerAccept,
-            maxLength: 1e5
+            maxFileSize: 25 * 1024 * 1024,
+            maxLength: 1e5,
+            inputLabel: "Message"
           }
         )
       ]
@@ -1191,12 +1366,12 @@ function SuperChatConversations({
   onConversationOpened,
   onNewConversation
 }) {
-  const [internalActive, setInternalActive] = React4__namespace.useState(
+  const [internalActive, setInternalActive] = React2__namespace.useState(
     defaultActiveConversationId ?? conversations[0]?.id
   );
   const requestedId = activeConversationId ?? internalActive;
   const activeId = conversations.some((c) => c.id === requestedId) ? requestedId : conversations[0]?.id;
-  const sortedConversations = React4__namespace.useMemo(
+  const sortedConversations = React2__namespace.useMemo(
     () => [...conversations].sort((a, b) => lastActivityOf(b) - lastActivityOf(a)),
     [conversations]
   );
@@ -1210,7 +1385,7 @@ function SuperChatConversations({
       "data-slot": "superchat-conversations",
       "aria-label": "Conversations",
       className: chunkS5RVSXDV_cjs.cn(
-        "flex w-64 shrink-0 flex-col border-r border-neutral-200 dark:border-neutral-700",
+        "flex w-64 shrink-0 flex-col border-e border-neutral-200 dark:border-neutral-700",
         className
       ),
       children: [
@@ -1248,7 +1423,7 @@ function SuperChatConversations({
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate font-medium", children: c.title }),
                       last?.text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-neutral-600 dark:text-neutral-400", children: last.text })
                     ] }),
-                    !!c.unread && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bg-primary-600 ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-semibold text-white", children: [
+                    !!c.unread && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "bg-primary-600 ms-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-semibold text-white", children: [
                       c.unread,
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: " unread messages" })
                     ] })
@@ -1276,6 +1451,7 @@ function SuperChatInbox({
   virtualized,
   showSidebar = true,
   linkBuilder,
+  defaultCopyFormat,
   className,
   onMessageSent,
   onMessageEdited,
@@ -1284,13 +1460,13 @@ function SuperChatInbox({
   onNewConversation,
   onReferenceClick
 }) {
-  const [internalActive, setInternalActive] = React4__namespace.useState(
+  const [internalActive, setInternalActive] = React2__namespace.useState(
     defaultActiveConversationId ?? conversations[0]?.id
   );
   const requestedId = activeConversationId ?? internalActive;
   const active = conversations.find((c) => c.id === requestedId) ?? conversations[0];
   const activeId = active?.id;
-  const [mobileView, setMobileView] = React4__namespace.useState("list");
+  const [mobileView, setMobileView] = React2__namespace.useState("list");
   const handleOpen = (c) => {
     if (activeConversationId === void 0) setInternalActive(c.id);
     setMobileView("chat");
@@ -1333,6 +1509,7 @@ function SuperChatInbox({
             order,
             virtualized,
             linkBuilder,
+            defaultCopyFormat,
             onMessageSent,
             onMessageEdited,
             onConversationClosed,