Skip to main content
The Chat component provides a complete chat interface with support for message display, user input, headers, and AI reasoning visualization.

​
Basic usage

Create a simple chat interface: 
import { 
  FlxChat, 
  FlxChatHeader,
  FlxChatMessages,
  FlxChatMessage,
  FlxChatInput 
} from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function BasicChat() {
  const [messages, setMessages] = useState([
    { id: 1, text: 'Hello! How can I help you?', sender: 'bot' }
  ]);
  const [input, setInput] = useState('');

  const handleSend = (message) => {
    if (message.trim()) {
      setMessages(prev => [...prev, { 
        id: Date.now(), 
        text: message, 
        sender: 'user' 
      }]);
      setInput('');
    }
  };

  return (
    <FlxChat>
      <FlxChatHeader title="Support Chat" />
      <FlxChatMessages>
        {messages.map(msg => (
          <FlxChatMessage 
            key={msg.id} 
            message={msg}
          />
        ))}
      </FlxChatMessages>
      <FlxChatInput 
        messageInput={input}
        sendMessage={handleSend}
        inputPlaceholder="Type a message..."
      />
    </FlxChat>
  );
}

​
Chat with avatars

Display user and bot avatars in messages: 
import { FlxChatMessage } from '@flowx/react-ui-toolkit';

function ChatWithAvatars() {
  const message = {
    id: 1,
    text: 'How can I assist you today?',
    sender: 'bot'
  };

  const botAvatar = {
    src: '/images/bot-avatar.png',
    alt: 'AI Assistant'
  };

  return (
    <FlxChatMessage 
      message={message}
      chatAvatar={botAvatar}
    />
  );
}

​
Chat header with actions

Add interactive elements to the chat header: 
import { FlxChatHeader } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function ChatWithHeader() {
  const [isFullscreen, setIsFullscreen] = useState(false);

  return (
    <FlxChatHeader
      chatAvatar={{
        src: '/images/support-avatar.png',
        alt: 'Support Team'
      }}
      title="Customer Support"
      subtitle="We typically reply in a few minutes"
      displayMode="floating"
      showFullscreenToggle
      isFullscreen={isFullscreen}
      onToggleFullscreen={() => setIsFullscreen(!isFullscreen)}
      onNewChat={() => console.log('Starting new chat')}
      onClose={() => console.log('Closing chat')}
      newChatLabel="Start new conversation"
      expandAriaLabel="Expand chat"
      collapseAriaLabel="Collapse chat"
      dockAriaLabel="Close chat"
    />
  );
}
The displayMode prop controls which header actions are visible: floating shows new chat, expand, and dock buttons; fullscreen shows expand and new chat; fill shows only new chat.

​
Message with error handling

Handle and display error states in messages: 
import { FlxChatMessage } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function MessageWithError() {
  const [message, setMessage] = useState({
    id: 1,
    text: 'This message failed to send',
    sender: 'user',
    hasError: true
  });

  const handleRegenerate = (msg) => {
    console.log('Regenerating message:', msg);
    // Retry sending the message
  };

  return (
    <FlxChatMessage
      message={message}
      errorMessage="Failed to send message. Please try again."
      regenerateLabel="Retry"
      onRegenerate={handleRegenerate}
    />
  );
}

​
Chat input customization

Customize the chat input with icons and validation: 
import { FlxChatInput } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function CustomChatInput() {
  const [input, setInput] = useState('');
  const [isSending, setIsSending] = useState(false);

  const handleSend = async (message) => {
    if (message.trim().length === 0) return;
    
    setIsSending(true);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000));
    setIsSending(false);
    setInput('');
  };

  return (
    <FlxChatInput
      messageInput={input}
      sendMessage={handleSend}
      inputPlaceholder="Ask me anything..."
      sendAriaLabel="Send message"
      sendDisabled={isSending || input.trim().length === 0}
      maxInputRows={5}
      sendIconName="send"
      buttonClassName="custom-send-button"
      textAreaClassName="custom-textarea"
    />
  );
}

​
AI reasoning display

Show AI reasoning process with the ChatReasoning component: 
import { FlxChatReasoning } from '@flowx/react-ui-toolkit';

function ChatWithReasoning() {
  const reasoningData = {
    steps: [
      'Analyzing user query...',
      'Searching knowledge base...',
      'Formulating response...'
    ],
    conclusion: 'Response generated successfully'
  };

  return (
    <FlxChatReasoning 
      reasoning={reasoningData}
    />
  );
}

​
Complete chat example

A fully-featured chat implementation: 
import { 
  FlxChat, 
  FlxChatHeader,
  FlxChatMessages,
  FlxChatMessage,
  FlxChatInput 
} from '@flowx/react-ui-toolkit';
import { useState, useRef, useEffect } from 'react';

function CompleteChatApp() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSend = (message) => {
    const newMessage = {
      id: Date.now(),
      text: message,
      sender: 'user',
      timestamp: new Date()
    };
    
    setMessages(prev => [...prev, newMessage]);
    setInput('');

    // Simulate bot response
    setTimeout(() => {
      const botMessage = {
        id: Date.now() + 1,
        text: 'Thanks for your message!',
        sender: 'bot',
        timestamp: new Date()
      };
      setMessages(prev => [...prev, botMessage]);
    }, 1000);
  };

  const handleNewChat = () => {
    setMessages([]);
    setInput('');
  };

  return (
    <div style={{ height: '600px', display: 'flex', flexDirection: 'column' }}>
      <FlxChat>
        <FlxChatHeader
          title="AI Assistant"
          subtitle="Online"
          displayMode="fill"
          onNewChat={handleNewChat}
          newChatLabel="New conversation"
        />
        
        <FlxChatMessages style={{ flex: 1, overflowY: 'auto', padding: '16px' }}>
          {messages.map(msg => (
            <FlxChatMessage
              key={msg.id}
              message={msg}
              chatAvatar={msg.sender === 'bot' ? {
                src: '/bot-avatar.png',
                alt: 'AI Bot'
              } : undefined}
            />
          ))}
          <div ref={messagesEndRef} />
        </FlxChatMessages>
        
        <FlxChatInput
          messageInput={input}
          sendMessage={handleSend}
          inputPlaceholder="Type your message..."
          sendAriaLabel="Send message"
          maxInputRows={4}
        />
      </FlxChat>
    </div>
  );
}

​
Props

​
FlxChatHeader

​
chatAvatar
{ src: string; alt: string }
Avatar image configuration for the chat header.
​
showAvatar
boolean
Controls avatar visibility. Defaults to true when chatAvatar is provided.
​
title
string
The main title text displayed in the header.
​
subtitle
string
Secondary text displayed below the title.
​
displayMode
'fill' | 'floating' | 'fullscreen'
default:"fill"
Controls which header actions are shown. floating includes all actions, fullscreen shows expand and new chat, fill shows only new chat.
​
onNewChat
() => void
Callback when the new chat button is clicked.
​
onToggleFullscreen
() => void
Callback when the fullscreen toggle button is clicked.
​
isFullscreen
boolean
Current fullscreen state of the chat.
​
onClose
() => void
Callback when the close/dock button is clicked (floating mode).

​
FlxChatMessage

​
message
ChatMessage
required
The message object containing text, sender, and other message data.
​
chatAvatar
{ src: string; alt: string }
Avatar configuration for the message sender.
​
errorMessage
string
Error message to display when message.hasError is true.
​
regenerateLabel
string
Label for the regenerate button shown in error state.
​
onRegenerate
(message: ChatMessage) => void
Callback when the regenerate button is clicked.

​
FlxChatInput

​
messageInput
string
required
The current value of the input field.
​
sendMessage
(message: string) => void
required
Callback fired when a message is sent.
​
inputPlaceholder
string
Placeholder text for the input field.
​
sendAriaLabel
string
Accessible label for the send button.
​
sendDisabled
boolean
Disables the send button.
​
maxInputRows
number
Maximum number of rows for the textarea before scrolling.
​
sendIconPath
string
Custom SVG path for the send icon.
​
sendIconName
FlxIconName
Built-in icon name for the send button.

​
TypeScript

import type { 
  ChatProps,
  ChatHeaderProps,
  ChatMessageProps,
  ChatInputProps,
  ChatMessage 
} from '@flowx/react-ui-toolkit';

const message: ChatMessage = {
  id: 1,
  text: 'Hello',
  sender: 'user',
  timestamp: new Date()
};

​
Accessibility

  • Semantic HTML with proper ARIA roles
  • Keyboard navigation support
  • Screen reader announcements for new messages
  • Focus management for input field
  • Accessible button labels
For better user experience, implement auto-scrolling to show new messages and add typing indicators when the bot is composing a response.

Build docs developers (and LLMs) love

Get started for freeTalk to us