Demo: full-width top toolbar + forward chatWelcomeSuggestions to sidebar/popup

examples/chat/angular/src/app/modes/sidebar-mode.component.ts

@@ -30,14 +30,25 @@ import { WelcomeSuggestionsComponent } from './welcome-suggestions.component';
     </chat-sidebar>
   `,
   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;
       height: 100%;
       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 {

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);
+}

examples/chat/angular/src/app/shell/demo-shell.component.html

@@ -9,6 +9,56 @@
     >☰</button>
   }
 
+  <div class="demo-shell__toolbar" role="toolbar" aria-label="Demo controls">
+    <div class="demo-shell__segmented" aria-label="Mode">
+      @for (option of modeOptions; track option.value) {
+        <button
+          type="button"
+          class="demo-shell__segmented-button"
+          [class.is-active]="mode() === option.value"
+          [attr.aria-pressed]="mode() === option.value"
+          (click)="onModeChange(option.value)"
+        >{{ option.label }}</button>
+      }
+    </div>
+
+    <div class="demo-shell__field demo-shell__field--first" data-field="model">
+      <chat-select
+        [options]="modelOptions()"
+        [value]="model()"
+        menuLabel="Model"
+        (valueChange)="onModelChange($event)"
+      />
+    </div>
+
+    <div class="demo-shell__field" data-field="effort">
+      <chat-select
+        [options]="effortOptions()"
+        [value]="effort()"
+        menuLabel="Effort"
+        (valueChange)="onEffortChange($event)"
+      />
+    </div>
+
+    <div class="demo-shell__field" data-field="genui">
+      <chat-select
+        [options]="genUiOptions()"
+        [value]="genUiMode()"
+        menuLabel="Gen UI"
+        (valueChange)="onGenUiModeChange($event)"
+      />
+    </div>
+
+    <div class="demo-shell__field" data-field="theme">
+      <chat-select
+        [options]="themeOptions()"
+        [value]="theme()"
+        menuLabel="Theme"
+        (valueChange)="onThemeChange($event)"
+      />
+    </div>
+  </div>
+
   <chat-sidenav
     [threads]="visibleThreads()"
     [archivedThreads]="threadsSvc.archivedThreads()"
@@ -62,56 +112,6 @@
     class="demo-shell__main"
     [attr.data-sidenav-mode]="sidenavMode() !== 'drawer' ? sidenavMode() : null"
   >
-    <div class="demo-shell__toolbar" role="toolbar" aria-label="Demo controls">
-      <div class="demo-shell__segmented" aria-label="Mode">
-        @for (option of modeOptions; track option.value) {
-          <button
-            type="button"
-            class="demo-shell__segmented-button"
-            [class.is-active]="mode() === option.value"
-            [attr.aria-pressed]="mode() === option.value"
-            (click)="onModeChange(option.value)"
-          >{{ option.label }}</button>
-        }
-      </div>
-
-      <div class="demo-shell__field demo-shell__field--first" data-field="model">
-        <chat-select
-          [options]="modelOptions()"
-          [value]="model()"
-          menuLabel="Model"
-          (valueChange)="onModelChange($event)"
-        />
-      </div>
-
-      <div class="demo-shell__field" data-field="effort">
-        <chat-select
-          [options]="effortOptions()"
-          [value]="effort()"
-          menuLabel="Effort"
-          (valueChange)="onEffortChange($event)"
-        />
-      </div>
-
-      <div class="demo-shell__field" data-field="genui">
-        <chat-select
-          [options]="genUiOptions()"
-          [value]="genUiMode()"
-          menuLabel="Gen UI"
-          (valueChange)="onGenUiModeChange($event)"
-        />
-      </div>
-
-      <div class="demo-shell__field" data-field="theme">
-        <chat-select
-          [options]="themeOptions()"
-          [value]="theme()"
-          menuLabel="Theme"
-          (valueChange)="onThemeChange($event)"
-        />
-      </div>
-    </div>
-
     <router-outlet />
     @if (agent.interrupt && agent.interrupt()) {
       <div class="demo-shell__interrupt-panel" role="region" aria-label="Approval required">

libs/a2ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/a2ui",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "license": "MIT",
   "repository": {
     "type": "git",

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": "*",

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",

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)"
       >
         <ng-content select="[chatHeader]" chatHeader />
+        <ng-content select="[chatWelcomeSuggestions]" chatWelcomeSuggestions />
       </chat>
     </div>
   `,

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)"
       >
         <ng-content select="[chatHeader]" chatHeader />
+        <ng-content select="[chatWelcomeSuggestions]" chatWelcomeSuggestions />
       </chat>
     </aside>
   `,

libs/langgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/langgraph",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "peerDependencies": {
     "@ngaf/chat": "*",
     "@ngaf/licensing": "*",

libs/licensing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/licensing",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "license": "MIT",
   "repository": {
     "type": "git",

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",

libs/telemetry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/telemetry",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "license": "MIT",
   "publishConfig": {
     "access": "public"