fix(chat,langgraph): jank — stable id + global keyframes + round send + host overflow (#175)

blove · claude · web-flow · commit b2bface0fcd8 · 2026-05-02T07:26:34.000-07:00
* fix(chat,langgraph): stabilise optimistic message id for track-by-id The 0.0.9 jank fix switched chat-message-list to `track message.id`, but the optimistic human message injected at submit() had no id — so toMessage() called randomId() on every BaseMessage→Message recompute. Each token re-emission produced a fresh id for the user bubble, defeating track-by-id and tearing down the chat-message DOM (and its caret / typing-dot animations) on every streamed token. - stream-manager.bridge: stamp optimistic input messages with an `optimistic-<ts>-<rand>` id at injection time. Real LangGraph echoes with a server id arrive as a separate merge, naturally taking over. - agent.fn: WeakMap-cache projected Message objects by raw BaseMessage identity so the projected `id` is stable across recomputes when the raw reference is stable (additional belt-and-braces for caret/typing animation continuity). - chat.component: only mark the LAST assistant message as `streaming=true` (was every assistant). Avoids re-painting historical messages' caret/streaming attrs every token. - Bumps: @ngaf/chat 0.0.9 → 0.0.10, @ngaf/langgraph 0.0.3 → 0.0.4. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(chat): hoist @Keyframes globally + round send + lock host overflow Three additional jank fixes for 0.0.10: 1. Hoist @Keyframes (typing-dot, caret-blink, spin, pulse) into the global ROOT_TOKEN_STYLES sheet that's already auto-injected into <head>. Previously they lived in CHAT_HOST_TOKENS and were appended to every chat component's styles array. Angular's emulated view encapsulation scopes @Keyframes names per-component, which can desynchronise from `animation: name` references when those live in a sibling style helper string. Result: the typing dots rendered but never animated. Hoisting to global scope makes the names match what component CSS references (Angular leaves `animation:` props untouched). 2. Make the send button fully round (`border-radius: 9999px`) instead of the 8px button radius — matches the floating-launcher aesthetic. 3. Constrain the chat host with `overflow: hidden` and add `flex: 1 1 auto; max-height: 100%` so content can never push the embedding page into a scroll state. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * ci: re-trigger workflows --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git a/libs/chat/package.json b/libs/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/chat",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "exports": {
     ".": {
       "types": "./index.d.ts",
diff --git a/libs/chat/src/lib/compositions/chat/chat.component.ts b/libs/chat/src/lib/compositions/chat/chat.component.ts
@@ -42,8 +42,17 @@ import type { ChatRenderEvent } from './chat-render-event';
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   styles: [CHAT_HOST_TOKENS, `
-    :host { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--ngaf-chat-bg); }
-    .chat-shell { display: flex; flex: 1; min-height: 0; }
+    :host {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+      height: 100%;
+      min-height: 0;
+      max-height: 100%;
+      overflow: hidden;
+      background: var(--ngaf-chat-bg);
+    }
+    .chat-shell { display: flex; flex: 1; min-height: 0; overflow: hidden; }
     .chat-shell__sidebar {
       width: 240px;
       flex-shrink: 0;
@@ -108,7 +117,7 @@ import type { ChatRenderEvent } from './chat-render-event';
                 <chat-message
                   [role]="'assistant'"
                   [prevRole]="prevRole(i)"
-                  [streaming]="agent().isLoading()"
+                  [streaming]="agent().isLoading() && i === agent().messages().length - 1"
                   [current]="i === agent().messages().length - 1"
                 >
                   <chat-tool-calls [agent]="agent()" [message]="message" />
diff --git a/libs/chat/src/lib/styles/chat-input.styles.ts b/libs/chat/src/lib/styles/chat-input.styles.ts
@@ -57,7 +57,7 @@ export const CHAT_INPUT_STYLES = `
     border: 0;
     background: var(--ngaf-chat-primary);
     color: var(--ngaf-chat-on-primary);
-    border-radius: var(--ngaf-chat-radius-button);
+    border-radius: 9999px;
     cursor: pointer;
     transition: transform 200ms ease, background 200ms ease;
   }
diff --git a/libs/chat/src/lib/styles/chat-tokens.ts b/libs/chat/src/lib/styles/chat-tokens.ts
@@ -105,8 +105,13 @@ export const CHAT_HOST_TOKENS = `
     font-family: var(--ngaf-chat-font-family);
     color: var(--ngaf-chat-text);
   }
-  ${KEYFRAMES}
 `;
+// Note: @keyframes are NOT placed in CHAT_HOST_TOKENS. Angular's emulated
+// view encapsulation scopes @keyframes names per-component, which can
+// desynchronise from animation property references when styles are
+// concatenated across helper strings. They're injected globally via
+// ROOT_TOKEN_STYLES below so the names match what `animation: ngaf-chat-*`
+// references in component styles (which Angular leaves untouched).
 
 /**
  * Token defaults written to `<head>` once on first chat-component
@@ -136,6 +141,7 @@ const ROOT_TOKEN_STYLES = `
   :root[data-ngaf-chat-theme="dark"],
   [data-ngaf-chat-theme="dark"] { ${DARK_TOKENS} }
 }
+${KEYFRAMES}
 `;
 
 const STYLE_ELEMENT_ID = 'ngaf-chat-root-tokens';
diff --git a/libs/langgraph/package.json b/libs/langgraph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/langgraph",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "peerDependencies": {
     "@ngaf/chat": "*",
     "@ngaf/licensing": "*",
diff --git a/libs/langgraph/src/lib/agent.fn.ts b/libs/langgraph/src/lib/agent.fn.ts
@@ -184,7 +184,20 @@ export function agent<
 
   // ── Runtime-neutral projections ───────────────────────────────────────────
 
-  const messagesNeutral = computed<Message[]>(() => rawMessages().map(toMessage));
+  // Memoise BaseMessage → Message projections by raw-message identity. This
+  // keeps the projected `id` stable for the same logical message across
+  // recomputes (e.g. token-by-token streaming emits a fresh array but the
+  // BaseMessage reference is the same). Track-by-id in chat-message-list
+  // depends on this identity to avoid DOM teardown + animation restarts.
+  const messageProjections = new WeakMap<BaseMessage, Message>();
+  const projectMessage = (m: BaseMessage): Message => {
+    let cached = messageProjections.get(m);
+    if (cached) return cached;
+    cached = toMessage(m);
+    messageProjections.set(m, cached);
+    return cached;
+  };
+  const messagesNeutral = computed<Message[]>(() => rawMessages().map(projectMessage));
 
   const toolCallsNeutral = computed<ToolCall[]>(() => rawToolCalls().map(toToolCall));
 
diff --git a/libs/langgraph/src/lib/internals/stream-manager.bridge.spec.ts b/libs/langgraph/src/lib/internals/stream-manager.bridge.spec.ts
@@ -764,7 +764,9 @@ describe('createStreamManagerBridge', () => {
     await new Promise(r => setTimeout(r, 10));
 
     expect(subjects.messages$.value).toEqual([
-      { type: 'human', content: 'hello' },
+      // Optimistic human is stamped with a stable id so chat-message-list
+      // track-by-id keeps the same DOM across streaming re-emissions.
+      expect.objectContaining({ type: 'human', content: 'hello', id: expect.stringMatching(/^optimistic-/) }),
       { id: 'ai-1', type: 'ai', content: 'hello' },
     ]);
     destroy$.next();
diff --git a/libs/langgraph/src/lib/internals/stream-manager.bridge.ts b/libs/langgraph/src/lib/internals/stream-manager.bridge.ts
@@ -256,11 +256,21 @@ export function createStreamManagerBridge<T, ResolvedBag extends BagTemplate = B
     lastOptions = opts;
 
     // Optimistically inject human messages so they appear immediately
-    // without waiting for the server to echo them back.
+    // without waiting for the server to echo them back. Assign a stable id
+    // when missing — track-by-id in the chat-message-list relies on stable
+    // ids across re-emissions, otherwise the optimistic message gets torn
+    // down + recreated on every messages$.next() during streaming, which
+    // restarts caret/typing animations and causes visible flicker.
     const inputMessages = (payload as Record<string, unknown>)?.['messages'];
     if (Array.isArray(inputMessages) && inputMessages.length > 0) {
+      const stamped = (inputMessages as BaseMessage[]).map((m) => {
+        const raw = m as unknown as Record<string, unknown>;
+        if (typeof raw['id'] === 'string' && raw['id']) return m;
+        const id = `optimistic-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+        return { ...m, id } as BaseMessage;
+      });
       const existing = subjects.messages$.value;
-      subjects.messages$.next([...existing, ...inputMessages as BaseMessage[]]);
+      subjects.messages$.next([...existing, ...stamped]);
     }
 
     try {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ngaf/chat",`
`3`		`- "version": "0.0.9",`
	`3`	`+ "version": "0.0.10",`
`4`	`4`	`"exports": {`
`5`	`5`	`".": {`
`6`	`6`	`"types": "./index.d.ts",`
Original file line number	Diff line number	Diff line change
@@ -57,7 +57,7 @@ export const CHAT_INPUT_STYLES = `
`57`	`57`	`border: 0;`
`58`	`58`	`background: var(--ngaf-chat-primary);`
`59`	`59`	`color: var(--ngaf-chat-on-primary);`
`60`		`- border-radius: var(--ngaf-chat-radius-button);`
	`60`	`+ border-radius: 9999px;`
`61`	`61`	`cursor: pointer;`
`62`	`62`	`transition: transform 200ms ease, background 200ms ease;`
`63`	`63`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ngaf/langgraph",`
`3`		`- "version": "0.0.3",`
	`3`	`+ "version": "0.0.4",`
`4`	`4`	`"peerDependencies": {`
`5`	`5`	`"@ngaf/chat": "*",`
`6`	`6`	`"@ngaf/licensing": "*",`