Website Chatbot

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function WebsiteChatbot() { const [messages, setMessages] = useState([ { role: 'assistant', content: 'Hello! I am your personal website assistant. How can I help you today?' } ]); const [input, setInput] = useState(''); const [isLoading, setIsLoading] = useState(false); async function handleSubmit(e: React.FormEvent) { e.preventDefault(); if (!input.trim()) return; const userMessage = { role: 'user', content: input }; setMessages(prev => [...prev, userMessage]); setInput(''); setIsLoading(true); try { const response = await fetch('/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [...messages, userMessage], currentUrl: window.location.href }) }); const data = await response.json(); setMessages(prev => [...prev, { role: 'assistant', content: data.response }]); } catch (error) { setMessages(prev => [...prev, { role: 'assistant', content: 'Sorry, I encountered an error processing your request.' }]); } finally { setIsLoading(false); } } return (

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

{msg.content}

))} {isLoading &&

...

}

); } function client() { const chatbotRoot = document.createElement('div'); chatbotRoot.id = 'website-chatbot-root'; document.body.appendChild(chatbotRoot); createRoot(chatbotRoot).render(); } if (typeof document !== 'undefined') { client(); } export default async function server(request: Request) { 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 { messages, currentUrl } = body; // Context-aware AI processing const systemPrompt = `You are a helpful AI assistant specialized in the current website: ${currentUrl}. If asked about PDFs or specific content, try to provide direct links if possible. Be conversational, helpful, and website-specific in your responses.`; const completion = await openai.chat.completions.create({ messages: [ { role: 'system', content: systemPrompt }, ...messages ], model: 'gpt-4o-mini', max_tokens: 300 }); return Response.json({ response: completion.choices[0].message.content }); } return new Response(` Website Chatbot

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` .chatbot-container { position: fixed; bottom: 20px; right: 20px; width: 300px; height: 400px; background: white; border: 1px solid #ccc; display: flex; flex-direction: column; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 10000; } .chat-messages { flex-grow: 1; overflow-y: auto; padding: 10px; } .message { margin-bottom: 10px; padding: 5px; border-radius: 5px; } .message.user { background-color: #e6f2ff; text-align: right; } .message.assistant { background-color: #f0f0f0; } .chat-input { display: flex; padding: 10px; } .chat-input input { flex-grow: 1; margin-right: 10px; } `;

shivammunday