@agents24/chat-react 0.5.6 → 0.5.8

package/dist/ui/index.js

@@ -299,8 +299,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(
@@ -990,6 +990,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,
@@ -1000,11 +1009,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__ */ jsxs2(ChatMessageActions, { className: "a24-user-message-actions", children: [
+      sentAt ? /* @__PURE__ */ jsx4("time", { dateTime: sentAt.dateTime, children: sentAt.label }) : null,
+      handlers.onCopy ? /* @__PURE__ */ jsx4(
+        ChatMessageAction,
+        {
+          label: "Copy",
+          onClick: copyMessage,
+          tooltip: copied ? "Copied!" : "Copy to clipboard",
+          className: "a24-user-message-copy",
+          children: copied ? /* @__PURE__ */ jsx4(Check, { className: "a24-user-message-copy__check text-green-600" }) : /* @__PURE__ */ jsx4(Copy, { className: "a24-user-message-copy__icon" })
+        }
+      ) : null
+    ] });
+  }
   const canWriteFeedback = Boolean(message.runId && handlers.onSetFeedback);
   return /* @__PURE__ */ jsxs2(ChatMessageActions, { children: [
     handlers.onRetry ? /* @__PURE__ */ jsx4(
@@ -1115,9 +1156,9 @@ function AgentChatDefaultActions({
       ChatMessageAction,
       {
         label: "Copy",
-        onClick: () => handlers.onCopy?.(message.content || "", message.id),
-        tooltip: handlers.copied ? "Copied!" : "Copy to clipboard",
-        children: handlers.copied ? /* @__PURE__ */ jsx4(Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ jsx4(Copy, { className: "size-4" })
+        onClick: copyMessage,
+        tooltip: copied ? "Copied!" : "Copy to clipboard",
+        children: copied ? /* @__PURE__ */ jsx4(Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ jsx4(Copy, { className: "size-4" })
       }
     ) : null
   ] });
@@ -1873,10 +1914,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__ */ jsxs4("div", { className: cn("a24-tool-trigger-row", textOnlyRoot && "a24-tool-trigger-row--text"), children: [
+    return /* @__PURE__ */ jsxs4("div", { className: "a24-tool-trigger-row", children: [
       onSelect && part ? /* @__PURE__ */ jsxs4("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
         showOrb ? /* @__PURE__ */ jsx8(ToolActivityOrb, { label: statusLabel }) : null,
         /* @__PURE__ */ jsx8("span", { className: "a24-tool-trigger__label", children: label })
@@ -1888,7 +1928,7 @@ function ToolDisclosure({
     ] });
   }
   return /* @__PURE__ */ jsxs4("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ jsxs4("div", { className: cn("a24-tool-trigger-row", textOnlyRoot && "a24-tool-trigger-row--text"), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "a24-tool-trigger-row", children: [
       /* @__PURE__ */ jsxs4(
         "button",
         {
@@ -2394,6 +2434,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__ */ jsx10(
+    "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,
@@ -2432,49 +2507,58 @@ function AgentChatMessage({
       message
     }
   ) : null);
-  return /* @__PURE__ */ jsxs6(ChatMessage, { className, dir, from: message.role, children: [
-    showAttachments ? /* @__PURE__ */ jsx10(
-      ChatAttachmentRows,
-      {
-        attachments: message.attachments || [],
-        className: "mb-2",
-        dir,
-        resolveContent: attachmentContentResolver
-      }
-    ) : null,
-    shouldRenderContent ? /* @__PURE__ */ jsxs6(
-      ChatMessageContent,
-      {
-        className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
-        dir,
-        from: message.role,
-        children: [
-          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx10(
-            Timeline,
-            {
-              getHitlActionState,
-              isLoading: isStreaming,
-              message,
-              nodeActivityMode,
-              onHitlAction,
-              parts: message.parts
-            }
-          ) : null,
-          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx10(
-            AgentChatUserMessageContent,
-            {
-              collapsedLines: userMessageCollapsedLines,
-              collapseThreshold: userMessageCollapseThreshold,
-              content: resolvedUserContent,
-              showLessLabel: userMessageShowLessLabel,
-              showMoreLabel: userMessageShowMoreLabel
-            }
-          ) : null : null
-        ]
-      }
-    ) : null,
-    renderedActions ? /* @__PURE__ */ jsx10("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__ */ jsxs6(
+    ChatMessage,
+    {
+      className,
+      dir,
+      from: message.role,
+      children: [
+        showAttachments ? /* @__PURE__ */ jsx10(
+          ChatAttachmentRows,
+          {
+            attachments: message.attachments || [],
+            className: "mb-2",
+            dir,
+            resolveContent: attachmentContentResolver
+          }
+        ) : null,
+        shouldRenderContent ? /* @__PURE__ */ jsxs6(
+          ChatMessageContent,
+          {
+            className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
+            dir,
+            from: message.role,
+            children: [
+              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx10(
+                Timeline,
+                {
+                  getHitlActionState,
+                  isLoading: isStreaming,
+                  message,
+                  nodeActivityMode,
+                  onHitlAction,
+                  parts: message.parts
+                }
+              ) : null,
+              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx10(
+                AgentChatUserMessageContent,
+                {
+                  collapsedLines: userMessageCollapsedLines,
+                  collapseThreshold: userMessageCollapseThreshold,
+                  content: resolvedUserContent,
+                  showLessLabel: userMessageShowLessLabel,
+                  showMoreLabel: userMessageShowMoreLabel
+                }
+              ) : null : null
+            ]
+          }
+        ) : null,
+        renderedActions ? defaultUserActions ? /* @__PURE__ */ jsx10(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ jsx10("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
@@ -2879,6 +2963,7 @@ export {
   AgentChatToolPart,
   AgentChatToolRow,
   AgentChatToolSession,
+  AgentChatUserMessageActionRow,
   AgentChatUserMessageContent,
   AgentResponseTimeline,
   AskUserInteraction,