feat(cockpit-chat): welcome chips backed by recorded aimock prompts (c-tool-calls, c-subagents, c-interrupts)

cockpit/chat/interrupts/angular/src/app/interrupts.component.ts

@@ -1,12 +1,24 @@
 // SPDX-License-Identifier: MIT
 import { Component, computed } from '@angular/core';
 import { JsonPipe } from '@angular/common';
-import { ChatComponent, ChatInterruptPanelComponent } from '@ngaf/chat';
+import {
+  ChatComponent,
+  ChatInterruptPanelComponent,
+  ChatWelcomeSuggestionComponent,
+} from '@ngaf/chat';
 import type { InterruptAction } from '@ngaf/chat';
 import { ExampleChatLayoutComponent } from '@ngaf/example-layouts';
 import { agent } from '@ngaf/langgraph';
 import { environment } from '../environments/environment';
 
+const SUGGESTIONS = [
+  // values match cockpit/chat/interrupts/angular/e2e/c-interrupts.spec.ts.
+  // Confirm flow: book + Accept → "Booked …"
+  { label: 'Book UA123 (confirm)', value: 'Book me on UA123.' },
+  // Cancel flow: book + Ignore → "Booking cancelled."
+  { label: 'Book AA404 (cancel)', value: 'Book me on AA404.' },
+] as const;
+
 /**
  * InterruptsComponent demonstrates human-in-the-loop approval gates
  * using ChatComponent and ChatInterruptPanelComponent.
@@ -16,14 +28,33 @@ import { environment } from '../environments/environment';
  *   Accept  → resume('confirm')   — the book_flight tool returns Booked …
  *   Ignore  → resume('cancel')    — the book_flight tool returns Booking cancelled.
  * Edit / Respond are not wired for this demo's single-decision booking flow.
+ *
+ * Welcome chips let users one-click into either recorded aimock flow.
+ * Chip labels hint at the modal action that produces the recorded path.
  */
 @Component({
   selector: 'app-interrupts',
   standalone: true,
-  imports: [ChatComponent, ChatInterruptPanelComponent, JsonPipe, ExampleChatLayoutComponent],
+  imports: [
+    ChatComponent,
+    ChatInterruptPanelComponent,
+    ChatWelcomeSuggestionComponent,
+    JsonPipe,
+    ExampleChatLayoutComponent,
+  ],
   template: `
     <example-chat-layout sidebarWidth="w-80">
-      <chat main [agent]="agent" class="flex-1 min-w-0" />
+      <chat main [agent]="agent" class="flex-1 min-w-0">
+        <div chatWelcomeSuggestions>
+          @for (s of suggestions; track s.value) {
+            <chat-welcome-suggestion
+              [label]="s.label"
+              [value]="s.value"
+              (selected)="send($event)"
+            />
+          }
+        </div>
+      </chat>
       <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--ngaf-chat-text-muted);">Interrupt Panel</h3>
@@ -44,6 +75,7 @@ export class InterruptsComponent {
   });
 
   protected readonly streamStatus = computed(() => this.agent.status());
+  protected readonly suggestions = SUGGESTIONS;
 
   protected onInterruptAction(action: InterruptAction): void {
     if (action === 'accept') {
@@ -53,4 +85,8 @@ export class InterruptsComponent {
     }
     // 'edit' and 'respond' are intentionally unhandled for the booking flow.
   }
+
+  protected send(text: string): void {
+    void this.agent.submit({ message: text });
+  }
 }

cockpit/chat/subagents/angular/src/app/subagents.component.ts

@@ -4,23 +4,47 @@ import {
   ChatComponent,
   ChatSubagentsComponent,
   ChatSubagentCardComponent,
+  ChatWelcomeSuggestionComponent,
 } from '@ngaf/chat';
 import { ExampleChatLayoutComponent } from '@ngaf/example-layouts';
 import { agent } from '@ngaf/langgraph';
 import { environment } from '../environments/environment';
 
+const SUGGESTIONS = [
+  // value matches cockpit/chat/subagents/angular/e2e/c-subagents.spec.ts PROMPT.
+  { label: 'Plan a trip', value: 'Plan a trip from LAX to JFK' },
+] as const;
+
 /**
  * SubagentsComponent demonstrates subagent orchestration with
  * ChatComponent and a sidebar showing ChatSubagentsComponent /
  * ChatSubagentCardComponent for tracking active subagents.
+ *
+ * Welcome chip lets users one-click into the cap's recorded aimock flow.
  */
 @Component({
   selector: 'app-subagents',
   standalone: true,
-  imports: [ChatComponent, ChatSubagentsComponent, ChatSubagentCardComponent, ExampleChatLayoutComponent],
+  imports: [
+    ChatComponent,
+    ChatSubagentsComponent,
+    ChatSubagentCardComponent,
+    ChatWelcomeSuggestionComponent,
+    ExampleChatLayoutComponent,
+  ],
   template: `
     <example-chat-layout sidebarWidth="w-80">
-      <chat main [agent]="agent" class="flex-1 min-w-0" />
+      <chat main [agent]="agent" class="flex-1 min-w-0">
+        <div chatWelcomeSuggestions>
+          @for (s of suggestions; track s.value) {
+            <chat-welcome-suggestion
+              [label]="s.label"
+              [value]="s.value"
+              (selected)="send($event)"
+            />
+          }
+        </div>
+      </chat>
       <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--ngaf-chat-text-muted);">Active Subagents</h3>
@@ -44,4 +68,10 @@ export class SubagentsComponent {
     apiUrl: environment.langGraphApiUrl,
     assistantId: environment.streamingAssistantId,
   });
+
+  protected readonly suggestions = SUGGESTIONS;
+
+  protected send(text: string): void {
+    void this.agent.submit({ message: text });
+  }
 }

cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts

@@ -4,22 +4,46 @@ import {
   ChatComponent,
   ChatToolCallsComponent,
   ChatToolCallCardComponent,
+  ChatWelcomeSuggestionComponent,
 } from '@ngaf/chat';
 import { ExampleChatLayoutComponent } from '@ngaf/example-layouts';
 import { agent } from '@ngaf/langgraph';
 import { environment } from '../environments/environment';
 
+const SUGGESTIONS = [
+  // value matches cockpit/chat/tool-calls/angular/e2e/c-tool-calls.spec.ts PROMPT.
+  { label: 'Look up flight UA123', value: "What's the status of UA123?" },
+] as const;
+
 /**
  * ToolCallsComponent demonstrates tool calling with ChatComponent
  * and a sidebar showing ChatToolCallsComponent / ChatToolCallCardComponent.
+ *
+ * Welcome chip lets users one-click into the cap's recorded aimock flow.
  */
 @Component({
   selector: 'app-tool-calls',
   standalone: true,
-  imports: [ChatComponent, ChatToolCallsComponent, ChatToolCallCardComponent, ExampleChatLayoutComponent],
+  imports: [
+    ChatComponent,
+    ChatToolCallsComponent,
+    ChatToolCallCardComponent,
+    ChatWelcomeSuggestionComponent,
+    ExampleChatLayoutComponent,
+  ],
   template: `
     <example-chat-layout sidebarWidth="w-80">
-      <chat main [agent]="agent" class="flex-1 min-w-0" />
+      <chat main [agent]="agent" class="flex-1 min-w-0">
+        <div chatWelcomeSuggestions>
+          @for (s of suggestions; track s.value) {
+            <chat-welcome-suggestion
+              [label]="s.label"
+              [value]="s.value"
+              (selected)="send($event)"
+            />
+          }
+        </div>
+      </chat>
       <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
             style="color: var(--ngaf-chat-text-muted);">Tool Calls</h3>
@@ -42,4 +66,10 @@ export class ToolCallsComponent {
     apiUrl: environment.langGraphApiUrl,
     assistantId: environment.streamingAssistantId,
   });
+
+  protected readonly suggestions = SUGGESTIONS;
+
+  protected send(text: string): void {
+    void this.agent.submit({ message: text });
+  }
 }