@flanksource/clicky-ui 0.2.15 → 0.2.17

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.cjs","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":["useMemo","DefaultChatTransport","useChat","cn","jsx","Conversation","PromptInput"],"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,oBAAoBA,MAAAA,QAAkC,MAAM;AAChE,QAAI,WAAW;AACb,aAAO;AAAA,IACT;AACA,WAAO,IAAIC,GAAAA,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,IAASC,QAAAA,QAAmB;AAAA,IACjE,WAAW;AAAA,IACX,GAAI,kBAAkB,EAAE,UAAU,oBAAoB,CAAA;AAAA,EAAC,CACxD;AAED,yCACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,wBAAwB,SAAS,GAClD,UAAA;AAAA,IAAAC,2BAAAA,IAACC,aAAAA,cAAA,EAAa,UAAoB,WAAA,CAAwB;AAAA,IAC1DD,2BAAAA,IAAC,OAAA,EAAI,WAAU,YACb,UAAAA,2BAAAA;AAAAA,MAACE,YAAAA;AAAAA,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.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 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":["useState","useEffect","useRef","useMemo","DefaultChatTransport","useChat","lastAssistantMessageIsCompleteWithApprovalResponses","jsxs","jsx","ModelSelector","EffortSelector","Suggestions","cn","Conversation","PromptInput"],"mappings":"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"}

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

@@ -1,16 +1,33 @@
 import { ChatTransport, UIMessage } from 'ai';
+import { ChatModel, Suggestion } 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". */
     api?: string;
-    /** Selected `provider/model` id, forwarded in the request body. */
-    model?: string;
-    /** Reasoning effort (`low` | `medium` | `high`), forwarded in the request body. */
-    reasoningEffort?: string;
-    /** Extra fields merged into every request body (e.g. tool scoping). */
+    /** Model menu. When omitted and `modelsApi` is set, it is fetched. */
+    models?: ChatModel[];
+    /** Endpoint returning the model menu (ModelInfo[]). Defaults to
+     *  "/api/chat/models". Set to null to disable fetching. */
+    modelsApi?: string | null;
+    /** Initially selected model id; otherwise the first configured model. */
+    defaultModel?: string;
+    /** Reasoning-effort options for capable models. */
+    reasoningEfforts?: string[];
+    /** Initially selected reasoning effort ("" = none). */
+    defaultReasoningEffort?: string;
+    /** Notified when the user changes the model. */
+    onModelChange?: (id: string) => void;
+    /** Suggested prompts shown on the empty state. */
+    suggestions?: Suggestion[];
+    /** Enables file/image attachments. */
+    enableAttachments?: boolean;
+    /** "manual" forwards a tool-approval policy hint to the backend. */
+    toolApproval?: "auto" | "manual";
+    /** Thread id to persist this conversation under (forwarded in the body). */
+    threadId?: string;
+    /** Extra fields merged into every request body. */
     body?: Record<string, unknown>;
-    /** Pre-built transport. Supply a mock in stories/tests; otherwise a
-     *  DefaultChatTransport is constructed from `api`/`body`. */
+    /** Pre-built transport (e.g. a mock for stories/tests). */
     transport?: ChatTransport<UIMessage>;
     /** Initial messages to seed the conversation. */
     initialMessages?: UIMessage[];
@@ -18,9 +35,10 @@ export type ChatProps = {
     emptyState?: React.ReactNode;
     className?: string;
 };
-/** Self-contained AI chat: a streaming conversation log over a prompt input,
- *  driven by the AI SDK `useChat` hook against a v6-compatible `/api/chat`. The
- *  backend owns model selection and tool execution; `model`, `reasoningEffort`
- *  and `body` are forwarded in the request body for it to honor. */
-export declare function Chat({ api, model, reasoningEffort, body, transport, initialMessages, placeholder, emptyState, className, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+/** Self-contained AI chat over a v6-compatible `/api/chat`: a streaming
+ *  conversation with model/effort selectors, suggestions, attachments,
+ *  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, suggestions, enableAttachments, toolApproval, threadId, body, transport, initialMessages, 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,EAAwB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,IAAI,CAAC;AAK9E,MAAM,MAAM,SAAS,GAAG;IACtB;yEACqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B;iEAC6D;IAC7D,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;AAEF;;;oEAGoE;AACpE,wBAAgB,IAAI,CAAC,EACnB,GAAiB,EACjB,KAAK,EACL,eAAe,EACf,IAAI,EACJ,SAAS,EACT,eAAe,EACf,WAAW,EACX,UAAU,EACV,SAAS,GACV,EAAE,SAAS,2CA6BX"}
+{"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;AAMZ,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErD,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,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,WAAW,EACX,iBAAyB,EACzB,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,eAAe,EACf,WAAW,EACX,UAAU,EACV,SAAS,GACV,EAAE,SAAS,2CA6FX"}

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

@@ -1,6 +1,15 @@
 import { ChatTransport, UIMessage } from 'ai';
+import { ChatModel } from './types';
+/** A sample model menu for stories driving the model selector. */
+export declare const MOCK_MODELS: ChatModel[];
 /** A mock ChatTransport that replies with a markdown text turn, then a tool
  *  round-trip turn on the next submission. Use in stories/tests to drive the
  *  Chat UI without a backend. */
 export declare function mockChatTransport(delayMs?: number): ChatTransport<UIMessage>;
+/** A mock transport whose first turn requests tool approval, and whose resume
+ *  (after the user approves/denies) completes the tool and replies. */
+export declare function mockApprovalTransport(delayMs?: number): ChatTransport<UIMessage>;
+/** A mock transport that streams a reasoning ("thinking") block before its
+ *  answer. */
+export declare function mockReasoningTransport(delayMs?: number): ChatTransport<UIMessage>;
 //# sourceMappingURL=Chat.fixtures.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chat.fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Chat.fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAkB,MAAM,IAAI,CAAC;AAyDnE;;iCAEiC;AACjC,wBAAgB,iBAAiB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAWzE"}
+{"version":3,"file":"Chat.fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/chat/Chat.fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAkB,MAAM,IAAI,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,kEAAkE;AAClE,eAAO,MAAM,WAAW,EAAE,SAAS,EAIlC,CAAC;AAwFF;;iCAEiC;AACjC,wBAAgB,iBAAiB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAWzE;AAED;uEACuE;AACvE,wBAAgB,qBAAqB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAW7E;AAED;cACc;AACd,wBAAgB,sBAAsB,CAAC,OAAO,SAAM,GAAG,aAAa,CAAC,SAAS,CAAC,CAS9E"}

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":";;;;;;;;;AAmDA,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,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsB,cAAc,CAAA,CAAE;AAClE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,YAAY;AACnE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,sBAAsB;AAG3D,YAAU,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;AAE1B,QAAM,gBAAgB,OAAO,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK;AACvD,QAAM,aAAa,CAAC,iBAAiB,cAAc;AAInD,QAAM,UAAU,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,oBAAoB;AAAA,IACxB,MAAM,aAAa,IAAI,qBAAqB,EAAE,KAAK,MAAM,MAAM,QAAQ,SAAS;AAAA,IAChF,CAAC,WAAW,GAAG;AAAA,EAAA;AAGjB,QAAM,EAAE,UAAU,aAAa,YAAY,yBAAyB,QAAQ,KAAA,IAC1E,QAAmB;AAAA,IACjB,WAAW;AAAA,IACX,uBAAuB;AAAA,IACvB,GAAI,kBAAkB,EAAE,UAAU,oBAAoB,CAAA;AAAA,EAAC,CACxD;AAEH,QAAM,gBAAgB,CAAC,OAAe;AACpC,aAAS,EAAE;AACX,mDAAgB;AAAA,EAClB;AAEA,QAAM,UAAU,OAAO,SAAS,KAAK,aACnC,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc,QAAgB,OAAO,OAAO,UAAU,eAAe;AAAA,IACrE,kCACE,gBAAA,EAAe,SAAS,kBAAkB,OAAO,QAAQ,UAAU,UAAA,CAAW;AAAA,EAAA,EAAA,CAEnF,IACE;AAEJ,QAAM,QAAS,SAAS,WAAW,MAAM,eAAc,2CAAa,WAClE,qBAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,SAAS,yBAClC,aAAA,EAAY,aAA0B,UAAU,CAAC,SAAS,KAAK,YAAY,EAAE,KAAA,CAAM,EAAA,CAAG;AAAA,EAAA,EAAA,CAE3F,IACE;AAEJ,8BACG,OAAA,EAAI,WAAW,GAAG,wBAAwB,SAAS,GAClD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,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,MAAA;AAAA,IAAA;AAAA,IAGrF,oBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAC;AAAA,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/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