react-headless-chatbox

React Headless Chatbox

A simple headless chatbox React component that consists of:

• A messages container that is scrolled automatically
• Chat messages that are styled differently per participant in the chat (e.g. aligned left/right)
• A textbox that grows with content and is cleared after submission
• A trigger button

With this headless implementation, you can fully style and position the messages, the textbox and the trigger.

Example

Install

npm install react-headless-chatbox

yarn add react-headless-chatbox

Code Example

The following code example uses tailwind to style the chatbox, as shown in the image above:

import { useState } from "react";
import { Chatbox, Message as ChatboxMessage, Participant as ChatboxParticipant } from "react-headless-chatbox";
import { ReactComponent as TriggerSVG } from "./trigger.svg";

interface Participant extends ChatboxParticipant {
  // Add custom properties here
}

interface Message extends ChatboxMessage {
  id: string;
  text: string;
  // Add more properties here
}

const PARTICIPANTS = [
  { id: "john", side: "left"},
  { id: "jane", side: "right" },
] satisfies Participant[];

const MESSAGES = [
  {
    id: "1",
    participantId: "john",
    text: "Hello, Jane!",
  },
  {
    id: "2",
    participantId: "jane",
    text: "Hi, John!",
  },
] satisfies Message[];

function MyChatbox() {
  const [messages, setMessages] = useState(MESSAGES);

  const onMessageSend = (text: string) => {
    const newMessage = {
      id: Math.random().toString(),
      participantId: "jane",
      text,
    };
    setMessages((prevMessages) => [...prevMessages, newMessage]);
  };

  return (
    <div className="w-full h-full bg-white">
      <Chatbox
        participants={PARTICIPANTS}
        messages={messages}
        onMessageSend={onMessageSend}
        className="m-20 border-2 border-gray-200 rounded-md shadow-md w-96 h-96 relative overflow-hidden"
      >
        <div className="bg-blue-800 p-4 text-white rounded-t-md">
          Jane (online)
        </div>
        <Chatbox.Messages className="p-2 flex-1">
          {messages.map((message) => (
            <Chatbox.Message
              key={message.id}
              message={message}
              className={(participant) => {
                return `p-2 rounded-md shadow-md m-2 ${
                  participant.side === "right"
                    ? "bg-blue-600 text-white ml-8"
                    : "bg-gray-200 text-gray-900 mr-8"
                }`;
              }}
            >
              {message.text}
            </Chatbox.Message>
          ))}
        </Chatbox.Messages>
        <Chatbox.Textbox className="block self-stretch m-2 bg-gray-100 py-2 pl-3 pr-9 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6 outline-none" />
        <Chatbox.Trigger className="cursor-pointer absolute bottom-3.5 right-3">
          <TriggerSVG className="w-7 h-7 text-gray-400" />
        </Chatbox.Trigger>
      </Chatbox>
    </div>
  );
}

The trigger.svg file:

<?xml version="1.0" encoding="utf-8"?>
<svg fill="currentColor" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 viewBox="0 0 24 24" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;}
</style>
<g id="surface1">
	<path d="M2,3v7.8L18,12L2,13.2V21l20-9L2,3z"/>
</g>
<rect class="st0" width="24" height="24"/>
</svg>

API

Chatbox

Prop Name	Type	Description
onMessageSend	(text: string) => void	Callback function to be called when the user submits a message.
messages	Array<Message>	An array of Message objects to display in the chatbox.
participants	Array<Participant>	An array of Participant objects representing the participants in the chat.
autoScrollDown?	boolean	If true, the container will scroll down automatically (default: true).
className	string	Additional CSS classes to apply to the component.
style	React.CSSProperties	Inline styles to apply to the component.
ref	React.Ref<HTMLDivElement>	ref object to the HTML container element.

Chatbox.Messages:

Prop Name	Type	Description
className	string	Additional CSS classes to apply to the component.
style	React.CSSProperties	Inline styles to apply to the component.

Chatbox.Message:

Prop Name	Type	Description
message	Message	The message object being rendered
className	string | ((participant: Participant) => string);	Additional CSS classes to apply to the component. You can also use the function to style each message based on the participant
style	React.CSSProperties	Inline styles to apply to the component.

Chatbox.Textbox:

Prop Name	Type	Description
ref	React.Ref<HTMLTextAreaElement | null>	ref object to the textarea element.
className	string	Additional CSS classes to apply to the component.
style	React.CSSProperties	Inline styles to apply to the component.
placeholder	string	Placeholder text to display in the textarea.
maxLength	number	Maximum number of characters allowed in the textarea.
onChange	ChangeEventHandler<HTMLTextAreaElement>	Callback function to be called when the value of the textarea changes.
aria-label	string	ARIA label for the textarea (default: "Message to send").

Chatbox.Trigger

Prop Name	Type	Description
ref	React.Ref<HTMLButtonElement>	ref object to the button element.
className	string	Additional CSS classes to apply to the component.
style	React.CSSProperties	Inline styles to apply to the component.
aria-label	string	ARIA label for the button (default: "Send Message").