\n {!isConnected ? (\n

AI Voice Assistant

\n \n

\n ) : (\n

\n $\"AI$ \n

AI Assistant

\n {isListening ? \"Listening...\" : \"Connected\"}\n

\n \n

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

\n {msg.text}\n

\n ))}\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 === '/ai-response') {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n \n const body = await request.json();\n const conversationHistory = body.conversation || [];\n\n const completion = await openai.chat.completions.create({\n messages: [\n { \n role: \"system\", \n content: \"You are a helpful AI assistant in a voice call. Keep responses concise and natural. \" +\n \"Maintain context from the entire conversation history. Respond directly to the latest user message.\" \n },\n ...conversationHistory\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n return new Response(JSON.stringify({\n response: completion.choices[0].message.content\n }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n return new Response(`\n \n \n AI Voice Call\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\nbody, html {\n margin: 0;\n padding: 0;\n height: 100%;\n font-family: 'Arial', sans-serif;\n background-color: #f0f0f0;\n}\n\n#root {\n height: 100%;\n}\n\n.voice-call-container {\n width: 100%;\n height: 100%;\n background-color: white;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.start-screen {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n text-align: center;\n}\n\n.call-screen {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.call-header {\n background-color: #4a4a4a;\n color: white;\n padding: 15px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.contact-info {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.avatar {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n margin-bottom: 10px;\n}\n\n.call-status {\n color: #00ff00;\n font-size: 14px;\n}\n\n.end-call {\n background-color: red;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n}\n\n.conversation-log {\n flex-grow: 1;\n overflow-y: auto;\n padding: 15px;\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 10px;\n max-width: 80%;\n}\n\n.message.user {\n background-color: #007bff;\n color: white;\n align-self: flex-end;\n margin-left: auto;\n}\n\n.message.ai {\n background-color: #e9ecef;\n color: black;\n align-self: flex-start;\n}\n\n.call-controls {\n display: flex;\n justify-content: center;\n gap: 10px;\n padding: 20px;\n background-color: #f8f9fa;\n}\n\n.mic-button {\n border: none;\n padding: 15px 30px;\n border-radius: 30px;\n font-size: 16px;\n cursor: pointer;\n background-color: #4CAF50;\n color: white;\n}\n\n.mic-button:disabled {\n background-color: #cccccc;\n}\n`;","createdAt",["D",1740380360020],"version",3,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","srijanb69","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ0VFdDc2owTjdBeDBUNzZiTnRUN3RVc3hqaSJ9","forkedVal","interval","slug","srijanb69/GeminiVoiceCallApp","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[142,145,148,151],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1740380360020],{"_118":91,"_143":-5,"_116":146,"_113":147},["D",1740380179721],"7361ad2c-f27c-11ef-a4ea-569c3dd06744",{"_118":125,"_143":-5,"_116":149,"_113":150},["D",1740379929919],"de7cd786-f27b-11ef-ad3f-569c3dd06744",{"_118":32,"_143":-5,"_116":152,"_113":153},["D",1740379281784],"5c2c076c-f27a-11ef-b9bd-569c3dd06744","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.pulls._index",{"_96":97,"_95":161,"_130":131,"_138":139,"_99":100,"_173":32,"_174":32,"_51":52,"_175":176},{"_99":100,"_96":97,"_101":102,"_103":-5,"_104":-5,"_105":106,"_107":-5,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":162,"_118":119,"_120":26,"_121":32,"_122":32,"_123":32,"_124":125,"_126":32,"_127":32,"_128":-5,"_20":163,"_134":-5,"_135":-7,"_136":137,"_138":139,"_140":164},["D",1740380360020],{"_130":131,"_132":133},[165,167,169,171],{"_118":119,"_143":-5,"_116":166,"_113":111},["D",1740380360020],{"_118":91,"_143":-5,"_116":168,"_113":147},["D",1740380179721],{"_118":125,"_143":-5,"_116":170,"_113":150},["D",1740379929919],{"_118":32,"_143":-5,"_116":172,"_113":153},["D",1740379281784],"page","count","prs",[],"routes/_app","actionData","errors"]