\n {/* Chat Header */}\n

Team Chat

\n {messages.length} message{messages.length !== 1 ? 's' : ''} • \n Real-time collaboration space\n

\n \n setAutoRefresh(e.target.checked)}\n className=\"mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n />\n Auto-refresh\n \n \n 🔄\n \n

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

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

💬

No messages yet. Start the conversation!

\n ) : (\n

\n {Object.entries(groupedMessages).map(([date, dayMessages]) => (\n

\n {/* Date separator */}\n

\n {formatDate(dayMessages[0].created_at)}\n

\n \n {/* Messages for this date */}\n {dayMessages.map((message, index) => {\n const prevMessage = index > 0 ? dayMessages[index - 1] : null;\n const showAuthor = !prevMessage || prevMessage.author !== message.author;\n \n return (\n

\n {showAuthor ? (\n

\n {message.author.charAt(0).toUpperCase()}\n

\n ) : (\n

\n )}\n

\n {showAuthor && (\n

\n \n {message.author}\n \n \n {formatTime(message.created_at)}\n \n

\n )}\n

\n {message.message}\n

\n );\n })}\n

\n ))}\n

\n )}\n

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

\n {error && (\n

{error}

\n )}\n \n

\n setAuthor(e.target.value)}\n placeholder=\"Your name\"\n className=\"w-32 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n required\n />\n

\n setNewMessage(e.target.value)}\n placeholder=\"Type your message... (Press Ctrl+Enter to send)\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none\"\n rows={2}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && e.ctrlKey) {\n e.preventDefault();\n handleSubmit(e);\n }\n }}\n required\n />\n

\n \n {sending ? (\n \n ) : (\n 'Send'\n )}\n \n

\n Tip: Use Ctrl+Enter to send quickly\n

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