/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; const INSTANT_RESPONSES = { "": "", "": "", "": "", "time": () => { const now = new Date(); return `Current time is ${now.toLocaleTimeString()}`; }, "date": () => { const now = new Date(); return `Today is ${now.toLocaleDateString()}`; }, }; interface Message { id: number; content: string; type: "user" | "ai"; } function App() { const [messages, setMessages] = useState([]); const [query, setQuery] = useState(""); const [isLoading, setIsLoading] = useState(false); const chatEndRef = useRef(null); const textareaRef = useRef(null); const responseCache = useRef>(new Map()); const abortControllerRef = useRef(null); const scrollToBottom = useCallback(() => { chatEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, []); useEffect(() => { scrollToBottom(); }, [messages, scrollToBottom]); useEffect(() => { const textarea = textareaRef.current; if (textarea) { textarea.style.height = "auto"; textarea.style.height = `${Math.min(textarea.scrollHeight, 100)}px`; } }, [query]); const handleInstantResponse = (query: string) => { const lowerQuery = query.toLowerCase().trim(); for (const [key, response] of Object.entries(INSTANT_RESPONSES)) { if (lowerQuery.includes(key)) { return typeof response === "function" ? response() : response; } } return null; }; const handleSubmit = useCallback(async (e: React.FormEvent) => { e.preventDefault(); if (!query.trim()) return; if (abortControllerRef.current) { abortControllerRef.current.abort(); } const newUserMessage: Message = { id: Date.now(), content: query, type: "user", }; setMessages(prev => [...prev, newUserMessage]); if (responseCache.current.has(query)) { const cachedResponse = responseCache.current.get(query); if (cachedResponse) { const aiMessage: Message = { id: Date.now() + 1, content: cachedResponse, type: "ai", }; setMessages(prev => [...prev, aiMessage]); setQuery(""); return; } } const instantResponse = handleInstantResponse(query); if (instantResponse) { const aiMessage: Message = { id: Date.now() + 1, content: instantResponse, type: "ai", }; setMessages(prev => [...prev, aiMessage]); setQuery(""); return; } setQuery(""); setIsLoading(true); abortControllerRef.current = new AbortController(); try { const res = await fetch("/query", { method: "POST", body: JSON.stringify({ query }), signal: abortControllerRef.current.signal, }); if (!res.ok) throw new Error("Query failed"); const reader = res.body?.getReader(); const decoder = new TextDecoder(); let aiResponse = ""; const aiMessage: Message = { id: Date.now() + 1, content: "", type: "ai", }; setMessages(prev => [...prev, aiMessage]); while (true) { const { done, value } = await reader?.read() || {}; if (done) break; const chunk = decoder.decode(value); aiResponse += chunk; setMessages(prev => { const updatedMessages = [...prev]; const lastMessageIndex = updatedMessages.length - 1; updatedMessages[lastMessageIndex] = { ...updatedMessages[lastMessageIndex], content: aiResponse, }; return updatedMessages; }); } responseCache.current.set(query, aiResponse); } catch (error) { if (error.name === "AbortError") { console.log("Request was aborted"); return; } const errorMessage: Message = { id: Date.now() + 2, content: `Error: ${error instanceof Error ? error.message : "Unknown error"}`, type: "ai", }; setMessages(prev => [...prev, errorMessage]); } finally { setIsLoading(false); abortControllerRef.current = null; } }, [query]); return (

HTKhan AI

Intelligent Conversational Assistant

{messages.length === 0 && (

Welcome to AI Companion

Explore knowledge, creativity, and insights.

)} {messages.map(message => (

{message.content}

))} {isLoading && (

Generating response...

)}

setQuery(e.target.value)}
            placeholder="Ask anything, explore everything..."
            disabled={isLoading}
            rows={1}
            className="chat-input"
          />
          <button
            type="submit"
            disabled={!query.trim() || isLoading}
            className="send-button"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
            </svg>
          </button>
        </div>
      </form>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST") {
    const { query } = await request.json();

const { OpenAI } = await import("https://esm.town/v/std/openai");
    const openai = new OpenAI();

const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 30000);

try {
      const systemPrompt =
        `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:
- Begin each response with a clear, concise point
- Start each subsequent point on a new line, beginning with a bullet point
- Provide detailed, informative answers,and always give response very very fast.
- Maintain a professional and helpful tone
- If the query requires a complex explanation, break it down into logical, easy-to-understand points`;

const stream = new ReadableStream({
        async start(controller) {
          try {
            const completion = await openai.chat.completions.create({
              messages: [
                {
                  role: "system",
                  content: systemPrompt,
                },
                {
                  role: "user",
                  content: query,
                },
              ],
              model: "gpt-4o-mini",
              stream: true,
              max_tokens: 2000,
              temperature: 0.8,
              top_p: 1,
              frequency_penalty: 0.5,
              presence_penalty: 0.5,
            });

for await (const chunk of completion) {
              const content = chunk.choices[0]?.delta?.content || "";
              if (content) {
                controller.enqueue(new TextEncoder().encode(content));
              }
            }
            controller.close();
          } catch (error) {
            console.error("Stream error:", error);
            controller.error(error);
          }
        },
      });

return new Response(stream, {
        headers: {
          "Content-Type": "text/plain",
          "Cache-Control": "no-cache",
        },
      });
    } catch (error) {
      console.error("Server error:", error);
      return new Response(`Error: ${error.message}`, { status: 500 });
    } finally {
      clearTimeout(timeoutId);
    }
  }

return new Response(
    `
    <html>
      <head>
        <title>HTKhan AI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}

const css = `
:root {
  --bg-primary: #0a0b0d;
  --bg-secondary: #121418;
  --bg-tertiary: #1c1e24;
  --text-primary: #e6e8eb;
  --text-secondary: #8a8f98;
  --accent-primary: #2c3036;
  --accent-secondary: #3a4046;
  --border-color: #2a2e34;
  --gradient-primary: linear-gradient(135deg, rgba(18,20,24,0.9), rgba(10,11,13,0.9));
  --shadow-soft: rgba(0,0,0,0.1);
  --shadow-medium: rgba(0,0,0,0.2);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) transparent;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  touch-action: manipulation;
  background-color: var(--bg-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.chat-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gradient-primary);
  box-shadow: 0 0 30px var(--shadow-medium);
  overflow: hidden;
}

.chat-header {
  padding: 15px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  position: relative;
}

.header-content {
  position: relative;
  z-index: 2;
}

.header-content h1 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.header-content h1::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, var(--text-primary), transparent);
}

.header-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 3px;
}

.chat-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background-color: var(--bg-tertiary);
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background-color: var(--accent-primary);
  border-radius: 3px;
}

.welcome-message {
  text-align: center;
  color: var(--text-secondary);
  margin: auto;
  padding: 20px;
  background-color: var(--bg-secondary);
  border-radius: 12px;
  opacity: 0.9;
}

.message {
  max-width: 90%;
  margin-bottom: 12px;
  display: flex;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInMessage 0.3s forwards;
}

@keyframes fadeInMessage {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-content {
  padding: 12px 15px;
  border-radius: 12px;
  line-height: 1.5;
  word-wrap: break-word;
  font-size: 0.9rem;
  position: relative;
  background-color: var(--accent-primary);
  box-shadow: 0 4px 6px var(--shadow-soft);
  transition: all 0.3s ease;
}

.user-message {
  align-self: flex-end;
}

.user-message .message-content {
  background: linear-gradient(135deg, var(--bg-secondary), var(--accent-secondary));
  color: var(--text-primary);
}

.ai-message .message-content {
  background: linear-gradient(135deg, var(--bg-secondary), var(--accent-primary));
  color: var(--text-primary);
}

.typing-indicator {
  display: flex;
  align-items: center;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.dot-pulse {
  width: 8px;
  height: 8px;
  background-color: var(--text-secondary);
  border-radius: 50%;
  margin-right: 8px;
  animation: dot-pulse 1.5s infinite ease-in-out;
}

@keyframes dot-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.6; }
  50% { transform: scale(1); opacity: 1; }
}

.chat-input-form {
  padding: 10px;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.input-wrapper {
  display: flex;
  align-items: center;
  background-color: var(--accent-primary);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  box-shadow: 0 0 0 2px var(--text-secondary);
}

.chat-input {
  flex-grow: 1;
  background-color: transparent;
  color: var(--text-primary);
  border: none;
  padding: 10px 15px;
  resize: none;
  max-height: 100px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.chat-input::placeholder {
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.chat-input:focus::placeholder {
  color: transparent;
}

.send-button {
  background-color: var(--accent-secondary);
  color: var(--text-primary);
  border: none;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: scale(0.9);
}

.send-button:hover {
  transform: scale(1);
  background-color: var(--border-color);
}

.send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.send-button svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 360px) {
  .chat-container {
    font-size: 12px;
  }
}
`;</article></body></html>

huzaifa527