@kognitivedev/ui 0.2.11 → 0.2.13

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @kognitivedev/ui
 
+## 0.2.13
+
+### Patch Changes
+
+- release
+
+- Updated dependencies []:
+  - @kognitivedev/shared@0.2.13
+
+## 0.2.12
+
+### Patch Changes
+
+- release
+
+- Updated dependencies []:
+  - @kognitivedev/shared@0.2.12
+
 ## 0.2.11
 
 ### Patch Changes

package/README.md

@@ -10,27 +10,65 @@ bun add @kognitivedev/ui
 
 **Peer dependencies:** `react`, `ai`, `@ai-sdk/react`, `zod`
 
-## Quick Start
+## Quick Start: End-to-End
+
+### 1. Define an Agent (Server)
+
+```tsx
+// lib/agents.ts
+import { createAgent } from "@kognitivedev/agents";
+import { createTool } from "@kognitivedev/tools";
+import { openai } from "@ai-sdk/openai";
+import { z } from "zod";
+
+const weatherTool = createTool({
+  id: "weather-lookup",
+  description: "Get current weather for a city",
+  inputSchema: z.object({ city: z.string() }),
+  execute: async (input) => ({
+    city: input.city, temperature: 22, condition: "Sunny",
+  }),
+});
+
+export const assistant = createAgent({
+  name: "assistant",
+  instructions: "You are a helpful assistant. Use tools when needed.",
+  model: openai("gpt-4o-mini"),
+  tools: [weatherTool],
+  maxSteps: 5,
+});
+```
+
+### 2. Create an API Route (Server)
+
+```tsx
+// app/api/chat/route.ts
+import { assistant } from "@/lib/agents";
+
+export async function POST(req: Request) {
+  const { messages, resourceId } = await req.json();
+  const result = await assistant.stream({ messages, resourceId: resourceId ?? {} });
+  return result.toUIMessageStreamResponse();
+}
+```
+
+### 3. Build the Chat UI (Client)
 
 ```tsx
+// app/page.tsx
+"use client";
 import { KognitiveUI } from "@kognitivedev/ui";
 
-function App() {
+export default function ChatPage() {
   return (
-    <KognitiveUI agentName="my-agent" baseUrl="http://localhost:3001">
+    <KognitiveUI api="/api/chat" agentName="assistant">
       <KognitiveUI.Thread />
     </KognitiveUI>
   );
 }
 ```
 
-Or point at a custom API route:
-
-```tsx
-<KognitiveUI api="/api/chat" agentName="assistant" resourceId={{ userId: "user-1" }}>
-  <KognitiveUI.Thread allowAttachments />
-</KognitiveUI>
-```
+That's a working chat. `api` points to your route. `agentName` is sent in the request body.
 
 ## Features
 

package/dist/components/message.js

@@ -9,19 +9,38 @@ const composer_1 = require("../primitives/composer");
 const markdown_content_1 = require("./markdown-content");
 const tool_invocation_1 = require("./tool-invocation");
 const use_message_1 = require("../primitives/message/use-message");
+// ── Inline SVG Icons (no external dependency) ──
+function CopyIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }));
+}
+function CheckIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("polyline", { points: "20 6 9 17 4 12" }) }));
+}
+function PencilIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }), (0, jsx_runtime_1.jsx)("path", { d: "m15 5 4 4" })] }));
+}
+function ThumbUpIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 10v12" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" })] }));
+}
+function ThumbDownIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M17 14V2" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" })] }));
+}
+const iconBtnClass = "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800";
 function MessageInner({ className }) {
     const { message, isEditing } = (0, use_message_1.useMessage)();
     const isUser = message.role === "user";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex gap-3 py-4", isUser ? "flex-row-reverse" : "flex-row", className), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm", isUser
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("group relative flex gap-3 py-4", isUser ? "flex-row-reverse" : "flex-row", className), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-medium", isUser
                     ? "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
-                    : "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400"), children: isUser ? "U" : "A" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex-1 space-y-1", isUser ? "text-right" : "text-left"), children: [isEditing ? ((0, jsx_runtime_1.jsx)(composer_1.ComposerPrimitive.EditRoot, { className: "space-y-2", children: ({ value, setValue, submit, cancel }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("textarea", { value: value, onChange: (e) => setValue(e.target.value), className: "w-full resize-none rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-900", rows: 3 }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: submit, className: "rounded-lg bg-blue-600 px-3 py-1 text-xs font-medium text-white hover:bg-blue-700", children: "Save & Send" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: cancel, className: "rounded-lg border border-zinc-300 px-3 py-1 text-xs text-zinc-600 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800", children: "Cancel" })] })] })) })) : ((0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Content, { components: {
+                    : "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400"), children: isUser ? "U" : "A" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex-1 min-w-0", isUser ? "text-right" : "text-left"), children: [isEditing ? ((0, jsx_runtime_1.jsx)(composer_1.ComposerPrimitive.EditRoot, { className: "space-y-2", children: ({ value, setValue, submit, cancel }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("textarea", { value: value, onChange: (e) => setValue(e.target.value), className: "w-full resize-none rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100", rows: 3, autoFocus: true }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: submit, className: "rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700", children: "Save & Send" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: cancel, className: "rounded-lg border border-zinc-300 px-3 py-1.5 text-xs text-zinc-600 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800", children: "Cancel" })] })] })) })) : ((0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Content, { components: {
                             Text: ({ text }) => (0, jsx_runtime_1.jsx)(markdown_content_1.MarkdownContent, { text: text }),
                             ToolInvocation: (props) => (0, jsx_runtime_1.jsx)(tool_invocation_1.ToolInvocation, Object.assign({}, props)),
-                        } })), !isEditing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Role, { match: "user", children: (0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Root, { className: "flex gap-1 pt-1", children: (0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Edit, { className: "rounded px-2 py-1 text-xs text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300" }) }) }), (0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Role, { match: "assistant", children: (0, jsx_runtime_1.jsxs)(action_bar_1.ActionBarPrimitive.Root, { className: "flex gap-1 pt-1", children: [(0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Copy, { className: "rounded px-2 py-1 text-xs text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300", children: (copied) => (copied ? "Copied!" : "Copy") }), (0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Feedback, { className: "flex gap-1", children: ({ selected, onPositive, onNegative }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onPositive, className: (0, cn_1.cn)("rounded px-1.5 py-1 text-xs transition-colors", selected === "positive"
-                                                            ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
-                                                            : "text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"), "aria-label": "Good response", children: "\uD83D\uDC4D" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onNegative, className: (0, cn_1.cn)("rounded px-1.5 py-1 text-xs transition-colors", selected === "negative"
-                                                            ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
-                                                            : "text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"), "aria-label": "Bad response", children: "\uD83D\uDC4E" })] })) })] }) })] }))] })] }));
+                        } })), !isEditing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Role, { match: "user", children: (0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Root, { className: "flex gap-0.5 pt-1 opacity-0 transition-opacity group-hover:opacity-100", children: (0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Edit, { className: (0, cn_1.cn)(iconBtnClass, "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"), children: (0, jsx_runtime_1.jsx)(PencilIcon, { className: "h-3.5 w-3.5" }) }) }) }), (0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Role, { match: "assistant", children: (0, jsx_runtime_1.jsxs)(action_bar_1.ActionBarPrimitive.Root, { className: "flex gap-0.5 pt-1 opacity-0 transition-opacity group-hover:opacity-100", children: [(0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Copy, { className: (0, cn_1.cn)(iconBtnClass, "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"), children: (copied) => copied
+                                                ? (0, jsx_runtime_1.jsx)(CheckIcon, { className: "h-3.5 w-3.5 text-emerald-500" })
+                                                : (0, jsx_runtime_1.jsx)(CopyIcon, { className: "h-3.5 w-3.5" }) }), (0, jsx_runtime_1.jsx)(action_bar_1.ActionBarPrimitive.Feedback, { className: "flex gap-0.5", children: ({ selected, onPositive, onNegative }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onPositive, className: (0, cn_1.cn)(iconBtnClass, selected === "positive"
+                                                            ? "text-emerald-500 bg-emerald-50 dark:bg-emerald-900/20"
+                                                            : "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"), "aria-label": "Good response", children: (0, jsx_runtime_1.jsx)(ThumbUpIcon, { className: "h-3.5 w-3.5" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onNegative, className: (0, cn_1.cn)(iconBtnClass, selected === "negative"
+                                                            ? "text-red-500 bg-red-50 dark:bg-red-900/20"
+                                                            : "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"), "aria-label": "Bad response", children: (0, jsx_runtime_1.jsx)(ThumbDownIcon, { className: "h-3.5 w-3.5" }) })] })) })] }) })] }))] })] }));
 }
 function Message({ message, index, className }) {
     return ((0, jsx_runtime_1.jsx)(message_1.MessagePrimitive.Root, { message: message, index: index, children: (0, jsx_runtime_1.jsx)(MessageInner, { className: className }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kognitivedev/ui",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {
@@ -13,7 +13,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@kognitivedev/shared": "^0.2.11",
+    "@kognitivedev/shared": "^0.2.13",
     "clsx": "^2.1.0",
     "tailwind-merge": "^3.0.0"
   },
@@ -24,7 +24,7 @@
     "zod": ">=3.23.0"
   },
   "optionalDependencies": {
-    "@kognitivedev/tools": "^0.2.11"
+    "@kognitivedev/tools": "^0.2.13"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

package/src/components/message.tsx

@@ -14,6 +14,54 @@ export interface MessageProps {
     className?: string;
 }
 
+// ── Inline SVG Icons (no external dependency) ──
+
+function CopyIcon({ className }: { className?: string }) {
+    return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+    );
+}
+
+function CheckIcon({ className }: { className?: string }) {
+    return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="20 6 9 17 4 12" />
+        </svg>
+    );
+}
+
+function PencilIcon({ className }: { className?: string }) {
+    return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+            <path d="m15 5 4 4" />
+        </svg>
+    );
+}
+
+function ThumbUpIcon({ className }: { className?: string }) {
+    return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M7 10v12" />
+            <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" />
+        </svg>
+    );
+}
+
+function ThumbDownIcon({ className }: { className?: string }) {
+    return (
+        <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M17 14V2" />
+            <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" />
+        </svg>
+    );
+}
+
+const iconBtnClass = "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800";
+
 function MessageInner({ className }: { className?: string }) {
     const { message, isEditing } = useMessage();
     const isUser = message.role === "user";
@@ -21,7 +69,7 @@ function MessageInner({ className }: { className?: string }) {
     return (
         <div
             className={cn(
-                "flex gap-3 py-4",
+                "group relative flex gap-3 py-4",
                 isUser ? "flex-row-reverse" : "flex-row",
                 className,
             )}
@@ -29,7 +77,7 @@ function MessageInner({ className }: { className?: string }) {
             {/* Avatar */}
             <div
                 className={cn(
-                    "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm",
+                    "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-medium",
                     isUser
                         ? "bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
                         : "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400",
@@ -39,8 +87,7 @@ function MessageInner({ className }: { className?: string }) {
             </div>
 
             {/* Content */}
-            <div className={cn("flex-1 space-y-1", isUser ? "text-right" : "text-left")}>
-                {/* Edit composer (replaces content when editing) */}
+            <div className={cn("flex-1 min-w-0", isUser ? "text-right" : "text-left")}>
                 {isEditing ? (
                     <ComposerPrimitive.EditRoot className="space-y-2">
                         {({ value, setValue, submit, cancel }) => (
@@ -48,21 +95,22 @@ function MessageInner({ className }: { className?: string }) {
                                 <textarea
                                     value={value}
                                     onChange={(e) => setValue(e.target.value)}
-                                    className="w-full resize-none rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-900"
+                                    className="w-full resize-none rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100"
                                     rows={3}
+                                    autoFocus
                                 />
                                 <div className="flex gap-2">
                                     <button
                                         type="button"
                                         onClick={submit}
-                                        className="rounded-lg bg-blue-600 px-3 py-1 text-xs font-medium text-white hover:bg-blue-700"
+                                        className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700"
                                     >
-                                        Save & Send
+                                        Save &amp; Send
                                     </button>
                                     <button
                                         type="button"
                                         onClick={cancel}
-                                        className="rounded-lg border border-zinc-300 px-3 py-1 text-xs text-zinc-600 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800"
+                                        className="rounded-lg border border-zinc-300 px-3 py-1.5 text-xs text-zinc-600 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800"
                                     >
                                         Cancel
                                     </button>
@@ -79,50 +127,57 @@ function MessageInner({ className }: { className?: string }) {
                     />
                 )}
 
-                {/* Action bar */}
+                {/* Action bar — icon buttons, visible on hover */}
                 {!isEditing && (
                     <>
-                        {/* User messages: edit button */}
                         <MessagePrimitive.Role match="user">
-                            <ActionBarPrimitive.Root className="flex gap-1 pt-1">
-                                <ActionBarPrimitive.Edit className="rounded px-2 py-1 text-xs text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300" />
+                            <ActionBarPrimitive.Root className="flex gap-0.5 pt-1 opacity-0 transition-opacity group-hover:opacity-100">
+                                <ActionBarPrimitive.Edit
+                                    className={cn(iconBtnClass, "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200")}
+                                >
+                                    <PencilIcon className="h-3.5 w-3.5" />
+                                </ActionBarPrimitive.Edit>
                             </ActionBarPrimitive.Root>
                         </MessagePrimitive.Role>
 
-                        {/* Assistant messages: copy + feedback */}
                         <MessagePrimitive.Role match="assistant">
-                            <ActionBarPrimitive.Root className="flex gap-1 pt-1">
-                                <ActionBarPrimitive.Copy className="rounded px-2 py-1 text-xs text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300">
-                                    {(copied: boolean) => (copied ? "Copied!" : "Copy")}
+                            <ActionBarPrimitive.Root className="flex gap-0.5 pt-1 opacity-0 transition-opacity group-hover:opacity-100">
+                                <ActionBarPrimitive.Copy className={cn(iconBtnClass, "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200")}>
+                                    {(copied: boolean) =>
+                                        copied
+                                            ? <CheckIcon className="h-3.5 w-3.5 text-emerald-500" />
+                                            : <CopyIcon className="h-3.5 w-3.5" />
+                                    }
                                 </ActionBarPrimitive.Copy>
-                                <ActionBarPrimitive.Feedback className="flex gap-1">
+
+                                <ActionBarPrimitive.Feedback className="flex gap-0.5">
                                     {({ selected, onPositive, onNegative }) => (
                                         <>
                                             <button
                                                 type="button"
                                                 onClick={onPositive}
                                                 className={cn(
-                                                    "rounded px-1.5 py-1 text-xs transition-colors",
+                                                    iconBtnClass,
                                                     selected === "positive"
-                                                        ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
-                                                        : "text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+                                                        ? "text-emerald-500 bg-emerald-50 dark:bg-emerald-900/20"
+                                                        : "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200",
                                                 )}
                                                 aria-label="Good response"
                                             >
-                                                &#x1F44D;
+                                                <ThumbUpIcon className="h-3.5 w-3.5" />
                                             </button>
                                             <button
                                                 type="button"
                                                 onClick={onNegative}
                                                 className={cn(
-                                                    "rounded px-1.5 py-1 text-xs transition-colors",
+                                                    iconBtnClass,
                                                     selected === "negative"
-                                                        ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
-                                                        : "text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
+                                                        ? "text-red-500 bg-red-50 dark:bg-red-900/20"
+                                                        : "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200",
                                                 )}
                                                 aria-label="Bad response"
                                             >
-                                                &#x1F44E;
+                                                <ThumbDownIcon className="h-3.5 w-3.5" />
                                             </button>
                                         </>
                                     )}