// This chatbot app will use a simple React frontend to display messages and allow user input. // The backend will use OpenAI's GPT model to generate responses. // We'll use SQLite to store conversation history. /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); useEffect(() => { fetchMessages(); }, []); const fetchMessages = async () => { const response = await fetch("/messages"); const data = await response.json(); setMessages(data); }; const sendMessage = async (e) => { e.preventDefault(); if (!input.trim()) return; const userMessage = { role: "user", content: input }; setMessages([...messages, userMessage]); setInput(""); const response = await fetch("/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: input }), }); const data = await response.json(); setMessages([...messages, userMessage, data]); }; return (

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

{msg.content}

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const Cerebras = await import("https://esm.sh/@cerebras/cerebras_cloud_sdk"); const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1; 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, role TEXT NOT NULL, content TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); const url = new URL(request.url); if (url.pathname === "/messages") { const messages = await sqlite.execute(`SELECT role, content FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY timestamp ASC`); return new Response(JSON.stringify(messages.rows), { headers: { "Content-Type": "application/json" }, }); } else if (url.pathname === "/chat" && request.method === "POST") { const { message } = await request.json(); await sqlite.execute(`INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (role, content) VALUES (?, ?)`, ["user", message]); const client = new Cerebras.default({ apiKey: Deno.env.get('CEREBRAS_API_KEY'), }); const completion = await client.chat.completions.create({ messages: [ { role: "system", content: "You are a helpful AI assistant." }, { role: "user", content: message } ], model: "llama3.1-8b", max_tokens: 150, temperature: 0.7, }); const aiResponse = completion.choices[0].message.content; await sqlite.execute(`INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (role, content) VALUES (?, ?)`, ["assistant", aiResponse]); return new Response(JSON.stringify({ role: "assistant", content: aiResponse }), { headers: { "Content-Type": "application/json" }, }); } return new Response(` Chatbot App

Chatbot App

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; } .chat-container { max-width: 600px; margin: 0 auto; background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; } .messages { height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; margin-bottom: 20px; } .message { margin-bottom: 10px; padding: 8px; border-radius: 4px; } .user { background-color: #e6f2ff; text-align: right; } .assistant { background-color: #f0f0f0; } .input-form { display: flex; } input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } button { padding: 10px 20px; background-color: #0056b3; color: white; border: none; border-radius: 4px; margin-left: 10px; cursor: pointer; } button:hover { background-color: #003d82; } `; export default server;

longOliveGuppy

Versions

v0