@mieweb/ui 0.7.3 → 0.8.0-dev.1

package/dist/components/SuperChat/index.js

@@ -1,24 +1,25 @@
 import { TextRenderContext } from '../../chunk-I6CY5C6A.js';
 export { TextRenderContext, useTextRenderContext } from '../../chunk-I6CY5C6A.js';
 import { ChatBubble, MCPToolCallDisplay, AITypingIndicator, SparklesIcon, CloseIcon } from '../../chunk-RZJXCI53.js';
-import { MessageComposer } from '../../chunk-EKRT7K2K.js';
-import { Dropdown, DropdownItem } from '../../chunk-HIDV32ZX.js';
+import { MessageComposer } from '../../chunk-UJS3JTVT.js';
+import { Dropdown, DropdownSubmenu, DropdownItem } from '../../chunk-AHUYW673.js';
+import '../../chunk-IQ4KQJAO.js';
 import '../../chunk-XO3WLK65.js';
 import { Avatar } from '../../chunk-DCBMTFLE.js';
-import '../../chunk-IQ4KQJAO.js';
-import '../../chunk-YXCE2HSK.js';
+import '../../chunk-6NZXWKUE.js';
+import '../../chunk-3IMM2PM4.js';
 import { Badge } from '../../chunk-BMSG4NBH.js';
 import '../../chunk-T4ME7QCT.js';
 import '../../chunk-62ZOA6PX.js';
-import '../../chunk-BOOJDRJO.js';
+import '../../chunk-WSNMQQ4P.js';
 import { cn } from '../../chunk-TQONQSJO.js';
-import * as React4 from 'react';
+import * as React2 from 'react';
 import Markdown, { defaultUrlTransform } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { Pencil, Check, Clipboard } from 'lucide-react';
+import { Ellipsis, Check, Clipboard, Pencil } from 'lucide-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 function remarkPreserveLineBreaks() {
@@ -265,7 +266,7 @@ var transformUrl = (url, key, node) => {
   }
   return defaultUrlTransform(url);
 };
-var MarkdownContent = React4.memo(function MarkdownContent2({
+var MarkdownContent = React2.memo(function MarkdownContent2({
   text,
   messageId,
   streaming,
@@ -460,13 +461,19 @@ function filesToComposerAttachments(files) {
     )
   );
 }
-function CopyMenu({ isSelf, markdown, getHtml, getText }) {
-  const [open, setOpen] = React4.useState(false);
-  const [copied, setCopied] = React4.useState(false);
-  const copiedTimer = React4.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.useState(false);
+  const copiedTimer = React2.useRef(
     void 0
   );
-  React4.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
+  React2.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
   const flash = () => {
     setCopied(true);
     window.clearTimeout(copiedTimer.current);
@@ -497,20 +504,110 @@ 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__ */ jsx(DropdownItem, { onClick: () => onSelect(item.onSelect), children: item.description ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start", children: [
+    /* @__PURE__ */ jsx("span", { children: item.label }),
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-normal text-neutral-400", children: item.description })
+  ] }) : item.label });
+}
+function FooterActionButton({
+  action,
+  isSelf
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const onClickCapture = action.submenu ? (e) => {
+    if (e.metaKey || e.ctrlKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      action.onSelect();
+    }
+  } : void 0;
+  const button = /* @__PURE__ */ 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__ */ jsx(
+    Dropdown,
+    {
+      open,
+      onOpenChange: setOpen,
+      placement: isSelf ? "top-end" : "top-start",
+      trigger: button,
+      children: action.submenu.items.map((item) => /* @__PURE__ */ jsx(
+        ActionMenuItem,
+        {
+          item,
+          onSelect: (fn) => {
+            setOpen(false);
+            fn();
+          }
+        },
+        item.id
+      ))
+    }
+  );
+}
+var MessageActionsBar = React2.forwardRef(function MessageActionsBar2({ actions, isSelf }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref,
+      "data-slot": "superchat-message-actions",
       className: cn(
-        "sticky bottom-2 shrink-0 self-end",
+        "flex items-center gap-0.5",
+        isSelf && "justify-end",
+        actionRevealClass
+      ),
+      children: actions.map((action) => /* @__PURE__ */ jsx(FooterActionButton, { action, isSelf }, action.id))
+    }
+  );
+});
+function MessageOverflowMenu({
+  isSelf,
+  actions,
+  footerVisible
+}) {
+  const [open, setOpen] = React2.useState(false);
+  const select = (fn) => {
+    setOpen(false);
+    fn();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "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__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         Dropdown,
         {
           open,
@@ -520,32 +617,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__ */ jsx(Check, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Clipboard, { size: 14, "aria-hidden": "true" })
+              "data-slot": "superchat-overflow-button",
+              "aria-label": "Message actions",
+              className: cn(actionButtonClass, actionRevealClass),
+              children: /* @__PURE__ */ jsx(Ellipsis, { size: 14, "aria-hidden": "true" })
             }
           ),
-          children: [
-            /* @__PURE__ */ jsx(DropdownItem, { onClick: () => run(writeBoth), children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start", children: [
-              /* @__PURE__ */ jsx("span", { children: "Copy" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-normal text-neutral-400", children: "Rich text + Markdown" })
-            ] }) }),
-            /* @__PURE__ */ jsx(
+          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__ */ jsx(DropdownSubmenu, { label: action.submenu.label, children: action.submenu.items.map((item) => /* @__PURE__ */ jsx(ActionMenuItem, { item, onSelect: select }, item.id)) }, action.id)
+            ) : /* @__PURE__ */ jsx(
               DropdownItem,
               {
-                onClick: () => run(() => writeText(markdown || getText())),
-                children: "Copy as Markdown"
-              }
-            ),
-            /* @__PURE__ */ jsx(DropdownItem, { onClick: () => run(() => writeText(getText())), children: "Copy as plain text" })
-          ]
+                onClick: () => select(action.onSelect),
+                children: action.label
+              },
+              action.id
+            )
+          )
         }
       )
     }
   );
 }
-var MessageRow = React4.memo(function MessageRow2({
+var MessageRow = React2.memo(function MessageRow2({
   message,
   participant,
   isSelf,
@@ -553,21 +650,22 @@ var MessageRow = React4.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.useState(false);
-  const [draft, setDraft] = React4.useState(message.text ?? "");
-  const editRef = React4.useRef(null);
-  const bubbleRef = React4.useRef(null);
-  const autosize = React4.useCallback(() => {
+  const [isEditing, setIsEditing] = React2.useState(false);
+  const [draft, setDraft] = React2.useState(message.text ?? "");
+  const editRef = React2.useRef(null);
+  const bubbleRef = React2.useRef(null);
+  const autosize = React2.useCallback(() => {
     const el = editRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
   }, []);
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (!isEditing) return;
     const el = editRef.current;
     if (!el) return;
@@ -575,6 +673,37 @@ var MessageRow = React4.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.useRef(null);
+  const [footerVisible, setFooterVisible] = React2.useState(true);
+  React2.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__ */ jsx(
       "div",
@@ -606,7 +735,6 @@ var MessageRow = React4.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);
@@ -650,18 +778,46 @@ var MessageRow = React4.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__ */ jsx(Check, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(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__ */ jsx(Pencil, { size: 14, "aria-hidden": "true" }),
+        onSelect: startEdit
+      }
+    ] : []
+  ];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -699,17 +855,6 @@ ${block.text}
                     title: `Edited ${formatTime(message.editedAt)}`,
                     children: "(edited)"
                   }
-                ),
-                canEdit && !isEditing && /* @__PURE__ */ 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__ */ jsx(Pencil, { size: 14, "aria-hidden": "true" })
-                  }
                 )
               ]
             }
@@ -722,13 +867,12 @@ ${block.text}
                 isSelf ? "flex-row-reverse" : "flex-row"
               ),
               children: [
-                canCopy && /* @__PURE__ */ jsx(
-                  CopyMenu,
+                hasActions && /* @__PURE__ */ jsx(
+                  MessageOverflowMenu,
                   {
                     isSelf,
-                    markdown: markdownSource,
-                    getHtml: () => bubbleRef.current?.innerHTML ?? "",
-                    getText: () => bubbleRef.current?.textContent ?? ""
+                    actions,
+                    footerVisible
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -841,6 +985,14 @@ ${block.text}
                 )
               ]
             }
+          ),
+          hasActions && /* @__PURE__ */ jsx(
+            MessageActionsBar,
+            {
+              ref: actionsBarRef,
+              actions,
+              isSelf
+            }
           )
         ] })
       ]
@@ -868,11 +1020,12 @@ function VirtualThread({
   onReferenceClick,
   editable,
   onMessageEdited,
+  defaultCopyFormat,
   order,
   conversationId,
   containerProps
 }) {
-  const parentRef = React4.useRef(null);
+  const parentRef = React2.useRef(null);
   const virtualizer = useVirtualizer({
     count: items.length,
     getScrollElement: () => parentRef.current,
@@ -882,7 +1035,7 @@ function VirtualThread({
     getItemKey: (index) => items[index]?.id ?? index
   });
   const count = items.length;
-  React4.useEffect(() => {
+  React2.useEffect(() => {
     if (count === 0) return;
     if (order === "desc") {
       virtualizer.scrollToIndex(0, { align: "start" });
@@ -924,7 +1077,8 @@ function VirtualThread({
                 linkBuilder,
                 onReferenceClick,
                 editable,
-                onMessageEdited
+                onMessageEdited,
+                defaultCopyFormat
               }
             ) })
           },
@@ -945,6 +1099,7 @@ function SuperChat({
   order = "asc",
   virtualized = false,
   linkBuilder,
+  defaultCopyFormat,
   className,
   onMessageSent,
   onMessageEdited,
@@ -952,35 +1107,35 @@ function SuperChat({
   onReferenceClick,
   onBack
 }) {
-  const headingId = React4.useId();
-  const renderText = React4.useMemo(
+  const headingId = React2.useId();
+  const renderText = React2.useMemo(
     () => renderTextContent ?? createMarkdownRenderer({
       plugins: renderPlugins,
       trusted: trustedContent
     }),
     [renderTextContent, renderPlugins, trustedContent]
   );
-  const threadRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const threadRef = React2.useRef(null);
+  React2.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.useMemo(() => {
+  const participantById = React2.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     conversation.participants.forEach((p) => map.set(p.id, p));
     return map;
   }, [conversation]);
-  const orderedThread = React4.useMemo(() => {
+  const orderedThread = React2.useMemo(() => {
     const sorted = [...conversation.thread].sort(byTime);
     return order === "desc" ? sorted.reverse() : sorted;
   }, [conversation, order]);
-  const onMessageEditedRef = React4.useRef(onMessageEdited);
+  const onMessageEditedRef = React2.useRef(onMessageEdited);
   onMessageEditedRef.current = onMessageEdited;
-  const conversationRef = React4.useRef(conversation);
+  const conversationRef = React2.useRef(conversation);
   conversationRef.current = conversation;
-  const handleMessageEdited = React4.useCallback(
+  const handleMessageEdited = React2.useCallback(
     (messageId, text) => {
       onMessageEditedRef.current?.(messageId, text, {
         conversation: conversationRef.current
@@ -989,7 +1144,7 @@ function SuperChat({
     []
   );
   const editable = !readOnly && !!onMessageEdited;
-  const mentionOptions = React4.useMemo(
+  const mentionOptions = React2.useMemo(
     () => conversation.participants.filter((p) => p.kind !== "system").map((p) => ({
       id: p.id,
       label: p.name,
@@ -999,11 +1154,11 @@ function SuperChat({
     })),
     [conversation.participants]
   );
-  const composerAccept = React4.useMemo(
+  const composerAccept = React2.useMemo(
     () => acceptTokensFor(acceptedFileTypes),
     [acceptedFileTypes]
   );
-  const handleComposerSend = React4.useCallback(
+  const handleComposerSend = React2.useCallback(
     async (message) => {
       const text = message.content;
       const mentions = detectMentions(text, conversation.participants);
@@ -1101,6 +1256,7 @@ function SuperChat({
             onReferenceClick,
             editable,
             onMessageEdited: handleMessageEdited,
+            defaultCopyFormat,
             order,
             conversationId: conversation.id,
             containerProps: {
@@ -1133,7 +1289,8 @@ function SuperChat({
                 linkBuilder,
                 onReferenceClick,
                 editable,
-                onMessageEdited: handleMessageEdited
+                onMessageEdited: handleMessageEdited,
+                defaultCopyFormat
               },
               m.id
             ))
@@ -1164,12 +1321,12 @@ function SuperChatConversations({
   onConversationOpened,
   onNewConversation
 }) {
-  const [internalActive, setInternalActive] = React4.useState(
+  const [internalActive, setInternalActive] = React2.useState(
     defaultActiveConversationId ?? conversations[0]?.id
   );
   const requestedId = activeConversationId ?? internalActive;
   const activeId = conversations.some((c) => c.id === requestedId) ? requestedId : conversations[0]?.id;
-  const sortedConversations = React4.useMemo(
+  const sortedConversations = React2.useMemo(
     () => [...conversations].sort((a, b) => lastActivityOf(b) - lastActivityOf(a)),
     [conversations]
   );
@@ -1249,6 +1406,7 @@ function SuperChatInbox({
   virtualized,
   showSidebar = true,
   linkBuilder,
+  defaultCopyFormat,
   className,
   onMessageSent,
   onMessageEdited,
@@ -1257,13 +1415,13 @@ function SuperChatInbox({
   onNewConversation,
   onReferenceClick
 }) {
-  const [internalActive, setInternalActive] = React4.useState(
+  const [internalActive, setInternalActive] = React2.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.useState("list");
+  const [mobileView, setMobileView] = React2.useState("list");
   const handleOpen = (c) => {
     if (activeConversationId === void 0) setInternalActive(c.id);
     setMobileView("chat");
@@ -1306,6 +1464,7 @@ function SuperChatInbox({
             order,
             virtualized,
             linkBuilder,
+            defaultCopyFormat,
             onMessageSent,
             onMessageEdited,
             onConversationClosed,