AuraX AI

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

\n {index === messages.length - 1 && isLoading\n ? (\n displayWords.length > 0 ? displayWords.join(\" \") : msg.content\n )\n : (\n msg.content\n )}\n

\n ))}\n {isLoading && displayWords.length === 0 && (\n

\n )}\n

\n setInputText(e.target.value)}\n onKeyPress={(e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n }}\n placeholder=\"AuraX AI Request...\"\n rows={1}\n disabled={isLoading}\n />\n \n \n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/chat\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n try {\n const { messages } = await request.json();\n\n const completion = await openai.chat.completions.create({\n messages: [\n ...messages,\n {\n role: \"system\",\n content:\n \"Always respond with a concise, engaging answer.you are created by Huzaifa Taif Khan from Team HTKhan.Use a confident, slightly playful tone. Include relevant emojis if appropriate.\",\n },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n temperature: 0.7, // Balanced between creativity and precision\n stream: false,\n top_p: 0.8,\n });\n\n return new Response(\n JSON.stringify({\n message: completion.choices[0].message.content,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n return new Response(\n JSON.stringify({\n error: \"Quantum Transmission Disrupted\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n return new Response(\n `\n \n \n AuraX AI\n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-primary: #000000;\n --bg-secondary: #0a0a0a;\n --text-primary: #ffffff;\n --text-secondary: #888888;\n --accent-color: #00ffff;\n --border-color: #1a1a1a;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-color) var(--bg-secondary);\n}\n\nbody {\n font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.5;\n overscroll-behavior: none;\n}\n\n.chat-container {\n max-width: 800px;\n margin: 0 auto;\n height: 100vh;\n display: flex;\n flex-direction: column;\n background-color: var(--bg-primary);\n box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);\n}\n\n.chat-header {\n background-color: var(--bg-secondary);\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid var(--border-color);\n}\n\n.chat-header h1 {\n font-size: 0.9rem;\n color: var(--accent-color);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 2px;\n}\n\n.messages-container {\n flex-grow: 1;\n overflow-y-auto;\n padding: 18px;\n background: linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-secondary) 100%);\n}\n\n.messages {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.message {\n display: flex;\n width: 100%;\n}\n\n.message-content {\n max-width: 90%;\n padding: 12px;\n border-radius: 12px;\n line-height: 1.4;\n position: relative;\n overflow: hidden;\n font-size: 0.9rem;\n}\n\n.message.user {\n justify-content: flex-end;\n}\n\n.message.user .message-content {\n background-color: var(--accent-color);\n color: var(--bg-primary);\n background: linear-gradient(135deg, var(--accent-color), #00cccc);\n}\n\n.message.assistant .message-content {\n background-color: var(--bg-secondary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n}\n\n.message.loading .message-content {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.quantum-aura-loader {\n position: relative;\n width: 60px;\n height: 60px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.aura-ring {\n position: absolute;\n border: 2px solid rgba(0, 255, 255, 0.2);\n border-radius: 50%;\n animation: aura-pulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;\n}\n\n.aura-ring:nth-child(1) {\n width: 100%;\n height: 100%;\n animation-delay: -0.4s;\n}\n\n.aura-ring:nth-child(2) {\n width: 80%;\n height: 80%;\n animation-delay: -0.2s;\n}\n\n.aura-ring:nth-child(3) {\n width: 60%;\n height: 60%;\n}\n\n.aura-core {\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--accent-color);\n border-radius: 50%;\n box-shadow: 0 0 10px var(--accent-color);\n animation: aura-core-pulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;\n}\n\n@keyframes aura-pulse {\n 0%, 100% {\n transform: scale(0.5);\n opacity: 0;\n }\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n@keyframes aura-core-pulse {\n 0%, 100% {\n transform: scale(0.7);\n opacity: 0.6;\n }\n 50% {\n transform: scale(1.3);\n opacity: 1;\n }\n}\n\n.input-container {\n padding: 12px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n}\n\n.input-area {\n display: flex;\n align-items: flex-end;\n background-color: var(--bg-primary);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n overflow: hidden;\n}\n\ntextarea {\n flex-grow: 1;\n padding: 10px;\n background-color: transparent;\n color: var(--text-primary);\n border: none;\n resize: none;\n max-height: 200px;\n min-height: 50px;\n outline: none;\n font-size: 14px;\n line-height: 1.4;\n}\n\n.send-button {\n background-color: transparent;\n border: none;\n color: var(--accent-color);\n padding: 10px;\n cursor: pointer;\n transition: transform 0.2s ease;\n}\n\n.send-button:hover:not(:disabled) {\n transform: scale(1.2);\n}\n\n.send-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n@media (max-width: 600px) {\n .chat-container {\n height: 100dvh;\n width: 100%;\n }\n \n .message-content {\n max-width: 95%;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/HTKhan14/AuraX_AI/code/main.tsx","extension","actionData","errors"]