feat: Prompt suggestions for ui.chatbot #2250

[marek-mihok]

The PR fulfills these requirements: (check all the apply)

• It's submitted to the main branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
• When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• If changes were made to ui folder, unit tests (make test) still pass.
• New/updated tests are included

---

This PR brings suggestions: ChatSuggestion[] attribute to show clickable prompt suggestions under the last response in ui.chatbot component. When the suggestion is clicked, it fires suggestion event which can subsequently be handled by the user.

The user input can be limited to prompt suggestions only by specifying disabled prop which disables user input or it can be used in a combination with text input as well.

Updated API is as follows:

/** Create a chat prompt suggestion displayed as button below the last response in the chatbot component. */
export interface ChatSuggestion {
  /** An identifying name for this component. */
  name: Id
  /** The text displayed for this suggestion. */
  label: S
  /** The caption displayed below the label. */
  caption?: S
  /** The icon to be displayed for this suggestion. */
  icon?: S
}

/** Create a chatbot card to allow getting prompts from users and providing them with LLM generated answers. */
export interface Chatbot {
  /** An identifying name for this component. */
  name: Id
  /** Chat messages data. Requires list or cyclic buffer. */
  data: Rec
  /** Chat input box placeholder. Use for prompt examples. */
  placeholder?: S
  /** The events to capture on this chatbot. One of 'stop' | 'scroll_up' | 'feedback' | 'prompt_suggestion'. */
  events?: S[]
  /** True to show a button to stop the text generation. Defaults to False. */
  generating?: B
  /** The previous messages to show as the user scrolls up. */
  prev_items?: ChatbotMessage[]
  /** Clickable prompt suggestions shown below the last response. */
  suggestions?: ChatSuggestion[]
  /** True if the user input should be disabled. */
  disabled?: B
}

The same API update also applies to ui.chatbot_card component.

Closes #2250

[mturoci]

Thanks @marek-mihok.

• The suggestions could use some styling, they do not need to look like raw buttons.
• Position suggestions into a grid rather than vertically - similar to other big chat players.
• The example could use some polish as well, it's very rough at the moment.

[marek-mihok]

First 2 points are done:

• Initial "head start" suggestions with captions and icons

Screen.Recording.2024-02-14.at.14.16.54.mov

• Prompt "in-chat" suggestions

Screen.Recording.2024-02-14.at.14.19.52.mov

The example could use some polish as well, it's very rough at the moment.

@mturoci what do you mean by rough? In terms of code quality or the use case relevance? Can you give me some thoughts about what you consider a proper example?

[mturoci]

what do you mean by rough?

Would that demo persuade you to use Wave? Probably not. Would be better to append the suggestion right away, but add a slight timeout on suggestion selection to emulate computation, hide suggestions in the meantime, then append the response.

[mturoci]

First 2 points are done:

Looks better, the border radius is off though. Try to use the same as used in the rest of our cards/components.

[mturoci]

Looks good, just a few small comments.