Chat Support Widget - Modular Architecture

This directory contains the modular implementation of the Chat Support Widget, split into focused, maintainable modules.

Structure

Core Files

• ChatSupportWidget.js - Main widget class that orchestrates all functionality
• index.js - Initialization code (entry point for standalone use)

Feature Modules

Configuration

• config.js - Default configuration constants and connection labels

API & Communication

• api.js - HTTP API utilities (fetchJson, postData, buildApiUrl, buildWebSocketUrl)
• session.js - Session management (create, normalize, extractSessionId)
• messages.js - Message handling (fetch, normalize, build payloads)
• websocket.js - WebSocket connection management (WebSocketManager class)
• polling.js - Polling fallback mechanism (PollingManager class)

State & Storage

• storage.js - LocalStorage persistence (StorageManager class)
• ui.js - UI state management (UIManager class - open/close, rendering, badges, etc.)

Utilities

• dom.js - DOM element mapping
• utils.js - Utility functions (generateId, formatTimestamp, parseTimestamp, resolveEndpoint, normalizeError)
• validation.js - Form validation utilities

Usage

The main entry point is chat-support.js which imports from this directory:

import { ChatSupportWidget } from "./chatSupport/ChatSupportWidget.js";

Module Responsibilities

ChatSupportWidget

• Orchestrates all managers
• Handles event binding
• Manages widget lifecycle
• Coordinates between modules

UIManager

• UI state (open/close/minimize)
• Message rendering
• Badge/unread count
• Scroll management
• Form display/hiding
• Connection state display

WebSocketManager

• WebSocket connection lifecycle
• Message sending via WebSocket
• Reconnection logic
• Fallback to polling

PollingManager

• Polling interval management
• Automatic polling start/stop

StorageManager

• LocalStorage read/write
• State persistence/restoration

Session Module

• Session creation
• Session normalization
• Session ID extraction

Messages Module

• Message fetching
• Message normalization
• Message type inference
• Payload building

API Module

• HTTP requests (GET/POST)
• URL building
• Header management
• WebSocket URL construction

Benefits

1. Separation of Concerns - Each module has a single, clear responsibility
2. Maintainability - Easy to locate and modify specific features
3. Testability - Modules can be tested independently
4. Readability - Smaller, focused files are easier to understand
5. Reusability - Modules can be reused in other contexts

Removed Code

• Removed console.log statement from resolveEndpoint function
• Cleaned up unused code paths
• Simplified redundant logic