@tangle-network/ui 11.11.6 → 11.11.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.11.7
+
+### Patch Changes
+
+- cad5ba2: Use inverse theme colors for user messages and leave assistant prose unboxed across the shared chat renderers.
+
 ## 11.11.6
 
 ### Patch Changes

package/dist/{chat-DXidmE_w.js → chat-8WnrR5AQ.js}

@@ -17,8 +17,7 @@ function formatTime$1(date) {
 	});
 }
 /**
-* The single user message bubble — a quiet, right-aligned card with a subtle
-* semantic border (no loud fill, no uppercase label). The timestamp sits
+* The single user message bubble uses inverse theme colors. The timestamp sits
 * beside the bubble and appears on hover, so it costs no height. Used by both
 * the run/message list (session-model `parts`) and AgentTimeline (direct
 * `content`/`timestamp`).
@@ -31,13 +30,13 @@ const UserMessage = memo(({ message: _message, parts, content, timestamp, action
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "group flex min-w-0 max-w-[78%] flex-col items-end gap-2",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "relative w-full min-w-0 rounded-2xl border border-border bg-card px-4 py-3",
+				className: "relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background",
 				children: [timestamp ? /* @__PURE__ */ jsx("span", {
 					"data-user-message-time": "",
 					className: "pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
 					children: formatTime$1(timestamp)
 				}) : null, /* @__PURE__ */ jsx("div", {
-					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground",
+					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]",
 					children: text
 				})]
 			}), actions ? /* @__PURE__ */ jsx("div", {
@@ -639,6 +638,7 @@ ChatContainer.displayName = "ChatContainer";
 //#region src/chat/chat-message.tsx
 function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel = "You", assistantLabel = "Agent", hideRoleLabel }) {
 	const isUser = role === "user";
+	const isAssistant = role === "assistant";
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex flex-col gap-1", isUser ? "items-end" : "items-start", className),
 		children: [!hideRoleLabel && /* @__PURE__ */ jsxs("div", {
@@ -651,9 +651,9 @@ function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, classNa
 				children: formatTime(timestamp)
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: cn("min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border", "px-[var(--chat-message-px)] py-[var(--chat-message-py)]", isUser ? "border-border bg-muted/50" : "border-border bg-card"),
+			className: cn("min-w-0 max-w-[85%] space-y-1", isUser ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background" : isAssistant ? "text-foreground" : "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"),
 			children: [isUser ? /* @__PURE__ */ jsx("div", {
-				className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground",
+				className: "whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)]",
 				children: content
 			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [content && /* @__PURE__ */ jsx(Markdown, {
 				className: "tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]",

package/dist/chat.d.ts

@@ -1,2 +1,2 @@
-import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-D-9c3r-Y.js";
+import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-Cs7j8V7l.js";
 export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps };

package/dist/chat.js

@@ -1,2 +1,2 @@
-import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-DXidmE_w.js";
+import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-8WnrR5AQ.js";
 export { AgentTimeline, ChatContainer, ChatMessage, MessageList, ThinkingIndicator, UserMessage };

package/dist/{index-D-9c3r-Y.d.ts → index-Cs7j8V7l.d.ts}

@@ -87,8 +87,7 @@ interface UserMessageProps {
   actions?: ReactNode;
 }
 /**
- * The single user message bubble — a quiet, right-aligned card with a subtle
- * semantic border (no loud fill, no uppercase label). The timestamp sits
+ * The single user message bubble uses inverse theme colors. The timestamp sits
  * beside the bubble and appears on hover, so it costs no height. Used by both
  * the run/message list (session-model `parts`) and AgentTimeline (direct
  * `content`/`timestamp`).

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { n as DisplayVariant, r as ToolDisplayMetadata, t as CustomToolRenderer
 import { a as Run, i as MessageUser, n as GroupedMessage, o as RunStats, r as MessageRun, s as ToolCategory, t as FinalTextPart } from "./run-OyWmIDqu.js";
 import { n as MarkdownProps, r as getSanitizedMarkdownHeadingIdFromRawFragment, t as Markdown } from "./markdown-C0atSabr.js";
 import { _ as OpenUITableNode, a as OpenUIBadgeNode, c as OpenUIComponentNode, d as OpenUIKeyValueNode, f as OpenUIMarkdownNode, g as OpenUIStatNode, h as OpenUIStackNode, i as OpenUIArtifactRendererProps, l as OpenUIGridNode, m as OpenUISeparatorNode, n as OpenUIActionsNode, o as OpenUICardNode, p as OpenUIPrimitive, r as OpenUIArtifactRenderer, s as OpenUICodeNode, t as OpenUIAction, u as OpenUIHeadingNode, v as OpenUITextNode } from "./openui-artifact-renderer-fkBQaoLO.js";
-import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-D-9c3r-Y.js";
+import { _ as UserMessageProps, a as AgentTimelineMessageItem, b as ChatContainer, c as AgentTimelineTone, d as ThinkingIndicator, f as ThinkingIndicatorProps, g as UserMessage, h as MessageRole, i as AgentTimelineItem, l as AgentTimelineToolGroupItem, m as ChatMessageProps, n as AgentTimelineArtifactItem, o as AgentTimelineProps, p as ChatMessage, r as AgentTimelineCustomItem, s as AgentTimelineStatusItem, t as AgentTimeline, u as AgentTimelineToolItem, v as MessageList, x as ChatContainerProps, y as MessageListProps } from "./index-Cs7j8V7l.js";
 import { a as parseToolEvent, i as ToolCallFeedProps, n as ToolCallData, o as ToolCallStatus, r as ToolCallFeed, s as ToolCallType, t as FeedSegment } from "./tool-call-feed-BeB1_4pX.js";
 import { n as ArtifactPaneProps, t as ArtifactPane } from "./artifact-pane-BL_DFWNl.js";
 import { C as FileNode, D as filterFileTree, E as FileTreeVisibilityOptions, S as RichFileTreeThemeVars, T as FileTreeProps, _ as parseCsv, a as getCodeLanguage, b as RichFileTreeGitStatus, c as resolveFilePreviewKind, d as FileTabData, f as FileTabs, g as FilePreviewProps, h as FilePreview, i as fileExtension, l as FileArtifactPane, m as CSV_PREVIEW_ROW_LIMIT, n as FilePreviewKind, o as getFormatLabel, p as FileTabsProps, r as detectFileFormat, s as getSyntaxLanguage, t as FileFormat, u as FileArtifactPaneProps, v as RichFileTree, w as FileTree, x as RichFileTreeProps, y as RichFileTreeGitEntry } from "./index-CyGSLGVF.js";

package/dist/index.js

@@ -18,7 +18,7 @@ import { a as RunRowStatusDot, i as RunRowShell, o as ExpandedToolDetail, r as I
 import { n as getSanitizedMarkdownHeadingIdFromRawFragment, t as Markdown } from "./markdown-PywkQXWk.js";
 import { n as InlineThinkingItem, t as RunGroup } from "./run-group-COUIsZ_x.js";
 import { t as OpenUIArtifactRenderer } from "./openui-artifact-renderer-DjLPuaP9.js";
-import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-DXidmE_w.js";
+import { a as MessageList, i as ThinkingIndicator, n as ChatContainer, o as UserMessage, r as AgentTimeline, t as ChatMessage } from "./chat-8WnrR5AQ.js";
 import { t as LiveDuration } from "./run-ZsIKPA6J.js";
 import { n as parseToolEvent, t as ToolCallFeed } from "./tool-call-feed-DNADpFyJ.js";
 import "./openui.js";

package/package.json

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

package/src/chat/chat-message.tsx

@@ -1,5 +1,5 @@
 /**
- * ChatMessage — single message bubble in the conversation.
+ * ChatMessage — one message in the conversation.
  *
  * Supports user messages (plain text) and assistant messages
  * (rich markdown with inline tool call activity).
@@ -41,6 +41,7 @@ export function ChatMessage({
   hideRoleLabel,
 }: ChatMessageProps) {
   const isUser = role === "user";
+  const isAssistant = role === "assistant";
 
   return (
     <div
@@ -63,19 +64,18 @@ export function ChatMessage({
         </div>
       )}
 
-      {/* Bubble */}
       <div
         className={cn(
-          "min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border",
-          "px-[var(--chat-message-px)] py-[var(--chat-message-py)]",
+          "min-w-0 max-w-[85%] space-y-1",
           isUser
-            ? "border-border bg-muted/50"
-            : "border-border bg-card",
+            ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background"
+            : isAssistant
+              ? "text-foreground"
+              : "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]",
         )}
       >
-        {/* Message body */}
         {isUser ? (
-          <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground">
+          <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)]">
             {content}
           </div>
         ) : (

package/src/chat/user-message.test.tsx

@@ -3,13 +3,13 @@ import { describe, expect, it } from "vitest"
 import { UserMessage } from "./user-message"
 
 describe("UserMessage", () => {
-  it("renders the text in a bordered card that wraps in narrow panes", () => {
+  it("renders inverse text in a bubble that wraps in narrow panes", () => {
     const { container } = render(<UserMessage content="Run the tests." />)
     expect(screen.getByText("Run the tests.")).toBeInTheDocument()
     const bubble = container.querySelector(".rounded-2xl")
     expect(bubble).not.toBeNull()
-    expect(bubble!.className).toContain("bg-card")
-    expect(bubble!.className).toContain("border-border")
+    expect(bubble!.className).toContain("bg-foreground")
+    expect(bubble!.className).toContain("text-background")
     expect(container.querySelector(".group")?.className).toContain(
       "min-w-0",
     )

package/src/chat/user-message.tsx

@@ -17,8 +17,7 @@ function formatTime(date: Date): string {
 }
 
 /**
- * The single user message bubble — a quiet, right-aligned card with a subtle
- * semantic border (no loud fill, no uppercase label). The timestamp sits
+ * The single user message bubble uses inverse theme colors. The timestamp sits
  * beside the bubble and appears on hover, so it costs no height. Used by both
  * the run/message list (session-model `parts`) and AgentTimeline (direct
  * `content`/`timestamp`).
@@ -38,7 +37,7 @@ export const UserMessage = memo(
       <div className="flex justify-end">
         <div className="group flex min-w-0 max-w-[78%] flex-col items-end gap-2">
           <div
-            className="relative w-full min-w-0 rounded-2xl border border-border bg-card px-4 py-3"
+            className="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"
           >
             {timestamp ? (
               <span
@@ -48,7 +47,7 @@ export const UserMessage = memo(
                 {formatTime(timestamp)}
               </span>
             ) : null}
-            <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5] text-foreground">
+            <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]">
               {text}
             </div>
           </div>