Skip to main content
Version: v2.x

Conversation Layout


This example shows how the messages in the conversation can either be displayed in bubbles (WhatsApp style) or in a list (slack style). The configuration is done via the conversationOptions.layout property.

import {useState, useCallback} from 'react';
import {AiChat, ConversationLayout} from '@nlux/react';
import {useChatAdapter} from '@nlux/langchain-react';
import '@nlux/themes/nova.css';
import {personaOptions, conversationHistory} from './setup';
import {useLayoutOptions, LayoutSelector} from './layout';

export default () => {
  const adapter = useChatAdapter({url: 'https://pynlux.api.nlkit.com/pirate-speak'});

  // Utility hook to manage conversation layout options
  // Possible config values: 'bubbles' or 'list'
  const defaultLayout: ConversationLayout = 'bubbles';
  const {conversationLayout, onConversationsLayoutChange} = useLayoutOptions(defaultLayout);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '90vh' }}>
      <LayoutSelector
        conversationLayout={conversationLayout}
        onConversationsLayoutChange={onConversationsLayoutChange}
      />
      <AiChat
        conversationOptions={{
            layout: conversationLayout
        }}
        adapter={adapter}
        initialConversation={conversationHistory}
        personaOptions={personaOptions}
        displayOptions={{colorScheme: 'dark'}}
      />
    </div>
  );
};