From e762a30e89dd5bb7bf5f59012cd431e9d7980c76 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Tue, 19 May 2026 12:38:54 -0700 Subject: [PATCH 1/2] feat(chat)!: remove per-message checkpoint marker; flatten chat-message rendering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The chat library no longer ships a built-in time-travel UI on individual assistant messages. The bare gutter dot was undiscoverable, the rewind-vs-refresh distinction was invisible to most users, and the LangGraph-specific concept leaked into the UI for a feature only power users used. Refresh (in the actions bar) covers the universal 'redo this turn' intent that every chat UI exposes. Removals: - chat-checkpoint-marker primitive (component + spec + public-api export) - chat-message inputs: checkpointId, checkpointActive - chat-message outputs: replayRequested, forkRequested - chat-message gutter/layout/main wrapper DOM and CSS — template is now flat (bubble + citations + controls) - replayRequested/forkRequested outputs on chat, chat-sidebar, chat-popup compositions and their forwarding - demo-shell onTimelineReplay/onTimelineFork handlers + the bindings in embed-mode/popup-mode/sidebar-mode Kept: - AgentWithHistory contract + agent.history Signal — adapter authors can still expose checkpoint state - agent.replayFromCheckpoint / forkFromCheckpoint methods on the runtime contract — consumers can build their own time-travel UI - ChatTimelineSliderComponent standalone primitive — explicit opt-in surface for consumers who want a time-travel UI Side benefit: the chat-message layout flattens significantly. No more flex row with gutter (14px) + main; messages are simple block-level containers. Fixes the long-standing alignment glitch where the gutter dot floated ~16px above the first line of bubble text. Co-Authored-By: Claude Sonnet 4.6 --- .../src/app/modes/embed-mode.component.ts | 2 - .../src/app/modes/popup-mode.component.ts | 2 - .../src/app/modes/sidebar-mode.component.ts | 2 - .../src/app/shell/demo-shell.component.html | 2 - .../src/app/shell/demo-shell.component.ts | 12 -- libs/a2ui/package.json | 2 +- libs/ag-ui/package.json | 2 +- libs/chat/package.json | 2 +- .../chat-popup/chat-popup.component.ts | 6 +- .../chat-sidebar/chat-sidebar.component.ts | 5 - .../chat-sidenav/chat-sidenav.component.ts | 20 --- .../lib/compositions/chat/chat.component.ts | 17 --- .../chat-checkpoint-marker.component.spec.ts | 65 ---------- .../chat-checkpoint-marker.component.ts | 122 ------------------ .../chat-message.component.spec.ts | 53 -------- .../chat-message/chat-message.component.ts | 64 ++------- .../src/lib/styles/chat-message.styles.ts | 27 +--- libs/chat/src/public-api.ts | 1 - libs/langgraph/package.json | 2 +- libs/licensing/package.json | 2 +- libs/render/package.json | 2 +- libs/telemetry/package.json | 2 +- 22 files changed, 24 insertions(+), 390 deletions(-) delete mode 100644 libs/chat/src/lib/primitives/chat-checkpoint-marker/chat-checkpoint-marker.component.spec.ts delete mode 100644 libs/chat/src/lib/primitives/chat-checkpoint-marker/chat-checkpoint-marker.component.ts diff --git a/examples/chat/angular/src/app/modes/embed-mode.component.ts b/examples/chat/angular/src/app/modes/embed-mode.component.ts index a66a13c3..7a157b6c 100644 --- a/examples/chat/angular/src/app/modes/embed-mode.component.ts +++ b/examples/chat/angular/src/app/modes/embed-mode.component.ts @@ -17,8 +17,6 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component'; [modelOptions]="shell.modelOptions()" [selectedModel]="shell.model()" (selectedModelChange)="shell.onModelChange($event)" - (replayRequested)="shell.onTimelineReplay($event)" - (forkRequested)="shell.onTimelineFork($event)" > diff --git a/examples/chat/angular/src/app/modes/popup-mode.component.ts b/examples/chat/angular/src/app/modes/popup-mode.component.ts index 2274f149..25208dce 100644 --- a/examples/chat/angular/src/app/modes/popup-mode.component.ts +++ b/examples/chat/angular/src/app/modes/popup-mode.component.ts @@ -23,8 +23,6 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component'; [selectedModel]="shell.model()" [showModelPicker]="false" (selectedModelChange)="shell.onModelChange($event)" - (replayRequested)="shell.onTimelineReplay($event)" - (forkRequested)="shell.onTimelineFork($event)" > diff --git a/examples/chat/angular/src/app/modes/sidebar-mode.component.ts b/examples/chat/angular/src/app/modes/sidebar-mode.component.ts index f631e09e..0ea3b0ec 100644 --- a/examples/chat/angular/src/app/modes/sidebar-mode.component.ts +++ b/examples/chat/angular/src/app/modes/sidebar-mode.component.ts @@ -20,8 +20,6 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component'; [open]="true" [pushContent]="true" (selectedModelChange)="shell.onModelChange($event)" - (replayRequested)="shell.onTimelineReplay($event)" - (forkRequested)="shell.onTimelineFork($event)" > {{ shell.currentThreadTitle() }}
diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.html b/examples/chat/angular/src/app/shell/demo-shell.component.html index 1ce08778..1ca7326b 100644 --- a/examples/chat/angular/src/app/shell/demo-shell.component.html +++ b/examples/chat/angular/src/app/shell/demo-shell.component.html @@ -78,8 +78,6 @@ (searchOpened)="paletteOpen.set(true)" (openChange)="onSidenavOpenChange($event)" (modeChange)="onSidenavModeChange($event)" - (replayRequested)="onTimelineReplay($event)" - (forkRequested)="onTimelineFork($event)" > - - - - - `, -}) -export class ChatCheckpointMarkerComponent { - readonly checkpointId = input.required(); - readonly isActive = input(false); - - readonly replayRequested = output(); - readonly forkRequested = output(); -} diff --git a/libs/chat/src/lib/primitives/chat-message/chat-message.component.spec.ts b/libs/chat/src/lib/primitives/chat-message/chat-message.component.spec.ts index 92b7305f..0b6eb219 100644 --- a/libs/chat/src/lib/primitives/chat-message/chat-message.component.spec.ts +++ b/libs/chat/src/lib/primitives/chat-message/chat-message.component.spec.ts @@ -2,7 +2,6 @@ // SPDX-License-Identifier: MIT import { describe, it, expect } from 'vitest'; import { TestBed } from '@angular/core/testing'; -import { Component } from '@angular/core'; import { ChatMessageComponent } from './chat-message.component'; import { CitationsResolverService } from '../../markdown/citations-resolver.service'; @@ -16,55 +15,3 @@ describe('ChatMessageComponent', () => { expect(component).toBeTruthy(); }); }); - -@Component({ - standalone: true, - imports: [ChatMessageComponent], - template: `Hello`, -}) -class GutterHost { - cpId: string | undefined = undefined; - replayed: string[] = []; - forked: string[] = []; -} - -describe('ChatMessageComponent — gutter checkpoint marker', () => { - it('does not render a marker when checkpointId is unset', () => { - TestBed.configureTestingModule({ imports: [GutterHost] }); - const fx = TestBed.createComponent(GutterHost); - fx.detectChanges(); - expect(fx.nativeElement.querySelector('chat-checkpoint-marker')).toBeNull(); - }); - - it('renders a marker in the gutter when checkpointId is set', () => { - TestBed.configureTestingModule({ imports: [GutterHost] }); - const fx = TestBed.createComponent(GutterHost); - fx.componentInstance.cpId = 'cp-99'; - fx.detectChanges(); - const marker = fx.nativeElement.querySelector('chat-checkpoint-marker'); - expect(marker).toBeTruthy(); - expect(marker.querySelector('[aria-label]').getAttribute('aria-label')).toContain('cp-99'); - }); - - it('bubbles replayRequested from the marker as a message-level output', () => { - TestBed.configureTestingModule({ imports: [GutterHost] }); - const fx = TestBed.createComponent(GutterHost); - fx.componentInstance.cpId = 'cp-99'; - fx.detectChanges(); - (fx.nativeElement.querySelector('[data-action="rewind"]') as HTMLButtonElement).click(); - expect(fx.componentInstance.replayed).toEqual(['cp-99']); - }); - - it('bubbles forkRequested from the marker as a message-level output', () => { - TestBed.configureTestingModule({ imports: [GutterHost] }); - const fx = TestBed.createComponent(GutterHost); - fx.componentInstance.cpId = 'cp-99'; - fx.detectChanges(); - (fx.nativeElement.querySelector('[data-action="fork"]') as HTMLButtonElement).click(); - expect(fx.componentInstance.forked).toEqual(['cp-99']); - }); -}); diff --git a/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts b/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts index 89b17996..d2c83b61 100644 --- a/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts +++ b/libs/chat/src/lib/primitives/chat-message/chat-message.component.ts @@ -1,10 +1,9 @@ // libs/chat/src/lib/primitives/chat-message/chat-message.component.ts // SPDX-License-Identifier: MIT -import { Component, ChangeDetectionStrategy, input, output, computed, effect, inject } from '@angular/core'; +import { Component, ChangeDetectionStrategy, input, computed, effect, inject } from '@angular/core'; import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; import { CHAT_MESSAGE_STYLES } from '../../styles/chat-message.styles'; import { ChatCitationsComponent } from '../chat-citations/chat-citations.component'; -import { ChatCheckpointMarkerComponent } from '../chat-checkpoint-marker/chat-checkpoint-marker.component'; import { CitationsResolverService } from '../../markdown/citations-resolver.service'; import type { Message } from '../../agent/message'; @@ -13,25 +12,9 @@ export type ChatMessageRole = 'user' | 'assistant' | 'system' | 'tool'; @Component({ selector: 'chat-message', standalone: true, - imports: [ChatCitationsComponent, ChatCheckpointMarkerComponent], + imports: [ChatCitationsComponent], changeDetection: ChangeDetectionStrategy.OnPush, - styles: [CHAT_HOST_TOKENS, CHAT_MESSAGE_STYLES, ` - /* - * Layout MUST be width:100% so user-role __main's max-width:80% (defined - * in chat-message.styles.ts) has a concrete containing block to resolve - * against. Without this, layout shrinks to __main's content, __main - * shrinks to its bubble's content, the bubble's fit-content is then - * capped by max-width:80% of layout (a circular dependency the browser - * breaks at the bubble's wrap-point intrinsic width — ~166px instead of - * the unwrapped ~199px), forcing short user phrases like "Show me the - * dashboard" to wrap mid-message. See PRs #313, #325, c0b9e88c — each - * shifted which element held the 80% cap but none gave it a stable base. - */ - .chat-message__layout { display: flex; gap: 8px; align-items: flex-start; width: 100%; } - .chat-message__gutter { flex: 0 0 14px; display: flex; align-items: flex-start; padding-top: 4px; } - .chat-message__gutter:empty { flex-basis: 0; } - .chat-message__main { flex: 1; min-width: 0; } - `], + styles: [CHAT_HOST_TOKENS, CHAT_MESSAGE_STYLES], providers: [CitationsResolverService], host: { '[attr.data-role]': 'role()', @@ -40,29 +23,15 @@ export type ChatMessageRole = 'user' | 'assistant' | 'system' | 'tool'; '[attr.data-prev-role]': 'prevRole() ?? null', }, template: ` -
-
- @if (checkpointId(); as cpId) { - - } -
-
-
- - -
- @if (message()?.role === 'assistant' && message(); as msg) { - - } -
- -
-
+
+ + +
+ @if (message()?.role === 'assistant' && message(); as msg) { + + } +
+
`, }) @@ -73,15 +42,6 @@ export class ChatMessageComponent { readonly prevRole = input(undefined); readonly message = input(undefined); - /** Optional checkpoint id to anchor a gutter marker. When set, a - * chat-checkpoint-marker is rendered in the left gutter and emits - * bubble through this component's replayRequested / forkRequested outputs. */ - readonly checkpointId = input(undefined); - readonly checkpointActive = input(false); - - readonly replayRequested = output(); - readonly forkRequested = output(); - private readonly resolver = inject(CitationsResolverService); constructor() { diff --git a/libs/chat/src/lib/styles/chat-message.styles.ts b/libs/chat/src/lib/styles/chat-message.styles.ts index 68ef2d91..c5d9bb27 100644 --- a/libs/chat/src/lib/styles/chat-message.styles.ts +++ b/libs/chat/src/lib/styles/chat-message.styles.ts @@ -3,31 +3,17 @@ export const CHAT_MESSAGE_STYLES = ` :host { display: block; } :host([data-role="user"]) { - /* - * Block (not flex) so the layout child gets its width:100% (set in - * chat-message.component.ts inline styles). Right-alignment happens - * inside layout via justify-content:flex-end below, NOT here. The old - * "display:flex; justify-content:flex-end" on the host caused layout - * to shrink-wrap its content, which collapsed __main's 80% containing - * block — see chat-message.component.ts comment for the full story. - */ display: block; margin-top: 0.5rem; } :host([data-role="user"][data-prev-role="assistant"]) { margin-top: 1.5rem; } - :host([data-role="user"]) .chat-message__layout { - /* Right-align the bubble column inside the full-width row. */ - justify-content: flex-end; - } - :host([data-role="user"]) .chat-message__main { - flex: none; - width: fit-content; + :host([data-role="user"]) .chat-message__bubble { + /* Right-align the user bubble. */ + margin-left: auto; max-width: 80%; } /* - * Assistant bubbles aren't in the flex collapse path, so the 80% cap - * lives on the bubble itself for that role. (User bubbles get the cap - * on .chat-message__main above instead.) + * Assistant bubbles get the 80% cap on the bubble itself. */ :host([data-role="assistant"]) .chat-message__bubble { max-width: 80%; @@ -44,11 +30,6 @@ export const CHAT_MESSAGE_STYLES = ` :host([data-role="assistant"]):first-child { margin-top: 0; } .chat-message__bubble { - /* - * No max-width here for user-role bubbles — the cap is applied on - * .chat-message__main above. Assistant-role bubbles inherit the - * host's max-width: 100% so no per-bubble cap needed either. - */ width: fit-content; padding: 8px 12px; border-radius: var(--ngaf-chat-radius-bubble); diff --git a/libs/chat/src/public-api.ts b/libs/chat/src/public-api.ts index 6656504d..64020eda 100644 --- a/libs/chat/src/public-api.ts +++ b/libs/chat/src/public-api.ts @@ -67,7 +67,6 @@ export { ChatThreadListComponent } from './lib/primitives/chat-thread-list/chat- export type { Thread, ThreadActionAdapter } from './lib/primitives/chat-thread-list/chat-thread-list.component'; export { ChatProjectListComponent } from './lib/primitives/chat-project-list/chat-project-list.component'; export type { Project, ProjectActionAdapter } from './lib/primitives/chat-project-list/chat-project-list.component'; -export { ChatCheckpointMarkerComponent } from './lib/primitives/chat-checkpoint-marker/chat-checkpoint-marker.component'; export { ChatGenuiSkeletonComponent } from './lib/primitives/chat-genui-skeleton/chat-genui-skeleton.component'; export { ChatTimelineComponent } from './lib/primitives/chat-timeline/chat-timeline.component'; export { ChatGenerativeUiComponent } from './lib/primitives/chat-generative-ui/chat-generative-ui.component'; diff --git a/libs/langgraph/package.json b/libs/langgraph/package.json index 58a270f8..606c12c1 100644 --- a/libs/langgraph/package.json +++ b/libs/langgraph/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/langgraph", - "version": "0.0.42", + "version": "0.0.43", "peerDependencies": { "@ngaf/chat": "*", "@ngaf/licensing": "*", diff --git a/libs/licensing/package.json b/libs/licensing/package.json index f8e5f184..ea697a3a 100644 --- a/libs/licensing/package.json +++ b/libs/licensing/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/licensing", - "version": "0.0.42", + "version": "0.0.43", "license": "MIT", "repository": { "type": "git", diff --git a/libs/render/package.json b/libs/render/package.json index aecdcbda..e15a2385 100644 --- a/libs/render/package.json +++ b/libs/render/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/render", - "version": "0.0.42", + "version": "0.0.43", "peerDependencies": { "@angular/core": "^20.0.0 || ^21.0.0", "@angular/common": "^20.0.0 || ^21.0.0", diff --git a/libs/telemetry/package.json b/libs/telemetry/package.json index 325fbd00..e94c27bf 100644 --- a/libs/telemetry/package.json +++ b/libs/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/telemetry", - "version": "0.0.42", + "version": "0.0.43", "license": "MIT", "publishConfig": { "access": "public" From d3df9c3648fabda4efb43d7bfaf74939f77349b9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 19 May 2026 19:41:41 +0000 Subject: [PATCH 2/2] chore(docs): regenerate api docs --- .../content/docs/chat/api/api-docs.json | 119 ------------------ 1 file changed, 119 deletions(-) diff --git a/apps/website/content/docs/chat/api/api-docs.json b/apps/website/content/docs/chat/api/api-docs.json index 3e8ca377..80d2ca41 100644 --- a/apps/website/content/docs/chat/api/api-docs.json +++ b/apps/website/content/docs/chat/api/api-docs.json @@ -1456,40 +1456,6 @@ ], "methods": [] }, - { - "name": "ChatCheckpointMarkerComponent", - "kind": "class", - "description": "", - "params": [], - "examples": [], - "properties": [ - { - "name": "checkpointId", - "type": "InputSignal", - "description": "", - "optional": false - }, - { - "name": "forkRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - }, - { - "name": "isActive", - "type": "InputSignal", - "description": "", - "optional": false - }, - { - "name": "replayRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - } - ], - "methods": [] - }, { "name": "ChatCitationCardTemplateDirective", "kind": "class", @@ -1581,12 +1547,6 @@ "description": "True iff there's a current (last-index) assistant message that's\nstill streaming. The bubble's own caret already signals loading;\nwe suppress the floor typing-indicator in that case so the user\ndoesn't see two loading affordances at once.\n\nMatches the same `streaming + current` condition the bubble uses\nto enable `.chat-message__caret`:\n `agent().isLoading() && i === agent().messages().length - 1`\n `i === agent().messages().length - 1`\n\nRestricted to assistant role because the caret only renders on\nassistant bubbles (`:host([data-role=\"assistant\"][data-current=...\n ][data-streaming=...])`).", "optional": false }, - { - "name": "forkRequested", - "type": "OutputEmitterRef", - "description": "Bubbled from chat-message gutter markers when the user requests a checkpoint fork.", - "optional": false - }, { "name": "genuiToolNames", "type": "InputSignal", @@ -1659,12 +1619,6 @@ "description": "", "optional": false }, - { - "name": "replayRequested", - "type": "OutputEmitterRef", - "description": "Bubbled from chat-message gutter markers when the user requests a checkpoint replay.", - "optional": false - }, { "name": "resolvedStore", "type": "Signal", @@ -1721,19 +1675,6 @@ } ], "methods": [ - { - "name": "checkpointFor", - "signature": "checkpointFor(msg: Message)", - "description": "Returns the checkpoint id associated with an AI message, if the\n underlying agent exposes messageCheckpoints().", - "params": [ - { - "name": "msg", - "type": "Message", - "description": "", - "optional": false - } - ] - }, { "name": "classifyMessage", "signature": "classifyMessage(content: string, message: object)", @@ -2564,18 +2505,6 @@ "description": "", "optional": false }, - { - "name": "checkpointActive", - "type": "InputSignal", - "description": "", - "optional": false - }, - { - "name": "checkpointId", - "type": "InputSignal", - "description": "Optional checkpoint id to anchor a gutter marker. When set, a\n chat-checkpoint-marker is rendered in the left gutter and emits\n bubble through this component's replayRequested / forkRequested outputs.", - "optional": false - }, { "name": "current", "type": "InputSignal", @@ -2588,12 +2517,6 @@ "description": "", "optional": false }, - { - "name": "forkRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - }, { "name": "message", "type": "InputSignal", @@ -2606,12 +2529,6 @@ "description": "", "optional": false }, - { - "name": "replayRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - }, { "name": "role", "type": "InputSignal", @@ -2779,12 +2696,6 @@ "description": "Close the popup on Escape (default true).", "optional": false }, - { - "name": "forkRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - }, { "name": "modelOptions", "type": "InputSignal", @@ -2797,12 +2708,6 @@ "description": "", "optional": false }, - { - "name": "replayRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - }, { "name": "selectedModel", "type": "ModelSignal", @@ -3286,12 +3191,6 @@ "description": "Close the sidebar on Escape (default true).", "optional": false }, - { - "name": "forkRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - }, { "name": "modelOptions", "type": "InputSignal", @@ -3310,12 +3209,6 @@ "description": "", "optional": false }, - { - "name": "replayRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - }, { "name": "selectedModel", "type": "ModelSignal", @@ -3399,12 +3292,6 @@ "description": "", "optional": false }, - { - "name": "forkRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - }, { "name": "isDebugStreaming", "type": "Signal", @@ -3465,12 +3352,6 @@ "description": "", "optional": false }, - { - "name": "replayRequested", - "type": "OutputEmitterRef", - "description": "", - "optional": false - }, { "name": "searchOpened", "type": "OutputEmitterRef",