@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/data/chat/Chat.cjs

@@ -25,9 +25,12 @@ function Chat({
   enableAttachments = false,
   toolApproval,
   threadId,
+  renderToolResult,
   body,
   transport,
   initialMessages,
+  initialPrompt,
+  onInitialPromptSent,
   placeholder,
   emptyState,
   className
@@ -36,6 +39,8 @@ function Chat({
   const [model, setModel] = react.useState(defaultModel);
   const [effort, setEffort] = react.useState(defaultReasoningEffort);
   const [usage, setUsage] = react.useState(null);
+  const lastDefaultModel = react.useRef(defaultModel);
+  const sentInitialPromptId = react.useRef(null);
   react.useEffect(() => {
     if (modelsProp || !modelsApi) return;
     let cancelled = false;
@@ -51,6 +56,11 @@ function Chat({
       cancelled = true;
     };
   }, [modelsProp, modelsApi]);
+  react.useEffect(() => {
+    if (!defaultModel || defaultModel === lastDefaultModel.current) return;
+    lastDefaultModel.current = defaultModel;
+    setModel(defaultModel);
+  }, [defaultModel]);
   const selectedModel = models.find((m) => m.id === model);
   const showEffort = !selectedModel || selectedModel.reasoning;
   const bodyRef = react.useRef({});
@@ -70,6 +80,15 @@ function Chat({
     sendAutomaticallyWhen: ai.lastAssistantMessageIsCompleteWithApprovalResponses,
     ...initialMessages ? { messages: initialMessages } : {}
   });
+  react.useEffect(() => {
+    if (!initialPrompt || status !== "ready") return;
+    if (sentInitialPromptId.current === initialPrompt.id) return;
+    const text = initialPrompt.text.trim();
+    if (!text) return;
+    sentInitialPromptId.current = initialPrompt.id;
+    void sendMessage({ text });
+    onInitialPromptSent == null ? void 0 : onInitialPromptSent();
+  }, [initialPrompt, onInitialPromptSent, sendMessage, status]);
   const onUsageRef = react.useRef(onUsage);
   onUsageRef.current = onUsage;
   react.useEffect(() => {
@@ -126,7 +145,8 @@ function Chat({
         onClearError: clearError,
         emptyState: empty,
         onRegenerate: (messageId) => void regenerate({ messageId }),
-        onApprove: (id, approved, reason) => void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })
+        onApprove: (id, approved, reason) => void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved }),
+        ...renderToolResult ? { renderToolResult } : {}
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/data/chat/Chat.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.cjs","sources":["../../../src/data/chat/Chat.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n  DefaultChatTransport,\n  lastAssistantMessageIsCompleteWithApprovalResponses,\n  type ChatTransport,\n  type UIMessage,\n} from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Conversation } from \"./Conversation\";\nimport { PromptInput } from \"./PromptInput\";\nimport { Suggestions } from \"./Suggestion\";\nimport { ModelSelector, EffortSelector } from \"./ModelSelector\";\nimport { providerIcon } from \"./provider-icons\";\nimport { ContextUsage } from \"./ContextUsage\";\nimport type { ChatModel, ChatMessageMetadata, ChatUsageSummary, Suggestion } from \"./types\";\n\n/** Assistant messages carry token usage + cost the backend rode on the finish\n *  part's `messageMetadata`. */\ntype ChatUIMessage = UIMessage<ChatMessageMetadata>;\n\nexport type ChatProps = {\n  /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.\n   *  Ignored when `transport` is supplied. Defaults to \"/api/chat\". */\n  api?: string;\n  /** Model menu. When omitted and `modelsApi` is set, it is fetched. */\n  models?: ChatModel[];\n  /** Endpoint returning the model menu (ModelInfo[]). Defaults to\n   *  \"/api/chat/models\". Set to null to disable fetching. */\n  modelsApi?: string | null;\n  /** Initially selected model id; otherwise the first configured model. */\n  defaultModel?: string;\n  /** Reasoning-effort options for capable models. */\n  reasoningEfforts?: string[];\n  /** Initially selected reasoning effort (\"\" = none). */\n  defaultReasoningEffort?: string;\n  /** Notified when the user changes the model. */\n  onModelChange?: (id: string) => void;\n  /** Notified after each assistant turn with a usage snapshot (tokens used out\n   *  of the model's context window + cumulative cost), for a usage gauge. */\n  onUsage?: (usage: ChatUsageSummary) => void;\n  /** Suggested prompts shown on the empty state. */\n  suggestions?: Suggestion[];\n  /** Enables file/image attachments. */\n  enableAttachments?: boolean;\n  /** \"manual\" forwards a tool-approval policy hint to the backend. */\n  toolApproval?: \"auto\" | \"manual\";\n  /** Thread id to persist this conversation under (forwarded in the body). */\n  threadId?: string;\n  /** Extra fields merged into every request body. */\n  body?: Record<string, unknown>;\n  /** Pre-built transport (e.g. a mock for stories/tests). */\n  transport?: ChatTransport<UIMessage>;\n  /** Initial messages to seed the conversation. */\n  initialMessages?: UIMessage[];\n  placeholder?: string;\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_EFFORTS = [\"low\", \"medium\", \"high\"];\n\n/** Self-contained AI chat over a v6-compatible `/api/chat`: a streaming\n *  conversation with model/effort selectors, suggestions, attachments,\n *  per-message copy/regenerate, and human-in-the-loop tool approvals. The\n *  backend owns model selection and tool execution; the selected model,\n *  effort, approval policy and thread id are forwarded in the request body. */\nexport function Chat({\n  api = \"/api/chat\",\n  models: modelsProp,\n  modelsApi = \"/api/chat/models\",\n  defaultModel,\n  reasoningEfforts = DEFAULT_EFFORTS,\n  defaultReasoningEffort = \"\",\n  onModelChange,\n  onUsage,\n  suggestions,\n  enableAttachments = false,\n  toolApproval,\n  threadId,\n  body,\n  transport,\n  initialMessages,\n  placeholder,\n  emptyState,\n  className,\n}: ChatProps) {\n  const [models, setModels] = useState<ChatModel[]>(modelsProp ?? []);\n  const [model, setModel] = useState<string | undefined>(defaultModel);\n  const [effort, setEffort] = useState(defaultReasoningEffort);\n  const [usage, setUsage] = useState<ChatUsageSummary | null>(null);\n\n  // Fetch the model menu unless one was supplied or fetching is disabled.\n  useEffect(() => {\n    if (modelsProp || !modelsApi) return;\n    let cancelled = false;\n    fetch(modelsApi)\n      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`models ${r.status}`))))\n      .then((data: ChatModel[]) => {\n        if (cancelled) return;\n        setModels(data);\n        setModel((m) => m ?? data.find((d) => d.configured !== false)?.id);\n      })\n      .catch((err) => console.warn(\"clicky-ui: failed to load chat models\", err));\n    return () => {\n      cancelled = true;\n    };\n  }, [modelsProp, modelsApi]);\n\n  const selectedModel = models.find((m) => m.id === model);\n  const showEffort = !selectedModel || selectedModel.reasoning;\n\n  // A function body keeps the transport stable while always sending the latest\n  // model/effort/policy selections.\n  const bodyRef = useRef<Record<string, unknown>>({});\n  bodyRef.current = {\n    ...body,\n    ...(model ? { model } : {}),\n    ...(effort ? { reasoningEffort: effort } : {}),\n    ...(toolApproval ? { toolApproval } : {}),\n    ...(threadId ? { threadId } : {}),\n  };\n\n  const resolvedTransport = useMemo<ChatTransport<UIMessage>>(\n    () => transport ?? new DefaultChatTransport({ api, body: () => bodyRef.current }),\n    [transport, api],\n  );\n\n  const { messages, sendMessage, regenerate, addToolApprovalResponse, status, error, clearError, stop } =\n    useChat<ChatUIMessage>({\n      transport: resolvedTransport,\n      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,\n      ...(initialMessages ? { messages: initialMessages as ChatUIMessage[] } : {}),\n    });\n\n  // Surface a usage snapshot after each settled assistant turn. The backend\n  // rides usage/cost on the finish part's messageMetadata; we read it off the\n  // last assistant message and resolve maxTokens from the selected model.\n  const onUsageRef = useRef(onUsage);\n  onUsageRef.current = onUsage;\n  useEffect(() => {\n    if (status !== \"ready\") return;\n    const last = [...messages].reverse().find((m) => m.role === \"assistant\");\n    const meta = last?.metadata;\n    if (!meta) return;\n    const cost = meta.threadCostUsd ?? meta.cost;\n    const snapshot: ChatUsageSummary = {\n      usedTokens: meta.contextTokens ?? meta.usage?.totalTokens ?? 0,\n      maxTokens: selectedModel?.contextWindow ?? 0,\n      messageCount: messages.length,\n      ...(cost != null ? { cost } : {}),\n      ...(selectedModel?.label ? { modelLabel: selectedModel.label } : {}),\n    };\n    setUsage(snapshot);\n    onUsageRef.current?.(snapshot);\n  }, [messages, status, selectedModel]);\n\n  const onModelSelect = (id: string) => {\n    setModel(id);\n    onModelChange?.(id);\n  };\n\n  const ModelGlyph = providerIcon(selectedModel?.provider);\n  const toolbar = models.length > 0 || showEffort || (usage && usage.maxTokens > 0) ? (\n    <div className=\"flex flex-1 items-center gap-2\">\n      <ModelSelector models={models} value={model} onChange={onModelSelect} />\n      {showEffort && (\n        <EffortSelector efforts={reasoningEfforts} value={effort} onChange={setEffort} />\n      )}\n      {usage && usage.maxTokens > 0 && (\n        <>\n          <div className=\"flex-1\" />\n          <ContextUsage\n            usedTokens={usage.usedTokens}\n            maxTokens={usage.maxTokens}\n            {...(usage.messageCount != null ? { messageCount: usage.messageCount } : {})}\n            {...(usage.cost != null ? { cost: usage.cost } : {})}\n            {...(usage.modelLabel ? { modelLabel: usage.modelLabel } : {})}\n            {...(ModelGlyph ? { modelIcon: ModelGlyph } : {})}\n          />\n        </>\n      )}\n    </div>\n  ) : undefined;\n\n  const empty = (messages.length === 0 && (emptyState || suggestions?.length)) ? (\n    <div className=\"flex flex-col items-center gap-4\">\n      {emptyState}\n      {suggestions && suggestions.length > 0 && (\n        <Suggestions suggestions={suggestions} onSelect={(text) => void sendMessage({ text })} />\n      )}\n    </div>\n  ) : undefined;\n\n  return (\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <Conversation\n        messages={messages}\n        status={status}\n        error={error}\n        onClearError={clearError}\n        emptyState={empty}\n        onRegenerate={(messageId) => void regenerate({ messageId })}\n        onApprove={(id, approved, reason) =>\n          void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })\n        }\n      />\n      <div className=\"p-4 pt-0\">\n        <PromptInput\n          status={status}\n          onStop={() => void stop()}\n          placeholder={placeholder}\n          enableAttachments={enableAttachments}\n          toolbar={toolbar}\n          onSubmit={(text, files) => void sendMessage({ text, files })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","useRef","useMemo","DefaultChatTransport","useChat","lastAssistantMessageIsCompleteWithApprovalResponses","providerIcon","jsxs","jsx","ModelSelector","EffortSelector","Fragment","ContextUsage","Suggestions","cn","Conversation","PromptInput"],"mappings":"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"}
+{"version":3,"file":"Chat.cjs","sources":["../../../src/data/chat/Chat.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n  DefaultChatTransport,\n  lastAssistantMessageIsCompleteWithApprovalResponses,\n  type ChatTransport,\n  type UIMessage,\n} from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Conversation } from \"./Conversation\";\nimport { PromptInput } from \"./PromptInput\";\nimport { Suggestions } from \"./Suggestion\";\nimport { ModelSelector, EffortSelector } from \"./ModelSelector\";\nimport { providerIcon } from \"./provider-icons\";\nimport { ContextUsage } from \"./ContextUsage\";\nimport type { ChatModel, ChatMessageMetadata, ChatUsageSummary, Suggestion, ToolResultRenderer } from \"./types\";\n\n/** Assistant messages carry token usage + cost the backend rode on the finish\n *  part's `messageMetadata`. */\ntype ChatUIMessage = UIMessage<ChatMessageMetadata>;\n\nexport type ChatProps = {\n  /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.\n   *  Ignored when `transport` is supplied. Defaults to \"/api/chat\". */\n  api?: string;\n  /** Model menu. When omitted and `modelsApi` is set, it is fetched. */\n  models?: ChatModel[];\n  /** Endpoint returning the model menu (ModelInfo[]). Defaults to\n   *  \"/api/chat/models\". Set to null to disable fetching. */\n  modelsApi?: string | null;\n  /** Initially selected model id; otherwise the first configured model. */\n  defaultModel?: string;\n  /** Reasoning-effort options for capable models. */\n  reasoningEfforts?: string[];\n  /** Initially selected reasoning effort (\"\" = none). */\n  defaultReasoningEffort?: string;\n  /** Notified when the user changes the model. */\n  onModelChange?: (id: string) => void;\n  /** Notified after each assistant turn with a usage snapshot (tokens used out\n   *  of the model's context window + cumulative cost), for a usage gauge. */\n  onUsage?: (usage: ChatUsageSummary) => void;\n  /** Suggested prompts shown on the empty state. */\n  suggestions?: Suggestion[];\n  /** Enables file/image attachments. */\n  enableAttachments?: boolean;\n  /** \"manual\" forwards a tool-approval policy hint to the backend. */\n  toolApproval?: \"auto\" | \"manual\";\n  /** Thread id to persist this conversation under (forwarded in the body). */\n  threadId?: string;\n  /** Optional host renderer for recognized completed tool outputs. */\n  renderToolResult?: ToolResultRenderer;\n  /** Extra fields merged into every request body. */\n  body?: Record<string, unknown>;\n  /** Pre-built transport (e.g. a mock for stories/tests). */\n  transport?: ChatTransport<UIMessage>;\n  /** Initial messages to seed the conversation. */\n  initialMessages?: UIMessage[];\n  /** Prompt to send automatically once. A new `id` sends even when text repeats. */\n  initialPrompt?: { id: number; text: string } | null;\n  /** Called after `initialPrompt` has been handed to the chat transport. */\n  onInitialPromptSent?: () => void;\n  placeholder?: string;\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_EFFORTS = [\"low\", \"medium\", \"high\"];\n\n/** Self-contained AI chat over a v6-compatible `/api/chat`: a streaming\n *  conversation with model/effort selectors, suggestions, attachments,\n *  per-message copy/regenerate, and human-in-the-loop tool approvals. The\n *  backend owns model selection and tool execution; the selected model,\n *  effort, approval policy and thread id are forwarded in the request body. */\nexport function Chat({\n  api = \"/api/chat\",\n  models: modelsProp,\n  modelsApi = \"/api/chat/models\",\n  defaultModel,\n  reasoningEfforts = DEFAULT_EFFORTS,\n  defaultReasoningEffort = \"\",\n  onModelChange,\n  onUsage,\n  suggestions,\n  enableAttachments = false,\n  toolApproval,\n  threadId,\n  renderToolResult,\n  body,\n  transport,\n  initialMessages,\n  initialPrompt,\n  onInitialPromptSent,\n  placeholder,\n  emptyState,\n  className,\n}: ChatProps) {\n  const [models, setModels] = useState<ChatModel[]>(modelsProp ?? []);\n  const [model, setModel] = useState<string | undefined>(defaultModel);\n  const [effort, setEffort] = useState(defaultReasoningEffort);\n  const [usage, setUsage] = useState<ChatUsageSummary | null>(null);\n  const lastDefaultModel = useRef(defaultModel);\n  const sentInitialPromptId = useRef<number | null>(null);\n\n  // Fetch the model menu unless one was supplied or fetching is disabled.\n  useEffect(() => {\n    if (modelsProp || !modelsApi) return;\n    let cancelled = false;\n    fetch(modelsApi)\n      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`models ${r.status}`))))\n      .then((data: ChatModel[]) => {\n        if (cancelled) return;\n        setModels(data);\n        setModel((m) => m ?? data.find((d) => d.configured !== false)?.id);\n      })\n      .catch((err) => console.warn(\"clicky-ui: failed to load chat models\", err));\n    return () => {\n      cancelled = true;\n    };\n  }, [modelsProp, modelsApi]);\n\n  useEffect(() => {\n    if (!defaultModel || defaultModel === lastDefaultModel.current) return;\n    lastDefaultModel.current = defaultModel;\n    setModel(defaultModel);\n  }, [defaultModel]);\n\n  const selectedModel = models.find((m) => m.id === model);\n  const showEffort = !selectedModel || selectedModel.reasoning;\n\n  // A function body keeps the transport stable while always sending the latest\n  // model/effort/policy selections.\n  const bodyRef = useRef<Record<string, unknown>>({});\n  bodyRef.current = {\n    ...body,\n    ...(model ? { model } : {}),\n    ...(effort ? { reasoningEffort: effort } : {}),\n    ...(toolApproval ? { toolApproval } : {}),\n    ...(threadId ? { threadId } : {}),\n  };\n\n  const resolvedTransport = useMemo<ChatTransport<UIMessage>>(\n    () => transport ?? new DefaultChatTransport({ api, body: () => bodyRef.current }),\n    [transport, api],\n  );\n\n  const { messages, sendMessage, regenerate, addToolApprovalResponse, status, error, clearError, stop } =\n    useChat<ChatUIMessage>({\n      transport: resolvedTransport,\n      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,\n      ...(initialMessages ? { messages: initialMessages as ChatUIMessage[] } : {}),\n    });\n\n  useEffect(() => {\n    if (!initialPrompt || status !== \"ready\") return;\n    if (sentInitialPromptId.current === initialPrompt.id) return;\n    const text = initialPrompt.text.trim();\n    if (!text) return;\n    sentInitialPromptId.current = initialPrompt.id;\n    void sendMessage({ text });\n    onInitialPromptSent?.();\n  }, [initialPrompt, onInitialPromptSent, sendMessage, status]);\n\n  // Surface a usage snapshot after each settled assistant turn. The backend\n  // rides usage/cost on the finish part's messageMetadata; we read it off the\n  // last assistant message and resolve maxTokens from the selected model.\n  const onUsageRef = useRef(onUsage);\n  onUsageRef.current = onUsage;\n  useEffect(() => {\n    if (status !== \"ready\") return;\n    const last = [...messages].reverse().find((m) => m.role === \"assistant\");\n    const meta = last?.metadata;\n    if (!meta) return;\n    const cost = meta.threadCostUsd ?? meta.cost;\n    const snapshot: ChatUsageSummary = {\n      usedTokens: meta.contextTokens ?? meta.usage?.totalTokens ?? 0,\n      maxTokens: selectedModel?.contextWindow ?? 0,\n      messageCount: messages.length,\n      ...(cost != null ? { cost } : {}),\n      ...(selectedModel?.label ? { modelLabel: selectedModel.label } : {}),\n    };\n    setUsage(snapshot);\n    onUsageRef.current?.(snapshot);\n  }, [messages, status, selectedModel]);\n\n  const onModelSelect = (id: string) => {\n    setModel(id);\n    onModelChange?.(id);\n  };\n\n  const ModelGlyph = providerIcon(selectedModel?.provider);\n  const toolbar = models.length > 0 || showEffort || (usage && usage.maxTokens > 0) ? (\n    <div className=\"flex flex-1 items-center gap-2\">\n      <ModelSelector models={models} value={model} onChange={onModelSelect} />\n      {showEffort && (\n        <EffortSelector efforts={reasoningEfforts} value={effort} onChange={setEffort} />\n      )}\n      {usage && usage.maxTokens > 0 && (\n        <>\n          <div className=\"flex-1\" />\n          <ContextUsage\n            usedTokens={usage.usedTokens}\n            maxTokens={usage.maxTokens}\n            {...(usage.messageCount != null ? { messageCount: usage.messageCount } : {})}\n            {...(usage.cost != null ? { cost: usage.cost } : {})}\n            {...(usage.modelLabel ? { modelLabel: usage.modelLabel } : {})}\n            {...(ModelGlyph ? { modelIcon: ModelGlyph } : {})}\n          />\n        </>\n      )}\n    </div>\n  ) : undefined;\n\n  const empty = (messages.length === 0 && (emptyState || suggestions?.length)) ? (\n    <div className=\"flex flex-col items-center gap-4\">\n      {emptyState}\n      {suggestions && suggestions.length > 0 && (\n        <Suggestions suggestions={suggestions} onSelect={(text) => void sendMessage({ text })} />\n      )}\n    </div>\n  ) : undefined;\n\n  return (\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <Conversation\n        messages={messages}\n        status={status}\n        error={error}\n        onClearError={clearError}\n        emptyState={empty}\n        onRegenerate={(messageId) => void regenerate({ messageId })}\n        onApprove={(id, approved, reason) =>\n          void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })\n        }\n        {...(renderToolResult ? { renderToolResult } : {})}\n      />\n      <div className=\"p-4 pt-0\">\n        <PromptInput\n          status={status}\n          onStop={() => void stop()}\n          placeholder={placeholder}\n          enableAttachments={enableAttachments}\n          toolbar={toolbar}\n          onSubmit={(text, files) => void sendMessage({ text, files })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useMemo","DefaultChatTransport","useChat","lastAssistantMessageIsCompleteWithApprovalResponses","providerIcon","jsxs","jsx","ModelSelector","EffortSelector","Fragment","ContextUsage","Suggestions","cn","Conversation","PromptInput"],"mappings":";;;;;;;;;;;;;AAkEA,MAAM,kBAAkB,CAAC,OAAO,UAAU,MAAM;AAOzC,SAAS,KAAK;AAAA,EACnB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAsB,cAAc,CAAA,CAAE;AAClE,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAA6B,YAAY;AACnE,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAS,sBAAsB;AAC3D,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAkC,IAAI;AAChE,QAAM,mBAAmBC,MAAAA,OAAO,YAAY;AAC5C,QAAM,sBAAsBA,MAAAA,OAAsB,IAAI;AAGtDC,QAAAA,UAAU,MAAM;AACd,QAAI,cAAc,CAAC,UAAW;AAC9B,QAAI,YAAY;AAChB,UAAM,SAAS,EACZ,KAAK,CAAC,MAAO,EAAE,KAAK,EAAE,KAAA,IAAS,QAAQ,OAAO,IAAI,MAAM,UAAU,EAAE,MAAM,EAAE,CAAC,CAAE,EAC/E,KAAK,CAAC,SAAsB;AAC3B,UAAI,UAAW;AACf,gBAAU,IAAI;AACd,eAAS,CAAC;;AAAM,sBAAK,UAAK,KAAK,CAAC,MAAM,EAAE,eAAe,KAAK,MAAvC,mBAA0C;AAAA,OAAE;AAAA,IACnE,CAAC,EACA,MAAM,CAAC,QAAQ,QAAQ,KAAK,yCAAyC,GAAG,CAAC;AAC5E,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,YAAY,SAAS,CAAC;AAE1BA,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,gBAAgB,iBAAiB,iBAAiB,QAAS;AAChE,qBAAiB,UAAU;AAC3B,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,gBAAgB,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK;AACvD,QAAM,aAAa,CAAC,iBAAiB,cAAc;AAInD,QAAM,UAAUD,MAAAA,OAAgC,EAAE;AAClD,UAAQ,UAAU;AAAA,IAChB,GAAG;AAAA,IACH,GAAI,QAAQ,EAAE,MAAA,IAAU,CAAA;AAAA,IACxB,GAAI,SAAS,EAAE,iBAAiB,OAAA,IAAW,CAAA;AAAA,IAC3C,GAAI,eAAe,EAAE,aAAA,IAAiB,CAAA;AAAA,IACtC,GAAI,WAAW,EAAE,aAAa,CAAA;AAAA,EAAC;AAGjC,QAAM,oBAAoBE,MAAAA;AAAAA,IACxB,MAAM,aAAa,IAAIC,GAAAA,qBAAqB,EAAE,KAAK,MAAM,MAAM,QAAQ,SAAS;AAAA,IAChF,CAAC,WAAW,GAAG;AAAA,EAAA;AAGjB,QAAM,EAAE,UAAU,aAAa,YAAY,yBAAyB,QAAQ,OAAO,YAAY,KAAA,IAC7FC,gBAAuB;AAAA,IACrB,WAAW;AAAA,IACX,uBAAuBC,GAAAA;AAAAA,IACvB,GAAI,kBAAkB,EAAE,UAAU,oBAAuC,CAAA;AAAA,EAAC,CAC3E;AAEHJ,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,iBAAiB,WAAW,QAAS;AAC1C,QAAI,oBAAoB,YAAY,cAAc,GAAI;AACtD,UAAM,OAAO,cAAc,KAAK,KAAA;AAChC,QAAI,CAAC,KAAM;AACX,wBAAoB,UAAU,cAAc;AAC5C,SAAK,YAAY,EAAE,MAAM;AACzB;AAAA,EACF,GAAG,CAAC,eAAe,qBAAqB,aAAa,MAAM,CAAC;AAK5D,QAAM,aAAaD,MAAAA,OAAO,OAAO;AACjC,aAAW,UAAU;AACrBC,QAAAA,UAAU,MAAM;;AACd,QAAI,WAAW,QAAS;AACxB,UAAM,OAAO,CAAC,GAAG,QAAQ,EAAE,QAAA,EAAU,KAAK,CAAC,MAAM,EAAE,SAAS,WAAW;AACvE,UAAM,OAAO,6BAAM;AACnB,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,KAAK,iBAAiB,KAAK;AACxC,UAAM,WAA6B;AAAA,MACjC,YAAY,KAAK,mBAAiB,UAAK,UAAL,mBAAY,gBAAe;AAAA,MAC7D,YAAW,+CAAe,kBAAiB;AAAA,MAC3C,cAAc,SAAS;AAAA,MACvB,GAAI,QAAQ,OAAO,EAAE,KAAA,IAAS,CAAA;AAAA,MAC9B,IAAI,+CAAe,SAAQ,EAAE,YAAY,cAAc,MAAA,IAAU,CAAA;AAAA,IAAC;AAEpE,aAAS,QAAQ;AACjB,qBAAW,YAAX,oCAAqB;AAAA,EACvB,GAAG,CAAC,UAAU,QAAQ,aAAa,CAAC;AAEpC,QAAM,gBAAgB,CAAC,OAAe;AACpC,aAAS,EAAE;AACX,mDAAgB;AAAA,EAClB;AAEA,QAAM,aAAaK,cAAAA,aAAa,+CAAe,QAAQ;AACvD,QAAM,UAAU,OAAO,SAAS,KAAK,cAAe,SAAS,MAAM,YAAY,IAC7EC,2BAAAA,KAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,IAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,QAAgB,OAAO,OAAO,UAAU,eAAe;AAAA,IACrE,6CACEC,cAAAA,gBAAA,EAAe,SAAS,kBAAkB,OAAO,QAAQ,UAAU,WAAW;AAAA,IAEhF,SAAS,MAAM,YAAY,KAC1BH,2BAAAA,KAAAI,WAAAA,UAAA,EACE,UAAA;AAAA,MAAAH,2BAAAA,IAAC,OAAA,EAAI,WAAU,SAAA,CAAS;AAAA,MACxBA,2BAAAA;AAAAA,QAACI,aAAAA;AAAAA,QAAA;AAAA,UACC,YAAY,MAAM;AAAA,UAClB,WAAW,MAAM;AAAA,UAChB,GAAI,MAAM,gBAAgB,OAAO,EAAE,cAAc,MAAM,aAAA,IAAiB,CAAA;AAAA,UACxE,GAAI,MAAM,QAAQ,OAAO,EAAE,MAAM,MAAM,KAAA,IAAS,CAAA;AAAA,UAChD,GAAI,MAAM,aAAa,EAAE,YAAY,MAAM,WAAA,IAAe,CAAA;AAAA,UAC1D,GAAI,aAAa,EAAE,WAAW,eAAe,CAAA;AAAA,QAAC;AAAA,MAAA;AAAA,IACjD,EAAA,CACF;AAAA,EAAA,EAAA,CAEJ,IACE;AAEJ,QAAM,QAAS,SAAS,WAAW,MAAM,eAAc,2CAAa,WAClEL,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,SAAS,oCAClCM,WAAAA,aAAA,EAAY,aAA0B,UAAU,CAAC,SAAS,KAAK,YAAY,EAAE,KAAA,CAAM,EAAA,CAAG;AAAA,EAAA,EAAA,CAE3F,IACE;AAEJ,yCACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,wBAAwB,SAAS,GAClD,UAAA;AAAA,IAAAN,2BAAAA;AAAAA,MAACO,aAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,cAAc,CAAC,cAAc,KAAK,WAAW,EAAE,WAAW;AAAA,QAC1D,WAAW,CAAC,IAAI,UAAU,WACxB,KAAK,wBAAwB,SAAS,EAAE,IAAI,UAAU,OAAA,IAAW,EAAE,IAAI,UAAU;AAAA,QAElF,GAAI,mBAAmB,EAAE,qBAAqB,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,IAElDP,2BAAAA,IAAC,OAAA,EAAI,WAAU,YACb,UAAAA,2BAAAA;AAAAA,MAACQ,YAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAQ,MAAM,KAAK,KAAA;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,MAAM,UAAU,KAAK,YAAY,EAAE,MAAM,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA,EAC7D,CACF;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/data/chat/Chat.d.ts

@@ -1,5 +1,5 @@
 import { ChatTransport, UIMessage } from 'ai';
-import { ChatModel, ChatUsageSummary, Suggestion } from './types';
+import { ChatModel, ChatUsageSummary, Suggestion, ToolResultRenderer } from './types';
 export type ChatProps = {
     /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.
      *  Ignored when `transport` is supplied. Defaults to "/api/chat". */
@@ -28,12 +28,21 @@ export type ChatProps = {
     toolApproval?: "auto" | "manual";
     /** Thread id to persist this conversation under (forwarded in the body). */
     threadId?: string;
+    /** Optional host renderer for recognized completed tool outputs. */
+    renderToolResult?: ToolResultRenderer;
     /** Extra fields merged into every request body. */
     body?: Record<string, unknown>;
     /** Pre-built transport (e.g. a mock for stories/tests). */
     transport?: ChatTransport<UIMessage>;
     /** Initial messages to seed the conversation. */
     initialMessages?: UIMessage[];
+    /** Prompt to send automatically once. A new `id` sends even when text repeats. */
+    initialPrompt?: {
+        id: number;
+        text: string;
+    } | null;
+    /** Called after `initialPrompt` has been handed to the chat transport. */
+    onInitialPromptSent?: () => void;
     placeholder?: string;
     emptyState?: React.ReactNode;
     className?: string;
@@ -43,5 +52,5 @@ export type ChatProps = {
  *  per-message copy/regenerate, and human-in-the-loop tool approvals. The
  *  backend owns model selection and tool execution; the selected model,
  *  effort, approval policy and thread id are forwarded in the request body. */
-export declare function Chat({ api, models: modelsProp, modelsApi, defaultModel, reasoningEfforts, defaultReasoningEffort, onModelChange, onUsage, suggestions, enableAttachments, toolApproval, threadId, body, transport, initialMessages, placeholder, emptyState, className, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ api, models: modelsProp, modelsApi, defaultModel, reasoningEfforts, defaultReasoningEffort, onModelChange, onUsage, suggestions, enableAttachments, toolApproval, threadId, renderToolResult, body, transport, initialMessages, initialPrompt, onInitialPromptSent, placeholder, emptyState, className, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Chat.d.ts.map

package/dist/data/chat/Chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Chat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,IAAI,CAAC;AAQZ,OAAO,KAAK,EAAE,SAAS,EAAuB,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAM5F,MAAM,MAAM,SAAS,GAAG;IACtB;yEACqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB;+DAC2D;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,uDAAuD;IACvD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;+EAC2E;IAC3E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,kDAAkD;IAClD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrC,iDAAiD;IACjD,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;+EAI+E;AAC/E,wBAAgB,IAAI,CAAC,EACnB,GAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,SAA8B,EAC9B,YAAY,EACZ,gBAAkC,EAClC,sBAA2B,EAC3B,aAAa,EACb,OAAO,EACP,WAAW,EACX,iBAAyB,EACzB,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,eAAe,EACf,WAAW,EACX,UAAU,EACV,SAAS,GACV,EAAE,SAAS,2CAqIX"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Chat.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,IAAI,CAAC;AAQZ,OAAO,KAAK,EAAE,SAAS,EAAuB,gBAAgB,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAMhH,MAAM,MAAM,SAAS,GAAG;IACtB;yEACqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB;+DAC2D;IAC3D,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,uDAAuD;IACvD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gDAAgD;IAChD,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;+EAC2E;IAC3E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,kDAAkD;IAClD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;IACtC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACrC,iDAAiD;IACjD,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,kFAAkF;IAClF,aAAa,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACpD,0EAA0E;IAC1E,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;+EAI+E;AAC/E,wBAAgB,IAAI,CAAC,EACnB,GAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,SAA8B,EAC9B,YAAY,EACZ,gBAAkC,EAClC,sBAA2B,EAC3B,aAAa,EACb,OAAO,EACP,WAAW,EACX,iBAAyB,EACzB,YAAY,EACZ,QAAQ,EACR,gBAAgB,EAChB,IAAI,EACJ,SAAS,EACT,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,GACV,EAAE,SAAS,2CAwJX"}

package/dist/data/chat/Chat.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport, lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
 import { cn } from "../../lib/utils.js";
@@ -23,9 +23,12 @@ function Chat({
   enableAttachments = false,
   toolApproval,
   threadId,
+  renderToolResult,
   body,
   transport,
   initialMessages,
+  initialPrompt,
+  onInitialPromptSent,
   placeholder,
   emptyState,
   className
@@ -34,6 +37,8 @@ function Chat({
   const [model, setModel] = useState(defaultModel);
   const [effort, setEffort] = useState(defaultReasoningEffort);
   const [usage, setUsage] = useState(null);
+  const lastDefaultModel = useRef(defaultModel);
+  const sentInitialPromptId = useRef(null);
   useEffect(() => {
     if (modelsProp || !modelsApi) return;
     let cancelled = false;
@@ -49,6 +54,11 @@ function Chat({
       cancelled = true;
     };
   }, [modelsProp, modelsApi]);
+  useEffect(() => {
+    if (!defaultModel || defaultModel === lastDefaultModel.current) return;
+    lastDefaultModel.current = defaultModel;
+    setModel(defaultModel);
+  }, [defaultModel]);
   const selectedModel = models.find((m) => m.id === model);
   const showEffort = !selectedModel || selectedModel.reasoning;
   const bodyRef = useRef({});
@@ -68,6 +78,15 @@ function Chat({
     sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
     ...initialMessages ? { messages: initialMessages } : {}
   });
+  useEffect(() => {
+    if (!initialPrompt || status !== "ready") return;
+    if (sentInitialPromptId.current === initialPrompt.id) return;
+    const text = initialPrompt.text.trim();
+    if (!text) return;
+    sentInitialPromptId.current = initialPrompt.id;
+    void sendMessage({ text });
+    onInitialPromptSent == null ? void 0 : onInitialPromptSent();
+  }, [initialPrompt, onInitialPromptSent, sendMessage, status]);
   const onUsageRef = useRef(onUsage);
   onUsageRef.current = onUsage;
   useEffect(() => {
@@ -124,7 +143,8 @@ function Chat({
         onClearError: clearError,
         emptyState: empty,
         onRegenerate: (messageId) => void regenerate({ messageId }),
-        onApprove: (id, approved, reason) => void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })
+        onApprove: (id, approved, reason) => void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved }),
+        ...renderToolResult ? { renderToolResult } : {}
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "p-4 pt-0", children: /* @__PURE__ */ jsx(

package/dist/data/chat/Chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.js","sources":["../../../src/data/chat/Chat.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n  DefaultChatTransport,\n  lastAssistantMessageIsCompleteWithApprovalResponses,\n  type ChatTransport,\n  type UIMessage,\n} from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Conversation } from \"./Conversation\";\nimport { PromptInput } from \"./PromptInput\";\nimport { Suggestions } from \"./Suggestion\";\nimport { ModelSelector, EffortSelector } from \"./ModelSelector\";\nimport { providerIcon } from \"./provider-icons\";\nimport { ContextUsage } from \"./ContextUsage\";\nimport type { ChatModel, ChatMessageMetadata, ChatUsageSummary, Suggestion } from \"./types\";\n\n/** Assistant messages carry token usage + cost the backend rode on the finish\n *  part's `messageMetadata`. */\ntype ChatUIMessage = UIMessage<ChatMessageMetadata>;\n\nexport type ChatProps = {\n  /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.\n   *  Ignored when `transport` is supplied. Defaults to \"/api/chat\". */\n  api?: string;\n  /** Model menu. When omitted and `modelsApi` is set, it is fetched. */\n  models?: ChatModel[];\n  /** Endpoint returning the model menu (ModelInfo[]). Defaults to\n   *  \"/api/chat/models\". Set to null to disable fetching. */\n  modelsApi?: string | null;\n  /** Initially selected model id; otherwise the first configured model. */\n  defaultModel?: string;\n  /** Reasoning-effort options for capable models. */\n  reasoningEfforts?: string[];\n  /** Initially selected reasoning effort (\"\" = none). */\n  defaultReasoningEffort?: string;\n  /** Notified when the user changes the model. */\n  onModelChange?: (id: string) => void;\n  /** Notified after each assistant turn with a usage snapshot (tokens used out\n   *  of the model's context window + cumulative cost), for a usage gauge. */\n  onUsage?: (usage: ChatUsageSummary) => void;\n  /** Suggested prompts shown on the empty state. */\n  suggestions?: Suggestion[];\n  /** Enables file/image attachments. */\n  enableAttachments?: boolean;\n  /** \"manual\" forwards a tool-approval policy hint to the backend. */\n  toolApproval?: \"auto\" | \"manual\";\n  /** Thread id to persist this conversation under (forwarded in the body). */\n  threadId?: string;\n  /** Extra fields merged into every request body. */\n  body?: Record<string, unknown>;\n  /** Pre-built transport (e.g. a mock for stories/tests). */\n  transport?: ChatTransport<UIMessage>;\n  /** Initial messages to seed the conversation. */\n  initialMessages?: UIMessage[];\n  placeholder?: string;\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_EFFORTS = [\"low\", \"medium\", \"high\"];\n\n/** Self-contained AI chat over a v6-compatible `/api/chat`: a streaming\n *  conversation with model/effort selectors, suggestions, attachments,\n *  per-message copy/regenerate, and human-in-the-loop tool approvals. The\n *  backend owns model selection and tool execution; the selected model,\n *  effort, approval policy and thread id are forwarded in the request body. */\nexport function Chat({\n  api = \"/api/chat\",\n  models: modelsProp,\n  modelsApi = \"/api/chat/models\",\n  defaultModel,\n  reasoningEfforts = DEFAULT_EFFORTS,\n  defaultReasoningEffort = \"\",\n  onModelChange,\n  onUsage,\n  suggestions,\n  enableAttachments = false,\n  toolApproval,\n  threadId,\n  body,\n  transport,\n  initialMessages,\n  placeholder,\n  emptyState,\n  className,\n}: ChatProps) {\n  const [models, setModels] = useState<ChatModel[]>(modelsProp ?? []);\n  const [model, setModel] = useState<string | undefined>(defaultModel);\n  const [effort, setEffort] = useState(defaultReasoningEffort);\n  const [usage, setUsage] = useState<ChatUsageSummary | null>(null);\n\n  // Fetch the model menu unless one was supplied or fetching is disabled.\n  useEffect(() => {\n    if (modelsProp || !modelsApi) return;\n    let cancelled = false;\n    fetch(modelsApi)\n      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`models ${r.status}`))))\n      .then((data: ChatModel[]) => {\n        if (cancelled) return;\n        setModels(data);\n        setModel((m) => m ?? data.find((d) => d.configured !== false)?.id);\n      })\n      .catch((err) => console.warn(\"clicky-ui: failed to load chat models\", err));\n    return () => {\n      cancelled = true;\n    };\n  }, [modelsProp, modelsApi]);\n\n  const selectedModel = models.find((m) => m.id === model);\n  const showEffort = !selectedModel || selectedModel.reasoning;\n\n  // A function body keeps the transport stable while always sending the latest\n  // model/effort/policy selections.\n  const bodyRef = useRef<Record<string, unknown>>({});\n  bodyRef.current = {\n    ...body,\n    ...(model ? { model } : {}),\n    ...(effort ? { reasoningEffort: effort } : {}),\n    ...(toolApproval ? { toolApproval } : {}),\n    ...(threadId ? { threadId } : {}),\n  };\n\n  const resolvedTransport = useMemo<ChatTransport<UIMessage>>(\n    () => transport ?? new DefaultChatTransport({ api, body: () => bodyRef.current }),\n    [transport, api],\n  );\n\n  const { messages, sendMessage, regenerate, addToolApprovalResponse, status, error, clearError, stop } =\n    useChat<ChatUIMessage>({\n      transport: resolvedTransport,\n      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,\n      ...(initialMessages ? { messages: initialMessages as ChatUIMessage[] } : {}),\n    });\n\n  // Surface a usage snapshot after each settled assistant turn. The backend\n  // rides usage/cost on the finish part's messageMetadata; we read it off the\n  // last assistant message and resolve maxTokens from the selected model.\n  const onUsageRef = useRef(onUsage);\n  onUsageRef.current = onUsage;\n  useEffect(() => {\n    if (status !== \"ready\") return;\n    const last = [...messages].reverse().find((m) => m.role === \"assistant\");\n    const meta = last?.metadata;\n    if (!meta) return;\n    const cost = meta.threadCostUsd ?? meta.cost;\n    const snapshot: ChatUsageSummary = {\n      usedTokens: meta.contextTokens ?? meta.usage?.totalTokens ?? 0,\n      maxTokens: selectedModel?.contextWindow ?? 0,\n      messageCount: messages.length,\n      ...(cost != null ? { cost } : {}),\n      ...(selectedModel?.label ? { modelLabel: selectedModel.label } : {}),\n    };\n    setUsage(snapshot);\n    onUsageRef.current?.(snapshot);\n  }, [messages, status, selectedModel]);\n\n  const onModelSelect = (id: string) => {\n    setModel(id);\n    onModelChange?.(id);\n  };\n\n  const ModelGlyph = providerIcon(selectedModel?.provider);\n  const toolbar = models.length > 0 || showEffort || (usage && usage.maxTokens > 0) ? (\n    <div className=\"flex flex-1 items-center gap-2\">\n      <ModelSelector models={models} value={model} onChange={onModelSelect} />\n      {showEffort && (\n        <EffortSelector efforts={reasoningEfforts} value={effort} onChange={setEffort} />\n      )}\n      {usage && usage.maxTokens > 0 && (\n        <>\n          <div className=\"flex-1\" />\n          <ContextUsage\n            usedTokens={usage.usedTokens}\n            maxTokens={usage.maxTokens}\n            {...(usage.messageCount != null ? { messageCount: usage.messageCount } : {})}\n            {...(usage.cost != null ? { cost: usage.cost } : {})}\n            {...(usage.modelLabel ? { modelLabel: usage.modelLabel } : {})}\n            {...(ModelGlyph ? { modelIcon: ModelGlyph } : {})}\n          />\n        </>\n      )}\n    </div>\n  ) : undefined;\n\n  const empty = (messages.length === 0 && (emptyState || suggestions?.length)) ? (\n    <div className=\"flex flex-col items-center gap-4\">\n      {emptyState}\n      {suggestions && suggestions.length > 0 && (\n        <Suggestions suggestions={suggestions} onSelect={(text) => void sendMessage({ text })} />\n      )}\n    </div>\n  ) : undefined;\n\n  return (\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <Conversation\n        messages={messages}\n        status={status}\n        error={error}\n        onClearError={clearError}\n        emptyState={empty}\n        onRegenerate={(messageId) => void regenerate({ messageId })}\n        onApprove={(id, approved, reason) =>\n          void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })\n        }\n      />\n      <div className=\"p-4 pt-0\">\n        <PromptInput\n          status={status}\n          onStop={() => void stop()}\n          placeholder={placeholder}\n          enableAttachments={enableAttachments}\n          toolbar={toolbar}\n          onSubmit={(text, files) => void sendMessage({ text, files })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chat.js","sources":["../../../src/data/chat/Chat.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport {\n  DefaultChatTransport,\n  lastAssistantMessageIsCompleteWithApprovalResponses,\n  type ChatTransport,\n  type UIMessage,\n} from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Conversation } from \"./Conversation\";\nimport { PromptInput } from \"./PromptInput\";\nimport { Suggestions } from \"./Suggestion\";\nimport { ModelSelector, EffortSelector } from \"./ModelSelector\";\nimport { providerIcon } from \"./provider-icons\";\nimport { ContextUsage } from \"./ContextUsage\";\nimport type { ChatModel, ChatMessageMetadata, ChatUsageSummary, Suggestion, ToolResultRenderer } from \"./types\";\n\n/** Assistant messages carry token usage + cost the backend rode on the finish\n *  part's `messageMetadata`. */\ntype ChatUIMessage = UIMessage<ChatMessageMetadata>;\n\nexport type ChatProps = {\n  /** Endpoint that speaks the AI SDK v6 UI Message Stream protocol.\n   *  Ignored when `transport` is supplied. Defaults to \"/api/chat\". */\n  api?: string;\n  /** Model menu. When omitted and `modelsApi` is set, it is fetched. */\n  models?: ChatModel[];\n  /** Endpoint returning the model menu (ModelInfo[]). Defaults to\n   *  \"/api/chat/models\". Set to null to disable fetching. */\n  modelsApi?: string | null;\n  /** Initially selected model id; otherwise the first configured model. */\n  defaultModel?: string;\n  /** Reasoning-effort options for capable models. */\n  reasoningEfforts?: string[];\n  /** Initially selected reasoning effort (\"\" = none). */\n  defaultReasoningEffort?: string;\n  /** Notified when the user changes the model. */\n  onModelChange?: (id: string) => void;\n  /** Notified after each assistant turn with a usage snapshot (tokens used out\n   *  of the model's context window + cumulative cost), for a usage gauge. */\n  onUsage?: (usage: ChatUsageSummary) => void;\n  /** Suggested prompts shown on the empty state. */\n  suggestions?: Suggestion[];\n  /** Enables file/image attachments. */\n  enableAttachments?: boolean;\n  /** \"manual\" forwards a tool-approval policy hint to the backend. */\n  toolApproval?: \"auto\" | \"manual\";\n  /** Thread id to persist this conversation under (forwarded in the body). */\n  threadId?: string;\n  /** Optional host renderer for recognized completed tool outputs. */\n  renderToolResult?: ToolResultRenderer;\n  /** Extra fields merged into every request body. */\n  body?: Record<string, unknown>;\n  /** Pre-built transport (e.g. a mock for stories/tests). */\n  transport?: ChatTransport<UIMessage>;\n  /** Initial messages to seed the conversation. */\n  initialMessages?: UIMessage[];\n  /** Prompt to send automatically once. A new `id` sends even when text repeats. */\n  initialPrompt?: { id: number; text: string } | null;\n  /** Called after `initialPrompt` has been handed to the chat transport. */\n  onInitialPromptSent?: () => void;\n  placeholder?: string;\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\nconst DEFAULT_EFFORTS = [\"low\", \"medium\", \"high\"];\n\n/** Self-contained AI chat over a v6-compatible `/api/chat`: a streaming\n *  conversation with model/effort selectors, suggestions, attachments,\n *  per-message copy/regenerate, and human-in-the-loop tool approvals. The\n *  backend owns model selection and tool execution; the selected model,\n *  effort, approval policy and thread id are forwarded in the request body. */\nexport function Chat({\n  api = \"/api/chat\",\n  models: modelsProp,\n  modelsApi = \"/api/chat/models\",\n  defaultModel,\n  reasoningEfforts = DEFAULT_EFFORTS,\n  defaultReasoningEffort = \"\",\n  onModelChange,\n  onUsage,\n  suggestions,\n  enableAttachments = false,\n  toolApproval,\n  threadId,\n  renderToolResult,\n  body,\n  transport,\n  initialMessages,\n  initialPrompt,\n  onInitialPromptSent,\n  placeholder,\n  emptyState,\n  className,\n}: ChatProps) {\n  const [models, setModels] = useState<ChatModel[]>(modelsProp ?? []);\n  const [model, setModel] = useState<string | undefined>(defaultModel);\n  const [effort, setEffort] = useState(defaultReasoningEffort);\n  const [usage, setUsage] = useState<ChatUsageSummary | null>(null);\n  const lastDefaultModel = useRef(defaultModel);\n  const sentInitialPromptId = useRef<number | null>(null);\n\n  // Fetch the model menu unless one was supplied or fetching is disabled.\n  useEffect(() => {\n    if (modelsProp || !modelsApi) return;\n    let cancelled = false;\n    fetch(modelsApi)\n      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`models ${r.status}`))))\n      .then((data: ChatModel[]) => {\n        if (cancelled) return;\n        setModels(data);\n        setModel((m) => m ?? data.find((d) => d.configured !== false)?.id);\n      })\n      .catch((err) => console.warn(\"clicky-ui: failed to load chat models\", err));\n    return () => {\n      cancelled = true;\n    };\n  }, [modelsProp, modelsApi]);\n\n  useEffect(() => {\n    if (!defaultModel || defaultModel === lastDefaultModel.current) return;\n    lastDefaultModel.current = defaultModel;\n    setModel(defaultModel);\n  }, [defaultModel]);\n\n  const selectedModel = models.find((m) => m.id === model);\n  const showEffort = !selectedModel || selectedModel.reasoning;\n\n  // A function body keeps the transport stable while always sending the latest\n  // model/effort/policy selections.\n  const bodyRef = useRef<Record<string, unknown>>({});\n  bodyRef.current = {\n    ...body,\n    ...(model ? { model } : {}),\n    ...(effort ? { reasoningEffort: effort } : {}),\n    ...(toolApproval ? { toolApproval } : {}),\n    ...(threadId ? { threadId } : {}),\n  };\n\n  const resolvedTransport = useMemo<ChatTransport<UIMessage>>(\n    () => transport ?? new DefaultChatTransport({ api, body: () => bodyRef.current }),\n    [transport, api],\n  );\n\n  const { messages, sendMessage, regenerate, addToolApprovalResponse, status, error, clearError, stop } =\n    useChat<ChatUIMessage>({\n      transport: resolvedTransport,\n      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,\n      ...(initialMessages ? { messages: initialMessages as ChatUIMessage[] } : {}),\n    });\n\n  useEffect(() => {\n    if (!initialPrompt || status !== \"ready\") return;\n    if (sentInitialPromptId.current === initialPrompt.id) return;\n    const text = initialPrompt.text.trim();\n    if (!text) return;\n    sentInitialPromptId.current = initialPrompt.id;\n    void sendMessage({ text });\n    onInitialPromptSent?.();\n  }, [initialPrompt, onInitialPromptSent, sendMessage, status]);\n\n  // Surface a usage snapshot after each settled assistant turn. The backend\n  // rides usage/cost on the finish part's messageMetadata; we read it off the\n  // last assistant message and resolve maxTokens from the selected model.\n  const onUsageRef = useRef(onUsage);\n  onUsageRef.current = onUsage;\n  useEffect(() => {\n    if (status !== \"ready\") return;\n    const last = [...messages].reverse().find((m) => m.role === \"assistant\");\n    const meta = last?.metadata;\n    if (!meta) return;\n    const cost = meta.threadCostUsd ?? meta.cost;\n    const snapshot: ChatUsageSummary = {\n      usedTokens: meta.contextTokens ?? meta.usage?.totalTokens ?? 0,\n      maxTokens: selectedModel?.contextWindow ?? 0,\n      messageCount: messages.length,\n      ...(cost != null ? { cost } : {}),\n      ...(selectedModel?.label ? { modelLabel: selectedModel.label } : {}),\n    };\n    setUsage(snapshot);\n    onUsageRef.current?.(snapshot);\n  }, [messages, status, selectedModel]);\n\n  const onModelSelect = (id: string) => {\n    setModel(id);\n    onModelChange?.(id);\n  };\n\n  const ModelGlyph = providerIcon(selectedModel?.provider);\n  const toolbar = models.length > 0 || showEffort || (usage && usage.maxTokens > 0) ? (\n    <div className=\"flex flex-1 items-center gap-2\">\n      <ModelSelector models={models} value={model} onChange={onModelSelect} />\n      {showEffort && (\n        <EffortSelector efforts={reasoningEfforts} value={effort} onChange={setEffort} />\n      )}\n      {usage && usage.maxTokens > 0 && (\n        <>\n          <div className=\"flex-1\" />\n          <ContextUsage\n            usedTokens={usage.usedTokens}\n            maxTokens={usage.maxTokens}\n            {...(usage.messageCount != null ? { messageCount: usage.messageCount } : {})}\n            {...(usage.cost != null ? { cost: usage.cost } : {})}\n            {...(usage.modelLabel ? { modelLabel: usage.modelLabel } : {})}\n            {...(ModelGlyph ? { modelIcon: ModelGlyph } : {})}\n          />\n        </>\n      )}\n    </div>\n  ) : undefined;\n\n  const empty = (messages.length === 0 && (emptyState || suggestions?.length)) ? (\n    <div className=\"flex flex-col items-center gap-4\">\n      {emptyState}\n      {suggestions && suggestions.length > 0 && (\n        <Suggestions suggestions={suggestions} onSelect={(text) => void sendMessage({ text })} />\n      )}\n    </div>\n  ) : undefined;\n\n  return (\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <Conversation\n        messages={messages}\n        status={status}\n        error={error}\n        onClearError={clearError}\n        emptyState={empty}\n        onRegenerate={(messageId) => void regenerate({ messageId })}\n        onApprove={(id, approved, reason) =>\n          void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })\n        }\n        {...(renderToolResult ? { renderToolResult } : {})}\n      />\n      <div className=\"p-4 pt-0\">\n        <PromptInput\n          status={status}\n          onStop={() => void stop()}\n          placeholder={placeholder}\n          enableAttachments={enableAttachments}\n          toolbar={toolbar}\n          onSubmit={(text, files) => void sendMessage({ text, files })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/chat/Message.cjs

@@ -9,7 +9,7 @@ const MessageActions = require("./MessageActions.cjs");
 const Reasoning = require("./Reasoning.cjs");
 const types = require("./types.cjs");
 const UiFile = require("../../icons/components/UiFile.cjs");
-function Message({ message, className, onRegenerate, onApprove }) {
+function Message({ message, className, onRegenerate, onApprove, renderToolResult }) {
   const isUser = message.role === "user";
   const text = message.parts.filter((p) => p.type === "text").map((p) => p.text).join("");
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -33,7 +33,8 @@ function Message({ message, className, onRegenerate, onApprove }) {
               {
                 part,
                 isUser,
-                onApprove
+                onApprove,
+                renderToolResult
               },
               `${message.id}-${i}`
             ))
@@ -53,7 +54,8 @@ function Message({ message, className, onRegenerate, onApprove }) {
 function MessagePart({
   part,
   isUser,
-  onApprove
+  onApprove,
+  renderToolResult
 }) {
   if (part.type === "text") {
     if (isUser) {
@@ -68,7 +70,14 @@ function MessagePart({
     return /* @__PURE__ */ jsxRuntime.jsx(FilePart, { part });
   }
   if (types.isDynamicToolPart(part) || types.isTypedToolPart(part)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ToolCall.ToolCall, { part, onApprove });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ToolCall.ToolCall,
+      {
+        part,
+        onApprove,
+        ...renderToolResult ? { renderToolResult } : {}
+      }
+    );
   }
   return null;
 }

package/dist/data/chat/Message.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Message.cjs","sources":["../../../src/data/chat/Message.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiFile } from \"../../icons\";\nimport { Markdown } from \"../Markdown\";\nimport { ToolCall } from \"./ToolCall\";\nimport { MessageActions } from \"./MessageActions\";\nimport { Reasoning } from \"./Reasoning\";\nimport type { UIMessage, FileUIPart } from \"./types\";\nimport {\n  isDynamicToolPart,\n  isTypedToolPart,\n  isReasoningPart,\n  isFilePart,\n  type AnyToolPart,\n} from \"./types\";\n\n/** Callbacks the conversation threads down to each message. */\nexport type MessageActionHandlers = {\n  /** Re-generate the assistant message with the given id. */\n  onRegenerate?: ((messageId: string) => void) | undefined;\n  /** Respond to a tool approval request. */\n  onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;\n};\n\nexport type MessageProps = MessageActionHandlers & {\n  message: UIMessage;\n  className?: string;\n};\n\n/** Renders one chat message. User messages are right-aligned bubbles; assistant\n *  messages render text as markdown, reasoning and tool parts inline, file parts\n *  as thumbnails/chips, and a hover action row (copy / regenerate). */\nexport function Message({ message, className, onRegenerate, onApprove }: MessageProps) {\n  const isUser = message.role === \"user\";\n  const text = message.parts\n    .filter((p) => p.type === \"text\")\n    .map((p) => (p as { text: string }).text)\n    .join(\"\");\n\n  return (\n    <div\n      className={cn(\n        \"group flex w-full max-w-[95%] flex-col gap-2\",\n        isUser ? \"ml-auto items-end\" : \"items-start\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm\",\n          isUser && \"rounded-lg bg-secondary px-4 py-3 text-secondary-foreground\",\n        )}\n      >\n        {message.parts.map((part, i) => (\n          <MessagePart\n            key={`${message.id}-${i}`}\n            part={part}\n            isUser={isUser}\n            onApprove={onApprove}\n          />\n        ))}\n      </div>\n\n      {!isUser && text && (\n        <MessageActions\n          text={text}\n          onRegenerate={onRegenerate ? () => onRegenerate(message.id) : undefined}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction MessagePart({\n  part,\n  isUser,\n  onApprove,\n}: {\n  part: UIMessage[\"parts\"][number];\n  isUser: boolean;\n  onApprove: MessageActionHandlers[\"onApprove\"];\n}) {\n  if (part.type === \"text\") {\n    if (isUser) {\n      return <span className=\"whitespace-pre-wrap break-words\">{part.text}</span>;\n    }\n    return <Markdown text={part.text} />;\n  }\n  if (isReasoningPart(part)) {\n    return <Reasoning text={part.text} />;\n  }\n  if (isFilePart(part)) {\n    return <FilePart part={part} />;\n  }\n  if (isDynamicToolPart(part) || isTypedToolPart(part)) {\n    return <ToolCall part={part as AnyToolPart} onApprove={onApprove} />;\n  }\n  return null;\n}\n\n/** Renders an attachment: images inline as a thumbnail, everything else as a\n *  labelled file chip. */\nfunction FilePart({ part }: { part: FileUIPart }) {\n  const isImage = part.mediaType?.startsWith(\"image/\");\n  if (isImage && part.url) {\n    return (\n      <img\n        src={part.url}\n        alt={part.filename ?? \"attachment\"}\n        className=\"max-h-48 max-w-full rounded-md border border-border\"\n      />\n    );\n  }\n  return (\n    <a\n      href={part.url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:text-foreground\"\n    >\n      <Icon icon={UiFile} className=\"size-3.5 shrink-0\" />\n      <span className=\"truncate\">{part.filename ?? part.mediaType ?? \"file\"}</span>\n    </a>\n  );\n}\n"],"names":["jsxs","cn","jsx","MessageActions","Markdown","isReasoningPart","Reasoning","isFilePart","isDynamicToolPart","isTypedToolPart","ToolCall","Icon","UiFile"],"mappings":";;;;;;;;;;;AAgCO,SAAS,QAAQ,EAAE,SAAS,WAAW,cAAc,aAA2B;AACrF,QAAM,SAAS,QAAQ,SAAS;AAChC,QAAM,OAAO,QAAQ,MAClB,OAAO,CAAC,MAAM,EAAE,SAAS,MAAM,EAC/B,IAAI,CAAC,MAAO,EAAuB,IAAI,EACvC,KAAK,EAAE;AAEV,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,SAAS,sBAAsB;AAAA,QAC/B;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,YAGX,UAAA,QAAQ,MAAM,IAAI,CAAC,MAAM,MACxBC,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAHK,GAAG,QAAQ,EAAE,IAAI,CAAC;AAAA,YAAA,CAK1B;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,CAAC,UAAU,QACVA,2BAAAA;AAAAA,UAACC,eAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA,cAAc,eAAe,MAAM,aAAa,QAAQ,EAAE,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAChE;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,KAAK,SAAS,QAAQ;AACxB,QAAI,QAAQ;AACV,aAAOD,2BAAAA,IAAC,QAAA,EAAK,WAAU,mCAAmC,eAAK,MAAK;AAAA,IACtE;AACA,WAAOA,2BAAAA,IAACE,SAAAA,UAAA,EAAS,MAAM,KAAK,KAAA,CAAM;AAAA,EACpC;AACA,MAAIC,MAAAA,gBAAgB,IAAI,GAAG;AACzB,WAAOH,2BAAAA,IAACI,UAAAA,WAAA,EAAU,MAAM,KAAK,KAAA,CAAM;AAAA,EACrC;AACA,MAAIC,MAAAA,WAAW,IAAI,GAAG;AACpB,WAAOL,+BAAC,YAAS,MAAY;AAAA,EAC/B;AACA,MAAIM,MAAAA,kBAAkB,IAAI,KAAKC,MAAAA,gBAAgB,IAAI,GAAG;AACpD,WAAOP,2BAAAA,IAACQ,SAAAA,UAAA,EAAS,MAA2B,UAAA,CAAsB;AAAA,EACpE;AACA,SAAO;AACT;AAIA,SAAS,SAAS,EAAE,QAA8B;;AAChD,QAAM,WAAU,UAAK,cAAL,mBAAgB,WAAW;AAC3C,MAAI,WAAW,KAAK,KAAK;AACvB,WACER,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,KAAK,KAAK,YAAY;AAAA,QACtB,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhB;AACA,SACEF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAAE,2BAAAA,IAACS,KAAAA,MAAA,EAAK,MAAMC,OAAAA,QAAQ,WAAU,qBAAoB;AAAA,QAClDV,2BAAAA,IAAC,UAAK,WAAU,YAAY,eAAK,YAAY,KAAK,aAAa,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;;"}
+{"version":3,"file":"Message.cjs","sources":["../../../src/data/chat/Message.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiFile } from \"../../icons\";\nimport { Markdown } from \"../Markdown\";\nimport { ToolCall } from \"./ToolCall\";\nimport { MessageActions } from \"./MessageActions\";\nimport { Reasoning } from \"./Reasoning\";\nimport type { UIMessage, FileUIPart } from \"./types\";\nimport {\n  isDynamicToolPart,\n  isTypedToolPart,\n  isReasoningPart,\n  isFilePart,\n  type AnyToolPart,\n  type ToolResultRenderer,\n} from \"./types\";\n\n/** Callbacks the conversation threads down to each message. */\nexport type MessageActionHandlers = {\n  /** Re-generate the assistant message with the given id. */\n  onRegenerate?: ((messageId: string) => void) | undefined;\n  /** Respond to a tool approval request. */\n  onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;\n  /** Optional host renderer for recognized completed tool outputs. */\n  renderToolResult?: ToolResultRenderer;\n};\n\nexport type MessageProps = MessageActionHandlers & {\n  message: UIMessage;\n  className?: string;\n};\n\n/** Renders one chat message. User messages are right-aligned bubbles; assistant\n *  messages render text as markdown, reasoning and tool parts inline, file parts\n *  as thumbnails/chips, and a hover action row (copy / regenerate). */\nexport function Message({ message, className, onRegenerate, onApprove, renderToolResult }: MessageProps) {\n  const isUser = message.role === \"user\";\n  const text = message.parts\n    .filter((p) => p.type === \"text\")\n    .map((p) => (p as { text: string }).text)\n    .join(\"\");\n\n  return (\n    <div\n      className={cn(\n        \"group flex w-full max-w-[95%] flex-col gap-2\",\n        isUser ? \"ml-auto items-end\" : \"items-start\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm\",\n          isUser && \"rounded-lg bg-secondary px-4 py-3 text-secondary-foreground\",\n        )}\n      >\n        {message.parts.map((part, i) => (\n          <MessagePart\n            key={`${message.id}-${i}`}\n            part={part}\n            isUser={isUser}\n            onApprove={onApprove}\n            renderToolResult={renderToolResult}\n          />\n        ))}\n      </div>\n\n      {!isUser && text && (\n        <MessageActions\n          text={text}\n          onRegenerate={onRegenerate ? () => onRegenerate(message.id) : undefined}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction MessagePart({\n  part,\n  isUser,\n  onApprove,\n  renderToolResult,\n}: {\n  part: UIMessage[\"parts\"][number];\n  isUser: boolean;\n  onApprove: MessageActionHandlers[\"onApprove\"];\n  renderToolResult: MessageActionHandlers[\"renderToolResult\"];\n}) {\n  if (part.type === \"text\") {\n    if (isUser) {\n      return <span className=\"whitespace-pre-wrap break-words\">{part.text}</span>;\n    }\n    return <Markdown text={part.text} />;\n  }\n  if (isReasoningPart(part)) {\n    return <Reasoning text={part.text} />;\n  }\n  if (isFilePart(part)) {\n    return <FilePart part={part} />;\n  }\n  if (isDynamicToolPart(part) || isTypedToolPart(part)) {\n    return (\n      <ToolCall\n        part={part as AnyToolPart}\n        onApprove={onApprove}\n        {...(renderToolResult ? { renderToolResult } : {})}\n      />\n    );\n  }\n  return null;\n}\n\n/** Renders an attachment: images inline as a thumbnail, everything else as a\n *  labelled file chip. */\nfunction FilePart({ part }: { part: FileUIPart }) {\n  const isImage = part.mediaType?.startsWith(\"image/\");\n  if (isImage && part.url) {\n    return (\n      <img\n        src={part.url}\n        alt={part.filename ?? \"attachment\"}\n        className=\"max-h-48 max-w-full rounded-md border border-border\"\n      />\n    );\n  }\n  return (\n    <a\n      href={part.url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:text-foreground\"\n    >\n      <Icon icon={UiFile} className=\"size-3.5 shrink-0\" />\n      <span className=\"truncate\">{part.filename ?? part.mediaType ?? \"file\"}</span>\n    </a>\n  );\n}\n"],"names":["jsxs","cn","jsx","MessageActions","Markdown","isReasoningPart","Reasoning","isFilePart","isDynamicToolPart","isTypedToolPart","ToolCall","Icon","UiFile"],"mappings":";;;;;;;;;;;AAmCO,SAAS,QAAQ,EAAE,SAAS,WAAW,cAAc,WAAW,oBAAkC;AACvG,QAAM,SAAS,QAAQ,SAAS;AAChC,QAAM,OAAO,QAAQ,MAClB,OAAO,CAAC,MAAM,EAAE,SAAS,MAAM,EAC/B,IAAI,CAAC,MAAO,EAAuB,IAAI,EACvC,KAAK,EAAE;AAEV,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,SAAS,sBAAsB;AAAA,QAC/B;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,MAAAA;AAAAA,cACT;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,YAGX,UAAA,QAAQ,MAAM,IAAI,CAAC,MAAM,MACxBC,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAJK,GAAG,QAAQ,EAAE,IAAI,CAAC;AAAA,YAAA,CAM1B;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,CAAC,UAAU,QACVA,2BAAAA;AAAAA,UAACC,eAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA,cAAc,eAAe,MAAM,aAAa,QAAQ,EAAE,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAChE;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,KAAK,SAAS,QAAQ;AACxB,QAAI,QAAQ;AACV,aAAOD,2BAAAA,IAAC,QAAA,EAAK,WAAU,mCAAmC,eAAK,MAAK;AAAA,IACtE;AACA,WAAOA,2BAAAA,IAACE,SAAAA,UAAA,EAAS,MAAM,KAAK,KAAA,CAAM;AAAA,EACpC;AACA,MAAIC,MAAAA,gBAAgB,IAAI,GAAG;AACzB,WAAOH,2BAAAA,IAACI,UAAAA,WAAA,EAAU,MAAM,KAAK,KAAA,CAAM;AAAA,EACrC;AACA,MAAIC,MAAAA,WAAW,IAAI,GAAG;AACpB,WAAOL,+BAAC,YAAS,MAAY;AAAA,EAC/B;AACA,MAAIM,MAAAA,kBAAkB,IAAI,KAAKC,MAAAA,gBAAgB,IAAI,GAAG;AACpD,WACEP,2BAAAA;AAAAA,MAACQ,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACC,GAAI,mBAAmB,EAAE,qBAAqB,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,EAGtD;AACA,SAAO;AACT;AAIA,SAAS,SAAS,EAAE,QAA8B;;AAChD,QAAM,WAAU,UAAK,cAAL,mBAAgB,WAAW;AAC3C,MAAI,WAAW,KAAK,KAAK;AACvB,WACER,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,KAAK,KAAK,YAAY;AAAA,QACtB,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhB;AACA,SACEF,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAAE,2BAAAA,IAACS,KAAAA,MAAA,EAAK,MAAMC,OAAAA,QAAQ,WAAU,qBAAoB;AAAA,QAClDV,2BAAAA,IAAC,UAAK,WAAU,YAAY,eAAK,YAAY,KAAK,aAAa,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;;"}

package/dist/data/chat/Message.d.ts

@@ -1,10 +1,12 @@
-import { UIMessage } from './types';
+import { UIMessage, ToolResultRenderer } from './types';
 /** Callbacks the conversation threads down to each message. */
 export type MessageActionHandlers = {
     /** Re-generate the assistant message with the given id. */
     onRegenerate?: ((messageId: string) => void) | undefined;
     /** Respond to a tool approval request. */
     onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;
+    /** Optional host renderer for recognized completed tool outputs. */
+    renderToolResult?: ToolResultRenderer;
 };
 export type MessageProps = MessageActionHandlers & {
     message: UIMessage;
@@ -13,5 +15,5 @@ export type MessageProps = MessageActionHandlers & {
 /** Renders one chat message. User messages are right-aligned bubbles; assistant
  *  messages render text as markdown, reasoning and tool parts inline, file parts
  *  as thumbnails/chips, and a hover action row (copy / regenerate). */
-export declare function Message({ message, className, onRegenerate, onApprove }: MessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Message({ message, className, onRegenerate, onApprove, renderToolResult }: MessageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Message.d.ts.map

package/dist/data/chat/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Message.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,SAAS,CAAC;AASrD,+DAA+D;AAC/D,MAAM,MAAM,qBAAqB,GAAG;IAClC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC5F,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,qBAAqB,GAAG;IACjD,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;uEAEuE;AACvE,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,YAAY,2CAuCpF"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Message.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,SAAS,CAAC;AACrD,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAC;AAEjB,+DAA+D;AAC/D,MAAM,MAAM,qBAAqB,GAAG;IAClC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACzD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3F,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,qBAAqB,GAAG;IACjD,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;uEAEuE;AACvE,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,YAAY,2CAwCtG"}

package/dist/data/chat/Message.js

@@ -7,7 +7,7 @@ import { MessageActions } from "./MessageActions.js";
 import { Reasoning } from "./Reasoning.js";
 import { isReasoningPart, isFilePart, isDynamicToolPart, isTypedToolPart } from "./types.js";
 import { UiFile } from "../../icons/components/UiFile.js";
-function Message({ message, className, onRegenerate, onApprove }) {
+function Message({ message, className, onRegenerate, onApprove, renderToolResult }) {
   const isUser = message.role === "user";
   const text = message.parts.filter((p) => p.type === "text").map((p) => p.text).join("");
   return /* @__PURE__ */ jsxs(
@@ -31,7 +31,8 @@ function Message({ message, className, onRegenerate, onApprove }) {
               {
                 part,
                 isUser,
-                onApprove
+                onApprove,
+                renderToolResult
               },
               `${message.id}-${i}`
             ))
@@ -51,7 +52,8 @@ function Message({ message, className, onRegenerate, onApprove }) {
 function MessagePart({
   part,
   isUser,
-  onApprove
+  onApprove,
+  renderToolResult
 }) {
   if (part.type === "text") {
     if (isUser) {
@@ -66,7 +68,14 @@ function MessagePart({
     return /* @__PURE__ */ jsx(FilePart, { part });
   }
   if (isDynamicToolPart(part) || isTypedToolPart(part)) {
-    return /* @__PURE__ */ jsx(ToolCall, { part, onApprove });
+    return /* @__PURE__ */ jsx(
+      ToolCall,
+      {
+        part,
+        onApprove,
+        ...renderToolResult ? { renderToolResult } : {}
+      }
+    );
   }
   return null;
 }

package/dist/data/chat/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sources":["../../../src/data/chat/Message.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiFile } from \"../../icons\";\nimport { Markdown } from \"../Markdown\";\nimport { ToolCall } from \"./ToolCall\";\nimport { MessageActions } from \"./MessageActions\";\nimport { Reasoning } from \"./Reasoning\";\nimport type { UIMessage, FileUIPart } from \"./types\";\nimport {\n  isDynamicToolPart,\n  isTypedToolPart,\n  isReasoningPart,\n  isFilePart,\n  type AnyToolPart,\n} from \"./types\";\n\n/** Callbacks the conversation threads down to each message. */\nexport type MessageActionHandlers = {\n  /** Re-generate the assistant message with the given id. */\n  onRegenerate?: ((messageId: string) => void) | undefined;\n  /** Respond to a tool approval request. */\n  onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;\n};\n\nexport type MessageProps = MessageActionHandlers & {\n  message: UIMessage;\n  className?: string;\n};\n\n/** Renders one chat message. User messages are right-aligned bubbles; assistant\n *  messages render text as markdown, reasoning and tool parts inline, file parts\n *  as thumbnails/chips, and a hover action row (copy / regenerate). */\nexport function Message({ message, className, onRegenerate, onApprove }: MessageProps) {\n  const isUser = message.role === \"user\";\n  const text = message.parts\n    .filter((p) => p.type === \"text\")\n    .map((p) => (p as { text: string }).text)\n    .join(\"\");\n\n  return (\n    <div\n      className={cn(\n        \"group flex w-full max-w-[95%] flex-col gap-2\",\n        isUser ? \"ml-auto items-end\" : \"items-start\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm\",\n          isUser && \"rounded-lg bg-secondary px-4 py-3 text-secondary-foreground\",\n        )}\n      >\n        {message.parts.map((part, i) => (\n          <MessagePart\n            key={`${message.id}-${i}`}\n            part={part}\n            isUser={isUser}\n            onApprove={onApprove}\n          />\n        ))}\n      </div>\n\n      {!isUser && text && (\n        <MessageActions\n          text={text}\n          onRegenerate={onRegenerate ? () => onRegenerate(message.id) : undefined}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction MessagePart({\n  part,\n  isUser,\n  onApprove,\n}: {\n  part: UIMessage[\"parts\"][number];\n  isUser: boolean;\n  onApprove: MessageActionHandlers[\"onApprove\"];\n}) {\n  if (part.type === \"text\") {\n    if (isUser) {\n      return <span className=\"whitespace-pre-wrap break-words\">{part.text}</span>;\n    }\n    return <Markdown text={part.text} />;\n  }\n  if (isReasoningPart(part)) {\n    return <Reasoning text={part.text} />;\n  }\n  if (isFilePart(part)) {\n    return <FilePart part={part} />;\n  }\n  if (isDynamicToolPart(part) || isTypedToolPart(part)) {\n    return <ToolCall part={part as AnyToolPart} onApprove={onApprove} />;\n  }\n  return null;\n}\n\n/** Renders an attachment: images inline as a thumbnail, everything else as a\n *  labelled file chip. */\nfunction FilePart({ part }: { part: FileUIPart }) {\n  const isImage = part.mediaType?.startsWith(\"image/\");\n  if (isImage && part.url) {\n    return (\n      <img\n        src={part.url}\n        alt={part.filename ?? \"attachment\"}\n        className=\"max-h-48 max-w-full rounded-md border border-border\"\n      />\n    );\n  }\n  return (\n    <a\n      href={part.url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:text-foreground\"\n    >\n      <Icon icon={UiFile} className=\"size-3.5 shrink-0\" />\n      <span className=\"truncate\">{part.filename ?? part.mediaType ?? \"file\"}</span>\n    </a>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAgCO,SAAS,QAAQ,EAAE,SAAS,WAAW,cAAc,aAA2B;AACrF,QAAM,SAAS,QAAQ,SAAS;AAChC,QAAM,OAAO,QAAQ,MAClB,OAAO,CAAC,MAAM,EAAE,SAAS,MAAM,EAC/B,IAAI,CAAC,MAAO,EAAuB,IAAI,EACvC,KAAK,EAAE;AAEV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,sBAAsB;AAAA,QAC/B;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,YAGX,UAAA,QAAQ,MAAM,IAAI,CAAC,MAAM,MACxB;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAHK,GAAG,QAAQ,EAAE,IAAI,CAAC;AAAA,YAAA,CAK1B;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,CAAC,UAAU,QACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,cAAc,eAAe,MAAM,aAAa,QAAQ,EAAE,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAChE;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,KAAK,SAAS,QAAQ;AACxB,QAAI,QAAQ;AACV,aAAO,oBAAC,QAAA,EAAK,WAAU,mCAAmC,eAAK,MAAK;AAAA,IACtE;AACA,WAAO,oBAAC,UAAA,EAAS,MAAM,KAAK,KAAA,CAAM;AAAA,EACpC;AACA,MAAI,gBAAgB,IAAI,GAAG;AACzB,WAAO,oBAAC,WAAA,EAAU,MAAM,KAAK,KAAA,CAAM;AAAA,EACrC;AACA,MAAI,WAAW,IAAI,GAAG;AACpB,WAAO,oBAAC,YAAS,MAAY;AAAA,EAC/B;AACA,MAAI,kBAAkB,IAAI,KAAK,gBAAgB,IAAI,GAAG;AACpD,WAAO,oBAAC,UAAA,EAAS,MAA2B,UAAA,CAAsB;AAAA,EACpE;AACA,SAAO;AACT;AAIA,SAAS,SAAS,EAAE,QAA8B;;AAChD,QAAM,WAAU,UAAK,cAAL,mBAAgB,WAAW;AAC3C,MAAI,WAAW,KAAK,KAAK;AACvB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,KAAK,KAAK,YAAY;AAAA,QACtB,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhB;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAM,QAAQ,WAAU,qBAAoB;AAAA,QAClD,oBAAC,UAAK,WAAU,YAAY,eAAK,YAAY,KAAK,aAAa,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;"}
+{"version":3,"file":"Message.js","sources":["../../../src/data/chat/Message.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiFile } from \"../../icons\";\nimport { Markdown } from \"../Markdown\";\nimport { ToolCall } from \"./ToolCall\";\nimport { MessageActions } from \"./MessageActions\";\nimport { Reasoning } from \"./Reasoning\";\nimport type { UIMessage, FileUIPart } from \"./types\";\nimport {\n  isDynamicToolPart,\n  isTypedToolPart,\n  isReasoningPart,\n  isFilePart,\n  type AnyToolPart,\n  type ToolResultRenderer,\n} from \"./types\";\n\n/** Callbacks the conversation threads down to each message. */\nexport type MessageActionHandlers = {\n  /** Re-generate the assistant message with the given id. */\n  onRegenerate?: ((messageId: string) => void) | undefined;\n  /** Respond to a tool approval request. */\n  onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;\n  /** Optional host renderer for recognized completed tool outputs. */\n  renderToolResult?: ToolResultRenderer;\n};\n\nexport type MessageProps = MessageActionHandlers & {\n  message: UIMessage;\n  className?: string;\n};\n\n/** Renders one chat message. User messages are right-aligned bubbles; assistant\n *  messages render text as markdown, reasoning and tool parts inline, file parts\n *  as thumbnails/chips, and a hover action row (copy / regenerate). */\nexport function Message({ message, className, onRegenerate, onApprove, renderToolResult }: MessageProps) {\n  const isUser = message.role === \"user\";\n  const text = message.parts\n    .filter((p) => p.type === \"text\")\n    .map((p) => (p as { text: string }).text)\n    .join(\"\");\n\n  return (\n    <div\n      className={cn(\n        \"group flex w-full max-w-[95%] flex-col gap-2\",\n        isUser ? \"ml-auto items-end\" : \"items-start\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm\",\n          isUser && \"rounded-lg bg-secondary px-4 py-3 text-secondary-foreground\",\n        )}\n      >\n        {message.parts.map((part, i) => (\n          <MessagePart\n            key={`${message.id}-${i}`}\n            part={part}\n            isUser={isUser}\n            onApprove={onApprove}\n            renderToolResult={renderToolResult}\n          />\n        ))}\n      </div>\n\n      {!isUser && text && (\n        <MessageActions\n          text={text}\n          onRegenerate={onRegenerate ? () => onRegenerate(message.id) : undefined}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction MessagePart({\n  part,\n  isUser,\n  onApprove,\n  renderToolResult,\n}: {\n  part: UIMessage[\"parts\"][number];\n  isUser: boolean;\n  onApprove: MessageActionHandlers[\"onApprove\"];\n  renderToolResult: MessageActionHandlers[\"renderToolResult\"];\n}) {\n  if (part.type === \"text\") {\n    if (isUser) {\n      return <span className=\"whitespace-pre-wrap break-words\">{part.text}</span>;\n    }\n    return <Markdown text={part.text} />;\n  }\n  if (isReasoningPart(part)) {\n    return <Reasoning text={part.text} />;\n  }\n  if (isFilePart(part)) {\n    return <FilePart part={part} />;\n  }\n  if (isDynamicToolPart(part) || isTypedToolPart(part)) {\n    return (\n      <ToolCall\n        part={part as AnyToolPart}\n        onApprove={onApprove}\n        {...(renderToolResult ? { renderToolResult } : {})}\n      />\n    );\n  }\n  return null;\n}\n\n/** Renders an attachment: images inline as a thumbnail, everything else as a\n *  labelled file chip. */\nfunction FilePart({ part }: { part: FileUIPart }) {\n  const isImage = part.mediaType?.startsWith(\"image/\");\n  if (isImage && part.url) {\n    return (\n      <img\n        src={part.url}\n        alt={part.filename ?? \"attachment\"}\n        className=\"max-h-48 max-w-full rounded-md border border-border\"\n      />\n    );\n  }\n  return (\n    <a\n      href={part.url}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className=\"flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:text-foreground\"\n    >\n      <Icon icon={UiFile} className=\"size-3.5 shrink-0\" />\n      <span className=\"truncate\">{part.filename ?? part.mediaType ?? \"file\"}</span>\n    </a>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAmCO,SAAS,QAAQ,EAAE,SAAS,WAAW,cAAc,WAAW,oBAAkC;AACvG,QAAM,SAAS,QAAQ,SAAS;AAChC,QAAM,OAAO,QAAQ,MAClB,OAAO,CAAC,MAAM,EAAE,SAAS,MAAM,EAC/B,IAAI,CAAC,MAAO,EAAuB,IAAI,EACvC,KAAK,EAAE;AAEV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,sBAAsB;AAAA,QAC/B;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU;AAAA,YAAA;AAAA,YAGX,UAAA,QAAQ,MAAM,IAAI,CAAC,MAAM,MACxB;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAJK,GAAG,QAAQ,EAAE,IAAI,CAAC;AAAA,YAAA,CAM1B;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,CAAC,UAAU,QACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,cAAc,eAAe,MAAM,aAAa,QAAQ,EAAE,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAChE;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,KAAK,SAAS,QAAQ;AACxB,QAAI,QAAQ;AACV,aAAO,oBAAC,QAAA,EAAK,WAAU,mCAAmC,eAAK,MAAK;AAAA,IACtE;AACA,WAAO,oBAAC,UAAA,EAAS,MAAM,KAAK,KAAA,CAAM;AAAA,EACpC;AACA,MAAI,gBAAgB,IAAI,GAAG;AACzB,WAAO,oBAAC,WAAA,EAAU,MAAM,KAAK,KAAA,CAAM;AAAA,EACrC;AACA,MAAI,WAAW,IAAI,GAAG;AACpB,WAAO,oBAAC,YAAS,MAAY;AAAA,EAC/B;AACA,MAAI,kBAAkB,IAAI,KAAK,gBAAgB,IAAI,GAAG;AACpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACC,GAAI,mBAAmB,EAAE,qBAAqB,CAAA;AAAA,MAAC;AAAA,IAAA;AAAA,EAGtD;AACA,SAAO;AACT;AAIA,SAAS,SAAS,EAAE,QAA8B;;AAChD,QAAM,WAAU,UAAK,cAAL,mBAAgB,WAAW;AAC3C,MAAI,WAAW,KAAK,KAAK;AACvB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,KAAK,KAAK,YAAY;AAAA,QACtB,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhB;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAM,QAAQ,WAAU,qBAAoB;AAAA,QAClD,oBAAC,UAAK,WAAU,YAAY,eAAK,YAAY,KAAK,aAAa,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;"}

package/dist/data/chat/ToolCall.cjs

@@ -31,7 +31,7 @@ const STATUS_ICON = {
   "output-denied": { icon: UiCircleX.UiCircleX, className: "text-orange-600" },
   "output-error": { icon: UiCircleX.UiCircleX, className: "text-destructive" }
 };
-function ToolCall({ part, defaultOpen = false, onApprove, className }) {
+function ToolCall({ part, defaultOpen = false, onApprove, renderToolResult, className }) {
   const needsApproval = part.state === "approval-requested";
   const [open, setOpen] = react.useState(defaultOpen || needsApproval);
   const status = STATUS_ICON[part.state];
@@ -69,7 +69,7 @@ function ToolCall({ part, defaultOpen = false, onApprove, className }) {
     ),
     open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 pl-4 pt-0.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ToolInput, { input: part.input }),
-      /* @__PURE__ */ jsxRuntime.jsx(ToolOutput, { part })
+      /* @__PURE__ */ jsxRuntime.jsx(ToolOutput, { part, ...renderToolResult ? { renderToolResult } : {} })
     ] }),
     needsApproval && /* @__PURE__ */ jsxRuntime.jsx(ApprovalControls, { part, onApprove })
   ] });
@@ -100,15 +100,20 @@ function ToolInput({ input }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { language: "json", source: JSON.stringify(input, null, 2) }) });
 }
-function ToolOutput({ part }) {
+function ToolOutput({
+  part,
+  renderToolResult
+}) {
   const errorText = part.state === "output-error" ? part.errorText : void 0;
   const output = part.state === "output-available" ? part.output : void 0;
   if (output === void 0 && errorText === void 0) {
     return null;
   }
+  const name = types.toolPartName(part);
+  const custom = output !== void 0 ? renderToolResult == null ? void 0 : renderToolResult({ part, toolName: name, output }) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("overflow-x-auto text-xs", errorText ? "text-destructive" : "text-muted-foreground"), children: [
     errorText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: errorText }),
-    output !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { language: "json", source: typeof output === "string" ? output : JSON.stringify(output, null, 2) })
+    custom ?? (output !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { language: "json", source: typeof output === "string" ? output : JSON.stringify(output, null, 2) }))
   ] });
 }
 exports.ToolCall = ToolCall;

package/dist/data/chat/ToolCall.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToolCall.cjs","sources":["../../../src/data/chat/ToolCall.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../components/button\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport {\n  UiCheck,\n  UiChevronDown,\n  UiCircleOutline,\n  UiCircleX,\n  UiClock,\n  UiWrench,\n} from \"../../icons\";\nimport type { AnyToolPart } from \"./types\";\nimport { toolPartName } from \"./types\";\n\nexport type ToolCallProps = {\n  /** The tool part from an assistant message (typed or dynamic). */\n  part: AnyToolPart;\n  /** Whether the call body starts expanded. Defaults to false. */\n  defaultOpen?: boolean;\n  /** Respond to an approval request (only used when state is\n   *  `approval-requested`). Receives the approval id, the decision, and an\n   *  optional reason. */\n  onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;\n  className?: string;\n};\n\ntype ToolState = AnyToolPart[\"state\"];\n\nconst STATUS_LABEL: Record<ToolState, string> = {\n  \"approval-requested\": \"Awaiting approval\",\n  \"approval-responded\": \"Responded\",\n  \"input-streaming\": \"Pending\",\n  \"input-available\": \"Running\",\n  \"output-available\": \"Completed\",\n  \"output-denied\": \"Denied\",\n  \"output-error\": \"Error\",\n};\n\nconst STATUS_ICON: Record<ToolState, { icon: StaticIconComponent; className: string }> = {\n  \"approval-requested\": { icon: UiClock, className: \"text-amber-600\" },\n  \"approval-responded\": { icon: UiCheck, className: \"text-sky-600\" },\n  \"input-streaming\": { icon: UiCircleOutline, className: \"text-muted-foreground\" },\n  \"input-available\": { icon: UiClock, className: \"text-muted-foreground animate-pulse\" },\n  \"output-available\": { icon: UiCheck, className: \"text-emerald-600\" },\n  \"output-denied\": { icon: UiCircleX, className: \"text-orange-600\" },\n  \"output-error\": { icon: UiCircleX, className: \"text-destructive\" },\n};\n\n/** Generic display of a single AI tool call: a collapsible header showing the\n *  tool name + status, expanding to its JSON input and (once available) output\n *  or error. Renders both clicky `dynamic-tool` parts and typed `tool-<name>`\n *  parts, keyed off `part.state`. */\nexport function ToolCall({ part, defaultOpen = false, onApprove, className }: ToolCallProps) {\n  const needsApproval = part.state === \"approval-requested\";\n  const [open, setOpen] = useState(defaultOpen || needsApproval);\n  const status = STATUS_ICON[part.state];\n  const name = toolPartName(part);\n\n  return (\n    <div className={cn(\"not-prose mb-1 w-full\", className)}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        onClick={() => setOpen((v) => !v)}\n        className=\"flex w-full items-center justify-between gap-2 py-0.5 text-muted-foreground hover:text-foreground\"\n      >\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <Icon icon={UiWrench} className=\"size-3 shrink-0\" />\n          <span className=\"truncate font-mono text-xs\">{name}</span>\n          <Icon\n            icon={status.icon}\n            title={STATUS_LABEL[part.state]}\n            className={cn(\"size-3 shrink-0\", status.className)}\n          />\n        </span>\n        <Icon\n          icon={UiChevronDown}\n          className={cn(\"size-3 shrink-0 transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div className=\"space-y-1 pl-4 pt-0.5\">\n          <ToolInput input={part.input} />\n          <ToolOutput part={part} />\n        </div>\n      )}\n\n      {needsApproval && <ApprovalControls part={part} onApprove={onApprove} />}\n    </div>\n  );\n}\n\n/** Approve/Deny controls shown while a tool call awaits human approval. The\n *  approval id comes from the part's `approval` envelope (AI SDK v6). */\nfunction ApprovalControls({\n  part,\n  onApprove,\n}: {\n  part: AnyToolPart;\n  onApprove: ToolCallProps[\"onApprove\"];\n}) {\n  const approval = \"approval\" in part ? part.approval : undefined;\n  if (!approval || !onApprove) return null;\n  return (\n    <div className=\"mt-1.5 flex items-center gap-2 pl-4\">\n      <Button type=\"button\" size=\"sm\" onClick={() => onApprove(approval.id, true)}>\n        Approve\n      </Button>\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        variant=\"outline\"\n        onClick={() => onApprove(approval.id, false)}\n      >\n        Deny\n      </Button>\n    </div>\n  );\n}\n\nfunction ToolInput({ input }: { input: AnyToolPart[\"input\"] }) {\n  if (input === undefined || input === null) {\n    return null;\n  }\n  return (\n    <div className=\"overflow-hidden text-xs\">\n      <CodeBlock language=\"json\" source={JSON.stringify(input, null, 2)} />\n    </div>\n  );\n}\n\nfunction ToolOutput({ part }: { part: AnyToolPart }) {\n  const errorText = part.state === \"output-error\" ? part.errorText : undefined;\n  const output = part.state === \"output-available\" ? part.output : undefined;\n  if (output === undefined && errorText === undefined) {\n    return null;\n  }\n  return (\n    <div className={cn(\"overflow-x-auto text-xs\", errorText ? \"text-destructive\" : \"text-muted-foreground\")}>\n      {errorText !== undefined && <div>{errorText}</div>}\n      {output !== undefined && (\n        <CodeBlock language=\"json\" source={typeof output === \"string\" ? output : JSON.stringify(output, null, 2)} />\n      )}\n    </div>\n  );\n}\n"],"names":["UiClock","UiCheck","UiCircleOutline","UiCircleX","useState","toolPartName","cn","jsxs","jsx","Icon","UiWrench","UiChevronDown","Button","CodeBlock"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAM,eAA0C;AAAA,EAC9C,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;AAEA,MAAM,cAAmF;AAAA,EACvF,sBAAsB,EAAE,MAAMA,iBAAS,WAAW,iBAAA;AAAA,EAClD,sBAAsB,EAAE,MAAMC,iBAAS,WAAW,eAAA;AAAA,EAClD,mBAAmB,EAAE,MAAMC,iCAAiB,WAAW,wBAAA;AAAA,EACvD,mBAAmB,EAAE,MAAMF,iBAAS,WAAW,sCAAA;AAAA,EAC/C,oBAAoB,EAAE,MAAMC,iBAAS,WAAW,mBAAA;AAAA,EAChD,iBAAiB,EAAE,MAAME,qBAAW,WAAW,kBAAA;AAAA,EAC/C,gBAAgB,EAAE,MAAMA,UAAAA,WAAW,WAAW,mBAAA;AAChD;AAMO,SAAS,SAAS,EAAE,MAAM,cAAc,OAAO,WAAW,aAA4B;AAC3F,QAAM,gBAAgB,KAAK,UAAU;AACrC,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,eAAe,aAAa;AAC7D,QAAM,SAAS,YAAY,KAAK,KAAK;AACrC,QAAM,OAAOC,MAAAA,aAAa,IAAI;AAE9B,yCACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,yBAAyB,SAAS,GACnD,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,QAChC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAU,qCACd,UAAA;AAAA,YAAAC,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAMC,SAAAA,UAAU,WAAU,mBAAkB;AAAA,YAClDF,2BAAAA,IAAC,QAAA,EAAK,WAAU,8BAA8B,UAAA,MAAK;AAAA,YACnDA,2BAAAA;AAAAA,cAACC,KAAAA;AAAAA,cAAA;AAAA,gBACC,MAAM,OAAO;AAAA,gBACb,OAAO,aAAa,KAAK,KAAK;AAAA,gBAC9B,WAAWH,MAAAA,GAAG,mBAAmB,OAAO,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACnD,GACF;AAAA,UACAE,2BAAAA;AAAAA,YAACC,KAAAA;AAAAA,YAAA;AAAA,cACC,MAAME,cAAAA;AAAAA,cACN,WAAWL,MAAAA,GAAG,wCAAwC,QAAQ,YAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5E;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,QACCC,2BAAAA,KAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,MAAAC,2BAAAA,IAAC,WAAA,EAAU,OAAO,KAAK,MAAA,CAAO;AAAA,MAC9BA,+BAAC,cAAW,KAAA,CAAY;AAAA,IAAA,GAC1B;AAAA,IAGD,iBAAiBA,2BAAAA,IAAC,kBAAA,EAAiB,MAAY,UAAA,CAAsB;AAAA,EAAA,GACxE;AAEJ;AAIA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AACF,GAGG;AACD,QAAM,WAAW,cAAc,OAAO,KAAK,WAAW;AACtD,MAAI,CAAC,YAAY,CAAC,UAAW,QAAO;AACpC,SACED,2BAAAA,KAAC,OAAA,EAAI,WAAU,uCACb,UAAA;AAAA,IAAAC,2BAAAA,IAACI,OAAAA,QAAA,EAAO,MAAK,UAAS,MAAK,MAAK,SAAS,MAAM,UAAU,SAAS,IAAI,IAAI,GAAG,UAAA,WAE7E;AAAA,IACAJ,2BAAAA;AAAAA,MAACI,OAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS,MAAM,UAAU,SAAS,IAAI,KAAK;AAAA,QAC5C,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;AAEA,SAAS,UAAU,EAAE,SAA0C;AAC7D,MAAI,UAAU,UAAa,UAAU,MAAM;AACzC,WAAO;AAAA,EACT;AACA,SACEJ,2BAAAA,IAAC,OAAA,EAAI,WAAU,2BACb,yCAACK,UAAAA,WAAA,EAAU,UAAS,QAAO,QAAQ,KAAK,UAAU,OAAO,MAAM,CAAC,GAAG,GACrE;AAEJ;AAEA,SAAS,WAAW,EAAE,QAA+B;AACnD,QAAM,YAAY,KAAK,UAAU,iBAAiB,KAAK,YAAY;AACnE,QAAM,SAAS,KAAK,UAAU,qBAAqB,KAAK,SAAS;AACjE,MAAI,WAAW,UAAa,cAAc,QAAW;AACnD,WAAO;AAAA,EACT;AACA,SACEN,gCAAC,SAAI,WAAWD,MAAAA,GAAG,2BAA2B,YAAY,qBAAqB,uBAAuB,GACnG,UAAA;AAAA,IAAA,cAAc,UAAaE,2BAAAA,IAAC,OAAA,EAAK,UAAA,WAAU;AAAA,IAC3C,WAAW,UACVA,+BAACK,UAAAA,WAAA,EAAU,UAAS,QAAO,QAAQ,OAAO,WAAW,WAAW,SAAS,KAAK,UAAU,QAAQ,MAAM,CAAC,EAAA,CAAG;AAAA,EAAA,GAE9G;AAEJ;;"}
+{"version":3,"file":"ToolCall.cjs","sources":["../../../src/data/chat/ToolCall.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../components/button\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport {\n  UiCheck,\n  UiChevronDown,\n  UiCircleOutline,\n  UiCircleX,\n  UiClock,\n  UiWrench,\n} from \"../../icons\";\nimport type { AnyToolPart, ToolResultRenderer } from \"./types\";\nimport { toolPartName } from \"./types\";\n\nexport type ToolCallProps = {\n  /** The tool part from an assistant message (typed or dynamic). */\n  part: AnyToolPart;\n  /** Whether the call body starts expanded. Defaults to false. */\n  defaultOpen?: boolean;\n  /** Respond to an approval request (only used when state is\n   *  `approval-requested`). Receives the approval id, the decision, and an\n   *  optional reason. */\n  onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;\n  renderToolResult?: ToolResultRenderer;\n  className?: string;\n};\n\ntype ToolState = AnyToolPart[\"state\"];\n\nconst STATUS_LABEL: Record<ToolState, string> = {\n  \"approval-requested\": \"Awaiting approval\",\n  \"approval-responded\": \"Responded\",\n  \"input-streaming\": \"Pending\",\n  \"input-available\": \"Running\",\n  \"output-available\": \"Completed\",\n  \"output-denied\": \"Denied\",\n  \"output-error\": \"Error\",\n};\n\nconst STATUS_ICON: Record<ToolState, { icon: StaticIconComponent; className: string }> = {\n  \"approval-requested\": { icon: UiClock, className: \"text-amber-600\" },\n  \"approval-responded\": { icon: UiCheck, className: \"text-sky-600\" },\n  \"input-streaming\": { icon: UiCircleOutline, className: \"text-muted-foreground\" },\n  \"input-available\": { icon: UiClock, className: \"text-muted-foreground animate-pulse\" },\n  \"output-available\": { icon: UiCheck, className: \"text-emerald-600\" },\n  \"output-denied\": { icon: UiCircleX, className: \"text-orange-600\" },\n  \"output-error\": { icon: UiCircleX, className: \"text-destructive\" },\n};\n\n/** Generic display of a single AI tool call: a collapsible header showing the\n *  tool name + status, expanding to its JSON input and (once available) output\n *  or error. Renders both clicky `dynamic-tool` parts and typed `tool-<name>`\n *  parts, keyed off `part.state`. */\nexport function ToolCall({ part, defaultOpen = false, onApprove, renderToolResult, className }: ToolCallProps) {\n  const needsApproval = part.state === \"approval-requested\";\n  const [open, setOpen] = useState(defaultOpen || needsApproval);\n  const status = STATUS_ICON[part.state];\n  const name = toolPartName(part);\n\n  return (\n    <div className={cn(\"not-prose mb-1 w-full\", className)}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        onClick={() => setOpen((v) => !v)}\n        className=\"flex w-full items-center justify-between gap-2 py-0.5 text-muted-foreground hover:text-foreground\"\n      >\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <Icon icon={UiWrench} className=\"size-3 shrink-0\" />\n          <span className=\"truncate font-mono text-xs\">{name}</span>\n          <Icon\n            icon={status.icon}\n            title={STATUS_LABEL[part.state]}\n            className={cn(\"size-3 shrink-0\", status.className)}\n          />\n        </span>\n        <Icon\n          icon={UiChevronDown}\n          className={cn(\"size-3 shrink-0 transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div className=\"space-y-1 pl-4 pt-0.5\">\n          <ToolInput input={part.input} />\n          <ToolOutput part={part} {...(renderToolResult ? { renderToolResult } : {})} />\n        </div>\n      )}\n\n      {needsApproval && <ApprovalControls part={part} onApprove={onApprove} />}\n    </div>\n  );\n}\n\n/** Approve/Deny controls shown while a tool call awaits human approval. The\n *  approval id comes from the part's `approval` envelope (AI SDK v6). */\nfunction ApprovalControls({\n  part,\n  onApprove,\n}: {\n  part: AnyToolPart;\n  onApprove: ToolCallProps[\"onApprove\"];\n}) {\n  const approval = \"approval\" in part ? part.approval : undefined;\n  if (!approval || !onApprove) return null;\n  return (\n    <div className=\"mt-1.5 flex items-center gap-2 pl-4\">\n      <Button type=\"button\" size=\"sm\" onClick={() => onApprove(approval.id, true)}>\n        Approve\n      </Button>\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        variant=\"outline\"\n        onClick={() => onApprove(approval.id, false)}\n      >\n        Deny\n      </Button>\n    </div>\n  );\n}\n\nfunction ToolInput({ input }: { input: AnyToolPart[\"input\"] }) {\n  if (input === undefined || input === null) {\n    return null;\n  }\n  return (\n    <div className=\"overflow-hidden text-xs\">\n      <CodeBlock language=\"json\" source={JSON.stringify(input, null, 2)} />\n    </div>\n  );\n}\n\nfunction ToolOutput({\n  part,\n  renderToolResult,\n}: {\n  part: AnyToolPart;\n  renderToolResult?: ToolResultRenderer | undefined;\n}) {\n  const errorText = part.state === \"output-error\" ? part.errorText : undefined;\n  const output = part.state === \"output-available\" ? part.output : undefined;\n  if (output === undefined && errorText === undefined) {\n    return null;\n  }\n  const name = toolPartName(part);\n  const custom = output !== undefined ? renderToolResult?.({ part, toolName: name, output }) : null;\n  return (\n    <div className={cn(\"overflow-x-auto text-xs\", errorText ? \"text-destructive\" : \"text-muted-foreground\")}>\n      {errorText !== undefined && <div>{errorText}</div>}\n      {custom ?? (output !== undefined && (\n        <CodeBlock language=\"json\" source={typeof output === \"string\" ? output : JSON.stringify(output, null, 2)} />\n      ))}\n    </div>\n  );\n}\n"],"names":["UiClock","UiCheck","UiCircleOutline","UiCircleX","useState","toolPartName","cn","jsxs","jsx","Icon","UiWrench","UiChevronDown","Button","CodeBlock"],"mappings":"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"}

package/dist/data/chat/ToolCall.d.ts

@@ -1,4 +1,4 @@
-import { AnyToolPart } from './types';
+import { AnyToolPart, ToolResultRenderer } from './types';
 export type ToolCallProps = {
     /** The tool part from an assistant message (typed or dynamic). */
     part: AnyToolPart;
@@ -8,11 +8,12 @@ export type ToolCallProps = {
      *  `approval-requested`). Receives the approval id, the decision, and an
      *  optional reason. */
     onApprove?: ((approvalId: string, approved: boolean, reason?: string) => void) | undefined;
+    renderToolResult?: ToolResultRenderer;
     className?: string;
 };
 /** Generic display of a single AI tool call: a collapsible header showing the
  *  tool name + status, expanding to its JSON input and (once available) output
  *  or error. Renders both clicky `dynamic-tool` parts and typed `tool-<name>`
  *  parts, keyed off `part.state`. */
-export declare function ToolCall({ part, defaultOpen, onApprove, className }: ToolCallProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToolCall({ part, defaultOpen, onApprove, renderToolResult, className }: ToolCallProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ToolCall.d.ts.map