Skip to content

1FF/chat-ui

Repository files navigation

1ff-chat-ui

1ff-chat-ui is a Node.js package that provides a chatbot widget for integrating a chatbot into Node.js projects. It uses Socket.IO for real-time communication with the server.

Installation

To install 1ff-chat-ui, use the following command:

npm install 1ff-chat-ui

Updates

To update 1ff-chat-ui, use the following command:

npm update 1ff-chat-ui

Usage

To use ChatUi in your Node.js project, follow these steps:

  • Import the required modules:
import ChatUi from "chat-ui";
  • Initialize it (Make sure to replace SOCKET_IO_URL with the URL of your socket server.):
document.addEventListener('DOMContentLoaded', () => {
  ChatUi.init(config);
})
  • Define the necessary configuration (optional):
const assistantConfig = {
  image: 'https://randomuser.me/api/portraits/women/90.jpg',
  role: 'Lead Nutrition Expert, PhD',
  name: 'Jenny Wilson',
  welcome: 'Have a quick chat with our personal nutritionist and get a free consultation about the perfect diet for you',
  ctaTextContent: 'Visit',
  initialMessage: { 
  	role: roles.assistant, 
  	content: 'Hi, Im Jenny Wilson, your personal nutritionist. Im here to help you with your nutritional needs.', 
  	time: '2023-05-12T12:34:56.000Z'
  }
};
const customTheme = {
  '--lumina': '#f0f2f5',
  '--whisper': '#ffffff',
  '--seraph': '#21bb5a',
  '--ember': '#cacadb',
  '--zephyr': '43, 49, 57',
  '--enigma': '#FFAE19',
  '--font-family': 'Roboto',
};
const containerId = "chatbot-container"; 
  • In the end, run this command, which is one of the commands found in package.json file:
    npm run build

Configuration

ChatUi supports the following configuration options:

  • SOCKET_IO_URL (String, default: 'http://localhost:5000'): The URL of the socket server.
  • assistant (Object, default: /lib/config/theme.js): Custom configuration for the assistant.
  • theme (Object, default: /lib/config/theme.js): Custom theme configuration for the chatbot.
  • socketConfig (Object, default: /lib/config/socket.js): Default socket.io-client config.
  • containerId (String, default: 'chatbot-container'): ID of the HTML container element for the chatbot.

Methods

ChatUi provides the following methods:

  • init(config): Initializes the chatbot with the specified configurations and elements.
  • closeWidget(): Closes the chat widget.
  • getTerm(): Retrieves the value of the 'utm_chat' parameter from the current URL.
  • setSocket(): Initializes the socket connection with the server.
  • socketEmitChat(): Emits a chat event to the socket server with the last question data.
  • sendMessage(): Sends a user message.
  • onError(): Handles the error event.
  • onKeyDown(event): Handles the keydown event.
  • toggleActiveTextarea(): Toggles the pointer events for the message textarea and send button elements.

Example

NOTE: everything outside of lib is a boilerplate example of how 1ff-chat-ui could be used in your project with an example, index.js file and index.html file where the index.js file is placed into a script tag;

Remember to replace SOCKET_IO_URL with the actual URL of your socket server.