Cindy ChatBot

An AI-powered chatbot component for React applications.

Installation

Using npm

npm install cindy-ai-chatbot --ignore-workspace-root-check --force

Using yarn

yarn add cindy-ai-chatbot --ignore-workspace-root-check --force

Usage

React Applications

Basic Usage

import React from 'react';
import { CindyChatBot } from 'cindy-ai-chatbot';

// Import required styles

import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';

import 'cindy-ai-chatbot/dist/css/cindy-chatbot.css';

function App() {
  return (
    <div classname="App">
      <CindyChatBot baseurl="{process.env.REACT_APP_CINDY_BASE_URL" ||="" ''}="" orgid="{process.env.REACT_APP_CINDY_ORG_ID" projectid="{process.env.REACT_APP_CINDY_PROJECT_ID" doctype="{process.env.REACT_APP_CINDY_DOC_TYPE" apptype="{process.env.REACT_APP_CINDY_APP_TYPE" accesstokenkey="{process.env.REACT_APP_CINDY_ACCESS_TOKEN_KEY" logoutroute="{process.env.REACT_APP_CINDY_LOGOUT_ROUTE" '="" logout="" '}="" checktokenroute="{process.env.REACT_APP_CINDY_CHECK_TOKEN_ROUTE" api="" v1="" security="" refresh'}="">
    </CindyChatBot></div>
  );
}

export default App;

Advanced Usage with Custom Props

import React from 'react';
import { CindyChatBot } from 'cindy-ai-chatbot';

// Import required styles

import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';

import 'cindy-ai-chatbot/dist/css/cindy-chatbot.css';


function App() {
  return (
    <div classname="App">
      <CindyChatBot baseurl="https://api.example.com" orgid="your-org-id" projectid="your-project-id" doctype="your-doc-type" apptype="your-app-type" accesstokenkey="your-access-token-key" logoutroute="/custom-logout/" checktokenroute="/api/v1/custom/refresh" graphitems="{CUSTOM_GRAPHS}" aiiconsrc="/path/to/custom-icon.svg" cindylogosrc="/path/to/custom-logo.svg" cindylogoheight="{60}" cindylogowidth="{60}" cindylogoalt="Custom AI Logo" headertitle="Custom AI Bot" headersubtitle="Your AI Assistant" helptext="This is a custom AI assistant. Ask me anything!">
    </CindyChatBot></div>
  );
}

export default App;

Vue.js Applications

Installation Steps

1. Install the Cindy ChatBot package and its peer dependencies:

npm install cindy-ai-chatbot react react-dom react-dom/client primereact primeicons primeflex --ignore-workspace-root-check --force

1. Create a wrapper component CindyChatBotWrapper.vue:

<template>
  <div ref="chatbotContainer" class="cindy-chatbot"></div>
</template>

<script>
import React from 'react';
import { createRoot } from 'react-dom/client';
import { onMounted, onUnmounted, ref } from 'vue';
import { CindyChatBot } from 'cindy-ai-chatbot';

export default {
  name: 'CindyChatBotWrapper',
  props: {
    baseUrl: { type: String, default: '' },
    orgId: { type: String, default: '' },
    projectId: { type: String, default: '' },
    docType: { type: String, default: 'private' },
    appType: { type: String, default: '' },
    accessTokenKey: { type: String, default: '' },
    logoutRoute: { type: String, default: '/login#/' },
    checkTokenRoute: { type: String, default: '/token/refresh/' },
    headerTitle: { type: String, default: 'Cindy.ai' },
    headerSubtitle: { type: String, default: 'Gen AI Companion' },
    sendButtonStyle: {
      type: Object,
      default: () => ({
        paddingTop: '7px',
      })
    }
  },
  setup(props) {
    const chatbotContainer = ref(null);
    let root = null;

    onMounted(() => {
      if (!chatbotContainer.value) return;
      root = createRoot(chatbotContainer.value);
      root.render(React.createElement(CindyChatBot, props));
    });

    onUnmounted(() => {
      if (root) root.unmount();
    });

    return { chatbotContainer };
  }
};
</script>

1. Use the wrapper in your Vue application (App.vue):

<template>
  <div id="app">
    <h1>Vue.js App with Cindy ChatBot</h1>
    <cindychatbotwrapper :baseurl="apiBaseUrl" :orgid="orgId" :projectid="projectId" :doctype="docType" :apptype="appType" :accesstokenkey="accessTokenKey" :logoutroute="logoutRoute" :checktokenroute="checkTokenRoute" :headertitle="'Custom AI Bot'" :headersubtitle="'Your AI Assistant'" :sendbuttonstyle="sendButtonStyle">
  </cindychatbotwrapper></div>
</template>

<script>
import CindyChatBotWrapper from './components/CindyChatBotWrapper.vue';

// Import required styles

import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';

import 'cindy-ai-chatbot/dist/css/cindy-chatbot.css';

export default {
  name: 'App',
  components: {
    CindyChatBotWrapper
  },
  data() {
    return {
      apiBaseUrl: '',
      orgId: '',
      projectId: '',
      docType: '',
      appType: '',
      accessTokenKey: '',
      logoutRoute: '/login#/',
      checkTokenRoute: '/token/refresh/',
      sendButtonStyle: {
        paddingTop: '7px',
      }
    }
  }
};
</script>

1. Configure environment variables in your .env file:

VUE_APP_CINDY_BASE_URL=your_base_url
VUE_APP_CINDY_ORG_ID=your_org_id
VUE_APP_CINDY_PROJECT_ID=your_project_id
VUE_APP_CINDY_DOC_TYPE=your_doc_type
VUE_APP_CINDY_APP_TYPE=your_app_type
VUE_APP_CINDY_ACCESS_TOKEN_KEY=your_access_token_key

Important Notes

Make sure to import all required CSS files in your main Vue application file.

The chatbot component will automatically handle asset loading (images, icons) from the package.

The wrapper component uses React 18's createRoot API for better integration.

All props are optional and have default values, but you should provide at least the basic configuration (baseUrl, orgId, projectId, etc.).

The sendButtonStyle prop allows customization of the send button appearance.

Available Props

| Prop Name | Type | Default | Description | | --- | --- | --- | --- | | graphItems | Array | [{ name: "Bar Chart", code: "bar", type: "g1" }, { name: "Donut Chart", code: "donut", type: "g2" }, { name: "Pie", code: "pie", type: "g4" }, { name: "Line", code: "line", type: "g5" }] | Array of graph types available in the chatbot | | aiIconSrc | String | "/images/ai-icon.svg" | Path to the AI icon image | | cindyLogoSrc | String | "/images/cindy-white.svg" | Path to the Cindy logo image | | cindyLogoHeight | Number | 54 | Height of the Cindy logo | | cindyLogoWidth | Number | 54 | Width of the Cindy logo | | cindyLogoAlt | String | "Ai Icon" | Alt text for the Cindy logo | | expandedStyle | Object | { width: "80%", height: "100vh", maxHeight: "100%", margin: "0px" } | Style for expanded chatbot view | | dialogStyle | Object | { width: "523px", height: "684px" } | Style for dialog chatbot view | | position | String | "bottom-right" | Position of the chatbot icon | | dialogContentClassName | String | "p-0 border-round-top-sm" | Class name for dialog content | | headerStyle | String | "p-4 flex align-items-center justify-content-between fixed h-[86px] bg-[#18279A] z-[1]" | Style for the header | | headerTitle | String | "Cindy.ai" | Title displayed in the header | | headerSubtitle | String | "Gen AI Companion" | Subtitle displayed in the header | | headerTitleStyle | String | "m-0 text-xl font-bold text-[#FCFCFD]" | Style for the header title | | headerSubtitleStyle | String | "m-0 text-base text-[#FCFCFD]" | Style for the header subtitle | | helpText | String | "The response is AI-generated and should be independently verified for accuracy." | Help text displayed in the chatbot |

Styling

Required CSS Imports

For both React and Vue.js applications, you need to import the following CSS files:

// Import required styles
import 'cindy-ai-chatbot/dist/css/cindy-chatbot.css';