\n {/* Header */}\n

Beyond Text

\n \n \n {connected ? \"live\" : `${connectingWord}…`}\n \n

\n \n signed in as {username}\n \n \n change\n \n

\n\n {/* Main content */}\n

\n {/* Messages + input */}\n

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

\n No messages yet. Say hi!\n

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

\n\n {uploadError && (\n

\n {uploadError}\n

\n )}\n\n \n {/* Hidden file input — `capture=\"environment\"` opens the rear camera on mobile */}\n {\n const file = (e.target as HTMLInputElement).files?.[0];\n if (file) handlePhotoSelected(file);\n }}\n />\n fileInputRef.current?.click()}\n disabled={uploading}\n aria-label=\"Take or upload a photo\"\n title=\"Take or upload a photo\"\n class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-lg bg-white border border-gray-300 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed text-xl\"\n >\n {uploading ? ⋯ : \"📷\"}\n \n setDraft((e.target as HTMLInputElement).value)}\n placeholder={uploading ? `${uploadingWord} your photo…` : \"Type a message…\"}\n maxLength={2000}\n class=\"flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white\"\n />\n \n {sending ? `${sendingWord}…` : \"Send\"}\n \n \n

\n\n {/* Sidebar: QR + info */}\n \n

\n );\n}\n\nfunction MessageRow({ message, isSelf }: { message: Message; isSelf: boolean }) {\n const time = new Date(message.created_at).toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n return (\n

\n \n

\n \n {message.username}\n \n \n {time}\n \n

\n {message.image_blob_key != null && (\n \n \n \n )}\n {message.text && (\n

{message.text}

\n )}\n

\n \n );\n}\n","deleted","label",[191,192,173],"frontend","components","permalink","https://www.val.town/x/stevekrouse/beyond-text/code/frontend/components/Chat.tsx","extension","actionData","errors"]