Skip to main content
Version: v2.x

Welcome Message


By default, the assistant persona avatar, name, and tagline are displayed in the chat window when the conversation is empty. When no assistant persona is provided, the NLUX logo is displayed instead.

You can disable this behavior by setting the conversationOptions.showWelcomeMessage prop to false.

import {useMemo} from 'react';
import {AiChat, AssistantPersona} from '@nlux/react';
import '@nlux/themes';
import {streamAdapter} from './adapter';
import {useDemoOptions, userPersona} from './setup';

export default () => {
  const adapter = useMemo(() => streamAdapter, []);
  const [InteractiveDemoOptions, shouldUseAssistantPersona, showWelcomeMessage] = useDemoOptions();
  const assistantPersona: AssistantPersona = useMemo(() => ({
    name: 'HarryBotter',
    avatar: 'https://docs.nlkit.com/nlux/images/personas/harry-botter.png',
    tagline: 'Welcome to Hogwarts! How may I assist you today?'
  }), []);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '90vh' }}>
      <InteractiveDemoOptions />
      <AiChat
        conversationOptions={{
          showWelcomeMessage
        }}
        personaOptions={{
          assistant: shouldUseAssistantPersona ? assistantPersona : undefined,
          user: userPersona
        }}
        adapter={adapter}
        displayOptions={{colorScheme: 'dark'}}
      />
    </div>
  );
};


Learn More About Chat Personas