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

package/dist/components/SuperChat/index.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
 var chunkJFLC7SHM_cjs = require('../../chunk-JFLC7SHM.cjs');
-var chunkWIAQQNFU_cjs = require('../../chunk-WIAQQNFU.cjs');
-var chunkX4XPNTCZ_cjs = require('../../chunk-X4XPNTCZ.cjs');
-var chunkSGFYA22I_cjs = require('../../chunk-SGFYA22I.cjs');
+var chunkMYHV2ND3_cjs = require('../../chunk-MYHV2ND3.cjs');
+var chunkLJZKEMAH_cjs = require('../../chunk-LJZKEMAH.cjs');
+var chunkVYPPQPSZ_cjs = require('../../chunk-VYPPQPSZ.cjs');
 var chunkJEIW7BSV_cjs = require('../../chunk-JEIW7BSV.cjs');
 require('../../chunk-VBWRH4UW.cjs');
+var chunkVPTASZ2O_cjs = require('../../chunk-VPTASZ2O.cjs');
 require('../../chunk-PJ6CC53R.cjs');
 require('../../chunk-I44YNYI6.cjs');
 require('../../chunk-Z5S5JEJD.cjs');
@@ -13,11 +14,12 @@ require('../../chunk-FSGEDDF2.cjs');
 require('../../chunk-AOHJILLU.cjs');
 require('../../chunk-FHY3K6PL.cjs');
 require('../../chunk-L7L5S2HO.cjs');
+var chunk6HFFWEM3_cjs = require('../../chunk-6HFFWEM3.cjs');
 var chunkYVL3XATO_cjs = require('../../chunk-YVL3XATO.cjs');
-require('../../chunk-NV2CWBI2.cjs');
+var chunkIEY3ZJIT_cjs = require('../../chunk-IEY3ZJIT.cjs');
 var chunkS5RVSXDV_cjs = require('../../chunk-S5RVSXDV.cjs');
 require('../../chunk-EUAMEVVI.cjs');
-var React2 = require('react');
+var React3 = require('react');
 var Markdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 var rehypeSanitize = require('rehype-sanitize');
@@ -46,7 +48,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var Markdown__default = /*#__PURE__*/_interopDefault(Markdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 var rehypeSanitize__default = /*#__PURE__*/_interopDefault(rehypeSanitize);
@@ -295,7 +297,7 @@ var transformUrl = (url, key, node) => {
   }
   return Markdown.defaultUrlTransform(url);
 };
-var MarkdownContent = React2__namespace.memo(function MarkdownContent2({
+var MarkdownContent = React3__namespace.memo(function MarkdownContent2({
   text,
   messageId,
   streaming,
@@ -405,7 +407,7 @@ function ParticipantAvatar({
       src: participant?.avatar,
       alt: "",
       name: participant?.name ?? "?",
-      fallback: isAgent ? /* @__PURE__ */ jsxRuntime.jsx(chunkWIAQQNFU_cjs.SparklesIcon, { size: "sm" }) : void 0,
+      fallback: isAgent ? /* @__PURE__ */ jsxRuntime.jsx(chunkMYHV2ND3_cjs.SparklesIcon, { size: "sm" }) : void 0,
       style: { backgroundColor },
       "aria-hidden": "true",
       className: "shrink-0"
@@ -498,11 +500,11 @@ function useMessageCopy({
   getText,
   defaultFormat
 }) {
-  const [copied, setCopied] = React2__namespace.useState(false);
-  const copiedTimer = React2__namespace.useRef(
+  const [copied, setCopied] = React3__namespace.useState(false);
+  const copiedTimer = React3__namespace.useRef(
     void 0
   );
-  React2__namespace.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
+  React3__namespace.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
   const flash = () => {
     setCopied(true);
     window.clearTimeout(copiedTimer.current);
@@ -546,7 +548,7 @@ function ActionMenuItem({
   item,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkSGFYA22I_cjs.DropdownItem, { onClick: () => onSelect(item.onSelect), children: item.description ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col items-start", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkVYPPQPSZ_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 });
@@ -555,7 +557,7 @@ function FooterActionButton({
   action,
   isSelf
 }) {
-  const [open, setOpen] = React2__namespace.useState(false);
+  const [open, setOpen] = React3__namespace.useState(false);
   const onClickCapture = action.submenu ? (e) => {
     if (e.metaKey || e.ctrlKey) {
       e.preventDefault();
@@ -578,7 +580,7 @@ function FooterActionButton({
   );
   if (!action.submenu) return button;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkSGFYA22I_cjs.Dropdown,
+    chunkVYPPQPSZ_cjs.Dropdown,
     {
       open,
       onOpenChange: setOpen,
@@ -598,17 +600,13 @@ function FooterActionButton({
     }
   );
 }
-var MessageActionsBar = React2__namespace.forwardRef(function MessageActionsBar2({ actions, isSelf }, ref) {
+var MessageActionsBar = React3__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
-      ),
+      className: chunkS5RVSXDV_cjs.cn("flex flex-col items-center gap-0.5", actionRevealClass),
       children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(FooterActionButton, { action, isSelf }, action.id))
     }
   );
@@ -618,7 +616,7 @@ function MessageOverflowMenu({
   actions,
   footerVisible
 }) {
-  const [open, setOpen] = React2__namespace.useState(false);
+  const [open, setOpen] = React3__namespace.useState(false);
   const select = (fn) => {
     setOpen(false);
     fn();
@@ -627,7 +625,7 @@ function MessageOverflowMenu({
     "div",
     {
       className: chunkS5RVSXDV_cjs.cn(
-        "sticky bottom-2 shrink-0 self-end transition-opacity",
+        "sticky bottom-2 mt-auto shrink-0 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",
@@ -637,7 +635,7 @@ function MessageOverflowMenu({
         footerVisible && !open && "pointer-events-none invisible opacity-0"
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkSGFYA22I_cjs.Dropdown,
+        chunkVYPPQPSZ_cjs.Dropdown,
         {
           open,
           onOpenChange: setOpen,
@@ -656,9 +654,9 @@ function MessageOverflowMenu({
             (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(chunkSGFYA22I_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(chunkVYPPQPSZ_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(
-              chunkSGFYA22I_cjs.DropdownItem,
+              chunkVYPPQPSZ_cjs.DropdownItem,
               {
                 onClick: () => select(action.onSelect),
                 children: action.label
@@ -671,7 +669,7 @@ function MessageOverflowMenu({
     }
   );
 }
-var MessageRow = React2__namespace.memo(function MessageRow2({
+var MessageRow = React3__namespace.memo(function MessageRow2({
   message,
   participant,
   isSelf,
@@ -684,17 +682,18 @@ var MessageRow = React2__namespace.memo(function MessageRow2({
 }) {
   const streaming = message.status === "streaming";
   const hasBody = !!message.text || (message.content?.length ?? 0) > 0;
-  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 [isEditing, setIsEditing] = React3__namespace.useState(false);
+  const [draft, setDraft] = React3__namespace.useState(message.text ?? "");
+  const [editMinWidth, setEditMinWidth] = React3__namespace.useState();
+  const editRef = React3__namespace.useRef(null);
+  const bubbleRef = React3__namespace.useRef(null);
+  const autosize = React3__namespace.useCallback(() => {
     const el = editRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
   }, []);
-  React2__namespace.useEffect(() => {
+  React3__namespace.useEffect(() => {
     if (!isEditing) return;
     const el = editRef.current;
     if (!el) return;
@@ -715,16 +714,19 @@ ${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 showEditAction = canEdit && !isEditing;
+  const actionCount = (canCopy ? 1 : 0) + (showEditAction ? 1 : 0);
+  const hasActions = actionCount > 0;
+  const collapseToMenu = actionCount > 1;
   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 actionsBarRef = React3__namespace.useRef(null);
+  const [footerVisible, setFooterVisible] = React3__namespace.useState(true);
+  React3__namespace.useEffect(() => {
     const el = actionsBarRef.current;
     if (!el || typeof globalThis.IntersectionObserver === "undefined") return;
     const observer = new globalThis.IntersectionObserver(([entry]) => {
@@ -732,7 +734,7 @@ ${block.text}
     });
     observer.observe(el);
     return () => observer.disconnect();
-  }, [hasActions]);
+  }, [hasActions, collapseToMenu]);
   if (message.type === "system") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -765,6 +767,12 @@ ${block.text}
   const accentTextColor = accessibleAccentTextColor(accent);
   const authorName = participant?.name ?? "Unknown";
   const startEdit = () => {
+    const el = bubbleRef.current;
+    if (el) {
+      const cs = getComputedStyle(el);
+      const contentWidth = el.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
+      setEditMinWidth(contentWidth > 0 ? contentWidth : void 0);
+    }
     setDraft(message.text ?? "");
     setIsEditing(true);
   };
@@ -838,7 +846,7 @@ ${block.text}
         }
       }
     ] : [],
-    ...canEdit && !isEditing ? [
+    ...showEditAction ? [
       {
         id: "edit",
         label: "Edit message",
@@ -858,172 +866,191 @@ ${block.text}
         isSelf ? "flex-row-reverse" : "flex-row"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ParticipantAvatar, { participant }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkS5RVSXDV_cjs.cn("flex min-w-0 flex-col gap-1", isSelf && "items-end"), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              "data-slot": "superchat-message-meta",
-              className: "flex items-baseline gap-2",
-              children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "superchat-message-gutter",
+            className: "flex shrink-0 flex-col items-center gap-1",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ParticipantAvatar, { participant }),
+              hasActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: "text-xs font-medium",
-                    style: accentTextColor ? { color: accentTextColor } : void 0,
-                    children: authorName
-                  }
-                ),
-                participant?.role && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: participant.role }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: formatTime(message.time) }),
-                message.editedAt && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    "data-slot": "superchat-edited-indicator",
-                    className: "text-[10px] text-neutral-500 dark:text-neutral-400",
-                    title: `Edited ${formatTime(message.editedAt)}`,
-                    children: "(edited)"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: chunkS5RVSXDV_cjs.cn(
-                "flex items-center gap-1",
-                isSelf ? "flex-row-reverse" : "flex-row"
-              ),
-              children: [
-                hasActions && /* @__PURE__ */ jsxRuntime.jsx(
                   MessageOverflowMenu,
                   {
                     isSelf,
                     actions,
-                    footerVisible
+                    footerVisible: collapseToMenu ? false : footerVisible
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkWIAQQNFU_cjs.ChatBubble,
+                !collapseToMenu && /* @__PURE__ */ jsxRuntime.jsx(
+                  MessageActionsBar,
                   {
-                    ref: bubbleRef,
-                    "data-slot": "superchat-bubble",
-                    variant: isSelf ? "user" : "assistant",
-                    hasError: message.status === "error",
-                    className: "text-sm has-[[data-slot=superchat-nitro-table]]:w-full has-[[data-slot=superchat-nitro-table]]:max-w-full",
-                    children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
+                    ref: actionsBarRef,
+                    actions,
+                    isSelf
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: chunkS5RVSXDV_cjs.cn(
+              "flex min-w-0 flex-1 flex-col gap-1",
+              isSelf && "items-end"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  "data-slot": "superchat-message-meta",
+                  className: "flex items-baseline gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
                       {
-                        "data-slot": "superchat-message-editor",
-                        className: "flex w-80 max-w-full flex-col gap-2",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "textarea",
-                            {
-                              value: draft,
-                              ref: editRef,
-                              rows: 2,
-                              onChange: (e) => {
-                                setDraft(e.target.value);
-                                autosize();
-                              },
-                              onPaste: handleEditPaste,
-                              onKeyDown: (e) => {
-                                if (e.key === "Enter" && !e.shiftKey) {
-                                  e.preventDefault();
-                                  saveEdit();
-                                } else if (e.key === "Escape") {
-                                  e.preventDefault();
-                                  cancelEdit();
-                                }
-                              },
-                              "aria-label": "Edit message",
-                              className: "focus:ring-primary-500 max-h-60 min-h-16 w-full resize-none rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:ring-1 focus:outline-none dark:border-neutral-600 dark:bg-neutral-900 dark:text-white"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+                        className: "text-xs font-medium",
+                        style: accentTextColor ? { color: accentTextColor } : void 0,
+                        children: authorName
+                      }
+                    ),
+                    participant?.role && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: participant.role }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: formatTime(message.time) }),
+                    message.editedAt && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-slot": "superchat-edited-indicator",
+                        className: "text-[10px] text-neutral-500 dark:text-neutral-400",
+                        title: `Edited ${formatTime(message.editedAt)}`,
+                        children: "(edited)"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: chunkS5RVSXDV_cjs.cn(
+                    "flex w-full items-center gap-1",
+                    isSelf ? "flex-row-reverse" : "flex-row"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkMYHV2ND3_cjs.ChatBubble,
+                    {
+                      ref: bubbleRef,
+                      "data-slot": "superchat-bubble",
+                      variant: isSelf ? "user" : "assistant",
+                      hasError: message.status === "error",
+                      className: "text-sm has-[[data-slot=superchat-nitro-table]]:w-full has-[[data-slot=superchat-nitro-table]]:max-w-full",
+                      children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          "data-slot": "superchat-message-editor",
+                          className: "flex w-80 max-w-full flex-col gap-2",
+                          style: editMinWidth ? { minWidth: editMinWidth } : void 0,
+                          children: [
                             /* @__PURE__ */ jsxRuntime.jsx(
-                              "button",
+                              "textarea",
                               {
-                                type: "button",
-                                onClick: cancelEdit,
-                                className: "rounded-md px-2.5 py-1 text-xs font-medium text-neutral-200 hover:bg-white/10",
-                                children: "Cancel"
+                                value: draft,
+                                ref: editRef,
+                                rows: 2,
+                                onChange: (e) => {
+                                  setDraft(e.target.value);
+                                  autosize();
+                                },
+                                onPaste: handleEditPaste,
+                                onKeyDown: (e) => {
+                                  if (e.key === "Enter" && !e.shiftKey) {
+                                    e.preventDefault();
+                                    saveEdit();
+                                  } else if (e.key === "Escape") {
+                                    e.preventDefault();
+                                    cancelEdit();
+                                  }
+                                },
+                                "aria-label": "Edit message",
+                                className: "focus:ring-primary-500 max-h-60 min-h-16 w-full resize-none rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:ring-1 focus:outline-none dark:border-neutral-600 dark:bg-neutral-900 dark:text-white"
                               }
                             ),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "button",
-                              {
-                                type: "button",
-                                onClick: saveEdit,
-                                disabled: !draft.trim() || draft.trim() === message.text,
-                                className: "rounded-md bg-white px-2.5 py-1 text-xs font-medium text-neutral-900 hover:bg-neutral-100 disabled:opacity-40",
-                                children: "Save"
-                              }
-                            )
-                          ] })
-                        ]
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      message.content?.map((block, i) => {
-                        if (block.type === "tool_use" && block.toolCall) {
-                          return /* @__PURE__ */ jsxRuntime.jsx(chunkWIAQQNFU_cjs.MCPToolCallDisplay, { toolCall: block.toolCall }, i);
-                        }
-                        if ((block.type === "text" || block.type === "thinking") && block.text) {
-                          return /* @__PURE__ */ jsxRuntime.jsx(
-                            "div",
-                            {
-                              className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word",
-                              children: renderText(block.text, {
-                                messageId: message.id,
-                                streaming,
-                                role: participant?.kind === "human" ? "user" : "assistant"
-                              })
-                            },
-                            i
-                          );
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: cancelEdit,
+                                  className: "rounded-md px-2.5 py-1 text-xs font-medium text-neutral-200 hover:bg-white/10",
+                                  children: "Cancel"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: saveEdit,
+                                  disabled: !draft.trim() || draft.trim() === message.text,
+                                  className: "rounded-md bg-white px-2.5 py-1 text-xs font-medium text-neutral-900 hover:bg-neutral-100 disabled:opacity-40",
+                                  children: "Save"
+                                }
+                              )
+                            ] })
+                          ]
                         }
-                        if (block.type === "code" && block.text) {
-                          const fenced = `\`\`\`${block.language ?? ""}
+                      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        message.content?.map((block, i) => {
+                          if (block.type === "tool_use" && block.toolCall) {
+                            return /* @__PURE__ */ jsxRuntime.jsx(chunkMYHV2ND3_cjs.MCPToolCallDisplay, { toolCall: block.toolCall }, i);
+                          }
+                          if ((block.type === "text" || block.type === "thinking") && block.text) {
+                            return /* @__PURE__ */ jsxRuntime.jsx(
+                              "div",
+                              {
+                                className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word",
+                                children: renderText(block.text, {
+                                  messageId: message.id,
+                                  streaming,
+                                  role: participant?.kind === "human" ? "user" : "assistant"
+                                })
+                              },
+                              i
+                            );
+                          }
+                          if (block.type === "code" && block.text) {
+                            const fenced = `\`\`\`${block.language ?? ""}
 ${block.text}
 \`\`\``;
-                          return /* @__PURE__ */ jsxRuntime.jsx(
-                            "div",
-                            {
-                              className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word",
-                              children: renderText(fenced, {
-                                messageId: message.id,
-                                streaming,
-                                role: participant?.kind === "human" ? "user" : "assistant"
-                              })
-                            },
-                            i
-                          );
-                        }
-                        return null;
-                      }),
-                      message.text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word", children: renderText(message.text, {
-                        messageId: message.id,
-                        streaming,
-                        role: participant?.kind === "human" ? "user" : "assistant"
-                      }) }),
-                      streaming && !hasBody && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunkWIAQQNFU_cjs.AITypingIndicator, {}) })
-                    ] })
-                  }
-                )
-              ]
-            }
-          ),
-          hasActions && /* @__PURE__ */ jsxRuntime.jsx(
-            MessageActionsBar,
-            {
-              ref: actionsBarRef,
-              actions,
-              isSelf
-            }
-          )
-        ] })
+                            return /* @__PURE__ */ jsxRuntime.jsx(
+                              "div",
+                              {
+                                className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word",
+                                children: renderText(fenced, {
+                                  messageId: message.id,
+                                  streaming,
+                                  role: participant?.kind === "human" ? "user" : "assistant"
+                                })
+                              },
+                              i
+                            );
+                          }
+                          return null;
+                        }),
+                        message.text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word", children: renderText(message.text, {
+                          messageId: message.id,
+                          streaming,
+                          role: participant?.kind === "human" ? "user" : "assistant"
+                        }) }),
+                        streaming && !hasBody && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunkMYHV2ND3_cjs.AITypingIndicator, {}) })
+                      ] })
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -1050,32 +1077,23 @@ function VirtualThread({
   editable,
   onMessageEdited,
   defaultCopyFormat,
-  order,
-  conversationId,
+  scrollRef,
+  contentRef,
   containerProps
 }) {
-  const parentRef = React2__namespace.useRef(null);
   const virtualizer = reactVirtual.useVirtualizer({
     count: items.length,
-    getScrollElement: () => parentRef.current,
+    getScrollElement: () => scrollRef.current,
     // Rough first guess; real heights are measured via measureElement.
     estimateSize: () => 88,
     overscan: 10,
     getItemKey: (index) => items[index]?.id ?? index
   });
-  const count = items.length;
-  React2__namespace.useEffect(() => {
-    if (count === 0) return;
-    if (order === "desc") {
-      virtualizer.scrollToIndex(0, { align: "start" });
-    } else {
-      virtualizer.scrollToIndex(count - 1, { align: "end" });
-    }
-  }, [count, conversationId, order]);
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...containerProps, ref: parentRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...containerProps, ref: scrollRef, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref: contentRef,
       style: {
         height: virtualizer.getTotalSize(),
         position: "relative",
@@ -1136,38 +1154,180 @@ function SuperChat({
   onReferenceClick,
   onBack
 }) {
-  const headingId = React2__namespace.useId();
-  React2__namespace.useEffect(() => {
-    chunkX4XPNTCZ_cjs.notifyComposerMigrationOnce("SuperChat");
+  const headingId = React3__namespace.useId();
+  React3__namespace.useEffect(() => {
+    chunkLJZKEMAH_cjs.notifyComposerMigrationOnce("SuperChat");
   }, []);
-  const renderText = React2__namespace.useMemo(
+  const renderText = React3__namespace.useMemo(
     () => renderTextContent ?? createMarkdownRenderer({
       plugins: renderPlugins,
       trusted: trustedContent
     }),
     [renderTextContent, renderPlugins, trustedContent]
   );
-  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 = React2__namespace.useMemo(() => {
+  const prefersReducedMotion = chunk6HFFWEM3_cjs.usePrefersReducedMotion();
+  const {
+    containerRef: threadRef,
+    contentRef: threadContentRef,
+    isAtBottom,
+    scrollToBottom,
+    anchorToTurnStart,
+    followIfPinned,
+    stopFollowing
+  } = chunkVPTASZ2O_cjs.useStickToBottom({ disabled: order === "desc" });
+  const [hasNewBelow, setHasNewBelow] = React3__namespace.useState(false);
+  const [turnStartId, setTurnStartId] = React3__namespace.useState(null);
+  const [turnMinHeight, setTurnMinHeight] = React3__namespace.useState();
+  const anchoredTurnRef = React3__namespace.useRef(null);
+  React3__namespace.useEffect(() => {
+    setTurnStartId(null);
+    anchoredTurnRef.current = null;
+    if (order === "desc") {
+      const el = threadRef.current;
+      if (el) el.scrollTop = 0;
+    } else {
+      scrollToBottom("auto");
+    }
+    setHasNewBelow(false);
+  }, [conversation.id, order]);
+  const threadLength = conversation.thread.length;
+  const prevThreadLengthRef = React3__namespace.useRef(threadLength);
+  const prevMessageIdsRef = React3__namespace.useRef(
+    new Set(conversation.thread.map((message) => message.id))
+  );
+  const policyConversationRef = React3__namespace.useRef(conversation.id);
+  const policyBaselinedRef = React3__namespace.useRef(false);
+  React3__namespace.useEffect(() => {
+    if (!policyBaselinedRef.current || policyConversationRef.current !== conversation.id) {
+      policyBaselinedRef.current = true;
+      policyConversationRef.current = conversation.id;
+      prevThreadLengthRef.current = threadLength;
+      prevMessageIdsRef.current = new Set(
+        conversation.thread.map((message) => message.id)
+      );
+      if (order !== "desc" && [...conversation.thread].sort(byTime).at(-1)?.status === "streaming") {
+        stopFollowing();
+      }
+      return;
+    }
+    if (threadLength === prevThreadLengthRef.current) return;
+    const grew = threadLength > prevThreadLengthRef.current;
+    prevThreadLengthRef.current = threadLength;
+    if (order === "desc") {
+      const el = threadRef.current;
+      if (el) el.scrollTop = 0;
+      return;
+    }
+    const prevIds = prevMessageIdsRef.current;
+    let turnStart;
+    if (grew && currentParticipantId) {
+      for (const message of [...conversation.thread].sort(byTime)) {
+        if (!prevIds.has(message.id) && message.participantId === currentParticipantId) {
+          turnStart = message.id;
+        }
+      }
+    }
+    if (turnStart) {
+      if (virtualized) {
+        scrollToBottom("auto");
+      } else {
+        setTurnStartId(turnStart);
+      }
+    } else if (grew) {
+      const newest = [...conversation.thread].sort(byTime).at(-1);
+      if (newest?.status === "streaming") {
+        followIfPinned("auto");
+        stopFollowing();
+      } else if (!followIfPinned("auto")) {
+        setHasNewBelow(true);
+      }
+    } else {
+      followIfPinned("auto");
+    }
+  }, [threadLength, order, isAtBottom, conversation.id]);
+  React3__namespace.useLayoutEffect(() => {
+    if (!turnStartId || anchoredTurnRef.current === turnStartId) return;
+    const container = threadRef.current;
+    if (!container) return;
+    const reserve = Math.max(0, container.clientHeight - 32);
+    if (turnMinHeight !== reserve) {
+      setTurnMinHeight(reserve);
+      return;
+    }
+    const target = container.querySelector(
+      '[data-slot="superchat-turn"]'
+    );
+    if (target) {
+      anchorToTurnStart(target, prefersReducedMotion ? "auto" : "smooth");
+      anchoredTurnRef.current = turnStartId;
+    }
+  }, [
+    turnStartId,
+    turnMinHeight,
+    anchorToTurnStart,
+    prefersReducedMotion,
+    threadRef
+  ]);
+  React3__namespace.useEffect(() => {
+    prevMessageIdsRef.current = new Set(
+      conversation.thread.map((message) => message.id)
+    );
+  });
+  React3__namespace.useEffect(() => {
+    if (isAtBottom) setHasNewBelow(false);
+  }, [isAtBottom]);
+  const newestMessage = React3__namespace.useMemo(
+    () => [...conversation.thread].sort(byTime).at(-1),
+    [conversation]
+  );
+  const raiseNewBelow = React3__namespace.useCallback(() => {
+    if (order !== "desc") setHasNewBelow(true);
+  }, [order]);
+  const resumeFollowing = React3__namespace.useCallback(() => {
+    if (order !== "desc") scrollToBottom("auto");
+  }, [order, scrollToBottom]);
+  chunkVPTASZ2O_cjs.useStreamEndedBelowFold(
+    newestMessage,
+    isAtBottom,
+    raiseNewBelow,
+    resumeFollowing
+  );
+  const handleJumpToBottom = React3__namespace.useCallback(() => {
+    scrollToBottom(prefersReducedMotion ? "auto" : "smooth");
+  }, [scrollToBottom, prefersReducedMotion]);
+  const participantById = React3__namespace.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     conversation.participants.forEach((p) => map.set(p.id, p));
     return map;
   }, [conversation]);
-  const orderedThread = React2__namespace.useMemo(() => {
+  const orderedThread = React3__namespace.useMemo(() => {
     const sorted = [...conversation.thread].sort(byTime);
     return order === "desc" ? sorted.reverse() : sorted;
   }, [conversation, order]);
-  const onMessageEditedRef = React2__namespace.useRef(onMessageEdited);
+  const turnIndex = React3__namespace.useMemo(
+    () => turnStartId && order !== "desc" ? orderedThread.findIndex((message) => message.id === turnStartId) : -1,
+    [orderedThread, turnStartId, order]
+  );
+  const renderMessageRow = (m) => /* @__PURE__ */ jsxRuntime.jsx(
+    MessageRow,
+    {
+      message: m,
+      participant: participantById.get(m.participantId),
+      isSelf: !!currentParticipantId && m.participantId === currentParticipantId,
+      renderText,
+      linkBuilder,
+      onReferenceClick,
+      editable,
+      onMessageEdited: handleMessageEdited,
+      defaultCopyFormat
+    },
+    m.id
+  );
+  const onMessageEditedRef = React3__namespace.useRef(onMessageEdited);
   onMessageEditedRef.current = onMessageEdited;
-  const conversationRef = React2__namespace.useRef(conversation);
+  const conversationRef = React3__namespace.useRef(conversation);
   conversationRef.current = conversation;
-  const handleMessageEdited = React2__namespace.useCallback(
+  const handleMessageEdited = React3__namespace.useCallback(
     (messageId, text) => {
       onMessageEditedRef.current?.(messageId, text, {
         conversation: conversationRef.current
@@ -1176,7 +1336,7 @@ function SuperChat({
     []
   );
   const editable = !readOnly && !!onMessageEdited;
-  const mentionOptions = React2__namespace.useMemo(
+  const mentionOptions = React3__namespace.useMemo(
     () => conversation.participants.filter((p) => p.kind !== "system").map((p) => ({
       id: p.id,
       label: p.name,
@@ -1186,17 +1346,17 @@ function SuperChat({
     })),
     [conversation.participants]
   );
-  const composerAccept = React2__namespace.useMemo(
+  const composerAccept = React3__namespace.useMemo(
     () => acceptTokensFor(acceptedFileTypes),
     [acceptedFileTypes]
   );
-  const [draft, setDraft] = React2__namespace.useState("");
-  const draftEpochRef = React2__namespace.useRef(0);
-  const handleDraftChange = React2__namespace.useCallback((value) => {
+  const [draft, setDraft] = React3__namespace.useState("");
+  const draftEpochRef = React3__namespace.useRef(0);
+  const handleDraftChange = React3__namespace.useCallback((value) => {
     draftEpochRef.current += 1;
     setDraft(value);
   }, []);
-  const handleComposerSend = React2__namespace.useCallback(
+  const handleComposerSend = React3__namespace.useCallback(
     async (message) => {
       const epoch = draftEpochRef.current;
       try {
@@ -1286,70 +1446,94 @@ 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(chunkWIAQQNFU_cjs.CloseIcon, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(chunkMYHV2ND3_cjs.CloseIcon, {})
                 }
               )
             ]
           }
         ),
-        virtualized ? /* @__PURE__ */ jsxRuntime.jsx(
-          VirtualThread,
-          {
-            items: orderedThread,
-            participantById,
-            currentParticipantId,
-            renderText,
-            linkBuilder,
-            onReferenceClick,
-            editable,
-            onMessageEdited: handleMessageEdited,
-            defaultCopyFormat,
-            order,
-            conversationId: conversation.id,
-            containerProps: {
-              "data-slot": "superchat-thread",
-              role: "log",
-              "aria-label": "Messages",
-              "aria-live": "polite",
-              // Focusable so keyboard-only users can scroll the message history.
-              tabIndex: 0,
-              className: "flex-1 overflow-y-auto p-4"
-            }
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            "data-slot": "superchat-thread",
-            ref: threadRef,
-            role: "log",
-            "aria-label": "Messages",
-            "aria-live": "polite",
-            tabIndex: 0,
-            className: "flex-1 space-y-4 overflow-y-auto p-4",
-            children: orderedThread.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
-              MessageRow,
-              {
-                message: m,
-                participant: participantById.get(m.participantId),
-                isSelf: !!currentParticipantId && m.participantId === currentParticipantId,
-                renderText,
-                linkBuilder,
-                onReferenceClick,
-                editable,
-                onMessageEdited: handleMessageEdited,
-                defaultCopyFormat
-              },
-              m.id
-            ))
+            "data-slot": "superchat-thread-viewport",
+            className: "relative flex min-h-0 flex-1 flex-col",
+            children: [
+              virtualized ? /* @__PURE__ */ jsxRuntime.jsx(
+                VirtualThread,
+                {
+                  items: orderedThread,
+                  participantById,
+                  currentParticipantId,
+                  renderText,
+                  linkBuilder,
+                  onReferenceClick,
+                  editable,
+                  onMessageEdited: handleMessageEdited,
+                  defaultCopyFormat,
+                  scrollRef: threadRef,
+                  contentRef: threadContentRef,
+                  containerProps: {
+                    "data-slot": "superchat-thread",
+                    role: "log",
+                    "aria-label": "Messages",
+                    "aria-live": "polite",
+                    // Focusable so keyboard-only users can scroll the message history.
+                    tabIndex: 0,
+                    className: "flex-1 overflow-y-auto p-4"
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "superchat-thread",
+                  ref: threadRef,
+                  role: "log",
+                  "aria-label": "Messages",
+                  "aria-live": "polite",
+                  tabIndex: 0,
+                  className: "flex-1 overflow-y-auto p-4",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: threadContentRef, className: "space-y-4", children: [
+                    (turnIndex === -1 ? orderedThread : orderedThread.slice(0, turnIndex)).map(renderMessageRow),
+                    turnIndex !== -1 && /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        "data-slot": "superchat-turn",
+                        className: "space-y-4",
+                        style: { minHeight: turnMinHeight },
+                        children: orderedThread.slice(turnIndex).map(renderMessageRow)
+                      }
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkIEY3ZJIT_cjs.AnimatedPresence, { children: order !== "desc" && !isAtBottom && /* @__PURE__ */ jsxRuntime.jsx(
+                chunkIEY3ZJIT_cjs.Animated,
+                {
+                  preset: "fade",
+                  mode: "presence",
+                  className: "absolute inset-x-0 bottom-0 z-20",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkMYHV2ND3_cjs.JumpToBottomButton,
+                    {
+                      dataSlot: "superchat-jump-to-bottom",
+                      hasNewMessages: hasNewBelow,
+                      onClick: handleJumpToBottom
+                    }
+                  )
+                },
+                "jump-to-bottom"
+              ) })
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkX4XPNTCZ_cjs.ChatComposer,
+          chunkLJZKEMAH_cjs.ChatComposer,
           {
             value: draft,
             onValueChange: handleDraftChange,
             onSend: handleComposerSend,
             disabled: readOnly,
+            className: "px-4 pb-4",
             placeholder: readOnly ? "Read-only conversation" : "Type a message\u2026 use @ to address an agent",
             mentionOptions,
             allowAttachments: !readOnly,
@@ -1371,12 +1555,14 @@ function SuperChatConversations({
   onConversationOpened,
   onNewConversation
 }) {
-  const [internalActive, setInternalActive] = React2__namespace.useState(
+  const [internalActive, setInternalActive] = React3__namespace.useState(
     defaultActiveConversationId ?? conversations[0]?.id
   );
+  const [hasMounted, setHasMounted] = React3__namespace.useState(false);
+  React3__namespace.useEffect(() => setHasMounted(true), []);
   const requestedId = activeConversationId ?? internalActive;
   const activeId = conversations.some((c) => c.id === requestedId) ? requestedId : conversations[0]?.id;
-  const sortedConversations = React2__namespace.useMemo(
+  const sortedConversations = React3__namespace.useMemo(
     () => [...conversations].sort((a, b) => lastActivityOf(b) - lastActivityOf(a)),
     [conversations]
   );
@@ -1428,10 +1614,21 @@ 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 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" })
-                    ] })
+                    /* @__PURE__ */ jsxRuntime.jsx(chunkIEY3ZJIT_cjs.AnimatedPresence, { initial: hasMounted, children: !!c.unread && /* @__PURE__ */ jsxRuntime.jsxs(
+                      chunkIEY3ZJIT_cjs.Animated,
+                      {
+                        as: "span",
+                        preset: "pop",
+                        mode: "presence",
+                        "data-slot": "superchat-unread-badge",
+                        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" })
+                        ]
+                      },
+                      "unread"
+                    ) })
                   ]
                 }
               ) }, c.id);
@@ -1465,13 +1662,13 @@ function SuperChatInbox({
   onNewConversation,
   onReferenceClick
 }) {
-  const [internalActive, setInternalActive] = React2__namespace.useState(
+  const [internalActive, setInternalActive] = React3__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] = React2__namespace.useState("list");
+  const [mobileView, setMobileView] = React3__namespace.useState("list");
   const handleOpen = (c) => {
     if (activeConversationId === void 0) setInternalActive(c.id);
     setMobileView("chat");