@epicbagel/saas-kit 1.4.0 → 1.5.0

package/README.md

@@ -160,6 +160,41 @@ public in 1.1.0, and these were the decisions about its props then:
   scroller neither anchors it nor tracks it. It has no time marker, files or
   rich `content`, and the turns either side of it keep their time grouping.
 
+### A turn's actions (1.5.0)
+
+- **Under a reply, a row of actions.** `messageActions(message)` returns the
+  actions under a turn, after prompt-kit's "Message with Actions": small
+  icon-only ghost buttons with tooltips, drawn in a `MessageActions` row at
+  the message's side. `ChatCopyAction` is the ready one: it copies the turn's
+  `text`, its Markdown source, and shows a check and "Copied" for a moment.
+  Add your own after it with `MessageAction` (an icon child, a `tooltip`, and
+  `label` when the tooltip isn't text).
+
+  ```tsx
+  <Chat
+    messages={messages}
+    onSend={send}
+    messageActions={(message) => (
+      <>
+        <ChatCopyAction message={message} onCopy={(ok) => ok && track("copy")} />
+        <MessageAction tooltip="Good reply" onClick={() => rate(message.id, "up")}>
+          <ThumbsUp />
+        </MessageAction>
+      </>
+    )}
+  />
+  ```
+
+- **Which turns.** Assistant turns, by default. `ChatMessage.actions: false`
+  drops them from a turn that isn't a reply (a progress line), `true` gives
+  them to a user turn. The running line, a running turn, a turn with
+  `status: "sending"` (the user's own turn shown optimistically, until its
+  stored copy replaces it) and the footer never have them.
+- **Always there.** The row shows on every screen, a phone included, rather
+  than on hover, so nothing moves when a pointer reaches it, and the copied
+  state swaps one icon for another of the same size. A button is 2rem
+  square, 2.75rem on a touch screen, where the tooltip can't show.
+
 ## File preview (1.3.0)
 
 `primitives/file-preview` shows a file in a dialog without leaving the page:

package/dist/{chunk-JZOBIPFC.js → chunk-FGISSYXG.js}

@@ -1,10 +1,20 @@
 "use client";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-ZRLUUZHK.js";
+import {
+  Button
+} from "./chunk-HQRWRRZJ.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";
 
 // src/primitives/message.tsx
-import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 function MessageGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -85,6 +95,53 @@ function MessageFooter({ className, ...props }) {
     }
   );
 }
+function MessageActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "message-actions",
+      className: cn(
+        "cn-message-actions flex max-w-full min-w-0 items-center gap-0.5 text-muted-foreground empty:hidden group-data-[align=end]/message:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var MessageAction = React.forwardRef(
+  function MessageAction2({
+    tooltip,
+    label,
+    side = "bottom",
+    variant = "quiet",
+    type = "button",
+    className,
+    children,
+    ...props
+  }, ref) {
+    const name = label ?? (typeof tooltip === "string" ? tooltip : void 0);
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          type,
+          variant,
+          size: "icon-compact",
+          "aria-label": name,
+          "data-slot": "message-action",
+          className: cn(
+            "cn-message-action size-8 shrink-0 rounded-full pointer-coarse:size-11",
+            className
+          ),
+          ...props,
+          children
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side, children: tooltip })
+    ] }) });
+  }
+);
 
 export {
   MessageGroup,
@@ -92,5 +149,7 @@ export {
   MessageAvatar,
   MessageContent,
   MessageHeader,
-  MessageFooter
+  MessageFooter,
+  MessageActions,
+  MessageAction
 };

package/dist/{chunk-2AU7ZRGX.cjs → chunk-LAN3K2JI.cjs}

@@ -1,9 +1,19 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+
+
+
+var _chunkU2NES7VRcjs = require('./chunk-U2NES7VR.cjs');
+
+
+var _chunkL4DH72UFcjs = require('./chunk-L4DH72UF.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
 
 // src/primitives/message.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
 var _jsxruntime = require('react/jsx-runtime');
 function MessageGroup({ className, ...props }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -85,6 +95,55 @@ function MessageFooter({ className, ...props }) {
     }
   );
 }
+function MessageActions({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "message-actions",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "cn-message-actions flex max-w-full min-w-0 items-center gap-0.5 text-muted-foreground empty:hidden group-data-[align=end]/message:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var MessageAction = React.forwardRef(
+  function MessageAction2({
+    tooltip,
+    label,
+    side = "bottom",
+    variant = "quiet",
+    type = "button",
+    className,
+    children,
+    ...props
+  }, ref) {
+    const name = _nullishCoalesce(label, () => ( (typeof tooltip === "string" ? tooltip : void 0)));
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2NES7VRcjs.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkU2NES7VRcjs.Tooltip, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2NES7VRcjs.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkL4DH72UFcjs.Button,
+        {
+          ref,
+          type,
+          variant,
+          size: "icon-compact",
+          "aria-label": name,
+          "data-slot": "message-action",
+          className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+            "cn-message-action size-8 shrink-0 rounded-full pointer-coarse:size-11",
+            className
+          ),
+          ...props,
+          children
+        }
+      ) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkU2NES7VRcjs.TooltipContent, { side, children: tooltip })
+    ] }) });
+  }
+);
+
+
 
 
 
@@ -93,4 +152,4 @@ function MessageFooter({ className, ...props }) {
 
 
 
-exports.MessageGroup = MessageGroup; exports.Message = Message; exports.MessageAvatar = MessageAvatar; exports.MessageContent = MessageContent; exports.MessageHeader = MessageHeader; exports.MessageFooter = MessageFooter;
+exports.MessageGroup = MessageGroup; exports.Message = Message; exports.MessageAvatar = MessageAvatar; exports.MessageContent = MessageContent; exports.MessageHeader = MessageHeader; exports.MessageFooter = MessageFooter; exports.MessageActions = MessageActions; exports.MessageAction = MessageAction;

package/dist/primitives/chat.cjs

@@ -23,7 +23,9 @@ var _chunkXABXUP6Lcjs = require('../chunk-XABXUP6L.cjs');
 
 
 
-var _chunk2AU7ZRGXcjs = require('../chunk-2AU7ZRGX.cjs');
+
+
+var _chunkLAN3K2JIcjs = require('../chunk-LAN3K2JI.cjs');
 
 
 
@@ -75,6 +77,9 @@ require('../chunk-PQUSJEXL.cjs');
 var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
 
 
+var _chunk4LXN6GLZcjs = require('../chunk-4LXN6GLZ.cjs');
+
+
 var _chunkR35FT53Gcjs = require('../chunk-R35FT53G.cjs');
 
 
@@ -104,8 +109,14 @@ var _react = require('react');
 
 
 
+
+
 var _lucidereact = require('lucide-react');
 var _jsxruntime = require('react/jsx-runtime');
+function offersActions(message) {
+  if (message.status) return false;
+  return _nullishCoalesce(message.actions, () => ( message.role === "assistant"));
+}
 function useArrivingUserTurnId(messages) {
   const seen = _react.useRef.call(void 0, null);
   seen.current ??= new Set(messages.map((m) => m.id));
@@ -138,7 +149,7 @@ function ChatRunningLine({
   align = "start",
   workspace
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.Message, { align, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.MessageContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.Trace, { className: workspace ? void 0 : "px-3.5 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceLine, { status: "running", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceTitle, { children: label }) }) }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.Message, { align, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.MessageContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.Trace, { className: workspace ? void 0 : "px-3.5 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceLine, { status: "running", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceTitle, { children: label }) }) }) }) });
 }
 var ChatThread = _react.forwardRef.call(void 0, 
   function ChatThread2({
@@ -153,6 +164,7 @@ var ChatThread = _react.forwardRef.call(void 0,
     markdownComponents,
     onOpenAttachment,
     attachmentAction = "open",
+    messageActions,
     className
   }, ref) {
     const markers = timelineMarkers(messages, /* @__PURE__ */ new Date());
@@ -186,6 +198,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                   }
                   const isFullWidth = m.width === "full";
                   const marker = markers[index];
+                  const actions = messageActions && offersActions(m) ? messageActions(m) : null;
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                     _chunkXABXUP6Lcjs.MessageScrollerItem,
                     {
@@ -194,7 +207,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                       className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex flex-col", workspace ? "gap-5" : "gap-3"),
                       children: [
                         marker ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimelineMarker, { label: marker }) : null,
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk2AU7ZRGXcjs.MessageContent, { children: [
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLAN3K2JIcjs.MessageContent, { children: [
                           (m.content || m.text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             _chunkV4YWTRLDcjs.Bubble,
                             {
@@ -222,7 +235,21 @@ var ChatThread = _react.forwardRef.call(void 0,
                               uploadingLabel,
                               className: "px-0 pt-0"
                             }
-                          )
+                          ),
+                          actions != null && actions !== false ? (
+                            // Unboxed workspace turns pull the row out by the
+                            // button's inset, so the first icon lines up with
+                            // the text above it.
+                            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                              _chunkLAN3K2JIcjs.MessageActions,
+                              {
+                                className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                                  workspace && (isUser ? "-me-2 pointer-coarse:-me-3.5" : "-ms-2 pointer-coarse:-ms-3.5")
+                                ),
+                                children: actions
+                              }
+                            )
+                          ) : null
                         ] }) })
                       ]
                     },
@@ -233,7 +260,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                 footer && // Always painted: content-visibility:auto would contain the
                 // footer's paint and layout, clipping a ring or shadow at its
                 // edge and re-parenting anything fixed inside it.
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.MessageContent, { children: footer }) }) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.MessageContent, { children: footer }) }) })
               ]
             }
           ) }),
@@ -246,6 +273,29 @@ var ChatThread = _react.forwardRef.call(void 0,
     ) });
   }
 );
+function ChatCopyAction({
+  message,
+  label = "Copy",
+  copiedLabel = "Copied",
+  onCopy,
+  resetAfter = 2e3
+}) {
+  const { copied, copy } = _chunk4LXN6GLZcjs.useCopyToClipboard.call(void 0, { resetAfter });
+  const text = message.text;
+  if (!text) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkLAN3K2JIcjs.MessageAction,
+    {
+      tooltip: copied ? copiedLabel : label,
+      "data-copied": copied || void 0,
+      onClick: async () => {
+        const ok = await copy(text);
+        _optionalChain([onCopy, 'optionalCall', _ => _(ok)]);
+      },
+      children: copied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, {})
+    }
+  );
+}
 function formatFileSize(size) {
   if (size === void 0) return "File";
   if (size < 1024) return `${size} B`;
@@ -285,7 +335,7 @@ function ChatAttachmentList({
             {
               "aria-label": `${verb} ${attachment.name}`,
               title: `${verb} ${attachment.name}`,
-              onClick: () => _optionalChain([onOpen, 'optionalCall', _ => _(attachment)]),
+              onClick: () => _optionalChain([onOpen, 'optionalCall', _2 => _2(attachment)]),
               className: "rounded-xl focus-visible:ring-2 focus-visible:ring-ring/50"
             }
           ),
@@ -430,7 +480,7 @@ function ChatInput({
                     "data-slot": "chat-input-actions",
                     onClick: (event) => {
                       if (!event.currentTarget.contains(event.target)) return;
-                      if (!event.target.closest("button")) _optionalChain([ref, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.focus, 'call', _4 => _4()]);
+                      if (!event.target.closest("button")) _optionalChain([ref, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.focus, 'call', _5 => _5()]);
                     },
                     className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                       "gap-2",
@@ -448,7 +498,7 @@ function ChatInput({
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Plus, { className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "h-5 w-5") })
                           }
                         ) }),
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuContent, { align: "start", side: "top", className: "min-w-52", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenuItem, { onSelect: () => _optionalChain([fileInputRef, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.click, 'call', _7 => _7()]), children: [
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuContent, { align: "start", side: "top", className: "min-w-52", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenuItem, { onSelect: () => _optionalChain([fileInputRef, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.click, 'call', _8 => _8()]), children: [
                           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Paperclip, { className: "h-4 w-4" }),
                           addFilesLabel
                         ] }) })
@@ -655,6 +705,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   markdownComponents,
   onOpenAttachment,
   attachmentAction,
+  messageActions,
   className
 }, ref) {
   const isMobile = _chunkR35FT53Gcjs.useIsMobile.call(void 0, );
@@ -679,14 +730,14 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
         else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
         else console.error(cause);
       }
-      window.setTimeout(() => _optionalChain([inputRef, 'access', _8 => _8.current, 'optionalAccess', _9 => _9.focus, 'call', _10 => _10()]), 0);
+      window.setTimeout(() => _optionalChain([inputRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]), 0);
     },
     [attachments, mode, onSend, onSendError, pending]
   );
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      focusInput: () => _optionalChain([inputRef, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13()]),
+      focusInput: () => _optionalChain([inputRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.focus, 'call', _14 => _14()]),
       clearInput: () => setInput("")
     }),
     []
@@ -694,7 +745,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const dropFiles = _react.useCallback.call(void 0, 
     (files) => {
       if (!conversationStarted && mode === "voice") setUserMode("text");
-      return _optionalChain([onFilesSelected, 'optionalCall', _14 => _14(files)]);
+      return _optionalChain([onFilesSelected, 'optionalCall', _15 => _15(files)]);
     },
     [conversationStarted, mode, onFilesSelected]
   );
@@ -851,6 +902,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
             markdownComponents,
             onOpenAttachment,
             attachmentAction,
+            messageActions,
             className: _chunkKWLSBTB2cjs.cn.call(void 0, 
               "mb-3",
               application && "min-h-0 flex-1 px-4 py-4 md:px-0 md:py-0",
@@ -905,4 +957,5 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
 
 
 
-exports.Chat = Chat; exports.ChatInput = ChatInput; exports.ChatThread = ChatThread;
+
+exports.Chat = Chat; exports.ChatCopyAction = ChatCopyAction; exports.ChatInput = ChatInput; exports.ChatThread = ChatThread;

package/dist/primitives/chat.d.cts

@@ -43,8 +43,20 @@ type ChatMessage = {
      * with the reply when that lands. The line is not a message: it has no time
      * marker, files or rich `content`, and the scroller neither anchors nor
      * tracks it.
+     *
+     * `"sending"`: a turn still on its way to being stored, such as the user's
+     * own turn shown optimistically. It is drawn as any turn, but offers no
+     * actions until its stored copy replaces it.
      */
-    status?: "running";
+    status?: "running" | "sending";
+    /**
+     * Whether the thread offers this turn the actions `messageActions` returns.
+     * By default an assistant turn has them and a user turn doesn't; `false`
+     * drops them from an assistant turn that isn't a reply (a progress line),
+     * and `true` gives them to a user turn. A running or sending turn never has
+     * them, whatever this says.
+     */
+    actions?: boolean;
 };
 interface ChatThreadProps {
     messages: ChatMessage[];
@@ -80,6 +92,15 @@ interface ChatThreadProps {
     onOpenAttachment?: (attachment: ChatAttachment) => void;
     /** What opening a message's file does, for its label and icon. Defaults to `"open"`. */
     attachmentAction?: ChatAttachmentAction;
+    /**
+     * The actions under a turn, in a `MessageActions` row: `ChatCopyAction`,
+     * then any `MessageAction`s of your own (a thumbs up or down). Called for
+     * each turn that offers them (`ChatMessage.actions`: assistant turns, by
+     * default), never for the running line, a running or sending turn or the
+     * footer. The row always shows, on a phone too, so nothing moves when a
+     * pointer reaches it; return `null` for none.
+     */
+    messageActions?: (message: ChatMessage) => ReactNode;
     className?: string;
 }
 /**
@@ -97,6 +118,24 @@ interface ChatThreadProps {
  * appears. A turn with `status: "running"` draws the same line in its place.
  */
 declare const ChatThread: React$1.ForwardRefExoticComponent<ChatThreadProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ChatCopyActionProps {
+    /** The turn whose `text` (its Markdown source) is copied. */
+    message: Pick<ChatMessage, "text">;
+    /** The tooltip and accessible name. Defaults to "Copy". */
+    label?: string;
+    /** Both, for a moment after a copy. Defaults to "Copied". */
+    copiedLabel?: string;
+    /** Called after each copy, with whether the clipboard took the text. */
+    onCopy?: (success: boolean) => void;
+    /** How long the copied state shows, in ms. Defaults to 2000. */
+    resetAfter?: number;
+}
+/**
+ * The ready Copy action for `messageActions`: copies the turn's `text`, its
+ * Markdown source, and shows a check and "Copied" for a moment. A turn with
+ * no `text` (rich `content` only) has nothing to copy, so it draws nothing.
+ */
+declare function ChatCopyAction({ message, label, copiedLabel, onCopy, resetAfter, }: ChatCopyActionProps): react_jsx_runtime.JSX.Element | null;
 interface ChatInputProps {
     value: string;
     onChange: (next: string) => void;
@@ -330,6 +369,11 @@ interface ChatProps {
     onOpenAttachment?: (attachment: ChatAttachment) => void;
     /** What opening a message's file does, for its label and icon. Defaults to `"open"`. */
     attachmentAction?: ChatAttachmentAction;
+    /**
+     * The actions under each turn that offers them (`ChatMessage.actions`:
+     * assistant turns, by default), such as `ChatCopyAction`. See `ChatThread`.
+     */
+    messageActions?: (message: ChatMessage) => ReactNode;
     className?: string;
 }
 interface ChatHandle {
@@ -361,4 +405,4 @@ interface ChatHandle {
  */
 declare const Chat: React$1.ForwardRefExoticComponent<ChatProps & React$1.RefAttributes<ChatHandle>>;
 
-export { Chat, type ChatAttachment, type ChatAttachmentAction, type ChatHandle, ChatInput, type ChatInputProps, type ChatMessage, type ChatProps, type ChatRole, ChatThread, type ChatThreadProps };
+export { Chat, type ChatAttachment, type ChatAttachmentAction, ChatCopyAction, type ChatCopyActionProps, type ChatHandle, ChatInput, type ChatInputProps, type ChatMessage, type ChatProps, type ChatRole, ChatThread, type ChatThreadProps };

package/dist/primitives/chat.d.ts

@@ -43,8 +43,20 @@ type ChatMessage = {
      * with the reply when that lands. The line is not a message: it has no time
      * marker, files or rich `content`, and the scroller neither anchors nor
      * tracks it.
+     *
+     * `"sending"`: a turn still on its way to being stored, such as the user's
+     * own turn shown optimistically. It is drawn as any turn, but offers no
+     * actions until its stored copy replaces it.
      */
-    status?: "running";
+    status?: "running" | "sending";
+    /**
+     * Whether the thread offers this turn the actions `messageActions` returns.
+     * By default an assistant turn has them and a user turn doesn't; `false`
+     * drops them from an assistant turn that isn't a reply (a progress line),
+     * and `true` gives them to a user turn. A running or sending turn never has
+     * them, whatever this says.
+     */
+    actions?: boolean;
 };
 interface ChatThreadProps {
     messages: ChatMessage[];
@@ -80,6 +92,15 @@ interface ChatThreadProps {
     onOpenAttachment?: (attachment: ChatAttachment) => void;
     /** What opening a message's file does, for its label and icon. Defaults to `"open"`. */
     attachmentAction?: ChatAttachmentAction;
+    /**
+     * The actions under a turn, in a `MessageActions` row: `ChatCopyAction`,
+     * then any `MessageAction`s of your own (a thumbs up or down). Called for
+     * each turn that offers them (`ChatMessage.actions`: assistant turns, by
+     * default), never for the running line, a running or sending turn or the
+     * footer. The row always shows, on a phone too, so nothing moves when a
+     * pointer reaches it; return `null` for none.
+     */
+    messageActions?: (message: ChatMessage) => ReactNode;
     className?: string;
 }
 /**
@@ -97,6 +118,24 @@ interface ChatThreadProps {
  * appears. A turn with `status: "running"` draws the same line in its place.
  */
 declare const ChatThread: React$1.ForwardRefExoticComponent<ChatThreadProps & React$1.RefAttributes<HTMLDivElement>>;
+interface ChatCopyActionProps {
+    /** The turn whose `text` (its Markdown source) is copied. */
+    message: Pick<ChatMessage, "text">;
+    /** The tooltip and accessible name. Defaults to "Copy". */
+    label?: string;
+    /** Both, for a moment after a copy. Defaults to "Copied". */
+    copiedLabel?: string;
+    /** Called after each copy, with whether the clipboard took the text. */
+    onCopy?: (success: boolean) => void;
+    /** How long the copied state shows, in ms. Defaults to 2000. */
+    resetAfter?: number;
+}
+/**
+ * The ready Copy action for `messageActions`: copies the turn's `text`, its
+ * Markdown source, and shows a check and "Copied" for a moment. A turn with
+ * no `text` (rich `content` only) has nothing to copy, so it draws nothing.
+ */
+declare function ChatCopyAction({ message, label, copiedLabel, onCopy, resetAfter, }: ChatCopyActionProps): react_jsx_runtime.JSX.Element | null;
 interface ChatInputProps {
     value: string;
     onChange: (next: string) => void;
@@ -330,6 +369,11 @@ interface ChatProps {
     onOpenAttachment?: (attachment: ChatAttachment) => void;
     /** What opening a message's file does, for its label and icon. Defaults to `"open"`. */
     attachmentAction?: ChatAttachmentAction;
+    /**
+     * The actions under each turn that offers them (`ChatMessage.actions`:
+     * assistant turns, by default), such as `ChatCopyAction`. See `ChatThread`.
+     */
+    messageActions?: (message: ChatMessage) => ReactNode;
     className?: string;
 }
 interface ChatHandle {
@@ -361,4 +405,4 @@ interface ChatHandle {
  */
 declare const Chat: React$1.ForwardRefExoticComponent<ChatProps & React$1.RefAttributes<ChatHandle>>;
 
-export { Chat, type ChatAttachment, type ChatAttachmentAction, type ChatHandle, ChatInput, type ChatInputProps, type ChatMessage, type ChatProps, type ChatRole, ChatThread, type ChatThreadProps };
+export { Chat, type ChatAttachment, type ChatAttachmentAction, ChatCopyAction, type ChatCopyActionProps, type ChatHandle, ChatInput, type ChatInputProps, type ChatMessage, type ChatProps, type ChatRole, ChatThread, type ChatThreadProps };

package/dist/primitives/chat.js

@@ -22,8 +22,10 @@ import {
 } from "../chunk-GFG2R5BZ.js";
 import {
   Message,
+  MessageAction,
+  MessageActions,
   MessageContent
-} from "../chunk-JZOBIPFC.js";
+} from "../chunk-FGISSYXG.js";
 import {
   Marker,
   MarkerContent
@@ -73,6 +75,9 @@ import "../chunk-QMA3WVB7.js";
 import {
   Button
 } from "../chunk-HQRWRRZJ.js";
+import {
+  useCopyToClipboard
+} from "../chunk-ZWZAAGQF.js";
 import {
   useIsMobile
 } from "../chunk-PIU5SSUV.js";
@@ -98,6 +103,8 @@ import {
   ArrowRight,
   ArrowUp,
   ArrowUpRight,
+  Check,
+  Copy,
   Download,
   FileText,
   LockKeyhole,
@@ -106,6 +113,10 @@ import {
   X
 } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function offersActions(message) {
+  if (message.status) return false;
+  return message.actions ?? message.role === "assistant";
+}
 function useArrivingUserTurnId(messages) {
   const seen = useRef(null);
   seen.current ??= new Set(messages.map((m) => m.id));
@@ -153,6 +164,7 @@ var ChatThread = forwardRef(
     markdownComponents,
     onOpenAttachment,
     attachmentAction = "open",
+    messageActions,
     className
   }, ref) {
     const markers = timelineMarkers(messages, /* @__PURE__ */ new Date());
@@ -186,6 +198,7 @@ var ChatThread = forwardRef(
                   }
                   const isFullWidth = m.width === "full";
                   const marker = markers[index];
+                  const actions = messageActions && offersActions(m) ? messageActions(m) : null;
                   return /* @__PURE__ */ jsxs(
                     MessageScrollerItem,
                     {
@@ -222,7 +235,21 @@ var ChatThread = forwardRef(
                               uploadingLabel,
                               className: "px-0 pt-0"
                             }
-                          )
+                          ),
+                          actions != null && actions !== false ? (
+                            // Unboxed workspace turns pull the row out by the
+                            // button's inset, so the first icon lines up with
+                            // the text above it.
+                            /* @__PURE__ */ jsx(
+                              MessageActions,
+                              {
+                                className: cn(
+                                  workspace && (isUser ? "-me-2 pointer-coarse:-me-3.5" : "-ms-2 pointer-coarse:-ms-3.5")
+                                ),
+                                children: actions
+                              }
+                            )
+                          ) : null
                         ] }) })
                       ]
                     },
@@ -246,6 +273,29 @@ var ChatThread = forwardRef(
     ) });
   }
 );
+function ChatCopyAction({
+  message,
+  label = "Copy",
+  copiedLabel = "Copied",
+  onCopy,
+  resetAfter = 2e3
+}) {
+  const { copied, copy } = useCopyToClipboard({ resetAfter });
+  const text = message.text;
+  if (!text) return null;
+  return /* @__PURE__ */ jsx(
+    MessageAction,
+    {
+      tooltip: copied ? copiedLabel : label,
+      "data-copied": copied || void 0,
+      onClick: async () => {
+        const ok = await copy(text);
+        onCopy?.(ok);
+      },
+      children: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {})
+    }
+  );
+}
 function formatFileSize(size) {
   if (size === void 0) return "File";
   if (size < 1024) return `${size} B`;
@@ -655,6 +705,7 @@ var Chat = forwardRef(function Chat2({
   markdownComponents,
   onOpenAttachment,
   attachmentAction,
+  messageActions,
   className
 }, ref) {
   const isMobile = useIsMobile();
@@ -851,6 +902,7 @@ var Chat = forwardRef(function Chat2({
             markdownComponents,
             onOpenAttachment,
             attachmentAction,
+            messageActions,
             className: cn(
               "mb-3",
               application && "min-h-0 flex-1 px-4 py-4 md:px-0 md:py-0",
@@ -903,6 +955,7 @@ var Chat = forwardRef(function Chat2({
 });
 export {
   Chat,
+  ChatCopyAction,
   ChatInput,
   ChatThread
 };

package/dist/primitives/message.cjs

@@ -6,7 +6,11 @@
 
 
 
-var _chunk2AU7ZRGXcjs = require('../chunk-2AU7ZRGX.cjs');
+
+
+var _chunkLAN3K2JIcjs = require('../chunk-LAN3K2JI.cjs');
+require('../chunk-U2NES7VR.cjs');
+require('../chunk-L4DH72UF.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
@@ -15,4 +19,6 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.Message = _chunk2AU7ZRGXcjs.Message; exports.MessageAvatar = _chunk2AU7ZRGXcjs.MessageAvatar; exports.MessageContent = _chunk2AU7ZRGXcjs.MessageContent; exports.MessageFooter = _chunk2AU7ZRGXcjs.MessageFooter; exports.MessageGroup = _chunk2AU7ZRGXcjs.MessageGroup; exports.MessageHeader = _chunk2AU7ZRGXcjs.MessageHeader;
+
+
+exports.Message = _chunkLAN3K2JIcjs.Message; exports.MessageAction = _chunkLAN3K2JIcjs.MessageAction; exports.MessageActions = _chunkLAN3K2JIcjs.MessageActions; exports.MessageAvatar = _chunkLAN3K2JIcjs.MessageAvatar; exports.MessageContent = _chunkLAN3K2JIcjs.MessageContent; exports.MessageFooter = _chunkLAN3K2JIcjs.MessageFooter; exports.MessageGroup = _chunkLAN3K2JIcjs.MessageGroup; exports.MessageHeader = _chunkLAN3K2JIcjs.MessageHeader;

package/dist/primitives/message.d.cts

@@ -1,5 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { ButtonProps } from './button.cjs';
+import { TooltipContent } from './tooltip.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '@radix-ui/react-tooltip';
 
 declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function Message({ className, align, ...props }: React.ComponentProps<"div"> & {
@@ -9,5 +14,34 @@ declare function MessageAvatar({ className, ...props }: React.ComponentProps<"di
 declare function MessageContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * A row of `MessageAction`s under a message: copy, then any others (a thumbs
+ * up or down). It sits at the message's side, the start of a turn from the
+ * other party and the end of one aligned to the end, and collapses when it
+ * holds nothing.
+ */
+declare function MessageActions({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+type MessageActionProps = Omit<ButtonProps, "size" | "aria-label"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+};
+/**
+ * One action in a `MessageActions` row: an icon-only ghost button (pass the
+ * icon as its child) with a tooltip and an accessible name. It is 2rem
+ * square, and 2.75rem on a touch screen, where the tooltip can't show on
+ * hover, so a finger has the kit's usual target.
+ */
+declare const MessageAction: React.ForwardRefExoticComponent<Omit<ButtonProps, "aria-label" | "size"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+} & React.RefAttributes<HTMLButtonElement>>;
 
-export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+export { Message, MessageAction, type MessageActionProps, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/primitives/message.d.ts

@@ -1,5 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import { ButtonProps } from './button.js';
+import { TooltipContent } from './tooltip.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '@radix-ui/react-tooltip';
 
 declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function Message({ className, align, ...props }: React.ComponentProps<"div"> & {
@@ -9,5 +14,34 @@ declare function MessageAvatar({ className, ...props }: React.ComponentProps<"di
 declare function MessageContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare function MessageFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * A row of `MessageAction`s under a message: copy, then any others (a thumbs
+ * up or down). It sits at the message's side, the start of a turn from the
+ * other party and the end of one aligned to the end, and collapses when it
+ * holds nothing.
+ */
+declare function MessageActions({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+type MessageActionProps = Omit<ButtonProps, "size" | "aria-label"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+};
+/**
+ * One action in a `MessageActions` row: an icon-only ghost button (pass the
+ * icon as its child) with a tooltip and an accessible name. It is 2rem
+ * square, and 2.75rem on a touch screen, where the tooltip can't show on
+ * hover, so a finger has the kit's usual target.
+ */
+declare const MessageAction: React.ForwardRefExoticComponent<Omit<ButtonProps, "aria-label" | "size"> & {
+    /** What the action does: its tooltip, and its accessible name when it is text. */
+    tooltip: React.ReactNode;
+    /** The accessible name, for a `tooltip` that isn't plain text. */
+    label?: string;
+    /** Which side of the button the tooltip opens on. Defaults to `"bottom"`. */
+    side?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
+} & React.RefAttributes<HTMLButtonElement>>;
 
-export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+export { Message, MessageAction, type MessageActionProps, MessageActions, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };

package/dist/primitives/message.js

@@ -1,15 +1,21 @@
 "use client";
 import {
   Message,
+  MessageAction,
+  MessageActions,
   MessageAvatar,
   MessageContent,
   MessageFooter,
   MessageGroup,
   MessageHeader
-} from "../chunk-JZOBIPFC.js";
+} from "../chunk-FGISSYXG.js";
+import "../chunk-ZRLUUZHK.js";
+import "../chunk-HQRWRRZJ.js";
 import "../chunk-G6SRSWXB.js";
 export {
   Message,
+  MessageAction,
+  MessageActions,
   MessageAvatar,
   MessageContent,
   MessageFooter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicbagel/saas-kit",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Accessible React primitives, layout components and design tokens for SaaS apps, built on Radix UI and Tailwind CSS v4.",
   "license": "MIT",
   "keywords": [