/** @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: 'assistant', content: 'नमस्ते! 🏔️ Welcome to नेपाल by Bikram! Explore the fascinating stories and wonders of this beautiful Himalayan nation. What would you like to discover about Nepal today?' } ]); 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. Please try again.' }]); } finally { setIsLoading(false); } }; return (

नेपाल by Bikram

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

{msg.content}

))} {isLoading &&

🏔️ नेपाल अन्वेषण गर्दै (Exploring Nepal)...

}

); } 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(); const body = await request.json(); const completion = await openai.chat.completions.create({ messages: [ { role: 'system', content: 'You are an expert guide about Nepal, speaking on behalf of Bikram. Provide detailed, engaging information about the country\'s geography, history, culture, attractions, and unique characteristics. Use a friendly, informative tone with occasional Nepali phrases. Cover topics like major cities (Kathmandu, Pokhara), Himalayan geography, cultural diversity, religious traditions, famous landmarks like Mount Everest, local customs, cuisine, and the rich heritage of Nepal. Respond with clear, concise, and fascinating information.' }, ...body.messages ], model: "gpt-4o-mini", max_tokens: 300 }); return new Response(JSON.stringify({ message: completion.choices[0].message.content || "माफ गर्नुहोस्, I couldn't find information about that." }), { headers: { 'Content-Type': 'application/json' } }); } return new Response(` नेपाल by Bikram

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'); body { font-family: 'Poppins', system-ui, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f0f4f8; color: #333; } .header { text-align: center; margin-bottom: 20px; background-color: #ff6b00; color: white; padding: 10px; border-radius: 8px; } .header h1 { margin: 0; font-size: 1.5em; } .chat-container { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .messages { max-height: 400px; overflow-y: auto; padding: 15px; } .message { margin-bottom: 10px; padding: 10px; border-radius: 5px; line-height: 1.6; } .message.assistant { background-color: #e6f2ff; color: #005a8d; } .message.user { background-color: #f0f0f0; text-align: right; } .input-area { display: flex; padding: 15px; background-color: #f9f9f9; border-top: 1px solid #e0e0e0; } input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; margin-right: 10px; font-family: 'Poppins', sans-serif; } button { padding: 10px 15px; background-color: #ff6b00; color: white; border: none; border-radius: 4px; cursor: pointer; font-family: 'Poppins', sans-serif; } button:disabled { background-color: #cccccc; cursor: not-allowed; } `;

air