@mieweb/ui 0.10.0-dev.8 → 0.10.0-dev.9

package/dist/components/SuperChat/index.js

@@ -1,10 +1,11 @@
 import { TextRenderContext } from '../../chunk-I6CY5C6A.js';
 export { TextRenderContext, useTextRenderContext } from '../../chunk-I6CY5C6A.js';
-import { ChatBubble, MCPToolCallDisplay, AITypingIndicator, SparklesIcon, CloseIcon } from '../../chunk-22CYDCXA.js';
+import { ChatBubble, MCPToolCallDisplay, AITypingIndicator, SparklesIcon, CloseIcon, JumpToBottomButton } from '../../chunk-HACNIFO3.js';
 import { notifyComposerMigrationOnce, ChatComposer } from '../../chunk-ACCAXVOG.js';
 import { Dropdown, DropdownSubmenu, DropdownItem } from '../../chunk-ZGRCSNPK.js';
 import { Avatar } from '../../chunk-HZ4MBUC3.js';
 import '../../chunk-IQ4KQJAO.js';
+import { useStickToBottom, useStreamEndedBelowFold } from '../../chunk-BM35CACB.js';
 import '../../chunk-VVDE4CHU.js';
 import '../../chunk-6NZXWKUE.js';
 import '../../chunk-3IMM2PM4.js';
@@ -12,11 +13,12 @@ import '../../chunk-62ZOA6PX.js';
 import '../../chunk-WSNMQQ4P.js';
 import '../../chunk-T4ME7QCT.js';
 import '../../chunk-BKSPDTX4.js';
+import { usePrefersReducedMotion } from '../../chunk-HB7C7NB5.js';
 import { Badge } from '../../chunk-BMSG4NBH.js';
 import '../../chunk-XCP454Q6.js';
 import { cn } from '../../chunk-TQONQSJO.js';
 import '../../chunk-PX6F3LHL.js';
-import * as React2 from 'react';
+import * as React3 from 'react';
 import Markdown, { defaultUrlTransform } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
@@ -269,7 +271,7 @@ var transformUrl = (url, key, node) => {
   }
   return defaultUrlTransform(url);
 };
-var MarkdownContent = React2.memo(function MarkdownContent2({
+var MarkdownContent = React3.memo(function MarkdownContent2({
   text,
   messageId,
   streaming,
@@ -472,11 +474,11 @@ function useMessageCopy({
   getText,
   defaultFormat
 }) {
-  const [copied, setCopied] = React2.useState(false);
-  const copiedTimer = React2.useRef(
+  const [copied, setCopied] = React3.useState(false);
+  const copiedTimer = React3.useRef(
     void 0
   );
-  React2.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
+  React3.useEffect(() => () => window.clearTimeout(copiedTimer.current), []);
   const flash = () => {
     setCopied(true);
     window.clearTimeout(copiedTimer.current);
@@ -529,7 +531,7 @@ function FooterActionButton({
   action,
   isSelf
 }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React3.useState(false);
   const onClickCapture = action.submenu ? (e) => {
     if (e.metaKey || e.ctrlKey) {
       e.preventDefault();
@@ -572,7 +574,7 @@ function FooterActionButton({
     }
   );
 }
-var MessageActionsBar = React2.forwardRef(function MessageActionsBar2({ actions, isSelf }, ref) {
+var MessageActionsBar = React3.forwardRef(function MessageActionsBar2({ actions, isSelf }, ref) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -588,7 +590,7 @@ function MessageOverflowMenu({
   actions,
   footerVisible
 }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React3.useState(false);
   const select = (fn) => {
     setOpen(false);
     fn();
@@ -641,7 +643,7 @@ function MessageOverflowMenu({
     }
   );
 }
-var MessageRow = React2.memo(function MessageRow2({
+var MessageRow = React3.memo(function MessageRow2({
   message,
   participant,
   isSelf,
@@ -654,18 +656,18 @@ var MessageRow = React2.memo(function MessageRow2({
 }) {
   const streaming = message.status === "streaming";
   const hasBody = !!message.text || (message.content?.length ?? 0) > 0;
-  const [isEditing, setIsEditing] = React2.useState(false);
-  const [draft, setDraft] = React2.useState(message.text ?? "");
-  const [editMinWidth, setEditMinWidth] = React2.useState();
-  const editRef = React2.useRef(null);
-  const bubbleRef = React2.useRef(null);
-  const autosize = React2.useCallback(() => {
+  const [isEditing, setIsEditing] = React3.useState(false);
+  const [draft, setDraft] = React3.useState(message.text ?? "");
+  const [editMinWidth, setEditMinWidth] = React3.useState();
+  const editRef = React3.useRef(null);
+  const bubbleRef = React3.useRef(null);
+  const autosize = React3.useCallback(() => {
     const el = editRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
   }, []);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!isEditing) return;
     const el = editRef.current;
     if (!el) return;
@@ -696,9 +698,9 @@ ${block.text}
     getText: () => bubbleRef.current?.textContent ?? "",
     defaultFormat: defaultCopyFormat
   });
-  const actionsBarRef = React2.useRef(null);
-  const [footerVisible, setFooterVisible] = React2.useState(true);
-  React2.useEffect(() => {
+  const actionsBarRef = React3.useRef(null);
+  const [footerVisible, setFooterVisible] = React3.useState(true);
+  React3.useEffect(() => {
     const el = actionsBarRef.current;
     if (!el || typeof globalThis.IntersectionObserver === "undefined") return;
     const observer = new globalThis.IntersectionObserver(([entry]) => {
@@ -1049,32 +1051,23 @@ function VirtualThread({
   editable,
   onMessageEdited,
   defaultCopyFormat,
-  order,
-  conversationId,
+  scrollRef,
+  contentRef,
   containerProps
 }) {
-  const parentRef = React2.useRef(null);
   const virtualizer = 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.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__ */ jsx("div", { ...containerProps, ref: parentRef, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ...containerProps, ref: scrollRef, children: /* @__PURE__ */ jsx(
     "div",
     {
+      ref: contentRef,
       style: {
         height: virtualizer.getTotalSize(),
         position: "relative",
@@ -1135,38 +1128,180 @@ function SuperChat({
   onReferenceClick,
   onBack
 }) {
-  const headingId = React2.useId();
-  React2.useEffect(() => {
+  const headingId = React3.useId();
+  React3.useEffect(() => {
     notifyComposerMigrationOnce("SuperChat");
   }, []);
-  const renderText = React2.useMemo(
+  const renderText = React3.useMemo(
     () => renderTextContent ?? createMarkdownRenderer({
       plugins: renderPlugins,
       trusted: trustedContent
     }),
     [renderTextContent, renderPlugins, trustedContent]
   );
-  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 = React2.useMemo(() => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const {
+    containerRef: threadRef,
+    contentRef: threadContentRef,
+    isAtBottom,
+    scrollToBottom,
+    anchorToTurnStart,
+    followIfPinned,
+    stopFollowing
+  } = useStickToBottom({ disabled: order === "desc" });
+  const [hasNewBelow, setHasNewBelow] = React3.useState(false);
+  const [turnStartId, setTurnStartId] = React3.useState(null);
+  const [turnMinHeight, setTurnMinHeight] = React3.useState();
+  const anchoredTurnRef = React3.useRef(null);
+  React3.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.useRef(threadLength);
+  const prevMessageIdsRef = React3.useRef(
+    new Set(conversation.thread.map((message) => message.id))
+  );
+  const policyConversationRef = React3.useRef(conversation.id);
+  const policyBaselinedRef = React3.useRef(false);
+  React3.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.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.useEffect(() => {
+    prevMessageIdsRef.current = new Set(
+      conversation.thread.map((message) => message.id)
+    );
+  });
+  React3.useEffect(() => {
+    if (isAtBottom) setHasNewBelow(false);
+  }, [isAtBottom]);
+  const newestMessage = React3.useMemo(
+    () => [...conversation.thread].sort(byTime).at(-1),
+    [conversation]
+  );
+  const raiseNewBelow = React3.useCallback(() => {
+    if (order !== "desc") setHasNewBelow(true);
+  }, [order]);
+  const resumeFollowing = React3.useCallback(() => {
+    if (order !== "desc") scrollToBottom("auto");
+  }, [order, scrollToBottom]);
+  useStreamEndedBelowFold(
+    newestMessage,
+    isAtBottom,
+    raiseNewBelow,
+    resumeFollowing
+  );
+  const handleJumpToBottom = React3.useCallback(() => {
+    scrollToBottom(prefersReducedMotion ? "auto" : "smooth");
+  }, [scrollToBottom, prefersReducedMotion]);
+  const participantById = React3.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     conversation.participants.forEach((p) => map.set(p.id, p));
     return map;
   }, [conversation]);
-  const orderedThread = React2.useMemo(() => {
+  const orderedThread = React3.useMemo(() => {
     const sorted = [...conversation.thread].sort(byTime);
     return order === "desc" ? sorted.reverse() : sorted;
   }, [conversation, order]);
-  const onMessageEditedRef = React2.useRef(onMessageEdited);
+  const turnIndex = React3.useMemo(
+    () => turnStartId && order !== "desc" ? orderedThread.findIndex((message) => message.id === turnStartId) : -1,
+    [orderedThread, turnStartId, order]
+  );
+  const renderMessageRow = (m) => /* @__PURE__ */ 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.useRef(onMessageEdited);
   onMessageEditedRef.current = onMessageEdited;
-  const conversationRef = React2.useRef(conversation);
+  const conversationRef = React3.useRef(conversation);
   conversationRef.current = conversation;
-  const handleMessageEdited = React2.useCallback(
+  const handleMessageEdited = React3.useCallback(
     (messageId, text) => {
       onMessageEditedRef.current?.(messageId, text, {
         conversation: conversationRef.current
@@ -1175,7 +1310,7 @@ function SuperChat({
     []
   );
   const editable = !readOnly && !!onMessageEdited;
-  const mentionOptions = React2.useMemo(
+  const mentionOptions = React3.useMemo(
     () => conversation.participants.filter((p) => p.kind !== "system").map((p) => ({
       id: p.id,
       label: p.name,
@@ -1185,17 +1320,17 @@ function SuperChat({
     })),
     [conversation.participants]
   );
-  const composerAccept = React2.useMemo(
+  const composerAccept = React3.useMemo(
     () => acceptTokensFor(acceptedFileTypes),
     [acceptedFileTypes]
   );
-  const [draft, setDraft] = React2.useState("");
-  const draftEpochRef = React2.useRef(0);
-  const handleDraftChange = React2.useCallback((value) => {
+  const [draft, setDraft] = React3.useState("");
+  const draftEpochRef = React3.useRef(0);
+  const handleDraftChange = React3.useCallback((value) => {
     draftEpochRef.current += 1;
     setDraft(value);
   }, []);
-  const handleComposerSend = React2.useCallback(
+  const handleComposerSend = React3.useCallback(
     async (message) => {
       const epoch = draftEpochRef.current;
       try {
@@ -1291,55 +1426,69 @@ function SuperChat({
             ]
           }
         ),
-        virtualized ? /* @__PURE__ */ 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__ */ jsx(
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { ref: threadContentRef, className: "space-y-4", children: [
+                    (turnIndex === -1 ? orderedThread : orderedThread.slice(0, turnIndex)).map(renderMessageRow),
+                    turnIndex !== -1 && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-slot": "superchat-turn",
+                        className: "space-y-4",
+                        style: { minHeight: turnMinHeight },
+                        children: orderedThread.slice(turnIndex).map(renderMessageRow)
+                      }
+                    )
+                  ] })
+                }
+              ),
+              order !== "desc" && !isAtBottom && /* @__PURE__ */ jsx(
+                JumpToBottomButton,
+                {
+                  dataSlot: "superchat-jump-to-bottom",
+                  hasNewMessages: hasNewBelow,
+                  onClick: handleJumpToBottom
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1371,12 +1520,12 @@ function SuperChatConversations({
   onConversationOpened,
   onNewConversation
 }) {
-  const [internalActive, setInternalActive] = React2.useState(
+  const [internalActive, setInternalActive] = React3.useState(
     defaultActiveConversationId ?? conversations[0]?.id
   );
   const requestedId = activeConversationId ?? internalActive;
   const activeId = conversations.some((c) => c.id === requestedId) ? requestedId : conversations[0]?.id;
-  const sortedConversations = React2.useMemo(
+  const sortedConversations = React3.useMemo(
     () => [...conversations].sort((a, b) => lastActivityOf(b) - lastActivityOf(a)),
     [conversations]
   );
@@ -1465,13 +1614,13 @@ function SuperChatInbox({
   onNewConversation,
   onReferenceClick
 }) {
-  const [internalActive, setInternalActive] = React2.useState(
+  const [internalActive, setInternalActive] = React3.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.useState("list");
+  const [mobileView, setMobileView] = React3.useState("list");
   const handleOpen = (c) => {
     if (activeConversationId === void 0) setInternalActive(c.id);
     setMobileView("chat");