ChatNest

_____________________________________________________________________________________

ChatNest is a lightweight, customizable, and easy-to-integrate JavaScript widget for adding chat functionality to your web applications. It comes with a flexible configuration system, allowing you to tailor the chatbot's appearance and behavior to suit your app's needs.

Table of Contents

• Installation
• Key Features
• Usage
• Configuration Options
• Example Initialization with Full Configuration
• Dependencies

Key Features

1. Seamless Integration with LLMs using LangChain or RAG (Retrieval-Augmented Generation)

   • LangChain Integration: ChatNest is fully compatible with LangChain, allowing developers to harness the power of large language models (LLMs) directly within their chat interface. This enables dynamic and context-aware responses by structuring conversation history, improving response generation, and enabling multi-turn conversations.
   • RAG-Based Conversational AI: With RAG, ChatNest offers access to real-time knowledge bases, document databases, and custom data sources, allowing users to retrieve and interact with up-to-date and accurate information. This setup is ideal for applications that require responses grounded in specific knowledge domains, like customer support, product information, or knowledge retrieval.

2. Flexible Configuration System

   • Developers can control chatbot settings, such as default endpoints (e.g., deleteEndpoint for clearing history or apiEndpoint for main interactions), response types, themes, and interaction prompts.
   • ChatNest supports custom API routes, allowing developers to set up and route requests to specific RAG or LangChain endpoints for highly optimized and tailored performance.

3. Customizable UI

   • ChatNest is designed to blend seamlessly with your app’s visual style. You can adjust colors, fonts, and layout, enabling a fully branded chatbot experience.
   • The widget is also mobile-responsive, ensuring optimal user experience across all devices.

Use Cases

• Customer Support: ChatNest, combined with LangChain or RAG, can serve as a smart assistant capable of answering questions based on real-time data from your knowledge base.
• Product Recommendations: For e-commerce, ChatNest can pull from product databases, providing users with personalized recommendations and detailed product descriptions.
• Knowledge Retrieval: ChatNest can act as a virtual assistant in educational platforms, retrieving information from research papers, textbooks, or articles, enhancing learning experiences.
• Internal Tools: Enhance productivity by allowing team members to interact with internal databases or corporate knowledge resources through the chat interface.

Installation

To include ChatNest in your project, add the following CDN link to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Alternatively, you can install it using npm:

npm install chatnest

Usage

Once ChatNest is included, you can initialize the chat widget by creating an instance of EasyChatWidget in your JavaScript code. For example:

document.addEventListener('DOMContentLoaded', () => {
    const chatWidget = new EasyChatWidget({
        botName: 'Support Bot',
        botImage: 'https://example.com/bot-image.png',
        greeting: 'Hi there! How can I assist you today?',
        apiEndpoint: 'https://your-api-endpoint.com/chat',
        primaryColor: '#1a73e8',
        width: '400px',
        height: '600px'
    });
});

Configuration Options

Below are the available configuration options you can set when initializing EasyChatWidget.

| Option | Type | Default Value | Description | |----------------------|--------------------|-----------------|---------------------------------------------------------------------------------------------------------| | botName | string | 'Chat Assistant' | The name of the chatbot, displayed in the widget. | | botImage | string | ![default](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23fff" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"%3E%3C/path%3E%3C/svg%3E) | The image of the bot displayed in the chat window. | | greeting | string | 'Hello! How can I help you today?' | Initial greeting message displayed to the user. | | placeholder | string | 'Type your message here...' | Placeholder text for the message input field. | | primaryColor | string | '#0084ff' | Primary color used for widget styling, such as buttons and highlights. | | fontSize | string | '14px' | Font size for text in the widget. | | width | string | '400px' (restricted between 300px - 600px) | Width of the widget, clamped between 300px and 600px. | | height | string | '600px' (restricted between 400px - 800px) | Height of the widget, clamped between 400px and 800px. | | showTimestamp | boolean | false | If true, shows timestamps next to messages. | | enableTypingIndicator | boolean | true | Displays typing indicator when bot is processing messages. | | enableMarkdown | boolean | true | Enables Markdown formatting in messages. Requires Marked.js as a dependency. | | enableHistory | boolean | true | Saves chat history locally, so it persists when the page is refreshed. | | maxHistoryLength | number | 100 | Maximum number of messages saved in chat history. | | enableTypewriter | boolean | true | Enables typewriter effect for bot responses. | | typewriterSpeed | object | { min: 30, max: 70 } | Speed (in milliseconds) of the typewriter effect. | | chips | array | [] | Predefined response options shown as clickable chips. | | customStyles | object | {} | Custom CSS styles for the widget components. | | onInit | function | null | Callback executed when the widget is initialized. | | onMessage | function | null | Callback executed when a message is sent or received. | | onError | function | null | Callback executed when an error occurs. | | apiEndpoint | string | 'http://localhost:7000/chat' | Endpoint for the bot's chat API. Adjusts based on protocol (e.g., https:// if current site is secure). | | apiKey | string | '' | API key used for authentication. | | apiHeaders | object | { 'Content-Type': 'application/json' } | HTTP headers sent with each API request. | | apiRequestFormat | object | { query: 'query', userId: 'userId', domain: 'domain' } | Defines the request format mapping, specifying the fields for query, user ID, and domain. | | apiResponseFormat | object | { response: 'response' } | Defines the response format mapping, specifying the field that contains the bot's response. | | apiMethod | string | 'POST' | HTTP method used for API requests, typically POST. | | apiTimeout | number | 30000 (30 seconds) | deleteEndpoint | String | formatApiEndpoint(config.deleteEndpoint) || ${formatApiEndpoint(config.apiEndpoint).replace(/\/chat$/, '')}/delete-history | Endpoint URL for deleting chat history. If config.deleteEndpoint is not provided, it defaults to modifying config.apiEndpoint. |

Example Initialization with Full Configuration

document.addEventListener('DOMContentLoaded', () => {
    const chatWidget = new EasyChatWidget({
        botName: 'Customer Support Bot',
        botImage: 'https://example.com/bot-avatar.png',
        greeting: 'Welcome! How can we assist you?',
        placeholder: 'Type your message here...',
        primaryColor: '#00796b',
        fontSize: '16px',
        width: '500px',
        height: '700px',
        showTimestamp: true,
        enableTypingIndicator: true,
        enableMarkdown: true,
        enableHistory: true,
        maxHistoryLength: 200,
        enableTypewriter: true,
        typewriterSpeed: { min: 50, max: 100 },
        chips: ['Order Status', 'Product Inquiry', 'Support'],
        customStyles: {
            backgroundColor: '#f0f0f0',
            color: '#333'
        },
        onInit: () => console.log('Chat widget initialized'),
        onMessage: (message) => console.log('Message received:', message),
        onError: (error) => console.error('An error occurred:', error),
        apiEndpoint: 'https://api.example.com/chat'
    });
});

Dependencies

If you enable Markdown rendering (enableMarkdown: true), the widget will load Marked.js from a CDN by default.

Look of the chat widget