Welcome to the Chat Widget Demo!

A lightweight, framework-free chat widget designed to integrate seamlessly with any web page. This widget allows easy connectivity to multiple data sources and can be embedded into store pages with minimal setup. Developers only need to reference the built JavaScript and CSS files in their project.

Online demo: https://hp-chat-widget.netlify.app
GitHub: https://github.com/ardeshirvalipoor/chat
Figma: https://www.figma.com/design/dUIseUd5WFlL6hwR7hVD72/HelloPrint

🚀 Why This Approach?

We built this widget without using any UI framework to ensure:

• Lightweight Performance: No external dependencies, reducing overhead.
• Easy Integration: Just include the JS and CSS files—no complex setup.
• Developer-Friendly: If you know JavaScript, you can learn it in a day.
• Customizable & Flexible: Styles are scoped using CSS modules to prevent conflicts.
• Imperative DOM Manipulation: Directly interact with elements for better control.
• Event-Driven System: Uses a Node.js-style event emitter for real-time updates.

✨ Features

• Vanilla TypeScript with a minimal API.
• Base Component System that wraps HTML elements as objects.
• Imperative DOM Updates through method calls.
• Scoped CSS Modules to prevent styling conflicts.
• Event Emitter System to handle UI updates dynamically.
• Built with Rollup for optimized bundling.

📦 Installation

To get started, clone the repository and install dependencies:

 git clone https://github.com/ardeshirvalipoor/chat.git
     cd chat-widget
     npm install
    

To build the project:

npm run build
    

📜 Usage

Include in HTML

Simply reference the built JS and CSS files:

<link rel="stylesheet" href="chat-widget.css">
    <script src="chat-widget.js"></script>
    

🏗️ Widget Structure

The widget is built around a Base function that creates DOM elements wrapped in an object.

Component Interface

export interface Component {
        el: HTMLElement;
        append(child: Component): Component;
        text(content: string): Component;
        cssClass(cls: string): Component;
        on(event: string, listener: Function): void;
        emit(event: string, ...args: any[]): void;
    }
    

Base Function

import { EventEmitter } from "./event-emitter";
    
    export function Base(tag: string = 'div'): Component {
        const el = document.createElement(tag);
        const emitter = new EventEmitter();
    
        return {
            el,
            append(child: any) {
                if (child && child.el instanceof HTMLElement) {
                    el.appendChild(child.el);
                }
                return this;
            },
            text(content: string) {
                el.textContent = content;
                return this;
            },
            cssClass(cls: string) {
                el.classList.add(cls);
                return this;
            },
            ...{
                on: emitter.on.bind(emitter),
                emit: emitter.emit.bind(emitter),
            },
        };
    }
    

Event System (EventEmitter)

export class EventEmitter {
        private events: Record<string, Function[]> = {};
    
        on(event: string, listener: Function) {
            (this.events[event] ||= []).push(listener);
            return this;
        }
    
        off(event: string, listener: Function) {
            if (!this.events[event]) return;
            this.events[event] = this.events[event].filter(l => l !== listener);
        }
    
        emit(event: string, ...args: any[]) {
            (this.events[event] || []).forEach(listener => listener(...args));
        }
    }
    
    export const globalEmitter = new EventEmitter();
    

Example Chat Component

import { Base } from "../../lib/component";
    import { globalEmitter } from "../../lib/event-emitter";
    import { Sample } from "../sample/sample";
    import { Title } from "../title/title";
    import styles from './chat.module.css';
    
    export function Chat() {
        const base = Base().cssClass(styles.base);
    
        const title = Title('Chat');
        title.on('title', (data: string) => {
            console.log(data);
        });
        base.append(title);
    
        const sample = Sample();
        base.append(sample);
    
        globalEmitter.on('sample', (data: string) => {
            sample.text(data);
        });
    
        return base;
    }
    

Adding TalkJS

follow the instructions on the TalkJS website to add a 1-on-1 chat to the widget.