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>
  );
};