💬 Customer Support

\n \n ✕\n \n

\n \n

\n Welcome! Please enter your name to start chatting with our support team.\n

\n \n

\n );\n }\n\n return (\n

\n {/* Header */}\n

💬 Customer Support

\n {connected ? '🟢 Connected' : '🔴 Connecting...'}\n

\n \n ✕\n \n

\n\n {/* Messages */}\n

\n {messages.length === 0 ? (\n

👋 Hi {customerName}!

How can we help you today?

\n ) : (\n messages.map(message => (\n \n ))\n )}\n

\n\n {/* Message Input */}\n

\n );\n}\n\ninterface ChatMessageBubbleProps {\n message: ChatMessage;\n}\n\nfunction ChatMessageBubble({ message }: ChatMessageBubbleProps) {\n const isCustomer = message.sender_type === 'customer';\n const time = new Date(message.created_at).toLocaleTimeString([], { \n hour: '2-digit', \n minute: '2-digit' \n });\n\n return (\n

\n \n {isCustomer ? 'You' : message.sender_name}\n \n \n {time}\n \n

{message.message}

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Zee_paul/App/code/frontend/components/Chat.tsx","extension","actionData","errors"]