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

npm install ai-chat-dialog
# or
yarn add ai-chat-dialog
# or
pnpm add ai-chat-dialog

Usage

import { AlertDialog } from 'ai-chat-dialog';
import 'ai-chat-dialog/dist/styles/AlertDialog.css';

function App() {
  return (
    <AlertDialog 
      apiUrl="http://localhost:3001"
      namespace="my-custom-namespace"
      description="Ask me anything about your data or project!"
    />
  );
}

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