Skip to main content

AI Chat Component

The AiChat component is the main UI component of the nlux chatbot. It is responsible for rendering the messages and the prompt input field, and all the user interactions.

The JSX component for rendering the AI chat UI is:

<AiChat />

Installation​

npm install @nlux/react

Usage​

import {AiChat} from '@nlux/react';
import {useChatAdapter} from '@nlux/<Your Adapter Of Choice>';

export default App = () => {
    const adapter = useChatAdapter({
        // The adapter config depends on the adapter you use
        url: 'https://<Your Adapter Endpoint Url>',
    });

    // The adapter is the only required prop
    // Other props available to customize the chat but are optional
    return <AiChat adapter={adapter} />;
};

Configuration​

The React JS config options are provided as props to the <AiChat /> JSX component.

Adapter​

The withAdapter method is used to provide the adapter to the AiChat component. The adapter is a required property. It can be either an instance of an adapter or an adapter builder, and it is used to connect nlux to the AI backend of your choice.

The value can be: Either an AdapterBuilder, which is what you get when you use the standard adapters by nlux, such as createChatAdapter() from @nlux/openai ― Or an instance that implements the Adapter interface, which is what you should provide when you build your own custom adapter.

  • Type: Adapter | AdapterBuilder
  • Required
  • Usage:
const aiChat = createAiChat().withAdapter(myAdapter);

Class Name​

The className is an optional property. It is used to add a class to the root element of the component.

  • Type: string
  • Optional
  • Usage
<AiChat className="my-class" />

Chat Personas​

The personasOptions configuration object allows you to give the conversation participants a name and profile picture. And for the case of the bot, you can also specify a tagline that will be displayed below the bot's name in the initial screen.

  • Type: PersonaOptions
  • Optional
  • Usage:
import { BotPersona, UserPersona, PersonaOptions } from '@nlux/react';

const botPersona: BotPersona = {
  name: 'HarryBotter',
  tagline: 'Mischievously Making Magic With Mirthful AI!',
  profilePicture: 'https://nlux.ai/images/demos/persona-harry-botter.jpg'
};

const userPersona: UserPersona = {
    name: 'Marissa',
    picture: <span>👩</span>
};

<AiChat
    personaOptions={{
        bot: botPersona,
        user: userPersona
    }}
/>
PropertyTypeDefaultDescription
personaOptionsPersonaOptions-The personas configuration
interface PersonaOptions {
    bot?: BotPersona,
    user?: UserPersona,
}

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

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

Initial Conversation​

The initialConversation property is used to enable loading of conversation history before rendering the AiChat component. This is useful if you want the user to resume a conversation from a previous session.

  • Types: initialConversation: ConversationItem[]

With ConversationItem being defined as:

type ParticipantRole = 'user' | 'system' | 'ai';
type ConversationItem = {
    role: ParticipantRole;
    message: string;
}
  • Optional
  • Not reactive (when changed, the component will not be re-rendered)
  • Usage:
<AiChat
    initialConversation={[
        {
            role: 'user',
            message: 'Hello AI chatbot! What\'s the capital of Antartica?'
        },
        {
            role: 'ai',
            message: 'Antarctica, the cool place where penguins rule, doesn\'t have a capital because it\'s too chill for politics!'
        }
    ]}
/>

Conversation Options​

The conversationOptions is an optional property. It is used to configure the conversation. If provided, it should be an object with properties from the table listed below.

  • Type: ConversationOptions
  • Optional
  • Usage
<AiChat
    conversationOptions={{
        historyPayloadSize: 10,
        scrollWhenGenerating: false,
        streamingAnimationSpeed: 20
    }}
/>
PropertyTypeDefaultDescription
historyPayloadSizenumber | 'none' | 'max''max'The number of messages from the conversation history to be sent to the server whenver a message is submitted. If set to 'none', no messages will be sent to the server. If set to 'max', all messages will be sent to the server.
scrollWhenGeneratingbooleantrueIf true, the conversation will scroll to the bottom when a new message is being generated.
streamingAnimationSpeednumber | null10The interval in milliseconds at which new characters are added to the conversation when a message is being streamed.

Layout Options​

The layoutOptions is an optional property. It is used to configure the layout of the component. If provided, it should be an object properties from the table listed below.

  • Type: LayoutOptions
  • Optional
  • Usage
<AiChat
    layoutOptions={{
        width: 920,
        height: 400,
        maxWidth: '80%',
        maxHeight: '350px'
    }}
/>
PropertyTypeDefaultDescription
widthstring | number-The CSS width of the component.
heightstring | number-The CSS height of the component.
maxWidthstring | number-The CSS maximum width of the component.
maxHeightstring | number-The CSS maximum height of the component.

Prompt Box Options​

The promptBoxOptions is an optional property. It is used to configure the prompt box. If provided, it should be an object properties from the table listed below.

  • Type: PromptBoxOptions
  • Optional
  • Usage
<AiChat
    promptBoxOptions={{
        autoFocus: true,
        placeholder: "Type your message here..."
    }}
/>
PropertyTypeDefaultDescription
autoFocusbooleantrueIf true, the prompt box will be focused when the component is mounted.
placeholderstring-The placeholder text of the prompt box.

Syntax Highlighter​

The syntax highlighter is an optional extension that can be used to highlight the source code blocks that are generated by the LLM. When no syntax highlighter is provided, the source code blocks will be rendered as plain text, with mono-spaced font, and minimum styling.

If you expect your chatbot to be used to generate source code examples, you should consider using a syntax highlighter.

nlux provides a syntax highlighter that uses Highlight.js.
You can use it by installing @nlux/highlighter and passing it to the syntaxHighlighter prop as shown below.

You can also use your own syntax highlighter by implementing the HighlighterExtension interface.

  • Type: HighlighterExtension
  • Optional
  • Usage
import {highlighter} from '@nlux/highlighter';

<AiChat
    syntaxHighlighter={highlighter}
/>