@tangle-network/ui 11.23.0 → 11.25.0

package/dist/primitives/pagination.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { buttonVariants } from "./button.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 //#region src/primitives/pagination.tsx
 /**
@@ -24,13 +24,46 @@ const pageButton = cn(buttonVariants({
 	variant: "ghost",
 	size: "sm"
 }), "min-w-8 px-2 tabular-nums");
-function Pagination({ page, pageCount, onPageChange, siblings = 1, className, "aria-label": ariaLabel = "Pagination", ...rest }) {
+/** A click that opens the link in another tab or window leaves this page where it is. */
+function opensElsewhere(event) {
+	return event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+}
+function Pagination({ page, pageCount, onPageChange, hrefFor, linkComponent: LinkComponent = "a", siblings = 1, className, "aria-label": ariaLabel = "Pagination", ...rest }) {
 	if (pageCount <= 1) return null;
 	const last = pageCount - 1;
 	const current = Math.min(Math.max(page, 0), last);
 	const go = (next) => {
 		const target = Math.min(Math.max(next, 0), last);
-		if (target !== current) onPageChange(target);
+		if (target !== current) onPageChange?.(target);
+	};
+	const control = ({ target, label, className: controlClass, disabled, current: isCurrent, children }) => {
+		const ariaCurrent = isCurrent ? "page" : void 0;
+		if (!hrefFor) return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": label,
+			"aria-current": ariaCurrent,
+			disabled,
+			onClick: () => go(target),
+			className: controlClass,
+			children
+		});
+		if (disabled) return /* @__PURE__ */ jsx("span", {
+			role: "link",
+			"aria-label": label,
+			"aria-disabled": "true",
+			className: cn(controlClass, "pointer-events-none"),
+			children
+		});
+		return /* @__PURE__ */ jsx(LinkComponent, {
+			href: hrefFor(target),
+			"aria-label": label,
+			"aria-current": ariaCurrent,
+			onClick: onPageChange ? (event) => {
+				if (!opensElsewhere(event)) go(target);
+			} : void 0,
+			className: controlClass,
+			children
+		});
 	};
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": ariaLabel,
@@ -39,22 +72,20 @@ function Pagination({ page, pageCount, onPageChange, siblings = 1, className, "a
 		children: /* @__PURE__ */ jsxs("ul", {
 			className: "flex flex-wrap items-center gap-1",
 			children: [
-				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					"aria-label": "Previous page",
+				/* @__PURE__ */ jsx("li", { children: control({
+					target: current - 1,
+					label: "Previous page",
 					disabled: current === 0,
-					onClick: () => go(current - 1),
 					className: cn(pageButton, "gap-1 pl-1.5"),
-					children: [/* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+					children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
 						className: "hidden sm:inline",
 						children: "Previous"
-					})]
+					})] })
 				}) }),
-				pageSlots(current, pageCount, siblings).map((slot) => typeof slot === "number" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": `Page ${slot + 1}`,
-					"aria-current": slot === current ? "page" : void 0,
-					onClick: () => go(slot),
+				pageSlots(current, pageCount, siblings).map((slot) => typeof slot === "number" ? /* @__PURE__ */ jsx("li", { children: control({
+					target: slot,
+					label: `Page ${slot + 1}`,
+					current: slot === current,
 					className: cn(pageButton, slot === current && "border-border bg-card font-semibold text-foreground hover:bg-card"),
 					children: slot + 1
 				}) }, slot) : /* @__PURE__ */ jsx("li", {
@@ -62,16 +93,15 @@ function Pagination({ page, pageCount, onPageChange, siblings = 1, className, "a
 					className: "flex min-w-8 justify-center text-sm text-muted-foreground",
 					children: "…"
 				}, slot)),
-				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					"aria-label": "Next page",
+				/* @__PURE__ */ jsx("li", { children: control({
+					target: current + 1,
+					label: "Next page",
 					disabled: current === last,
-					onClick: () => go(current + 1),
 					className: cn(pageButton, "gap-1 pr-1.5"),
-					children: [/* @__PURE__ */ jsx("span", {
+					children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 						className: "hidden sm:inline",
 						children: "Next"
-					}), /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })]
+					}), /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })] })
 				}) })
 			]
 		})

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.23.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} />
       );
     }
 

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>
+  ),
+}