open-chat-ui

Chat UI Component Library

A React-based chat interface component library with support for threaded conversations, file attachments, and AI model integration.

Features

• Threaded conversations with branching support
• File attachments
• Real-time responses
• Immersive mode
• Keyboard shortcuts
• Multiple AI model support
• Dark/Light theme
• Responsive design

Installation

npm install open-chat-ui

Usage

import { ChatApp, ChatProvider } from 'open-chat-ui';
import { apiClient } from './chat-api'; 
import 'open-chat-ui/style.css';

function App() {
  return (
      <ChatProvider>
        <ChatApp apiClient={apiClient} />
      </ChatProvider>
  );
}

Development

This repository contains both the component library and a Next.js development environment for testing.

Local Development

1. Clone the repository:

git clone <repository-url>

1. Install dependencies:

npm install

1. Start the development server:

npm run dev

1. Build the library:

npm run build-lib

Local Testing

You can use the included Next.js app to test the component library:

npm run dev

Visit http://localhost:3000 to see the chat interface in action.

Component API

ChatApp

Main component that renders the chat interface.

interface ChatAppProps {
  apiClient?: ChatApiInterface;
}

ChatProvider

Context provider for chat functionality.

ThemeProvider

Theme context provider for styling.

Models

Supported AI models:

enum BedrockModelNames {
  CLAUDE_V3_5_SONNET_V2
  CLAUDE_V3_5_SONNET
  CLAUDE_V3_5_HAIKU
  CLAUDE_V3_OPUS
  CLAUDE_V3_SONNET
  CLAUDE_V3_HAIKU
}

Publishing

To publish a new version:

1. Update version in

package.json

1. Build the library:

npm run build-lib

1. Publish to npm: (also builds, but is useful to keep them seapare for now)

npm publish

Tech Stack

• React 18+
• TypeScript
• Radix UI Components
• Tailwind CSS
• Lucide Icons

License

This project is licensed under the MIT License.

Contributing

Welcome all contributions!