---
sidebar_label: 'Chat Personas'
---

import {PlatformSelector} from '@site/src/components/PlatformSelector/PlatformSelector';
import {PlatformSection} from '@site/src/components/PlatformSection/PlatformSection';

import ReactJs from './_005-personas/#react.mdx';
import JavaScript from './_005-personas/#js.mdx';

import AssistantPersonaJavaScript from './_005-personas/javascript/001-assistant-persona.mdx';
import AssistantPersonaReactJs from './_005-personas/react-js/001-assistant-persona.mdx';

import UserPersonaJavaScript from './_005-personas/javascript/002-user-persona.mdx';
import UserPersonaReactJs from './_005-personas/react-js/002-user-persona.mdx';

import JsxAndReactivityJavaScript from './_005-personas/javascript/003-jsx-and-reactivity.mdx';
import JsxAndReactivityReactJs from './_005-personas/react-js/003-jsx-and-reactivity.mdx';

# Chat Personas

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

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

<PlatformSelector reactJs={ReactJs} javascript={JavaScript}/>

---

## Assistant Persona

When defined, the assistant 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 assistant.

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

* The **name** of the assistant.
* The **avatar** of the assistant.
* A **tagline** that will appear below the assistant's name.

| In initial screen | In conversation |
| --- | --- |
| <img width="400" src="/nlux/images/learn/assistant-persona/assistant-persona-initial-screen.png" /> | <img width="400" src="/nlux/images/learn/assistant-persona/assistant-persona-in-chat.png" /> |

### How To Define The Assistant Persona

<PlatformSection reactJs={AssistantPersonaReactJs} javascript={AssistantPersonaJavaScript}/>

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

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

| Initial screen with invalid avatar URL | Conversation with invalid avatar URL |
| --- | --- |
| <img width="400" src="/nlux/images/learn/assistant-persona/assistant-persona-initial-screen-invalid-url.png" /> | <img width="400" src="/nlux/images/learn/assistant-persona/assistant-persona-in-chat-invalid-url.png" /> |

---

## 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 **avatar** of the user.

| User persona in conversation |
| --- |
| <img width="400" src="/nlux/images/learn/assistant-persona/assistant-persona-initial-screen.png" /> |

### How To Define The User Persona

<PlatformSection reactJs={UserPersonaReactJs} javascript={UserPersonaJavaScript}/>

---

## JSX/DOM and Reactivity

<PlatformSection reactJs={JsxAndReactivityReactJs} javascript={JsxAndReactivityJavaScript}/>
