Skip to content

1FF/chat-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3b7eb50 · Dec 21, 2023
Nov 2, 2023
Nov 7, 2023
May 22, 2023
Dec 21, 2023
Jul 14, 2023
Nov 2, 2023
Nov 2, 2023
May 22, 2023
Jul 14, 2023
Jun 27, 2023
May 12, 2023
May 22, 2023
May 12, 2023
Dec 21, 2023
Dec 21, 2023
Jun 6, 2023

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.