From 9b28ee65bf329c87c6ff1d4e9994ac9b252478e5 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Mon, 18 May 2026 16:42:53 -0700 Subject: [PATCH 1/4] feat(chat): forward chatWelcomeSuggestions slot from chat-sidebar + chat-popup --- .../chat/src/lib/compositions/chat-popup/chat-popup.component.ts | 1 + .../src/lib/compositions/chat-sidebar/chat-sidebar.component.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts index 06e9d3fb..5424f11a 100644 --- a/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts +++ b/libs/chat/src/lib/compositions/chat-popup/chat-popup.component.ts @@ -75,6 +75,7 @@ import { CHAT_HOST_TOKENS, ensureChatRootStyles } from '../../styles/chat-tokens (forkRequested)="forkRequested.emit($event)" > + `, diff --git a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts index 2d17169c..f650ac56 100644 --- a/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts +++ b/libs/chat/src/lib/compositions/chat-sidebar/chat-sidebar.component.ts @@ -92,6 +92,7 @@ import { CHAT_HOST_TOKENS, ensureChatRootStyles } from '../../styles/chat-tokens (forkRequested)="forkRequested.emit($event)" > + `, From 5ada12e001574078fa43ea879c78e6663620e6d2 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Mon, 18 May 2026 16:43:59 -0700 Subject: [PATCH 2/4] feat(demo): full-width toolbar at top, push fixed chrome below it --- .../src/app/shell/demo-shell.component.css | 21 +++- .../src/app/shell/demo-shell.component.html | 100 +++++++++--------- 2 files changed, 69 insertions(+), 52 deletions(-) diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.css b/examples/chat/angular/src/app/shell/demo-shell.component.css index 85a0d430..a3cf16d9 100644 --- a/examples/chat/angular/src/app/shell/demo-shell.component.css +++ b/examples/chat/angular/src/app/shell/demo-shell.component.css @@ -5,8 +5,12 @@ .demo-shell { position: relative; - display: block; + display: flex; + flex-direction: column; height: 100%; + /* Publish the toolbar height as a CSS var so fixed-position overlays + * (chat-sidenav, chat-sidebar panel) can clear it. */ + --demo-toolbar-height: 51px; } .demo-shell__hamburger { @@ -34,7 +38,8 @@ } .demo-shell__main { - height: 100%; + flex: 1; + min-height: 0; transition: padding-left 200ms ease; padding-left: 0; display: flex; @@ -177,3 +182,15 @@ background: var(--ngaf-chat-surface-alt); color: var(--ngaf-chat-text); } + +/* The toolbar is full-width at the top of the page. Fixed-position + * chrome (chat-sidenav, chat-sidebar panel) lives at top:0 by default + * — push them down by the toolbar height so they don't render + * underneath. Scoped to .demo-shell so the chat library's own + * positioning is unchanged for consumers without a top toolbar. */ +.demo-shell ::ng-deep chat-sidenav { + top: var(--demo-toolbar-height); +} +.demo-shell ::ng-deep .chat-sidebar__panel { + top: var(--demo-toolbar-height); +} 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 31ed127d..1ce08778 100644 --- a/examples/chat/angular/src/app/shell/demo-shell.component.html +++ b/examples/chat/angular/src/app/shell/demo-shell.component.html @@ -9,6 +9,56 @@ >☰ } + + - - @if (agent.interrupt && agent.interrupt()) {
From 462f83dbf9452147f31cfa392ec7941a7b4583a0 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Mon, 18 May 2026 16:44:43 -0700 Subject: [PATCH 3/4] chore(release): bump publishable libs to 0.0.41 --- libs/a2ui/package.json | 2 +- libs/ag-ui/package.json | 2 +- libs/chat/package.json | 2 +- libs/langgraph/package.json | 2 +- libs/licensing/package.json | 2 +- libs/render/package.json | 2 +- libs/telemetry/package.json | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/libs/a2ui/package.json b/libs/a2ui/package.json index 6c6b3ea2..c168fa0e 100644 --- a/libs/a2ui/package.json +++ b/libs/a2ui/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/a2ui", - "version": "0.0.40", + "version": "0.0.41", "license": "MIT", "repository": { "type": "git", diff --git a/libs/ag-ui/package.json b/libs/ag-ui/package.json index b63f5210..92ae7000 100644 --- a/libs/ag-ui/package.json +++ b/libs/ag-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/ag-ui", - "version": "0.0.40", + "version": "0.0.41", "peerDependencies": { "@ngaf/chat": "*", "@ngaf/licensing": "*", diff --git a/libs/chat/package.json b/libs/chat/package.json index a146cc0a..17bc6ff1 100644 --- a/libs/chat/package.json +++ b/libs/chat/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/chat", - "version": "0.0.40", + "version": "0.0.41", "exports": { "./chat.css": "./chat.css", "./themes/default-dark.css": "./themes/default-dark.css", diff --git a/libs/langgraph/package.json b/libs/langgraph/package.json index ad52d30f..dd3f93b9 100644 --- a/libs/langgraph/package.json +++ b/libs/langgraph/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/langgraph", - "version": "0.0.40", + "version": "0.0.41", "peerDependencies": { "@ngaf/chat": "*", "@ngaf/licensing": "*", diff --git a/libs/licensing/package.json b/libs/licensing/package.json index 74081fad..9dcd8310 100644 --- a/libs/licensing/package.json +++ b/libs/licensing/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/licensing", - "version": "0.0.40", + "version": "0.0.41", "license": "MIT", "repository": { "type": "git", diff --git a/libs/render/package.json b/libs/render/package.json index e4a2e6ad..e6a52628 100644 --- a/libs/render/package.json +++ b/libs/render/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/render", - "version": "0.0.40", + "version": "0.0.41", "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 f28a898e..832e781a 100644 --- a/libs/telemetry/package.json +++ b/libs/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@ngaf/telemetry", - "version": "0.0.40", + "version": "0.0.41", "license": "MIT", "publishConfig": { "access": "public" From fe4644e7407db24276eb10a5629973316a84f745 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Mon, 18 May 2026 20:55:56 -0700 Subject: [PATCH 4/4] fix(demo): collapse chat-sidebar host in sidebar mode, constrain sidenav height MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three fixes that together eliminate the /sidebar overflow + close-button occlusion the user reported after PR #444's full-width toolbar landed: 1. chat-sidebar's only visible chrome is position: fixed (panel + launcher). Set its host to display: contents in sidebar-mode so it drops from the layout flow and doesn't stack below .sidebar-mode__background. 2. The chat-sidebar default content slot (.chat-sidebar__content) has min-height: 100vh — meant for push-mode consumers' page content. The demo doesn't use that slot; display: none on it here, so it doesn't add a second 100vh row to the demo's main column. 3. chat-sidenav's host has height: 100% plus position: fixed and bottom: 0. With our top: var(--demo-toolbar-height) override, the explicit height kept the sidenav at full viewport (extending ~51px past the bottom). Clamp it to calc(100% - var(--demo-toolbar-height)). --- .../angular/src/app/modes/sidebar-mode.component.ts | 13 ++++++++++++- .../angular/src/app/shell/demo-shell.component.css | 5 +++++ 2 files changed, 17 insertions(+), 1 deletion(-) 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 991ad70c..ffa16666 100644 --- a/examples/chat/angular/src/app/modes/sidebar-mode.component.ts +++ b/examples/chat/angular/src/app/modes/sidebar-mode.component.ts @@ -30,7 +30,11 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component'; `, styles: [` - :host { display: block; flex: 1; min-height: 0; } + /* chat-sidebar's visible chrome is position: fixed (panel + launcher), + * so its host element doesn't need to take layout space. Use + * display: contents on the host to drop it from the flow, and let + * the sibling .sidebar-mode__background fill the visible area. */ + :host { display: block; flex: 1; min-height: 0; position: relative; } .sidebar-mode__background { display: grid; place-items: center; @@ -38,6 +42,13 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component'; color: #8a92a3; font-size: 14px; } + :host ::ng-deep > chat-sidebar { display: contents; } + /* The chat-sidebar default content slot (.chat-sidebar__content) is + * meant for the consumer's page content when chat-sidebar is in + * push mode. The demo uses .sidebar-mode__background instead, so + * hide the default content slot — its min-height: 100vh would + * otherwise stack below the background and overflow the page. */ + :host ::ng-deep .chat-sidebar__content { display: none; } `], }) export class SidebarMode { diff --git a/examples/chat/angular/src/app/shell/demo-shell.component.css b/examples/chat/angular/src/app/shell/demo-shell.component.css index a3cf16d9..59dd198c 100644 --- a/examples/chat/angular/src/app/shell/demo-shell.component.css +++ b/examples/chat/angular/src/app/shell/demo-shell.component.css @@ -190,6 +190,11 @@ * positioning is unchanged for consumers without a top toolbar. */ .demo-shell ::ng-deep chat-sidenav { top: var(--demo-toolbar-height); + /* chat-sidenav has `height: 100%` on :host plus position: fixed + bottom: 0. + * With our top override the explicit height "wins" and the sidenav extends + * past the viewport (top + 100% > 100vh). Constrain the height to the + * viewport minus the toolbar. */ + height: calc(100% - var(--demo-toolbar-height)); } .demo-shell ::ng-deep .chat-sidebar__panel { top: var(--demo-toolbar-height);