Visions Chatbot

Overview

This library provides an embeddable React chatbot with advanced features such as text animation, Markdown rendering, and more. It is designed to be easy to integrate into your React applications.

System Requirements

• [x] Node version 18 or higher is required.
• [x] React

Getting Started

NPM

Install the package with either npm or pnpm:

npm install visions-chatbot

pnpm add visions-chatbot

Import the chatbot component and use it in your React application with the chatbot URL:

import { Chatbot } from "visions-chatbot";
import "visions-chatbo/style.css";

function App() {
  return <Chatbot url="CHATBOTURL" />;
}

Description of welcomeMessages Keys

The welcomeMessages prop is an object that allows you to define custom welcome messages for the chatbot. Each key in this object is linked to a specific setting of the chatbot, and the associated values are JSX elements representing the welcome messages.

Keys welcomeMessages and Their Uses

1. report

   • Description: Welcome message for users interacting with document management or analysis.

2. agent

   • Description: Welcome message for users interacting with AI agents.

Example welcomeMessages Usage

Here is an example of how to use the welcomeMessages prop in the Chatbot component:

import { Chatbot } from "visions-chatbot";
import "visions-chatbot/style.css";

function App() {
  return (
    <Chatbot
      url="CHATBOTURL"
      welcomeMessages={{
        report: (
          <div style={{ userSelect: "text", marginInline: "auto" }}>
            <div style={{ marginBottom: 12 }}>
              <p>👋 Welcome to the VisionsTrust chatbot!</p>
              <p>
                I help you discover how your data and AI can be better used in
                data spaces.
              </p>
            </div>
            <p>👉 To begin, can you indicate :</p>
            <ul style={{ listStyle: "inside", paddingLeft: 16 }}>
              <li>🏢 The name of your organization</li>
              <li>✍️ A brief description in a few lines (optional)</li>
            </ul>
          </div>
        ),
        agent: (
          <div style={{ userSelect: "text", marginInline: "auto" }}>
            <div style={{ marginBottom: 12 }}>
              <p>🔎 Welcome to Agent Search!</p>
              <p>
                I'm here to help you explore the Synthesis catalog and find
                what you need.
              </p>
            </div>
            <p>👉 Ask me your question directly or choose an option:</p>
          </div>
        ),
      }}
    />
  );
}

Description of customPrompts Keys

The customPrompts prop is an object that allows you to define custom prompts for the chatbot. Each key in this object represents a specific context or category, and the associated values are arrays of strings representing the prompts.

Keys customPrompts and Their Uses

1. generic

   • Description: General prompts for various contexts.
   • Example: "Can you explain the document?", "What are the best AI offers?"

2. report

   • Description: Prompts specific to document management or analysis Report setting.
   • Example: "Can you explain the document?", "Can you resume the document?"

3. agent

   • Description: Prompts for interactions with AI agents via Agent setting.
   • Example: "🔎 Explore existing data", "🤖 Discover AI services", "❓ I don't know yet, guide me"

Example customPrompts Usage

Here is an example of how to use the customPrompts prop in the Chatbot component:

import { Chatbot } from "visions-chatbot";
import "visions-chatbo/style.css";

function App() {
  return <Chatbot
      url="CHATBOTURL"
      customPrompts={{
        generic: [
          "Can you explain the document?",
          "What are the best AI offers?",
        ],
        report: [
          "Can you explain the document?",
          "Can you resume the document?",
        ],
        agent: [
          "🔎 Explore existing data",
          "🤖 Discover AI services",
          "❓ I don't know yet, guide me",
        ],
      }}
    />;
}

NPM Package

Visit the NPM package page for installation and usage details:

NPM Package - visions-chatbot

CDN

If you're not using a module bundler or package manager, you can also use this widget via an ESM-compatible CDN such as ESM.sh.

Add the following script at the bottom of your HTML file:

<div id="root"></div>

<script type="module">
  import React from "https://esm.sh/react";
  import * as ReactDOMClient from "https://esm.sh/react-dom/client";
  import { Chatbot } from "https://esm.sh/visions-chatbot";

  const root = ReactDOMClient.createRoot(document.getElementById("root"));
  root.render(
    React.createElement(
      React.StrictMode,
      null,
      React.createElement(Chatbot)
    )
  );
</script>