@nextclaw/agent-chat-ui 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -160,7 +160,7 @@ type ChatMessageTexts = {
 type ChatMessageListProps = {
     messages: ChatMessageViewModel[];
     isSending: boolean;
-    hasStreamingDraft: boolean;
+    hasAssistantDraft: boolean;
     texts: ChatMessageTexts;
     className?: string;
 };

package/dist/index.js

@@ -374,8 +374,18 @@ var ChatButton = React5.forwardRef(
 ChatButton.displayName = "ChatButton";
 
 // src/components/chat/ui/chat-input-bar/chat-input-bar-actions.tsx
-import { ArrowUp, Square } from "lucide-react";
+import { ArrowUp } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function StopIcon() {
+  return /* @__PURE__ */ jsx9(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-testid": "chat-stop-icon",
+      className: "block h-3 w-3 rounded-[2px] bg-gray-700 shadow-[inset_0_0_0_1px_rgba(17,24,39,0.06)]"
+    }
+  );
+}
 function ChatInputBarActions(props) {
   const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
   return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-end gap-1", children: [
@@ -389,7 +399,7 @@ function ChatInputBarActions(props) {
         "aria-label": props.stopButtonLabel,
         onClick: () => void props.onStop(),
         disabled: props.stopDisabled,
-        children: /* @__PURE__ */ jsx9(Square, { className: "h-3 w-3 fill-current" })
+        children: /* @__PURE__ */ jsx9(StopIcon, {})
       }
     ) : /* @__PURE__ */ jsx9(TooltipProvider, { children: /* @__PURE__ */ jsxs4(Tooltip, { children: [
       /* @__PURE__ */ jsx9(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9(
@@ -400,7 +410,7 @@ function ChatInputBarActions(props) {
           className: "h-8 w-8 rounded-full",
           "aria-label": props.stopButtonLabel,
           disabled: true,
-          children: /* @__PURE__ */ jsx9(Square, { className: "h-3 w-3 fill-current" })
+          children: /* @__PURE__ */ jsx9(StopIcon, {})
         }
       ) }) }),
       /* @__PURE__ */ jsx9(TooltipContent, { side: "top", children: /* @__PURE__ */ jsx9("p", { className: "text-xs", children: props.stopHint }) })
@@ -738,12 +748,33 @@ import { Bot, User, Wrench } from "lucide-react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function ChatMessageAvatar({ role }) {
   if (role === "user") {
-    return /* @__PURE__ */ jsx13("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white shadow-sm", children: /* @__PURE__ */ jsx13(User, { className: "h-4 w-4" }) });
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        "data-testid": "chat-message-avatar-user",
+        className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-white shadow-sm",
+        children: /* @__PURE__ */ jsx13(User, { className: "h-4 w-4" })
+      }
+    );
   }
-  if (role === "assistant") {
-    return /* @__PURE__ */ jsx13("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-slate-900 text-white shadow-sm", children: /* @__PURE__ */ jsx13(Bot, { className: "h-4 w-4" }) });
+  if (role === "tool") {
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        "data-testid": "chat-message-avatar-tool",
+        className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm",
+        children: /* @__PURE__ */ jsx13(Wrench, { className: "h-4 w-4" })
+      }
+    );
   }
-  return /* @__PURE__ */ jsx13("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm", children: /* @__PURE__ */ jsx13(Wrench, { className: "h-4 w-4" }) });
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      "data-testid": "chat-message-avatar-assistant",
+      className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-200/80 bg-gray-900 text-white shadow-sm",
+      children: /* @__PURE__ */ jsx13(Bot, { className: "h-4 w-4" })
+    }
+  );
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
@@ -990,7 +1021,7 @@ function ChatMessageMarkdown(props) {
 // src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function ChatReasoningBlock(props) {
-  return /* @__PURE__ */ jsxs9("details", { className: "mt-3", children: [
+  return /* @__PURE__ */ jsxs9("details", { className: "mt-3", open: true, children: [
     /* @__PURE__ */ jsx16("summary", { className: cn("cursor-pointer text-xs", props.isUser ? "text-primary-100" : "text-gray-500"), children: props.label }),
     /* @__PURE__ */ jsx16(
       "pre",
@@ -1098,11 +1129,20 @@ function ChatMessage(props) {
 // src/components/chat/ui/chat-message-list/chat-message-meta.tsx
 import { jsxs as jsxs12 } from "react/jsx-runtime";
 function ChatMessageMeta(props) {
-  return /* @__PURE__ */ jsxs12("div", { className: cn("px-1 text-[11px]", props.isUser ? "text-primary-300" : "text-gray-400"), children: [
-    props.roleLabel,
-    " \xB7 ",
-    props.timestampLabel
-  ] });
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: cn(
+        "px-1 text-[11px] leading-4 text-gray-400",
+        props.isUser ? "text-right" : "text-left"
+      ),
+      children: [
+        props.roleLabel,
+        " \xB7 ",
+        props.timestampLabel
+      ]
+    }
+  );
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-list.tsx
@@ -1120,7 +1160,7 @@ function ChatMessageList(props) {
         isUser ? /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: message.role }) : null
       ] }, message.id);
     }),
-    props.isSending && !props.hasStreamingDraft ? /* @__PURE__ */ jsxs13("div", { className: "flex justify-start gap-3", children: [
+    props.isSending && !props.hasAssistantDraft ? /* @__PURE__ */ jsxs13("div", { className: "flex justify-start gap-3", children: [
       /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: "assistant" }),
       /* @__PURE__ */ jsx20("div", { className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm", children: props.texts.typingLabel })
     ] }) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/agent-chat-ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",