\n {/* Header with QR */}\n

💬 Chat

Scan to join from your phone

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

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

No messages yet. Say something!

\n )}\n {messages.map((m) => {\n const isNew = !seenIds.has(m.id);\n const tooltip = m.safety_score != null\n ? `Safety: ${m.safety_score}/100\\n${m.safety_reason || \"\"}`\n : \"Pending moderation…\";\n return (\n \n {m.text}\n {timeAgo(m.created_at)}\n

\n );\n })}\n

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

\n setInput((e.target as HTMLInputElement).value)}\n onKeyDown={handleKeyDown}\n placeholder=\"Type a message...\"\n style={styles.input}\n maxLength={500}\n autoFocus\n />\n \n

\n\n {/* Keyframe animation injected via style tag */}\n \n \n );\n}\n\nconst styles: Record = {\n container: {\n display: \"flex\",\n flexDirection: \"column\",\n height: \"100vh\",\n maxWidth: 1200,\n width: \"100%\",\n margin: \"0 auto\",\n fontFamily: \"system-ui, -apple-system, sans-serif\",\n padding: \"0 24px\",\n },\n header: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: \"16px 0\",\n borderBottom: \"1px solid #e5e7eb\",\n },\n headerLeft: {\n flex: 1,\n },\n title: {\n margin: 0,\n fontSize: \"1.5rem\",\n },\n subtitle: {\n margin: \"4px 0 0\",\n color: \"#888\",\n fontSize: \"0.85rem\",\n },\n qr: {\n borderRadius: 8,\n flexShrink: 0,\n },\n messages: {\n flex: 1,\n minHeight: 200,\n overflowY: \"auto\",\n padding: \"16px 0\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: 8,\n },\n empty: {\n textAlign: \"center\",\n color: \"#aaa\",\n marginTop: 40,\n },\n message: {\n background: \"#f3f4f6\",\n borderRadius: 12,\n padding: \"12px 16px\",\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"baseline\",\n gap: 16,\n minHeight: 44,\n fontSize: \"1.1rem\",\n },\n messageText: {\n wordBreak: \"break-word\",\n flex: 1,\n },\n messageTime: {\n fontSize: \"0.8rem\",\n color: \"#999\",\n whiteSpace: \"nowrap\",\n flexShrink: 0,\n },\n inputRow: {\n display: \"flex\",\n gap: 8,\n padding: \"12px 0\",\n borderTop: \"1px solid #e5e7eb\",\n },\n input: {\n flex: 1,\n padding: \"12px 16px\",\n fontSize: \"1.1rem\",\n border: \"1px solid #d1d5db\",\n borderRadius: 8,\n outline: \"none\",\n fontFamily: \"inherit\",\n },\n sendButton: {\n padding: \"12px 24px\",\n fontSize: \"1.1rem\",\n background: \"#4a90e2\",\n color: \"white\",\n border: \"none\",\n borderRadius: 8,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n },\n};\n","deleted","label",[184,185,167],"frontend","components","permalink","https://www.val.town/x/stevekrouse/beyond-text-demo/code/frontend/components/App.tsx","extension","actionData","errors"]