Feature/realtime customer support chat

[Madhavi1108]

Description

This PR introduces a complete real-time customer support chat system that enables customers to communicate directly with administrators through an integrated chat widget powered by Socket.io. The implementation provides persistent conversations, live message delivery, secure WebSocket authentication, and a dedicated administrative support interface for managing customer interactions.

The solution combines WebSocket communication, database-backed message persistence, REST APIs, and responsive frontend components to deliver a scalable and production-ready customer support experience.

Closes #190

Type of Change

• New feature
• Bug fix
• Refactoring
• Documentation update

Checklist

• Code follows project conventions
• Existing functionality preserved
• Socket.io infrastructure implemented
• Persistent chat storage added
• Customer and admin interfaces integrated
• Authentication and authorization enforced
• Ready for testing

---

What Was Implemented

Persistent Chat Database Schema

Introduced a dedicated database schema for storing conversations and messages.

New Schema

• backend/scripts/chat_schema.sql

The schema creates:

• chat_conversations
• chat_messages

The implementation stores:

• Conversation metadata
• Individual chat messages
• Delivery status information
• Assigned administrator details
• Conversation priority levels
• Historical message records

This enables conversations to persist across sessions and server restarts.

---

Socket.io Infrastructure

Integrated Socket.io to provide real-time bidirectional communication between customers and administrators.

New Socket Manager

• socketManager.js

The socket layer:

• Authenticates incoming connections
• Validates JWT tokens
• Establishes secure WebSocket sessions
• Assigns users to appropriate communication rooms
• Broadcasts live updates to connected clients

This enables instant messaging without polling.

---

Server Integration

Updated the backend server architecture to support both REST APIs and WebSocket communication.

Updated Server

• server.js

Changes include:

• Express integration with Node's native http.Server
• Shared HTTP and WebSocket infrastructure
• Socket.io initialization
• Unified application entry point
• Simultaneous REST and WebSocket support on the same server instance

---

Secure WebSocket Authentication

Implemented authentication and room-level access control for all socket connections.

Customers:

• Authenticate using JWT tokens
• Join only their assigned conversation rooms
• Can access only their own support sessions

Administrators:

• Authenticate before connecting
• Automatically join a dedicated admin_room
• Receive live updates for active support conversations

This preserves conversation privacy and prevents unauthorized access.

---

Customer Chat Widget

Created a reusable floating support widget for customer-facing pages.

New Files

• chat-widget.js
• chat-widget.css

The widget includes:

• Floating action button
• Animated open and close behavior
• Responsive chat interface
• Automatic WebSocket connection
• Authentication integration
• Conversation restoration after refresh
• Live message updates

Customers can access support from anywhere within the storefront.

---

Global Widget Injection

Integrated the chat widget into the shared frontend component system.

Updated File

• components.js

The widget is automatically injected across customer-facing pages without requiring manual script inclusion for each individual page.

Supported pages include:

• Home
• Shop
• Checkout
• Additional storefront views utilizing shared components

---

Conversation Persistence

Implemented automatic retrieval of previous conversations when users reconnect.

Returning customers:

• Rejoin existing conversations
• Recover historical messages
• Continue active support sessions seamlessly
• Maintain context across browser refreshes

This improves continuity during customer support interactions.

---

Administrative Support Dashboard

Extended the administration panel with a dedicated support management interface.

Updated File

• admin.html

Added a new:

• Support tab

The interface follows a three-pane layout consisting of:

• Conversation list
• Active chat window
• Customer information panel

This provides administrators with a centralized workspace for customer communication.

---

Conversation Management Interface

The administrator dashboard includes:

Left Pane

• Live conversation list
• Debounced search
• Status filtering

Supported filters include:

• Open
• Pending
• Closed
• Unassigned

---

Center Pane

Provides the active messaging interface where administrators can:

• View conversation history
• Send replies instantly
• Participate in live customer chats

Messages synchronize in real time through Socket.io.

---

Right Pane

Displays customer-related information including:

• Email address
• Current status
• Account creation date

This provides additional context while handling support requests.

---

Administrative Chat APIs

Added backend APIs supporting support workflow management.

The implementation enables administrators to:

• Assign conversations to themselves
• Close completed chats
• Manage support sessions securely

Administrative actions are protected through existing authentication and authorization middleware.

---

Client-Side Chat Logic

Updated frontend administration scripts to support real-time chat operations.

Updated File

• admin.js

The implementation handles:

• Live conversation loading
• Real-time message synchronization
• Conversation assignment
• Chat closure
• Search functionality
• Filtering
• Error handling
• UI state updates

---

Responsive and Fault-Tolerant Design

The chat system has been designed to handle common runtime scenarios gracefully.

Features include:

• Responsive layouts across devices
• Automatic reconnection support
• Persistent conversations
• Live synchronization
• Recovery after temporary network interruptions

This ensures a reliable customer support experience under varying network conditions.

---

Benefits

• Real-time customer support messaging
• Socket.io-powered live communication
• Persistent conversation storage
• JWT-secured WebSocket authentication
• Conversation privacy through room isolation
• Floating support widget across storefront pages
• Automatic conversation restoration
• Integrated administrator support dashboard
• Live conversation management
• Customer information sidebar
• Searchable and filterable conversation lists
• Easily extensible architecture for attachments, read receipts, and advanced messaging features

---

Acceptance Criteria

• Socket.io integrated into backend
• WebSocket infrastructure implemented
• Secure JWT socket authentication added
• Conversation persistence implemented
• Chat database schema created
• Customer chat widget added
• Global widget injection configured
• Automatic conversation restoration supported
• Admin support dashboard implemented
• Support tab added to admin interface
• Live conversation list implemented
• Real-time messaging supported
• Conversation assignment functionality added
• Chat closure functionality implemented
• Existing authentication and authorization preserved

---

Technical Notes

• WebSocket communication is implemented using Socket.io while sharing the existing HTTP server infrastructure with Express.
• Customer connections are authenticated using JWT tokens and restricted to their respective conversation rooms, while administrators join a dedicated global support room.
• Conversations and messages are persisted in the database, enabling recovery across reconnects and browser refreshes.
• The frontend widget is injected through the shared component system, eliminating the need for manual inclusion across individual pages.
• The architecture is designed for future enhancements such as file attachments, typing indicators, read receipts, and multi-agent support with minimal structural changes.

[vercel]

@Madhavi1108 is attempting to deploy a commit to the Bhuvansh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[BHUVANSH855]

have a look once on the files changed in PR.
I think you mashed up two issues in this PR.
this PR also contains the changes made in PR #230.

[Madhavi1108]

Hi @BHUVANSH855,
Thanks for the review. I made the subsequent changes on the same branch to avoid merge conflicts, so this PR ended up including the commits from PR #230 as well.