chatbot-interface-ifi

v1.4.0

Published

5 days ago

A chatbot interface React component built to be integrated into NexLAB

0High
0Medium
0Low

aarmanj08

Chatbot Interface IFI

Description: A chatbot interface React component built to be integrated into NexLAB

Version: 1.3.0

Installing:

npm install chatbot-interface-ifi

Basic Usage

import React, { useState, useRef } from 'react';
import { ChatbotInterface } from 'chatbot-interface-ifi';

const App = () => {
  const [conversationId, setConversationId] = useState(null);
  const chatbotRef = useRef(null);

  // Called when a new conversation starts - provides the Conversation ID
  const handleConversationStart = (newConversationId) => {
    console.log("Conversation started with ID:", newConversationId);
    setConversationId(newConversationId);
  };

  // Externally trigger endConversation on the chatbot
  const handleEndConversation = () => {
    if (chatbotRef.current) {
      chatbotRef.current.endConversation();
    }
  };

  return (
    <div>
      <ChatbotInterface
        ref={chatbotRef}
        chatbotId="your-chatbot-id-here"
        onConversationStart={handleConversationStart}
        enableGuidedQuestions={true}
      />
      <p>Current Conversation ID: {conversationId || "No conversation started yet."}</p>
      <button onClick={handleEndConversation}>End Conversation</button>
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | chatbotId | string | required | The unique ID of the chatbot from the dashboard | | onConversationStart | function | undefined | Callback function that receives the conversation ID when a new conversation starts | | enableGuidedQuestions | boolean | false | Enable AI-suggested follow-up questions after each response | | customToggleButton | ReactNode | null | Custom React element to use as the chat toggle button |

Custom Toggle Button

You can customize the chat toggle button by passing your own React element via the customToggleButton prop:

import React from 'react';
import { ChatbotInterface } from 'chatbot-interface-ifi';

const App = () => {
  // Custom button with gradient and hover effects
  const customButton = (
    <div style={{
      width: 64,
      height: 64,
      borderRadius: '50%',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      boxShadow: '0 6px 20px rgba(102, 126, 234, 0.5)',
      transition: 'transform 0.2s ease',
    }}>
      <span style={{ fontSize: 28, color: 'white' }}>💬</span>
    </div>
  );

  return (
    <ChatbotInterface
      chatbotId="your-chatbot-id-here"
      customToggleButton={customButton}
    />
  );
};

export default App;

Using an Image as Toggle Button

const customButton = (
  <img
    src="/your-custom-icon.png"
    alt="Chat"
    style={{
      width: 60,
      height: 60,
      borderRadius: '50%',
      boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
    }}
  />
);

<ChatbotInterface
  chatbotId="your-chatbot-id-here"
  customToggleButton={customButton}
/>

Features

Guided Questions: AI-suggested follow-up questions (toggle on/off)
Summary: View a summary of the conversation
New Chat: Clear conversation and start fresh
Fullscreen Mode: Expand the chat to a larger modal view
Custom Toggle Button: Design your own chat open button
Responsive Design: Works on mobile, tablet, and desktop

Script Tag Embed (No React Required)

For static sites without React, you can embed the chatbot with a simple script tag:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Welcome to my website</h1>

    <script
      src="https://chatbot-embedding-ifi.onrender.com/chatbot-embed.js"
      data-chatbot-id="your-chatbot-id-here"
    ></script>
  </body>
</html>

Important: Make sure to include <meta charset="UTF-8" /> in the head tag.

Optional `data-*` Attributes

data-mode="chat|teach|dual": Defaults to dual
data-enable-guided-questions="true|false": Chat mode only, defaults to true
data-container-id="your-container-id": Mounts into an existing element instead of appending a new one to body
data-initial-session-id="teach_xxx": Teach mode restore target
data-session-ids="teach_a,teach_b": Teach mode session picker list
data-show-restart-button="true|false": Teach mode header control, defaults to true

Teach Mode Example

<div id="pat-teach-root"></div>
<script
  src="https://chatbot-embedding-ifi.onrender.com/chatbot-embed.js"
  data-mode="teach"
  data-chatbot-id="your-teach-chatbot-id"
  data-container-id="pat-teach-root"
  data-session-ids="teach_123,teach_456"
  data-initial-session-id="teach_123"
></script>

Dual Mode Example (Toggle Chat <-> Learn)

<script
  src="https://chatbot-embedding-ifi.onrender.com/chatbot-embed.js"
  data-mode="dual"
  data-chatbot-id="your-chatbot-id"
></script>

Build and Deploy Script Artifact

npm run build:embed

This outputs dist-embed/chatbot-embed.js. Deploy that file to your static host (Render static site, CDN, S3, etc.), then use its public URL in the src attribute.

License

MIT