@agents24/chat-react 0.5.6 → 0.5.8

package/dist/styles.css

@@ -57,7 +57,7 @@
 }
 .a24-scroller__viewport { flex: 1; height: 100%; min-height: 0; min-width: 0; overscroll-behavior: contain; overflow-y: auto; scrollbar-width: none; width: 100%; }
 .a24-scroller__viewport::-webkit-scrollbar { display: none; }
-.a24-scroller__content { display: flex; flex-direction: column; gap: 2rem; min-height: 100%; }
+.a24-scroller__content { display: flex; flex-direction: column; gap: .75rem; min-height: 100%; }
 .a24-scroller__item { animation: var(--a24-message-enter-animation); flex: 0 0 auto; min-width: 0; overflow: visible; }
 .a24-scroller__button {
   align-items: center;
@@ -155,7 +155,6 @@
 .a24-context-status__sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
 .a24-tool-disclosure { min-width: 0; width: 100%; }
 .a24-tool-trigger-row { align-items: center; display: flex; gap: .35rem; min-width: 0; }
-.a24-tool-trigger-row--text { padding-inline: 6px; }
 .a24-tool-trigger { align-items: center; appearance: none; background: transparent; border: 0; color: var(--a24-muted); display: flex; font: inherit; font-size: .875rem; gap: .35rem; line-height: 1.35; min-width: 0; padding: .125rem 0; text-align: start; }
 button.a24-tool-trigger { border-radius: .5rem; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
 button.a24-tool-trigger:hover { color: var(--a24-text); }
@@ -208,9 +207,17 @@ button.a24-tool-trigger:focus-visible { outline: 2px solid var(--a24-focus); out
 .a24-message-response { box-sizing: border-box; max-width: 100%; min-width: 0; padding-inline: 6px; width: 100%; }
 .a24-timeline-error { padding-inline: 6px; }
 .a24-ask-user--resolved { padding-inline: 6px; }
-.a24-chat-message { display: flex; flex-direction: column; gap: .5rem; min-width: 0; width: 100%; }
-.a24-chat-message--user { max-width: 100%; }
-.a24-chat-message--assistant { max-width: 100%; }
+.a24-chat-message { display: flex; flex-direction: column; min-width: 0; width: 100%; }
+.a24-chat-message--user { gap: 0; max-width: 100%; }
+.a24-chat-message--assistant { gap: .5rem; max-width: 100%; }
+.a24-chat-message-action-row--user { align-items: center; align-self: flex-start; display: flex; gap: .5rem; height: 2rem; margin-left: auto; margin-top: .25rem; padding-inline: .25rem; transition: opacity 150ms ease; width: auto; }
+.a24-user-message-actions { color: var(--a24-muted); font-family: inherit; font-size: .75rem; font-weight: 400; gap: .5rem; }
+.a24-user-message-actions time { white-space: nowrap; }
+.a24-user-message-copy { color: var(--a24-muted); height: 1.75rem; padding: 0; position: relative; width: 1.75rem; }
+.a24-user-message-copy:hover { color: var(--a24-text); }
+.a24-user-message-copy__check, .a24-user-message-copy__icon { height: .875rem; inset: 0; margin: auto; position: absolute; width: .875rem; }
+.a24-user-message-copy__icon { opacity: 0; transform: scale(.75); transition: opacity 150ms ease, transform 150ms ease; }
+.a24-chat-message-action-row--user.is-visible .a24-user-message-copy__icon { opacity: 1; transform: scale(1); }
 .a24-chat-attachment-rows { align-self: flex-end; display: flex; flex-direction: column; gap: .375rem; max-width: 100%; min-width: 0; width: 100%; }
 .a24-chat-attachments { align-self: stretch; justify-content: safe flex-end; max-width: 100%; scrollbar-width: none; width: 100%; }
 .a24-chat-attachments[dir="rtl"] { justify-content: safe flex-start; }

package/dist/ui/agent-chat-message.d.ts

@@ -41,4 +41,8 @@ export type AgentChatMessageProps = {
 };
 export declare function shouldCollapseUserMessage(content: string, threshold?: number | null | undefined): boolean;
 export declare function AgentChatUserMessageContent({ collapsedLines, collapseThreshold, content, showLessLabel, showMoreLabel, }: AgentChatUserMessageContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentChatUserMessageActionRow({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function AgentChatMessage({ actionHandlers, additionalActions, actions, actionsClassName, attachmentContentResolver, className, contentClassName, dir, getHitlActionState, message, nodeActivityMode, onHitlAction, Timeline, renderAssistantContent, renderUserContent, showAssistantAttachments, streamingMessageId, userMessageCollapsedLines, userMessageContent, userMessageCollapseThreshold, userMessageShowLessLabel, userMessageShowMoreLabel, }: AgentChatMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/index.cjs

@@ -44,6 +44,7 @@ __export(ui_exports, {
   AgentChatToolPart: () => AgentChatToolPart,
   AgentChatToolRow: () => AgentChatToolRow,
   AgentChatToolSession: () => AgentChatToolSession,
+  AgentChatUserMessageActionRow: () => AgentChatUserMessageActionRow,
   AgentChatUserMessageContent: () => AgentChatUserMessageContent,
   AgentResponseTimeline: () => AgentResponseTimeline,
   AskUserInteraction: () => AskUserInteraction,
@@ -398,8 +399,8 @@ function ChatMessage(input) {
   const messageProps = Object.assign({}, props);
   messageProps.align = resolvedAlign;
   messageProps.className = cn(
-    "a24-chat-message group flex w-full flex-col gap-2",
-    isUser ? "a24-chat-message--user is-user max-w-full justify-end" : "a24-chat-message--assistant is-assistant max-w-full",
+    "a24-chat-message group flex w-full flex-col",
+    isUser ? "a24-chat-message--user is-user max-w-full justify-end gap-0" : "a24-chat-message--assistant is-assistant max-w-full gap-2",
     className
   );
   return React.createElement(
@@ -1089,6 +1090,15 @@ var FEEDBACK_REASONS = [
   ["citation_issue", "Citation issue"],
   ["other", "Other"]
 ];
+function formatSentAt(value) {
+  if (!value) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return {
+    dateTime: date.toISOString(),
+    label: new Intl.DateTimeFormat(void 0, { timeStyle: "short" }).format(date)
+  };
+}
 function AgentChatDefaultActions({
   additionalActions,
   dir,
@@ -1099,11 +1109,43 @@ function AgentChatDefaultActions({
   const [feedbackTrigger, setFeedbackTrigger] = React3.useState(null);
   const [reason, setReason] = React3.useState(handlers?.feedback?.reason ?? null);
   const [comment, setComment] = React3.useState(handlers?.feedback?.comment ?? "");
+  const [optimisticCopied, setOptimisticCopied] = React3.useState(false);
+  const copyResetTimer = React3.useRef(null);
   React3.useEffect(() => {
     setReason(handlers?.feedback?.reason ?? null);
     setComment(handlers?.feedback?.comment ?? "");
   }, [handlers?.feedback?.comment, handlers?.feedback?.reason]);
-  if (!handlers || message.role !== "assistant" || message.isFinal === false) return null;
+  React3.useEffect(() => () => {
+    if (copyResetTimer.current !== null) window.clearTimeout(copyResetTimer.current);
+  }, []);
+  const copied = handlers?.copied ?? optimisticCopied;
+  const copyMessage = () => {
+    handlers?.onCopy?.(message.content || "", message.id);
+    if (handlers?.copied !== void 0) return;
+    setOptimisticCopied(true);
+    if (copyResetTimer.current !== null) window.clearTimeout(copyResetTimer.current);
+    copyResetTimer.current = window.setTimeout(() => {
+      copyResetTimer.current = null;
+      setOptimisticCopied(false);
+    }, 1200);
+  };
+  if (!handlers || message.isFinal === false) return null;
+  if (message.role === "user") {
+    const sentAt = formatSentAt(message.createdAt);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ChatMessageActions, { className: "a24-user-message-actions", children: [
+      sentAt ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("time", { dateTime: sentAt.dateTime, children: sentAt.label }) : null,
+      handlers.onCopy ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ChatMessageAction,
+        {
+          label: "Copy",
+          onClick: copyMessage,
+          tooltip: copied ? "Copied!" : "Copy to clipboard",
+          className: "a24-user-message-copy",
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Check, { className: "a24-user-message-copy__check text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Copy, { className: "a24-user-message-copy__icon" })
+        }
+      ) : null
+    ] });
+  }
   const canWriteFeedback = Boolean(message.runId && handlers.onSetFeedback);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ChatMessageActions, { children: [
     handlers.onRetry ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1214,9 +1256,9 @@ function AgentChatDefaultActions({
       ChatMessageAction,
       {
         label: "Copy",
-        onClick: () => handlers.onCopy?.(message.content || "", message.id),
-        tooltip: handlers.copied ? "Copied!" : "Copy to clipboard",
-        children: handlers.copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Copy, { className: "size-4" })
+        onClick: copyMessage,
+        tooltip: copied ? "Copied!" : "Copy to clipboard",
+        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.Copy, { className: "size-4" })
       }
     ) : null
   ] });
@@ -2149,10 +2191,9 @@ function ToolDisclosure({
   const [open, setOpen] = React6.useState(false);
   const contentId = React6.useId();
   const expandable = React6.Children.toArray(children).length > 0;
-  const textOnlyRoot = Boolean(root && !grouped && !showOrb);
   if (!expandable) {
     const triggerClassName = cn("a24-tool-trigger", root && "a24-tool-trigger--root", root && !showOrb && "a24-tool-trigger--without-orb", error && "a24-tool-trigger--error", loading && "a24-tool-trigger--active");
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("a24-tool-trigger-row", textOnlyRoot && "a24-tool-trigger-row--text"), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-trigger-row", children: [
       onSelect && part ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
         showOrb ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityOrb, { label: statusLabel }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label", children: label })
@@ -2164,7 +2205,7 @@ function ToolDisclosure({
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("a24-tool-trigger-row", textOnlyRoot && "a24-tool-trigger-row--text"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-trigger-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "button",
         {
@@ -2670,6 +2711,41 @@ function AgentChatUserMessageContent({
     ) : null
   ] });
 }
+function AgentChatUserMessageActionRow({
+  children,
+  className
+}) {
+  const rowRef = React8.useRef(null);
+  const [visible, setVisible] = React8.useState(false);
+  React8.useEffect(() => {
+    const message = rowRef.current?.closest('[data-slot="message"]');
+    if (!message) return;
+    const show = () => setVisible(true);
+    const hide = () => setVisible(false);
+    const hideWhenFocusLeaves = (event) => {
+      if (!message.contains(event.relatedTarget)) hide();
+    };
+    message.addEventListener("mouseenter", show);
+    message.addEventListener("mouseleave", hide);
+    message.addEventListener("focusin", show);
+    message.addEventListener("focusout", hideWhenFocusLeaves);
+    return () => {
+      message.removeEventListener("mouseenter", show);
+      message.removeEventListener("mouseleave", hide);
+      message.removeEventListener("focusin", show);
+      message.removeEventListener("focusout", hideWhenFocusLeaves);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      ref: rowRef,
+      className: cn("a24-chat-message-action-row--user", visible && "is-visible", className),
+      style: { opacity: visible ? 1 : 0, pointerEvents: visible ? "auto" : "none" },
+      children
+    }
+  );
+}
 function AgentChatMessage({
   actionHandlers,
   additionalActions,
@@ -2708,49 +2784,58 @@ function AgentChatMessage({
       message
     }
   ) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ChatMessage, { className, dir, from: message.role, children: [
-    showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      ChatAttachmentRows,
-      {
-        attachments: message.attachments || [],
-        className: "mb-2",
-        dir,
-        resolveContent: attachmentContentResolver
-      }
-    ) : null,
-    shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      ChatMessageContent,
-      {
-        className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
-        dir,
-        from: message.role,
-        children: [
-          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            Timeline,
-            {
-              getHitlActionState,
-              isLoading: isStreaming,
-              message,
-              nodeActivityMode,
-              onHitlAction,
-              parts: message.parts
-            }
-          ) : null,
-          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            AgentChatUserMessageContent,
-            {
-              collapsedLines: userMessageCollapsedLines,
-              collapseThreshold: userMessageCollapseThreshold,
-              content: resolvedUserContent,
-              showLessLabel: userMessageShowLessLabel,
-              showMoreLabel: userMessageShowMoreLabel
-            }
-          ) : null : null
-        ]
-      }
-    ) : null,
-    renderedActions ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
-  ] });
+  const defaultUserActions = !actions && Boolean(actionHandlers) && !isAssistant;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    ChatMessage,
+    {
+      className,
+      dir,
+      from: message.role,
+      children: [
+        showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ChatAttachmentRows,
+          {
+            attachments: message.attachments || [],
+            className: "mb-2",
+            dir,
+            resolveContent: attachmentContentResolver
+          }
+        ) : null,
+        shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          ChatMessageContent,
+          {
+            className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
+            dir,
+            from: message.role,
+            children: [
+              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                Timeline,
+                {
+                  getHitlActionState,
+                  isLoading: isStreaming,
+                  message,
+                  nodeActivityMode,
+                  onHitlAction,
+                  parts: message.parts
+                }
+              ) : null,
+              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                AgentChatUserMessageContent,
+                {
+                  collapsedLines: userMessageCollapsedLines,
+                  collapseThreshold: userMessageCollapseThreshold,
+                  content: resolvedUserContent,
+                  showLessLabel: userMessageShowLessLabel,
+                  showMoreLabel: userMessageShowMoreLabel
+                }
+              ) : null : null
+            ]
+          }
+        ) : null,
+        renderedActions ? defaultUserActions ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
+      ]
+    }
+  );
 }
 
 // src/ui/agent-chat-context-status.tsx
@@ -3156,6 +3241,7 @@ function useAudioRecorder(onRecorded, options = {}) {
   AgentChatToolPart,
   AgentChatToolRow,
   AgentChatToolSession,
+  AgentChatUserMessageActionRow,
   AgentChatUserMessageContent,
   AgentResponseTimeline,
   AskUserInteraction,