@coral-ai/chat 0.4.1 → 0.5.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import { ChatFontSize, ChatFontFamily } from '@coral-ai/markdown';
+import { CoralChartSpec } from '@coral-ai/charts';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ErrorCategory = "auth_billing" | "rate_limit" | "overloaded" | "bad_input" | "not_found" | "server_error" | "unknown";
@@ -43,10 +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.
+     * 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
@@ -88,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.
@@ -116,6 +152,11 @@ type ChatChunk = string | {
 } | {
     type: "todos";
     todos: ChatTodo[];
+}
+/** Appends a chart spec to the current assistant message; renders inline. */
+ | {
+    type: "chart";
+    spec: CoralChartSpec;
 };
 type ChatResponse = string | AsyncIterable<ChatChunk> | {
     content: string;
@@ -478,6 +519,8 @@ type AgentSessionStore = {
 declare const UPDATE_TODOS_TOOL: ToolSpec;
 /** Built-in tool: pause and ask the user to approve / choose before continuing. */
 declare const REQUEST_APPROVAL_TOOL: ToolSpec;
+/** Built-in tool: render a chart inline as part of the assistant message. */
+declare const RENDER_CHART_TOOL: ToolSpec;
 type CreateAgentHandlerOptions = {
     /** Provider adapter — the only provider-specific code. */
     callModel: CallModel;
@@ -658,4 +701,4 @@ declare const Chat: typeof Chat$1 & {
 declare const normalizeChatError: typeof normalizeChatError$1;
 declare const createHandler: typeof createHandler$1;
 
-export { type AgentHandler, type AgentMessage, type AgentSessionStore, type AgentSnapshot, type AgentTool, type ApprovalOption, type CallModel, Chat, type ChatApprovalProps, type ChatApprovalRequest, type ChatAttachButtonProps, type ChatAttachType, type ChatAttachment, type ChatCanvasProps, type ChatChunk, type ChatComponents, type ChatErrorProps, type ChatInputProps, type ChatMessage, type ChatMessageRendererProps, type ChatMessagesProps, type ChatResponse, type ChatThread, type ChatThreadsAdapter, type ChatThreadsContextValue, ChatThreadsProvider, type ChatThreadsProviderProps, type ChatTodo, type ChatTodoListProps, type CoralTaskType, type CreateAgentHandlerOptions, DEFAULT_TASK_MESSAGES, type ErrorCategory, type ModelRequest, type ModelStreamEvent, type NormalizedChatError, REQUEST_APPROVAL_TOOL, type ToolCall, type ToolResult, type ToolSpec, UPDATE_TODOS_TOOL, createAgentHandler, createHandler, createMemoryThreadsAdapter, fileToBase64, normalizeChatError, resolveTaskMessages, useChatContext, useChatThreads };
+export { type AgentHandler, type AgentMessage, type AgentSessionStore, type AgentSnapshot, type AgentTool, type ApprovalOption, type CallModel, Chat, type ChatApprovalProps, type ChatApprovalRequest, type ChatAttachButtonProps, type ChatAttachType, type ChatAttachment, type ChatCanvasProps, type ChatChunk, type ChatComponents, type ChatErrorProps, type ChatInputProps, type ChatMessage, type ChatMessageRendererProps, type ChatMessagesProps, type ChatResponse, type ChatThread, type ChatThreadsAdapter, type ChatThreadsContextValue, ChatThreadsProvider, type ChatThreadsProviderProps, type ChatTodo, type ChatTodoListProps, type CoralTaskType, type CreateAgentHandlerOptions, DEFAULT_TASK_MESSAGES, type ErrorCategory, type ModelRequest, type ModelStreamEvent, type NormalizedChatError, RENDER_CHART_TOOL, REQUEST_APPROVAL_TOOL, type ToolCall, type ToolResult, type ToolSpec, UPDATE_TODOS_TOOL, createAgentHandler, createHandler, createMemoryThreadsAdapter, fileToBase64, normalizeChatError, resolveTaskMessages, useChatContext, useChatThreads };

package/dist/index.js

@@ -424,31 +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;
+              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") {
@@ -467,15 +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") {
+                  flushOpenText();
+                  blocks.push({ type: "chart", spec: chunk.spec });
+                  commit();
                 }
               }
               if (rafId !== null) cancelAnimationFrame(rafId);
@@ -483,13 +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 } : {}
+                ...streamedApproval ? { approval: streamedApproval } : {}
               };
               const finalMessages = [...updatedMessages, finalMsg];
               setMessages(finalMessages);
@@ -1041,13 +1068,13 @@ import {
   Body1 as Body14,
   Caption1,
   makeStyles as makeStyles6,
-  Spinner as Spinner2,
   tokens as tokens6
 } from "@fluentui/react-components";
 import {
-  CheckmarkCircle16Filled,
-  ChevronRight16Regular as ChevronRight16Regular2,
-  Circle16Regular
+  CheckboxCheckedFilled,
+  CheckboxUncheckedRegular,
+  ChevronRightRegular,
+  SquareHintRegular
 } from "@fluentui/react-icons";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var useStyles6 = makeStyles6({
@@ -1084,6 +1111,7 @@ var useStyles6 = makeStyles6({
   chevron: {
     color: tokens6.colorNeutralForeground3,
     flexShrink: 0,
+    fontSize: "16px",
     transition: "transform 0.2s ease"
   },
   chevronExpanded: {
@@ -1104,15 +1132,19 @@ var useStyles6 = makeStyles6({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: "16px",
+    width: "20px",
     height: "20px",
+    fontSize: "20px",
     flexShrink: 0
   },
   pendingIcon: {
-    color: tokens6.colorNeutralForeground4
+    color: tokens6.colorNeutralForegroundDisabled
+  },
+  activeIcon: {
+    color: tokens6.colorNeutralForeground2
   },
   doneIcon: {
-    color: tokens6.colorStatusSuccessForeground1
+    color: tokens6.colorPaletteSeafoamForeground2
   },
   text: {
     minWidth: 0,
@@ -1157,7 +1189,7 @@ var ChatTodoList = ({
             "aria-expanded": expanded,
             children: [
               /* @__PURE__ */ jsx6(
-                ChevronRight16Regular2,
+                ChevronRightRegular,
                 {
                   className: `${styles.chevron}${expanded ? ` ${styles.chevronExpanded}` : ""}`
                 }
@@ -1180,7 +1212,7 @@ var ChatTodoList = ({
               className: styles.item,
               role: "listitem",
               children: [
-                /* @__PURE__ */ jsx6("span", { className: styles.iconCell, children: todo.status === "completed" ? /* @__PURE__ */ jsx6(CheckmarkCircle16Filled, { className: styles.doneIcon }) : todo.status === "in_progress" ? /* @__PURE__ */ jsx6(Spinner2, { size: "extra-tiny" }) : /* @__PURE__ */ jsx6(Circle16Regular, { className: styles.pendingIcon }) }),
+                /* @__PURE__ */ jsx6("span", { className: styles.iconCell, children: todo.status === "completed" ? /* @__PURE__ */ jsx6(CheckboxCheckedFilled, { className: styles.doneIcon }) : todo.status === "in_progress" ? /* @__PURE__ */ jsx6(CheckboxUncheckedRegular, { className: styles.activeIcon }) : /* @__PURE__ */ jsx6(SquareHintRegular, { className: styles.pendingIcon }) }),
                 /* @__PURE__ */ jsx6(Body14, { className: `${styles.text} ${textClass}`, children: text })
               ]
             },
@@ -1194,8 +1226,21 @@ var ChatTodoList = ({
 var Chat_TodoList_default = ChatTodoList;
 
 // src/Chat.Messages.tsx
+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",
@@ -1253,7 +1298,7 @@ var useStyles7 = makeStyles7({
     display: "flex",
     flexDirection: "column",
     alignItems: "stretch",
-    width: "min(640px, 80vw)",
+    // width: "min(640px, 80vw)",
     gap: "8px"
   },
   userEditTextarea: {
@@ -1559,16 +1604,24 @@ var ChatMessages = ({
           isStreaming: isLatest && isTyping && !msg.content
         }
       ),
-      msg.todos && msg.todos.length > 0 && /* @__PURE__ */ jsx7(Chat_TodoList_default, { todos: msg.todos }),
-      /* @__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,
         {
@@ -2457,6 +2510,49 @@ var REQUEST_APPROVAL_TOOL = {
     required: ["question", "options"]
   }
 };
+var RENDER_CHART_TOOL = {
+  name: "render_chart",
+  description: 'Render a chart inline in the assistant message. Call this when a visualization (bar or line) communicates the data more clearly than prose or a table. The chart appears above your text \u2014 refer to it naturally ("as the chart above shows\u2026") and do NOT also produce ASCII charts or code blocks for the same data. May be called multiple times in a turn to render multiple charts.',
+  parameters: {
+    type: "object",
+    properties: {
+      kind: {
+        type: "string",
+        enum: ["bar", "line"],
+        description: "Use 'bar' for categorical comparisons, 'line' for trends over an ordered axis."
+      },
+      title: { type: "string", description: "Title shown above the chart." },
+      xKey: {
+        type: "string",
+        description: "Key in each `data` row that supplies the x-axis label."
+      },
+      series: {
+        type: "array",
+        description: "One entry per data series (one bar group / one line).",
+        items: {
+          type: "object",
+          properties: {
+            dataKey: {
+              type: "string",
+              description: "Key in each `data` row holding this series' numeric value."
+            },
+            label: {
+              type: "string",
+              description: "Display label shown in the legend and tooltip."
+            }
+          },
+          required: ["dataKey", "label"]
+        }
+      },
+      data: {
+        type: "array",
+        description: "Rows of data containing the xKey and every series' dataKey. Example: `[{ quarter: 'Q1', alice: 92, bob: 78 }, \u2026]`.",
+        items: { type: "object" }
+      }
+    },
+    required: ["kind", "title", "xKey", "series", "data"]
+  }
+};
 function createMemoryStore() {
   const map = /* @__PURE__ */ new Map();
   return {
@@ -2490,6 +2586,24 @@ function extractTodos(input) {
     };
   });
 }
+function buildChartSpec(input) {
+  const o = input ?? {};
+  const kind = o.kind === "line" ? "line" : "bar";
+  const title = typeof o.title === "string" ? o.title : "";
+  const xKey = typeof o.xKey === "string" ? o.xKey : "";
+  const rawSeries = Array.isArray(o.series) ? o.series : [];
+  const series = rawSeries.map((s, i) => {
+    const obj = s ?? {};
+    const dataKey = typeof obj.dataKey === "string" ? obj.dataKey : "";
+    const label = typeof obj.label === "string" ? obj.label : dataKey || `series-${i}`;
+    return dataKey ? { dataKey, label } : null;
+  }).filter((s) => s !== null);
+  const data = Array.isArray(o.data) ? o.data.filter(
+    (r) => r && typeof r === "object"
+  ) : [];
+  if (!xKey || series.length === 0 || data.length === 0) return null;
+  return { kind, title, xKey, series, data };
+}
 function buildApproval(tc) {
   const input = tc.input ?? {};
   const rawOptions = Array.isArray(input.options) ? input.options : [];
@@ -2518,6 +2632,7 @@ function createAgentHandler(options) {
   const toolSpecs = [
     UPDATE_TODOS_TOOL,
     REQUEST_APPROVAL_TOOL,
+    RENDER_CHART_TOOL,
     ...tools.map((t) => t.spec)
   ];
   return async function* (_input, history, attachments) {
@@ -2585,6 +2700,22 @@ function createAgentHandler(options) {
           yield { type: "approval", approval: buildApproval(tc) };
           await store.set(tc.id, { messages, pendingToolCallId: tc.id });
           return;
+        } else if (tc.name === RENDER_CHART_TOOL.name) {
+          const spec = buildChartSpec(tc.input);
+          if (spec) {
+            yield { type: "chart", spec };
+            messages.push({
+              role: "tool",
+              toolCallId: tc.id,
+              content: "Chart rendered and shown to the user above your text."
+            });
+          } else {
+            messages.push({
+              role: "tool",
+              toolCallId: tc.id,
+              content: "Error: chart spec was invalid. Need non-empty `xKey`, at least one entry in `series`, and at least one row in `data`."
+            });
+          }
         } else {
           const tool = customByName.get(tc.name);
           let content;
@@ -2781,6 +2912,7 @@ export {
   Chat2 as Chat,
   ChatThreadsProvider,
   DEFAULT_TASK_MESSAGES,
+  RENDER_CHART_TOOL,
   REQUEST_APPROVAL_TOOL,
   UPDATE_TODOS_TOOL,
   createAgentHandler,