Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

open-chat-ui

Package Overview
Dependencies
Maintainers
0
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

open-chat-ui

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

  • 0.1.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

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!

FAQs

Package last updated on 17 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc