DocMind Widget

A customizable chatbot widget for your website built with React and RadixUI.

Installation

1npm install docmind-widget
2# or
3yarn add docmind-widget

Usage

Basic Usage

1import { ChatbotWidget } from "docmind-widget";
2import "docmind-widget/dist/Dialog.css"; // Import the styles
3
4function App() {
5  return (
6    <div>
7      <h1>My Website</h1>
8      <ChatbotWidget />
9    </div>
10  );
11}

Using Individual Components

You can also use the individual components to create your own custom dialog:

1import {
2  Dialog,
3  DialogTrigger,
4  DialogContent,
5  DialogTitle,
6  DialogDescription,
7  DialogClose,
8} from "docmind-widget";
9import "docmind-widget/dist/Dialog.css"; // Import the styles
10
11function CustomChatbot() {
12  return (
13    <Dialog>
14      <DialogTrigger asChild>
15        <button className="dialog-button dialog-button-violet">
16          Chat with us
17        </button>
18      </DialogTrigger>
19      <DialogContent>
20        <DialogTitle className="dialog-title">Custom Chat</DialogTitle>
21        <DialogDescription className="dialog-description">
22          This is a custom chat dialog.
23        </DialogDescription>
24        {/* Your custom chat UI */}
25        <DialogClose asChild>
26          <button className="dialog-button dialog-button-green">Close</button>
27        </DialogClose>
28      </DialogContent>
29    </Dialog>
30  );
31}

Styling

The widget comes with default styles, but you can override them by targeting the CSS classes:

• .dialog-overlay - The overlay that covers the page
• .dialog-content - The dialog box
• .dialog-title - The dialog title
• .dialog-description - The dialog description
• .dialog-button - Basic button style
• .dialog-button-violet - Violet button variant
• .dialog-button-green - Green button variant
• .dialog-close - Close button
• .chat-container - Container for chat messages
• .chat-input-container - Container for the input and send button
• .chat-input - Chat input field

License

MIT