Enable conversation starters

[salmenus]

Add an option to allow developers to add conversation starters.

• Option: conversationOptions.conversationStarters: ConversationStarter[]
• Types:

type ConversationStarter {
    prompt: string;
    label?: string;
    icon?: string | JSX.Element;
}

• Behaviour:

• When the conversation is empty (no history, no prompt submitted yet), if the conversationStarters is provided, display a list possible conversation starters matching the options provided.
• When the user clicks on one of the conversation starters, submit the value in the prompt attribute to the chat.
• If the submission fails, re-display conversation starters.
• If too many conversation starters are provided and cannot fit in the UI, activate horizontal scrolling.

• Equivalent feature in ChatGPT UI:
  

[salmenus]

Feature now available here: https://docs.nlkit.com/nlux/examples/conversation-starters

[MichaelHefetz]

Hi, any chance to implement the label and icon as in the proposal? Currently only prompt is used inside the starter card
Thank you

[salmenus]

Hi @MichaelHefetz — Sure, we can get that for you.
Re-opening. I'll post an update here once it's ready (ETA 48h)

[somebodyawesome-dev]

I will work on this ticket. and finish up the missing details

[salmenus]

Thanks @somebodyawesome-dev — Much appreciated 🙌
Ping me on Discord if you need any help

[somebodyawesome-dev]

linked to #91

[salmenus]

PR merged and change published. Ready for you @MichaelHefetz

Config example:

conversationOptions={{
    conversationStarters: [
        {
            icon: <span>📝</span>, // When string is provided, it will be considered an image URL
            label: 'Write a poem',
            prompt: 'Write a poem about the stars and magic, using the words "twinkle" and "sparkle".'
       },
       {prompt: 'What is your name?'},
       {prompt: 'What is your favorite color?'}
    ]
}}

Prompt is the only required attribute.
Give it a try and let us know how it works for you @MichaelHefetz

Thanks @somebodyawesome-dev for delivering this 🙌 😎

[MichaelHefetz]

Thank you! It works now :)
The only issue is with the long labels/prompts. The ellipsis is gone now and also the bottom padding

[salmenus]

@MichaelHefetz feature updated in 2.8.2 — Ellipsis should work now.
https://docs.nlkit.com/nlux/examples/conversation-starters

Also you can easily configure dimensions of the boxes using CSS:
https://github.com/nlkitai/nlux/blob/latest/packages/css/themes/src/dev/layout.css#L22

I hope this solves all your problems.
Closing if no further comments.