/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [mode, setMode] = useState("login"); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [files, setFiles] = useState([]); const [error, setError] = useState(""); const [selectedChat, setSelectedChat] = useState(null); const [contacts, setContacts] = useState([]); const messagesEndRef = useRef(null); const fileInputRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(() => { scrollToBottom(); }, [messages]); const handleAuth = async (e) => { e.preventDefault(); setError(""); try { const response = await fetch(`/${mode}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username, password }) }); const data = await response.json(); if (response.ok) { setIsLoggedIn(true); setError(""); await fetchContacts(); await fetchMessages(); await fetchFiles(); } else { setError(data.message || "Authentication failed"); } } catch (error) { setError("Network error. Please try again."); console.error("Authentication error", error); } }; const fetchContacts = async () => { try { const response = await fetch("/contacts"); if (response.ok) { const data = await response.json(); setContacts(data); if (data.length > 0 && !selectedChat) { setSelectedChat(data[0]); } } } catch (error) { console.error("Failed to fetch contacts", error); } }; const fetchMessages = async () => { try { const response = await fetch("/messages"); if (response.ok) { const data = await response.json(); setMessages(data); } } catch (error) { console.error("Failed to fetch messages", error); } }; const fetchFiles = async () => { try { const response = await fetch("/files"); if (response.ok) { const data = await response.json(); setFiles(data); } } catch (error) { console.error("Failed to fetch files", error); } }; const sendMessage = async (e) => { e.preventDefault(); if (!newMessage.trim()) return; try { const response = await fetch("/message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ username, content: newMessage, recipient: selectedChat.username }) }); if (response.ok) { setNewMessage(""); await fetchMessages(); } } catch (error) { console.error("Failed to send message", error); } }; const logout = () => { setIsLoggedIn(false); setUsername(""); setPassword(""); setMessages([]); setContacts([]); setSelectedChat(null); }; const handleFileChange = (e) => { const file = e.target.files[0]; if (file) { uploadFile(file); } }; const uploadFile = async (file) => { if (!file) return; const formData = new FormData(); formData.append('file', file); formData.append('username', username); formData.append('recipient', selectedChat.username); try { const response = await fetch("/upload", { method: "POST", body: formData }); if (response.ok) { await fetchFiles(); fileInputRef.current.value = null; } } catch (error) { console.error("File upload failed", error); } }; const downloadFile = async (fileId) => { try { const response = await fetch(`/download/${fileId}`); if (response.ok) { const blob = await response.blob(); const filename = response.headers.get('X-Filename') || 'download'; const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); window.URL.revokeObjectURL(url); } } catch (error) { console.error("Download failed", error); } }; if (!isLoggedIn) { return (

WhatsApp Clone

); } return (

{username[0].toUpperCase()}

{contacts.map((contact) => (

setSelectedChat(contact)} >

{contact.username[0].toUpperCase()}

{contact.username}

Last message...

12:34

))}

{selectedChat ? ( <>

{selectedChat.username[0].toUpperCase()}

{selectedChat.username}

Online

{messages.map((msg, index) => (

{msg.content} 12:34

))}

setNewMessage(e.target.value)} />

) : (

Select a chat to start messaging

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const { blob } = await import("https://esm.town/v/std/blob"); const SCHEMA_VERSION = 7; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} ( username TEXT PRIMARY KEY, password TEXT NOT NULL ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, sender TEXT NOT NULL, recipient TEXT NOT NULL, content TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_files_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, filename TEXT NOT NULL, size INTEGER NOT NULL, mime_type TEXT NOT NULL, sender TEXT NOT NULL, recipient TEXT NOT NULL, uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); // Contacts route if (request.method === "GET" && new URL(request.url).pathname === "/contacts") { const contacts = await sqlite.execute(` SELECT username FROM ${KEY}_users_${SCHEMA_VERSION} WHERE username != ? `, [request.headers.get('X-Username') || '']); return new Response(JSON.stringify(contacts.rows), { headers: { "Content-Type": "application/json" } }); } // Existing routes remain similar, with modifications to support sender/recipient return new Response(` WhatsApp Clone

`, { headers: { "Content-Type": "text/html" } }); } const css = ` :root { --whatsapp-green: #075E54; --whatsapp-light-green: #25D366; --background-default: #121212; --background-secondary: #1E1E1E; --text-primary: #FFFFFF; --text-secondary: #B1B3B5; --bubble-sent: #005C4B; --bubble-received: #202C33; } * { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: var(--background-default); color: var(--text-primary); } .whatsapp-container { display: flex; height: 100vh; max-width: 1400px; margin: 0 auto; background-color: var(--background-secondary); } .sidebar { width: 400px; border-right: 1px solid #2A2F32; display: flex; flex-direction: column; } .sidebar-header { background-color: var(--whatsapp-green); padding: 10px; display: flex; flex-direction: column; } .user-profile { display: flex; justify-content: space-between; align-items: center; } .avatar, .contact-avatar, .chat-avatar { width: 50px; height: 50px; border-radius: 50%; background-color: var(--whatsapp-light-green); display: flex; justify-content: center; align-items: center; font-weight: bold; } .contact-list { overflow-y: auto; } .contact-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #2A2F32; cursor: pointer; } .contact-item.active { background-color: #2A2F32; } .chat-area { flex-grow: 1; display: flex; flex-direction: column; } .chat-header { background-color: var(--whatsapp-green); display: flex; justify-content: space-between; align-items: center; padding: 10px; } .messages-list { flex-grow: 1; overflow-y: auto; padding: 20px; background-color: var(--background-default); } .message { max-width: 70%; margin-bottom: 10px; clear: both; } .message.sent { float: right; text-align: right; } .message.received { float: left; text-align: left; } .message-content { background-color: var(--bubble-sent); padding: 10px; border-radius: 10px; } .message-input { display: flex; align-items: center; background-color: var(--background-secondary); padding: 10px; } .message-input input { flex-grow: 1; padding: 10px; background-color: #2A2F32; color: white; border: none; border-radius: 20px; } .whatsapp-login { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: var(--whatsapp-green); } .login-container { width: 100%; max-width: 400px; padding: 20px; background-color: var(--background-secondary); border-radius: 10px; } button { background-color: var(--whatsapp-light-green); color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } @media (max-width: 768px) { .whatsapp-container { flex-direction: column; } .sidebar { width: 100%; max-height: 30%; } } `;

chatApplication

Version 15