Bot Persona

With nlux, you can optionally define a bot persona and a user persona.
Here are some examples of how you can configure the bot persona.

Learn More About Chat Personas

---

Bot Persona With Photo URL As Picture

Open Sandbox

import {useMemo} from 'react';
import {AiChat} from '@nlux/react';
import '@nlux/themes/nova.css';
import {streamAdapter} from './adapter';
import {user} from './personas';

export default () => {
  const adapter = useMemo(() => streamAdapter, []);
  return (
    <AiChat
      adapter={adapter}
      personaOptions={{
        bot: {
          name: 'HarryBotter',
          picture: 'https://nlux.ai/images/demos/persona-harry-botter.jpg',
          tagline: 'Mischievously Making Magic With Mirthful AI!',
        },
        user
      }}
      layoutOptions={{
        height: 320,
        maxWidth: 600
      }}
    />
  );
};

---

Bot Persona With JSX As Picture

Open Sandbox

import {useMemo} from 'react';
import {AiChat} from '@nlux/react';
import '@nlux/themes/nova.css';
import {streamAdapter} from './adapter';
import {user, botStyle} from './personas';

export default () => {
  const adapter = useMemo(() => streamAdapter, []);
  return (
    <AiChat
      adapter={adapter}
      personaOptions={{
        bot: {
          name: 'iBot',
          picture: <span style={botStyle}>🤖</span>,
          tagline: 'Your Genius AI Assistant',
        },
        user
      }}
      layoutOptions={{
        height: 320,
        maxWidth: 600
      }}
    />
  );
};