AI Chat Dialog

A simple AI chat dialog component for React, built with Radix UI.

Features

• Positioned in the bottom right corner of the screen
• "Ask AI" button that opens a chat dialog
• Styled with Radix UI colors
• Fully accessible
• Support for custom namespaces to organize your knowledge base

Installation

1npm install ai-chat-dialog
2# or
3yarn add ai-chat-dialog
4# or
5pnpm add ai-chat-dialog

Usage

1import { AlertDialog } from 'ai-chat-dialog';
2import 'ai-chat-dialog/dist/styles/AlertDialog.css';
3
4function App() {
5  return (
6    <AlertDialog 
7      apiUrl="http://localhost:3001"
8      namespace="my-custom-namespace"
9      description="Ask me anything about your data or project!"
10    />
11  );
12}

Props

Prop	Type	Default	Description
apiUrl	string	"http://localhost:3001"	URL of the backend API server
namespace	string	"chatbot-data"	Namespace to use for storing and retrieving vector data
description	string	"How can I assist you today?"	Description text in the dialog

Component Details

• The trigger button is labeled "Ask AI" and positioned in the bottom right corner
• The dialog title is fixed as "Chat with AI"
• Only a "Close" button is available to dismiss the dialog
• The namespace prop allows you to segment your vector database by project, topic, or user

License

MIT