\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`;","deleted","label",[99],"permalink","https://www.val.town/x/srijanb69/GeminiVoiceCallApp/code/main.tsx","extension","actionData","errors"]