@xinghunm/ai-chat 0.2.2 → 0.4.0

package/dist/index.js

@@ -33,6 +33,7 @@ __export(src_exports, {
   AiChat: () => AiChat,
   AiChatProvider: () => AiChatProvider,
   CHAT_AGENT_MODES: () => CHAT_AGENT_MODES,
+  CHAT_MESSAGE_RENDER_ORDERS: () => CHAT_MESSAGE_RENDER_ORDERS,
   ChatComposer: () => ChatComposer,
   ChatConversationList: () => ChatConversationList,
   ChatThread: () => ChatThread,
@@ -62,6 +63,7 @@ var import_vanilla = require("zustand/vanilla");
 // src/types/index.ts
 var CHAT_AGENT_MODES = ["ask", "plan", "agent"];
 var DEFAULT_CHAT_AGENT_MODE = "agent";
+var CHAT_MESSAGE_RENDER_ORDERS = ["blocks-first", "timeline"];
 var DEFAULT_AI_CHAT_LABELS = {
   sendButton: "Send",
   stopButton: "Stop",
@@ -563,7 +565,14 @@ var createDefaultChatTransport = ({
 // src/components/ai-chat-provider/index.tsx
 var import_jsx_runtime = require("@emotion/react/jsx-runtime");
 var AiChatProvider = (props) => {
-  const { defaultMode, labels, renderMessageBlock, enableImageAttachments = true, children } = props;
+  const {
+    defaultMode,
+    labels,
+    renderMessageBlock,
+    messageRenderOrder,
+    enableImageAttachments = true,
+    children
+  } = props;
   const [store] = (0, import_react2.useState)(
     () => createChatStore(defaultMode ? { preferredMode: defaultMode } : void 0)
   );
@@ -615,6 +624,7 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       renderMessageBlock,
+      messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
       enableImageAttachments
     }),
@@ -625,6 +635,7 @@ var AiChatProvider = (props) => {
       defaultTransformStreamPacket,
       enableImageAttachments,
       labels,
+      messageRenderOrder,
       renderMessageBlock,
       sendRef,
       retryRef,
@@ -636,7 +647,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_styled9 = __toESM(require("@emotion/styled"));
 
 // src/context/use-chat-context.ts
@@ -657,9 +668,9 @@ var useChatStore = (selector) => {
 var CHAT_THREAD_SCROLL_TOP_GAP = 16;
 
 // src/components/chat-thread/components/chat-message-item.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_styled7 = __toESM(require("@emotion/styled"));
-var import_react9 = require("@emotion/react");
+var import_react10 = require("@emotion/react");
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_remark_math = __toESM(require("remark-math"));
@@ -897,6 +908,7 @@ var useChatMessageReveal = (message) => {
   ];
   return {
     isAssistantStreaming,
+    isFreshBlockActive,
     displayedContent,
     settledContent,
     freshContent,
@@ -904,6 +916,325 @@ var useChatMessageReveal = (message) => {
   };
 };
 
+// src/components/chat-thread/hooks/use-timeline-block-anchors.ts
+var import_react6 = require("react");
+
+// src/components/chat-thread/lib/chat-message-timeline.ts
+var stringifyTimelineKeyPart = (value) => {
+  if (value === null || value === void 0) {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return `[${value.map((item) => stringifyTimelineKeyPart(item)).join(",")}]`;
+  }
+  if (typeof value === "object") {
+    return `{${Object.entries(value).sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)).map(([key, nestedValue]) => `${key}:${stringifyTimelineKeyPart(nestedValue)}`).join(",")}}`;
+  }
+  return String(value);
+};
+var getTimelineBlockKey = (block, index) => {
+  switch (block.type) {
+    case "markdown":
+      return null;
+    case "notice":
+      return `${index}:notice:${block.tone}:${block.text}`;
+    case "parameter_summary":
+      return `${index}:parameter_summary:${block.items.map((item) => `${item.label}:${item.value}:${item.fieldPath ?? ""}`).join("|")}`;
+    case "confirmation_card":
+      return `${index}:confirmation_card:${block.proposal.proposalId}`;
+    case "result_summary":
+      return `${index}:result_summary:${block.summary.taskId}:${block.summary.status}`;
+    case "questionnaire":
+      return `${index}:questionnaire:${block.questionnaire.questionnaireId}`;
+    case "custom":
+      return `${index}:custom:${block.kind}:${stringifyTimelineKeyPart(block.data)}`;
+    default:
+      return null;
+  }
+};
+var getTimelineConsumedText = (blocks) => blocks.filter(
+  (block) => block.type === "markdown"
+).map((block) => block.text).join("\n\n");
+var getTimelineTextStream = (content, blocks) => {
+  const consumedText = getTimelineConsumedText(blocks);
+  if (consumedText.length > 0 && content.startsWith(consumedText)) {
+    return content.slice(consumedText.length);
+  }
+  return content;
+};
+var buildTimelineTextDisplay = (content, isAssistantStreaming, isFreshBlockActive = isAssistantStreaming) => {
+  const contentBlocks = splitMarkdownBlocks(content);
+  const settledContent = isAssistantStreaming && isFreshBlockActive && contentBlocks.length > 1 ? contentBlocks.slice(0, -1).join("\n\n") : content;
+  const freshContent = isAssistantStreaming && isFreshBlockActive && contentBlocks.length > 1 ? contentBlocks[contentBlocks.length - 1] ?? "" : "";
+  const displayedBlocks = contentBlocks.length > 1 ? contentBlocks.map((blockContent, index) => ({
+    content: blockContent,
+    tone: isAssistantStreaming && isFreshBlockActive && freshContent && index === contentBlocks.length - 1 ? "fresh" : "settled"
+  })) : [{ content, tone: "settled" }];
+  return {
+    settledContent,
+    freshContent,
+    displayedBlocks
+  };
+};
+var getTimelineDisplayUnitCount = (content) => splitMarkdownBlocks(content).reduce((count, block) => count + Array.from(block).length, 0);
+var buildAnchoredTimelineSegments = ({
+  blocks,
+  timelineBlockAnchors,
+  timelineDisplayedBlocks,
+  visibleTimelineBlockKeys
+}) => {
+  const orderedTimelineSegments = [];
+  const totalTimelineUnits = timelineDisplayedBlocks.reduce(
+    (count, block) => count + Array.from(block.content).length,
+    0
+  );
+  let textCursor = 0;
+  const buildTextSegment = (start, end, options) => {
+    if (end <= start) {
+      return null;
+    }
+    const displayedBlocks = [];
+    let blockCursor = 0;
+    for (const block of timelineDisplayedBlocks) {
+      const blockUnits = Array.from(block.content);
+      const blockStart = blockCursor;
+      const blockEnd = blockCursor + blockUnits.length;
+      if (blockEnd <= start) {
+        blockCursor = blockEnd;
+        continue;
+      }
+      if (blockStart >= end) {
+        break;
+      }
+      const sliceStart = Math.max(0, start - blockStart);
+      const sliceEnd = Math.min(blockUnits.length, end - blockStart);
+      const slicedContent = blockUnits.slice(sliceStart, sliceEnd).join("");
+      if (slicedContent) {
+        displayedBlocks.push({
+          content: slicedContent,
+          tone: options?.forceSettled ? "settled" : block.tone
+        });
+      }
+      blockCursor = blockEnd;
+    }
+    const content = displayedBlocks.map((block) => block.content).join("\n\n");
+    if (!content) {
+      return null;
+    }
+    return {
+      type: "text",
+      content,
+      displayedBlocks,
+      useTimelineSegmentation: true
+    };
+  };
+  let trailingCutoff = totalTimelineUnits;
+  for (const [index, block] of blocks.entries()) {
+    if (block.type === "markdown") {
+      orderedTimelineSegments.push({
+        type: "markdown",
+        content: block.text
+      });
+      continue;
+    }
+    const blockKey = getTimelineBlockKey(block, index);
+    const anchor = blockKey !== null ? timelineBlockAnchors[blockKey] ?? totalTimelineUnits : totalTimelineUnits;
+    const isBlockVisible = blockKey !== null && visibleTimelineBlockKeys?.[blockKey] ? true : anchor <= totalTimelineUnits;
+    if (anchor > textCursor) {
+      const textSegment = buildTextSegment(textCursor, Math.min(anchor, totalTimelineUnits), {
+        forceSettled: isBlockVisible
+      });
+      if (textSegment) {
+        orderedTimelineSegments.push(textSegment);
+      }
+    }
+    if (!isBlockVisible) {
+      textCursor = Math.min(anchor, totalTimelineUnits);
+      trailingCutoff = Math.min(trailingCutoff, textCursor);
+      continue;
+    }
+    trailingCutoff = totalTimelineUnits;
+    orderedTimelineSegments.push({
+      type: "block",
+      block,
+      index
+    });
+    textCursor = Math.max(textCursor, anchor);
+  }
+  const trailingTextSegment = buildTextSegment(textCursor, trailingCutoff);
+  if (trailingTextSegment) {
+    orderedTimelineSegments.push(trailingTextSegment);
+  }
+  return orderedTimelineSegments;
+};
+
+// src/components/chat-thread/hooks/use-timeline-block-anchors.ts
+var createTimelineAnchorState = ({
+  messageId,
+  currentBlockKeys
+}) => ({
+  messageId,
+  previousBlockKeys: currentBlockKeys,
+  timelineBlockAnchors: {},
+  visibleTimelineBlockKeys: {}
+});
+var timelineAnchorReducer = (state, action) => {
+  switch (action.type) {
+    case "reset-message":
+      if (state.messageId === action.messageId) {
+        return state;
+      }
+      return createTimelineAnchorState(action);
+    case "sync-anchors": {
+      const previousBlockKeys = new Set(state.previousBlockKeys);
+      const nextAnchors = action.currentBlockKeys.reduce(
+        (acc, blockKey) => {
+          const existingAnchor = state.timelineBlockAnchors[blockKey];
+          if (existingAnchor !== void 0) {
+            acc[blockKey] = existingAnchor;
+            return acc;
+          }
+          if (!previousBlockKeys.has(blockKey)) {
+            acc[blockKey] = action.timelineTextStreamLength;
+          }
+          return acc;
+        },
+        {}
+      );
+      const hasAnchorChanged = Object.keys(nextAnchors).length !== Object.keys(state.timelineBlockAnchors).length || Object.entries(nextAnchors).some(
+        ([blockKey, anchor]) => state.timelineBlockAnchors[blockKey] !== anchor
+      );
+      const hasPreviousKeysChanged = action.currentBlockKeys.length !== state.previousBlockKeys.length || action.currentBlockKeys.some(
+        (blockKey, index) => state.previousBlockKeys[index] !== blockKey
+      );
+      if (!hasAnchorChanged && !hasPreviousKeysChanged) {
+        return state;
+      }
+      return {
+        ...state,
+        previousBlockKeys: action.currentBlockKeys,
+        timelineBlockAnchors: hasAnchorChanged ? nextAnchors : state.timelineBlockAnchors
+      };
+    }
+    case "sync-visible": {
+      const nextVisibleBlockKeys = action.currentBlockKeys.reduce(
+        (acc, blockKey) => {
+          if (state.visibleTimelineBlockKeys[blockKey]) {
+            acc[blockKey] = true;
+            return acc;
+          }
+          const anchor = action.effectiveTimelineBlockAnchors[blockKey];
+          if (anchor !== void 0 && anchor <= action.displayedTimelineTextLength) {
+            acc[blockKey] = true;
+          }
+          return acc;
+        },
+        {}
+      );
+      const hasVisibleBlockChanged = Object.keys(nextVisibleBlockKeys).length !== Object.keys(state.visibleTimelineBlockKeys).length || Object.keys(nextVisibleBlockKeys).some(
+        (blockKey) => !state.visibleTimelineBlockKeys[blockKey]
+      );
+      if (!hasVisibleBlockChanged) {
+        return state;
+      }
+      return {
+        ...state,
+        visibleTimelineBlockKeys: nextVisibleBlockKeys
+      };
+    }
+    default:
+      return state;
+  }
+};
+var useTimelineBlockAnchors = ({
+  blocks,
+  displayedTimelineTextLength,
+  isAssistantStreaming,
+  message,
+  messageRenderOrder
+}) => {
+  const currentTimelineBlockKeys = (0, import_react6.useMemo)(
+    () => blocks.map((block, index) => getTimelineBlockKey(block, index)).filter((blockKey) => Boolean(blockKey)),
+    [blocks]
+  );
+  const timelineTextStreamLength = (0, import_react6.useMemo)(
+    () => getTimelineDisplayUnitCount(getTimelineTextStream(message.content, blocks)),
+    [blocks, message.content]
+  );
+  const [state, dispatch] = (0, import_react6.useReducer)(
+    timelineAnchorReducer,
+    {
+      messageId: message.id,
+      currentBlockKeys: currentTimelineBlockKeys
+    },
+    createTimelineAnchorState
+  );
+  const effectiveTimelineBlockAnchors = (0, import_react6.useMemo)(() => {
+    if (messageRenderOrder !== "timeline" || !isAssistantStreaming) {
+      return state.timelineBlockAnchors;
+    }
+    const previousBlockKeys = new Set(state.previousBlockKeys);
+    return currentTimelineBlockKeys.reduce(
+      (acc, blockKey) => {
+        const existingAnchor = state.timelineBlockAnchors[blockKey];
+        if (existingAnchor !== void 0) {
+          acc[blockKey] = existingAnchor;
+          return acc;
+        }
+        if (!previousBlockKeys.has(blockKey)) {
+          acc[blockKey] = timelineTextStreamLength;
+        }
+        return acc;
+      },
+      { ...state.timelineBlockAnchors }
+    );
+  }, [
+    currentTimelineBlockKeys,
+    isAssistantStreaming,
+    messageRenderOrder,
+    state.previousBlockKeys,
+    state.timelineBlockAnchors,
+    timelineTextStreamLength
+  ]);
+  (0, import_react6.useEffect)(() => {
+    dispatch({
+      type: "reset-message",
+      messageId: message.id,
+      currentBlockKeys: currentTimelineBlockKeys
+    });
+  }, [currentTimelineBlockKeys, message.id]);
+  (0, import_react6.useEffect)(() => {
+    if (messageRenderOrder !== "timeline" || !isAssistantStreaming) {
+      return;
+    }
+    dispatch({
+      type: "sync-anchors",
+      currentBlockKeys: currentTimelineBlockKeys,
+      timelineTextStreamLength
+    });
+  }, [currentTimelineBlockKeys, isAssistantStreaming, messageRenderOrder, timelineTextStreamLength]);
+  (0, import_react6.useEffect)(() => {
+    if (messageRenderOrder !== "timeline") {
+      return;
+    }
+    dispatch({
+      type: "sync-visible",
+      currentBlockKeys: currentTimelineBlockKeys,
+      effectiveTimelineBlockAnchors,
+      displayedTimelineTextLength
+    });
+  }, [
+    currentTimelineBlockKeys,
+    displayedTimelineTextLength,
+    effectiveTimelineBlockAnchors,
+    messageRenderOrder
+  ]);
+  return {
+    timelineBlockAnchors: messageRenderOrder === "timeline" ? effectiveTimelineBlockAnchors : {},
+    visibleTimelineBlockKeys: messageRenderOrder === "timeline" ? state.visibleTimelineBlockKeys : {}
+  };
+};
+
 // src/components/chat-thread/components/pde-ai-execution-confirmation-card.tsx
 var import_styled = __toESM(require("@emotion/styled"));
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
@@ -1114,7 +1445,7 @@ var Value = import_styled3.default.span`
 `;
 
 // src/components/chat-thread/components/pde-ai-questionnaire-card.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_styled4 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
 var OTHER_OPTION_VALUE = "__other__";
@@ -1216,10 +1547,10 @@ var PDEAIQuestionnaireCardInner = ({
   interactive = false,
   onSubmit
 }) => {
-  const [answers, setAnswers] = (0, import_react6.useState)(
+  const [answers, setAnswers] = (0, import_react7.useState)(
     () => createInitialAnswers(questionnaire)
   );
-  const [errorMessage, setErrorMessage] = (0, import_react6.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react7.useState)(null);
   const handleSubmit = () => {
     const missingQuestions = questionnaire.questions.filter(
       (question) => question.required && isMissingRequiredAnswer(question, answers)
@@ -1655,7 +1986,7 @@ var Detail = import_styled5.default.li`
 
 // src/components/chat-thread/components/image-viewer.tsx
 var import_styled6 = __toESM(require("@emotion/styled"));
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
 var Overlay = import_styled6.default.div`
   position: fixed;
@@ -1674,8 +2005,8 @@ var Img = import_styled6.default.img`
   border-radius: 4px;
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
-  const overlayRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+  const overlayRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -1683,7 +2014,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [onClose]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     overlayRef.current?.focus();
   }, []);
   const stopPropagation = (e) => e.stopPropagation();
@@ -1846,9 +2177,16 @@ var ChatMessageItemView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const { labels } = useChatContext();
-  const [activeImage, setActiveImage] = (0, import_react8.useState)(void 0);
-  const { displayedBlocks, displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
+  const { labels, messageRenderOrder = "blocks-first" } = useChatContext();
+  const [activeImage, setActiveImage] = (0, import_react9.useState)(void 0);
+  const {
+    displayedBlocks,
+    displayedContent,
+    freshContent,
+    isAssistantStreaming,
+    isFreshBlockActive,
+    settledContent
+  } = useChatMessageReveal(message);
   const isStoppedAssistant = message.role === "assistant" && message.status === "stopped";
   const attachments = message.attachments ?? [];
   const blocks = message.blocks ?? [];
@@ -1860,6 +2198,22 @@ var ChatMessageItemView = ({
   const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
   const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
   const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
+  const timelineConsumedText = messageRenderOrder === "timeline" ? getTimelineConsumedText(blocks) : "";
+  const hasConsumedTimelineText = timelineConsumedText.length > 0 && displayedContent.startsWith(timelineConsumedText);
+  const timelineDisplayedContent = hasConsumedTimelineText ? displayedContent.slice(timelineConsumedText.length) : displayedContent;
+  const timelineTextDisplay = buildTimelineTextDisplay(
+    timelineDisplayedContent,
+    isAssistantStreaming,
+    isFreshBlockActive
+  );
+  const displayedTimelineTextLength = getTimelineDisplayUnitCount(timelineDisplayedContent);
+  const { timelineBlockAnchors, visibleTimelineBlockKeys } = useTimelineBlockAnchors({
+    blocks,
+    displayedTimelineTextLength,
+    isAssistantStreaming,
+    message,
+    messageRenderOrder
+  });
   const renderChatMessageBlock = (block, index) => {
     switch (block.type) {
       case "markdown":
@@ -1873,11 +2227,11 @@ var ChatMessageItemView = ({
           `markdown-${index}`
         );
       case "notice":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAINoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAINoticeCard, { text: block.text, tone: block.tone }) }, `notice-${index}`);
       case "parameter_summary":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIParameterSummaryCard, { items: block.items }) }, `parameter-summary-${index}`);
       case "confirmation_card":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           PDEAIExecutionConfirmationCard,
           {
             proposal: block.proposal,
@@ -1890,9 +2244,9 @@ var ChatMessageItemView = ({
           }
         ) }, `confirmation-card-${index}`);
       case "result_summary":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PDEAIResultSummaryCard, { summary: block.summary }) }, `result-summary-${index}`);
       case "questionnaire":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           PDEAIQuestionnaireCard,
           {
             questionnaire: block.questionnaire,
@@ -1904,7 +2258,7 @@ var ChatMessageItemView = ({
           }
         ) }, `questionnaire-${index}`);
       case "custom":
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: renderMessageBlock?.({
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.Fragment, { children: renderMessageBlock?.({
           block,
           index,
           message,
@@ -1916,19 +2270,69 @@ var ChatMessageItemView = ({
         return null;
     }
   };
-  const renderTextContent = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    displayedBlocks.filter((block) => block.content).map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      ContentBlock,
-      {
-        "data-testid": block.tone === "fresh" ? "chat-message-fresh-block" : "chat-message-settled-block",
-        "data-block-tone": block.tone,
-        "data-block-index": index,
-        children: renderMarkdownContent(block.content)
-      },
-      `${block.tone}-${index}`
-    )),
-    !displayedBlocks.some((block) => block.content) && !settledContent && !freshContent && hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(displayedContent) }) : null
-  ] });
+  const renderTextContent = (options) => {
+    const textContent = options?.content ?? displayedContent;
+    const localTimelineTextDisplay = options?.displayedBlocks ? void 0 : options?.useTimelineSegmentation && options.content !== void 0 ? buildTimelineTextDisplay(options.content, isAssistantStreaming, isFreshBlockActive) : void 0;
+    const textBlocks = options?.displayedBlocks ?? localTimelineTextDisplay?.displayedBlocks ?? displayedBlocks;
+    const settledText = localTimelineTextDisplay?.settledContent ?? settledContent;
+    const freshText = localTimelineTextDisplay?.freshContent ?? freshContent;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      textBlocks.filter((block) => block.content).map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ContentBlock,
+        {
+          "data-testid": block.tone === "fresh" ? "chat-message-fresh-block" : "chat-message-settled-block",
+          "data-block-tone": block.tone,
+          "data-block-index": index,
+          children: renderMarkdownContent(block.content)
+        },
+        `${block.tone}-${index}`
+      )),
+      !textBlocks.some((block) => block.content) && !settledText && !freshText && Boolean(textContent) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(textContent) }) : null
+    ] });
+  };
+  const renderStaticTextSegment = (content) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(content) });
+  const bodySegments = (() => {
+    if (!shouldRenderStructuredBlocks && hasTextContent) {
+      return [{ type: "text" }];
+    }
+    if (!shouldRenderStructuredBlocks) {
+      return [];
+    }
+    if (messageRenderOrder === "timeline" && hasTextContent) {
+      const hasAnchoredStructuredBlocks = blocks.some((block, index) => {
+        const blockKey = getTimelineBlockKey(block, index);
+        return blockKey ? timelineBlockAnchors[blockKey] !== void 0 : false;
+      });
+      if (hasAnchoredStructuredBlocks) {
+        return buildAnchoredTimelineSegments({
+          blocks,
+          timelineBlockAnchors,
+          timelineDisplayedBlocks: timelineTextDisplay.displayedBlocks,
+          visibleTimelineBlockKeys
+        });
+      }
+      const orderedTimelineSegments = blocks.map(
+        (block, index) => block.type === "markdown" ? {
+          type: "markdown",
+          content: block.text
+        } : {
+          type: "block",
+          block,
+          index
+        }
+      );
+      if (!timelineConsumedText) {
+        return displayedContent ? [{ type: "text", content: displayedContent }, ...orderedTimelineSegments] : orderedTimelineSegments;
+      }
+      return timelineDisplayedContent ? [...orderedTimelineSegments, { type: "text", content: timelineDisplayedContent }] : orderedTimelineSegments;
+    }
+    const orderedBlocks = blocks.map((block, index) => ({
+      type: "block",
+      block,
+      index
+    }));
+    return hasTextContent ? [...orderedBlocks, { type: "text" }] : orderedBlocks;
+  })();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Bubble, { "data-role": message.role, "data-status": message.status ?? "done", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Header2, { children: [
@@ -1947,17 +2351,18 @@ var ChatMessageItemView = ({
         isStoppedAssistant ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Content, { "data-testid": "chat-message-content", children: [
-        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ContentStack, { "data-testid": "chat-message-body-stack", children: [
-          shouldRenderStructuredBlocks ? blocks.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            ContentSegment,
-            {
-              "data-testid": "chat-message-content-segment",
-              children: renderChatMessageBlock(block, index)
-            },
-            `${block.type}-${index}`
-          )) : null,
-          hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentSegment, { "data-testid": "chat-message-content-segment", children: renderTextContent() }) : null
-        ] }) : null,
+        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContentStack, { "data-testid": "chat-message-body-stack", children: bodySegments.map((segment, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ContentSegment,
+          {
+            "data-testid": "chat-message-content-segment",
+            children: segment.type === "block" ? renderChatMessageBlock(segment.block, segment.index) : segment.type === "text" ? segment.content !== void 0 ? segment.useTimelineSegmentation ? renderTextContent({
+              content: segment.content,
+              displayedBlocks: segment.displayedBlocks,
+              useTimelineSegmentation: true
+            }) : renderStaticTextSegment(segment.content) : renderTextContent() : renderStaticTextSegment(segment.content)
+          },
+          segment.type === "text" ? `text-${index}` : segment.type === "markdown" ? `markdown-${index}` : `${segment.block.type}-${segment.index}`
+        )) }) : null,
         attachments.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AttachmentGrid, { "data-testid": "chat-message-attachment-grid", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           AttachmentButton,
           {
@@ -1984,7 +2389,7 @@ var ChatMessageItemView = ({
     ) : null
   ] });
 };
-var ChatMessageItem = (0, import_react8.memo)(
+var ChatMessageItem = (0, import_react9.memo)(
   ChatMessageItemView,
   (previousProps, nextProps) => isSameMessage(
     previousProps.message,
@@ -2129,7 +2534,7 @@ var AttachmentImage = import_styled7.default.img`
 var TableWrapper = import_styled7.default.div`
   overflow-x: auto;
 `;
-var caretBlink = import_react9.keyframes`
+var caretBlink = import_react10.keyframes`
   0%, 49% {
     opacity: 1;
   }
@@ -2138,7 +2543,7 @@ var caretBlink = import_react9.keyframes`
     opacity: 0.2;
   }
 `;
-var shimmer = import_react9.keyframes`
+var shimmer = import_react10.keyframes`
   0%, 100% {
     transform: scale(0.9) rotate(0deg);
     opacity: 0.55;
@@ -2349,18 +2754,18 @@ var ChatThreadView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const containerRef = (0, import_react10.useRef)(null);
-  const conversationTurns = (0, import_react10.useMemo)(
+  const containerRef = (0, import_react11.useRef)(null);
+  const conversationTurns = (0, import_react11.useMemo)(
     () => groupConversationTurns(historyMessages, streamingMessage),
     [historyMessages, streamingMessage]
   );
   const latestTurn = conversationTurns[conversationTurns.length - 1];
   const previousTurns = conversationTurns.slice(0, -1);
   const latestUserMessageId = latestTurn?.userMessage?.id;
-  const latestUserMessageRef = (0, import_react10.useRef)(null);
-  const reservedSpaceFrameRef = (0, import_react10.useRef)(null);
-  const [latestTurnMinHeight, setLatestTurnMinHeight] = (0, import_react10.useState)(0);
-  const measureLatestTurnMinHeight = (0, import_react10.useCallback)(() => {
+  const latestUserMessageRef = (0, import_react11.useRef)(null);
+  const reservedSpaceFrameRef = (0, import_react11.useRef)(null);
+  const [latestTurnMinHeight, setLatestTurnMinHeight] = (0, import_react11.useState)(0);
+  const measureLatestTurnMinHeight = (0, import_react11.useCallback)(() => {
     const container = containerRef.current;
     if (!container)
       return;
@@ -2370,7 +2775,7 @@ var ChatThreadView = ({
     const nextMinHeight = Math.max(0, container.clientHeight - paddingTop - paddingBottom);
     setLatestTurnMinHeight((current) => current === nextMinHeight ? current : nextMinHeight);
   }, []);
-  const scrollLatestUserMessageToTop = (0, import_react10.useCallback)(() => {
+  const scrollLatestUserMessageToTop = (0, import_react11.useCallback)(() => {
     const container = containerRef.current;
     const target = latestUserMessageRef.current;
     if (!container || !target)
@@ -2390,7 +2795,7 @@ var ChatThreadView = ({
     }
     container.scrollTop = nextScrollTop;
   }, []);
-  (0, import_react10.useLayoutEffect)(() => {
+  (0, import_react11.useLayoutEffect)(() => {
     if (reservedSpaceFrameRef.current !== null) {
       window.cancelAnimationFrame(reservedSpaceFrameRef.current);
       reservedSpaceFrameRef.current = null;
@@ -2419,7 +2824,7 @@ var ChatThreadView = ({
       }
     };
   }, [latestUserMessageId, measureLatestTurnMinHeight, scrollLatestUserMessageToTop]);
-  (0, import_react10.useLayoutEffect)(() => {
+  (0, import_react11.useLayoutEffect)(() => {
     if (!latestUserMessageId)
       return;
     const handleResize = () => {
@@ -2507,13 +2912,13 @@ var ChatThread = () => {
   const updateQA = useChatStore((s) => s.updateQuestionnaireAnswers);
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const { sendRef, retryRef, renderMessageBlock, labels } = useChatContext();
-  const handleRetry = (0, import_react10.useCallback)(() => {
+  const handleRetry = (0, import_react11.useCallback)(() => {
     if (!activeSessionId)
       return;
     clearSessionError(activeSessionId);
     void retryRef.current();
   }, [activeSessionId, clearSessionError, retryRef]);
-  const handleQuestionnaireSubmit = (0, import_react10.useCallback)(
+  const handleQuestionnaireSubmit = (0, import_react11.useCallback)(
     (submission) => {
       if (activeSessionId && submission.sourceMessageId) {
         updateQA(
@@ -2527,7 +2932,7 @@ var ChatThread = () => {
     },
     [activeSessionId, updateQA, sendRef]
   );
-  const handleConfirmationSubmit = (0, import_react10.useCallback)(
+  const handleConfirmationSubmit = (0, import_react11.useCallback)(
     (submission) => {
       void sendRef.current(submission.content);
     },
@@ -2612,7 +3017,7 @@ var RetryButton = import_styled9.default.button`
 `;
 
 // src/components/chat-composer/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_styled14 = __toESM(require("@emotion/styled"));
 
 // src/components/chat-composer/lib/chat-composer.ts
@@ -2724,10 +3129,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var SUPPORTED_IMAGE_MIME_TYPES = /* @__PURE__ */ new Set(["image/png", "image/jpeg", "image/webp"]);
 var MAX_COMPOSER_ATTACHMENTS = 10;
 var createObjectUrl = (file) => typeof URL !== "undefined" && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : "";
@@ -2741,12 +3146,12 @@ var releaseComposerAttachments = (attachments) => {
   attachments.forEach((attachment) => revokeObjectUrl(attachment.previewUrl));
 };
 var useComposerAttachments = () => {
-  const [attachments, setAttachments] = (0, import_react11.useState)([]);
-  const attachmentsRef = (0, import_react11.useRef)([]);
-  (0, import_react11.useEffect)(() => {
+  const [attachments, setAttachments] = (0, import_react12.useState)([]);
+  const attachmentsRef = (0, import_react12.useRef)([]);
+  (0, import_react12.useEffect)(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  (0, import_react11.useEffect)(
+  (0, import_react12.useEffect)(
     () => () => {
       releaseComposerAttachments(attachmentsRef.current);
     },
@@ -2859,10 +3264,10 @@ var useChatComposer = () => {
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
   const setSessionMode = useChatStore((s) => s.setSessionMode);
-  const [availableModels, setAvailableModels] = (0, import_react12.useState)([]);
-  const [isModelsLoading, setIsModelsLoading] = (0, import_react12.useState)(true);
-  const [isModelsError, setIsModelsError] = (0, import_react12.useState)(false);
-  const fetchModels = (0, import_react12.useCallback)(async () => {
+  const [availableModels, setAvailableModels] = (0, import_react13.useState)([]);
+  const [isModelsLoading, setIsModelsLoading] = (0, import_react13.useState)(true);
+  const [isModelsError, setIsModelsError] = (0, import_react13.useState)(false);
+  const fetchModels = (0, import_react13.useCallback)(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
     try {
@@ -2874,31 +3279,31 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [transport]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     void fetchModels();
   }, [fetchModels]);
   const hasModels = availableModels.length > 0;
-  const [value, setValue] = (0, import_react12.useState)("");
-  const [selectedModel, setSelectedModel] = (0, import_react12.useState)("");
-  const [selectedMode, setSelectedModeLocal] = (0, import_react12.useState)(DEFAULT_CHAT_AGENT_MODE);
-  const [attachmentNotice, setAttachmentNotice] = (0, import_react12.useState)(null);
+  const [value, setValue] = (0, import_react13.useState)("");
+  const [selectedModel, setSelectedModel] = (0, import_react13.useState)("");
+  const [selectedMode, setSelectedModeLocal] = (0, import_react13.useState)(DEFAULT_CHAT_AGENT_MODE);
+  const [attachmentNotice, setAttachmentNotice] = (0, import_react13.useState)(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
-  const abortControllerRef = (0, import_react12.useRef)(null);
-  const stopRequestRef = (0, import_react12.useRef)(null);
-  const lastRequestRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const abortControllerRef = (0, import_react13.useRef)(null);
+  const stopRequestRef = (0, import_react13.useRef)(null);
+  const lastRequestRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
     );
   }, [availableModels, isModelsLoading]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (activeSession) {
       setSelectedModeLocal(activeSession.mode ?? DEFAULT_CHAT_AGENT_MODE);
       return;
     }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [activeSession, preferredMode]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!attachmentNotice)
       return;
     const timeoutId = window.setTimeout(
@@ -2917,7 +3322,7 @@ var useChatComposer = () => {
       stopRequestRef.current.timeoutId = null;
     }
   };
-  const clearStopRequest = (0, import_react12.useCallback)((sessionId) => {
+  const clearStopRequest = (0, import_react13.useCallback)((sessionId) => {
     if (!stopRequestRef.current)
       return;
     if (sessionId && stopRequestRef.current.sessionId !== sessionId)
@@ -2925,7 +3330,7 @@ var useChatComposer = () => {
     clearStopTimeout(sessionId);
     stopRequestRef.current = null;
   }, []);
-  const finalizeStop = (0, import_react12.useCallback)(
+  const finalizeStop = (0, import_react13.useCallback)(
     (sessionId) => {
       if (stopRequestRef.current?.sessionId === sessionId) {
         if (stopRequestRef.current.finalized)
@@ -2940,7 +3345,7 @@ var useChatComposer = () => {
     },
     [clearStopRequest, finalizeStoppedStreamingMessage]
   );
-  const runStream = (0, import_react12.useCallback)(
+  const runStream = (0, import_react13.useCallback)(
     async ({
       localSessionId,
       sessionId,
@@ -3029,7 +3434,7 @@ var useChatComposer = () => {
       setSessionError
     ]
   );
-  const send = (0, import_react12.useCallback)(
+  const send = (0, import_react13.useCallback)(
     async (contentOverride) => {
       const content = (contentOverride ?? value).trim();
       const hasText = Boolean(content);
@@ -3177,14 +3582,14 @@ var useChatComposer = () => {
 };
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_styled10 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
 var ChatComposerAttachmentList = ({
   attachments,
   onRemoveAttachment
 }) => {
-  const [activeImage, setActiveImage] = (0, import_react13.useState)(null);
+  const [activeImage, setActiveImage] = (0, import_react14.useState)(null);
   if (!attachments.length) {
     return null;
   }
@@ -3676,7 +4081,7 @@ var ChatComposerView = ({
   onStop,
   onSend
 }) => {
-  const imageInputRef = (0, import_react14.useRef)(null);
+  const imageInputRef = (0, import_react15.useRef)(null);
   const canSend = canSendChatMessage({
     value,
     attachmentCount: attachments.length,
@@ -3788,7 +4193,7 @@ var ChatComposer = () => {
   const { labels, sendRef, retryRef, enableImageAttachments } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     sendRef.current = send;
     retryRef.current = async () => {
       retry();
@@ -3909,10 +4314,10 @@ var AttachButton = import_styled14.default.button`
 var import_styled16 = __toESM(require("@emotion/styled"));
 
 // src/components/chat-conversation-list/components/chat-session-item.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_styled15 = __toESM(require("@emotion/styled"));
 var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
-var ChatSessionItem = (0, import_react15.memo)(
+var ChatSessionItem = (0, import_react16.memo)(
   ({ session, isActive, modeLabel, onClick }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       SessionButton,
@@ -4108,6 +4513,7 @@ var Workspace = import_styled17.default.section`
   AiChat,
   AiChatProvider,
   CHAT_AGENT_MODES,
+  CHAT_MESSAGE_RENDER_ORDERS,
   ChatComposer,
   ChatConversationList,
   ChatThread,