@flanksource/clicky-ui 0.2.16 → 0.2.17

package/dist/data/chat/Message.js

@@ -1,11 +1,16 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
 import { Markdown } from "../Markdown.js";
 import { ToolCall } from "./ToolCall.js";
-import { isDynamicToolPart, isTypedToolPart } from "./types.js";
-function Message({ message, className }) {
+import { MessageActions } from "./MessageActions.js";
+import { Reasoning } from "./Reasoning.js";
+import { isReasoningPart, isFilePart, isDynamicToolPart, isTypedToolPart } from "./types.js";
+import { UiFile } from "../../icons/components/UiFile.js";
+function Message({ message, className, onRegenerate, onApprove }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsx(
+  const text = message.parts.filter((p) => p.type === "text").map((p) => p.text).join("");
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
@@ -13,31 +18,85 @@ function Message({ message, className }) {
         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}`))
-        }
-      )
+      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,
+                onApprove
+              },
+              `${message.id}-${i}`
+            ))
+          }
+        ),
+        !isUser && text && /* @__PURE__ */ jsx(
+          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__ */ jsx("span", { className: "whitespace-pre-wrap break-words", children: part.text });
     }
     return /* @__PURE__ */ jsx(Markdown, { text: part.text });
   }
+  if (isReasoningPart(part)) {
+    return /* @__PURE__ */ jsx(Reasoning, { text: part.text });
+  }
+  if (isFilePart(part)) {
+    return /* @__PURE__ */ jsx(FilePart, { part });
+  }
   if (isDynamicToolPart(part) || isTypedToolPart(part)) {
-    return /* @__PURE__ */ jsx(ToolCall, { part });
+    return /* @__PURE__ */ jsx(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__ */ jsx(
+      "img",
+      {
+        src: part.url,
+        alt: part.filename ?? "attachment",
+        className: "max-h-48 max-w-full rounded-md border border-border"
+      }
+    );
+  }
+  return /* @__PURE__ */ 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__ */ jsx(Icon, { icon: UiFile, className: "size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: part.filename ?? part.mediaType ?? "file" })
+      ]
+    }
+  );
+}
 export {
   Message
 };

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

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

package/dist/data/chat/MessageActions.cjs

@@ -0,0 +1,54 @@
+"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 UiCheck = require("../../icons/components/UiCheck.cjs");
+const UiCopy = require("../../icons/components/UiCopy.cjs");
+const UiRefresh = require("../../icons/components/UiRefresh.cjs");
+function MessageActions({ text, onRegenerate, className }) {
+  const [copied, setCopied] = react.useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (err) {
+      console.warn("clicky-ui: copy to clipboard failed", err);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex items-center gap-1 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": copied ? "Copied" : "Copy message",
+            onClick: copy,
+            className: "rounded p-1 hover:bg-accent hover:text-accent-foreground",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: copied ? UiCheck.UiCheck : UiCopy.UiCopy, className: utils.cn("size-3.5", copied && "text-emerald-600") })
+          }
+        ),
+        onRegenerate && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Regenerate response",
+            onClick: onRegenerate,
+            className: "rounded p-1 hover:bg-accent hover:text-accent-foreground",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiRefresh.UiRefresh, className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+exports.MessageActions = MessageActions;
+//# sourceMappingURL=MessageActions.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageActions.cjs","sources":["../../../src/data/chat/MessageActions.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiCopy, UiCheck, UiRefresh } from \"../../icons\";\n\nexport type MessageActionsProps = {\n  /** Plain-text content of the message, copied to the clipboard. */\n  text: string;\n  /** Called to re-generate this assistant message. Omit to hide the control. */\n  onRegenerate?: (() => void) | undefined;\n  className?: string;\n};\n\n/** Hover actions for an assistant message: copy its text and (optionally)\n *  regenerate it. */\nexport function MessageActions({ text, onRegenerate, className }: MessageActionsProps) {\n  const [copied, setCopied] = useState(false);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    } catch (err) {\n      console.warn(\"clicky-ui: copy to clipboard failed\", err);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\n        className,\n      )}\n    >\n      <button\n        type=\"button\"\n        aria-label={copied ? \"Copied\" : \"Copy message\"}\n        onClick={copy}\n        className=\"rounded p-1 hover:bg-accent hover:text-accent-foreground\"\n      >\n        <Icon icon={copied ? UiCheck : UiCopy} className={cn(\"size-3.5\", copied && \"text-emerald-600\")} />\n      </button>\n      {onRegenerate && (\n        <button\n          type=\"button\"\n          aria-label=\"Regenerate response\"\n          onClick={onRegenerate}\n          className=\"rounded p-1 hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Icon icon={UiRefresh} className=\"size-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","jsxs","cn","jsx","Icon","UiCheck","UiCopy","UiRefresh"],"mappings":";;;;;;;;;AAeO,SAAS,eAAe,EAAE,MAAM,cAAc,aAAkC;AACrF,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAS,KAAK;AAE1C,QAAM,OAAO,YAAY;AACvB,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,IAAI;AACxC,gBAAU,IAAI;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,IACzC,SAAS,KAAK;AACZ,cAAQ,KAAK,uCAAuC,GAAG;AAAA,IACzD;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,SAAS,WAAW;AAAA,YAChC,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAAA,2BAAAA,IAACC,KAAAA,MAAA,EAAK,MAAM,SAASC,QAAAA,UAAUC,OAAAA,QAAQ,WAAWJ,MAAAA,GAAG,YAAY,UAAU,kBAAkB,EAAA,CAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjG,gBACCC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAAA,2BAAAA,IAACC,WAAA,EAAK,MAAMG,UAAAA,WAAW,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9C;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

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

@@ -0,0 +1,11 @@
+export type MessageActionsProps = {
+    /** Plain-text content of the message, copied to the clipboard. */
+    text: string;
+    /** Called to re-generate this assistant message. Omit to hide the control. */
+    onRegenerate?: (() => void) | undefined;
+    className?: string;
+};
+/** Hover actions for an assistant message: copy its text and (optionally)
+ *  regenerate it. */
+export declare function MessageActions({ text, onRegenerate, className }: MessageActionsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MessageActions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageActions.d.ts","sourceRoot":"","sources":["../../../src/data/chat/MessageActions.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,mBAAmB,GAAG;IAChC,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;qBACqB;AACrB,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAwCpF"}

package/dist/data/chat/MessageActions.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
+import { UiCheck } from "../../icons/components/UiCheck.js";
+import { UiCopy } from "../../icons/components/UiCopy.js";
+import { UiRefresh } from "../../icons/components/UiRefresh.js";
+function MessageActions({ text, onRegenerate, className }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (err) {
+      console.warn("clicky-ui: copy to clipboard failed", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": copied ? "Copied" : "Copy message",
+            onClick: copy,
+            className: "rounded p-1 hover:bg-accent hover:text-accent-foreground",
+            children: /* @__PURE__ */ jsx(Icon, { icon: copied ? UiCheck : UiCopy, className: cn("size-3.5", copied && "text-emerald-600") })
+          }
+        ),
+        onRegenerate && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Regenerate response",
+            onClick: onRegenerate,
+            className: "rounded p-1 hover:bg-accent hover:text-accent-foreground",
+            children: /* @__PURE__ */ jsx(Icon, { icon: UiRefresh, className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MessageActions
+};
+//# sourceMappingURL=MessageActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageActions.js","sources":["../../../src/data/chat/MessageActions.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiCopy, UiCheck, UiRefresh } from \"../../icons\";\n\nexport type MessageActionsProps = {\n  /** Plain-text content of the message, copied to the clipboard. */\n  text: string;\n  /** Called to re-generate this assistant message. Omit to hide the control. */\n  onRegenerate?: (() => void) | undefined;\n  className?: string;\n};\n\n/** Hover actions for an assistant message: copy its text and (optionally)\n *  regenerate it. */\nexport function MessageActions({ text, onRegenerate, className }: MessageActionsProps) {\n  const [copied, setCopied] = useState(false);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(text);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    } catch (err) {\n      console.warn(\"clicky-ui: copy to clipboard failed\", err);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-1 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\n        className,\n      )}\n    >\n      <button\n        type=\"button\"\n        aria-label={copied ? \"Copied\" : \"Copy message\"}\n        onClick={copy}\n        className=\"rounded p-1 hover:bg-accent hover:text-accent-foreground\"\n      >\n        <Icon icon={copied ? UiCheck : UiCopy} className={cn(\"size-3.5\", copied && \"text-emerald-600\")} />\n      </button>\n      {onRegenerate && (\n        <button\n          type=\"button\"\n          aria-label=\"Regenerate response\"\n          onClick={onRegenerate}\n          className=\"rounded p-1 hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Icon icon={UiRefresh} className=\"size-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAeO,SAAS,eAAe,EAAE,MAAM,cAAc,aAAkC;AACrF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,OAAO,YAAY;AACvB,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,IAAI;AACxC,gBAAU,IAAI;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,IACzC,SAAS,KAAK;AACZ,cAAQ,KAAK,uCAAuC,GAAG;AAAA,IACzD;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,SAAS,WAAW;AAAA,YAChC,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,UAAU,QAAQ,WAAW,GAAG,YAAY,UAAU,kBAAkB,EAAA,CAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEjG,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,WAAU,WAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9C;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/data/chat/ModelSelector.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const select = require("../../components/select.cjs");
+const utils = require("../../lib/utils.cjs");
+function ModelSelector({ models, value, onChange, className }) {
+  if (models.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select,
+    {
+      "aria-label": "Model",
+      value: value ?? "",
+      onChange: (e) => onChange(e.target.value),
+      className: utils.cn("h-8 text-xs", className),
+      options: models.map((m) => ({
+        value: m.id,
+        label: m.reasoning ? `${m.label} ·🧠` : m.label,
+        disabled: m.configured === false
+      }))
+    }
+  );
+}
+function EffortSelector({ efforts, value, onChange, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select,
+    {
+      "aria-label": "Reasoning effort",
+      value: value ?? "",
+      onChange: (e) => onChange(e.target.value),
+      className: utils.cn("h-8 w-auto text-xs", className),
+      options: [
+        { value: "", label: "No reasoning" },
+        ...efforts.map((e) => {
+          var _a;
+          return { value: e, label: `${(_a = e[0]) == null ? void 0 : _a.toUpperCase()}${e.slice(1)} reasoning` };
+        })
+      ]
+    }
+  );
+}
+exports.EffortSelector = EffortSelector;
+exports.ModelSelector = ModelSelector;
+//# sourceMappingURL=ModelSelector.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModelSelector.cjs","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { Select } from \"../../components/select\";\nimport { cn } from \"../../lib/utils\";\nimport type { ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n};\n\n/** A model picker driven by the backend model menu. Models whose provider is\n *  not configured are disabled rather than hidden, so the menu communicates\n *  what would be available with the right API key. */\nexport function ModelSelector({ models, value, onChange, className }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  return (\n    <Select\n      aria-label=\"Model\"\n      value={value ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      className={cn(\"h-8 text-xs\", className)}\n      options={models.map((m) => ({\n        value: m.id,\n        label: m.reasoning ? `${m.label} ·🧠` : m.label,\n        disabled: m.configured === false,\n      }))}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". */\nexport function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps) {\n  return (\n    <Select\n      aria-label=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      className={cn(\"h-8 w-auto text-xs\", className)}\n      options={[\n        { value: \"\", label: \"No reasoning\" },\n        ...efforts.map((e) => ({ value: e, label: `${e[0]?.toUpperCase()}${e.slice(1)} reasoning` })),\n      ]}\n    />\n  );\n}\n"],"names":["jsx","Select","cn"],"mappings":";;;;;AAeO,SAAS,cAAc,EAAE,QAAQ,OAAO,UAAU,aAAiC;AACxF,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,SACEA,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,OAAO,SAAS;AAAA,MAChB,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,WAAWC,MAAAA,GAAG,eAAe,SAAS;AAAA,MACtC,SAAS,OAAO,IAAI,CAAC,OAAO;AAAA,QAC1B,OAAO,EAAE;AAAA,QACT,OAAO,EAAE,YAAY,GAAG,EAAE,KAAK,SAAS,EAAE;AAAA,QAC1C,UAAU,EAAE,eAAe;AAAA,MAAA,EAC3B;AAAA,IAAA;AAAA,EAAA;AAGR;AAWO,SAAS,eAAe,EAAE,SAAS,OAAO,UAAU,aAAkC;AAC3F,SACEF,2BAAAA;AAAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,OAAO,SAAS;AAAA,MAChB,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,WAAWC,MAAAA,GAAG,sBAAsB,SAAS;AAAA,MAC7C,SAAS;AAAA,QACP,EAAE,OAAO,IAAI,OAAO,eAAA;AAAA,QACpB,GAAG,QAAQ,IAAI,CAAC;;AAAO,mBAAE,OAAO,GAAG,OAAO,IAAG,OAAE,CAAC,MAAH,mBAAM,aAAa,GAAG,EAAE,MAAM,CAAC,CAAC;SAAe;AAAA,MAAA;AAAA,IAC9F;AAAA,EAAA;AAGN;;;"}

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

@@ -0,0 +1,22 @@
+import { ChatModel } from './types';
+export type ModelSelectorProps = {
+    models: ChatModel[];
+    /** Currently selected model id. */
+    value?: string | undefined;
+    onChange: (id: string) => void;
+    className?: string;
+};
+/** A model picker driven by the backend model menu. Models whose provider is
+ *  not configured are disabled rather than hidden, so the menu communicates
+ *  what would be available with the right API key. */
+export declare function ModelSelector({ models, value, onChange, className }: ModelSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export type EffortSelectorProps = {
+    efforts: string[];
+    value?: string | undefined;
+    onChange: (effort: string) => void;
+    className?: string;
+};
+/** Reasoning-effort picker, shown only for reasoning-capable models. The empty
+ *  value means "no extended thinking". */
+export declare function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModelSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModelSelector.d.ts","sourceRoot":"","sources":["../../../src/data/chat/ModelSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;sDAEsD;AACtD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,kBAAkB,kDAevF;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;0CAC0C;AAC1C,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAa1F"}

package/dist/data/chat/ModelSelector.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { Select } from "../../components/select.js";
+import { cn } from "../../lib/utils.js";
+function ModelSelector({ models, value, onChange, className }) {
+  if (models.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      "aria-label": "Model",
+      value: value ?? "",
+      onChange: (e) => onChange(e.target.value),
+      className: cn("h-8 text-xs", className),
+      options: models.map((m) => ({
+        value: m.id,
+        label: m.reasoning ? `${m.label} ·🧠` : m.label,
+        disabled: m.configured === false
+      }))
+    }
+  );
+}
+function EffortSelector({ efforts, value, onChange, className }) {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      "aria-label": "Reasoning effort",
+      value: value ?? "",
+      onChange: (e) => onChange(e.target.value),
+      className: cn("h-8 w-auto text-xs", className),
+      options: [
+        { value: "", label: "No reasoning" },
+        ...efforts.map((e) => {
+          var _a;
+          return { value: e, label: `${(_a = e[0]) == null ? void 0 : _a.toUpperCase()}${e.slice(1)} reasoning` };
+        })
+      ]
+    }
+  );
+}
+export {
+  EffortSelector,
+  ModelSelector
+};
+//# sourceMappingURL=ModelSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModelSelector.js","sources":["../../../src/data/chat/ModelSelector.tsx"],"sourcesContent":["import { Select } from \"../../components/select\";\nimport { cn } from \"../../lib/utils\";\nimport type { ChatModel } from \"./types\";\n\nexport type ModelSelectorProps = {\n  models: ChatModel[];\n  /** Currently selected model id. */\n  value?: string | undefined;\n  onChange: (id: string) => void;\n  className?: string;\n};\n\n/** A model picker driven by the backend model menu. Models whose provider is\n *  not configured are disabled rather than hidden, so the menu communicates\n *  what would be available with the right API key. */\nexport function ModelSelector({ models, value, onChange, className }: ModelSelectorProps) {\n  if (models.length === 0) return null;\n  return (\n    <Select\n      aria-label=\"Model\"\n      value={value ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      className={cn(\"h-8 text-xs\", className)}\n      options={models.map((m) => ({\n        value: m.id,\n        label: m.reasoning ? `${m.label} ·🧠` : m.label,\n        disabled: m.configured === false,\n      }))}\n    />\n  );\n}\n\nexport type EffortSelectorProps = {\n  efforts: string[];\n  value?: string | undefined;\n  onChange: (effort: string) => void;\n  className?: string;\n};\n\n/** Reasoning-effort picker, shown only for reasoning-capable models. The empty\n *  value means \"no extended thinking\". */\nexport function EffortSelector({ efforts, value, onChange, className }: EffortSelectorProps) {\n  return (\n    <Select\n      aria-label=\"Reasoning effort\"\n      value={value ?? \"\"}\n      onChange={(e) => onChange(e.target.value)}\n      className={cn(\"h-8 w-auto text-xs\", className)}\n      options={[\n        { value: \"\", label: \"No reasoning\" },\n        ...efforts.map((e) => ({ value: e, label: `${e[0]?.toUpperCase()}${e.slice(1)} reasoning` })),\n      ]}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAeO,SAAS,cAAc,EAAE,QAAQ,OAAO,UAAU,aAAiC;AACxF,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,OAAO,SAAS;AAAA,MAChB,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,WAAW,GAAG,eAAe,SAAS;AAAA,MACtC,SAAS,OAAO,IAAI,CAAC,OAAO;AAAA,QAC1B,OAAO,EAAE;AAAA,QACT,OAAO,EAAE,YAAY,GAAG,EAAE,KAAK,SAAS,EAAE;AAAA,QAC1C,UAAU,EAAE,eAAe;AAAA,MAAA,EAC3B;AAAA,IAAA;AAAA,EAAA;AAGR;AAWO,SAAS,eAAe,EAAE,SAAS,OAAO,UAAU,aAAkC;AAC3F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,OAAO,SAAS;AAAA,MAChB,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAC7C,SAAS;AAAA,QACP,EAAE,OAAO,IAAI,OAAO,eAAA;AAAA,QACpB,GAAG,QAAQ,IAAI,CAAC;;AAAO,mBAAE,OAAO,GAAG,OAAO,IAAG,OAAE,CAAC,MAAH,mBAAM,aAAa,GAAG,EAAE,MAAM,CAAC,CAAC;SAAe;AAAA,MAAA;AAAA,IAC9F;AAAA,EAAA;AAGN;"}

package/dist/data/chat/PromptInput.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const utils = require("../../lib/utils.cjs");
 const button = require("../../components/button.cjs");
 const Icon = require("../Icon.cjs");
+const Attachment = require("./Attachment.cjs");
 const UiStop = require("../../icons/components/UiStop.cjs");
 const UiArrowUp = require("../../icons/components/UiArrowUp.cjs");
 function PromptInput({
@@ -12,15 +13,19 @@ function PromptInput({
   onStop,
   status,
   placeholder = "What would you like to know?",
+  enableAttachments = false,
+  toolbar,
   className
 }) {
   const [value, setValue] = react.useState("");
+  const [files, setFiles] = react.useState([]);
   const isGenerating = status === "submitted" || status === "streaming";
   const submit = () => {
     const text = value.trim();
-    if (!text || isGenerating) return;
-    onSubmit(text);
+    if (!text && files.length === 0 || isGenerating) return;
+    onSubmit(text, files);
     setValue("");
+    setFiles([]);
   };
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -32,27 +37,35 @@ function PromptInput({
       submit();
     }
   };
+  const canSubmit = value.trim().length > 0 || files.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
       onSubmit: handleSubmit,
       className: utils.cn(
-        "flex items-end gap-2 rounded-lg border border-input bg-background p-2",
+        "flex flex-col 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" }) })
+        enableAttachments && /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentList, { files, onRemove: (i) => setFiles((f) => f.filter((_, j) => j !== i)) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-2", 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: !canSubmit, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowUp.UiArrowUp, className: "size-4" }) })
+        ] }),
+        (toolbar || enableAttachments) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          enableAttachments && /* @__PURE__ */ jsxRuntime.jsx(Attachment.AttachmentButton, { onAdd: (p) => setFiles((f) => [...f, ...p]), disabled: isGenerating }),
+          toolbar
+        ] })
       ]
     }
   );

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

@@ -1 +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;;"}
+{"version":3,"file":"PromptInput.cjs","sources":["../../../src/data/chat/PromptInput.tsx"],"sourcesContent":["import { useState, type FormEvent, type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../components/button\";\nimport { Icon } from \"../Icon\";\nimport { UiArrowUp, UiStop } from \"../../icons\";\nimport { AttachmentButton, AttachmentList } from \"./Attachment\";\nimport type { ChatStatus, FileUIPart } from \"./types\";\n\nexport type PromptInputProps = {\n  /** Called with the trimmed text and any attachments when the user submits. */\n  onSubmit: (text: string, files: FileUIPart[]) => void;\n  /** Called when the user stops an in-flight generation. */\n  onStop?: (() => void) | undefined;\n  /** Current chat status; drives the submit/stop button affordance. */\n  status?: ChatStatus | undefined;\n  placeholder?: string | undefined;\n  /** Enables the attachment button and chips. */\n  enableAttachments?: boolean | undefined;\n  /** Toolbar content (e.g. model/effort selectors) rendered in the footer. */\n  toolbar?: ReactNode;\n  className?: string | undefined;\n};\n\n/** Auto-growing prompt textarea with a submit/stop button, optional attachment\n *  controls, and a toolbar slot (model/effort selectors). Enter submits;\n *  Shift+Enter inserts a newline; while streaming the button becomes a stop\n *  control. */\nexport function PromptInput({\n  onSubmit,\n  onStop,\n  status,\n  placeholder = \"What would you like to know?\",\n  enableAttachments = false,\n  toolbar,\n  className,\n}: PromptInputProps) {\n  const [value, setValue] = useState(\"\");\n  const [files, setFiles] = useState<FileUIPart[]>([]);\n  const isGenerating = status === \"submitted\" || status === \"streaming\";\n\n  const submit = () => {\n    const text = value.trim();\n    if ((!text && files.length === 0) || isGenerating) return;\n    onSubmit(text, files);\n    setValue(\"\");\n    setFiles([]);\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  const canSubmit = value.trim().length > 0 || files.length > 0;\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className={cn(\n        \"flex flex-col gap-2 rounded-lg border border-input bg-background p-2\",\n        className,\n      )}\n    >\n      {enableAttachments && (\n        <AttachmentList files={files} onRemove={(i) => setFiles((f) => f.filter((_, j) => j !== i))} />\n      )}\n\n      <div className=\"flex items-end gap-2\">\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={!canSubmit}>\n            <Icon icon={UiArrowUp} className=\"size-4\" />\n          </Button>\n        )}\n      </div>\n\n      {(toolbar || enableAttachments) && (\n        <div className=\"flex items-center gap-2\">\n          {enableAttachments && (\n            <AttachmentButton onAdd={(p) => setFiles((f) => [...f, ...p])} disabled={isGenerating} />\n          )}\n          {toolbar}\n        </div>\n      )}\n    </form>\n  );\n}\n"],"names":["useState","jsxs","cn","AttachmentList","jsx","Button","Icon","UiStop","UiArrowUp","AttachmentButton"],"mappings":";;;;;;;;;;AA2BO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,EAAE;AACrC,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAuB,CAAA,CAAE;AACnD,QAAM,eAAe,WAAW,eAAe,WAAW;AAE1D,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,MAAM,KAAA;AACnB,QAAK,CAAC,QAAQ,MAAM,WAAW,KAAM,aAAc;AACnD,aAAS,MAAM,KAAK;AACpB,aAAS,EAAE;AACX,aAAS,CAAA,CAAE;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,QAAM,YAAY,MAAM,KAAA,EAAO,SAAS,KAAK,MAAM,SAAS;AAE5D,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,oDACEC,2BAAA,EAAe,OAAc,UAAU,CAAC,MAAM,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,MAAM,CAAC,CAAC,GAAG;AAAA,QAG/FF,2BAAAA,KAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,UAAAG,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,cACxC,WAAW;AAAA,cACX;AAAA,cACA,MAAM;AAAA,cACN,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEX,gBAAgB,SACfA,2BAAAA,IAACC,eAAA,EAAO,MAAK,UAAS,MAAK,QAAO,SAAQ,aAAY,cAAW,QAAO,SAAS,QAC/E,UAAAD,+BAACE,KAAAA,MAAA,EAAK,MAAMC,OAAAA,QAAQ,WAAU,SAAA,CAAS,GACzC,IAEAH,+BAACC,OAAAA,QAAA,EAAO,MAAK,UAAS,MAAK,QAAO,cAAW,QAAO,UAAU,CAAC,WAC7D,UAAAD,2BAAAA,IAACE,KAAAA,MAAA,EAAK,MAAME,qBAAW,WAAU,UAAS,EAAA,CAC5C;AAAA,QAAA,GAEJ;AAAA,SAEE,WAAW,sBACXP,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,UAAA,oDACEQ,WAAAA,kBAAA,EAAiB,OAAO,CAAC,MAAM,SAAS,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,UAAU,cAAc;AAAA,UAExF;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

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

@@ -1,16 +1,22 @@
-import { ChatStatus } from './types';
+import { ReactNode } from 'react';
+import { ChatStatus, FileUIPart } from './types';
 export type PromptInputProps = {
-    /** Called with the trimmed text when the user submits a non-empty message. */
-    onSubmit: (text: string) => void;
+    /** Called with the trimmed text and any attachments when the user submits. */
+    onSubmit: (text: string, files: FileUIPart[]) => void;
     /** Called when the user stops an in-flight generation. */
-    onStop?: () => void;
+    onStop?: (() => void) | undefined;
     /** Current chat status; drives the submit/stop button affordance. */
     status?: ChatStatus | undefined;
     placeholder?: string | undefined;
+    /** Enables the attachment button and chips. */
+    enableAttachments?: boolean | undefined;
+    /** Toolbar content (e.g. model/effort selectors) rendered in the footer. */
+    toolbar?: ReactNode;
     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;
+/** Auto-growing prompt textarea with a submit/stop button, optional attachment
+ *  controls, and a toolbar slot (model/effort selectors). Enter submits;
+ *  Shift+Enter inserts a newline; while streaming the button becomes a stop
+ *  control. */
+export declare function PromptInput({ onSubmit, onStop, status, placeholder, enableAttachments, toolbar, className, }: PromptInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PromptInput.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"PromptInput.d.ts","sourceRoot":"","sources":["../../../src/data/chat/PromptInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrF,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACtD,0DAA0D;IAC1D,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAClC,qEAAqE;IACrE,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;;eAGe;AACf,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,MAAM,EACN,WAA4C,EAC5C,iBAAyB,EACzB,OAAO,EACP,SAAS,GACV,EAAE,gBAAgB,2CAqElB"}