@jskit-ai/assistant-core 0.2.6 → 0.2.8

package/src/client/conversation/AssistantTranscript.vue

@@ -318,30 +318,21 @@
 <script setup>
 import AssistantMessageAttachments from "./AssistantMessageAttachments.vue";
 import AssistantConversationStatus from "./AssistantConversationStatus.vue";
-import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import {
   mdiAccountOutline,
   mdiInformationOutline,
   mdiRefresh,
   mdiRobotOutline
 } from "@mdi/js";
-import { useScrollToBottom } from "./useScrollToBottom.js";
 import LongTextInlineParts from "./LongTextInlineParts.vue";
 import LongTextPreviewBlocks from "./LongTextPreviewBlocks.vue";
 import AssistantProgress from "./AssistantProgress.vue";
-import { parseNumberedQuestionPrompt } from "../../shared/conversation/numberedQuestionSugar.js";
-import { parseLongTextReviewBlocks } from "../../shared/conversation/longTextBlocks.js";
-import {
-  scrollDistanceFromBottom,
-  scrollElementNearBottom
-} from "../../shared/conversation/scrollFollowState.js";
-import {
-  normalizeThinkingMessageText
-} from "../../shared/conversation/thinkingText.js";
+import { useTranscriptEntries, userMessagePreviewText } from "./transcriptEntries.js";
+import { useTranscriptScrollFollow } from "./useTranscriptScrollFollow.js";
 import { useJskitText } from "../i18n.js";
 
-const jskitText = useJskitText();
-const { formatDateTime, serverMessage, t } = jskitText;
+const { t } = useJskitText();
 
 function previewForTurn(turn) {
   const preview = turn.previewMessage || props.previewMessage;
@@ -427,234 +418,11 @@ const systemName = computed(() => props.systemLabel ?? t("jskit.assistant.transc
 const assistantName = computed(() => props.assistantLabel ?? t("jskit.assistant.transcript.assistant"));
 const reloadLabel = computed(() => props.reloading ? t("jskit.assistant.transcript.reloading") : t("jskit.assistant.transcript.reload"));
 
-const USER_MESSAGE_COLLAPSE_MIN_CHARACTERS = 360;
-const USER_MESSAGE_PREVIEW_MAX_CHARACTERS = 280;
-const USER_MESSAGE_PREVIEW_MAX_LINES = 4;
-const DISPLAY_MESSAGE_CACHE_LIMIT = 500;
 const bodyElement = ref(null);
 const bottomElement = ref(null);
 const expandedUserMessages = ref(new Set());
 const isWorking = computed(() => props.working ?? props.turns.some(turn => turn.pending));
-const followingLatest = ref(true);
-const initialScrollSettled = ref(false);
-const userScrollIntent = ref(false);
-const displayMessageCache = new Map();
-let liveScrollFrame = 0;
-let userScrollIntentTimer = null;
-let initialScrollVersion = 0;
-let loadMoreScrollSnapshot = null;
-let retainedReaderScrollSnapshot = null;
-let loadMoreRequestVersion = 0;
-let pendingTailFollow = false;
-let previousScrollTop = 0;
-let previousScrollHeight = 0;
-let userScrollIntentUpward = false;
-let lastTouchY = null;
-const USER_SCROLL_INTENT_RESET_MS = 600;
-const LOAD_MORE_THRESHOLD_PX = 160;
-const KEYBOARD_SCROLL_KEYS = new Set([
-  " ",
-  "ArrowDown",
-  "ArrowUp",
-  "End",
-  "Home",
-  "PageDown",
-  "PageUp",
-  "Spacebar"
-]);
-const UPWARD_SCROLL_KEYS = new Set(["ArrowUp", "Home", "PageUp"]);
-const TIME_FORMAT = Object.freeze({
-  year: "numeric",
-  month: "short",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit"
-});
-
-function displayTime(value = "") {
-  const date = new Date(String(value || ""));
-  if (Number.isNaN(date.getTime())) {
-    return "";
-  }
-  return formatDateTime(date, TIME_FORMAT);
-}
-
-function userMessagePreviewText(value = "") {
-  const text = String(value || "");
-  const characters = [...text];
-  const lines = text.split(/\r\n?|\n/u);
-  if (
-    characters.length <= USER_MESSAGE_COLLAPSE_MIN_CHARACTERS &&
-    lines.length <= USER_MESSAGE_PREVIEW_MAX_LINES
-  ) {
-    return "";
-  }
-  const firstLines = lines.slice(0, USER_MESSAGE_PREVIEW_MAX_LINES).join("\n");
-  const preview = [...firstLines]
-    .slice(0, USER_MESSAGE_PREVIEW_MAX_CHARACTERS)
-    .join("")
-    .trimEnd();
-  return preview ? `${preview}…` : "";
-}
-
-function displayMessage(message = null, {
-  allowNumberedQuestions = false,
-  preserveParagraphLineBreaks = false,
-  previewUserMessage = false
-} = {}, cacheKey = "") {
-  if (!message) {
-    return null;
-  }
-  const normalizedCacheKey = String(cacheKey || "").trim();
-  const cached = normalizedCacheKey ? displayMessageCache.get(normalizedCacheKey) : null;
-  // Times and status texts follow the active locale, so a locale change re-renders them.
-  const activeLocale = jskitText.locale;
-  if (
-    cached &&
-    cached.locale === activeLocale &&
-    cached.allowNumberedQuestions === allowNumberedQuestions &&
-    cached.attachments === message.attachments &&
-    cached.at === message.at &&
-    cached.messageId === message.messageId &&
-    cached.preserveParagraphLineBreaks === preserveParagraphLineBreaks &&
-    cached.previewUserMessage === previewUserMessage &&
-    cached.role === message.role &&
-    cached.text === message.text
-  ) {
-    return { ...message, ...cached.value };
-  }
-  const messageText = message.textCode ? serverMessage({ message: message.text, messageCode: message.textCode }) : message.text;
-  const questionInput = allowNumberedQuestions
-    ? parseNumberedQuestionPrompt(messageText)
-    : {
-        intro: "",
-        outro: "",
-        questions: []
-      };
-  const hasQuestions = questionInput.questions.length > 0;
-  const previewText = previewUserMessage ? userMessagePreviewText(message.text) : "";
-  const value = {
-    blocks: parseLongTextReviewBlocks(hasQuestions ? questionInput.intro : messageText, {
-      preserveParagraphLineBreaks
-    }),
-    outroBlocks: parseLongTextReviewBlocks(hasQuestions ? questionInput.outro : "", {
-      preserveParagraphLineBreaks
-    }),
-    previewBlocks: previewText
-      ? parseLongTextReviewBlocks(previewText, { preserveParagraphLineBreaks: true })
-      : null,
-    questions: hasQuestions ? questionInput.questions : [],
-    displayAt: displayTime(message.at)
-  };
-  if (normalizedCacheKey) {
-    if (
-      displayMessageCache.size >= DISPLAY_MESSAGE_CACHE_LIMIT &&
-      !displayMessageCache.has(normalizedCacheKey)
-    ) {
-      displayMessageCache.delete(displayMessageCache.keys().next().value);
-    }
-    displayMessageCache.set(normalizedCacheKey, {
-      allowNumberedQuestions,
-      attachments: message.attachments,
-      at: message.at,
-      locale: activeLocale,
-      messageId: message.messageId,
-      preserveParagraphLineBreaks,
-      previewUserMessage,
-      role: message.role,
-      text: message.text,
-      value
-    });
-  }
-  return { ...message, ...value };
-}
-
-function displayThinkingMessage(message = null) {
-  if (!message) {
-    return null;
-  }
-  const text = normalizeThinkingMessageText(message.text);
-  if (!text) {
-    return null;
-  }
-  return {
-    ...message,
-    text,
-    displayAt: displayTime(message.at)
-  };
-}
-
-function conversationAgentMessages(turn = {}) {
-  if (Array.isArray(turn.messages)) {
-    return turn.messages.filter((message) => (
-      ["assistant", "commentary", "thinking"].includes(String(message?.role || "").trim())
-    ));
-  }
-  return [
-    ...(Array.isArray(turn.thinking) ? turn.thinking : []),
-    ...(Array.isArray(turn.commentary) ? turn.commentary : []),
-    turn.assistant
-  ].filter(Boolean);
-}
-
-function conversationMessageKey(message = {}, index = 0) {
-  return [
-    String(message.messageId || "").trim(),
-    String(message.role || "").trim(),
-    String(message.at || "").trim(),
-    index
-  ].join(":");
-}
-
-// Storage rows are not visual boundaries. Only an intervening message ends a
-// reasoning group, including when history is prepended or execution continues.
-const displayEntries = computed(() => {
-  const candidates = [];
-  for (const [index, turn] of props.turns.entries()) {
-    const turnId = String(turn.turnId || index + 1);
-    // A delivery notice belongs to its exact user message, not the previous reply.
-    const userDelivery = turn.user && turn.system?.delivery && turn.system.delivery.messageId === turn.user.messageId
-      ? turn.system : null;
-    const messages = [
-      turn.system && !userDelivery && { ...turn.system, role: "system" },
-      turn.user && { ...turn.user, role: "user" },
-      ...conversationAgentMessages(turn)
-    ].filter(Boolean);
-    for (const [messageIndex, message] of messages.entries()) {
-      const role = String(message.role || "").trim();
-      const key = `${turnId}:${conversationMessageKey(message, messageIndex)}`;
-      const displayed = role === "thinking" ? displayThinkingMessage(message) : displayMessage(message, {
-        allowNumberedQuestions: role !== "user" && role !== "system",
-        preserveParagraphLineBreaks: role === "user",
-        previewUserMessage: role === "user"
-      }, key);
-      if (!displayed) continue;
-      candidates.push({ key, role, turn: { ...turn, turnId }, message: displayed,
-        sortAt: turn.optimistic && turn.optimistic.status !== "accepted" && turn.optimistic.id === message.messageId
-          ? NaN : Date.parse(message.at),
-        delivery: role === "user" ? userDelivery : null });
-    }
-  }
-  // Native streaming turns and saved authored turns can arrive independently.
-  // Local queued timestamps can precede an earlier message's native admission.
-  // Keep unconfirmed messages in their supplied positions, along with undated
-  // notices. Accepted local copies join chronology even before history arrives.
-  const dated = candidates.filter(entry => Number.isFinite(entry.sortAt))
-    .sort((a, b) => a.sortAt - b.sortAt)[Symbol.iterator]();
-  const entries = [];
-  for (const candidate of candidates) {
-    const entry = Number.isFinite(candidate.sortAt) ? dated.next().value : candidate;
-    const previous = entries.at(-1);
-    if (entry.role === "thinking" && previous?.role === "thinking") previous.messages.push({ ...entry.message, key: entry.key });
-    else entries.push({ ...entry, ...(entry.role === "thinking" ? { messages: [{ ...entry.message, key: entry.key }] } : {}) });
-  }
-  // Anchor a progress group to the following message, or to the transcript end.
-  // Appending progress or prepending history then preserves its expansion state.
-  for (const [index, entry] of entries.entries()) {
-    if (entry.role === "thinking") entry.key = `progress:${entries[index + 1]?.key || "tail"}`;
-  }
-  return entries;
-});
+const { clearDisplayCache, displayEntries } = useTranscriptEntries(props);
 
 function handleLongTextLinkClick(payload) {
   emit("link-click", payload);
@@ -692,971 +460,30 @@ function toggleUserMessage(turn = {}) {
   toggleExpandedKey(expandedUserMessages, key);
 }
 
-const loadingIndicatorVisible = computed(() => Boolean(
-  props.loading &&
-  !displayEntries.value.length
-));
-const initialScrollPending = computed(() => Boolean(
-  props.visible &&
-  displayEntries.value.length &&
-  !initialScrollSettled.value
-));
-
-function messageScrollKey(message = null) {
-  if (!message) {
-    return "empty";
-  }
-  return [
-    message.messageId || "",
-    message.role || "",
-    message.at || "",
-    String(message.text || "")
-  ].join("/");
-}
-
-const timelineScrollTrigger = computed(() => [
-  loadingIndicatorVisible.value ? "loading" : "ready",
-  displayEntries.value.length ? "has-messages" : "empty",
-  props.scrollKey
-].join(":"));
-const latestRenderedTailKey = computed(() => {
-  const entry = displayEntries.value.at(-1);
-  if (!entry) return "";
-  return [
-    entry.key,
-    isWorking.value,
-    entry.role === "thinking" ? entry.messages.map(messageScrollKey).join("+") : messageScrollKey(entry.message),
-    entry.turn.optimistic?.status || "",
-    entry.turn.optimistic?.error || ""
-  ].join(":");
-});
-const autoScrollEnabled = computed(() => Boolean(
-  props.visible &&
-  followingLatest.value
-));
-
-const {
-  clearScheduledScrolls,
-  scrollAfterLayout: scrollToLatestMessage,
-  scrollNow: scrollToLatestMessageNow
-} = useScrollToBottom({
-  anchor: bottomElement,
-  enabled: autoScrollEnabled,
-  scrollAnchorIntoView: false,
-  target: bodyElement
-});
-
-function clearUserScrollIntent() {
-  if (userScrollIntentTimer && typeof window !== "undefined" && typeof window.clearTimeout === "function") {
-    window.clearTimeout(userScrollIntentTimer);
-  }
-  userScrollIntentTimer = null;
-  userScrollIntent.value = false;
-}
-
-function resumePendingTailFollow() {
-  const shouldResume = pendingTailFollow && followingLatest.value;
-  pendingTailFollow = false;
-  if (shouldResume) {
-    queueLiveBottomScroll();
-  }
-}
-
-function markUserScrollIntent({ upward = false } = {}) {
-  retainedReaderScrollSnapshot = null;
-  userScrollIntent.value = true;
-  userScrollIntentUpward = upward;
-  clearLiveBottomScroll();
-  clearScheduledScrolls();
-  if (userScrollIntentTimer && typeof window !== "undefined" && typeof window.clearTimeout === "function") {
-    window.clearTimeout(userScrollIntentTimer);
-  }
-  if (typeof window === "undefined" || typeof window.setTimeout !== "function") {
-    return;
-  }
-  userScrollIntentTimer = window.setTimeout(() => {
-    userScrollIntentTimer = null;
-    userScrollIntent.value = false;
-    resumePendingTailFollow();
-  }, USER_SCROLL_INTENT_RESET_MS);
-}
-
-function markKeyboardScrollIntent(event = {}) {
-  if (!KEYBOARD_SCROLL_KEYS.has(String(event.key || "")) || event.defaultPrevented) {
-    return;
-  }
-  const target = event.target;
-  const tagName = String(target?.tagName || "").toLowerCase();
-  if (
-    target?.isContentEditable ||
-    ["input", "select", "textarea"].includes(tagName) ||
-    ([" ", "Spacebar"].includes(event.key) && ["a", "button"].includes(tagName))
-  ) {
-    return;
-  }
-  markUserScrollIntent({
-    upward: UPWARD_SCROLL_KEYS.has(event.key) || (event.shiftKey && [" ", "Spacebar"].includes(event.key))
-  });
-}
-
-function rememberTouch(event = {}) {
-  lastTouchY = event.touches?.[0]?.clientY ?? null;
-}
-
-function markTouchScrollIntent(event = {}) {
-  const touchY = event.touches?.[0]?.clientY ?? null;
-  // A finger moving down the screen scrolls the transcript up.
-  markUserScrollIntent({ upward: touchY !== null && lastTouchY !== null && touchY > lastTouchY });
-  lastTouchY = touchY;
-}
-
-function scrollToLatestMessageAfterLayout({
-  behavior = "auto",
-  force = false
-} = {}) {
-  if (force) {
-    retainedReaderScrollSnapshot = null;
-    followingLatest.value = true;
-    clearUserScrollIntent();
-  }
-  return scrollToLatestMessage({
-    behavior
-  });
-}
-
-function queueInitialBottomScroll() {
-  const version = initialScrollVersion + 1;
-  initialScrollVersion = version;
-  initialScrollSettled.value = false;
-  if (props.retainWhenHidden && !props.visible) {
-    return;
-  }
-  void scrollToLatestMessageAfterLayout({
-    behavior: "auto",
-    force: true
-  }).finally(() => {
-    if (initialScrollVersion === version) {
-      initialScrollSettled.value = true;
-    }
-  });
-}
-
-function queueLiveBottomScroll({
-  force = false
-} = {}) {
-  if (userScrollIntent.value && !force) {
-    pendingTailFollow = true;
-    return;
-  }
-  if (force) {
-    retainedReaderScrollSnapshot = null;
-    pendingTailFollow = false;
-    followingLatest.value = true;
-    clearUserScrollIntent();
-  }
-  if (props.retainWhenHidden && !props.visible) {
-    return;
-  }
-  if (liveScrollFrame) {
-    return;
-  }
-  if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
-    void scrollToLatestMessageAfterLayout({ behavior: "auto" });
-    return;
-  }
-  liveScrollFrame = window.requestAnimationFrame(() => {
-    liveScrollFrame = 0;
-    scrollToLatestMessageNow({ behavior: "auto" });
-  });
-}
-
-function clearLiveBottomScroll() {
-  if (
-    liveScrollFrame &&
-    typeof window !== "undefined" &&
-    typeof window.cancelAnimationFrame === "function"
-  ) {
-    window.cancelAnimationFrame(liveScrollFrame);
-  }
-  liveScrollFrame = 0;
-}
-
-function updateLatestFollowFromScroll(event = {}) {
-  if (props.retainWhenHidden && !props.visible) {
-    return;
-  }
-  const target = event?.currentTarget || bodyElement.value;
-  if (retainedReaderScrollSnapshot?.restoring) {
-    previousScrollTop = target?.scrollTop || 0;
-    previousScrollHeight = target?.scrollHeight || 0;
-    return;
-  }
-  const scrollTop = target?.scrollTop || 0;
-  const scrollHeight = target?.scrollHeight || 0;
-  const scrolledUp = scrollTop < previousScrollTop;
-  // Layout changes such as scroll anchoring move scrollTop together with the
-  // content height; moving up over unchanged content is the reader's own.
-  const readerMovedUp = scrolledUp && scrollHeight === previousScrollHeight;
-  previousScrollTop = scrollTop;
-  previousScrollHeight = scrollHeight;
-  // Keep following the reader while the request is pending, before rows prepend.
-  if (loadMoreScrollSnapshot && !loadMoreScrollSnapshot.completed) {
-    loadMoreScrollSnapshot.scrollTop = scrollTop;
-    loadMoreScrollSnapshot.anchor = visibleHistoryAnchor(target);
-    loadMoreScrollSnapshot.scrollHeight = target.scrollHeight;
-  }
-  // The reader's own upward scrolling leaves the latest message from its first
-  // frame, even within the follow threshold.
-  const userScrollsUp = userScrollIntent.value && userScrollIntentUpward;
-  const shouldFollow = scrollElementNearBottom(target) &&
-    !(userScrollsUp && scrollDistanceFromBottom(target) > 1);
-  if (!shouldFollow && !userScrollIntent.value && !readerMovedUp && followingLatest.value) {
-    return;
-  }
-  followingLatest.value = shouldFollow;
-  if (shouldFollow) {
-    // A scroll event still at the end, queued before upward input, must not
-    // end that input's intent.
-    if (!userScrollsUp) {
-      clearUserScrollIntent();
-    }
-    resumePendingTailFollow();
-    return;
-  }
-  clearLiveBottomScroll();
-  clearScheduledScrolls();
-  if (
-    scrolledUp &&
-    initialScrollSettled.value &&
-    scrollTop <= LOAD_MORE_THRESHOLD_PX &&
-    !props.loadMoreError
-  ) {
-    requestLoadMore();
-  }
-}
-
-function visibleHistoryAnchor(element) {
-  const top = element.getBoundingClientRect().top;
-  for (const turn of element.querySelectorAll(".assistant-transcript__turn")) {
-    const bounds = turn.getBoundingClientRect();
-    if (bounds.bottom > top) {
-      return { element: turn, offset: bounds.top - top };
-    }
-  }
-  return null;
-}
-
-// Offscreen turns use estimated heights. Preserve the visible anchor row instead
-// of moving by the total height difference, which can change during layout.
-function restoreAnchoredScroll(element, snapshot) {
-  const anchor = snapshot.anchor;
-  if (anchor && element.contains(anchor.element)) {
-    // Materialize the anchor row before reading the browser's adjusted scrollTop.
-    const offset = anchor.element.getBoundingClientRect().top - element.getBoundingClientRect().top;
-    previousScrollTop = element.scrollTop + offset - anchor.offset;
-  } else {
-    previousScrollTop = snapshot.scrollTop + (element.scrollHeight - snapshot.scrollHeight);
-  }
-  element.scrollTop = previousScrollTop;
-}
-
-// Reopening materializes previously hidden content-visibility estimates.
-async function waitForTwoFrames() {
-  if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
-    await new Promise(resolve => window.requestAnimationFrame(() => window.requestAnimationFrame(resolve)));
-  }
-}
-
-async function restoreRetainedReaderScroll() {
-  const snapshot = retainedReaderScrollSnapshot;
-  snapshot.restoring = true;
-  await nextTick();
-  for (let pass = 0; pass < 2; pass += 1) {
-    const element = bodyElement.value;
-    if (
-      retainedReaderScrollSnapshot !== snapshot ||
-      element !== snapshot.body ||
-      snapshot.scrollKey !== props.scrollKey ||
-      !props.retainWhenHidden ||
-      !props.visible ||
-      followingLatest.value ||
-      loadMoreScrollSnapshot
-    ) {
-      if (retainedReaderScrollSnapshot === snapshot) retainedReaderScrollSnapshot = null;
-      return;
-    }
-    restoreAnchoredScroll(element, snapshot);
-    if (pass === 0) await waitForTwoFrames();
-  }
-  if (retainedReaderScrollSnapshot === snapshot) retainedReaderScrollSnapshot = null;
-}
-
-function requestLoadMore() {
-  if ((props.retainWhenHidden && !props.visible) || !props.hasMoreBefore || props.loadingMore || loadMoreScrollSnapshot) {
-    return;
-  }
-  followingLatest.value = false;
-  pendingTailFollow = false;
-  markUserScrollIntent();
-  const element = bodyElement.value;
-  const version = loadMoreRequestVersion + 1;
-  loadMoreRequestVersion = version;
-  loadMoreScrollSnapshot = element
-    ? {
-        anchor: visibleHistoryAnchor(element),
-        scrollHeight: element.scrollHeight,
-        scrollKey: props.scrollKey,
-        scrollTop: element.scrollTop,
-        version
-      }
-    : null;
-  emit("load-more", {
-    complete: ({ changed = false } = {}) => {
-      void completeLoadMoreRequest(version, changed);
-    }
-  });
-}
-
-function clearLoadMoreScrollSnapshot() {
-  loadMoreRequestVersion += 1;
-  loadMoreScrollSnapshot = null;
-}
-
-async function completeLoadMoreRequest(version, changed) {
-  const snapshot = loadMoreScrollSnapshot;
-  if (!snapshot || snapshot.version !== version) {
-    return;
-  }
-  if (!changed || snapshot.scrollKey !== props.scrollKey) {
-    clearLoadMoreScrollSnapshot();
-    return;
-  }
-  snapshot.completed = true;
-  await nextTick();
-  if (loadMoreScrollSnapshot?.version !== version) {
-    return;
-  }
-  const passes = props.retainWhenHidden ? 2 : 1;
-  for (let pass = 0; pass < passes; pass += 1) {
-    if (
-      (props.retainWhenHidden && !props.visible) ||
-      loadMoreScrollSnapshot?.version !== version ||
-      snapshot.scrollKey !== props.scrollKey
-    ) {
-      return;
-    }
-    const element = bodyElement.value;
-    if (element) restoreAnchoredScroll(element, snapshot);
-    if (pass + 1 < passes) await waitForTwoFrames();
-  }
-  clearLoadMoreScrollSnapshot();
-}
-
-onBeforeUnmount(() => {
-  retainedReaderScrollSnapshot = null;
-  clearLiveBottomScroll();
-  clearUserScrollIntent();
-  clearLoadMoreScrollSnapshot();
-});
-
+// Created before the scroll-following watchers, so a new conversation's expansion and cache reset run first.
 watch(() => props.scrollKey, () => {
   expandedUserMessages.value = new Set();
-  displayMessageCache.clear();
+  clearDisplayCache();
 });
 
-watch(() => [
-  timelineScrollTrigger.value,
-  latestRenderedTailKey.value
-], ([timelineKey, value], [previousTimelineKey, previous] = []) => {
-  if (timelineKey !== previousTimelineKey) {
-    return;
-  }
-  if (!value || value === previous) {
-    return;
-  }
-  queueLiveBottomScroll({
-    force: false
-  });
-}, {
-  flush: "post"
-});
-
-watch(() => [
-  props.scrollKey,
-  props.followLatestKey
-], ([scrollKey, value], [previousScrollKey, previous] = []) => {
-  if (scrollKey !== previousScrollKey || value === previous) {
-    return;
-  }
-  queueLiveBottomScroll({
-    force: true
-  });
-}, {
-  flush: "post"
-});
-
-watch(timelineScrollTrigger, () => {
-  retainedReaderScrollSnapshot = null;
-  clearLoadMoreScrollSnapshot();
-  queueInitialBottomScroll();
-}, {
-  flush: "post",
-  immediate: true
+const {
+  initialScrollPending,
+  loadingIndicatorVisible,
+  markKeyboardScrollIntent,
+  markTouchScrollIntent,
+  markUserScrollIntent,
+  rememberTouch,
+  requestLoadMore,
+  updateLatestFollowFromScroll
+} = useTranscriptScrollFollow({
+  props,
+  displayEntries,
+  isWorking,
+  bodyElement,
+  bottomElement,
+  loadMore: (request) => emit("load-more", request)
 });
 
-watch(() => props.error, () => {
-  if (followingLatest.value) queueLiveBottomScroll();
-}, { flush: "post" });
-
-// Capture before this transcript or its parent's v-show removes its geometry.
-watch(() => props.visible, (visible) => {
-  if (visible) return;
-  retainedReaderScrollSnapshot = null;
-  const element = bodyElement.value;
-  if (
-    props.retainWhenHidden &&
-    initialScrollSettled.value &&
-    !followingLatest.value &&
-    !loadMoreScrollSnapshot &&
-    element?.clientHeight > 0
-  ) {
-    retainedReaderScrollSnapshot = {
-      anchor: visibleHistoryAnchor(element),
-      body: element,
-      scrollHeight: element.scrollHeight,
-      scrollKey: props.scrollKey,
-      scrollTop: element.scrollTop
-    };
-  }
-}, { flush: "sync" });
-
-watch(() => props.visible, (visible) => {
-  if (props.retainWhenHidden) {
-    if (!visible) {
-      clearLiveBottomScroll();
-      clearScheduledScrolls();
-      clearUserScrollIntent();
-      initialScrollVersion += 1;
-    } else if (loadMoreScrollSnapshot?.completed) {
-      void completeLoadMoreRequest(loadMoreScrollSnapshot.version, true);
-    } else if (!initialScrollSettled.value) {
-      queueInitialBottomScroll();
-    } else if (retainedReaderScrollSnapshot) {
-      void restoreRetainedReaderScroll();
-    } else {
-      queueLiveBottomScroll();
-    }
-    return;
-  }
-  clearLoadMoreScrollSnapshot();
-  if (visible) queueLiveBottomScroll({ force: true });
-}, { flush: "post" });
 </script>
 
-<style scoped>
-.assistant-transcript__plain-user { white-space: pre-wrap; margin: 0; }
-.assistant-transcript {
-  border: 1px solid rgba(var(--v-theme-outline), 0.24);
-  border-radius: 8px;
-  display: grid;
-  gap: 0.35rem;
-  grid-template-rows: minmax(0, 1fr);
-  min-height: 0;
-  overflow: hidden;
-  padding: 0.5rem;
-  position: relative;
-  text-align: left;
-}
-
-.assistant-transcript__loading-skeleton {
-  inset: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: 1;
-}
-
-.assistant-transcript--error {
-  grid-template-rows: max-content minmax(0, 1fr);
-  min-height: min-content;
-}
-
-.assistant-transcript--error .assistant-transcript__body {
-  contain: size;
-}
-
-.assistant-transcript__error {
-  position: relative;
-  z-index: 4;
-  background: rgb(var(--v-theme-surface));
-  padding: 0.25rem 0.5rem;
-  font-size: 0.85rem;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.assistant-transcript__error-content {
-  align-items: center;
-  display: flex;
-  gap: 0.5rem;
-}
-
-.assistant-transcript__error-content > span {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.assistant-transcript__error-content > .v-btn {
-  flex: 0 0 auto;
-}
-
-.assistant-transcript__settling {
-  background: rgb(var(--v-theme-surface));
-  inset: 0;
-  overflow: hidden;
-  padding: 0.5rem;
-  position: absolute;
-  z-index: 1;
-}
-
-.assistant-transcript__settling-skeleton {
-  height: 100%;
-}
-
-.assistant-transcript__reload {
-  color: rgba(var(--v-theme-on-surface), 0.66);
-  position: absolute;
-  right: 0.38rem;
-  top: 0.38rem;
-  z-index: 2;
-}
-
-.assistant-transcript__body {
-  display: flex;
-  flex-direction: column;
-  gap: 0.65rem;
-  min-height: 0;
-  min-width: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding-right: 0.15rem;
-}
-
-.assistant-transcript__welcome {
-  background: rgba(var(--v-theme-primary), 0.08);
-  border: 1px solid rgba(var(--v-theme-primary), 0.18);
-  border-radius: 16px;
-  color: rgb(var(--v-theme-on-surface));
-  display: grid;
-  flex: 0 0 auto;
-  gap: 0.55rem;
-  margin: 0.1rem 0.15rem 0;
-  padding: 0.8rem 0.9rem 0.9rem;
-}
-
-.assistant-transcript__welcome p {
-  line-height: 1.48;
-  margin: 0;
-}
-
-.assistant-transcript__body--settling {
-  visibility: hidden;
-}
-
-.assistant-transcript__load-more {
-  align-items: center;
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  gap: 0.35rem;
-  padding: 0.35rem 0 0.55rem;
-}
-
-.assistant-transcript__load-more-error {
-  color: rgb(var(--v-theme-error));
-  font-size: 0.76rem;
-  line-height: 1.3;
-  text-align: center;
-}
-
-.assistant-transcript__load-more + .assistant-transcript__turn,
-.assistant-transcript__body > .assistant-transcript__turn:first-child {
-  margin-top: auto;
-}
-
-.assistant-transcript__turn {
-  contain-intrinsic-block-size: auto 12rem;
-  content-visibility: auto;
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  gap: 0.65rem;
-  min-height: 0;
-  min-width: 0;
-}
-
-.assistant-transcript--retained .assistant-transcript__turn {
-  /* Late offscreen height estimates cannot move a restored reader anchor. */
-  content-visibility: visible;
-}
-
-.assistant-transcript__message-row {
-  align-items: start;
-  display: grid;
-  gap: 0.65rem;
-  max-width: 100%;
-  min-width: 0;
-  overflow-x: hidden;
-}
-
-.assistant-transcript__message-row--user {
-  grid-template-columns: minmax(0, auto) auto;
-  justify-self: end;
-  max-width: min(28rem, 88%);
-  margin-left: auto;
-}
-
-.assistant-transcript__message-row--assistant {
-  display: flex;
-  flex-direction: column;
-  gap: 0.28rem;
-  justify-self: start;
-  max-width: min(52rem, 94%);
-  margin-right: auto;
-}
-
-.assistant-transcript__assistant-header {
-  align-items: center;
-  display: grid;
-  gap: 0.65rem;
-  grid-template-columns: auto minmax(0, 1fr);
-  min-width: 0;
-}
-
-.assistant-transcript__message {
-  display: flex;
-  flex-direction: column;
-  gap: 0.24rem;
-  max-width: 100%;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-.assistant-transcript__avatar {
-  align-items: center;
-  border-radius: 999px;
-  display: inline-flex;
-  height: 1.5rem;
-  justify-content: center;
-  width: 1.5rem;
-}
-
-.assistant-transcript__avatar--user {
-  background: rgba(var(--v-theme-primary), 0.1);
-  color: rgb(var(--v-theme-primary));
-  margin-top: 0.2rem;
-}
-
-.assistant-transcript__avatar--assistant {
-  background: rgb(var(--v-theme-primary));
-  color: rgb(var(--v-theme-on-primary));
-  margin-top: 0.05rem;
-}
-
-.assistant-transcript__message--user {
-  background: rgba(var(--v-theme-primary), 0.1);
-  border-radius: 16px;
-  color: rgb(var(--v-theme-on-surface));
-  gap: 0.75rem;
-  justify-content: space-between;
-  overflow-x: auto;
-  padding: 0.75rem 1rem 0.72rem;
-  width: fit-content;
-}
-
-.assistant-transcript__message--user.assistant-transcript__message--pending {
-  background: rgba(var(--v-theme-on-surface), 0.04);
-  outline: 1px dashed rgba(var(--v-theme-on-surface), 0.4);
-  outline-offset: -1px;
-}
-
-.assistant-transcript__message--pending .assistant-transcript__message-footer {
-  color: rgba(var(--v-theme-on-surface), 0.7);
-}
-
-.assistant-transcript__message--user.assistant-transcript__message--failed {
-  outline: 1px solid rgb(var(--v-theme-error));
-  outline-offset: -1px;
-}
-
-.assistant-transcript__message--assistant {
-  background: rgb(var(--v-theme-surface));
-  color: rgb(var(--v-theme-on-surface));
-  padding: 0;
-}
-
-.assistant-transcript--task {
-  border-color: rgba(126, 87, 194, 0.32);
-}
-
-.assistant-transcript--task .assistant-transcript__avatar--assistant {
-  background: #7e57c2;
-}
-
-.assistant-transcript--task .assistant-transcript__message--user {
-  background: #eee8f8;
-  color: #2d2440;
-}
-
-.assistant-transcript__thinking {
-  justify-self: start;
-  margin-left: 2.15rem;
-  max-width: min(34rem, 86%);
-}
-
-.assistant-transcript__user-content-toggle {
-  background: transparent;
-  border: 0;
-  color: rgb(var(--v-theme-primary));
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
-}
-
-.assistant-transcript__system {
-  align-items: start;
-  background: transparent;
-  color: rgba(var(--v-theme-on-surface), 0.84);
-  display: grid;
-  gap: 0.45rem;
-  grid-template-columns: auto minmax(0, 1fr);
-  justify-self: start;
-  max-width: min(34rem, 96%);
-  min-width: 0;
-  padding: 0.1rem 0.15rem;
-}
-
-.assistant-transcript__system-icon {
-  color: rgba(var(--v-theme-primary), 0.82);
-  margin-top: 0.15rem;
-}
-
-.assistant-transcript__system-body {
-  display: grid;
-  gap: 0.1rem;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.assistant-transcript__system-meta {
-  align-items: center;
-  color: rgba(var(--v-theme-on-surface), 0.48);
-  display: flex;
-  font-size: 0.72rem;
-  gap: 0.5rem;
-  line-height: 1.15;
-}
-
-.assistant-transcript__message-header {
-  align-items: center;
-  color: rgba(var(--v-theme-on-surface), 0.82);
-  display: flex;
-  font-size: 0.9rem;
-  gap: 0.7rem;
-  justify-content: space-between;
-  line-height: 1.2;
-}
-
-.assistant-transcript__message--assistant .assistant-transcript__message-header {
-  color: rgba(var(--v-theme-on-surface), 0.78);
-  font-weight: 560;
-}
-
-.assistant-transcript__message-header span {
-  align-items: center;
-  display: flex;
-  gap: 0.25rem;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.assistant-transcript__message-header time {
-  color: #6d7888;
-  font-weight: 650;
-}
-
-.assistant-transcript__message-footer {
-  align-items: center;
-  color: #9aa6b6;
-  display: flex;
-  font-size: 0.88rem;
-  font-weight: 500;
-  gap: 0.65rem;
-  line-height: 1.2;
-}
-
-.assistant-transcript__message-footer--user {
-  justify-content: flex-start;
-}
-
-.assistant-transcript__message-footer--assistant {
-  justify-content: flex-start;
-  margin-top: -0.15rem;
-}
-
-.assistant-transcript__optimistic-failure {
-  align-items: center;
-  color: rgba(var(--v-theme-error), 0.92);
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 0.76rem;
-  gap: 0.35rem 0.55rem;
-  line-height: 1.25;
-}
-
-.assistant-transcript__optimistic-actions {
-  align-items: center;
-  display: inline-flex;
-  gap: 0.25rem;
-}
-
-@media (max-width: 600px), (pointer: coarse) {
-  .assistant-transcript__delivery-action {
-    min-height: 3rem;
-    min-width: 3rem;
-  }
-}
-
-.assistant-transcript__message--assistant :deep(.studio-long-text-review__blocks),
-.assistant-transcript__message--user :deep(.studio-long-text-review__blocks) {
-  color: inherit;
-  font-size: 0.94rem;
-  line-height: 1.5;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.assistant-transcript__message--assistant :deep(.studio-long-text-review__paragraph),
-.assistant-transcript__message--user :deep(.studio-long-text-review__paragraph) {
-  font-size: 0.94rem;
-  margin-block: 0;
-}
-
-.assistant-transcript__message--user :deep(.studio-long-text-review__paragraph) {
-  white-space: pre-wrap;
-}
-
-.assistant-transcript__user-content {
-  min-width: 0;
-}
-
-.assistant-transcript__user-content-toggle {
-  align-self: flex-start;
-  font-size: 0.78rem;
-  font-weight: 650;
-  padding: 0;
-}
-
-.assistant-transcript__user-content-toggle:hover,
-.assistant-transcript__user-content-toggle:focus-visible {
-  text-decoration: underline;
-}
-
-.assistant-transcript__message--assistant :deep(.studio-long-text-review__paragraph code),
-.assistant-transcript__message--assistant :deep(.studio-long-text-review__list li > code),
-.assistant-transcript__message--assistant :deep(.studio-long-text-review__table th > code),
-.assistant-transcript__message--assistant :deep(.studio-long-text-review__table td > code),
-.assistant-transcript__message--assistant :deep(.studio-long-text-review__details-summary code),
-.assistant-transcript__message--user :deep(.studio-long-text-review__paragraph code),
-.assistant-transcript__message--user :deep(.studio-long-text-review__list li > code),
-.assistant-transcript__message--user :deep(.studio-long-text-review__table th > code),
-.assistant-transcript__message--user :deep(.studio-long-text-review__table td > code),
-.assistant-transcript__message--user :deep(.studio-long-text-review__details-summary code) {
-  background: rgba(var(--v-theme-primary), 0.07);
-  border: 1px solid rgba(var(--v-theme-primary), 0.14);
-  border-radius: 3px;
-  color: rgba(var(--v-theme-on-surface), 0.9);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  font-size: 0.9em;
-  padding: 0.02rem 0.2rem;
-}
-
-.assistant-transcript__questions {
-  box-sizing: border-box;
-  display: grid;
-  gap: 0.2rem;
-  list-style: none;
-  margin: 0;
-  max-width: 100%;
-  min-width: 0;
-  padding: 0;
-}
-
-.assistant-transcript__question {
-  align-items: start;
-  background: rgba(var(--v-theme-surface), 0.62);
-  border: 1px solid rgba(var(--v-theme-outline), 0.2);
-  border-radius: 8px;
-  box-sizing: border-box;
-  display: grid;
-  gap: 0.32rem;
-  grid-template-columns: auto minmax(0, 1fr);
-  max-width: 100%;
-  min-width: 0;
-  padding: 0.28rem 0.42rem;
-}
-
-.assistant-transcript__question-number {
-  align-items: center;
-  background: rgba(var(--v-theme-primary), 0.1);
-  border: 1px solid rgba(var(--v-theme-primary), 0.2);
-  border-radius: 999px;
-  color: rgb(var(--v-theme-primary));
-  display: inline-flex;
-  font-size: 0.72rem;
-  font-weight: 760;
-  height: 1.35rem;
-  justify-content: center;
-  line-height: 1;
-  min-width: 1.35rem;
-}
-
-.assistant-transcript__question-text {
-  color: rgb(var(--v-theme-on-surface));
-  font-size: 0.9rem;
-  line-height: 1.35;
-  max-width: 100%;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.assistant-transcript__question-content {
-  display: block;
-  min-width: 0;
-}
-
-.assistant-transcript__question-choices {
-  color: rgba(var(--v-theme-on-surface), 0.72);
-  display: inline;
-  font-size: 0.8rem;
-  margin: 0;
-  padding: 0;
-}
-
-.assistant-transcript__question-choices::before {
-  content: " · ";
-}
-
-.assistant-transcript__question-choices li {
-  display: inline;
-  overflow-wrap: anywhere;
-}
-
-.assistant-transcript__question-choices li + li::before {
-  content: " · ";
-}
-
-.assistant-transcript__bottom {
-  height: 1px;
-}
-</style>
+<style scoped src="./AssistantTranscript.css"></style>