DocMind Widget

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

Installation

npm install docmind-widget
# or
yarn add docmind-widget

Usage

Basic Usage

import { ChatbotWidget } from "docmind-widget";
import "docmind-widget/dist/Dialog.css"; // Import the styles

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <ChatbotWidget />
    </div>
  );
}

Using Individual Components

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

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "docmind-widget";
import "docmind-widget/dist/Dialog.css"; // Import the styles

function CustomChatbot() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <button className="dialog-button dialog-button-violet">
          Chat with us
        </button>
      </DialogTrigger>
      <DialogContent>
        <DialogTitle className="dialog-title">Custom Chat</DialogTitle>
        <DialogDescription className="dialog-description">
          This is a custom chat dialog.
        </DialogDescription>
        {/* Your custom chat UI */}
        <DialogClose asChild>
          <button className="dialog-button dialog-button-green">Close</button>
        </DialogClose>
      </DialogContent>
    </Dialog>
  );
}

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