HTKhan AI

Intelligent Conversational Assistant

\n {messages.length === 0 && (\n

Welcome to AI Companion

Explore knowledge, creativity, and insights.

\n )}\n {messages.map(message => (\n \n

\n {message.content}\n

\n ))}\n {isLoading && (\n

\n Generating response...\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\") {\n const { query } = await request.json();\n\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 30000);\n\n try {\n const systemPrompt =\n `You are a sophisticated Fastest AI assistant. And you are made by Huzaifa Taif Khan from HTKhan. And when your write application or letter or something related to study or knowledge so you should answer in points and with english grammer rules,like when first point is finish so start from next line,use points like this i mean use this • and start a point when first point is finish so then on next line write other point with this bullet so it look clean.and when writing application so after The Principal and topic and instituent name should write on other line and then application starts also use this pattern for other things too,and give headings,and Always respond in a structured, point-based format:\n- Begin each response with a clear, concise point\n- Start each subsequent point on a new line, beginning with a bullet point\n- Provide detailed, informative answers,and always give response very very fast.\n- Maintain a professional and helpful tone\n- If the query requires a complex explanation, break it down into logical, easy-to-understand points`;\n\n const stream = new ReadableStream({\n async start(controller) {\n try {\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content: systemPrompt,\n },\n {\n role: \"user\",\n content: query,\n },\n ],\n model: \"gpt-4o-mini\",\n stream: true,\n max_tokens: 2000,\n temperature: 0.8,\n top_p: 1,\n frequency_penalty: 0.5,\n presence_penalty: 0.5,\n });\n\n for await (const chunk of completion) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(new TextEncoder().encode(content));\n }\n }\n controller.close();\n } catch (error) {\n console.error(\"Stream error:\", error);\n controller.error(error);\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n } catch (error) {\n console.error(\"Server error:\", error);\n return new Response(`Error: ${error.message}`, { status: 500 });\n } finally {\n clearTimeout(timeoutId);\n }\n }\n\n return new Response(\n `\n \n \n HTKhan AI\n \n \n \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: #0a0b0d;\n --bg-secondary: #121418;\n --bg-tertiary: #1c1e24;\n --text-primary: #e6e8eb;\n --text-secondary: #8a8f98;\n --accent-primary: #2c3036;\n --accent-secondary: #3a4046;\n --border-color: #2a2e34;\n --gradient-primary: linear-gradient(135deg, rgba(18,20,24,0.9), rgba(10,11,13,0.9));\n --shadow-soft: rgba(0,0,0,0.1);\n --shadow-medium: rgba(0,0,0,0.2);\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scrollbar-width: thin;\n scrollbar-color: var(--accent-primary) transparent;\n -webkit-tap-highlight-color: transparent;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: fixed;\n touch-action: manipulation;\n background-color: var(--bg-primary);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.chat-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n background: var(--gradient-primary);\n box-shadow: 0 0 30px var(--shadow-medium);\n overflow: hidden;\n}\n\n.chat-header {\n padding: 15px;\n background-color: var(--bg-secondary);\n border-bottom: 1px solid var(--border-color);\n text-align: center;\n position: relative;\n}\n\n.header-content {\n position: relative;\n z-index: 2;\n}\n\n.header-content h1 {\n font-size: 1.2rem;\n font-weight: 600;\n letter-spacing: -0.5px;\n background: linear-gradient(90deg, var(--text-primary), var(--text-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n position: relative;\n}\n\n.header-content h1::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 50px;\n height: 2px;\n background: linear-gradient(90deg, var(--text-primary), transparent);\n}\n\n.header-subtitle {\n font-size: 0.8rem;\n color: var(--text-secondary);\n margin-top: 3px;\n}\n\n.chat-messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 15px;\n display: flex;\n flex-direction: column;\n -webkit-overflow-scrolling: touch;\n scroll-behavior: smooth;\n background-color: var(--bg-tertiary);\n}\n\n.chat-messages::-webkit-scrollbar {\n width: 6px;\n}\n\n.chat-messages::-webkit-scrollbar-thumb {\n background-color: var(--accent-primary);\n border-radius: 3px;\n}\n\n.welcome-message {\n text-align: center;\n color: var(--text-secondary);\n margin: auto;\n padding: 20px;\n background-color: var(--bg-secondary);\n border-radius: 12px;\n opacity: 0.9;\n}\n\n.message {\n max-width: 90%;\n margin-bottom: 12px;\n display: flex;\n transition: all 0.3s ease;\n opacity: 0;\n transform: translateY(10px);\n animation: fadeInMessage 0.3s forwards;\n}\n\n@keyframes fadeInMessage {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.message-content {\n padding: 12px 15px;\n border-radius: 12px;\n line-height: 1.5;\n word-wrap: break-word;\n font-size: 0.9rem;\n position: relative;\n background-color: var(--accent-primary);\n box-shadow: 0 4px 6px var(--shadow-soft);\n transition: all 0.3s ease;\n}\n\n.user-message {\n align-self: flex-end;\n}\n\n.user-message .message-content {\n background: linear-gradient(135deg, var(--bg-secondary), var(--accent-secondary));\n color: var(--text-primary);\n}\n\n.ai-message .message-content {\n background: linear-gradient(135deg, var(--bg-secondary), var(--accent-primary));\n color: var(--text-primary);\n}\n\n.typing-indicator {\n display: flex;\n align-items: center;\n font-style: italic;\n color: var(--text-secondary);\n font-size: 0.8rem;\n}\n\n.dot-pulse {\n width: 8px;\n height: 8px;\n background-color: var(--text-secondary);\n border-radius: 50%;\n margin-right: 8px;\n animation: dot-pulse 1.5s infinite ease-in-out;\n}\n\n@keyframes dot-pulse {\n 0%, 100% { transform: scale(0.7); opacity: 0.6; }\n 50% { transform: scale(1); opacity: 1; }\n}\n\n.chat-input-form {\n padding: 10px;\n background-color: var(--bg-secondary);\n border-top: 1px solid var(--border-color);\n}\n\n.input-wrapper {\n display: flex;\n align-items: center;\n background-color: var(--accent-primary);\n border-radius: 20px;\n overflow: hidden;\n border: 1px solid var(--border-color);\n transition: all 0.3s ease;\n}\n\n.input-wrapper:focus-within {\n box-shadow: 0 0 0 2px var(--text-secondary);\n}\n\n.chat-input {\n flex-grow: 1;\n background-color: transparent;\n color: var(--text-primary);\n border: none;\n padding: 10px 15px;\n resize: none;\n max-height: 100px;\n font-size: 0.9rem;\n transition: all 0.3s ease;\n}\n\n.chat-input::placeholder {\n color: var(--text-secondary);\n transition: color 0.3s ease;\n}\n\n.chat-input:focus::placeholder {\n color: transparent;\n}\n\n.send-button {\n background-color: var(--accent-secondary);\n color: var(--text-primary);\n border: none;\n width: 45px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.3s ease;\n transform: scale(0.9);\n}\n\n.send-button:hover {\n transform: scale(1);\n background-color: var(--border-color);\n}\n\n.send-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.send-button svg {\n width: 22px;\n height: 22px;\n}\n\n@media (max-width: 360px) {\n .chat-container {\n font-size: 12px;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/huzaifa527/fastAIAssistant/code/main.tsx","extension","actionData","errors"]