/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import ReactMarkdown from "https://esm.sh/react-markdown@9.0.1"; import remarkGfm from "https://esm.sh/remark-gfm@4.0.0"; import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter@15.5.0"; import { oneDark } from "https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/styles/prism"; const CHAT_URL = "/api/chat"; const STATUS_URL = "/api/status"; const MODELS = [ "claude-3-haiku", "gpt-4o-mini", "llama-3.1-70b", "mixtral-8x7b" ]; const MODEL_MAP = { "claude-3-haiku": "claude-3-haiku-20240307", "gpt-4o-mini": "gpt-4o-mini", "llama-3.1-70b": "meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo", "mixtral-8x7b": "mistralai/Mixtral-8x7B-Instruct-v0.1" }; function MarkdownMessage({ content, role }) { return (

{String(children).replace(/\n$/, '')} ) : (


                {children}

); }, h1: ({ node, ...props }) =>

, h2: ({ node, ...props }) =>

, h3: ({ node, ...props }) =>

, a: ({ node, ...props }) => ( ), blockquote: ({ node, ...props }) => (
), table: ({ node, ...props }) => ( ), ul: ({ node, ...props }) => (
), ol: ({ node, ...props }) => (
) }} > {content} ); } function App() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [model, setModel] = useState(MODELS[0]); const [vqd, setVqd] = useState(''); const [isLoading, setIsLoading] = useState(false); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(scrollToBottom, [messages]); const getVQD = async () => { try { const response = await fetch(STATUS_URL, { headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.3", "x-vqd-accept": "1" } }); console.log('VQD Fetch Headers:', Object.fromEntries(response.headers.entries())); const newVQD = response.headers.get('x-vqd-4') || ''; console.log('Fetched VQD:', newVQD); setVqd(newVQD); return newVQD; } catch (error) { console.error('VQD Fetch Error:', error); return ''; } }; const sendMessage = async () => { if (!input.trim()) return; const userMessage = { role: 'user', content: input }; const updatedMessages = [...messages, userMessage]; setMessages(updatedMessages); setInput(''); setIsLoading(true); try { let currentVQD = vqd || await getVQD(); const response = await fetch(CHAT_URL, { method: 'POST', headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.3", "Content-Type": "application/json", "x-vqd-4": currentVQD }, body: JSON.stringify({ model: MODEL_MAP[model], messages: updatedMessages }) }); console.log('Chat Request Headers:', Object.fromEntries(response.headers.entries())); const reader = response.body?.getReader(); const decoder = new TextDecoder(); let assistantResponse = ''; while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); console.log('Raw Chunk:', chunk); const lines = chunk.split('\n'); for (const line of lines) { if (line.startsWith('data:')) { try { const data = JSON.parse(line.slice(5).trim()); console.log('Parsed Chunk Data:', data); if (data.action === 'success' && data.message) { assistantResponse += data.message; setMessages(prev => { const updatedMsgs = [...prev]; if (updatedMsgs.length > 0 && updatedMsgs[updatedMsgs.length - 1].role === 'assistant') { updatedMsgs[updatedMsgs.length - 1].content = assistantResponse; } else { updatedMsgs.push({ role: 'assistant', content: assistantResponse }); } return updatedMsgs; }); } } catch (parseError) { console.error('Parsing Error:', parseError); } } } } const newVQD = response.headers.get('x-vqd-4'); if (newVQD) { console.log('Updated VQD:', newVQD); setVqd(newVQD); } } catch (error) { console.error('Chat Error:', error); } finally { setIsLoading(false); } }; const clearChat = () => { setMessages([]); setVqd(''); }; return (

{messages.map((msg, index) => ( ))} {isLoading &&
Generating...
}

setInput(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && sendMessage()} style={styles.input} placeholder="Type a message..." />

); } const styles = { container: { maxWidth: '800px', margin: '0 auto', fontFamily: 'Inter, system-ui, sans-serif', display: 'flex', flexDirection: 'column', height: '100vh', backgroundColor: '#f4f4f5' }, header: { display: 'flex', justifyContent: 'space-between', padding: '15px', backgroundColor: '#e4e4e7', borderBottom: '1px solid #d4d4d8' }, modelSelect: { padding: '8px', borderRadius: '6px', border: '1px solid #a1a1aa', backgroundColor: 'white' }, clearButton: { padding: '8px 15px', backgroundColor: '#ef4444', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', transition: 'background-color 0.2s' }, messagesContainer: { flex: 1, overflowY: 'auto', padding: '20px', backgroundColor: 'white', display: 'flex', flexDirection: 'column', gap: '15px' }, userMessage: { alignSelf: 'flex-end', backgroundColor: '#e6f2ff', borderRadius: '12px', padding: '15px', maxWidth: '80%', boxShadow: '0 1px 3px rgba(0,0,0,0.1)' }, assistantMessage: { alignSelf: 'flex-start', backgroundColor: '#f4f4f5', borderRadius: '12px', padding: '15px', maxWidth: '80%', boxShadow: '0 1px 3px rgba(0,0,0,0.1)' }, inputContainer: { display: 'flex', padding: '15px', backgroundColor: '#f4f4f5', borderTop: '1px solid #e4e4e7' }, input: { flex: 1, padding: '12px', borderRadius: '8px', border: '1px solid #a1a1aa', marginRight: '15px', fontSize: '16px' }, sendButton: { padding: '12px 20px', backgroundColor: '#10b981', color: 'white', border: 'none', borderRadius: '8px', cursor: 'pointer', transition: 'background-color 0.2s' }, loadingIndicator: { textAlign: 'center', color: '#71717a', padding: '15px', fontStyle: 'italic' }, markdownH1: { fontSize: '1.5em', color: '#18181b', borderBottom: '1px solid #e4e4e7', paddingBottom: '0.3em' }, markdownH2: { fontSize: '1.3em', color: '#27272a' }, markdownH3: { fontSize: '1.1em', color: '#3f3f46' }, markdownLink: { color: '#0284c7', textDecoration: 'none', fontWeight: 'bold' }, markdownBlockquote: { borderLeft: '4px solid #a1a1aa', paddingLeft: '10px', color: '#71717a', fontStyle: 'italic' }, markdownTable: { width: '100%', borderCollapse: 'collapse', marginBottom: '1em' }, markdownList: { paddingLeft: '30px' } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { // Proxy for DuckDuckGo API calls if (request.method === 'OPTIONS') { return new Response(null, { headers: { 'Access-Control-Allow-Origin': '', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, x-vqd-accept, x-vqd-4, User-Agent', } }); } if (request.url.includes('/api/status')) { try { const statusResponse = await fetch('https://duckduckgo.com/duckchat/v1/status', { headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.3", "x-vqd-accept": "1" } }); const vqdToken = statusResponse.headers.get('x-vqd-4') || ''; return new Response(null, { status: statusResponse.status, headers: { 'Access-Control-Allow-Origin': '', 'x-vqd-4': vqdToken, 'Content-Type': 'application/json' } }); } catch (error) { console.error('Status Proxy Error:', error); return new Response(JSON.stringify({ error: 'Failed to fetch VQD' }), { status: 500, headers: { 'Access-Control-Allow-Origin': '', 'Content-Type': 'application/json' } }); } } if (request.url.includes('/api/chat')) { try { const requestBody = await request.json(); const chatResponse = await fetch('https://duckduckgo.com/duckchat/v1/chat', { method: 'POST', headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.3", "Content-Type": "application/json", "x-vqd-4": request.headers.get('x-vqd-4') || '' }, body: JSON.stringify(requestBody) }); const newVqdToken = chatResponse.headers.get('x-vqd-4') || ''; // Create a streaming response const { readable, writable } = new TransformStream(); chatResponse.body.pipeTo(writable); return new Response(readable, { status: chatResponse.status, headers: { 'Access-Control-Allow-Origin': '', 'x-vqd-4': newVqdToken, 'Content-Type': 'text/event-stream' } }); } catch (error) { console.error('Chat Proxy Error:', error); return new Response(JSON.stringify({ error: 'Failed to proxy chat request' }), { status: 500, headers: { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json' } }); } } // Default HTML response return new Response(` DuckDuckGo Chat
`, { headers: { "content-type": "text/html" } }); }

kauri