nlkitai/nlux

Enable conversation starters

salmenus opened this issue · 9 comments

salmenus commented

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:
    Image
MichaelHefetz commented

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 commented

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

  • ❤️1
somebodyawesome-dev commented

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

salmenus commented

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

somebodyawesome-dev commented

linked to #91

  • 👍1
salmenus commented

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 🙌 😎

  • ❤️1
MichaelHefetz commented

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

image

salmenus commented

@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.

  • 👍1