@tangle-network/ui 9.1.1 → 9.1.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @tangle-network/ui
 
+## 9.1.2
+
+### Patch Changes
+
+- d50f746: Give run/timeline tool rows a proper elevation ladder. Rows read as the same value as the canvas: `InlineToolItem` used `bg-card/40` (near-transparent) and RunGroup's OpenUI/running blocks used `bg-[var(--bg-root)]` (literally the page background). Both now use `--md3-surface-container` — one clear step above the `--bg-root` canvas — with hover/open stepping to `--md3-surface-container-high`. Rows now separate from the background instead of blending into it.
+- d50f746: One user-message bubble. There were two: the exported `UserMessage` (a loud filled purple bubble with an uppercase "You" label + shadow, used by the run/message list) and a separate cleaner inline bubble inside `AgentTimeline`. Unify on the clean one — `UserMessage` is now a quiet right-aligned bordered bubble on the muted surface (no fill, no uppercase label), and `AgentTimeline` renders through it instead of its own copy. `UserMessage` accepts either session-model `parts` or a direct `content`/`timestamp`, so both call sites share it.
+
 ## 9.1.1
 
 ### Patch Changes

package/dist/chat.d.ts

@@ -75,15 +75,20 @@ interface MessageListProps {
 declare const MessageList: React.MemoExoticComponent<({ groups, partMap, isCollapsed, onToggleCollapse, branding, renderToolDetail, renderRunActions, renderUserMessageActions, renderToolActions, }: MessageListProps) => react_jsx_runtime.JSX.Element>;
 
 interface UserMessageProps {
-    message: SessionMessage;
-    parts: SessionPart[];
+    /** Session-model input: text is derived from these parts. */
+    message?: SessionMessage;
+    parts?: SessionPart[];
+    /** Direct-content input (e.g. AgentTimeline): explicit text + timestamp. */
+    content?: string;
+    timestamp?: Date;
     actions?: ReactNode;
 }
 /**
- * Simple user message bubble.
- * Renders text parts from the user's message.
+ * The single user message bubble — a quiet, right-aligned bordered bubble on the
+ * muted surface (no loud fill, no uppercase label). Used by both the run/message
+ * list (session-model `parts`) and AgentTimeline (direct `content`/`timestamp`).
  */
-declare const UserMessage: React.MemoExoticComponent<({ message, parts, actions }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
+declare const UserMessage: React.MemoExoticComponent<({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => react_jsx_runtime.JSX.Element | null>;
 
 type MessageRole = "user" | "assistant" | "system";
 interface ChatMessageProps {

package/dist/chat.js

@@ -5,7 +5,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-YUY6D62P.js";
+} from "./chunk-BQVQGDDV.js";
 import "./chunk-AZWDI2JG.js";
 import "./chunk-KWRLQ3MR.js";
 import "./chunk-WVW4KHEH.js";

package/dist/{chunk-YUY6D62P.js → chunk-BQVQGDDV.js}

@@ -38,17 +38,22 @@ import { memo as memo2 } from "react";
 // src/chat/user-message.tsx
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var UserMessage = memo(({ message, parts, actions }) => {
-  const textContent = parts.filter((p) => p.type === "text").map((p) => p.text).join("\n");
-  if (!textContent.trim()) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[78%] flex-col items-end gap-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[26px] rounded-br-[12px] bg-[var(--brand-primary)] px-4 py-3 text-white shadow-[0_8px_20px_rgba(15,23,42,0.12)]", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/60", children: "You" }),
-      /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[15px] leading-6.5 text-white", children: textContent })
-    ] }),
-    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground", children: actions }) : null
-  ] }) });
-});
+function formatTime(date) {
+  return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+var UserMessage = memo(
+  ({ message: _message, parts, content, timestamp, actions }) => {
+    const text = content ?? (parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join("\n");
+    if (!text.trim()) return null;
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[78%] flex-col items-end gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-full rounded-2xl border border-border bg-muted/50 px-4 py-3", children: [
+        timestamp ? /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(timestamp) }) : null,
+        /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: text })
+      ] }),
+      actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground", children: actions }) : null
+    ] }) });
+  }
+);
 UserMessage.displayName = "UserMessage";
 
 // src/chat/message-list.tsx
@@ -162,7 +167,7 @@ var TONE_STYLES = {
     icon: AlertTriangle
   }
 };
-function formatTime(date) {
+function formatTime2(date) {
   return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
 }
 function AgentTimelineRow({ isLast, accentClassName, children }) {
@@ -174,15 +179,9 @@ function AgentTimelineRow({ isLast, accentClassName, children }) {
     /* @__PURE__ */ jsx4("div", { className: "min-w-0 pb-3", children })
   ] });
 }
-function UserMessage2({ item }) {
-  return /* @__PURE__ */ jsx4("div", { className: "mb-3 flex justify-end", children: /* @__PURE__ */ jsx4("div", { className: "max-w-[72%]", children: /* @__PURE__ */ jsxs3("div", { className: "rounded-2xl border border-border bg-muted/50 px-4 py-3", children: [
-    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(item.timestamp) }),
-    /* @__PURE__ */ jsx4("div", { className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground", children: item.content })
-  ] }) }) });
-}
 function AssistantMessage({ item }) {
   return /* @__PURE__ */ jsxs3("div", { className: "-mt-0.5", children: [
-    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-2 text-[var(--font-size-xs)] text-muted-foreground", children: formatTime(item.timestamp) }),
+    item.timestamp && /* @__PURE__ */ jsx4("div", { className: "mb-2 text-[var(--font-size-xs)] text-muted-foreground", children: formatTime2(item.timestamp) }),
     item.content && /* @__PURE__ */ jsx4(Markdown, { className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]", children: item.content }),
     item.isStreaming && /* @__PURE__ */ jsx4("span", { className: "ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-primary align-text-bottom" }),
     item.toolCalls && /* @__PURE__ */ jsx4("div", { className: "mt-3", children: item.toolCalls }),
@@ -243,7 +242,7 @@ function AgentTimeline({
   const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
   return /* @__PURE__ */ jsx4("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: renderedItems.map((item, index) => {
     if (item.kind === "message" && item.role === "user") {
-      return /* @__PURE__ */ jsx4(UserMessage2, { item }, item.id);
+      return /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }, item.id);
     }
     const timelineIndex = timelineItems.indexOf(item);
     const isLast = timelineIndex === timelineItems.length - 1;
@@ -643,7 +642,7 @@ function ChatMessage({
       children: [
         !hideRoleLabel && /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse"), children: [
           /* @__PURE__ */ jsx6("span", { className: "font-medium text-foreground text-xs", children: isUser ? userLabel : assistantLabel }),
-          timestamp && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: formatTime2(timestamp) })
+          timestamp && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: formatTime3(timestamp) })
         ] }),
         /* @__PURE__ */ jsxs5(
           "div",
@@ -666,7 +665,7 @@ function ChatMessage({
     }
   );
 }
-function formatTime2(date) {
+function formatTime3(date) {
   return date.toLocaleTimeString(void 0, {
     hour: "numeric",
     minute: "2-digit"

package/dist/index.js

@@ -137,7 +137,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-YUY6D62P.js";
+} from "./chunk-BQVQGDDV.js";
 import {
   useAutoScroll,
   useRunCollapseState,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/agent-timeline.tsx

@@ -8,6 +8,7 @@ import {
 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { type MessageRole } from "./chat-message";
+import { UserMessage } from "./user-message";
 import { Markdown } from "../markdown/markdown";
 import { ThinkingIndicator } from "./thinking-indicator";
 import { type ToolCallData } from "../run/tool-call-feed";
@@ -146,25 +147,6 @@ function AgentTimelineRow({ isLast, accentClassName, children }: AgentTimelineRo
   );
 }
 
-function UserMessage({ item }: { item: AgentTimelineMessageItem }) {
-  return (
-    <div className="mb-3 flex justify-end">
-      <div className="max-w-[72%]">
-        <div className="rounded-2xl border border-border bg-muted/50 px-4 py-3">
-          {item.timestamp && (
-            <div className="mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground">
-              {formatTime(item.timestamp)}
-            </div>
-          )}
-          <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground">
-            {item.content}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 function AssistantMessage({ item }: { item: AgentTimelineMessageItem }) {
   return (
     <div className="-mt-0.5">
@@ -285,7 +267,7 @@ export function AgentTimeline({
       {renderedItems.map((item, index) => {
         // User messages: right-aligned bubble, no connector
         if (item.kind === "message" && item.role === "user") {
-          return <UserMessage key={item.id} item={item} />;
+          return <UserMessage key={item.id} content={item.content} timestamp={item.timestamp} />;
         }
 
         const timelineIndex = timelineItems.indexOf(item);

package/src/chat/user-message.tsx

@@ -3,41 +3,56 @@ import type { SessionMessage } from "../types/message";
 import type { SessionPart } from "../types/parts";
 
 export interface UserMessageProps {
-  message: SessionMessage;
-  parts: SessionPart[];
+  /** Session-model input: text is derived from these parts. */
+  message?: SessionMessage;
+  parts?: SessionPart[];
+  /** Direct-content input (e.g. AgentTimeline): explicit text + timestamp. */
+  content?: string;
+  timestamp?: Date;
   actions?: ReactNode;
 }
 
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+}
+
 /**
- * Simple user message bubble.
- * Renders text parts from the user's message.
+ * The single user message bubble — a quiet, right-aligned bordered bubble on the
+ * muted surface (no loud fill, no uppercase label). Used by both the run/message
+ * list (session-model `parts`) and AgentTimeline (direct `content`/`timestamp`).
  */
-export const UserMessage = memo(({ message, parts, actions }: UserMessageProps) => {
-  const textContent = parts
-    .filter((p) => p.type === "text")
-    .map((p) => (p as { text: string }).text)
-    .join("\n");
+export const UserMessage = memo(
+  ({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => {
+    const text =
+      content ??
+      (parts ?? [])
+        .filter((p) => p.type === "text")
+        .map((p) => (p as { text: string }).text)
+        .join("\n");
 
-  if (!textContent.trim()) return null;
+    if (!text.trim()) return null;
 
-  return (
-    <div className="flex justify-end">
-      <div className="flex max-w-[78%] flex-col items-end gap-2">
-        <div className="w-full rounded-[26px] rounded-br-[12px] bg-[var(--brand-primary)] px-4 py-3 text-white shadow-[0_8px_20px_rgba(15,23,42,0.12)]">
-          <div className="mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/60">
-            You
-          </div>
-          <div className="whitespace-pre-wrap text-[15px] leading-6.5 text-white">
-            {textContent}
+    return (
+      <div className="flex justify-end">
+        <div className="flex max-w-[78%] flex-col items-end gap-2">
+          <div className="w-full rounded-2xl border border-border bg-muted/50 px-4 py-3">
+            {timestamp ? (
+              <div className="mb-1.5 text-right text-[var(--font-size-xs)] text-muted-foreground">
+                {formatTime(timestamp)}
+              </div>
+            ) : null}
+            <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground">
+              {text}
+            </div>
           </div>
+          {actions ? (
+            <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
+              {actions}
+            </div>
+          ) : null}
         </div>
-        {actions ? (
-          <div className="flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground">
-            {actions}
-          </div>
-        ) : null}
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 UserMessage.displayName = "UserMessage";