docmind

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