@coral-ai/chat 0.4.0 → 0.4.2

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";
@@ -47,6 +48,14 @@ type ChatMessage = {
      * persists in history for replay. Updated in place as the agent streams.
      */
     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.
+     */
+    charts?: CoralChartSpec[];
     /**
      * If present, the turn that produced this assistant message failed. The
      * message renders as an error card (with a Retry button) instead of normal
@@ -116,6 +125,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;
@@ -179,6 +193,13 @@ interface ChatProps {
      * - Pass any other `ReactNode` to flex-fill the available height (centered).
      */
     welcomeMessage?: string | React__default.ReactNode;
+    /**
+     * Slot rendered horizontally centered directly under `Chat.Input`, while
+     * the chat is empty (no user/assistant messages yet). Typical use is a row
+     * of `PromptCard`s as starter prompts. Children can call `useChatContext()`
+     * to invoke `sendMessage(text)` on click.
+     */
+    promptSuggestions?: React__default.ReactNode;
     /**
      * Pass `null` to disable the chat's built-in surface motion (input slide to
      * bottom on first message). Omit / leave undefined for default motion.
@@ -471,6 +492,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;
@@ -651,4 +674,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

@@ -428,6 +428,7 @@ var ChatCanvas = ({
               let pendingContent = "";
               let streamedApproval;
               let streamedTodos;
+              let streamedCharts;
               for await (const chunk of response) {
                 if (shouldStopRef.current) break;
                 if (sessionAtSend !== void 0 && currentConversationIdRef.current !== sessionAtSend) break;
@@ -476,6 +477,17 @@ var ChatCanvas = ({
                     }
                     return updated;
                   });
+                } 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;
+                  });
                 }
               }
               if (rafId !== null) cancelAnimationFrame(rafId);
@@ -489,7 +501,8 @@ var ChatCanvas = ({
                 content: assistantContent,
                 ...reasoningRef.current ? { metadata: { reasoning: reasoningRef.current } } : {},
                 ...streamedApproval ? { approval: streamedApproval } : {},
-                ...streamedTodos ? { todos: streamedTodos } : {}
+                ...streamedTodos ? { todos: streamedTodos } : {},
+                ...streamedCharts ? { charts: streamedCharts } : {}
               };
               const finalMessages = [...updatedMessages, finalMsg];
               setMessages(finalMessages);
@@ -1041,13 +1054,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 +1097,7 @@ var useStyles6 = makeStyles6({
   chevron: {
     color: tokens6.colorNeutralForeground3,
     flexShrink: 0,
+    fontSize: "16px",
     transition: "transform 0.2s ease"
   },
   chevronExpanded: {
@@ -1104,15 +1118,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 +1175,7 @@ var ChatTodoList = ({
             "aria-expanded": expanded,
             children: [
               /* @__PURE__ */ jsx6(
-                ChevronRight16Regular2,
+                ChevronRightRegular,
                 {
                   className: `${styles.chevron}${expanded ? ` ${styles.chevronExpanded}` : ""}`
                 }
@@ -1180,7 +1198,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,6 +1212,7 @@ 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";
 var useStyles7 = makeStyles7({
@@ -1560,6 +1579,7 @@ var ChatMessages = ({
         }
       ),
       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,
         {
@@ -2144,6 +2164,15 @@ var useStyles10 = makeStyles10({
     maxWidth: "768px",
     padding: "0 16px 16px 16px",
     boxSizing: "border-box"
+  },
+  suggestionsRow: {
+    display: "flex",
+    width: "100%",
+    maxWidth: "768px",
+    margin: "0 auto",
+    padding: "0 16px 16px 16px",
+    boxSizing: "border-box",
+    justifyContent: "center"
   }
 });
 var remapFontSizeForSurface = (size, surface) => {
@@ -2154,6 +2183,7 @@ var remapFontSizeForSurface = (size, surface) => {
 };
 var ChatLayout = ({
   welcomeMessage,
+  promptSuggestions,
   surfaceMotion,
   placeholder,
   disabled,
@@ -2241,6 +2271,7 @@ var ChatLayout = ({
         }
       )
     ] }) }),
+    empty && promptSuggestions && /* @__PURE__ */ jsx11("div", { className: styles.suggestionsRow, children: promptSuggestions }),
     /* @__PURE__ */ jsx11(
       "div",
       {
@@ -2282,6 +2313,7 @@ var Chat = ({
   thinkingStatus,
   onStop,
   welcomeMessage,
+  promptSuggestions,
   surfaceMotion,
   components,
   onCopy,
@@ -2315,6 +2347,7 @@ var Chat = ({
         ChatLayout,
         {
           welcomeMessage,
+          promptSuggestions,
           surfaceMotion,
           placeholder,
           disabled,
@@ -2444,6 +2477,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 {
@@ -2477,6 +2553,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 : [];
@@ -2505,6 +2599,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) {
@@ -2572,6 +2667,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;
@@ -2768,6 +2879,7 @@ export {
   Chat2 as Chat,
   ChatThreadsProvider,
   DEFAULT_TASK_MESSAGES,
+  RENDER_CHART_TOOL,
   REQUEST_APPROVAL_TOOL,
   UPDATE_TODOS_TOOL,
   createAgentHandler,