feat(ai-chat): add follow-up prompts

Author: robertwilde

api-goldens/element-ng/chat-messages/index.api.md

@@ -108,6 +108,8 @@ export class SiChatInputComponent implements AfterViewInit {
     readonly disclaimer: _angular_core.InputSignal<TranslatableString_2 | undefined>;
     readonly fileError: _angular_core.OutputEmitterRef<FileUploadError>;
     focus(): void;
+    readonly followUpPrompts: _angular_core.InputSignal<string[]>;
+    readonly followUpPromptSelected: _angular_core.OutputEmitterRef<string>;
     readonly interrupt: _angular_core.OutputEmitterRef<void>;
     readonly interruptButtonLabel: _angular_core.InputSignal<TranslatableString_2>;
     readonly interruptible: _angular_core.InputSignalWithTransform<boolean, unknown>;

docs/components/chat-messages/chat-input.md

@@ -60,10 +60,33 @@ If multiple attachments are added, they wrap and stack within the input field to
 
 ![Chat input attachments](images/chat-input-attachments.png)
 
+### Follow-up prompts
+
+Follow-up prompts are suggested next actions displayed as pill buttons above the chat input after an AI response.
+They help users continue the conversation without having to formulate the next message from scratch.
+
+- Prompts wrap to multiple lines when labels are long.
+- Selecting a prompt inserts its text into the input field so the user can review or edit before sending.
+- The prompt list is cleared when the user sends a message.
+
 ## Code ---
 
 <si-docs-component example="si-chat-messages/si-chat-input"></si-docs-component>
 
+### Follow-up prompts
+
+Pass a `string[]` to `followUpPrompts` to display suggested prompts above the input.
+When the user clicks a prompt, its text is inserted into the input and `followUpPromptSelected` is emitted.
+Clear the list (set to `[]`) on send and repopulate it after each AI response.
+
+```html
+<si-chat-input
+  [followUpPrompts]="aiResponse?.followUpPrompts ?? []"
+  (followUpPromptSelected)="onFollowUpSelected()"
+  (send)="onSend($event)"
+/>
+```
+
 <si-docs-api component="SiChatInputComponent"></si-docs-api>
 
 <si-docs-types></si-docs-types>

docs/patterns/ai/ai-chat.md

@@ -22,6 +22,7 @@ AI chat is useful when users describe tasks in their own words and expect struct
 - Keep the conversation focused, avoid unnecessary messages.
 - Place the AI in a clearly defined visual space.
 - Output can be styled as needed using the [typography system](../../fundamentals/typography.md).
+- Use [follow-up prompts](../../components/chat-messages/chat-input.md#follow-up-prompts) after AI responses to help users continue the conversation without formulating the next message from scratch.
 
 ## Design ---
 

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-dark-linux.png

@@ -1,3 +1,17 @@
+@if (followUpPrompts().length) {
+  <div class="follow-up-prompts d-flex flex-wrap gap-4 mb-4">
+    @for (prompt of followUpPrompts(); track $index) {
+      <button
+        type="button"
+        class="btn btn-secondary-ghost btn-sm follow-up-prompt-btn"
+        [disabled]="disabled() || sending()"
+        (click)="selectFollowUpPrompt(prompt)"
+        >{{ prompt }}</button
+      >
+    }
+  </div>
+}
+
 <div
   class="input-wrapper border rounded-3 bg-body"
   [class.drag-over]="dragOver"

playwright/snapshots/static.spec.ts-snapshots/si-chat-messages--si-chat-container-element-examples-chromium-light-linux.png

@@ -48,3 +48,16 @@
 .disclaimer-wrapper:empty {
   display: none;
 }
+
+.follow-up-prompt-btn {
+  --btn-font-weight: #{variables.$si-font-weight-normal};
+  --btn-color: #{variables.$element-text-primary};
+  --btn-color-hover: #{variables.$element-text-primary};
+  --btn-color-active: #{variables.$element-text-primary};
+  --btn-border-color: #{variables.$element-ui-3};
+  padding-block: calc(#{map.get(variables.$spacers, 4)} - 1px);
+  padding-inline: calc(#{map.get(variables.$spacers, 4)} - 1px);
+  min-inline-size: 0;
+  white-space: normal;
+  text-align: start;
+}

projects/element-ng/chat-messages/si-chat-input.component.html

@@ -275,6 +275,20 @@ export class SiChatInputComponent implements AfterViewInit {
     t(() => $localize`:@@SI_CHAT_INPUT.SECONDARY_ACTIONS:More actions`)
   );
 
+  /**
+   * Suggested follow-up prompts to display as pill buttons above the chat input.
+   * When a prompt is selected, its text is inserted into the input field.
+   * Typically populated from AI response data and cleared on send.
+   * @defaultValue []
+   */
+  readonly followUpPrompts = input<string[]>([]);
+
+  /**
+   * Emitted when the user selects a follow-up prompt.
+   * The emitted value is the text of the selected prompt.
+   */
+  readonly followUpPromptSelected = output<string>();
+
   /**
    * Emitted when the user wants to send a message
    */
@@ -326,6 +340,18 @@ export class SiChatInputComponent implements AfterViewInit {
     this.value.set(value);
   }
 
+  protected selectFollowUpPrompt(prompt: string): void {
+    this.value.set(prompt);
+    this.followUpPromptSelected.emit(prompt);
+    this.focus();
+    setTimeout(() => {
+      const textarea = this.textInput();
+      if (textarea?.nativeElement) {
+        this.setTextareaHeight(textarea.nativeElement);
+      }
+    });
+  }
+
   protected onSend(): void {
     if (this.canSend()) {
       this.send.emit({

projects/element-ng/chat-messages/si-chat-input.component.scss

@@ -58,7 +58,7 @@
 
     @if (!firstMessageSent() && messages().length) {
       <si-inline-notification
-        class="mb-6 w-100 overflow-hidden"
+        class="mb-4 w-100 overflow-hidden"
         severity="info"
         message="AI responses are for demonstration purposes."
       />
@@ -76,8 +76,10 @@
       [maxFileSize]="5242880"
       [sending]="sending()"
       [interruptible]="loading() && !sending()"
+      [followUpPrompts]="followUpPrompts()"
       [(value)]="inputValue"
       (send)="onMessageSent($event)"
+      (followUpPromptSelected)="followUpPrompts.set([])"
       (interrupt)="onInterrupt()"
       (fileError)="onFileError($event)"
     >

projects/element-ng/chat-messages/si-chat-input.component.ts

@@ -162,6 +162,11 @@ export class SampleComponent {
 
   readonly loading = signal(false);
   readonly sending = signal(false);
+  readonly followUpPrompts = signal<string[]>([
+    'What are the risks if this insight is ignored?',
+    'Show related insights from similar customer events.',
+    'Summarize this insight in 2 bullet points for presentation.'
+  ]);
   readonly disabled = signal(false);
   readonly disableInterrupt = signal(false);
   readonly interrupting = signal(false);
@@ -265,6 +270,7 @@ export class SampleComponent {
   onMessageSent(event: { content: string; attachments: ChatInputAttachment[] }): void {
     this.logEvent(`Message sent: "${event.content}" with ${event.attachments.length} attachments`);
     this.firstMessageSent.set(true);
+    this.followUpPrompts.set([]);
     this.messages.update(current => [
       ...current,
       {
@@ -327,6 +333,12 @@ export class SampleComponent {
             ]
           }
         ]);
+        this.followUpPrompts.set([
+          'What are the risks if this insight is ignored?',
+          'Show related insights from similar customer events.',
+          'Summarize this insight in 2 bullet points for presentation.',
+          'Generate a summary report'
+        ]);
         this.loading.set(false);
       }, 2000);
     }, 1000);