AI Chat Bot

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [messages, setMessages] = useState([ { role: 'system', content: 'You are a helpful AI assistant.' } ]); const [input, setInput] = useState(''); const [isLoading, setIsLoading] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!input.trim()) return; const newMessages = [...messages, { role: 'user', content: input }]; setMessages(newMessages); setInput(''); setIsLoading(true); try { const response = await fetch('/chat', { method: 'POST', body: JSON.stringify({ messages: newMessages }) }); const data = await response.json(); setMessages(prev => [...prev, { role: 'assistant', content: data.message }]); } catch (error) { console.error('Chat error:', error); setMessages(prev => [...prev, { role: 'assistant', content: 'Sorry, something went wrong.' }]); } finally { setIsLoading(false); } }; return (

{messages.filter(m => m.role !== 'system').map((msg, index) => (

{msg.content}

))} {isLoading &&

🤖 Thinking...

}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === 'POST' && new URL(request.url).pathname === '/chat') { try { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const { messages } = await request.json(); const completion = await openai.chat.completions.create({ messages: messages, model: "gpt-4o-mini", max_tokens: 300, }); return new Response(JSON.stringify({ message: completion.choices[0].message.content }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: 'Failed to process chat' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } return new Response(` AI Chat Bot

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; background-color: #f0f0f0; } .chat-container { width: 100%; max-width: 600px; height: 100vh; display: flex; flex-direction: column; background-color: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .messages { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; } .message { max-width: 80%; margin: 10px 0; padding: 10px; border-radius: 10px; word-wrap: break-word; } .user-message { align-self: flex-end; background-color: #007bff; color: white; margin-left: auto; } .ai-message { align-self: flex-start; background-color: #e9ecef; color: black; margin-right: auto; } .input-area { display: flex; padding: 20px; background-color: #f8f9fa; border-top: 1px solid #e9ecef; } input { flex-grow: 1; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; margin-right: 10px; } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:disabled { background-color: #6c757d; cursor: not-allowed; } .loading { align-self: flex-start; background-color: #e9ecef; color: black; padding: 10px; border-radius: 10px; margin: 10px 0; } `;

ALPHANUMERIC_TEXT_TOO_LONG