chatbot-interface-ifi

v1.8.1

Published

2 months ago

A chatbot interface React component built to be integrated into NexLAB

0High
0Medium
0Low

aarmanj08

chatbot-interface-ifi

React component library providing the PAT chat and guided-learning widgets. Version 1.6.0.

Local Development

cd local-testing
npm install
npm run dev

Opens at http://localhost:5173. The toolbar lets you enter a Chat ID and Teach ID and switch between both components against any live backend chatbot.

To test the embed script locally, first build it:

npm run build:embed

Then open test-embed/index.html directly in a browser. The page lets you point to any hosted embed script URL, select a mode, and load the widget.

Deploying as an NPM Package

Build the library:

npm run build

Publish to NPM:

npm publish

The package is published as chatbot-interface-ifi. The .npmignore file ensures only dist/ is included.

Installing in a consuming app:

npm install chatbot-interface-ifi

The consuming app must also have these installed:

npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled react-markdown

Basic usage:

import { ChatbotInterface, TeachModeInterface } from 'chatbot-interface-ifi';

<ChatbotInterface chatbotId="your-chatbot-id" />
<TeachModeInterface chatbotId="your-chatbot-id" />

Deploying as a Script Tag Embed

Build the standalone script:

npm run build:embed

Output: dist-embed/chatbot-embed.js

Deploy this file to a static host (Render static site, S3, CDN, etc.). Then embed it on any HTML page with a <script> tag:

<script
  src="https://your-host.com/chatbot-embed.js"
  data-chatbot-id="your-chatbot-id"
></script>

The script bundles all dependencies (React, MUI, etc.) and is fully self-contained. No other scripts are required on the page.

All available attributes:

| Attribute | Default | Description | |-----------|---------|-------------| | data-chatbot-id | required | Chatbot ID from the PAT dashboard | | data-mode | dual | chat, teach, or dual | | data-enable-guided-questions | true | Chat/dual: show AI-suggested follow-ups | | data-show-restart-button | true | Teach/dual: show new-session button in header | | data-container-id | — | Mount into an existing element by ID instead of appending to <body> | | data-session-ids | — | Comma-separated teach session IDs for the session picker | | data-initial-session-id | — | Teach session to restore on load |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

chatbot-interface-ifi

Local Development

Deploying as an NPM Package

Deploying as a Script Tag Embed

Links