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
- Clone the repository:
git clone <repository-url>
- Install dependencies:
npm install
- Start the development server:
npm run dev
- 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:
- Update version in
package.json
- Build the library:
npm run build-lib
- 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!