@tangle-network/ui 11.51.0 → 11.51.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.51.2
+
+### Patch Changes
+
+- d8990b5: Re-export canonical server-safe speaker grouping from AgentInterface; preserve every UI chat name. Record the adopted GTM heading reduction in the owning drift baseline.
+
+## 11.51.1
+
+### Patch Changes
+
+- dfdfc77: Keep streamed blockquotes stable under host typography styles by suppressing generated quotation marks. Explicit quotation marks in Markdown content remain visible.
+
 ## 11.51.0
 
 ### Minor Changes

package/README.md

@@ -26,6 +26,10 @@ export function App() {
 }
 ```
 
+`partitionBySpeaker` and the speaker types in `/chat` re-export the canonical
+`@tangle-network/agent-interface/speaker` contract. Server consumers import that
+entry directly; `SpeakerHeader` remains the UI renderer.
+
 ## Styling
 
 This package ships no CSS. Its components are Tailwind v4 class names in source, and the build emits JavaScript only, so two pieces of consumer setup carry real weight.

package/dist/chat/speaker.d.ts

@@ -1,45 +1,5 @@
 import { HTMLAttributes } from "react";
-/** Where one responder is in its answer. */
-export type SpeakerState = "answering" | "done" | "failed";
-/**
- * A responder of a turn addressed to several agents. In the turn's parts it is
- * a `{ type: "speaker", id, name, handle?, state? }` part written before the
- * responder's answer.
- */
-export interface Speaker {
-  /** The agent's stable id. It keys the avatar's tone and a live part's `speaker` tag. */
-  id: string;
-  name: string;
-  /** What a person types after `@` to address the agent. */
-  handle?: string;
-  /** Set once the responder ended; absent while it answers and on rows written before responders reported an end. */
-  state?: SpeakerState;
-}
-export type SpeakerPart = Speaker & {
-  type: "speaker";
-};
-/** One responder's share of a turn: its speaker part and the parts it wrote. */
-export interface SpeakerSection<T> {
-  /** The latest speaker part for this responder; null for the parts no speaker owns. */
-  speaker: (T & SpeakerPart) | null;
-  parts: T[];
-}
-/**
- * Splits one assistant turn's parts by the agent that wrote them.
- *
- * A stored row holds a speaker part before each responder's answer, so a part
- * belongs to the speaker part before it. A live stream announces every
- * responder first and then interleaves their output, so a part names its owner
- * in `speaker` (the responder's id), which wins over position. A later speaker
- * part with an id already seen replaces that responder's speaker part, which is
- * how its end state arrives, and never opens a second section.
- *
- * Sections keep the order speakers were first announced. Parts no speaker owns
- * come first, in a section whose `speaker` is null; a turn without speaker
- * parts is that one section. No part is dropped, copied or reordered within its
- * section.
- */
-export declare function partitionBySpeaker<T extends object>(parts: readonly T[]): SpeakerSection<T>[];
+import { Speaker, Speaker as Speaker$1, SpeakerPart, SpeakerSection, SpeakerState, partitionBySpeaker } from "@tangle-network/agent-interface/speaker";
 export interface SpeakerHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
   speaker: Speaker;
   /** The turn is still running, so a responder that has not reported an end is answering. */
@@ -54,4 +14,5 @@ export interface SpeakerHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>,
  * failed glyph with the word, both from `RunStatusIcon`, and a finished one
  * nothing, as a settled run row does. `data-speaker-state` carries all three.
  */
-export declare function SpeakerHeader({ speaker, live, ...props }: SpeakerHeaderProps): import("react").JSX.Element;
+export declare function SpeakerHeader({ speaker, live, ...props }: SpeakerHeaderProps): import("react").JSX.Element;
+export { type Speaker$1 as Speaker, type SpeakerPart, type SpeakerSection, type SpeakerState, partitionBySpeaker };

package/dist/chat/speaker.js

@@ -1,49 +1,8 @@
 import { RunStatusIcon } from "../run/status-meta.js";
 import { MessageAuthor } from "./message-author.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { partitionBySpeaker } from "@tangle-network/agent-interface/speaker";
 // src/chat/speaker.tsx
-function isSpeakerPart(part) {
-	const record = part;
-	return !!record && record.type === "speaker" && typeof record.id === "string" && typeof record.name === "string";
-}
-/**
-* Splits one assistant turn's parts by the agent that wrote them.
-*
-* A stored row holds a speaker part before each responder's answer, so a part
-* belongs to the speaker part before it. A live stream announces every
-* responder first and then interleaves their output, so a part names its owner
-* in `speaker` (the responder's id), which wins over position. A later speaker
-* part with an id already seen replaces that responder's speaker part, which is
-* how its end state arrives, and never opens a second section.
-*
-* Sections keep the order speakers were first announced. Parts no speaker owns
-* come first, in a section whose `speaker` is null; a turn without speaker
-* parts is that one section. No part is dropped, copied or reordered within its
-* section.
-*/
-function partitionBySpeaker(parts) {
-	const sections = /* @__PURE__ */ new Map();
-	const unowned = [];
-	let current;
-	for (const part of parts) {
-		if (isSpeakerPart(part)) {
-			current = sections.get(part.id);
-			if (current) current.speaker = part;
-			else sections.set(part.id, current = {
-				speaker: part,
-				parts: []
-			});
-			continue;
-		}
-		const tag = part.speaker;
-		((typeof tag === "string" ? sections.get(tag) : current)?.parts ?? unowned).push(part);
-	}
-	const owned = [...sections.values()];
-	return unowned.length > 0 || owned.length === 0 ? [{
-		speaker: null,
-		parts: unowned
-	}, ...owned] : owned;
-}
 /**
 * The line above one responder's answer: the author line every participant
 * gets, then the handle a person types to address the agent, then its state.

package/dist/markdown/markdown.js

@@ -166,7 +166,7 @@ function MarkdownImage({ node: _node, src, alt, className, ...props }) {
 */
 const Markdown = memo(({ children, className, urlTransform, linkChip }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("tangle-prose max-w-none text-sm", className),
+		className: cn("tangle-prose max-w-none text-sm [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none", className),
 		children: /* @__PURE__ */ jsx(LinkChipContext.Provider, {
 			value: linkChip,
 			children: /* @__PURE__ */ jsx(ReactMarkdown, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.0",
+  "version": "11.51.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,6 +149,7 @@
     "@radix-ui/react-switch": "^1.4.1",
     "@radix-ui/react-tabs": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.4.1",
+    "@tangle-network/agent-interface": "^5.10.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",
@@ -166,7 +167,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.31.0",
+    "@tangle-network/brand": "^1.31.2",
     "@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/message-author.test.tsx

@@ -21,11 +21,6 @@ const segmentedParts: SessionPart[] = [
 // The snapshots below were recorded from the components before `author`
 // existed. A transcript that names no author must keep that exact markup.
 describe("a transcript without authors", () => {
-  it("renders ChatMessage as before", () => {
-    expect(html(<ChatMessage role="user" content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-end"><div class="flex items-center gap-2 px-1 flex-row-reverse"><span class="font-medium text-foreground text-xs">You</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] bg-foreground px-[var(--chat-message-px)] py-[var(--chat-message-py)] text-background"><div class="whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div>"`)
-    expect(html(<ChatMessage role="assistant" content="It depends on the lease terms." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 text-foreground"><div class="tangle-prose max-w-none tangle-prose tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"><p>It depends on the lease terms.</p></div></div></div>"`)
-    expect(html(<ChatMessage role="system" content="Session started." />)).toMatchInlineSnapshot(`"<div class="flex flex-col gap-1 items-start"><div class="flex items-center gap-2 px-1"><span class="font-medium text-foreground text-xs">Agent</span></div><div class="min-w-0 max-w-[85%] space-y-1 rounded-[var(--radius-lg)] border border-border bg-card px-[var(--chat-message-px)] py-[var(--chat-message-py)]"><div class="tangle-prose max-w-none tangle-prose tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"><p>Session started.</p></div></div></div>"`)
-  })
 
   it("renders UserMessage actions and application notes as before", () => {
     expect(html(<UserMessage content="Can I break my lease early?" actions={<button type="button">Copy</button>} />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div><div class="flex flex-wrap items-center justify-end gap-1.5 text-sm text-muted-foreground"><button type="button">Copy</button></div></div></div>"`)
@@ -36,18 +31,6 @@ describe("a transcript without authors", () => {
     expect(html(<UserMessage content="Can I break my lease early?" />)).toMatchInlineSnapshot(`"<div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div>"`)
   })
 
-  it("renders AgentTimeline messages as before", () => {
-    expect(
-      html(
-        <AgentTimeline
-          items={[
-            { id: "u1", kind: "message", role: "user", content: "Can I break my lease early?" },
-            { id: "a1", kind: "message", role: "assistant", content: "It depends on the lease terms." },
-          ]}
-        />,
-      ),
-    ).toMatchInlineSnapshot(`"<div class="mx-auto flex w-full max-w-5xl flex-col px-4 py-4"><div data-timeline-step="user" class=""><div class="flex justify-end"><div class="group flex min-w-0 max-w-[78%] flex-col items-end gap-2"><div class="relative w-full min-w-0 rounded-2xl bg-foreground px-4 py-3 text-background"><div class="break-words whitespace-pre-wrap tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]">Can I break my lease early?</div></div></div></div></div><div data-timeline-step="prose" class="mt-4"><div><div class="tangle-prose max-w-none tangle-prose tangle-transcript-text text-[length:var(--transcript-font-size)] leading-[var(--transcript-line-height)]"><p>It depends on the lease terms.</p></div></div></div></div>"`)
-  })
 })
 
 const client: ChatAuthor = { id: "client-maria", name: "Maria Lopez", role: "Client" }

package/src/chat/speaker.tsx

@@ -2,71 +2,8 @@ import type { HTMLAttributes } from "react";
 import { RunStatusIcon } from "../run/status-meta";
 import { MessageAuthor } from "./message-author";
 
-/** Where one responder is in its answer. */
-export type SpeakerState = "answering" | "done" | "failed";
-
-/**
- * A responder of a turn addressed to several agents. In the turn's parts it is
- * a `{ type: "speaker", id, name, handle?, state? }` part written before the
- * responder's answer.
- */
-export interface Speaker {
-  /** The agent's stable id. It keys the avatar's tone and a live part's `speaker` tag. */
-  id: string;
-  name: string;
-  /** What a person types after `@` to address the agent. */
-  handle?: string;
-  /** Set once the responder ended; absent while it answers and on rows written before responders reported an end. */
-  state?: SpeakerState;
-}
-
-export type SpeakerPart = Speaker & { type: "speaker" };
-
-/** One responder's share of a turn: its speaker part and the parts it wrote. */
-export interface SpeakerSection<T> {
-  /** The latest speaker part for this responder; null for the parts no speaker owns. */
-  speaker: (T & SpeakerPart) | null;
-  parts: T[];
-}
-
-function isSpeakerPart<T>(part: T): part is T & SpeakerPart {
-  const record = part as { type?: unknown; id?: unknown; name?: unknown } | null;
-  return !!record && record.type === "speaker" && typeof record.id === "string" && typeof record.name === "string";
-}
-
-/**
- * Splits one assistant turn's parts by the agent that wrote them.
- *
- * A stored row holds a speaker part before each responder's answer, so a part
- * belongs to the speaker part before it. A live stream announces every
- * responder first and then interleaves their output, so a part names its owner
- * in `speaker` (the responder's id), which wins over position. A later speaker
- * part with an id already seen replaces that responder's speaker part, which is
- * how its end state arrives, and never opens a second section.
- *
- * Sections keep the order speakers were first announced. Parts no speaker owns
- * come first, in a section whose `speaker` is null; a turn without speaker
- * parts is that one section. No part is dropped, copied or reordered within its
- * section.
- */
-export function partitionBySpeaker<T extends object>(parts: readonly T[]): SpeakerSection<T>[] {
-  const sections = new Map<string, SpeakerSection<T>>();
-  const unowned: T[] = [];
-  let current: SpeakerSection<T> | undefined;
-  for (const part of parts) {
-    if (isSpeakerPart(part)) {
-      current = sections.get(part.id);
-      if (current) current.speaker = part;
-      else sections.set(part.id, (current = { speaker: part, parts: [] }));
-      continue;
-    }
-    const tag = (part as { speaker?: unknown }).speaker;
-    const owner = typeof tag === "string" ? sections.get(tag) : current;
-    (owner?.parts ?? unowned).push(part);
-  }
-  const owned = [...sections.values()];
-  return unowned.length > 0 || owned.length === 0 ? [{ speaker: null, parts: unowned }, ...owned] : owned;
-}
+import type { Speaker, SpeakerState } from "@tangle-network/agent-interface/speaker";
+export { partitionBySpeaker, type Speaker, type SpeakerPart, type SpeakerSection, type SpeakerState } from "@tangle-network/agent-interface/speaker";
 
 export interface SpeakerHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
   speaker: Speaker;

package/src/markdown/markdown.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { useEffect, useState } from 'react'
 import { Markdown } from './markdown'
 import { CodeBlock, CopyButton } from './code-block'
 import { codePresentation } from '../lib/code-presentation'
@@ -11,7 +12,7 @@ const markdownMeta: Meta<typeof Markdown> = {
   parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
   decorators: [
     (Story) => (
-      <div className="w-[680px] rounded-xl bg-card p-6 text-foreground">
+      <div className="w-[680px] max-w-full rounded-xl bg-card p-6 text-foreground">
         <Story />
       </div>
     ),
@@ -262,3 +263,33 @@ export const CodeBlockLight: Story = {
     </div>
   ),
 }
+
+
+/** Host typography must not add a moving closing quote to streamed text. */
+function StreamingBlockquoteFixture() {
+  const text = '> **A researcher collects the evidence and a writer prepares the draft.**\n> You decide when the work leaves the workspace. Each person sees the source, the proposed action and the result before approving it.'
+  const [length, setLength] = useState(0)
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval>
+    const delay = setTimeout(() => {
+      let shown = 0
+      interval = setInterval(() => {
+        shown = Math.min(shown + 4, text.length); setLength(shown)
+        if (shown === text.length) clearInterval(interval)
+      }, 30)
+    }, 1500)
+    return () => { clearTimeout(delay); clearInterval(interval) }
+  }, [])
+  return <div className="streaming-blockquote-fixture" data-stream-length={length} data-stream-complete={length === text.length}>
+    <style>{`@layer base {
+      .streaming-blockquote-fixture blockquote p::before { content: open-quote; }
+      .streaming-blockquote-fixture blockquote p::after { content: close-quote; }
+    }`}</style>
+    <Markdown>{text.slice(0, length)}</Markdown>
+  </div>
+}
+
+export const StreamingBlockquote: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => <StreamingBlockquoteFixture />,
+}

package/src/markdown/markdown.tsx

@@ -240,7 +240,7 @@ export interface MarkdownProps {
 export const Markdown = memo(({ children, className, urlTransform, linkChip }: MarkdownProps) => {
   return (
     <div
-      className={cn("tangle-prose max-w-none text-sm", className)}
+      className={cn("tangle-prose max-w-none text-sm [&_blockquote_p]:before:content-none [&_blockquote_p]:after:content-none", className)}
     >
       <LinkChipContext.Provider value={linkChip}>
         <ReactMarkdown