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

Community Discussion

\n Share thoughts, ask questions, and discuss insights from church\n

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

\n {Object.keys(groupedMessages).length === 0 ? (\n

💬

Start the conversation

Share your thoughts and connect with others

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

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

\n {formatDate(dayMessages[0].timestamp)}\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 {message.author}\n \n \n {formatTime(message.timestamp)}\n \n

\n )}\n

\n {message.message}\n

\n );\n })}\n

\n ))\n )}\n

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

\n {!author && (\n

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

\n )}\n \n

\n setNewMessage(e.target.value)}\n placeholder={author ? \"Type your message...\" : \"Enter your name first\"}\n disabled={!author || isSubmitting}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm disabled:bg-gray-50\"\n maxLength={500}\n />\n \n {isSubmitting ? '...' : 'Send'}\n \n

\n \n {author && (\n

\n Chatting as {author}\n setAuthor('')}\n className=\"text-blue-600 hover:text-blue-700\"\n >\n Change name\n \n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/shekinah/my-first-val/code/frontend/components/ChatSection.tsx","extension","actionData","errors"]