@tangle-network/ui 11.24.0 → 11.26.0

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";
@@ -81,7 +82,11 @@ import { LiveDuration } from "./run/run-item-primitives.js";
 import { ToolCallFeed, parseToolEvent } from "./run/tool-call-feed.js";
 import { FileTree, filterFileTree } from "./files/file-tree.js";
 import { RichFileTree } from "./files/rich-file-tree.js";
+import { FileCard } from "./files/file-card.js";
+import { configurePdfViewer } from "./files/pdf-loader.js";
+import { PdfViewer } from "./files/pdf-viewer.js";
 import { CSV_PREVIEW_ROW_LIMIT, FilePreview, parseCsv } from "./files/file-preview.js";
+import { FileList } from "./files/file-list.js";
 import { FileTabs } from "./files/file-tabs.js";
 import { FileArtifactPane } from "./files/file-artifact-pane.js";
 import { AuthHeader, GitHubLoginButton, UserMenu } from "./auth/auth.js";
@@ -98,4 +103,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, FileCard, FileList, 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, PdfViewer, 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, configurePdfViewer, 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/lib/optional-peer.js

@@ -0,0 +1,29 @@
+//#region src/lib/optional-peer.ts
+/**
+* Shared handling for optional peers that an entry reaches through a dynamic
+* `import()`: `./editor` for tiptap, yjs and Hocuspocus, `./files` for
+* pdfjs-dist. `scripts/validate-dist.mjs` holds the rules these helpers serve.
+*/
+/** The messages a bundler or a runtime gives for a module it cannot resolve. */
+const RESOLUTION_FAILURE = /could not resolve|cannot find (?:module|package)|can't resolve|failed to resolve|module not found/i;
+/**
+* True when the rejection says the package is not installed. Only such an
+* error gets the install list: a transient chunk-fetch failure that reads as
+* "install the peers" sends the reader to the wrong fix. An error this
+* predicate does not match keeps its own message, so it can only
+* under-report.
+*/
+function isMissingPeerError(error) {
+	return error instanceof Error && RESOLUTION_FAILURE.test(error.message);
+}
+/**
+* Hands an `import()` rejection on unchanged. esbuild reports an unresolvable
+* literal `import()` as a build error and defers it to run time only when the
+* call carries a `.catch()`, so every peer import attaches this handler. It
+* changes nothing at run time.
+*/
+function rethrow(error) {
+	throw error;
+}
+//#endregion
+export { isMissingPeerError, rethrow };

package/dist/primitives.d.ts

@@ -1,5 +1,7 @@
 import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
 import { ArtifactPane, ArtifactPaneProps } from "./primitives/artifact-pane.js";
+import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
+import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardTitleProps } from "./primitives/card.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./primitives/alert-dialog.js";
@@ -40,10 +42,8 @@ import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
 import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
 import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
 import { Pagination, PaginationProps } from "./primitives/pagination.js";
-import { CATEGORY_TONES, CategoryTone, TONE_CLASSES, Tone, ToneClasses, toneFor } from "./primitives/tone.js";
 import { Tag, TagProps } from "./primitives/tag.js";
 import { Chip, ChipProps } from "./primitives/chip.js";
-import { IconTile, IconTileProps, initialsOf } from "./primitives/icon-tile.js";
 import { Metric, MetricProps, MetricStrip, MetricStripProps } from "./primitives/metric-strip.js";
 import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
 import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";

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.26.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,13 +149,14 @@
   "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",
     "@tiptap/react": ">=3.20.4 <4.0.0",
     "@tiptap/starter-kit": ">=3.20.4 <4.0.0",
     "nanostores": ">=0.11.3 <2.0.0",
+    "pdfjs-dist": ">=6.0.0 <7.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-router": "^7 || ^8",
@@ -191,6 +192,9 @@
     },
     "react-router": {
       "optional": true
+    },
+    "pdfjs-dist": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -208,6 +212,7 @@
     "@types/turndown": "^5.0.6",
     "ajv": "8.17.1",
     "nanostores": "^1.5.4",
+    "pdfjs-dist": "^6.4.299",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-router": "^8.4.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} />
       );
     }
 

package/src/chat/chat-message.tsx

@@ -2,12 +2,17 @@
  * ChatMessage — one message in the conversation.
  *
  * Supports user messages (plain text) and assistant messages
- * (rich markdown with inline tool call activity).
+ * (rich markdown with inline tool call activity). With `author` and
+ * `viewerId` it renders a transcript shared by several people: the reader's
+ * own messages stay at the end, everyone else's sit at the start under
+ * their author.
  */
 
 import { type ReactNode } from "react";
 import { cn } from "../lib/utils";
 import { Markdown } from "../markdown/markdown";
+import type { ChatAuthor } from "../types/message";
+import { isViewerMessage, MessageAuthor } from "./message-author";
 
 export type MessageRole = "user" | "assistant" | "system";
 
@@ -27,6 +32,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 function ChatMessage({
@@ -39,23 +55,32 @@ export function ChatMessage({
   userLabel = "You",
   assistantLabel = "Agent",
   hideRoleLabel,
+  author,
+  viewerId,
 }: ChatMessageProps) {
   const isUser = role === "user";
   const isAssistant = role === "assistant";
+  const fromViewer = isUser && isViewerMessage(author, viewerId);
+  const fromOtherPerson = isUser && !fromViewer;
+  const shownAuthor = fromViewer ? undefined : author;
 
   return (
     <div
       className={cn(
         "flex flex-col gap-1",
-        isUser ? "items-end" : "items-start",
+        fromViewer ? "items-end" : "items-start",
         className,
       )}
     >
       {!hideRoleLabel && (
-        <div className={cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse")}>
-          <span className="font-medium text-foreground text-xs">
-            {isUser ? userLabel : assistantLabel}
-          </span>
+        <div className={cn("flex items-center gap-2 px-1", fromViewer && "flex-row-reverse")}>
+          {shownAuthor ? (
+            <MessageAuthor author={shownAuthor} />
+          ) : (
+            <span className="font-medium text-foreground text-xs">
+              {isUser ? userLabel : assistantLabel}
+            </span>
+          )}
           {timestamp && (
             <span className="text-muted-foreground text-xs">
               {formatTime(timestamp)}
@@ -67,11 +92,13 @@ export function ChatMessage({
       <div
         className={cn(
           "min-w-0 max-w-[85%] space-y-1",
-          isUser
+          fromViewer
             ? "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)]",
+            : 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)]",
         )}
       >
         {isUser ? (

package/src/chat/index.ts

@@ -2,6 +2,8 @@ export { ChatContainer, type ChatContainerProps } from "./chat-container";
 export { MessageList, type MessageListProps } from "./message-list";
 export { UserMessage, type UserMessageProps } from "./user-message";
 export { ChatMessage, type ChatMessageProps, type MessageRole } from "./chat-message";
+export { MessageAuthor, isViewerMessage, type MessageAuthorProps } from "./message-author";
+export type { ChatAuthor } from "../types/message";
 export { ThinkingIndicator, type ThinkingIndicatorProps } from "./thinking-indicator";
 export {
   AgentTimeline,

package/src/chat/message-author.stories.tsx

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AgentTimeline, type AgentTimelineItem } from './agent-timeline'
+import { ChatMessage } from './chat-message'
+import { MessageAuthor } from './message-author'
+import type { ChatAuthor } from '../types/message'
+
+const client: ChatAuthor = { id: 'client-maria-lopez', name: 'Maria Lopez', role: 'Client' }
+const attorney: ChatAuthor = { id: 'attorney-jane-doe', name: 'Jane Doe', role: 'Attorney' }
+const agent: ChatAuthor = { id: 'agent-intake', name: 'Intake assistant', role: 'AI' }
+
+const NOW = Date.now()
+const t = (offsetMinutes: number) => new Date(NOW - offsetMinutes * 60 * 1000)
+
+const intakeThread: AgentTimelineItem[] = [
+  {
+    id: 'm1',
+    kind: 'message',
+    role: 'user',
+    author: client,
+    timestamp: t(42),
+    content:
+      'My landlord kept my $2,400 security deposit and never sent an itemized list. I moved out on August 31. What can I do?',
+  },
+  {
+    id: 'm2',
+    kind: 'message',
+    role: 'assistant',
+    author: agent,
+    content:
+      'In California a landlord has 21 days after move-out to return the deposit or send an itemized statement of deductions. That window closed on September 21.\n\nThis looks like a case an attorney should review, so I have shared your summary with Jane Doe.',
+  },
+  {
+    id: 'tool-1',
+    kind: 'tool',
+    call: {
+      id: 'tc-1',
+      type: 'write',
+      label: 'Write',
+      status: 'success',
+      detail: 'intake/deposit-dispute-summary.md',
+    },
+  },
+  {
+    id: 'm3',
+    kind: 'message',
+    role: 'assistant',
+    author: agent,
+    content: 'The summary includes your lease dates and the deposit amount.',
+  },
+  {
+    id: 'm4',
+    kind: 'message',
+    role: 'user',
+    author: attorney,
+    timestamp: t(30),
+    content: 'Hi Maria, I am Jane. Did you give the landlord a forwarding address in writing?',
+  },
+  {
+    id: 'm5',
+    kind: 'message',
+    role: 'user',
+    author: client,
+    timestamp: t(27),
+    content: 'Yes, I emailed it to the property manager on August 28.',
+  },
+  {
+    id: 'm6',
+    kind: 'message',
+    role: 'assistant',
+    author: agent,
+    content: 'I added the August 28 email to the case file.',
+  },
+  {
+    id: 'm7',
+    kind: 'message',
+    role: 'user',
+    author: attorney,
+    timestamp: t(20),
+    content: 'Thanks. I will draft a demand letter today, and you will have it to review by 5pm.',
+  },
+]
+
+const meta: Meta<typeof AgentTimeline> = {
+  title: 'Chat/Multi-party transcript',
+  component: AgentTimeline,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen bg-[var(--bg-root)]">
+        <div className="mx-auto max-w-3xl">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof AgentTimeline>
+
+/** The client's screen: their own messages at the end, the attorney and the agent at the start. */
+export const ClientView: Story = {
+  args: { items: intakeThread, viewerId: client.id },
+}
+
+/** The same thread on the attorney's screen. */
+export const AttorneyView: Story = {
+  args: { items: intakeThread, viewerId: attorney.id },
+}
+
+/** No viewer, as in an audit log: every person is someone else, so every message is named. */
+export const ObserverView: Story = {
+  args: { items: intakeThread },
+}
+
+/** `ChatMessage` with always-on labels: the reader keeps "You", everyone else is named. */
+export const LabeledMessages: Story = {
+  render: () => (
+    <div className="space-y-4 p-4">
+      <ChatMessage role="user" author={client} viewerId={client.id} timestamp={t(42)} content="My landlord kept my $2,400 security deposit and never sent an itemized list." />
+      <ChatMessage role="assistant" author={agent} content="That window closed on September 21. I have shared your summary with Jane Doe." />
+      <ChatMessage role="user" author={attorney} viewerId={client.id} timestamp={t(30)} content="Hi Maria, I am Jane. Did you give the landlord a forwarding address in writing?" />
+    </div>
+  ),
+}
+
+const longName: ChatAuthor = {
+  id: 'attorney-long',
+  name: 'Alexandria Montgomery-Vandenberghe Castellanos',
+  role: 'Senior supervising attorney, tenant rights',
+}
+const noRole: ChatAuthor = { id: 'guest-1', name: 'Q' }
+const withImage: ChatAuthor = {
+  id: 'paralegal-sam',
+  name: 'Sam Okafor',
+  role: 'Paralegal',
+  avatarUrl:
+    "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><rect width='20' height='20' fill='%236366f1'/><circle cx='10' cy='8' r='4' fill='white'/><rect x='4' y='13' width='12' height='7' rx='3' fill='white'/></svg>",
+}
+const brokenImage: ChatAuthor = { id: 'client-broken', name: 'Lee Park', role: 'Client', avatarUrl: 'https://invalid.example/avatar.png' }
+
+/** Worst cases: a long name and role, a one-letter name with no role, an image, a failing image. */
+export const EdgeCases: Story = {
+  render: () => (
+    <div className="space-y-6 p-4">
+      <div className="space-y-2">
+        <MessageAuthor author={longName} />
+        <MessageAuthor author={noRole} />
+        <MessageAuthor author={withImage} />
+        <MessageAuthor author={brokenImage} />
+      </div>
+      <AgentTimeline
+        className="px-0"
+        viewerId={client.id}
+        items={[
+          {
+            id: 'e1',
+            kind: 'message',
+            role: 'user',
+            author: longName,
+            content: 'Superlongunbrokenidentifierwithoutanyspaces_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          },
+          { id: 'e2', kind: 'message', role: 'user', author: noRole, content: 'ok' },
+        ]}
+      />
+    </div>
+  ),
+}