\n );\n }\n\n // Show name prompt if presenter doesn't have a name\n if (!userName) {\n return (\n

\n {config.title || \"Chat\"}\n

\n \n Please enter your name to participate in the chat\n \n setNameInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !nameLoading) {\n handleSetName();\n }\n }}\n placeholder=\"Your name\"\n className=\"w-full px-4 py-3 glass-input text-gray-800\"\n autoFocus\n />\n

\n \n {nameLoading ? \"Setting name...\" : \"Continue\"}\n \n

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

\n {config.title || \"Chat\"}\n

\n {messages.length > 0 && (\n \n {clearing ? \"Clearing...\" : \"Clear\"}\n \n )}\n

\n {messages.length} {messages.length === 1 ? \"message\" : \"messages\"}\n

\n \n

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

💬

No messages yet

Be the first to say something!

\n ) : (\n messages.map((msg, idx) => (\n \n

\n {msg.userName === userName ? \"You\" : msg.userName}\n

\n {new Date(msg.createdAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}\n

{msg.message}

\n ))\n )}\n

\n\n {/* Input area */}\n

\n setMessageInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !submitting && messageInput.trim()) {\n handleSubmitMessage();\n }\n }}\n placeholder={config.placeholder || \"Type your message...\"}\n className=\"flex-1 px-4 py-3 glass-input text-gray-800\"\n disabled={submitting}\n />\n \n {submitting ? \"...\" : \"Send\"}\n \n

\n \n );\n}\n\n","deleted","label",[168,169,170,149],"frontend","components","widgets","permalink","https://www.val.town/x/fwfben/live-talk/code/frontend/components/widgets/ChatPresenter.tsx","extension","actionData","errors"]