Chatbox Widget

A modern, embeddable AI Chatbox component designed for easy integration.

Installation

npm install ask-ai-chat-box

Usage

import { Chatbox } from 'ask-ai-chat-box';

function App() {
  return (
    <div>
      <Chatbox apiEndpoint="your/api/chat" minimizedByDefault={true} />
    </div>
  );
}

Set AI Agent Mode to General

import { Chatbox, ModeProvider } from 'ask-ai-chat-box';
const apiURL = `${import.meta.env.VITE_APP_URL_BACKEND}/Your/Chat/Endpoint`;

function App() {
  return (
    <div>
     <ThemeToggleProvider>
        <ModeProvider agentMode="general">
          <Chatbox apiEndpoint={apiURL} />
        </ModeProvider>
      </ThemeToggleProvider>
    </div>
  );
}

Enable the Built-in Chatbox Theme Toggle

Set enableTheme to true

import { Chatbox, ThemeToggleProvider } from "ask-ai-chat-box";
function App() {
  return (
    <div>
      <ThemeToggleProvider>
        <ModeProvider agentMode="intranet">
          <Chatbox enableTheme={true} apiEndpoint="your/api/chat/expert" minimizedByDefault={true} />
          </ModeProvider>
      </ThemeToggleProvider>
    </div>
  );
}

Default Theme to dark

import { Chatbox, ThemeToggleProvider } from "ask-ai-chat-box";
function App() {
  return (
    <div>
      <ThemeToggleProvider mode="dark">
        <ModeProvider agentMode="intranet">
            <Chatbox apiEndpoint="your/api/chat/expert"  />
          </ModeProvider>
      </ThemeToggleProvider>
    </div>
  );
}

Props

| Prop | Type | Default | Description | |-------------------|----------|-----------------|--------------------------------------| | apiEndpoint | String | /api/chat | Endpoint to post chat messages | | demoMode | Boolean | false | Used for example project API & Mode mapping | | enableTheme | String | false | Use the built-in Chat box theme | | placeholder | String | "Ask me anything..." | Input placeholder text | | minimizedByDefault | Boolean | false | Initial minimized state | | boxHeight | Number | 250 | Default is 250 | | boxPosition | String | { bottom: 15, right: 15 } | Widget position (bottom-right) | | boxWidth | Number | 350 | Default is 350 |

Contributions

If you have suggestions or improvements, feel free to fork the repository and submit a pull request.

Please follow conventional commits and write clear commit messages.

Commit Format:

type(scope?): description

body? (optional)

BREAKING CHANGE: explanation (if needed)

Examples:

• feat(auth): add login via OAuth
• fix: resolve layout crash on Safari
• chore: update dependencies
• refactor(db): rename user model
• BREAKING CHANGE: drop support for Node 14

Release Types:

| Type | Release Level | | ------------------ | ------------- | | feat: | Minor | | fix: | Patch | | BREAKING CHANGE: | Major |

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.