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 85a0d430..59dd198c 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,20 @@ 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); + /* 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); +} 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()) {
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/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)" > + `, 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"