Skip to content

Chatbot  UI - Internal Chatbot

Chatbot UI Documentation

Introduction

This documentation aims to provide a comprehensive understanding of the Chatbot UI, detailing its design, functionality, dependencies, and interaction with the backend.

The Chatbot UI is a critical component for user interaction with our company's services, acting as a virtual assistant and providing immediate responses to user inquiries.

UI Overview

The Internal Chatbot : This chatbot is hosted in the shopify test website. It enables internal stackholders to get assistance in some of the questions they might have about a product.

Key Features

  • Interactive Chatbot Icon: Initiates the chat interface.
  • Real-Time Messaging Window: Displays conversations between the user and the bot.
  • Input Field: For user queries.
  • WebSocket Integration: For real-time communication with the backend.
  • Feedback Window: Displays an input field and a rating star input for user to submit in feedback.

Design and Appearance

  • Responsive Design: Utilizes Bootstrap and custom CSS for a responsive, user-friendly interface.
  • Message Visualization: Uses react-chat-elements for displaying messages, enhancing user experience with visually distinct message bubbles.

Architectural Design Diagram

Below is a diagram that will help understand how the chatbot works And how the chatbot is linked with the backened for responses.

Untitled

Chat-Bot UI Architecture Plant Uml code (1)

  • In this documentation we focus on the user interface

Technical Details

Dependencies and Packages

React and Hooks

  • React: The core framework providing component-based architecture.
  • useState & useEffect: React hooks for state management and side-effect handling.

Styling and UI Components

  • Bootstrap: For responsive UI components and layout.
  • Custom CSS (./chatbot.css): For specific styling of the chatbot components.

WebSocket for Real-Time Communication

  • WebSocket API: Enables real-time, bidirectional communication between the chatbot and the server.

React Chat Elements

  • MessageBox: A component from react-chat-elements used for displaying messages in a styled format.

Installation

To install these dependencies, use the following npm commands:

bashCopy code
npm install react react-dom
npm install bootstrap
npm install react-chat-elements

Backend Integration

WebSocket Connection

The chatbot utilizes a WebSocket connection (wss://dev-chatbot.omnivoltaic.com/ws) for real-time communication with the backend. This enables the chatbot to send user queries and receive responses instantaneously.

Message Handling Process

  1. User Input: When a user submits a query, it's captured via the input field.
  2. Sending Requests: The query is sent to the backend via the WebSocket connection.
  3. Receiving Responses: The backend processes the query and sends back a response.
  4. Displaying Messages: Responses are displayed in the chat window using the MessageBox component.

User Interaction Flow

  1. Opening the Chat: Users click the chatbot icon to open the chat window.
  2. Entering Queries: Users type their questions in the input field.
  3. Submitting Queries: Queries are submitted by pressing 'Enter' or clicking 'Submit'.
  4. Receiving and Displaying Responses: The backend processes the query and returns a response, which is then displayed in the chat window.

Handling Backend Responses

  • Direct Backend Responses: If the backend has predefined responses or data relevant to the user's query, it sends this information back.
  • GPT-4 Integration: In cases where the backend lacks specific information, the chatbot utilizes GPT-4 to generate a response, ensuring that the user's query is addressed.

Conclusion

The Chatbot UI serves as an essential interface for user interaction, leveraging modern web technologies and AI to provide a seamless and responsive user experience. Its integration with both a sophisticated backend and AI like GPT-4 ensures comprehensive and accurate responses to user inquiries, making it a valuable asset for enhancing customer engagement and satisfaction. This detailed architecture and workflow explanation should provide a clear understanding of the chatbot's functionality and its role in supporting our company's digital presence.