@flanksource/clicky-ui 0.2.13 → 0.2.15

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

@@ -0,0 +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;"}

package/dist/data/chat/Conversation.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../../lib/utils.cjs");
+const Message = require("./Message.cjs");
+function Conversation({ messages, emptyState, className }) {
+  const scrollRef = react.useRef(null);
+  const pinnedRef = react.useRef(true);
+  const onScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+    pinnedRef.current = distance < 32;
+  };
+  react.useEffect(() => {
+    const el = scrollRef.current;
+    if (el && pinnedRef.current) {
+      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)) })
+    }
+  );
+}
+exports.Conversation = Conversation;
+//# sourceMappingURL=Conversation.cjs.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,11 @@
+import { UIMessage } from './types';
+export type ConversationProps = {
+    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;
+//# sourceMappingURL=Conversation.d.ts.map

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

@@ -0,0 +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"}

package/dist/data/chat/Conversation.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { cn } from "../../lib/utils.js";
+import { Message } from "./Message.js";
+function Conversation({ messages, emptyState, className }) {
+  const scrollRef = useRef(null);
+  const pinnedRef = useRef(true);
+  const onScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+    pinnedRef.current = distance < 32;
+  };
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el && pinnedRef.current) {
+      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)) })
+    }
+  );
+}
+export {
+  Conversation
+};
+//# sourceMappingURL=Conversation.js.map

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

@@ -0,0 +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;"}

package/dist/data/chat/Message.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../../lib/utils.cjs");
+const Markdown = require("../Markdown.cjs");
+const ToolCall = require("./ToolCall.cjs");
+const types = require("./types.cjs");
+function Message({ message, className }) {
+  const isUser = message.role === "user";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "group flex w-full max-w-[95%] flex-col gap-2",
+        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}`))
+        }
+      )
+    }
+  );
+}
+function MessagePart({ part, isUser }) {
+  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.isDynamicToolPart(part) || types.isTypedToolPart(part)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ToolCall.ToolCall, { part });
+  }
+  return null;
+}
+exports.Message = Message;
+//# sourceMappingURL=Message.cjs.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,10 @@
+import { UIMessage } from './types';
+export type MessageProps = {
+    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;
+//# sourceMappingURL=Message.d.ts.map

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

@@ -0,0 +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"}

package/dist/data/chat/Message.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Markdown } from "../Markdown.js";
+import { ToolCall } from "./ToolCall.js";
+import { isDynamicToolPart, isTypedToolPart } from "./types.js";
+function Message({ message, className }) {
+  const isUser = message.role === "user";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group flex w-full max-w-[95%] flex-col gap-2",
+        isUser ? "ml-auto items-end" : "items-start",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: 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__ */ jsx(MessagePart, { part, isUser }, `${message.id}-${i}`))
+        }
+      )
+    }
+  );
+}
+function MessagePart({ part, isUser }) {
+  if (part.type === "text") {
+    if (isUser) {
+      return /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap break-words", children: part.text });
+    }
+    return /* @__PURE__ */ jsx(Markdown, { text: part.text });
+  }
+  if (isDynamicToolPart(part) || isTypedToolPart(part)) {
+    return /* @__PURE__ */ jsx(ToolCall, { part });
+  }
+  return null;
+}
+export {
+  Message
+};
+//# sourceMappingURL=Message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","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":[],"mappings":";;;;;AAcO,SAAS,QAAQ,EAAE,SAAS,aAA2B;AAC5D,QAAM,SAAS,QAAQ,SAAS;AAChC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,sBAAsB;AAAA,QAC/B;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,UAAU;AAAA,UAAA;AAAA,UAGX,kBAAQ,MAAM,IAAI,CAAC,MAAM,MACxB,oBAAC,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,aAAO,oBAAC,QAAA,EAAK,WAAU,mCAAmC,eAAK,MAAK;AAAA,IACtE;AACA,WAAO,oBAAC,UAAA,EAAS,MAAM,KAAK,KAAA,CAAM;AAAA,EACpC;AACA,MAAI,kBAAkB,IAAI,KAAK,gBAAgB,IAAI,GAAG;AACpD,WAAO,oBAAC,YAAS,MAA2B;AAAA,EAC9C;AACA,SAAO;AACT;"}

package/dist/data/chat/PromptInput.cjs

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../../lib/utils.cjs");
+const button = require("../../components/button.cjs");
+const Icon = require("../Icon.cjs");
+const UiStop = require("../../icons/components/UiStop.cjs");
+const UiArrowUp = require("../../icons/components/UiArrowUp.cjs");
+function PromptInput({
+  onSubmit,
+  onStop,
+  status,
+  placeholder = "What would you like to know?",
+  className
+}) {
+  const [value, setValue] = react.useState("");
+  const isGenerating = status === "submitted" || status === "streaming";
+  const submit = () => {
+    const text = value.trim();
+    if (!text || isGenerating) return;
+    onSubmit(text);
+    setValue("");
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    submit();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      submit();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: utils.cn(
+        "flex items-end gap-2 rounded-lg border border-input bg-background p-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            value,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            rows: 1,
+            className: "max-h-48 min-h-9 flex-1 resize-none bg-transparent px-1 py-1.5 text-sm outline-none placeholder:text-muted-foreground"
+          }
+        ),
+        isGenerating && onStop ? /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", size: "icon", variant: "secondary", "aria-label": "Stop", onClick: onStop, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiStop.UiStop, className: "size-4" }) }) : /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", size: "icon", "aria-label": "Send", disabled: !value.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowUp.UiArrowUp, className: "size-4" }) })
+      ]
+    }
+  );
+}
+exports.PromptInput = PromptInput;
+//# sourceMappingURL=PromptInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PromptInput.cjs","sources":["../../../src/data/chat/PromptInput.tsx"],"sourcesContent":["import { useState, type FormEvent, type KeyboardEvent } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../components/button\";\nimport { Icon } from \"../Icon\";\nimport { UiArrowUp, UiStop } from \"../../icons\";\nimport type { ChatStatus } from \"./types\";\n\nexport type PromptInputProps = {\n  /** Called with the trimmed text when the user submits a non-empty message. */\n  onSubmit: (text: string) => void;\n  /** Called when the user stops an in-flight generation. */\n  onStop?: () => void;\n  /** Current chat status; drives the submit/stop button affordance. */\n  status?: ChatStatus | undefined;\n  placeholder?: string | undefined;\n  className?: string | undefined;\n};\n\n/** Auto-growing prompt textarea with a submit/stop button. Enter (or Cmd/Ctrl+\n *  Enter) submits; Shift+Enter inserts a newline. While streaming, the button\n *  becomes a stop control. */\nexport function PromptInput({\n  onSubmit,\n  onStop,\n  status,\n  placeholder = \"What would you like to know?\",\n  className,\n}: PromptInputProps) {\n  const [value, setValue] = useState(\"\");\n  const isGenerating = status === \"submitted\" || status === \"streaming\";\n\n  const submit = () => {\n    const text = value.trim();\n    if (!text || isGenerating) return;\n    onSubmit(text);\n    setValue(\"\");\n  };\n\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    submit();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing) {\n      e.preventDefault();\n      submit();\n    }\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn(\n        \"flex items-end gap-2 rounded-lg border border-input bg-background p-2\",\n        className,\n      )}\n    >\n      <textarea\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        rows={1}\n        className=\"max-h-48 min-h-9 flex-1 resize-none bg-transparent px-1 py-1.5 text-sm outline-none placeholder:text-muted-foreground\"\n      />\n      {isGenerating && onStop ? (\n        <Button type=\"button\" size=\"icon\" variant=\"secondary\" aria-label=\"Stop\" onClick={onStop}>\n          <Icon icon={UiStop} className=\"size-4\" />\n        </Button>\n      ) : (\n        <Button type=\"submit\" size=\"icon\" aria-label=\"Send\" disabled={!value.trim()}>\n          <Icon icon={UiArrowUp} className=\"size-4\" />\n        </Button>\n      )}\n    </form>\n  );\n}\n"],"names":["useState","jsxs","cn","jsx","Button","Icon","UiStop","UiArrowUp"],"mappings":";;;;;;;;;AAqBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,EAAE;AACrC,QAAM,eAAe,WAAW,eAAe,WAAW;AAE1D,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,MAAM,KAAA;AACnB,QAAI,CAAC,QAAQ,aAAc;AAC3B,aAAS,IAAI;AACb,aAAS,EAAE;AAAA,EACb;AAEA,QAAM,eAAe,CAAC,MAAiB;AACrC,MAAE,eAAA;AACF,WAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAA0C;AAC/D,QAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,YAAY,CAAC,EAAE,YAAY,aAAa;AAClE,QAAE,eAAA;AACF,aAAA;AAAA,IACF;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,YACxC,WAAW;AAAA,YACX;AAAA,YACA,MAAM;AAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEX,gBAAgB,SACfA,2BAAAA,IAACC,iBAAO,MAAK,UAAS,MAAK,QAAO,SAAQ,aAAY,cAAW,QAAO,SAAS,QAC/E,yCAACC,KAAAA,MAAA,EAAK,MAAMC,eAAQ,WAAU,SAAA,CAAS,EAAA,CACzC,mCAECF,OAAAA,QAAA,EAAO,MAAK,UAAS,MAAK,QAAO,cAAW,QAAO,UAAU,CAAC,MAAM,KAAA,GACnE,UAAAD,2BAAAA,IAACE,KAAAA,MAAA,EAAK,MAAME,qBAAW,WAAU,UAAS,EAAA,CAC5C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

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

@@ -0,0 +1,16 @@
+import { ChatStatus } from './types';
+export type PromptInputProps = {
+    /** Called with the trimmed text when the user submits a non-empty message. */
+    onSubmit: (text: string) => void;
+    /** Called when the user stops an in-flight generation. */
+    onStop?: () => void;
+    /** Current chat status; drives the submit/stop button affordance. */
+    status?: ChatStatus | undefined;
+    placeholder?: string | undefined;
+    className?: string | undefined;
+};
+/** Auto-growing prompt textarea with a submit/stop button. Enter (or Cmd/Ctrl+
+ *  Enter) submits; Shift+Enter inserts a newline. While streaming, the button
+ *  becomes a stop control. */
+export declare function PromptInput({ onSubmit, onStop, status, placeholder, className, }: PromptInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PromptInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PromptInput.d.ts","sourceRoot":"","sources":["../../../src/data/chat/PromptInput.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qEAAqE;IACrE,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;8BAE8B;AAC9B,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAA4C,EAC5C,SAAS,GACV,EAAE,gBAAgB,2CAkDlB"}

package/dist/data/chat/PromptInput.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../../components/button.js";
+import { Icon } from "../Icon.js";
+import { UiStop } from "../../icons/components/UiStop.js";
+import { UiArrowUp } from "../../icons/components/UiArrowUp.js";
+function PromptInput({
+  onSubmit,
+  onStop,
+  status,
+  placeholder = "What would you like to know?",
+  className
+}) {
+  const [value, setValue] = useState("");
+  const isGenerating = status === "submitted" || status === "streaming";
+  const submit = () => {
+    const text = value.trim();
+    if (!text || isGenerating) return;
+    onSubmit(text);
+    setValue("");
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    submit();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      submit();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: cn(
+        "flex items-end gap-2 rounded-lg border border-input bg-background p-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder,
+            rows: 1,
+            className: "max-h-48 min-h-9 flex-1 resize-none bg-transparent px-1 py-1.5 text-sm outline-none placeholder:text-muted-foreground"
+          }
+        ),
+        isGenerating && onStop ? /* @__PURE__ */ jsx(Button, { type: "button", size: "icon", variant: "secondary", "aria-label": "Stop", onClick: onStop, children: /* @__PURE__ */ jsx(Icon, { icon: UiStop, className: "size-4" }) }) : /* @__PURE__ */ jsx(Button, { type: "submit", size: "icon", "aria-label": "Send", disabled: !value.trim(), children: /* @__PURE__ */ jsx(Icon, { icon: UiArrowUp, className: "size-4" }) })
+      ]
+    }
+  );
+}
+export {
+  PromptInput
+};
+//# sourceMappingURL=PromptInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PromptInput.js","sources":["../../../src/data/chat/PromptInput.tsx"],"sourcesContent":["import { useState, type FormEvent, type KeyboardEvent } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../components/button\";\nimport { Icon } from \"../Icon\";\nimport { UiArrowUp, UiStop } from \"../../icons\";\nimport type { ChatStatus } from \"./types\";\n\nexport type PromptInputProps = {\n  /** Called with the trimmed text when the user submits a non-empty message. */\n  onSubmit: (text: string) => void;\n  /** Called when the user stops an in-flight generation. */\n  onStop?: () => void;\n  /** Current chat status; drives the submit/stop button affordance. */\n  status?: ChatStatus | undefined;\n  placeholder?: string | undefined;\n  className?: string | undefined;\n};\n\n/** Auto-growing prompt textarea with a submit/stop button. Enter (or Cmd/Ctrl+\n *  Enter) submits; Shift+Enter inserts a newline. While streaming, the button\n *  becomes a stop control. */\nexport function PromptInput({\n  onSubmit,\n  onStop,\n  status,\n  placeholder = \"What would you like to know?\",\n  className,\n}: PromptInputProps) {\n  const [value, setValue] = useState(\"\");\n  const isGenerating = status === \"submitted\" || status === \"streaming\";\n\n  const submit = () => {\n    const text = value.trim();\n    if (!text || isGenerating) return;\n    onSubmit(text);\n    setValue(\"\");\n  };\n\n  const handleSubmit = (e: FormEvent) => {\n    e.preventDefault();\n    submit();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing) {\n      e.preventDefault();\n      submit();\n    }\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn(\n        \"flex items-end gap-2 rounded-lg border border-input bg-background p-2\",\n        className,\n      )}\n    >\n      <textarea\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        rows={1}\n        className=\"max-h-48 min-h-9 flex-1 resize-none bg-transparent px-1 py-1.5 text-sm outline-none placeholder:text-muted-foreground\"\n      />\n      {isGenerating && onStop ? (\n        <Button type=\"button\" size=\"icon\" variant=\"secondary\" aria-label=\"Stop\" onClick={onStop}>\n          <Icon icon={UiStop} className=\"size-4\" />\n        </Button>\n      ) : (\n        <Button type=\"submit\" size=\"icon\" aria-label=\"Send\" disabled={!value.trim()}>\n          <Icon icon={UiArrowUp} className=\"size-4\" />\n        </Button>\n      )}\n    </form>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAqBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,eAAe,WAAW,eAAe,WAAW;AAE1D,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,MAAM,KAAA;AACnB,QAAI,CAAC,QAAQ,aAAc;AAC3B,aAAS,IAAI;AACb,aAAS,EAAE;AAAA,EACb;AAEA,QAAM,eAAe,CAAC,MAAiB;AACrC,MAAE,eAAA;AACF,WAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,MAA0C;AAC/D,QAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,YAAY,CAAC,EAAE,YAAY,aAAa;AAClE,QAAE,eAAA;AACF,aAAA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,YACxC,WAAW;AAAA,YACX;AAAA,YACA,MAAM;AAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEX,gBAAgB,SACf,oBAAC,UAAO,MAAK,UAAS,MAAK,QAAO,SAAQ,aAAY,cAAW,QAAO,SAAS,QAC/E,8BAAC,MAAA,EAAK,MAAM,QAAQ,WAAU,SAAA,CAAS,EAAA,CACzC,wBAEC,QAAA,EAAO,MAAK,UAAS,MAAK,QAAO,cAAW,QAAO,UAAU,CAAC,MAAM,KAAA,GACnE,UAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,WAAU,UAAS,EAAA,CAC5C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/data/chat/ToolCall.cjs

@@ -0,0 +1,92 @@
+"use strict";
+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 CodeBlock = require("../CodeBlock.cjs");
+const types = require("./types.cjs");
+const UiCircleX = require("../../icons/components/UiCircleX.cjs");
+const UiCheck = require("../../icons/components/UiCheck.cjs");
+const UiClock = require("../../icons/components/UiClock.cjs");
+const UiCircleOutline = require("../../icons/components/UiCircleOutline.cjs");
+const UiWrench = require("../../icons/components/UiWrench.cjs");
+const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
+const STATUS_LABEL = {
+  "approval-requested": "Awaiting approval",
+  "approval-responded": "Responded",
+  "input-streaming": "Pending",
+  "input-available": "Running",
+  "output-available": "Completed",
+  "output-denied": "Denied",
+  "output-error": "Error"
+};
+const STATUS_ICON = {
+  "approval-requested": { icon: UiClock.UiClock, className: "text-amber-600" },
+  "approval-responded": { icon: UiCheck.UiCheck, className: "text-sky-600" },
+  "input-streaming": { icon: UiCircleOutline.UiCircleOutline, className: "text-muted-foreground" },
+  "input-available": { icon: UiClock.UiClock, className: "text-muted-foreground animate-pulse" },
+  "output-available": { icon: UiCheck.UiCheck, className: "text-emerald-600" },
+  "output-denied": { icon: UiCircleX.UiCircleX, className: "text-orange-600" },
+  "output-error": { icon: UiCircleX.UiCircleX, className: "text-destructive" }
+};
+function ToolCall({ part, defaultOpen = false, className }) {
+  const [open, setOpen] = react.useState(defaultOpen);
+  const status = STATUS_ICON[part.state];
+  const name = types.toolPartName(part);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("not-prose mb-1 w-full", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        className: "flex w-full items-center justify-between gap-2 py-0.5 text-muted-foreground hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiWrench.UiWrench, className: "size-3 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-mono text-xs", children: name }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.Icon,
+              {
+                icon: status.icon,
+                title: STATUS_LABEL[part.state],
+                className: utils.cn("size-3 shrink-0", status.className)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              icon: UiChevronDown.UiChevronDown,
+              className: utils.cn("size-3 shrink-0 transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 pl-4 pt-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ToolInput, { input: part.input }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolOutput, { part })
+    ] })
+  ] });
+}
+function ToolInput({ input }) {
+  if (input === void 0 || input === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { language: "json", source: JSON.stringify(input, null, 2) }) });
+}
+function ToolOutput({ part }) {
+  const errorText = part.state === "output-error" ? part.errorText : void 0;
+  const output = part.state === "output-available" ? part.output : void 0;
+  if (output === void 0 && errorText === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("overflow-x-auto text-xs", errorText ? "text-destructive" : "text-muted-foreground"), children: [
+    errorText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: errorText }),
+    output !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { language: "json", source: typeof output === "string" ? output : JSON.stringify(output, null, 2) })
+  ] });
+}
+exports.ToolCall = ToolCall;
+//# sourceMappingURL=ToolCall.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCall.cjs","sources":["../../../src/data/chat/ToolCall.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../Icon\";\nimport { CodeBlock } from \"../CodeBlock\";\nimport {\n  UiCheck,\n  UiChevronDown,\n  UiCircleOutline,\n  UiCircleX,\n  UiClock,\n  UiWrench,\n} from \"../../icons\";\nimport type { AnyToolPart } from \"./types\";\nimport { toolPartName } from \"./types\";\n\nexport type ToolCallProps = {\n  /** The tool part from an assistant message (typed or dynamic). */\n  part: AnyToolPart;\n  /** Whether the call body starts expanded. Defaults to false. */\n  defaultOpen?: boolean;\n  className?: string;\n};\n\ntype ToolState = AnyToolPart[\"state\"];\n\nconst STATUS_LABEL: Record<ToolState, string> = {\n  \"approval-requested\": \"Awaiting approval\",\n  \"approval-responded\": \"Responded\",\n  \"input-streaming\": \"Pending\",\n  \"input-available\": \"Running\",\n  \"output-available\": \"Completed\",\n  \"output-denied\": \"Denied\",\n  \"output-error\": \"Error\",\n};\n\nconst STATUS_ICON: Record<ToolState, { icon: StaticIconComponent; className: string }> = {\n  \"approval-requested\": { icon: UiClock, className: \"text-amber-600\" },\n  \"approval-responded\": { icon: UiCheck, className: \"text-sky-600\" },\n  \"input-streaming\": { icon: UiCircleOutline, className: \"text-muted-foreground\" },\n  \"input-available\": { icon: UiClock, className: \"text-muted-foreground animate-pulse\" },\n  \"output-available\": { icon: UiCheck, className: \"text-emerald-600\" },\n  \"output-denied\": { icon: UiCircleX, className: \"text-orange-600\" },\n  \"output-error\": { icon: UiCircleX, className: \"text-destructive\" },\n};\n\n/** Generic display of a single AI tool call: a collapsible header showing the\n *  tool name + status, expanding to its JSON input and (once available) output\n *  or error. Renders both clicky `dynamic-tool` parts and typed `tool-<name>`\n *  parts, keyed off `part.state`. */\nexport function ToolCall({ part, defaultOpen = false, className }: ToolCallProps) {\n  const [open, setOpen] = useState(defaultOpen);\n  const status = STATUS_ICON[part.state];\n  const name = toolPartName(part);\n\n  return (\n    <div className={cn(\"not-prose mb-1 w-full\", className)}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        onClick={() => setOpen((v) => !v)}\n        className=\"flex w-full items-center justify-between gap-2 py-0.5 text-muted-foreground hover:text-foreground\"\n      >\n        <span className=\"flex min-w-0 items-center gap-1.5\">\n          <Icon icon={UiWrench} className=\"size-3 shrink-0\" />\n          <span className=\"truncate font-mono text-xs\">{name}</span>\n          <Icon\n            icon={status.icon}\n            title={STATUS_LABEL[part.state]}\n            className={cn(\"size-3 shrink-0\", status.className)}\n          />\n        </span>\n        <Icon\n          icon={UiChevronDown}\n          className={cn(\"size-3 shrink-0 transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div className=\"space-y-1 pl-4 pt-0.5\">\n          <ToolInput input={part.input} />\n          <ToolOutput part={part} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ToolInput({ input }: { input: AnyToolPart[\"input\"] }) {\n  if (input === undefined || input === null) {\n    return null;\n  }\n  return (\n    <div className=\"overflow-hidden text-xs\">\n      <CodeBlock language=\"json\" source={JSON.stringify(input, null, 2)} />\n    </div>\n  );\n}\n\nfunction ToolOutput({ part }: { part: AnyToolPart }) {\n  const errorText = part.state === \"output-error\" ? part.errorText : undefined;\n  const output = part.state === \"output-available\" ? part.output : undefined;\n  if (output === undefined && errorText === undefined) {\n    return null;\n  }\n  return (\n    <div className={cn(\"overflow-x-auto text-xs\", errorText ? \"text-destructive\" : \"text-muted-foreground\")}>\n      {errorText !== undefined && <div>{errorText}</div>}\n      {output !== undefined && (\n        <CodeBlock language=\"json\" source={typeof output === \"string\" ? output : JSON.stringify(output, null, 2)} />\n      )}\n    </div>\n  );\n}\n"],"names":["UiClock","UiCheck","UiCircleOutline","UiCircleX","useState","toolPartName","cn","jsxs","jsx","Icon","UiWrench","UiChevronDown","CodeBlock"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import { AnyToolPart } from './types';
+export type ToolCallProps = {
+    /** The tool part from an assistant message (typed or dynamic). */
+    part: AnyToolPart;
+    /** Whether the call body starts expanded. Defaults to false. */
+    defaultOpen?: boolean;
+    className?: string;
+};
+/** Generic display of a single AI tool call: a collapsible header showing the
+ *  tool name + status, expanding to its JSON input and (once available) output
+ *  or error. Renders both clicky `dynamic-tool` parts and typed `tool-<name>`
+ *  parts, keyed off `part.state`. */
+export declare function ToolCall({ part, defaultOpen, className }: ToolCallProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolCall.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCall.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ToolCall.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,MAAM,MAAM,aAAa,GAAG;IAC1B,kEAAkE;IAClE,IAAI,EAAE,WAAW,CAAC;IAClB,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAwBF;;;qCAGqC;AACrC,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAmB,EAAE,SAAS,EAAE,EAAE,aAAa,2CAoC/E"}

package/dist/data/chat/ToolCall.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
+import { CodeBlock } from "../CodeBlock.js";
+import { toolPartName } from "./types.js";
+import { UiCircleX } from "../../icons/components/UiCircleX.js";
+import { UiCheck } from "../../icons/components/UiCheck.js";
+import { UiClock } from "../../icons/components/UiClock.js";
+import { UiCircleOutline } from "../../icons/components/UiCircleOutline.js";
+import { UiWrench } from "../../icons/components/UiWrench.js";
+import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
+const STATUS_LABEL = {
+  "approval-requested": "Awaiting approval",
+  "approval-responded": "Responded",
+  "input-streaming": "Pending",
+  "input-available": "Running",
+  "output-available": "Completed",
+  "output-denied": "Denied",
+  "output-error": "Error"
+};
+const STATUS_ICON = {
+  "approval-requested": { icon: UiClock, className: "text-amber-600" },
+  "approval-responded": { icon: UiCheck, className: "text-sky-600" },
+  "input-streaming": { icon: UiCircleOutline, className: "text-muted-foreground" },
+  "input-available": { icon: UiClock, className: "text-muted-foreground animate-pulse" },
+  "output-available": { icon: UiCheck, className: "text-emerald-600" },
+  "output-denied": { icon: UiCircleX, className: "text-orange-600" },
+  "output-error": { icon: UiCircleX, className: "text-destructive" }
+};
+function ToolCall({ part, defaultOpen = false, className }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const status = STATUS_ICON[part.state];
+  const name = toolPartName(part);
+  return /* @__PURE__ */ jsxs("div", { className: cn("not-prose mb-1 w-full", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        className: "flex w-full items-center justify-between gap-2 py-0.5 text-muted-foreground hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Icon, { icon: UiWrench, className: "size-3 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-xs", children: name }),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                icon: status.icon,
+                title: STATUS_LABEL[part.state],
+                className: cn("size-3 shrink-0", status.className)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon: UiChevronDown,
+              className: cn("size-3 shrink-0 transition-transform", open && "rotate-180")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "space-y-1 pl-4 pt-0.5", children: [
+      /* @__PURE__ */ jsx(ToolInput, { input: part.input }),
+      /* @__PURE__ */ jsx(ToolOutput, { part })
+    ] })
+  ] });
+}
+function ToolInput({ input }) {
+  if (input === void 0 || input === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "overflow-hidden text-xs", children: /* @__PURE__ */ jsx(CodeBlock, { language: "json", source: JSON.stringify(input, null, 2) }) });
+}
+function ToolOutput({ part }) {
+  const errorText = part.state === "output-error" ? part.errorText : void 0;
+  const output = part.state === "output-available" ? part.output : void 0;
+  if (output === void 0 && errorText === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("overflow-x-auto text-xs", errorText ? "text-destructive" : "text-muted-foreground"), children: [
+    errorText !== void 0 && /* @__PURE__ */ jsx("div", { children: errorText }),
+    output !== void 0 && /* @__PURE__ */ jsx(CodeBlock, { language: "json", source: typeof output === "string" ? output : JSON.stringify(output, null, 2) })
+  ] });
+}
+export {
+  ToolCall
+};
+//# sourceMappingURL=ToolCall.js.map