@flanksource/clicky-ui 0.2.16 → 0.2.17

package/dist/data/chat/Chat.js

@@ -1,14 +1,25 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import { useChat } from "@ai-sdk/react";
-import { DefaultChatTransport } from "ai";
+import { DefaultChatTransport, lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";
 import { cn } from "../../lib/utils.js";
 import { Conversation } from "./Conversation.js";
 import { PromptInput } from "./PromptInput.js";
+import { Suggestions } from "./Suggestion.js";
+import { ModelSelector, EffortSelector } from "./ModelSelector.js";
+const DEFAULT_EFFORTS = ["low", "medium", "high"];
 function Chat({
   api = "/api/chat",
-  model,
-  reasoningEffort,
+  models: modelsProp,
+  modelsApi = "/api/chat/models",
+  defaultModel,
+  reasoningEfforts = DEFAULT_EFFORTS,
+  defaultReasoningEffort = "",
+  onModelChange,
+  suggestions,
+  enableAttachments = false,
+  toolApproval,
+  threadId,
   body,
   transport,
   initialMessages,
@@ -16,28 +27,74 @@ function Chat({
   emptyState,
   className
 }) {
-  const resolvedTransport = useMemo(() => {
-    if (transport) {
-      return transport;
-    }
-    return new DefaultChatTransport({
-      api,
-      body: { ...body, ...model ? { model } : {}, ...reasoningEffort ? { reasoningEffort } : {} }
-    });
-  }, [transport, api, body, model, reasoningEffort]);
-  const { messages, sendMessage, status, stop } = useChat({
+  const [models, setModels] = useState(modelsProp ?? []);
+  const [model, setModel] = useState(defaultModel);
+  const [effort, setEffort] = useState(defaultReasoningEffort);
+  useEffect(() => {
+    if (modelsProp || !modelsApi) return;
+    let cancelled = false;
+    fetch(modelsApi).then((r) => r.ok ? r.json() : Promise.reject(new Error(`models ${r.status}`))).then((data) => {
+      if (cancelled) return;
+      setModels(data);
+      setModel((m) => {
+        var _a;
+        return m ?? ((_a = data.find((d) => d.configured !== false)) == null ? void 0 : _a.id);
+      });
+    }).catch((err) => console.warn("clicky-ui: failed to load chat models", err));
+    return () => {
+      cancelled = true;
+    };
+  }, [modelsProp, modelsApi]);
+  const selectedModel = models.find((m) => m.id === model);
+  const showEffort = !selectedModel || selectedModel.reasoning;
+  const bodyRef = useRef({});
+  bodyRef.current = {
+    ...body,
+    ...model ? { model } : {},
+    ...effort ? { reasoningEffort: effort } : {},
+    ...toolApproval ? { toolApproval } : {},
+    ...threadId ? { threadId } : {}
+  };
+  const resolvedTransport = useMemo(
+    () => transport ?? new DefaultChatTransport({ api, body: () => bodyRef.current }),
+    [transport, api]
+  );
+  const { messages, sendMessage, regenerate, addToolApprovalResponse, status, stop } = useChat({
     transport: resolvedTransport,
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
     ...initialMessages ? { messages: initialMessages } : {}
   });
+  const onModelSelect = (id) => {
+    setModel(id);
+    onModelChange == null ? void 0 : onModelChange(id);
+  };
+  const toolbar = models.length > 0 || showEffort ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(ModelSelector, { models, value: model, onChange: onModelSelect }),
+    showEffort && /* @__PURE__ */ jsx(EffortSelector, { efforts: reasoningEfforts, value: effort, onChange: setEffort })
+  ] }) : void 0;
+  const empty = messages.length === 0 && (emptyState || (suggestions == null ? void 0 : suggestions.length)) ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    emptyState,
+    suggestions && suggestions.length > 0 && /* @__PURE__ */ jsx(Suggestions, { suggestions, onSelect: (text) => void sendMessage({ text }) })
+  ] }) : void 0;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col", className), children: [
-    /* @__PURE__ */ jsx(Conversation, { messages, emptyState }),
+    /* @__PURE__ */ jsx(
+      Conversation,
+      {
+        messages,
+        emptyState: empty,
+        onRegenerate: (messageId) => void regenerate({ messageId }),
+        onApprove: (id, approved, reason) => void addToolApprovalResponse(reason ? { id, approved, reason } : { id, approved })
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "p-4 pt-0", children: /* @__PURE__ */ jsx(
       PromptInput,
       {
         status,
         onStop: () => void stop(),
         placeholder,
-        onSubmit: (text) => void sendMessage({ text })
+        enableAttachments,
+        toolbar,
+        onSubmit: (text, files) => void sendMessage({ text, files })
       }
     ) })
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.js","sources":["../../../src/data/chat/Chat.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useChat } from \"@ai-sdk/react\";\nimport { DefaultChatTransport, type ChatTransport, type UIMessage } from \"ai\";\nimport { cn } from \"../../lib/utils\";\nimport { Conversation } from \"./Conversation\";\nimport { PromptInput } from \"./PromptInput\";\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  /** Selected `provider/model` id, forwarded in the request body. */\n  model?: string;\n  /** Reasoning effort (`low` | `medium` | `high`), forwarded in the request body. */\n  reasoningEffort?: string;\n  /** Extra fields merged into every request body (e.g. tool scoping). */\n  body?: Record<string, unknown>;\n  /** Pre-built transport. Supply a mock in stories/tests; otherwise a\n   *  DefaultChatTransport is constructed from `api`/`body`. */\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\n/** Self-contained AI chat: a streaming conversation log over a prompt input,\n *  driven by the AI SDK `useChat` hook against a v6-compatible `/api/chat`. The\n *  backend owns model selection and tool execution; `model`, `reasoningEffort`\n *  and `body` are forwarded in the request body for it to honor. */\nexport function Chat({\n  api = \"/api/chat\",\n  model,\n  reasoningEffort,\n  body,\n  transport,\n  initialMessages,\n  placeholder,\n  emptyState,\n  className,\n}: ChatProps) {\n  const resolvedTransport = useMemo<ChatTransport<UIMessage>>(() => {\n    if (transport) {\n      return transport;\n    }\n    return new DefaultChatTransport({\n      api,\n      body: { ...body, ...(model ? { model } : {}), ...(reasoningEffort ? { reasoningEffort } : {}) },\n    });\n  }, [transport, api, body, model, reasoningEffort]);\n\n  const { messages, sendMessage, status, stop } = useChat<UIMessage>({\n    transport: resolvedTransport,\n    ...(initialMessages ? { messages: initialMessages } : {}),\n  });\n\n  return (\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <Conversation messages={messages} emptyState={emptyState} />\n      <div className=\"p-4 pt-0\">\n        <PromptInput\n          status={status}\n          onStop={() => void stop()}\n          placeholder={placeholder}\n          onSubmit={(text) => void sendMessage({ text })}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA+BO,SAAS,KAAK;AAAA,EACnB,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,oBAAoB,QAAkC,MAAM;AAChE,QAAI,WAAW;AACb,aAAO;AAAA,IACT;AACA,WAAO,IAAI,qBAAqB;AAAA,MAC9B;AAAA,MACA,MAAM,EAAE,GAAG,MAAM,GAAI,QAAQ,EAAE,UAAU,CAAA,GAAK,GAAI,kBAAkB,EAAE,gBAAA,IAAoB,CAAA,EAAC;AAAA,IAAG,CAC/F;AAAA,EACH,GAAG,CAAC,WAAW,KAAK,MAAM,OAAO,eAAe,CAAC;AAEjD,QAAM,EAAE,UAAU,aAAa,QAAQ,KAAA,IAAS,QAAmB;AAAA,IACjE,WAAW;AAAA,IACX,GAAI,kBAAkB,EAAE,UAAU,oBAAoB,CAAA;AAAA,EAAC,CACxD;AAED,8BACG,OAAA,EAAI,WAAW,GAAG,wBAAwB,SAAS,GAClD,UAAA;AAAA,IAAA,oBAAC,cAAA,EAAa,UAAoB,WAAA,CAAwB;AAAA,IAC1D,oBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAQ,MAAM,KAAK,KAAA;AAAA,QACnB;AAAA,QACA,UAAU,CAAC,SAAS,KAAK,YAAY,EAAE,MAAM;AAAA,MAAA;AAAA,IAAA,EAC/C,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"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 type { ChatModel, Suggestion } from \"./types\";\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  /** 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  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\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, stop } =\n    useChat<UIMessage>({\n      transport: resolvedTransport,\n      sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,\n      ...(initialMessages ? { messages: initialMessages } : {}),\n    });\n\n  const onModelSelect = (id: string) => {\n    setModel(id);\n    onModelChange?.(id);\n  };\n\n  const toolbar = models.length > 0 || showEffort ? (\n    <div className=\"flex items-center gap-2\">\n      <ModelSelector models={models} value={model} onChange={onModelSelect} />\n      {showEffort && (\n        <EffortSelector efforts={reasoningEfforts} value={effort} onChange={setEffort} />\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        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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"}

package/dist/data/chat/Conversation.cjs

@@ -3,32 +3,50 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../../lib/utils.cjs");
+const Icon = require("../Icon.cjs");
 const Message = require("./Message.cjs");
-function Conversation({ messages, emptyState, className }) {
+const UiArrowDown = require("../../icons/components/UiArrowDown.cjs");
+function Conversation({ messages, emptyState, className, ...actions }) {
   const scrollRef = react.useRef(null);
-  const pinnedRef = react.useRef(true);
+  const [pinned, setPinned] = react.useState(true);
   const onScroll = () => {
     const el = scrollRef.current;
     if (!el) return;
     const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
-    pinnedRef.current = distance < 32;
+    setPinned(distance < 32);
   };
   react.useEffect(() => {
     const el = scrollRef.current;
-    if (el && pinnedRef.current) {
+    if (el && pinned) {
       el.scrollTop = el.scrollHeight;
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: scrollRef,
-      onScroll,
-      role: "log",
-      className: utils.cn("relative flex-1 overflow-y-auto", className),
-      children: messages.length === 0 && emptyState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full flex-col items-center justify-center gap-3 p-8 text-center", children: emptyState }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8 p-4", children: messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(Message.Message, { message }, message.id)) })
-    }
-  );
+  const scrollToBottom = () => {
+    const el = scrollRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: scrollRef,
+        onScroll,
+        role: "log",
+        className: utils.cn("flex-1 overflow-y-auto", className),
+        children: messages.length === 0 && emptyState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full flex-col items-center justify-center gap-3 p-8 text-center", children: emptyState }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8 p-4", children: messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(Message.Message, { message, ...actions }, message.id)) })
+      }
+    ),
+    !pinned && messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Scroll to latest",
+        onClick: scrollToBottom,
+        className: "absolute bottom-3 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-md hover:text-foreground",
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowDown.UiArrowDown, className: "size-4" })
+      }
+    )
+  ] });
 }
 exports.Conversation = Conversation;
 //# sourceMappingURL=Conversation.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Conversation.cjs","sources":["../../../src/data/chat/Conversation.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Message } from \"./Message\";\nimport type { UIMessage } from \"./types\";\n\nexport type ConversationProps = {\n  messages: UIMessage[];\n  /** Shown when there are no messages yet. */\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\n/** A scrollable message log that sticks to the bottom as new content streams\n *  in, unless the user has scrolled up. */\nexport function Conversation({ messages, emptyState, className }: ConversationProps) {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const pinnedRef = useRef(true);\n\n  const onScroll = () => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;\n    pinnedRef.current = distance < 32;\n  };\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (el && pinnedRef.current) {\n      el.scrollTop = el.scrollHeight;\n    }\n  });\n\n  return (\n    <div\n      ref={scrollRef}\n      onScroll={onScroll}\n      role=\"log\"\n      className={cn(\"relative flex-1 overflow-y-auto\", className)}\n    >\n      {messages.length === 0 && emptyState ? (\n        <div className=\"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\">\n          {emptyState}\n        </div>\n      ) : (\n        <div className=\"flex flex-col gap-8 p-4\">\n          {messages.map((message) => (\n            <Message key={message.id} message={message} />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["useRef","useEffect","jsx","cn","Message"],"mappings":";;;;;;AAcO,SAAS,aAAa,EAAE,UAAU,YAAY,aAAgC;AACnF,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAC7C,QAAM,YAAYA,MAAAA,OAAO,IAAI;AAE7B,QAAM,WAAW,MAAM;AACrB,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,UAAM,WAAW,GAAG,eAAe,GAAG,YAAY,GAAG;AACrD,cAAU,UAAU,WAAW;AAAA,EACjC;AAEAC,QAAAA,UAAU,MAAM;AACd,UAAM,KAAK,UAAU;AACrB,QAAI,MAAM,UAAU,SAAS;AAC3B,SAAG,YAAY,GAAG;AAAA,IACpB;AAAA,EACF,CAAC;AAED,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACL,WAAWC,MAAAA,GAAG,mCAAmC,SAAS;AAAA,MAEzD,UAAA,SAAS,WAAW,KAAK,aACxBD,2BAAAA,IAAC,SAAI,WAAU,6EACZ,UAAA,WAAA,CACH,IAEAA,2BAAAA,IAAC,OAAA,EAAI,WAAU,2BACZ,UAAA,SAAS,IAAI,CAAC,YACbA,+BAACE,QAAAA,WAAyB,QAAA,GAAZ,QAAQ,EAAsB,CAC7C,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR;;"}
+{"version":3,"file":"Conversation.cjs","sources":["../../../src/data/chat/Conversation.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiArrowDown } from \"../../icons\";\nimport { Message, type MessageActionHandlers } from \"./Message\";\nimport type { UIMessage } from \"./types\";\n\nexport type ConversationProps = MessageActionHandlers & {\n  messages: UIMessage[];\n  /** Shown when there are no messages yet. */\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\n/** A scrollable message log that sticks to the bottom as new content streams\n *  in, unless the user has scrolled up — in which case a jump-to-bottom button\n *  appears. */\nexport function Conversation({ messages, emptyState, className, ...actions }: ConversationProps) {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [pinned, setPinned] = useState(true);\n\n  const onScroll = () => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;\n    setPinned(distance < 32);\n  };\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (el && pinned) {\n      el.scrollTop = el.scrollHeight;\n    }\n  });\n\n  const scrollToBottom = () => {\n    const el = scrollRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: \"smooth\" });\n  };\n\n  return (\n    <div className=\"relative flex min-h-0 flex-1 flex-col\">\n      <div\n        ref={scrollRef}\n        onScroll={onScroll}\n        role=\"log\"\n        className={cn(\"flex-1 overflow-y-auto\", className)}\n      >\n        {messages.length === 0 && emptyState ? (\n          <div className=\"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\">\n            {emptyState}\n          </div>\n        ) : (\n          <div className=\"flex flex-col gap-8 p-4\">\n            {messages.map((message) => (\n              <Message key={message.id} message={message} {...actions} />\n            ))}\n          </div>\n        )}\n      </div>\n\n      {!pinned && messages.length > 0 && (\n        <button\n          type=\"button\"\n          aria-label=\"Scroll to latest\"\n          onClick={scrollToBottom}\n          className=\"absolute bottom-3 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-md hover:text-foreground\"\n        >\n          <Icon icon={UiArrowDown} className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["useRef","useState","useEffect","jsxs","jsx","cn","Message","Icon","UiArrowDown"],"mappings":";;;;;;;;AAiBO,SAAS,aAAa,EAAE,UAAU,YAAY,WAAW,GAAG,WAA8B;AAC/F,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAC7C,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAAS,IAAI;AAEzC,QAAM,WAAW,MAAM;AACrB,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,UAAM,WAAW,GAAG,eAAe,GAAG,YAAY,GAAG;AACrD,cAAU,WAAW,EAAE;AAAA,EACzB;AAEAC,QAAAA,UAAU,MAAM;AACd,UAAM,KAAK,UAAU;AACrB,QAAI,MAAM,QAAQ;AAChB,SAAG,YAAY,GAAG;AAAA,IACpB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,MAAM;AAC3B,UAAM,KAAK,UAAU;AACrB,QAAI,OAAO,SAAS,EAAE,KAAK,GAAG,cAAc,UAAU,UAAU;AAAA,EAClE;AAEA,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,MAAK;AAAA,QACL,WAAWC,MAAAA,GAAG,0BAA0B,SAAS;AAAA,QAEhD,UAAA,SAAS,WAAW,KAAK,aACxBD,2BAAAA,IAAC,OAAA,EAAI,WAAU,6EACZ,UAAA,WAAA,CACH,IAEAA,2BAAAA,IAAC,OAAA,EAAI,WAAU,2BACZ,UAAA,SAAS,IAAI,CAAC,YACbA,2BAAAA,IAACE,QAAAA,SAAA,EAAyB,SAAmB,GAAG,QAAA,GAAlC,QAAQ,EAAmC,CAC1D,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,CAAC,UAAU,SAAS,SAAS,KAC5BF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAU;AAAA,QAEV,UAAAA,2BAAAA,IAACG,WAAA,EAAK,MAAMC,YAAAA,aAAa,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9C,GAEJ;AAEJ;;"}

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

@@ -1,11 +1,13 @@
+import { MessageActionHandlers } from './Message';
 import { UIMessage } from './types';
-export type ConversationProps = {
+export type ConversationProps = MessageActionHandlers & {
     messages: UIMessage[];
     /** Shown when there are no messages yet. */
     emptyState?: React.ReactNode;
     className?: string;
 };
 /** A scrollable message log that sticks to the bottom as new content streams
- *  in, unless the user has scrolled up. */
-export declare function Conversation({ messages, emptyState, className }: ConversationProps): import("react/jsx-runtime").JSX.Element;
+ *  in, unless the user has scrolled up — in which case a jump-to-bottom button
+ *  appears. */
+export declare function Conversation({ messages, emptyState, className, ...actions }: ConversationProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Conversation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Conversation.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;2CAC2C;AAC3C,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAsClF"}
+{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Conversation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,KAAK,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG;IACtD,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;eAEe;AACf,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,EAAE,iBAAiB,2CAwD9F"}

package/dist/data/chat/Conversation.js

@@ -1,32 +1,50 @@
-import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
 import { cn } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
 import { Message } from "./Message.js";
-function Conversation({ messages, emptyState, className }) {
+import { UiArrowDown } from "../../icons/components/UiArrowDown.js";
+function Conversation({ messages, emptyState, className, ...actions }) {
   const scrollRef = useRef(null);
-  const pinnedRef = useRef(true);
+  const [pinned, setPinned] = useState(true);
   const onScroll = () => {
     const el = scrollRef.current;
     if (!el) return;
     const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
-    pinnedRef.current = distance < 32;
+    setPinned(distance < 32);
   };
   useEffect(() => {
     const el = scrollRef.current;
-    if (el && pinnedRef.current) {
+    if (el && pinned) {
       el.scrollTop = el.scrollHeight;
     }
   });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: scrollRef,
-      onScroll,
-      role: "log",
-      className: cn("relative flex-1 overflow-y-auto", className),
-      children: messages.length === 0 && emptyState ? /* @__PURE__ */ jsx("div", { className: "flex size-full flex-col items-center justify-center gap-3 p-8 text-center", children: emptyState }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8 p-4", children: messages.map((message) => /* @__PURE__ */ jsx(Message, { message }, message.id)) })
-    }
-  );
+  const scrollToBottom = () => {
+    const el = scrollRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        onScroll,
+        role: "log",
+        className: cn("flex-1 overflow-y-auto", className),
+        children: messages.length === 0 && emptyState ? /* @__PURE__ */ jsx("div", { className: "flex size-full flex-col items-center justify-center gap-3 p-8 text-center", children: emptyState }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8 p-4", children: messages.map((message) => /* @__PURE__ */ jsx(Message, { message, ...actions }, message.id)) })
+      }
+    ),
+    !pinned && messages.length > 0 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Scroll to latest",
+        onClick: scrollToBottom,
+        className: "absolute bottom-3 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-md hover:text-foreground",
+        children: /* @__PURE__ */ jsx(Icon, { icon: UiArrowDown, className: "size-4" })
+      }
+    )
+  ] });
 }
 export {
   Conversation

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

@@ -1 +1 @@
-{"version":3,"file":"Conversation.js","sources":["../../../src/data/chat/Conversation.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Message } from \"./Message\";\nimport type { UIMessage } from \"./types\";\n\nexport type ConversationProps = {\n  messages: UIMessage[];\n  /** Shown when there are no messages yet. */\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\n/** A scrollable message log that sticks to the bottom as new content streams\n *  in, unless the user has scrolled up. */\nexport function Conversation({ messages, emptyState, className }: ConversationProps) {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const pinnedRef = useRef(true);\n\n  const onScroll = () => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;\n    pinnedRef.current = distance < 32;\n  };\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (el && pinnedRef.current) {\n      el.scrollTop = el.scrollHeight;\n    }\n  });\n\n  return (\n    <div\n      ref={scrollRef}\n      onScroll={onScroll}\n      role=\"log\"\n      className={cn(\"relative flex-1 overflow-y-auto\", className)}\n    >\n      {messages.length === 0 && emptyState ? (\n        <div className=\"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\">\n          {emptyState}\n        </div>\n      ) : (\n        <div className=\"flex flex-col gap-8 p-4\">\n          {messages.map((message) => (\n            <Message key={message.id} message={message} />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAcO,SAAS,aAAa,EAAE,UAAU,YAAY,aAAgC;AACnF,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,YAAY,OAAO,IAAI;AAE7B,QAAM,WAAW,MAAM;AACrB,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,UAAM,WAAW,GAAG,eAAe,GAAG,YAAY,GAAG;AACrD,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,YAAU,MAAM;AACd,UAAM,KAAK,UAAU;AACrB,QAAI,MAAM,UAAU,SAAS;AAC3B,SAAG,YAAY,GAAG;AAAA,IACpB;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACL,WAAW,GAAG,mCAAmC,SAAS;AAAA,MAEzD,UAAA,SAAS,WAAW,KAAK,aACxB,oBAAC,SAAI,WAAU,6EACZ,UAAA,WAAA,CACH,IAEA,oBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA,SAAS,IAAI,CAAC,YACb,oBAAC,WAAyB,QAAA,GAAZ,QAAQ,EAAsB,CAC7C,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Conversation.js","sources":["../../../src/data/chat/Conversation.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiArrowDown } from \"../../icons\";\nimport { Message, type MessageActionHandlers } from \"./Message\";\nimport type { UIMessage } from \"./types\";\n\nexport type ConversationProps = MessageActionHandlers & {\n  messages: UIMessage[];\n  /** Shown when there are no messages yet. */\n  emptyState?: React.ReactNode;\n  className?: string;\n};\n\n/** A scrollable message log that sticks to the bottom as new content streams\n *  in, unless the user has scrolled up — in which case a jump-to-bottom button\n *  appears. */\nexport function Conversation({ messages, emptyState, className, ...actions }: ConversationProps) {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [pinned, setPinned] = useState(true);\n\n  const onScroll = () => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;\n    setPinned(distance < 32);\n  };\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (el && pinned) {\n      el.scrollTop = el.scrollHeight;\n    }\n  });\n\n  const scrollToBottom = () => {\n    const el = scrollRef.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: \"smooth\" });\n  };\n\n  return (\n    <div className=\"relative flex min-h-0 flex-1 flex-col\">\n      <div\n        ref={scrollRef}\n        onScroll={onScroll}\n        role=\"log\"\n        className={cn(\"flex-1 overflow-y-auto\", className)}\n      >\n        {messages.length === 0 && emptyState ? (\n          <div className=\"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\">\n            {emptyState}\n          </div>\n        ) : (\n          <div className=\"flex flex-col gap-8 p-4\">\n            {messages.map((message) => (\n              <Message key={message.id} message={message} {...actions} />\n            ))}\n          </div>\n        )}\n      </div>\n\n      {!pinned && messages.length > 0 && (\n        <button\n          type=\"button\"\n          aria-label=\"Scroll to latest\"\n          onClick={scrollToBottom}\n          className=\"absolute bottom-3 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-muted-foreground shadow-md hover:text-foreground\"\n        >\n          <Icon icon={UiArrowDown} className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAiBO,SAAS,aAAa,EAAE,UAAU,YAAY,WAAW,GAAG,WAA8B;AAC/F,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AAEzC,QAAM,WAAW,MAAM;AACrB,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,UAAM,WAAW,GAAG,eAAe,GAAG,YAAY,GAAG;AACrD,cAAU,WAAW,EAAE;AAAA,EACzB;AAEA,YAAU,MAAM;AACd,UAAM,KAAK,UAAU;AACrB,QAAI,MAAM,QAAQ;AAChB,SAAG,YAAY,GAAG;AAAA,IACpB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,MAAM;AAC3B,UAAM,KAAK,UAAU;AACrB,QAAI,OAAO,SAAS,EAAE,KAAK,GAAG,cAAc,UAAU,UAAU;AAAA,EAClE;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,MAAK;AAAA,QACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,QAEhD,UAAA,SAAS,WAAW,KAAK,aACxB,oBAAC,OAAA,EAAI,WAAU,6EACZ,UAAA,WAAA,CACH,IAEA,oBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA,SAAS,IAAI,CAAC,YACb,oBAAC,SAAA,EAAyB,SAAmB,GAAG,QAAA,GAAlC,QAAQ,EAAmC,CAC1D,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,CAAC,UAAU,SAAS,SAAS,KAC5B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAU;AAAA,QAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,aAAa,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9C,GAEJ;AAEJ;"}

package/dist/data/chat/Message.cjs

@@ -2,12 +2,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const utils = require("../../lib/utils.cjs");
+const Icon = require("../Icon.cjs");
 const Markdown = require("../Markdown.cjs");
 const ToolCall = require("./ToolCall.cjs");
+const MessageActions = require("./MessageActions.cjs");
+const Reasoning = require("./Reasoning.cjs");
 const types = require("./types.cjs");
-function Message({ message, className }) {
+const UiFile = require("../../icons/components/UiFile.cjs");
+function Message({ message, className, onRegenerate, onApprove }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const text = message.parts.filter((p) => p.type === "text").map((p) => p.text).join("");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: utils.cn(
@@ -15,30 +20,84 @@ function Message({ message, className }) {
         isUser ? "ml-auto items-end" : "items-start",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: utils.cn(
-            "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
-            isUser && "rounded-lg bg-secondary px-4 py-3 text-secondary-foreground"
-          ),
-          children: message.parts.map((part, i) => /* @__PURE__ */ jsxRuntime.jsx(MessagePart, { part, isUser }, `${message.id}-${i}`))
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
+              isUser && "rounded-lg bg-secondary px-4 py-3 text-secondary-foreground"
+            ),
+            children: message.parts.map((part, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              MessagePart,
+              {
+                part,
+                isUser,
+                onApprove
+              },
+              `${message.id}-${i}`
+            ))
+          }
+        ),
+        !isUser && text && /* @__PURE__ */ jsxRuntime.jsx(
+          MessageActions.MessageActions,
+          {
+            text,
+            onRegenerate: onRegenerate ? () => onRegenerate(message.id) : void 0
+          }
+        )
+      ]
     }
   );
 }
-function MessagePart({ part, isUser }) {
+function MessagePart({
+  part,
+  isUser,
+  onApprove
+}) {
   if (part.type === "text") {
     if (isUser) {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-pre-wrap break-words", children: part.text });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(Markdown.Markdown, { text: part.text });
   }
+  if (types.isReasoningPart(part)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Reasoning.Reasoning, { text: part.text });
+  }
+  if (types.isFilePart(part)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FilePart, { part });
+  }
   if (types.isDynamicToolPart(part) || types.isTypedToolPart(part)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ToolCall.ToolCall, { part });
+    return /* @__PURE__ */ jsxRuntime.jsx(ToolCall.ToolCall, { part, onApprove });
   }
   return null;
 }
+function FilePart({ part }) {
+  var _a;
+  const isImage = (_a = part.mediaType) == null ? void 0 : _a.startsWith("image/");
+  if (isImage && part.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: part.url,
+        alt: part.filename ?? "attachment",
+        className: "max-h-48 max-w-full rounded-md border border-border"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      href: part.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:text-foreground",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFile.UiFile, className: "size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: part.filename ?? part.mediaType ?? "file" })
+      ]
+    }
+  );
+}
 exports.Message = Message;
 //# sourceMappingURL=Message.cjs.map

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 { Markdown } from \"../Markdown\";\nimport { ToolCall } from \"./ToolCall\";\nimport type { UIMessage } from \"./types\";\nimport { isDynamicToolPart, isTypedToolPart, type AnyToolPart } from \"./types\";\n\nexport type MessageProps = {\n  message: UIMessage;\n  className?: string;\n};\n\n/** Renders one chat message. User messages are right-aligned bubbles; assistant\n *  messages render text parts as markdown and tool parts as collapsible tool\n *  calls, in document order. */\nexport function Message({ message, className }: MessageProps) {\n  const isUser = message.role === \"user\";\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 key={`${message.id}-${i}`} part={part} isUser={isUser} />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction MessagePart({ part, isUser }: { part: UIMessage[\"parts\"][number]; isUser: boolean }) {\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 (isDynamicToolPart(part) || isTypedToolPart(part)) {\n    return <ToolCall part={part as AnyToolPart} />;\n  }\n  return null;\n}\n"],"names":["jsx","cn","Markdown","isDynamicToolPart","isTypedToolPart","ToolCall"],"mappings":";;;;;;;AAcO,SAAS,QAAQ,EAAE,SAAS,aAA2B;AAC5D,QAAM,SAAS,QAAQ,SAAS;AAChC,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,SAAS,sBAAsB;AAAA,QAC/B;AAAA,MAAA;AAAA,MAGF,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,MAAAA;AAAAA,YACT;AAAA,YACA,UAAU;AAAA,UAAA;AAAA,UAGX,kBAAQ,MAAM,IAAI,CAAC,MAAM,MACxBD,2BAAAA,IAAC,aAAA,EAAuC,MAAY,OAAA,GAAlC,GAAG,QAAQ,EAAE,IAAI,CAAC,EAAgC,CACrE;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,SAAS,YAAY,EAAE,MAAM,UAAiE;AAC5F,MAAI,KAAK,SAAS,QAAQ;AACxB,QAAI,QAAQ;AACV,aAAOA,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,kBAAkB,IAAI,KAAKC,MAAAA,gBAAgB,IAAI,GAAG;AACpD,WAAOJ,+BAACK,SAAAA,YAAS,MAA2B;AAAA,EAC9C;AACA,SAAO;AACT;;"}
+{"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;;"}

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

@@ -1,10 +1,17 @@
 import { UIMessage } from './types';
-export type MessageProps = {
+/** 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;
+};
+export type MessageProps = MessageActionHandlers & {
     message: UIMessage;
     className?: string;
 };
 /** Renders one chat message. User messages are right-aligned bubbles; assistant
- *  messages render text parts as markdown and tool parts as collapsible tool
- *  calls, in document order. */
-export declare function Message({ message, className }: MessageProps): import("react/jsx-runtime").JSX.Element;
+ *  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;
 //# 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":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;gCAEgC;AAChC,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,YAAY,2CAsB3D"}
+{"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"}