Skip to main content
Version: v2.x

Custom Renderers

The custom renderers feature allows developers to define customised display logic for messages in the chat area.

This feature is particularly useful when the data is not a simple string, but a complex object that needs to be rendered in a specific way, or when the developer needs to render additional elements that are not part of the response but related to it, such as rating buttons or other interactive elements.

Usage​

Custom renderers can be provided to the AiChat component as part of the messageOptions prop.

const ResponseCustomRendererComp: ResponseRenderer<AiMsg> = { ... };
const UserPromptCustomRendererComp: PromptRenderer = { ... };
<AiChat
    adapter={adapter}
    messageOptions={{
        responseRenderer: ResponseCustomRendererComp,
        promptRenderer: UserPromptCustomRendererComp,
    }}
/>

Interfaces​

Below are the interfaces that custom renderers should implement.

Response Renderer​

The type of the responseRenderer config property is as follows:

// A React functional component (FC) that receives the props for streamed or batched data.
// The AiMsg type is the type of the message content.
type ResponseRenderer<AiMsg> =  FC<StreamResponseComponentProps<AiMsg>> | FC<BatchResponseComponentProps<AiMsg>>;

For streamed data, the custom renderer is a React functional component that receives the following props, where AiMsg is the type of the message content.

type StreamResponseComponentProps<AiMsg> = {
    uid: string; // Unique identifier generated by NLUX
    dataTransferMode: 'stream'; // Always 'stream' for streamed data

    // The status of the message, which can be 'streaming' or 'complete'
    // When an error occurs, the entire message will be removed from the chat area and an error message
    // will be displayed to the user.
    status: 'streaming' | 'complete';

    // The content of the message. This will only be defined when the status is 'complete'.
    // It will include an array of all the chunks (partial messages) received from the server.
    content?: AiMsg[];

    // The raw server response without any processing.
    // This is only available with NLUX standard adapters, and only when the status is 'complete'.
    serverResponse?: unknown[];

    // A React ref object that should be pointed to the container element where streamed markdown messages
    // should be appended
    containerRef: RefObject<HTMLElement>;
};

For batched data, the custom renderer is a React functional component that receives the following props.

type BatchResponseComponentProps<AiMsg> = {
    uid: string; // Unique identifier generated by NLUX
    dataTransferMode: 'batch'; // Always 'batch' for batched data
    status: 'complete'; // The status of the message, which is always 'complete' for batched data
    content: AiMsg; // The content of the message
    serverResponse: unknown; // The raw server response without any processing
};

Prompt Renderer​

export type PromptRendererProps = {
    uid: string; // Unique identifier generated by NLUX
    content: string; // The user prompt
};

export type PromptRenderer = FC<PromptRendererProps>;

Behaviour​

Custom renderers can either be provided for responses from the AI assistant, or for user prompts that are displayed in the chat area.

For AI responses, the behaviour of custom renders depends on whether the data is streamed from the server or received in a single batch.

Rendering Streamed AI Responses​

For streamed data, a loading spinner will be briefly displayed when the prompt is submitted.
The custom renderer will be displayed when the streaming starts, and will receive a RefObject<HTMLElement>.
That containerRef should be pointed to the HTML element where streamed markdown messages will be appended:

const MyCustomRenderer: FC<StreamResponseComponentProps<MyMessage>> = (props) => {
    return (
        <div>
            {/* The container where streamed markdown messages should be appended */}
            <div ref={props.containerRef} />
        </div>
    );
};

The properties of the custom renderer will be updated when the streaming is complete and the message that has been fully received.

Rendering Batched AI Responses​

For batched data, the custom renderer will only be displayed once the message has been fully received.
Until then, the message a loading spinner will be displayed.

Rendering User Prompts​

For user prompts, the custom renderer will be displayed once the message is sent.
The custom renderer will receive the message content and the user prompt.