WhatsApp Clone

\n \n

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

\n {username[0].toUpperCase()}\n

\n \n \n \n

\n \n

\n {contacts.map((contact) => (\n

setSelectedChat(contact)}\n >\n

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

{contact.username}

Last message...

\n 12:34\n

\n ))}\n

\n {selectedChat ? (\n <>\n

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

{selectedChat.username}

Online

\n \n \n \n

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

\n {msg.content}\n 12:34\n

\n ))}\n

\n \n \n setNewMessage(e.target.value)}\n />\n \n

\n \n ) : (\n

Select a chat to start messaging

\n )}\n

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

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