/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function AssistantChat() { const [messages, setMessages] = useState<{role: string, content: string}[]>([ { role: 'system', content: 'You are a helpful AI assistant named ValAI, capable of understanding and assisting with various tasks.' } ]); 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', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages }) }); const data = await response.json(); setMessages(prev => [...prev, { role: 'assistant', content: data.response }]); } catch (error) { console.error('Chat error:', error); setMessages(prev => [...prev, { role: 'assistant', content: 'Sorry, I encountered an error processing your request.' }]); } finally { setIsLoading(false); } }; return (

ValAI - Intelligent Virtual Assistant 🤖

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

{msg.content}

))} {isLoading &&

Thinking...

}

View Source

); } 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') { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); try { const { messages } = await request.json(); const completion = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: messages, max_tokens: 300 }); return new Response(JSON.stringify({ response: completion.choices[0].message.content || "I'm not sure how to respond." }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { return new Response(JSON.stringify({ error: 'Failed to process request' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } return new Response(` ValAI - Intelligent Virtual Assistant

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` body { font-family: 'Arial', sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .assistant-container { background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; } .chat-window { height: 400px; overflow-y: auto; border: 1px solid #e0e0e0; padding: 10px; margin-bottom: 15px; } .message { margin-bottom: 10px; padding: 10px; border-radius: 5px; } .user-message { background-color: #e6f2ff; text-align: right; } .ai-message { background-color: #f0f0f0; text-align: left; } .chat-input { display: flex; } .chat-input input { flex-grow: 1; padding: 10px; margin-right: 10px; } .loading { color: #888; text-align: center; padding: 10px; } .source-link { margin-top: 10px; text-align: center; font-size: 0.8em; } `;

tidyRedWhale