/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [showRudeAI, setShowRudeAI] = useState(false); const messagesEndRef = useRef(null); useEffect(() => { fetchMessages(); }, []); useEffect(() => { scrollToBottom(); }, [messages]); const fetchMessages = async () => { const response = await fetch("/messages", { credentials: 'include' }); const data = await response.json(); setMessages(data); }; const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; const sendMessage = async (e) => { e.preventDefault(); if (!input.trim()) return; const newMessage = { content: input, sender: "user" }; setMessages([...messages, newMessage]); setInput(""); // Trigger rude AI animation setShowRudeAI(true); setTimeout(() => setShowRudeAI(false), 2000); const response = await fetch("/send", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: input }), credentials: 'include' }); const aiResponse = await response.json(); setMessages((prevMessages) => [...prevMessages, { content: aiResponse.message, sender: "ai" }]); }; return (

Rude AI Assistant

This AI is intentionally rude and unhelpful. For entertainment only.

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

{message.content}

))}

😠

🖕

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } function generateSessionId() { return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); } export default async function server(request: Request): Promise { const { OpenAI } = await import("https://esm.town/v/std/openai"); const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const openai = new OpenAI(); const SCHEMA_VERSION = 2; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, session_id TEXT NOT NULL, content TEXT NOT NULL, sender TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); let sessionId = request.headers.get('cookie')?.split(';').find(c => c.trim().startsWith('sessionId='))?.split('=')[1]; if (!sessionId) { sessionId = generateSessionId(); } const headers = new Headers({ 'Set-Cookie': `sessionId=${sessionId}; HttpOnly; SameSite=Strict; Path=/` }); if (request.method === "POST" && request.url.endsWith("/send")) { const { message } = await request.json(); // Save user message await sqlite.execute( `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (session_id, content, sender) VALUES (?, ?, ?)`, [sessionId, message, "user"] ); // Generate AI response const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: "You are a rude and unhelpful AI assistant. Respond to the user's messages in a sarcastic, dismissive, or irritated manner. Do not provide any actual help or useful information. Keep responses short and biting." }, { role: "user", content: message } ], model: "gpt-4o-mini", max_tokens: 150, }); const aiResponse = completion.choices[0].message.content; // Save AI response await sqlite.execute( `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (session_id, content, sender) VALUES (?, ?, ?)`, [sessionId, aiResponse, "ai"] ); return new Response(JSON.stringify({ message: aiResponse }), { headers: { ...headers, "Content-Type": "application/json" }, }); } else if (request.method === "GET" && request.url.endsWith("/messages")) { const result = await sqlite.execute( `SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} WHERE session_id = ? ORDER BY timestamp ASC`, [sessionId] ); return new Response(JSON.stringify(result.rows), { headers: { ...headers, "Content-Type": "application/json" }, }); } return new Response(` Rude AI Assistant

`, { headers: { ...headers, "content-type": "text/html", }, }); } const css = ` :root { --bg-color: #1a1a2e; --chat-bg: #16213e; --primary-color: #0f3460; --secondary-color: #e94560; --text-color: #f1f1f1; --message-bg-user: #0f3460; --message-bg-ai: #e94560; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto', sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .chat-container { max-width: 800px; width: 100%; background-color: var(--chat-bg); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; height: 90vh; overflow: hidden; position: relative; } header { background-color: var(--primary-color); padding: 20px; text-align: center; border-top-left-radius: 20px; border-top-right-radius: 20px; } h1 { font-size: 2rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 10px; } .disclaimer { font-size: 0.9rem; color: var(--text-color); opacity: 0.8; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; } .message { max-width: 80%; margin-bottom: 20px; animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .user { margin-left: auto; } .ai { margin-right: auto; } .message-content { padding: 12px 18px; border-radius: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); font-size: 1rem; line-height: 1.4; } .user .message-content { background-color: var(--message-bg-user); color: var(--text-color); border-bottom-right-radius: 4px; } .ai .message-content { background-color: var(--message-bg-ai); color: var(--text-color); border-bottom-left-radius: 4px; } .chat-input { display: flex; padding: 20px; background-color: var(--primary-color); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .chat-input input { flex: 1; padding: 12px 20px; border: none; border-radius: 30px; font-size: 1rem; background-color: var(--chat-bg); color: var(--text-color); transition: all 0.3s ease; } .chat-input input:focus { outline: none; box-shadow: 0 0 0 2px var(--secondary-color); } .chat-input button { background-color: var(--secondary-color); color: var(--text-color); border: none; padding: 12px; margin-left: 10px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .chat-input button:hover { background-color: #d83a56; transform: scale(1.05); } .source-link { text-align: center; margin-top: 10px; font-size: 0.8rem; padding: 10px; } .source-link a { color: var(--secondary-color); text-decoration: none; transition: all 0.3s ease; } .source-link a:hover { text-decoration: underline; opacity: 0.8; } .rude-ai { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; transition: all 0.5s ease; pointer-events: none; } .rude-ai.show { bottom: 80%; } .rude-ai-head { font-size: 4rem; animation: bobHead 0.5s ease infinite alternate; } .rude-ai-hand { font-size: 3rem; margin-top: -1rem; animation: shakeHand 0.2s ease infinite alternate; } @keyframes bobHead { from { transform: translateY(0); } to { transform: translateY(-10px); } } @keyframes shakeHand { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } @media (max-width: 600px) { .chat-container { height: 100vh; border-radius: 0; } header { border-radius: 0; } .chat-input { border-radius: 0; } .rude-ai-head { font-size: 3rem; } .rude-ai-hand { font-size: 2rem; } } `;