@tangle-network/ui 11.24.0 → 11.25.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.25.0
+
+### Minor Changes
+
+- cf29d7e: Chat transcripts can carry more than one person beside the agent, such as a client and an attorney. `ChatMessage`, `UserMessage` and `AgentTimeline` message items take an optional `author` (`ChatAuthor`: `id`, `name`, optional `role` and `avatarUrl`), and `ChatMessage`, `UserMessage` and `AgentTimeline` take the reader's `viewerId`. The reader's own messages keep the end-aligned inverse bubble. Anyone else's sit at the start on a card under a `MessageAuthor` line: avatar (image, or initials on a tone keyed to the author's id), name, and role tag. An agent's author line opens its turn in `AgentTimeline` and is not repeated after each tool row. Without `author`, every component renders exactly the markup it did before. `MessageAuthor`, `isViewerMessage` and `ChatAuthor` are exported from `./chat`, and `ChatAuthor` from `./types`.
+
 ## 11.24.0
 
 ### Minor Changes

package/dist/chat/agent-timeline.d.ts

@@ -1,3 +1,4 @@
+import { ChatAuthor } from "../types/message.js";
 import { ToolPart } from "../types/parts.js";
 import { MessageRole } from "./chat-message.js";
 import { ToolCallData } from "../run/tool-call-feed.js";
@@ -15,6 +16,12 @@ export interface AgentTimelineMessageItem {
    *  timestamp of its own — the turn's user message dates the exchange. */
   timestamp?: Date;
   after?: ReactNode;
+  /**
+   * Who wrote the message, when more than one person shares the transcript.
+   * A person's message is compared with the timeline's `viewerId`; an agent's
+   * author line opens its turn and is not repeated after each tool row.
+   */
+  author?: ChatAuthor;
 }
 export interface AgentTimelineToolItem {
   id: string;
@@ -72,6 +79,11 @@ export interface AgentTimelineProps {
    *  except user messages) behind a "Show N more steps" toggle. Omit to always
    *  show every row. */
   collapseAfter?: number;
+  /**
+   * The reader's participant id. A user message whose `author` has another
+   * id is someone else's: it sits at the start, on a card, under its author.
+   */
+  viewerId?: string;
 }
 /**
  * AgentTimeline — unified mixed-content transcript for agent-backed sandbox
@@ -79,5 +91,5 @@ export interface AgentTimelineProps {
  * as one plain column: prose at the reading size, tool calls as quiet
  * one-liners between the paragraphs, no connector chrome.
  */
-export declare function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter }: AgentTimelineProps): import("react").JSX.Element | null;
+export declare function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter, viewerId }: AgentTimelineProps): import("react").JSX.Element | null;
 //#endregion

package/dist/chat/agent-timeline.js

@@ -1,6 +1,7 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { Markdown } from "../markdown/markdown.js";
+import { MessageAuthor } from "./message-author.js";
 import { UserMessage } from "./user-message.js";
 import { ThinkingIndicator } from "./thinking-indicator.js";
 import { ToolCallGroup, ToolCallStep } from "../run/tool-call-step.js";
@@ -54,8 +55,12 @@ function spacingBefore(prev, next) {
 }
 const ROW_BLEED = "-mx-3";
 const STREAMING_CARET = "[&>:last-child:not(ul,ol)]:after:ml-0.5 [&>:last-child:not(ul,ol)]:after:inline-block [&>:last-child:not(ul,ol)]:after:h-[1em] [&>:last-child:not(ul,ol)]:after:w-0.5 [&>:last-child:not(ul,ol)]:after:animate-pulse [&>:last-child:not(ul,ol)]:after:rounded-full [&>:last-child:not(ul,ol)]:after:bg-muted-foreground [&>:last-child:not(ul,ol)]:after:align-text-bottom [&>:last-child:not(ul,ol)]:after:content-[''] [&>:is(ul,ol):last-child>li:last-child]:after:ml-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:inline-block [&>:is(ul,ol):last-child>li:last-child]:after:h-[1em] [&>:is(ul,ol):last-child>li:last-child]:after:w-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:animate-pulse [&>:is(ul,ol):last-child>li:last-child]:after:rounded-full [&>:is(ul,ol):last-child>li:last-child]:after:bg-muted-foreground [&>:is(ul,ol):last-child>li:last-child]:after:align-text-bottom [&>:is(ul,ol):last-child>li:last-child]:after:content-['']";
-function AssistantMessage({ item }) {
+function AssistantMessage({ item, author }) {
 	return /* @__PURE__ */ jsxs("div", { children: [
+		author && /* @__PURE__ */ jsx(MessageAuthor, {
+			author,
+			className: "mb-1.5"
+		}),
 		item.content && /* @__PURE__ */ jsx(Markdown, {
 			className: cn("tangle-prose text-[length:var(--font-size-base)] leading-[1.5]", item.isStreaming && STREAMING_CARET),
 			children: item.content
@@ -151,7 +156,7 @@ function ArtifactCard({ item }) {
 * as one plain column: prose at the reading size, tool calls as quiet
 * one-liners between the paragraphs, no connector chrome.
 */
-function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter }) {
+function AgentTimeline({ items, isThinking, emptyState, className, renderToolActions, collapseAfter, viewerId }) {
 	const [expanded, setExpanded] = useState(false);
 	if (items.length === 0 && !isThinking) return emptyState ? /* @__PURE__ */ jsx("div", {
 		className: cn("flex h-full items-center justify-center p-4", className),
@@ -180,11 +185,27 @@ function AgentTimeline({ items, isThinking, emptyState, className, renderToolAct
 		renderList = visible;
 		hiddenCount = stepItems.length - limit;
 	}
+	const headedAgentMessages = /* @__PURE__ */ new Set();
+	let speakingAgent;
+	for (const item of renderList) {
+		if (item.kind !== "message") continue;
+		if (item.role === "user") {
+			speakingAgent = void 0;
+			continue;
+		}
+		if (item.author && item.author.id !== speakingAgent) headedAgentMessages.add(item.id);
+		speakingAgent = item.author?.id;
+	}
 	const renderItem = (item) => {
 		if (item.kind === "message") return item.role === "user" ? /* @__PURE__ */ jsx(UserMessage, {
 			content: item.content,
-			timestamp: item.timestamp
-		}) : /* @__PURE__ */ jsx(AssistantMessage, { item });
+			timestamp: item.timestamp,
+			author: item.author,
+			viewerId
+		}) : /* @__PURE__ */ jsx(AssistantMessage, {
+			item,
+			author: headedAgentMessages.has(item.id) ? item.author : void 0
+		});
 		if (item.kind === "tool") return /* @__PURE__ */ jsx(ToolCallStep, {
 			type: item.call.type,
 			label: item.call.label,

package/dist/chat/chat-message.d.ts

@@ -1,3 +1,4 @@
+import { ChatAuthor } from "../types/message.js";
 import { ReactNode } from "react";
 //#region src/chat/chat-message.d.ts
 export type MessageRole = "user" | "assistant" | "system";
@@ -17,6 +18,17 @@ export interface ChatMessageProps {
   assistantLabel?: string;
   /** Hide the role label row entirely */
   hideRoleLabel?: boolean;
+  /**
+   * Who wrote the message, when more than one person shares the transcript.
+   * It replaces the role label with the author's avatar, name and role,
+   * except on the reader's own messages, which keep `userLabel`.
+   */
+  author?: ChatAuthor;
+  /**
+   * The reader's participant id. A user message whose `author` has another
+   * id is someone else's: it sits at the start, on a card, under its author.
+   */
+  viewerId?: string;
 }
-export declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel }: ChatMessageProps): import("react").JSX.Element;
+export declare function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel, assistantLabel, hideRoleLabel, author, viewerId }: ChatMessageProps): import("react").JSX.Element;
 //#endregion

package/dist/chat/chat-message.js

@@ -1,15 +1,19 @@
 import { cn } from "../lib/utils.js";
 import { Markdown } from "../markdown/markdown.js";
+import { MessageAuthor, isViewerMessage } from "./message-author.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-message.tsx
-function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel = "You", assistantLabel = "Agent", hideRoleLabel }) {
+function ChatMessage({ role, content, toolCalls, isStreaming, timestamp, className, userLabel = "You", assistantLabel = "Agent", hideRoleLabel, author, viewerId }) {
 	const isUser = role === "user";
 	const isAssistant = role === "assistant";
+	const fromViewer = isUser && isViewerMessage(author, viewerId);
+	const fromOtherPerson = isUser && !fromViewer;
+	const shownAuthor = fromViewer ? void 0 : author;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex flex-col gap-1", isUser ? "items-end" : "items-start", className),
+		className: cn("flex flex-col gap-1", fromViewer ? "items-end" : "items-start", className),
 		children: [!hideRoleLabel && /* @__PURE__ */ jsxs("div", {
-			className: cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse"),
-			children: [/* @__PURE__ */ jsx("span", {
+			className: cn("flex items-center gap-2 px-1", fromViewer && "flex-row-reverse"),
+			children: [shownAuthor ? /* @__PURE__ */ jsx(MessageAuthor, { author: shownAuthor }) : /* @__PURE__ */ jsx("span", {
 				className: "font-medium text-foreground text-xs",
 				children: isUser ? userLabel : assistantLabel
 			}), timestamp && /* @__PURE__ */ jsx("span", {
@@ -17,7 +21,7 @@ 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", 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)]"),
+			className: cn("min-w-0 max-w-[85%] space-y-1", fromViewer ? "rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background" : fromOtherPerson ? "rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-foreground" : 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-[length:var(--font-size-base)] leading-[var(--line-height-base)]",
 				children: content

package/dist/chat/message-author.d.ts

@@ -0,0 +1,24 @@
+import { ChatAuthor } from "../types/message.js";
+import { HTMLAttributes } from "react";
+//#region src/chat/message-author.d.ts
+/**
+ * Whether the reader wrote a human message. A message without an author is
+ * the reader's, which keeps a two-party transcript as it was. A message with
+ * an author is the reader's only when that author is `viewerId`; with no
+ * `viewerId`, every authored message belongs to someone else.
+ */
+export declare function isViewerMessage(author: ChatAuthor | undefined, viewerId: string | undefined): boolean;
+export interface MessageAuthorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  author: ChatAuthor;
+}
+/**
+ * The line above a message in a transcript with several participants: the
+ * author's avatar, name and, when given, their role as a tag.
+ *
+ * The avatar's tone comes from the author's id, so a participant keeps one
+ * colour for the whole thread and in every product. Tones can repeat between
+ * participants, so the name is always shown beside it. The avatar repeats the
+ * visible name and is hidden from assistive technology.
+ */
+export declare function MessageAuthor({ author, className, ...props }: MessageAuthorProps): import("react").JSX.Element;
+//#endregion

package/dist/chat/message-author.js

@@ -0,0 +1,53 @@
+import { cn } from "../lib/utils.js";
+import { toneFor } from "../primitives/tone.js";
+import { Tag } from "../primitives/tag.js";
+import { IconTile } from "../primitives/icon-tile.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/message-author.tsx
+/**
+* Whether the reader wrote a human message. A message without an author is
+* the reader's, which keeps a two-party transcript as it was. A message with
+* an author is the reader's only when that author is `viewerId`; with no
+* `viewerId`, every authored message belongs to someone else.
+*/
+function isViewerMessage(author, viewerId) {
+	return author === void 0 || author.id === viewerId;
+}
+/**
+* The line above a message in a transcript with several participants: the
+* author's avatar, name and, when given, their role as a tag.
+*
+* The avatar's tone comes from the author's id, so a participant keeps one
+* colour for the whole thread and in every product. Tones can repeat between
+* participants, so the name is always shown beside it. The avatar repeats the
+* visible name and is hidden from assistive technology.
+*/
+function MessageAuthor({ author, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-message-author": "",
+		className: cn("flex min-w-0 max-w-full items-center gap-2", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(IconTile, {
+				size: "xs",
+				src: author.avatarUrl,
+				name: author.name,
+				tone: toneFor(author.id),
+				className: "rounded-full"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate font-medium text-foreground text-sm",
+				title: author.name,
+				children: author.name
+			}),
+			author.role ? /* @__PURE__ */ jsx(Tag, {
+				size: "sm",
+				emphasis: "outline",
+				className: "max-w-[50%]",
+				children: author.role
+			}) : null
+		]
+	});
+}
+//#endregion
+export { MessageAuthor, isViewerMessage };

package/dist/chat/user-message.d.ts

@@ -1,4 +1,4 @@
-import { SessionMessage } from "../types/message.js";
+import { ChatAuthor, SessionMessage } from "../types/message.js";
 import { SessionPart } from "../types/parts.js";
 import { ReactNode } from "react";
 //#region src/chat/user-message.d.ts
@@ -10,10 +10,20 @@ export interface UserMessageProps {
   content?: string;
   timestamp?: Date;
   actions?: ReactNode;
+  /**
+   * Who wrote the message, when more than one person shares the transcript.
+   * Omit it in a two-party chat: the message renders as the reader's.
+   */
+  author?: ChatAuthor;
+  /**
+   * The reader's participant id. A message whose `author` has another id is
+   * someone else's: it sits at the start, on a card, under its author.
+   */
+  viewerId?: string;
 }
 /**
  * User speech retains the inverse-theme bubble and direct-content contract.
  * Application notes interrupt the bubble in source order, outside its attribution.
  */
-export declare const UserMessage: import("react").MemoExoticComponent<({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => import("react").JSX.Element | null>;
+export declare const UserMessage: import("react").MemoExoticComponent<({ message: _message, parts, content, timestamp, actions, author, viewerId }: UserMessageProps) => import("react").JSX.Element | null>;
 //#endregion

package/dist/chat/user-message.js

@@ -1,4 +1,5 @@
 import { SyntheticText, userTextSegments } from "./synthetic-text.js";
+import { MessageAuthor, isViewerMessage } from "./message-author.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/user-message.tsx
@@ -8,9 +9,9 @@ function formatTime(date) {
 		minute: "2-digit"
 	});
 }
-function MessageActions({ children }) {
+function MessageActions({ children, align = "end" }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground",
+		className: `flex flex-wrap items-center ${align === "end" ? "justify-end" : "justify-start"} gap-1.5 text-xs text-muted-foreground`,
 		children
 	});
 }
@@ -34,28 +35,63 @@ function UserBubble({ text, timestamp, actions }) {
 	});
 }
 /**
+* Another person's speech: start-aligned under its author, on a card rather
+* than the reader's inverse fill, so "mine" and "theirs" differ before the
+* names are read. The timestamp is revealed on the bubble's far side.
+*/
+function OtherPersonBubble({ text, timestamp, actions, author }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-start",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "group flex min-w-0 max-w-[78%] flex-col items-start gap-1.5",
+			children: [
+				author ? /* @__PURE__ */ jsx(MessageAuthor, { author }) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative min-w-0 max-w-full rounded-2xl border border-border bg-card px-4 py-3 text-foreground",
+					children: [timestamp ? /* @__PURE__ */ jsx("span", {
+						"data-user-message-time": "",
+						className: "pointer-events-none absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+						children: formatTime(timestamp)
+					}) : null, /* @__PURE__ */ jsx("div", {
+						className: "break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]",
+						children: text
+					})]
+				}),
+				actions ? /* @__PURE__ */ jsx(MessageActions, {
+					align: "start",
+					children: actions
+				}) : null
+			]
+		})
+	});
+}
+/**
 * User speech retains the inverse-theme bubble and direct-content contract.
 * Application notes interrupt the bubble in source order, outside its attribution.
 */
-const UserMessage = memo(({ message: _message, parts, content, timestamp, actions }) => {
-	if (content != null) return content.trim() ? /* @__PURE__ */ jsx(UserBubble, {
-		text: content,
+const UserMessage = memo(({ message: _message, parts, content, timestamp, actions, author, viewerId }) => {
+	const other = isViewerMessage(author, viewerId) ? void 0 : author;
+	const bubble = (text, bubbleActions, headed = true, key) => other ? /* @__PURE__ */ jsx(OtherPersonBubble, {
+		text,
+		timestamp,
+		actions: bubbleActions,
+		author: headed ? other : void 0
+	}, key) : /* @__PURE__ */ jsx(UserBubble, {
+		text,
 		timestamp,
-		actions
-	}) : null;
+		actions: bubbleActions
+	}, key);
+	if (content != null) return content.trim() ? bubble(content, actions) : null;
 	const segments = userTextSegments(parts ?? []);
 	if (segments.length === 0) return null;
-	if (segments.length === 1 && !segments[0].synthetic) return /* @__PURE__ */ jsx(UserBubble, {
-		text: segments[0].text,
-		timestamp,
-		actions
-	});
+	if (segments.length === 1 && !segments[0].synthetic) return bubble(segments[0].text, actions);
+	const firstSpoken = segments.find((segment) => !segment.synthetic);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-2",
-		children: [segments.map((segment) => segment.synthetic ? /* @__PURE__ */ jsx(SyntheticText, { text: segment.text }, segment.index) : /* @__PURE__ */ jsx(UserBubble, {
-			text: segment.text,
-			timestamp
-		}, segment.index)), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]
+		children: [segments.map((segment) => segment.synthetic ? /* @__PURE__ */ jsx(SyntheticText, { text: segment.text }, segment.index) : bubble(segment.text, void 0, segment === firstSpoken, segment.index)), actions ? /* @__PURE__ */ jsx(MessageActions, {
+			align: other ? "start" : "end",
+			children: actions
+		}) : null]
 	});
 });
 UserMessage.displayName = "UserMessage";

package/dist/chat.d.ts

@@ -1,7 +1,9 @@
+import { ChatAuthor } from "./types/message.js";
 import { ChatContainer, ChatContainerProps } from "./chat/chat-container.js";
 import { MessageList, MessageListProps } from "./chat/message-list.js";
 import { UserMessage, UserMessageProps } from "./chat/user-message.js";
 import { ChatMessage, ChatMessageProps, MessageRole } from "./chat/chat-message.js";
+import { MessageAuthor, MessageAuthorProps, isViewerMessage } from "./chat/message-author.js";
 import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indicator.js";
 import { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem } from "./chat/agent-timeline.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 };
+export { AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, type ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, ThinkingIndicator, type ThinkingIndicatorProps, UserMessage, type UserMessageProps, isViewerMessage };

package/dist/chat.js

@@ -1,7 +1,8 @@
+import { MessageAuthor, isViewerMessage } from "./chat/message-author.js";
 import { UserMessage } from "./chat/user-message.js";
 import { MessageList } from "./chat/message-list.js";
 import { ThinkingIndicator } from "./chat/thinking-indicator.js";
 import { AgentTimeline } from "./chat/agent-timeline.js";
 import { ChatContainer } from "./chat/chat-container.js";
 import { ChatMessage } from "./chat/chat-message.js";
-export { AgentTimeline, ChatContainer, ChatMessage, MessageList, ThinkingIndicator, UserMessage };
+export { AgentTimeline, ChatContainer, ChatMessage, MessageAuthor, MessageList, ThinkingIndicator, UserMessage, isViewerMessage };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
 import { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, SessionUser, UserMenu, UserMenuProps } from "./auth/auth.js";
 import { LoginLayout, LoginLayoutProps } from "./auth/login-layout.js";
 import "./auth.js";
-import { SessionMessage } from "./types/message.js";
+import { ChatAuthor, SessionMessage } from "./types/message.js";
 import { ReasoningPart, SessionPart, TextPart, ToolPart, ToolState, ToolStatus, ToolTime } from "./types/parts.js";
 import { AgentBranding } from "./types/branding.js";
 import { CustomToolRenderer, DisplayVariant, ToolDisplayMetadata } from "./types/tool-display.js";
@@ -13,6 +13,7 @@ import { ChatContainer, ChatContainerProps } from "./chat/chat-container.js";
 import { MessageList, MessageListProps } from "./chat/message-list.js";
 import { UserMessage, UserMessageProps } from "./chat/user-message.js";
 import { ChatMessage, ChatMessageProps, MessageRole } from "./chat/chat-message.js";
+import { MessageAuthor, MessageAuthorProps, isViewerMessage } from "./chat/message-author.js";
 import { ThinkingIndicator, ThinkingIndicatorProps } from "./chat/thinking-indicator.js";
 import { ToolCallStatus, ToolCallType } from "./run/tool-call-step.js";
 import { FeedSegment, ToolCallData, ToolCallFeed, ToolCallFeedProps, parseToolEvent } from "./run/tool-call-feed.js";
@@ -114,4 +115,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
 import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
 import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
 import "./redaction.js";
-export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/index.js

@@ -71,6 +71,7 @@ import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES } from "./openui/schema-data
 import { findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui-schema.js";
 import { OpenUIArtifactRenderer } from "./openui/openui-artifact-renderer.js";
 import { RunGroup } from "./run/run-group.js";
+import { MessageAuthor, isViewerMessage } from "./chat/message-author.js";
 import { UserMessage } from "./chat/user-message.js";
 import { MessageList } from "./chat/message-list.js";
 import { ThinkingIndicator } from "./chat/thinking-indicator.js";
@@ -98,4 +99,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { RedactedDocument } from "./redaction/redacted-document.js";
-export { AgentTimeline, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
+export { AgentTimeline, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };

package/dist/types/message.d.ts

@@ -12,4 +12,23 @@ export interface SessionMessage {
   /** Monotonically increasing insertion index for stable ordering. */
   _insertionIndex?: number;
 }
+/**
+ * Who wrote a chat message, for a transcript with more than one person beside
+ * the agent: a client, an attorney and the agent in one thread.
+ */
+export interface ChatAuthor {
+  /**
+   * Stable participant id. A transcript's `viewerId` is compared with it to
+   * tell the reader's own messages apart, and it keys the avatar's tone.
+   */
+  id: string;
+  name: string;
+  /**
+   * The participant's part in the conversation, shown as a tag beside the
+   * name, such as "Attorney". Unrelated to the message's `role`.
+   */
+  role?: string;
+  /** Falls back to initials when absent or when the image fails to load. */
+  avatarUrl?: string;
+}
 //#endregion

package/dist/types.d.ts

@@ -1,6 +1,6 @@
-import { SessionMessage } from "./types/message.js";
+import { ChatAuthor, SessionMessage } from "./types/message.js";
 import { ReasoningPart, SessionPart, TextPart, ToolPart, ToolState, ToolStatus, ToolTime } from "./types/parts.js";
 import { AgentBranding } from "./types/branding.js";
 import { CustomToolRenderer, DisplayVariant, ToolDisplayMetadata } from "./types/tool-display.js";
 import { FinalTextPart, GroupedMessage, MessageRun, MessageUser, Run, RunStats, ToolCategory } from "./types/run.js";
-export { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime };
+export { AgentBranding, ChatAuthor, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.24.0",
+  "version": "11.25.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.15.6",
+    "@tangle-network/brand": "^1.17.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/chat/agent-timeline.tsx

@@ -9,11 +9,13 @@ import {
 import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { type MessageRole } from "./chat-message";
+import { MessageAuthor } from "./message-author";
 import { UserMessage } from "./user-message";
 import { Markdown } from "../markdown/markdown";
 import { ThinkingIndicator } from "./thinking-indicator";
 import { type ToolCallData } from "../run/tool-call-feed";
 import { ToolCallGroup, ToolCallStep } from "../run/tool-call-step";
+import type { ChatAuthor } from "../types/message";
 import type { ToolPart } from "../types/parts";
 
 export type AgentTimelineTone = "default" | "info" | "success" | "warning" | "error";
@@ -29,6 +31,12 @@ export interface AgentTimelineMessageItem {
    *  timestamp of its own — the turn's user message dates the exchange. */
   timestamp?: Date;
   after?: ReactNode;
+  /**
+   * Who wrote the message, when more than one person shares the transcript.
+   * A person's message is compared with the timeline's `viewerId`; an agent's
+   * author line opens its turn and is not repeated after each tool row.
+   */
+  author?: ChatAuthor;
 }
 
 export interface AgentTimelineToolItem {
@@ -99,6 +107,11 @@ export interface AgentTimelineProps {
    *  except user messages) behind a "Show N more steps" toggle. Omit to always
    *  show every row. */
   collapseAfter?: number;
+  /**
+   * The reader's participant id. A user message whose `author` has another
+   * id is someone else's: it sits at the start, on a card, under its author.
+   */
+  viewerId?: string;
 }
 
 const TONE_STYLES: Record<AgentTimelineTone, { card: string; text: string; supportingText: string; icon: typeof Info }> = {
@@ -169,9 +182,10 @@ const STREAMING_CARET =
   "[&>:last-child:not(ul,ol)]:after:ml-0.5 [&>:last-child:not(ul,ol)]:after:inline-block [&>:last-child:not(ul,ol)]:after:h-[1em] [&>:last-child:not(ul,ol)]:after:w-0.5 [&>:last-child:not(ul,ol)]:after:animate-pulse [&>:last-child:not(ul,ol)]:after:rounded-full [&>:last-child:not(ul,ol)]:after:bg-muted-foreground [&>:last-child:not(ul,ol)]:after:align-text-bottom [&>:last-child:not(ul,ol)]:after:content-[''] " +
   "[&>:is(ul,ol):last-child>li:last-child]:after:ml-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:inline-block [&>:is(ul,ol):last-child>li:last-child]:after:h-[1em] [&>:is(ul,ol):last-child>li:last-child]:after:w-0.5 [&>:is(ul,ol):last-child>li:last-child]:after:animate-pulse [&>:is(ul,ol):last-child>li:last-child]:after:rounded-full [&>:is(ul,ol):last-child>li:last-child]:after:bg-muted-foreground [&>:is(ul,ol):last-child>li:last-child]:after:align-text-bottom [&>:is(ul,ol):last-child>li:last-child]:after:content-['']";
 
-function AssistantMessage({ item }: { item: AgentTimelineMessageItem }) {
+function AssistantMessage({ item, author }: { item: AgentTimelineMessageItem; author?: ChatAuthor }) {
   return (
     <div>
+      {author && <MessageAuthor author={author} className="mb-1.5" />}
       {item.content && (
         <Markdown
           // `length:` types the token: a bare `text-[var(--x)]` compiles to a
@@ -281,6 +295,7 @@ export function AgentTimeline({
   className,
   renderToolActions,
   collapseAfter,
+  viewerId,
 }: AgentTimelineProps) {
   const [expanded, setExpanded] = useState(false);
 
@@ -322,12 +337,27 @@ export function AgentTimeline({
     hiddenCount = stepItems.length - limit;
   }
 
+  // An agent's turn is often several prose items split by tool rows. Its
+  // author line goes on the first of them, and again only when a person
+  // speaks or a different agent takes over.
+  const headedAgentMessages = new Set<string>();
+  let speakingAgent: string | undefined;
+  for (const item of renderList) {
+    if (item.kind !== "message") continue;
+    if (item.role === "user") {
+      speakingAgent = undefined;
+      continue;
+    }
+    if (item.author && item.author.id !== speakingAgent) headedAgentMessages.add(item.id);
+    speakingAgent = item.author?.id;
+  }
+
   const renderItem = (item: AgentTimelineItem): ReactNode => {
     if (item.kind === "message") {
       return item.role === "user" ? (
-        <UserMessage content={item.content} timestamp={item.timestamp} />
+        <UserMessage content={item.content} timestamp={item.timestamp} author={item.author} viewerId={viewerId} />
       ) : (
-        <AssistantMessage item={item} />
+        <AssistantMessage item={item} author={headedAgentMessages.has(item.id) ? item.author : undefined} />
       );
     }