Chat Personas

With NLUX, you can optionally define a bot persona and a user persona that will appear in the chat.

Using personas enhances natural conversation with your intelligent assistant.
It allows you to give your bot an identity that persists during the interaction. This includes details like a name, profile picture, and a custom tagline. Similarly you can also represent the user profile with a name and a profile picture.

React JS ⚛️

JavaScript 🟨

---

Bot Persona

When defined, the bot persona will appear in 2 places:

• In the initial chat screen, before the user has sent any message.
• In the conversation, in front of each message received from the AI bot.

When defining the bot persona, you can specify the following properties:

• The name of the bot.
• The profile picture of the bot.
• A tagline that will appear below the bot's name.

In initial screen	In conversation

How To Define The Bot Persona

react-js

In React JS, you can define the bot persona by passing the personaOptions prop to the AiChat component. The personaOptions prop is an object with two properties: bot and user. The bot property is what you use to define the bot persona, as shown in the example below.

<AiChat
    adapter={adapter}
    personaOptions={{
        bot: {
            name: 'HarryBotter',
            picture: 'https://nlux.ai/images/demos/persona-harry-botter.jpg',
            tagline: 'Mischievously Making Magic With Mirthful AI!',
        },
    }}
/>

The object passed to the bot property should match the following interface:

interface BotPersona {
    name: string;
    picture: string | JSX.Element;
    tagline?: string;
}

javascript

In Javascript, you can define the bot persona by calling withPersonaOptions when creating the AiChat component. The withPersonaOptions function takes an object with two properties: bot and user. The bot property is what you use to define the bot persona, as shown in the example below.

const aiChat = createAiChat()
    .withAdapter(adapter)
    .withPersonaOptions({
        bot: {
            name: 'HarryBotter',
            picture: 'https://nlux.ai/images/demos/persona-harry-botter.jpg',
            tagline: 'Mischievously Making Magic With Mirthful AI!'
        }
    });

The object passed to the bot property should match the following interface:

interface BotPersona {
    name: string;
    picture: string | HTMLElement;
    tagline?: string;
}

When a string is passed to the picture property, it is assumed to be a URL to an image. You can also pass a JSX element to the picture property, which is useful if you want to use an SVG image or a custom component.

If an invalid URL is passed to the picture property, the first letter of the bot's name will be used as the avatar image, as shown in the example below.

Initial screen with invalid picture URL	Conversation with invalid picture URL

---

User Persona

When defined, the user persona will appear in that conversation UI, in front of the user sent.

When defining the user persona, you can specify the following properties:

• The name of the user.
• The profile picture of the user.

User persona in conversation

How To Define The User Persona

react-js

In React JS, you can define the user persona by passing the personaOptions prop to the AiChat component. The personaOptions prop is an object with two properties: bot and user. The user property is what you use to define the user persona, as shown in the example below.

<AiChat
    adapter={adapter}
    personaOptions={{
        user: {
            name: 'Alex',
            avatar: 'https://nlux.ai/images/demos/persona-user.jpeg'
        },
    }}
/>

The object passed to the user property should match the following interface:

interface UserPersona {
    name: string;
    picture: string | JSX.Element;
}

javascript

In Javascript, you can define the user persona by calling withPersonaOptions when creating the AiChat component. The withPersonaOptions function takes an object with two properties: bot and user. The user property is what you use to define the user persona, as shown in the example below.

const aiChat = createAiChat()
    .withAdapter(adapter)
    .withPersonaOptions({
        user: {
            name: 'Alex',
            avatar: 'https://nlux.ai/images/demos/persona-user.jpeg'
        }
    });

The object passed to the user property should match the following interface:

interface UserPersona {
    name: string;
    picture: string | HTMLElement;
}

---

JSX/DOM and Reactivity

react-js

JSX and Reactivity React

javascript

JSX and Reactivity Javascript