@rqdhw3n/react-chat-ui

Production-ready ChatGPT-style chat UI component library for React applications.

Install

npm install @rqdhw3n/react-chat-ui

Peer dependencies: react and react-dom (18+).

Quick start

import {
  ChatContainer,
  type ChatMessageType,
} from '@rqdhw3n/react-chat-ui';

import '@rqdhw3n/react-chat-ui/styles';

const messages: ChatMessageType[] = [
  {
    id: '1',
    role: 'user',
    content: 'Hello',
    createdAt: new Date(),
  },
  {
    id: '2',
    role: 'assistant',
    content: 'Hi, how can I help you?',
    createdAt: new Date(),
  },
];

export default function App() {
  return (
    <div className="h-[600px] w-full max-w-3xl mx-auto p-4">
      <ChatContainer
        messages={messages}
        loading={false}
        onSend={(message) => console.log(message)}
        placeholder="Ask something..."
        theme="system"
      />
    </div>
  );
}

Components

| Component | Description | |-----------|-------------| | ChatContainer | Full chat layout (messages + input + scroll) | | ChatMessage | Single message bubble with markdown / streaming | | ChatInput | Textarea, send, attachments | | MessageList | Scrollable message list | | TypingIndicator | Animated typing dots | | AttachmentPreview | File / image chips | | CodeBlock | Syntax block with copy button | | MarkdownRenderer | GFM markdown for assistant messages | | EmptyChat | Empty state placeholder | | ScrollToBottomButton | Jump to latest message |

Hooks

| Hook | Description | |------|-------------| | useChatScroll | Auto-scroll + scroll-to-bottom button state | | useStreamingText | Character-by-character streaming animation | | useChatInput | Input value, attachments, submit | | useCopyToClipboard | Copy with feedback |

Streaming messages

Set streaming: true on an assistant message while updating content:

{
  id: '3',
  role: 'assistant',
  content: partialText,
  streaming: true,
}

Or use useStreamingText directly in custom UIs.

Dark mode

<ChatContainer theme="dark" ... />
<ChatContainer theme="system" ... />

Attachments

<ChatContainer allowAttachments maxAttachments={5} onSend={(text, files) => {}} />

Build (library)

cd react-chat-ui
npm install
npm run build

License

MIT