Live Chat for Customer Support

Problem Description

A SaaS company needs a live chat feature for their customer support portal. Support agents use a web dashboard to respond to customer messages in real time. Customers initiate chats from the product's help widget.

Build a Node.js/Express backend and React/TypeScript frontend for the chat system:

• Customers can send messages and receive agent replies in real time
• Support agents can see a list of active chats and pick one to respond to
• Messages appear instantly for both parties
• Each chat session has a unique ID, customer name, and list of messages
• Messages have: id, chatId, senderId, senderRole (customer | agent), text, timestamp

Output Specification

Produce the following in a src/ directory:

Server:

• src/server.ts -- Express server with real-time messaging
• src/types.ts -- Shared TypeScript types

Client:

• src/components/ChatWindow.tsx -- The chat message view for a single conversation
• src/components/ChatList.tsx -- List of active chat sessions for agents
• src/hooks/useChat.ts -- Hook that manages the real-time chat connection

Use Socket.IO or raw WebSocket for the real-time communication. Use in-memory storage for chat data.

Do not include test files, build configuration, or package manager lock files.