@xinghunm/ai-chat 0.1.0 → 0.2.1

package/dist/index.js

@@ -729,96 +729,112 @@ var getNextDisplayedUnitCount = ({
 var splitMarkdownBlocks = (content) => content.split(/\n{2,}/).map((block) => block.trim()).filter(Boolean);
 
 // src/components/chat-thread/hooks/use-chat-message-reveal.ts
+var createRevealState = ({
+  isAssistantStreaming,
+  targetUnitCount
+}) => {
+  const initialDisplayedUnitCount = isAssistantStreaming ? 0 : targetUnitCount;
+  return {
+    batchedTargetUnitCount: initialDisplayedUnitCount,
+    displayedUnitCount: initialDisplayedUnitCount,
+    isFreshBlockActive: false
+  };
+};
+var revealReducer = (state, action) => {
+  switch (action.type) {
+    case "reset-message":
+      return createRevealState(action);
+    case "commit-batched-target": {
+      const nextDisplayedUnitCount = action.role === "assistant" ? getNextDisplayedUnitCount({
+        currentUnits: state.displayedUnitCount,
+        targetUnits: action.nextTargetUnitCount,
+        isStreaming: action.isAssistantStreaming,
+        minimumStep: state.displayedUnitCount > 0 && action.isAssistantStreaming ? 2 : 1
+      }) : action.nextTargetUnitCount;
+      return {
+        ...state,
+        batchedTargetUnitCount: action.nextTargetUnitCount,
+        displayedUnitCount: nextDisplayedUnitCount
+      };
+    }
+    case "set-fresh-block-active":
+      return state.isFreshBlockActive === action.isActive ? state : {
+        ...state,
+        isFreshBlockActive: action.isActive
+      };
+    case "sync-displayed-target":
+      return state.displayedUnitCount === state.batchedTargetUnitCount ? state : {
+        ...state,
+        displayedUnitCount: state.batchedTargetUnitCount
+      };
+    case "advance-reveal": {
+      if (state.displayedUnitCount >= state.batchedTargetUnitCount) {
+        return state;
+      }
+      return {
+        ...state,
+        displayedUnitCount: Math.min(
+          state.batchedTargetUnitCount,
+          getNextDisplayedUnitCount({
+            currentUnits: state.displayedUnitCount,
+            targetUnits: state.batchedTargetUnitCount,
+            isStreaming: action.isAssistantStreaming
+          })
+        )
+      };
+    }
+    default:
+      return state;
+  }
+};
 var useChatMessageReveal = (message) => {
   const isAssistantStreaming = message.role === "assistant" && message.status === "streaming";
   const targetContent = message.content || "";
   const targetUnits = (0, import_react5.useMemo)(() => Array.from(targetContent), [targetContent]);
-  const resetSnapshot = (0, import_react5.useMemo)(
-    () => ({
-      messageId: message.id,
-      initialTargetUnitCount: targetUnits.length,
-      initialBatchedTargetUnitCount: isAssistantStreaming ? 0 : targetUnits.length
-    }),
-    [isAssistantStreaming, message.id, targetUnits.length]
-  );
   const pendingTargetUnitCountRef = (0, import_react5.useRef)(targetUnits.length);
   const batchedTargetUnitCountRef = (0, import_react5.useRef)(isAssistantStreaming ? 0 : targetUnits.length);
   const inputBatchTimeoutRef = (0, import_react5.useRef)(null);
-  const commitAnimationFrameRef = (0, import_react5.useRef)(null);
-  const freshBlockActivationFrameRef = (0, import_react5.useRef)(null);
-  const displayedUnitSyncFrameRef = (0, import_react5.useRef)(null);
-  const resetAnimationFrameRef = (0, import_react5.useRef)(null);
-  const [batchedTargetUnitCount, setBatchedTargetUnitCount] = (0, import_react5.useState)(
-    () => isAssistantStreaming ? 0 : targetUnits.length
-  );
   const lastDisplayedBlockCountRef = (0, import_react5.useRef)(0);
-  const [displayedUnitCount, setDisplayedUnitCount] = (0, import_react5.useState)(
-    () => isAssistantStreaming ? 0 : targetUnits.length
+  const previousMessageIdRef = (0, import_react5.useRef)(message.id);
+  const [state, dispatch] = (0, import_react5.useReducer)(
+    revealReducer,
+    {
+      isAssistantStreaming,
+      targetUnitCount: targetUnits.length
+    },
+    createRevealState
   );
-  const [isFreshBlockActive, setIsFreshBlockActive] = (0, import_react5.useState)(false);
+  const { batchedTargetUnitCount, displayedUnitCount, isFreshBlockActive } = state;
   const commitBatchedTargetUnitCount = (0, import_react5.useCallback)(
     (nextTargetUnitCount) => {
       batchedTargetUnitCountRef.current = nextTargetUnitCount;
-      setBatchedTargetUnitCount(nextTargetUnitCount);
-      setDisplayedUnitCount(
-        (current) => message.role === "assistant" ? getNextDisplayedUnitCount({
-          currentUnits: current,
-          targetUnits: nextTargetUnitCount,
-          isStreaming: isAssistantStreaming,
-          minimumStep: current > 0 && isAssistantStreaming ? 2 : 1
-        }) : nextTargetUnitCount
-      );
-    },
-    [isAssistantStreaming, message.role]
-  );
-  const scheduleBatchedTargetUnitCountCommit = (0, import_react5.useCallback)(
-    (nextTargetUnitCount) => {
-      if (commitAnimationFrameRef.current !== null) {
-        window.cancelAnimationFrame(commitAnimationFrameRef.current);
-      }
-      commitAnimationFrameRef.current = window.requestAnimationFrame(() => {
-        commitAnimationFrameRef.current = null;
-        commitBatchedTargetUnitCount(nextTargetUnitCount);
+      dispatch({
+        type: "commit-batched-target",
+        isAssistantStreaming,
+        nextTargetUnitCount,
+        role: message.role
       });
     },
-    [commitBatchedTargetUnitCount]
+    [isAssistantStreaming, message.role]
   );
   (0, import_react5.useEffect)(() => {
-    pendingTargetUnitCountRef.current = resetSnapshot.initialTargetUnitCount;
-    batchedTargetUnitCountRef.current = resetSnapshot.initialBatchedTargetUnitCount;
+    if (previousMessageIdRef.current === message.id) {
+      return;
+    }
+    previousMessageIdRef.current = message.id;
+    pendingTargetUnitCountRef.current = targetUnits.length;
+    batchedTargetUnitCountRef.current = isAssistantStreaming ? 0 : targetUnits.length;
     lastDisplayedBlockCountRef.current = 0;
     if (inputBatchTimeoutRef.current !== null) {
       window.clearTimeout(inputBatchTimeoutRef.current);
       inputBatchTimeoutRef.current = null;
     }
-    if (commitAnimationFrameRef.current !== null) {
-      window.cancelAnimationFrame(commitAnimationFrameRef.current);
-      commitAnimationFrameRef.current = null;
-    }
-    if (freshBlockActivationFrameRef.current !== null) {
-      window.cancelAnimationFrame(freshBlockActivationFrameRef.current);
-      freshBlockActivationFrameRef.current = null;
-    }
-    if (displayedUnitSyncFrameRef.current !== null) {
-      window.cancelAnimationFrame(displayedUnitSyncFrameRef.current);
-      displayedUnitSyncFrameRef.current = null;
-    }
-    if (resetAnimationFrameRef.current !== null) {
-      window.cancelAnimationFrame(resetAnimationFrameRef.current);
-    }
-    resetAnimationFrameRef.current = window.requestAnimationFrame(() => {
-      resetAnimationFrameRef.current = null;
-      setBatchedTargetUnitCount(resetSnapshot.initialBatchedTargetUnitCount);
-      setDisplayedUnitCount(resetSnapshot.initialBatchedTargetUnitCount);
-      setIsFreshBlockActive(false);
+    dispatch({
+      type: "reset-message",
+      isAssistantStreaming,
+      targetUnitCount: targetUnits.length
     });
-    return () => {
-      if (resetAnimationFrameRef.current !== null) {
-        window.cancelAnimationFrame(resetAnimationFrameRef.current);
-        resetAnimationFrameRef.current = null;
-      }
-    };
-  }, [resetSnapshot]);
+  }, [isAssistantStreaming, message.id, targetUnits.length]);
   (0, import_react5.useEffect)(() => {
     pendingTargetUnitCountRef.current = targetUnits.length;
     if (message.role !== "assistant" || !isAssistantStreaming) {
@@ -826,14 +842,14 @@ var useChatMessageReveal = (message) => {
         window.clearTimeout(inputBatchTimeoutRef.current);
         inputBatchTimeoutRef.current = null;
       }
-      scheduleBatchedTargetUnitCountCommit(targetUnits.length);
+      commitBatchedTargetUnitCount(targetUnits.length);
       return;
     }
     if (targetUnits.length <= batchedTargetUnitCountRef.current) {
       return;
     }
     if (batchedTargetUnitCountRef.current === 0) {
-      scheduleBatchedTargetUnitCountCommit(targetUnits.length);
+      commitBatchedTargetUnitCount(targetUnits.length);
       return;
     }
     if (inputBatchTimeoutRef.current !== null) {
@@ -849,13 +865,7 @@ var useChatMessageReveal = (message) => {
         inputBatchTimeoutRef.current = null;
       }
     };
-  }, [
-    commitBatchedTargetUnitCount,
-    isAssistantStreaming,
-    message.role,
-    scheduleBatchedTargetUnitCountCommit,
-    targetUnits.length
-  ]);
+  }, [commitBatchedTargetUnitCount, isAssistantStreaming, message.role, targetUnits.length]);
   const displayedContent = (0, import_react5.useMemo)(
     () => targetUnits.slice(0, displayedUnitCount).join(""),
     [displayedUnitCount, targetUnits]
@@ -867,18 +877,11 @@ var useChatMessageReveal = (message) => {
     if (!hasNewDisplayedBlock) {
       return;
     }
-    freshBlockActivationFrameRef.current = window.requestAnimationFrame(() => {
-      freshBlockActivationFrameRef.current = null;
-      setIsFreshBlockActive(true);
-    });
+    dispatch({ type: "set-fresh-block-active", isActive: true });
     const timer = window.setTimeout(() => {
-      setIsFreshBlockActive(false);
+      dispatch({ type: "set-fresh-block-active", isActive: false });
     }, STREAM_FRESH_BLOCK_SETTLE_MS);
     return () => {
-      if (freshBlockActivationFrameRef.current !== null) {
-        window.cancelAnimationFrame(freshBlockActivationFrameRef.current);
-        freshBlockActivationFrameRef.current = null;
-      }
       window.clearTimeout(timer);
     };
   }, [contentBlocks.length, message.role]);
@@ -886,40 +889,19 @@ var useChatMessageReveal = (message) => {
     const shouldAnimateReveal = message.role === "assistant" && displayedUnitCount < batchedTargetUnitCount && (isAssistantStreaming || displayedUnitCount > 0);
     if (!shouldAnimateReveal) {
       if (displayedUnitCount !== batchedTargetUnitCount) {
-        displayedUnitSyncFrameRef.current = window.requestAnimationFrame(() => {
-          displayedUnitSyncFrameRef.current = null;
-          setDisplayedUnitCount(batchedTargetUnitCount);
-        });
+        dispatch({ type: "sync-displayed-target" });
       }
-      return () => {
-        if (displayedUnitSyncFrameRef.current !== null) {
-          window.cancelAnimationFrame(displayedUnitSyncFrameRef.current);
-          displayedUnitSyncFrameRef.current = null;
-        }
-      };
+      return;
     }
     const timer = window.setInterval(() => {
-      setDisplayedUnitCount((current) => {
-        if (current >= batchedTargetUnitCount) {
-          window.clearInterval(timer);
-          return current;
-        }
-        return Math.min(
-          batchedTargetUnitCount,
-          getNextDisplayedUnitCount({
-            currentUnits: current,
-            targetUnits: batchedTargetUnitCount,
-            isStreaming: isAssistantStreaming
-          })
-        );
-      });
+      dispatch({ type: "advance-reveal", isAssistantStreaming });
     }, STREAM_REVEAL_TICK_MS);
     return () => {
       window.clearInterval(timer);
     };
   }, [batchedTargetUnitCount, displayedUnitCount, isAssistantStreaming, message.role]);
   const settledContent = isFreshBlockActive ? contentBlocks.slice(0, -1).join("\n\n") : displayedContent;
-  const freshContent = isFreshBlockActive ? contentBlocks.at(-1) ?? "" : "";
+  const freshContent = isFreshBlockActive ? contentBlocks[contentBlocks.length - 1] ?? "" : "";
   return {
     isAssistantStreaming,
     displayedContent,
@@ -1877,11 +1859,13 @@ var ChatMessageItemView = ({
   const attachments = message.attachments ?? [];
   const blocks = message.blocks ?? [];
   const hasStructuredBlocks = blocks.length > 0;
+  const hasMarkdownOnlyBlocks = hasStructuredBlocks && blocks.every((block) => block.type === "markdown");
   const hasTextContent = Boolean(settledContent || freshContent || displayedContent);
+  const shouldRenderStructuredBlocks = hasStructuredBlocks && !(isAssistantStreaming && hasMarkdownOnlyBlocks && hasTextContent);
   const isPlanMode = mode === "plan";
   const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
   const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
-  const shouldShowStreamingCaret = isAssistantStreaming && (!hasStructuredBlocks || hasTextContent);
+  const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
   const renderChatMessageBlock = (block, index) => {
     switch (block.type) {
       case "markdown":
@@ -1961,8 +1945,8 @@ 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: [
-        hasStructuredBlocks || hasTextContent ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ContentStack, { "data-testid": "chat-message-body-stack", children: [
-          hasStructuredBlocks ? blocks.map((block, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        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",

package/dist/index.mjs

@@ -590,7 +590,7 @@ var AiChatProvider = (props) => {
 };
 
 // src/components/chat-thread/index.tsx
-import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
 import styled10 from "@emotion/styled";
 
 // src/context/use-chat-context.ts
@@ -627,7 +627,7 @@ var calculateChatThreadScrollSpacerHeight = ({
 );
 
 // src/components/chat-thread/components/chat-message-item.tsx
-import { Fragment, memo, useState as useState4 } from "react";
+import { Fragment, memo, useState as useState3 } from "react";
 import styled7 from "@emotion/styled";
 import { keyframes } from "@emotion/react";
 import ReactMarkdown from "react-markdown";
@@ -636,7 +636,7 @@ import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 
 // src/components/chat-thread/hooks/use-chat-message-reveal.ts
-import { useCallback, useEffect, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback, useEffect, useMemo as useMemo2, useReducer, useRef as useRef2 } from "react";
 
 // src/components/chat-thread/lib/message-reveal.ts
 var STREAM_REVEAL_TICK_MS = 36;
@@ -683,96 +683,112 @@ var getNextDisplayedUnitCount = ({
 var splitMarkdownBlocks = (content) => content.split(/\n{2,}/).map((block) => block.trim()).filter(Boolean);
 
 // src/components/chat-thread/hooks/use-chat-message-reveal.ts
+var createRevealState = ({
+  isAssistantStreaming,
+  targetUnitCount
+}) => {
+  const initialDisplayedUnitCount = isAssistantStreaming ? 0 : targetUnitCount;
+  return {
+    batchedTargetUnitCount: initialDisplayedUnitCount,
+    displayedUnitCount: initialDisplayedUnitCount,
+    isFreshBlockActive: false
+  };
+};
+var revealReducer = (state, action) => {
+  switch (action.type) {
+    case "reset-message":
+      return createRevealState(action);
+    case "commit-batched-target": {
+      const nextDisplayedUnitCount = action.role === "assistant" ? getNextDisplayedUnitCount({
+        currentUnits: state.displayedUnitCount,
+        targetUnits: action.nextTargetUnitCount,
+        isStreaming: action.isAssistantStreaming,
+        minimumStep: state.displayedUnitCount > 0 && action.isAssistantStreaming ? 2 : 1
+      }) : action.nextTargetUnitCount;
+      return {
+        ...state,
+        batchedTargetUnitCount: action.nextTargetUnitCount,
+        displayedUnitCount: nextDisplayedUnitCount
+      };
+    }
+    case "set-fresh-block-active":
+      return state.isFreshBlockActive === action.isActive ? state : {
+        ...state,
+        isFreshBlockActive: action.isActive
+      };
+    case "sync-displayed-target":
+      return state.displayedUnitCount === state.batchedTargetUnitCount ? state : {
+        ...state,
+        displayedUnitCount: state.batchedTargetUnitCount
+      };
+    case "advance-reveal": {
+      if (state.displayedUnitCount >= state.batchedTargetUnitCount) {
+        return state;
+      }
+      return {
+        ...state,
+        displayedUnitCount: Math.min(
+          state.batchedTargetUnitCount,
+          getNextDisplayedUnitCount({
+            currentUnits: state.displayedUnitCount,
+            targetUnits: state.batchedTargetUnitCount,
+            isStreaming: action.isAssistantStreaming
+          })
+        )
+      };
+    }
+    default:
+      return state;
+  }
+};
 var useChatMessageReveal = (message) => {
   const isAssistantStreaming = message.role === "assistant" && message.status === "streaming";
   const targetContent = message.content || "";
   const targetUnits = useMemo2(() => Array.from(targetContent), [targetContent]);
-  const resetSnapshot = useMemo2(
-    () => ({
-      messageId: message.id,
-      initialTargetUnitCount: targetUnits.length,
-      initialBatchedTargetUnitCount: isAssistantStreaming ? 0 : targetUnits.length
-    }),
-    [isAssistantStreaming, message.id, targetUnits.length]
-  );
   const pendingTargetUnitCountRef = useRef2(targetUnits.length);
   const batchedTargetUnitCountRef = useRef2(isAssistantStreaming ? 0 : targetUnits.length);
   const inputBatchTimeoutRef = useRef2(null);
-  const commitAnimationFrameRef = useRef2(null);
-  const freshBlockActivationFrameRef = useRef2(null);
-  const displayedUnitSyncFrameRef = useRef2(null);
-  const resetAnimationFrameRef = useRef2(null);
-  const [batchedTargetUnitCount, setBatchedTargetUnitCount] = useState2(
-    () => isAssistantStreaming ? 0 : targetUnits.length
-  );
   const lastDisplayedBlockCountRef = useRef2(0);
-  const [displayedUnitCount, setDisplayedUnitCount] = useState2(
-    () => isAssistantStreaming ? 0 : targetUnits.length
+  const previousMessageIdRef = useRef2(message.id);
+  const [state, dispatch] = useReducer(
+    revealReducer,
+    {
+      isAssistantStreaming,
+      targetUnitCount: targetUnits.length
+    },
+    createRevealState
   );
-  const [isFreshBlockActive, setIsFreshBlockActive] = useState2(false);
+  const { batchedTargetUnitCount, displayedUnitCount, isFreshBlockActive } = state;
   const commitBatchedTargetUnitCount = useCallback(
     (nextTargetUnitCount) => {
       batchedTargetUnitCountRef.current = nextTargetUnitCount;
-      setBatchedTargetUnitCount(nextTargetUnitCount);
-      setDisplayedUnitCount(
-        (current) => message.role === "assistant" ? getNextDisplayedUnitCount({
-          currentUnits: current,
-          targetUnits: nextTargetUnitCount,
-          isStreaming: isAssistantStreaming,
-          minimumStep: current > 0 && isAssistantStreaming ? 2 : 1
-        }) : nextTargetUnitCount
-      );
-    },
-    [isAssistantStreaming, message.role]
-  );
-  const scheduleBatchedTargetUnitCountCommit = useCallback(
-    (nextTargetUnitCount) => {
-      if (commitAnimationFrameRef.current !== null) {
-        window.cancelAnimationFrame(commitAnimationFrameRef.current);
-      }
-      commitAnimationFrameRef.current = window.requestAnimationFrame(() => {
-        commitAnimationFrameRef.current = null;
-        commitBatchedTargetUnitCount(nextTargetUnitCount);
+      dispatch({
+        type: "commit-batched-target",
+        isAssistantStreaming,
+        nextTargetUnitCount,
+        role: message.role
       });
     },
-    [commitBatchedTargetUnitCount]
+    [isAssistantStreaming, message.role]
   );
   useEffect(() => {
-    pendingTargetUnitCountRef.current = resetSnapshot.initialTargetUnitCount;
-    batchedTargetUnitCountRef.current = resetSnapshot.initialBatchedTargetUnitCount;
+    if (previousMessageIdRef.current === message.id) {
+      return;
+    }
+    previousMessageIdRef.current = message.id;
+    pendingTargetUnitCountRef.current = targetUnits.length;
+    batchedTargetUnitCountRef.current = isAssistantStreaming ? 0 : targetUnits.length;
     lastDisplayedBlockCountRef.current = 0;
     if (inputBatchTimeoutRef.current !== null) {
       window.clearTimeout(inputBatchTimeoutRef.current);
       inputBatchTimeoutRef.current = null;
     }
-    if (commitAnimationFrameRef.current !== null) {
-      window.cancelAnimationFrame(commitAnimationFrameRef.current);
-      commitAnimationFrameRef.current = null;
-    }
-    if (freshBlockActivationFrameRef.current !== null) {
-      window.cancelAnimationFrame(freshBlockActivationFrameRef.current);
-      freshBlockActivationFrameRef.current = null;
-    }
-    if (displayedUnitSyncFrameRef.current !== null) {
-      window.cancelAnimationFrame(displayedUnitSyncFrameRef.current);
-      displayedUnitSyncFrameRef.current = null;
-    }
-    if (resetAnimationFrameRef.current !== null) {
-      window.cancelAnimationFrame(resetAnimationFrameRef.current);
-    }
-    resetAnimationFrameRef.current = window.requestAnimationFrame(() => {
-      resetAnimationFrameRef.current = null;
-      setBatchedTargetUnitCount(resetSnapshot.initialBatchedTargetUnitCount);
-      setDisplayedUnitCount(resetSnapshot.initialBatchedTargetUnitCount);
-      setIsFreshBlockActive(false);
+    dispatch({
+      type: "reset-message",
+      isAssistantStreaming,
+      targetUnitCount: targetUnits.length
     });
-    return () => {
-      if (resetAnimationFrameRef.current !== null) {
-        window.cancelAnimationFrame(resetAnimationFrameRef.current);
-        resetAnimationFrameRef.current = null;
-      }
-    };
-  }, [resetSnapshot]);
+  }, [isAssistantStreaming, message.id, targetUnits.length]);
   useEffect(() => {
     pendingTargetUnitCountRef.current = targetUnits.length;
     if (message.role !== "assistant" || !isAssistantStreaming) {
@@ -780,14 +796,14 @@ var useChatMessageReveal = (message) => {
         window.clearTimeout(inputBatchTimeoutRef.current);
         inputBatchTimeoutRef.current = null;
       }
-      scheduleBatchedTargetUnitCountCommit(targetUnits.length);
+      commitBatchedTargetUnitCount(targetUnits.length);
       return;
     }
     if (targetUnits.length <= batchedTargetUnitCountRef.current) {
       return;
     }
     if (batchedTargetUnitCountRef.current === 0) {
-      scheduleBatchedTargetUnitCountCommit(targetUnits.length);
+      commitBatchedTargetUnitCount(targetUnits.length);
       return;
     }
     if (inputBatchTimeoutRef.current !== null) {
@@ -803,13 +819,7 @@ var useChatMessageReveal = (message) => {
         inputBatchTimeoutRef.current = null;
       }
     };
-  }, [
-    commitBatchedTargetUnitCount,
-    isAssistantStreaming,
-    message.role,
-    scheduleBatchedTargetUnitCountCommit,
-    targetUnits.length
-  ]);
+  }, [commitBatchedTargetUnitCount, isAssistantStreaming, message.role, targetUnits.length]);
   const displayedContent = useMemo2(
     () => targetUnits.slice(0, displayedUnitCount).join(""),
     [displayedUnitCount, targetUnits]
@@ -821,18 +831,11 @@ var useChatMessageReveal = (message) => {
     if (!hasNewDisplayedBlock) {
       return;
     }
-    freshBlockActivationFrameRef.current = window.requestAnimationFrame(() => {
-      freshBlockActivationFrameRef.current = null;
-      setIsFreshBlockActive(true);
-    });
+    dispatch({ type: "set-fresh-block-active", isActive: true });
     const timer = window.setTimeout(() => {
-      setIsFreshBlockActive(false);
+      dispatch({ type: "set-fresh-block-active", isActive: false });
     }, STREAM_FRESH_BLOCK_SETTLE_MS);
     return () => {
-      if (freshBlockActivationFrameRef.current !== null) {
-        window.cancelAnimationFrame(freshBlockActivationFrameRef.current);
-        freshBlockActivationFrameRef.current = null;
-      }
       window.clearTimeout(timer);
     };
   }, [contentBlocks.length, message.role]);
@@ -840,40 +843,19 @@ var useChatMessageReveal = (message) => {
     const shouldAnimateReveal = message.role === "assistant" && displayedUnitCount < batchedTargetUnitCount && (isAssistantStreaming || displayedUnitCount > 0);
     if (!shouldAnimateReveal) {
       if (displayedUnitCount !== batchedTargetUnitCount) {
-        displayedUnitSyncFrameRef.current = window.requestAnimationFrame(() => {
-          displayedUnitSyncFrameRef.current = null;
-          setDisplayedUnitCount(batchedTargetUnitCount);
-        });
+        dispatch({ type: "sync-displayed-target" });
       }
-      return () => {
-        if (displayedUnitSyncFrameRef.current !== null) {
-          window.cancelAnimationFrame(displayedUnitSyncFrameRef.current);
-          displayedUnitSyncFrameRef.current = null;
-        }
-      };
+      return;
     }
     const timer = window.setInterval(() => {
-      setDisplayedUnitCount((current) => {
-        if (current >= batchedTargetUnitCount) {
-          window.clearInterval(timer);
-          return current;
-        }
-        return Math.min(
-          batchedTargetUnitCount,
-          getNextDisplayedUnitCount({
-            currentUnits: current,
-            targetUnits: batchedTargetUnitCount,
-            isStreaming: isAssistantStreaming
-          })
-        );
-      });
+      dispatch({ type: "advance-reveal", isAssistantStreaming });
     }, STREAM_REVEAL_TICK_MS);
     return () => {
       window.clearInterval(timer);
     };
   }, [batchedTargetUnitCount, displayedUnitCount, isAssistantStreaming, message.role]);
   const settledContent = isFreshBlockActive ? contentBlocks.slice(0, -1).join("\n\n") : displayedContent;
-  const freshContent = isFreshBlockActive ? contentBlocks.at(-1) ?? "" : "";
+  const freshContent = isFreshBlockActive ? contentBlocks[contentBlocks.length - 1] ?? "" : "";
   return {
     isAssistantStreaming,
     displayedContent,
@@ -1092,7 +1074,7 @@ var Value = styled3.span`
 `;
 
 // src/components/chat-thread/components/pde-ai-questionnaire-card.tsx
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 import styled4 from "@emotion/styled";
 import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
 var OTHER_OPTION_VALUE = "__other__";
@@ -1194,10 +1176,10 @@ var PDEAIQuestionnaireCardInner = ({
   interactive = false,
   onSubmit
 }) => {
-  const [answers, setAnswers] = useState3(
+  const [answers, setAnswers] = useState2(
     () => createInitialAnswers(questionnaire)
   );
-  const [errorMessage, setErrorMessage] = useState3(null);
+  const [errorMessage, setErrorMessage] = useState2(null);
   const handleSubmit = () => {
     const missingQuestions = questionnaire.questions.filter(
       (question) => question.required && isMissingRequiredAnswer(question, answers)
@@ -1825,17 +1807,19 @@ var ChatMessageItemView = ({
   renderMessageBlock
 }) => {
   const { labels } = useChatContext();
-  const [activeImage, setActiveImage] = useState4(void 0);
+  const [activeImage, setActiveImage] = useState3(void 0);
   const { displayedContent, freshContent, isAssistantStreaming, settledContent } = useChatMessageReveal(message);
   const isStoppedAssistant = message.role === "assistant" && message.status === "stopped";
   const attachments = message.attachments ?? [];
   const blocks = message.blocks ?? [];
   const hasStructuredBlocks = blocks.length > 0;
+  const hasMarkdownOnlyBlocks = hasStructuredBlocks && blocks.every((block) => block.type === "markdown");
   const hasTextContent = Boolean(settledContent || freshContent || displayedContent);
+  const shouldRenderStructuredBlocks = hasStructuredBlocks && !(isAssistantStreaming && hasMarkdownOnlyBlocks && hasTextContent);
   const isPlanMode = mode === "plan";
   const canSubmitConfirmation = isPlanMode && typeof onConfirmationSubmit === "function";
   const canSubmitQuestionnaire = isPlanMode && typeof onQuestionnaireSubmit === "function";
-  const shouldShowStreamingCaret = isAssistantStreaming && (!hasStructuredBlocks || hasTextContent);
+  const shouldShowStreamingCaret = isAssistantStreaming && (!shouldRenderStructuredBlocks || hasTextContent);
   const renderChatMessageBlock = (block, index) => {
     switch (block.type) {
       case "markdown":
@@ -1915,8 +1899,8 @@ 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: [
-        hasStructuredBlocks || hasTextContent ? /* @__PURE__ */ jsxs5(ContentStack, { "data-testid": "chat-message-body-stack", children: [
-          hasStructuredBlocks ? blocks.map((block, index) => /* @__PURE__ */ jsx8(
+        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",
@@ -2302,7 +2286,7 @@ var ChatThreadView = ({
   const latestUserMessageRef = useRef4(null);
   const pendingScrollUserMessageIdRef = useRef4(void 0);
   const reservedSpaceFrameRef = useRef4(null);
-  const [latestUserMessageReservedSpace, setLatestUserMessageReservedSpace] = useState5({ messageId: void 0, value: 0 });
+  const [latestUserMessageReservedSpace, setLatestUserMessageReservedSpace] = useState4({ messageId: void 0, value: 0 });
   const reservedPaddingBottom = 24 + (latestUserMessageReservedSpace.messageId === latestUserMessageId ? latestUserMessageReservedSpace.value : 0);
   const measureLatestUserMessageReservedSpace = useCallback2((messageId) => {
     const container = containerRef.current;
@@ -2628,10 +2612,10 @@ var resolveSendSession = ({
 };
 
 // src/components/chat-composer/hooks/use-chat-composer.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, 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 useState6 } from "react";
+import { useEffect as useEffect3, 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) : "";
@@ -2645,7 +2629,7 @@ var releaseComposerAttachments = (attachments) => {
   attachments.forEach((attachment) => revokeObjectUrl(attachment.previewUrl));
 };
 var useComposerAttachments = () => {
-  const [attachments, setAttachments] = useState6([]);
+  const [attachments, setAttachments] = useState5([]);
   const attachmentsRef = useRef5([]);
   useEffect3(() => {
     attachmentsRef.current = attachments;
@@ -2763,9 +2747,9 @@ var useChatComposer = () => {
   const clearSessionError = useChatStore((s) => s.clearSessionError);
   const setPreferredMode = useChatStore((s) => s.setPreferredMode);
   const setSessionMode = useChatStore((s) => s.setSessionMode);
-  const [availableModels, setAvailableModels] = useState7([]);
-  const [isModelsLoading, setIsModelsLoading] = useState7(true);
-  const [isModelsError, setIsModelsError] = useState7(false);
+  const [availableModels, setAvailableModels] = useState6([]);
+  const [isModelsLoading, setIsModelsLoading] = useState6(true);
+  const [isModelsError, setIsModelsError] = useState6(false);
   const fetchModels = useCallback3(async () => {
     setIsModelsLoading(true);
     setIsModelsError(false);
@@ -2782,10 +2766,10 @@ var useChatComposer = () => {
     void fetchModels();
   }, [fetchModels]);
   const hasModels = availableModels.length > 0;
-  const [value, setValue] = useState7("");
-  const [selectedModel, setSelectedModel] = useState7("");
-  const [selectedMode, setSelectedModeLocal] = useState7(DEFAULT_CHAT_AGENT_MODE);
-  const [attachmentNotice, setAttachmentNotice] = useState7(null);
+  const [value, setValue] = useState6("");
+  const [selectedModel, setSelectedModel] = useState6("");
+  const [selectedMode, setSelectedModeLocal] = useState6(DEFAULT_CHAT_AGENT_MODE);
+  const [attachmentNotice, setAttachmentNotice] = useState6(null);
   const { attachments, appendFiles, removeAttachment, takeMessageAttachments } = useComposerAttachments();
   const abortControllerRef = useRef6(null);
   const stopRequestRef = useRef6(null);
@@ -3081,14 +3065,14 @@ var useChatComposer = () => {
 };
 
 // src/components/chat-composer/components/chat-composer-attachment-list.tsx
-import { useState as useState8 } from "react";
+import { useState as useState7 } from "react";
 import styled11 from "@emotion/styled";
 import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var ChatComposerAttachmentList = ({
   attachments,
   onRemoveAttachment
 }) => {
-  const [activeImage, setActiveImage] = useState8(null);
+  const [activeImage, setActiveImage] = useState7(null);
   if (!attachments.length) {
     return null;
   }

package/package.json

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