feat(chat-messages): add follow-up prompts#2082
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces follow-up prompts to the SiChatInputComponent, enabling users to select suggested actions that populate the chat input field. The implementation includes new input and output signals, template updates for rendering prompt buttons, and corresponding documentation and styling. Feedback from the review suggests using $index for tracking in the @for loop to avoid issues with duplicate strings, disabling prompt buttons while a message is being sent, and ensuring the textarea height is recalculated after a prompt is selected.
robertwilde
force-pushed
the
feat/ai/follow-up-prompts
branch
3 times, most recently
from
f3d97be to
0ff44dd
Compare
|
@panch1739 check this out :) |
panch1739
left a comment
panch1739
left a comment
There was a problem hiding this comment.
@robertwilde Nice! One only note, the button should have a total height of 32px and the gap between them, 8px :)
Thank you so much!
robertwilde
force-pushed
the
feat/ai/follow-up-prompts
branch
2 times, most recently
from
c8c7230 to
b0f5be7
Compare
| } | ||
|
|
||
| protected selectFollowUpPrompt(prompt: string): void { | ||
| this.value.set(prompt); |
There was a problem hiding this comment.
we set the value here but expect consumer to reset the followUpPromptSelected. IMO either we should do both or delegate that responsibility to consumer
| this.value.set(value); | ||
| } | ||
|
|
||
| protected selectFollowUpPrompt(prompt: string): void { |
There was a problem hiding this comment.
please add test coverage for this
| @for (prompt of followUpPrompts(); track $index) { | ||
| <button | ||
| type="button" | ||
| class="btn btn-secondary-ghost btn-sm follow-up-prompt-btn" |
There was a problem hiding this comment.
I think what you need here is:
class="btn btn-secondary-ghost fw-normal"
and then you also don't need those custom styles of follow-up-prompt-btn
| this.value.set(prompt); | ||
| this.followUpPromptSelected.emit(prompt); | ||
| this.focus(); | ||
| setTimeout(() => { |
There was a problem hiding this comment.
Do not use setTimeout can you propose an alternative?
| @if (followUpPrompts().length) { | ||
| <div class="follow-up-prompts d-flex flex-wrap gap-4 mb-4"> | ||
| @for (prompt of followUpPrompts(); track $index) { | ||
| <button |
There was a problem hiding this comment.
We should discuss whether we want input/output or a declarative approach which use content projection. A directive could handle the disabled state and applyy the default classes
robertwilde
changed the title
robertwilde
force-pushed
the
feat/ai/follow-up-prompts
branch
3 times, most recently
from
c5b46a4 to
3c054ee
Compare
robertwilde
force-pushed
the
feat/ai/follow-up-prompts
branch
from
3c054ee to
2bdc707
Compare
4 participants
Closes #2066
Adds follow-up prompt support to SiChatInputComponent. A new followUpPrompts input (string[]) renders suggested next actions as pill buttons above the chat input; clicking a prompt inserts its text into the input field and emits a followUpPromptSelected output so the consuming application can react (e.g. clear the list). The si-chat-container example is updated to demonstrate the feature with three realistic prompts. Documentation is updated in both the chat input component page and the AI chat pattern page.
Documentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: