Conversation Starters

---

With NLUX, you have the option to define conversation starters. These starters are displayed beneath the chat persona when there is no existing chat history.

Each conversation starter must include a prompt property and can optionally include an icon (as a string or JSX element) and a label (which, if provided, will be displayed instead of the prompt's text).

To specify conversation starters, set them using conversationOptions.conversationStarters.

Open Sandbox

import { AiChat, useAsStreamAdapter } from '@nlux/react';
import '@nlux/themes/nova.css';

import { send } from './send';
import { userPersona, assistantPersona } from './setup';

export default () => {
  const adapter = useAsStreamAdapter(send, []);

  return (
    <div style={{ display: 'flex', width: '100%', flexDirection: 'column', height: '90vh' }}>
      <AiChat
        conversationOptions={{
            conversationStarters: [
                {
                    icon: <span>📝</span>,
                    label: 'Write a poem',
                    prompt: 'Write a poem about the stars and magic, using the words "twinkle" and "sparkle".'
                },
                {
                    icon: 'https://content.nlkit.com/logos/nlkit.png',
                    prompt: 'What is your favorite color?'
                },
                {
                    prompt: 'When did you decide to become a magician?'
                }
            ]
        }}
        personaOptions={{
          assistant: assistantPersona,
          user: userPersona
        }}
        adapter={ adapter }
        displayOptions={{ colorScheme: 'dark' }}
      />
    </div>
  );
};