@xinghunm/ai-chat 0.2.2 → 0.4.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 useRef4, useState as useState4 } from "react";
 import styled9 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
@@ -851,6 +861,7 @@ var useChatMessageReveal = (message) => {
   ];
   return {
     isAssistantStreaming,
+    isFreshBlockActive,
     displayedContent,
     settledContent,
     freshContent,
@@ -858,6 +869,325 @@ var useChatMessageReveal = (message) => {
   };
 };
 
+// src/components/chat-thread/hooks/use-timeline-block-anchors.ts
+import { useEffect as useEffect2, useMemo as useMemo3, useReducer as useReducer2 } 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 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 = 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 [state, dispatch] = useReducer2(
+    timelineAnchorReducer,
+    {
+      messageId: message.id,
+      currentBlockKeys: currentTimelineBlockKeys
+    },
+    createTimelineAnchorState
+  );
+  const effectiveTimelineBlockAnchors = useMemo3(() => {
+    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
+  ]);
+  useEffect2(() => {
+    dispatch({
+      type: "reset-message",
+      messageId: message.id,
+      currentBlockKeys: currentTimelineBlockKeys
+    });
+  }, [currentTimelineBlockKeys, message.id]);
+  useEffect2(() => {
+    if (messageRenderOrder !== "timeline" || !isAssistantStreaming) {
+      return;
+    }
+    dispatch({
+      type: "sync-anchors",
+      currentBlockKeys: currentTimelineBlockKeys,
+      timelineTextStreamLength
+    });
+  }, [currentTimelineBlockKeys, isAssistantStreaming, messageRenderOrder, timelineTextStreamLength]);
+  useEffect2(() => {
+    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
 import styled from "@emotion/styled";
 import { jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
@@ -1609,7 +1939,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 useRef3 } from "react";
 import { jsx as jsx7 } from "@emotion/react/jsx-runtime";
 var Overlay = styled6.div`
   position: fixed;
@@ -1629,7 +1959,7 @@ var Img = styled6.img`
 `;
 var ImageViewer = ({ src, alt, onClose }) => {
   const overlayRef = useRef3(null);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleKey = (e) => {
       if (e.key === "Escape")
         onClose();
@@ -1637,7 +1967,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 +2130,16 @@ var ChatMessageItemView = ({
   onQuestionnaireSubmit,
   renderMessageBlock
 }) => {
-  const { labels } = useChatContext();
+  const { labels, messageRenderOrder = "blocks-first" } = useChatContext();
   const [activeImage, setActiveImage] = useState3(void 0);
-  const { displayedBlocks, displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
+  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 +2151,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 +2223,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 +2304,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,
           {
@@ -2304,7 +2708,7 @@ var ChatThreadView = ({
   renderMessageBlock
 }) => {
   const containerRef = useRef4(null);
-  const conversationTurns = useMemo3(
+  const conversationTurns = useMemo4(
     () => groupConversationTurns(historyMessages, streamingMessage),
     [historyMessages, streamingMessage]
   );
@@ -2566,7 +2970,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 useRef7 } from "react";
 import styled14 from "@emotion/styled";
 
 // src/components/chat-composer/lib/chat-composer.ts
@@ -2678,10 +3082,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 useRef6, useState as useState6 } 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 useRef5, useState as useState5 } 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) : "";
@@ -2697,10 +3101,10 @@ var releaseComposerAttachments = (attachments) => {
 var useComposerAttachments = () => {
   const [attachments, setAttachments] = useState5([]);
   const attachmentsRef = useRef5([]);
-  useEffect3(() => {
+  useEffect4(() => {
     attachmentsRef.current = attachments;
   }, [attachments]);
-  useEffect3(
+  useEffect4(
     () => () => {
       releaseComposerAttachments(attachmentsRef.current);
     },
@@ -2828,7 +3232,7 @@ var useChatComposer = () => {
       setIsModelsLoading(false);
     }
   }, [transport]);
-  useEffect4(() => {
+  useEffect5(() => {
     void fetchModels();
   }, [fetchModels]);
   const hasModels = availableModels.length > 0;
@@ -2840,19 +3244,19 @@ var useChatComposer = () => {
   const abortControllerRef = useRef6(null);
   const stopRequestRef = useRef6(null);
   const lastRequestRef = useRef6(null);
-  useEffect4(() => {
+  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(
@@ -3742,7 +4146,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 +4465,7 @@ export {
   AiChat,
   AiChatProvider,
   CHAT_AGENT_MODES,
+  CHAT_MESSAGE_RENDER_ORDERS,
   ChatComposer,
   ChatConversationList,
   ChatThread,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xinghunm/ai-chat",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "AI chat React component library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",