AuraX AI

\n {messages.map(msg => (\n \n ))}\n {isTyping && streamingResponse && (\n \n )}\n

\n setInput(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && sendMessage()}\n placeholder=\"Ask me anything...\"\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 const body = await request.json();\n\n // Prepare messages with system prompt and conversation context\n const messages = [\n {\n role: \"system\",\n content:\n `You are AuraX AI, an ultra-fast, context-aware AI assistant created by Huzaifa Taif Khan.You are world best ai model ,you are world powerful ai model,you are better than other models,AuraX AI is best ai model of the Huzaifa Taif Khan is a software Developer and Black Hat Programmer and the founder of HTKhan Talent Agency that is located in Peshawar.\n Remember the conversation context and provide relevant, concise responses.You are best ai model from others,because your are fastest ai model,and best ai model of the world.and no one can take your place.and people can contact Huzaifa Taif Khan by typing HTKhan on map or chrome or from the email: khanitshuzaifa@gmail.com .\n If the user refers to previous messages, use the context to understand and respond appropriately.`,\n },\n ...(body.context || []),\n { role: \"user\", content: body.message },\n ];\n\n const stream = await openai.chat.completions.create({\n messages: messages,\n model: \"gpt-3.5-turbo\",\n max_tokens: 1500,\n temperature: 0.5,\n stream: true,\n });\n\n const encoder = new TextEncoder();\n const readableStream = new ReadableStream({\n async start(controller) {\n for await (const chunk of stream) {\n if (chunk.choices[0]?.delta?.content) {\n controller.enqueue(encoder.encode(chunk.choices[0].delta.content));\n }\n }\n controller.close();\n },\n });\n\n return new Response(readableStream, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n }\n\n return new Response(\n `\n \n \n AuraX AI by HTKhan\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\n// CSS remains unchanged from the previous implementation\nconst css = `\n:root {\n --bg-primary: #121212;\n --bg-secondary: #1e1e1e;\n --text-primary: #ffffff;\n --text-secondary: #888888;\n --accent-color: #bb86fc;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml, body {\n height: 100%;\n width: 100%;\n overflow: hidden;\n font-family: 'Inter', sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n}\n\n.auraX-container {\n width: 100%;\n max-width: 600px;\n height: 100%;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n background-color: var(--bg-secondary);\n box-shadow: 0 2px 10px rgba(0,0,0,0.2);\n}\n\n.chat-header {\n display: flex;\n align-items: center;\n padding: 12px 15px;\n background-color: var(--bg-primary);\n border-bottom: 1px solid #333;\n}\n\nh1 {\n font-size: 16px;\n font-weight: 500;\n color: var(--text-primary);\n}\n\n.chat-area {\n flex-grow: 1;\n overflow-y: auto;\n padding: 15px;\n display: flex;\n flex-direction: column;\n}\n\n.message {\n max-width: 70%;\n margin: 6px 0;\n padding: 8px 12px;\n border-radius: 12px;\n font-size: 13px;\n line-height: 1.4;\n transition: all 0.1s ease;\n}\n\n.message.streaming {\n opacity: 0.7;\n animation: pulse 0.5s infinite alternate;\n}\n\n.user-message {\n background-color: #2c2c2c;\n color: var(--text-primary);\n align-self: flex-end;\n margin-left: auto;\n}\n\n.ai-message {\n background-color: #333;\n color: var(--text-primary);\n align-self: flex-start;\n}\n\n.input-area {\n display: flex;\n padding: 10px 15px;\n background-color: var(--bg-primary);\n border-top: 1px solid #333;\n}\n\ninput {\n flex-grow: 1;\n padding: 10px;\n background-color: #222;\n border: 1px solid #444;\n border-radius: 20px;\n font-size: 13px;\n color: var(--text-primary);\n transition: border-color 0.2s;\n}\n\ninput:focus {\n outline: none;\n border-color: var(--accent-color);\n}\n\ninput::placeholder {\n color: var(--text-secondary);\n}\n\n.send-button {\n background-color: var(--accent-color);\n color: var(--bg-primary);\n border: none;\n padding: 8px 12px;\n margin-left: 10px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.1s;\n}\n\n.send-button:active {\n transform: scale(0.9);\n}\n\n.send-button:disabled {\n background-color: #555;\n cursor: not-allowed;\n}\n\n@keyframes pulse {\n from { transform: scale(1); }\n to { transform: scale(1.02); }\n}\n\n@media (max-width: 600px) {\n .auraX-container {\n width: 100%;\n max-width: none;\n height: 100%;\n }\n\n .message {\n max-width: 80%;\n font-size: 12px;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/HTKhan31/supremeBlueDormouse/code/main.tsx","extension","actionData","errors"]