@xinghunm/ai-chat 0.2.2 → 0.3.0

package/dist/index.mjs

@@ -16,6 +16,7 @@ import { createStore } from "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",
@@ -517,7 +518,14 @@ var createDefaultChatTransport = ({
 // src/components/ai-chat-provider/index.tsx
 import { jsx } from "@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] = useState(
     () => createChatStore(defaultMode ? { preferredMode: defaultMode } : void 0)
   );
@@ -569,6 +577,7 @@ var AiChatProvider = (props) => {
       sendRef,
       retryRef,
       renderMessageBlock,
+      messageRenderOrder,
       transformStreamPacket: defaultTransformStreamPacket,
       enableImageAttachments
     }),
@@ -579,6 +588,7 @@ var AiChatProvider = (props) => {
       defaultTransformStreamPacket,
       enableImageAttachments,
       labels,
+      messageRenderOrder,
       renderMessageBlock,
       sendRef,
       retryRef,
@@ -590,7 +600,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
 import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
@@ -611,7 +621,7 @@ var useChatStore = (selector) => {
 var CHAT_THREAD_SCROLL_TOP_GAP = 16;
 
 // src/components/chat-thread/components/chat-message-item.tsx
-import { Fragment, memo, useState as useState3 } from "react";
+import { Fragment, memo, useState as useState4 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -851,6 +861,7 @@ var useChatMessageReveal = (message) => {
   ];
   return {
     isAssistantStreaming,
+    isFreshBlockActive,
     displayedContent,
     settledContent,
     freshContent,
@@ -858,6 +869,303 @@ var useChatMessageReveal = (message) => {
   };
 };
 
+// src/components/chat-thread/hooks/use-timeline-block-anchors.ts
+import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3, useState as useState2 } from "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 useTimelineBlockAnchors = ({
+  blocks,
+  displayedTimelineTextLength,
+  isAssistantStreaming,
+  message,
+  messageRenderOrder
+}) => {
+  const [timelineBlockAnchors, setTimelineBlockAnchors] = useState2({});
+  const [visibleTimelineBlockKeys, setVisibleTimelineBlockKeys] = useState2({});
+  const currentTimelineBlockKeys = useMemo3(
+    () => blocks.map((block, index) => getTimelineBlockKey(block, index)).filter((blockKey) => Boolean(blockKey)),
+    [blocks]
+  );
+  const timelineTextStreamLength = useMemo3(
+    () => getTimelineDisplayUnitCount(getTimelineTextStream(message.content, blocks)),
+    [blocks, message.content]
+  );
+  const previousTimelineStateRef = useRef3({
+    messageId: message.id,
+    blockKeys: currentTimelineBlockKeys,
+    textLength: timelineTextStreamLength
+  });
+  const effectiveTimelineBlockAnchors = useMemo3(() => {
+    if (messageRenderOrder !== "timeline" || !isAssistantStreaming) {
+      return timelineBlockAnchors;
+    }
+    const previousTimelineState = previousTimelineStateRef.current;
+    const previousBlockKeys = new Set(previousTimelineState.blockKeys);
+    return currentTimelineBlockKeys.reduce(
+      (acc, blockKey) => {
+        const existingAnchor = timelineBlockAnchors[blockKey];
+        if (existingAnchor !== void 0) {
+          acc[blockKey] = existingAnchor;
+          return acc;
+        }
+        if (!previousBlockKeys.has(blockKey)) {
+          acc[blockKey] = timelineTextStreamLength;
+        }
+        return acc;
+      },
+      { ...timelineBlockAnchors }
+    );
+  }, [
+    currentTimelineBlockKeys,
+    isAssistantStreaming,
+    messageRenderOrder,
+    timelineBlockAnchors,
+    timelineTextStreamLength
+  ]);
+  useEffect2(() => {
+    const previousTimelineState = previousTimelineStateRef.current;
+    if (previousTimelineState.messageId !== message.id) {
+      if (Object.keys(timelineBlockAnchors).length > 0) {
+        setTimelineBlockAnchors({});
+      }
+      if (Object.keys(visibleTimelineBlockKeys).length > 0) {
+        setVisibleTimelineBlockKeys({});
+      }
+      previousTimelineStateRef.current = {
+        messageId: message.id,
+        blockKeys: currentTimelineBlockKeys,
+        textLength: timelineTextStreamLength
+      };
+      return;
+    }
+    if (messageRenderOrder === "timeline" && isAssistantStreaming) {
+      const previousBlockKeys = new Set(previousTimelineState.blockKeys);
+      const nextAnchors = currentTimelineBlockKeys.reduce(
+        (acc, blockKey) => {
+          const existingAnchor = timelineBlockAnchors[blockKey];
+          if (existingAnchor !== void 0) {
+            acc[blockKey] = existingAnchor;
+            return acc;
+          }
+          if (!previousBlockKeys.has(blockKey)) {
+            acc[blockKey] = timelineTextStreamLength;
+          }
+          return acc;
+        },
+        {}
+      );
+      const hasAnchorChanged = Object.keys(nextAnchors).length !== Object.keys(timelineBlockAnchors).length || Object.entries(nextAnchors).some(
+        ([blockKey, anchor]) => timelineBlockAnchors[blockKey] !== anchor
+      );
+      if (hasAnchorChanged) {
+        setTimelineBlockAnchors(nextAnchors);
+      }
+    } else if (messageRenderOrder !== "timeline" && Object.keys(timelineBlockAnchors).length > 0) {
+      setTimelineBlockAnchors({});
+    }
+    previousTimelineStateRef.current = {
+      messageId: message.id,
+      blockKeys: currentTimelineBlockKeys,
+      textLength: timelineTextStreamLength
+    };
+  }, [
+    currentTimelineBlockKeys,
+    isAssistantStreaming,
+    message.id,
+    message.content,
+    messageRenderOrder,
+    timelineBlockAnchors,
+    timelineTextStreamLength,
+    visibleTimelineBlockKeys
+  ]);
+  useEffect2(() => {
+    if (messageRenderOrder !== "timeline") {
+      if (Object.keys(visibleTimelineBlockKeys).length > 0) {
+        setVisibleTimelineBlockKeys({});
+      }
+      return;
+    }
+    const nextVisibleBlockKeys = currentTimelineBlockKeys.reduce(
+      (acc, blockKey) => {
+        if (visibleTimelineBlockKeys[blockKey]) {
+          acc[blockKey] = true;
+          return acc;
+        }
+        const anchor = effectiveTimelineBlockAnchors[blockKey];
+        if (anchor !== void 0 && anchor <= displayedTimelineTextLength) {
+          acc[blockKey] = true;
+        }
+        return acc;
+      },
+      {}
+    );
+    const hasVisibleBlockChanged = Object.keys(nextVisibleBlockKeys).length !== Object.keys(visibleTimelineBlockKeys).length || Object.keys(nextVisibleBlockKeys).some((blockKey) => !visibleTimelineBlockKeys[blockKey]);
+    if (hasVisibleBlockChanged) {
+      setVisibleTimelineBlockKeys(nextVisibleBlockKeys);
+    }
+  }, [
+    currentTimelineBlockKeys,
+    displayedTimelineTextLength,
+    effectiveTimelineBlockAnchors,
+    messageRenderOrder,
+    timelineBlockAnchors,
+    visibleTimelineBlockKeys
+  ]);
+  return {
+    timelineBlockAnchors: effectiveTimelineBlockAnchors,
+    visibleTimelineBlockKeys
+  };
+};
+
 // src/components/chat-thread/components/pde-ai-execution-confirmation-card.tsx
 import styled from "@emotion/styled";
 import { jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
@@ -1068,7 +1376,7 @@ var Value = styled3.span`
 `;
 
 // src/components/chat-thread/components/pde-ai-questionnaire-card.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import styled4 from "@emotion/styled";
 import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var OTHER_OPTION_VALUE = "__other__";
@@ -1170,10 +1478,10 @@ var PDEAIQuestionnaireCardInner = ({
   interactive = false,
   onSubmit
 }) => {
-  const [answers, setAnswers] = useState2(
+  const [answers, setAnswers] = useState3(
     () => createInitialAnswers(questionnaire)
   );
-  const [errorMessage, setErrorMessage] = useState2(null);
+  const [errorMessage, setErrorMessage] = useState3(null);
   const handleSubmit = () => {
     const missingQuestions = questionnaire.questions.filter(
       (question) => question.required && isMissingRequiredAnswer(question, answers)
@@ -1609,7 +1917,7 @@ var Detail = styled5.li`
 
 // src/components/chat-thread/components/image-viewer.tsx
 import styled6 from "@emotion/styled";
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
 import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var Overlay = styled6.div`
   position: fixed;
@@ -1628,8 +1936,8 @@ var Img = styled6.img`
   border-radius: 4px;
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
-  const overlayRef = useRef3(null);
-  useEffect2(() => {
+  const overlayRef = useRef4(null);
+  useEffect3(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -1637,7 +1945,7 @@ var ImageViewer = ({ src, alt, onClose }) => {
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [onClose]);
-  useEffect2(() => {
+  useEffect3(() => {
     overlayRef.current?.focus();
   }, []);
   const stopPropagation = (e) => e.stopPropagation();
@@ -1800,9 +2108,16 @@ var ChatMessageItemView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const { labels } = useChatContext();
-  const [activeImage, setActiveImage] = useState3(void 0);
-  const { displayedBlocks, displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
+  const { labels, messageRenderOrder = "blocks-first" } = useChatContext();
+  const [activeImage, setActiveImage] = useState4(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 ?? [];
@@ -1814,6 +2129,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":
@@ -1870,19 +2201,69 @@ var ChatMessageItemView = ({
         return null;
     }
   };
-  const renderTextContent = () => /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    displayedBlocks.filter((block) => block.content).map((block, index) => /* @__PURE__ */ jsx8(
-      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__ */ jsx8(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__ */ jsxs5(Fragment2, { children: [
+      textBlocks.filter((block) => block.content).map((block, index) => /* @__PURE__ */ jsx8(
+        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__ */ jsx8(ContentBlock, { "data-testid": "chat-message-settled-block", "data-block-tone": "settled", children: renderMarkdownContent(textContent) }) : null
+    ] });
+  };
+  const renderStaticTextSegment = (content) => /* @__PURE__ */ jsx8(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__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsxs5(Bubble, { "data-role": message.role, "data-status": message.status ?? "done", children: [
       /* @__PURE__ */ jsxs5(Header2, { children: [
@@ -1901,17 +2282,18 @@ var ChatMessageItemView = ({
         isStoppedAssistant ? /* @__PURE__ */ jsx8(StatusTag, { "data-testid": "chat-message-stopped-tag", children: labels.stoppedResponse }) : null
       ] }),
       /* @__PURE__ */ jsxs5(Content, { "data-testid": "chat-message-content", children: [
-        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsxs5(ContentStack, { "data-testid": "chat-message-body-stack", children: [
-          shouldRenderStructuredBlocks ? blocks.map((block, index) => /* @__PURE__ */ jsx8(
-            ContentSegment,
-            {
-              "data-testid": "chat-message-content-segment",
-              children: renderChatMessageBlock(block, index)
-            },
-            `${block.type}-${index}`
-          )) : null,
-          hasTextContent ? /* @__PURE__ */ jsx8(ContentSegment, { "data-testid": "chat-message-content-segment", children: renderTextContent() }) : null
-        ] }) : null,
+        shouldRenderStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsx8(ContentStack, { "data-testid": "chat-message-body-stack", children: bodySegments.map((segment, index) => /* @__PURE__ */ jsx8(
+          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__ */ jsx8(AttachmentGrid, { "data-testid": "chat-message-attachment-grid", children: attachments.map((attachment) => /* @__PURE__ */ jsx8(
           AttachmentButton,
           {
@@ -2303,17 +2685,17 @@ var ChatThreadView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const containerRef = useRef4(null);
-  const conversationTurns = useMemo3(
+  const containerRef = useRef5(null);
+  const conversationTurns = useMemo4(
     () => groupConversationTurns(historyMessages, streamingMessage),
     [historyMessages, streamingMessage]
   );
   const latestTurn = conversationTurns[conversationTurns.length - 1];
   const previousTurns = conversationTurns.slice(0, -1);
   const latestUserMessageId = latestTurn?.userMessage?.id;
-  const latestUserMessageRef = useRef4(null);
-  const reservedSpaceFrameRef = useRef4(null);
-  const [latestTurnMinHeight, setLatestTurnMinHeight] = useState4(0);
+  const latestUserMessageRef = useRef5(null);
+  const reservedSpaceFrameRef = useRef5(null);
+  const [latestTurnMinHeight, setLatestTurnMinHeight] = useState5(0);
   const measureLatestTurnMinHeight = useCallback2(() => {
     const container = containerRef.current;
     if (!container)
@@ -2566,7 +2948,7 @@ var RetryButton = styled9.button`
 `;
 
 // src/components/chat-composer/index.tsx
-import { useEffect as useEffect5, useRef as useRef7 } from "react";
+import { useEffect as useEffect6, useRef as useRef8 } from "react";
 import styled14 from "@emotion/styled";
 
 // src/components/chat-composer/lib/chat-composer.ts
@@ -2678,10 +3060,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef7, useState as useState7 } from "react";
 
 // src/components/chat-composer/hooks/use-composer-attachments.ts
-import { useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "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) : "";
@@ -2695,12 +3077,12 @@ var releaseComposerAttachments = (attachments) => {
   attachments.forEach((attachment) => revokeObjectUrl(attachment.previewUrl));
 };
 var useComposerAttachments = () => {
-  const [attachments, setAttachments] = useState5([]);
-  const attachmentsRef = useRef5([]);
-  useEffect3(() => {
+  const [attachments, setAttachments] = useState6([]);
+  const attachmentsRef = useRef6([]);
+  useEffect4(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  useEffect3(
+  useEffect4(
     () => () => {
       releaseComposerAttachments(attachmentsRef.current);
     },
@@ -2813,9 +3195,9 @@ var useChatComposer = () => {
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
   const setSessionMode = useChatStore((s) => s.setSessionMode);
-  const [availableModels, setAvailableModels] = useState6([]);
-  const [isModelsLoading, setIsModelsLoading] = useState6(true);
-  const [isModelsError, setIsModelsError] = useState6(false);
+  const [availableModels, setAvailableModels] = useState7([]);
+  const [isModelsLoading, setIsModelsLoading] = useState7(true);
+  const [isModelsError, setIsModelsError] = useState7(false);
   const fetchModels = useCallback3(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
@@ -2828,31 +3210,31 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [transport]);
-  useEffect4(() => {
+  useEffect5(() => {
     void fetchModels();
   }, [fetchModels]);
   const hasModels = availableModels.length > 0;
-  const [value, setValue] = useState6("");
-  const [selectedModel, setSelectedModel] = useState6("");
-  const [selectedMode, setSelectedModeLocal] = useState6(DEFAULT_CHAT_AGENT_MODE);
-  const [attachmentNotice, setAttachmentNotice] = useState6(null);
+  const [value, setValue] = useState7("");
+  const [selectedModel, setSelectedModel] = useState7("");
+  const [selectedMode, setSelectedModeLocal] = useState7(DEFAULT_CHAT_AGENT_MODE);
+  const [attachmentNotice, setAttachmentNotice] = useState7(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
-  const abortControllerRef = useRef6(null);
-  const stopRequestRef = useRef6(null);
-  const lastRequestRef = useRef6(null);
-  useEffect4(() => {
+  const abortControllerRef = useRef7(null);
+  const stopRequestRef = useRef7(null);
+  const lastRequestRef = useRef7(null);
+  useEffect5(() => {
     setSelectedModel(
       (current) => resolveSelectedChatModel({ currentModel: current, availableModels, isModelsLoading })
     );
   }, [availableModels, isModelsLoading]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (activeSession) {
       setSelectedModeLocal(activeSession.mode ?? DEFAULT_CHAT_AGENT_MODE);
       return;
     }
     setSelectedModeLocal(preferredMode ?? DEFAULT_CHAT_AGENT_MODE);
   }, [activeSession, preferredMode]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!attachmentNotice)
       return;
     const timeoutId = window.setTimeout(
@@ -3131,14 +3513,14 @@ var useChatComposer = () => {
 };
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import styled10 from "@emotion/styled";
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var ChatComposerAttachmentList = ({
   attachments,
   onRemoveAttachment
 }) => {
-  const [activeImage, setActiveImage] = useState7(null);
+  const [activeImage, setActiveImage] = useState8(null);
   if (!attachments.length) {
     return null;
   }
@@ -3630,7 +4012,7 @@ var ChatComposerView = ({
   onStop,
   onSend
 }) => {
-  const imageInputRef = useRef7(null);
+  const imageInputRef = useRef8(null);
   const canSend = canSendChatMessage({
     value,
     attachmentCount: attachments.length,
@@ -3742,7 +4124,7 @@ var ChatComposer = () => {
   const { labels, sendRef, retryRef, enableImageAttachments } = useChatContext();
   const { state, actions } = useChatComposer();
   const { send, retry } = actions;
-  useEffect5(() => {
+  useEffect6(() => {
     sendRef.current = send;
     retryRef.current = async () => {
       retry();
@@ -4061,6 +4443,7 @@ export {
   AiChat,
   AiChatProvider,
   CHAT_AGENT_MODES,
+  CHAT_MESSAGE_RENDER_ORDERS,
   ChatComposer,
   ChatConversationList,
   ChatThread,