/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import { vscDarkPlus } from "https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/styles/prism?deps=react@18.2.0"; import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter@15.5.0?deps=react@18.2.0"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; // ============================================================================== // SECTION 1: STYLES // ============================================================================== const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #1e1e1e; color: #e0e0e0; } .chat-container { max-width: 800px; margin: 0 auto; background-color: #2d2d2d; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); padding: 20px; position: relative; } h1 { text-align: center; color: #e0e0e0; margin-top: 0; padding-top: 20px; } .message-list { height: 500px; overflow-y: auto; border: 1px solid #444; padding: 10px; margin-bottom: 20px; background-color: #1e1e1e; } .message { margin-bottom: 15px; padding: 10px; border-radius: 4px; line-height: 1.4; } .user { background-color: #2c3e50; text-align: right; } .assistant { background-color: #34495e; text-align: left; } .system { background-color: #3a3a3a; font-style: italic; text-align: center; } form { display: flex; } input { flex-grow: 1; padding: 10px; font-size: 16px; border: 1px solid #444; background-color: #3d3d3d; color: #e0e0e0; border-radius: 4px 0 0 4px; } button { padding: 10px 20px; font-size: 16px; background-color: #0056b3; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } button:hover { background-color: #003d82; } button:disabled { background-color: #666; cursor: not-allowed; } .settings-button { position: absolute; top: 20px; right: 20px; background-color: #3d3d3d; color: #e0e0e0; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .settings-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; } .settings-content { background-color: #2d2d2d; padding: 20px; border-radius: 8px; width: 300px; } .settings-content h2 { margin-top: 0; color: #e0e0e0; } .settings-content button { width: 100%; margin-top: 10px; } .warning { color: #ffa500; margin-top: 10px; font-size: 14px; } pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; } code { font-family: 'Courier New', Courier, monospace; } .debug-toggle { margin-top: 10px; display: flex; justify-content: flex-end; align-items: center; } .debug-toggle label { margin-right: 10px; } .debug-info { margin-top: 20px; padding: 10px; background-color: #1e1e1e; border: 1px solid #444; border-radius: 4px; } `; // ============================================================================== // SECTION 2: DATABASE FUNCTIONS // ============================================================================== function createDatabaseFunctions(sqlite, KEY, SCHEMA_VERSION) { return { async initialize() { // Create messages table await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, role TEXT NOT NULL, content TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); }, async getMessages() { const result = await sqlite.execute( `SELECT role, content FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY timestamp ASC`, ); return result.rows; }, async saveMessage(role, message) { await sqlite.execute( `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (role, content) VALUES (?, ?)`, [role, message], ); }, }; } // ============================================================================== // SECTION 3: SERVER FUNCTION // ============================================================================== export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const { GoogleGenerativeAI } = await import("https://esm.sh/@google/generative-ai@0.1.3"); const SCHEMA_VERSION = 2; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const db = createDatabaseFunctions(sqlite, KEY, SCHEMA_VERSION); await db.initialize(); const url = new URL(request.url); const path = url.pathname; const method = request.method; // Routes if (path === "/messages" && method === "GET") { try { const messages = await db.getMessages(); return new Response(JSON.stringify(messages), { headers: { "Content-Type": "application/json" }, }); } catch (error) { console.error("Error fetching messages:", error); return new Response( JSON.stringify({ error: "Failed to fetch messages" }), { status: 500 }, ); } } if (path === "/chat" && method === "POST") { const { message, debug } = await request.json(); await db.saveMessage("user", message); const genAI = new GoogleGenerativeAI(Deno.env.get("GEMINI_API_KEY")); const model = "gemini-2.0-flash-exp"; try { const genModel = genAI.getGenerativeModel({ model }); const result = await genModel.generateContent(message); const response = await result.response; const aiMessage = response.text(); await db.saveMessage("assistant", aiMessage); const debugInfo = debug ? { request: { model, prompt: message, }, response: aiMessage, } : null; return new Response( JSON.stringify({ role: "assistant", content: aiMessage, debug: debugInfo }), { headers: { "Content-Type": "application/json" } }, ); } catch (error) { console.error("Error generating content:", error); const errorMsg = `I'm sorry, but I encountered an error while processing your request with the ${model} model. ${error.message}`; return new Response( JSON.stringify({ role: "assistant", content: errorMsg, debug: debug ? { error: error.toString() } : null, }), { headers: { "Content-Type": "application/json" }, status: 500 }, ); } } // Default: serve the main HTML page return new Response( ` Gemini Chat

`, { headers: { "content-type": "text/html" } }, ); } // ============================================================================== // SECTION 4: REACT COMPONENTS // ============================================================================== function Settings({ isOpen, onClose }) { if (!isOpen) return null; return (

Settings

Current model: gemini-2.0-flash-exp

Warning: Gemini 2.0 Flash is an experimental preview. Some features may not be available, and it may not be suitable for production use.

); } function formatMessage(content) { const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g; const parts = []; let lastIndex = 0; let match; while ((match = codeBlockRegex.exec(content)) !== null) { // Add text before the code block if (match.index > lastIndex) { parts.push(content.slice(lastIndex, match.index)); } // Add the code block with syntax highlighting const language = match[1] || "javascript"; parts.push( {match[2].trim()} , ); lastIndex = match.index + match[0].length; } // Add any remaining text if (lastIndex < content.length) { parts.push(content.slice(lastIndex)); } return parts; } function Message({ role, content, debug }) { return (

{role === "user" ? "You" : role === "assistant" ? "Gemini" : "System"}: {" "} {formatMessage(content).map((part, index) => React.isValidElement(part) ? part : {part})} {debug && (

Debug Information:

{JSON.stringify(debug, null, 2)}

)}

); } function App() { const [input, setInput] = useState(""); const [messages, setMessages] = useState([]); const [isSettingsOpen, setIsSettingsOpen] = useState(false); const [loading, setLoading] = useState(false); const [debugMode, setDebugMode] = useState(false); const messageListRef = useRef(null); useEffect(() => { loadMessages(); }, []); useEffect(() => { // Scroll to the bottom whenever messages update if (messageListRef.current) { messageListRef.current.scrollTop = messageListRef.current.scrollHeight; } }, [messages]); const loadMessages = async () => { try { const response = await fetch("/messages"); if (!response.ok) { throw new Error("Failed to fetch messages"); } const data = await response.json(); setMessages(data); } catch (error) { console.error("Error fetching messages:", error); setMessages([ { role: "system", content: "Failed to load messages. Please try refreshing the page.", }, ]); } }; const handleSubmit = async (e) => { e.preventDefault(); if (!input.trim() || loading) return; const userMessage = { role: "user", content: input }; setMessages((prev) => [...prev, userMessage]); setInput(""); setLoading(true); try { const response = await fetch("/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: input, debug: debugMode }), }); if (!response.ok) { throw new Error("Failed to send chat message"); } const data = await response.json(); setMessages((prev) => [ ...prev, { role: data.role, content: data.content, debug: debugMode ? data.debug : null }, ]); } catch (error) { console.error("Error sending chat message:", error); setMessages((prev) => [ ...prev, { role: "system", content: "An error occurred while processing your message. Please try again.", }, ]); } finally { setLoading(false); } }; return (

Gemini Chat

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

Debug Mode: setDebugMode(e.target.checked)} />

setIsSettingsOpen(false)} /> View Source

); } // ============================================================================== // SECTION 5: CLIENT-SIDE INITIALIZATION // ============================================================================== function client() { createRoot(document.getElementById("root")).render(); } // Only run the client code if we're in a browser if (typeof document !== "undefined") { client(); }

geminichat