AI Chatbot

\n \n AI Assistant\n

\n {messages.map((m, idx) => (\n

\n {m.text}\n

\n ))}\n

\n setInput(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && sendMessage()}\n placeholder=\"Type a message...\"\n />\n \n

\n );\n}\n\n// Render frontend in browser\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\n// ======================\n// BACKEND CHAT API\n// ======================\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n // POST /chat\n if (request.method === \"POST\" && url.pathname === \"/chat\") {\n try {\n const { message, history } = await request.json();\n\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI({ apiKey: Deno.env.get(\"OPENAI_API_KEY\") });\n\n // System prompt includes info about Abdullah Abdulkareem\n const systemPrompt = `\nYou are a professional AI assistant.\nKnown facts:\n- Abdullah Abdulkareem is the creator of this AI chatbot.\n- Whenever someone asks about him, provide accurate info.\n- Be helpful, polite, and professional.\n`;\n\n const messages = [\n { role: \"system\", content: systemPrompt },\n ...(history || []),\n { role: \"user\", content: message },\n ];\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages,\n max_tokens: 200,\n });\n\n const aiReply = completion.choices[0].message.content;\n\n return new Response(JSON.stringify({ message: aiReply }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (err) {\n console.error(err);\n return new Response(JSON.stringify({ message: \"AI error\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Default HTML page\n return new Response(\n `\n \n \n AI Chatbot\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\n// ======================\n// CSS – Responsive Dark Mode\n// ======================\nconst css = `\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #121212;\n margin: 0;\n padding: 0;\n color: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n\n.chatbot {\n width: min(450px, 90vw);\n height: min(700px, 90vh);\n background: #1e1e1e;\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n box-shadow: 0 10px 30px rgba(0,0,0,0.6);\n overflow: hidden;\n}\n\n.chat-header {\n background-color: #272727;\n color: #00bfff;\n padding: 18px;\n text-align: center;\n font-size: 1.3em;\n font-weight: bold;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n border-bottom: 1px solid #333;\n flex-shrink: 0;\n}\n\n.chat-header img {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n}\n\n.chat-messages {\n flex-grow: 1;\n padding: 15px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 12px;\n background: #1e1e1e;\n scroll-behavior: smooth;\n}\n\n.message {\n max-width: 75%;\n padding: 14px 20px;\n border-radius: 20px;\n word-wrap: break-word;\n line-height: 1.5;\n font-size: 1em;\n box-shadow: 0 2px 6px rgba(0,0,0,0.4);\n opacity: 0;\n transform: translateY(10px);\n animation: fadeInUp 0.3s forwards;\n}\n\n@keyframes fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.message.bot {\n background-color: #2a2a2a;\n color: #e0e0e0;\n align-self: flex-start;\n}\n\n.message.user {\n background-color: #0066cc;\n color: white;\n align-self: flex-end;\n}\n\n.chat-input {\n display: flex;\n gap: 10px;\n padding: 12px 15px;\n border-top: 1px solid #333;\n background: #272727;\n flex-shrink: 0;\n}\n\n.chat-input input {\n flex-grow: 1;\n padding: 12px 18px;\n border-radius: 25px;\n border: 1px solid #444;\n outline: none;\n font-size: 0.95em;\n background-color: #1e1e1e;\n color: #fff;\n}\n\n.chat-input input::placeholder { color: #888; }\n.chat-input input:focus { border-color: #00bfff; }\n\n.chat-input button {\n padding: 12px 22px;\n border-radius: 25px;\n border: none;\n background-color: #00bfff;\n color: #1e1e1e;\n font-weight: bold;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.chat-input button:hover { background-color: #0095d6; }\n\n.chat-messages::-webkit-scrollbar { width: 6px; }\n.chat-messages::-webkit-scrollbar-track { background: #1e1e1e; }\n.chat-messages::-webkit-scrollbar-thumb { background-color: #444; border-radius: 3px; }\n`;","deleted","label",[100],"permalink","https://www.val.town/x/aboode1122/AIAssistant/code/main.ts","extension","actionData","errors"]