@coral-ai/chat 0.4.2 → 0.5.0

package/dist/index.d.ts

@@ -44,18 +44,29 @@ type ChatMessage = {
     approval?: ChatApprovalRequest;
     /**
      * If present, this assistant message carries a multi-step task plan.
-     * Rendered inline as a collapsible checklist above the message text and
-     * persists in history for replay. Updated in place as the agent streams.
+     * Legacy field — new messages use `blocks` to position the todo list
+     * inline at the stream point where it first appeared. Still read by the
+     * renderer as a fallback for persisted messages saved before blocks.
      */
     todos?: ChatTodo[];
     /**
      * If present, this assistant message carries one or more chart specs.
-     * Rendered inline (above the message text) via `<CoralChart>` from
-     * `@coral-ai/charts`. Streamed in incrementally as the agent calls the
-     * built-in `render_chart` tool, and persisted with the conversation so
-     * the visualizations survive reloads.
+     * Legacy field — new messages use `blocks` to position each chart at
+     * the stream point where it was emitted. Still read by the renderer
+     * as a fallback for persisted messages saved before blocks.
      */
     charts?: CoralChartSpec[];
+    /**
+     * Ordered list of inline blocks (text, charts, todos) in the order the
+     * agent emitted them. Renderers iterate this in stream order so a chart
+     * tool call appears at the exact point in the prose where it happened,
+     * matching the convention used by Claude.ai and ChatGPT.
+     *
+     * When absent, the renderer synthesizes blocks from the legacy
+     * `content` / `charts` / `todos` fields so old persisted conversations
+     * still display correctly.
+     */
+    blocks?: ChatBlock[];
     /**
      * If present, the turn that produced this assistant message failed. The
      * message renders as an error card (with a Retry button) instead of normal
@@ -97,6 +108,22 @@ type ChatApprovalRequest = {
         text?: string;
     };
 };
+/**
+ * One inline block within an assistant message. Blocks are rendered in the
+ * order the agent emitted them, so charts and todo lists appear at the exact
+ * stream position where they happened (e.g. text → chart → text), rather than
+ * being pinned above the message.
+ */
+type ChatBlock = {
+    type: "text";
+    content: string;
+} | {
+    type: "chart";
+    spec: CoralChartSpec;
+} | {
+    type: "todos";
+    todos: ChatTodo[];
+};
 /**
  * One step in a multi-step task plan. The agent emits the whole list on each
  * update; the convention is exactly one item `in_progress` at a time.

package/dist/index.js

@@ -424,32 +424,54 @@ var ChatCanvas = ({
             const response = await resolvedHandler(textToSend, historyForAI, snapshotAttachments.map((a) => a.file));
             if (isAsyncIterable(response)) {
               let assistantContent = "";
+              const blocks = [];
+              let openText = "";
+              let todosIndex = null;
               let rafId = null;
-              let pendingContent = "";
               let streamedApproval;
-              let streamedTodos;
-              let streamedCharts;
+              const snapshotBlocks = () => openText ? [...blocks, { type: "text", content: openText }] : blocks;
+              const flushOpenText = () => {
+                if (openText) {
+                  blocks.push({ type: "text", content: openText });
+                  openText = "";
+                }
+              };
+              const commit = () => {
+                const nextBlocks = snapshotBlocks();
+                let nextMsg = {
+                  id: assistantId,
+                  role: "assistant",
+                  content: assistantContent,
+                  blocks: nextBlocks
+                };
+                setMessages((prev) => {
+                  const updated = [...prev];
+                  const last = updated[updated.length - 1];
+                  if (last && last.id === assistantId) {
+                    nextMsg = {
+                      ...last,
+                      content: assistantContent,
+                      blocks: nextBlocks
+                    };
+                  }
+                  updated[updated.length - 1] = nextMsg;
+                  return updated;
+                });
+                onMessagesChange?.(
+                  [...updatedMessages, nextMsg],
+                  sessionAtSend
+                );
+              };
               for await (const chunk of response) {
                 if (shouldStopRef.current) break;
                 if (sessionAtSend !== void 0 && currentConversationIdRef.current !== sessionAtSend) break;
                 if (typeof chunk === "string") {
                   assistantContent += chunk;
-                  pendingContent = assistantContent;
+                  openText += chunk;
                   if (rafId === null) {
                     rafId = requestAnimationFrame(() => {
-                      const content = pendingContent;
-                      let nextMsg = { id: assistantId, role: "assistant", content };
-                      setMessages((prev) => {
-                        const updated = [...prev];
-                        const last = updated[updated.length - 1];
-                        if (last && last.id === assistantId) {
-                          nextMsg = { ...last, content };
-                        }
-                        updated[updated.length - 1] = nextMsg;
-                        return updated;
-                      });
-                      onMessagesChange?.([...updatedMessages, nextMsg], sessionAtSend);
                       rafId = null;
+                      commit();
                     });
                   }
                 } else if (chunk.type === "reasoning") {
@@ -468,26 +490,18 @@ var ChatCanvas = ({
                     return updated;
                   });
                 } else if (chunk.type === "todos") {
-                  streamedTodos = chunk.todos;
-                  setMessages((prev) => {
-                    const updated = [...prev];
-                    const last = updated[updated.length - 1];
-                    if (last && last.id === assistantId) {
-                      updated[updated.length - 1] = { ...last, todos: chunk.todos };
-                    }
-                    return updated;
-                  });
+                  if (todosIndex === null) {
+                    flushOpenText();
+                    todosIndex = blocks.length;
+                    blocks.push({ type: "todos", todos: chunk.todos });
+                  } else {
+                    blocks[todosIndex] = { type: "todos", todos: chunk.todos };
+                  }
+                  commit();
                 } else if (chunk.type === "chart") {
-                  streamedCharts = [...streamedCharts ?? [], chunk.spec];
-                  const nextCharts = streamedCharts;
-                  setMessages((prev) => {
-                    const updated = [...prev];
-                    const last = updated[updated.length - 1];
-                    if (last && last.id === assistantId) {
-                      updated[updated.length - 1] = { ...last, charts: nextCharts };
-                    }
-                    return updated;
-                  });
+                  flushOpenText();
+                  blocks.push({ type: "chart", spec: chunk.spec });
+                  commit();
                 }
               }
               if (rafId !== null) cancelAnimationFrame(rafId);
@@ -495,14 +509,14 @@ var ChatCanvas = ({
               if (sessionAtSend !== void 0 && currentConversationIdRef.current !== sessionAtSend) {
                 break;
               }
+              flushOpenText();
               const finalMsg = {
                 id: assistantId,
                 role: "assistant",
                 content: assistantContent,
+                blocks,
                 ...reasoningRef.current ? { metadata: { reasoning: reasoningRef.current } } : {},
-                ...streamedApproval ? { approval: streamedApproval } : {},
-                ...streamedTodos ? { todos: streamedTodos } : {},
-                ...streamedCharts ? { charts: streamedCharts } : {}
+                ...streamedApproval ? { approval: streamedApproval } : {}
               };
               const finalMessages = [...updatedMessages, finalMsg];
               setMessages(finalMessages);
@@ -1215,6 +1229,18 @@ var Chat_TodoList_default = ChatTodoList;
 import { CoralChart } from "@coral-ai/charts";
 import { CheckmarkCircle20Filled } from "@fluentui/react-icons";
 import { Fragment, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function resolveBlocks(msg) {
+  if (msg.blocks) return msg.blocks;
+  const legacy = [];
+  if (msg.todos && msg.todos.length > 0) {
+    legacy.push({ type: "todos", todos: msg.todos });
+  }
+  if (msg.charts) {
+    for (const spec of msg.charts) legacy.push({ type: "chart", spec });
+  }
+  if (msg.content) legacy.push({ type: "text", content: msg.content });
+  return legacy;
+}
 var useStyles7 = makeStyles7({
   messages: {
     flex: "1",
@@ -1272,7 +1298,7 @@ var useStyles7 = makeStyles7({
     display: "flex",
     flexDirection: "column",
     alignItems: "stretch",
-    width: "min(640px, 80vw)",
+    // width: "min(640px, 80vw)",
     gap: "8px"
   },
   userEditTextarea: {
@@ -1578,17 +1604,24 @@ var ChatMessages = ({
           isStreaming: isLatest && isTyping && !msg.content
         }
       ),
-      msg.todos && msg.todos.length > 0 && /* @__PURE__ */ jsx7(Chat_TodoList_default, { todos: msg.todos }),
-      msg.charts && msg.charts.length > 0 && /* @__PURE__ */ jsx7(Fragment, { children: msg.charts.map((spec, i) => /* @__PURE__ */ jsx7(CoralChart, { spec }, i)) }),
-      /* @__PURE__ */ jsx7(
-        CoralMarkdown,
-        {
-          onNavigate,
-          fontSize,
-          fontFamily,
-          children: msg.content
+      resolveBlocks(msg).map((block, i) => {
+        if (block.type === "todos") {
+          return /* @__PURE__ */ jsx7(Chat_TodoList_default, { todos: block.todos }, `todos-${i}`);
         }
-      ),
+        if (block.type === "chart") {
+          return /* @__PURE__ */ jsx7(CoralChart, { spec: block.spec }, `chart-${i}`);
+        }
+        return /* @__PURE__ */ jsx7(
+          CoralMarkdown,
+          {
+            onNavigate,
+            fontSize,
+            fontFamily,
+            children: block.content
+          },
+          `text-${i}`
+        );
+      }),
       msg.error && /* @__PURE__ */ jsx7(
         Chat_Error_default,
         {