App.tsx

// Action: Update App.tsx to call window.sendToFlutter in key places:


`import { useEffect, useState } from 'react';
import { RetellWebClient } from 'retell-client-js-sdk';

const retellWebClient = new RetellWebClient();

const App = () => {
const [isCalling, setIsCalling] = useState(false);
const [callStatus, setCallStatus] = useState<'idle' | 'connecting' | 'active' | 'ending'>('idle');

useEffect(() => {
retellWebClient.on("call_started", () => {
console.log("call started");
setCallStatus('active');
window.sendToFlutter?.('call_started', 'Call started from App.tsx');
});

retellWebClient.on("call_ended", () => {
console.log("call ended");
setIsCalling(false);
setCallStatus('idle');
window.sendToFlutter?.('call_ended', 'Call ended from App.tsx');
});

retellWebClient.on("agent_start_talking", () => {
console.log("agent_start_talking");
window.sendToFlutter?.('status', 'Agent started talking from App.tsx');
});

retellWebClient.on("agent_stop_talking", () => {
console.log("agent_stop_talking");
window.sendToFlutter?.('status', 'Agent stopped talking from App.tsx');
});

retellWebClient.on("error", (error) => {
console.error("An error occurred:", error);
window.sendToFlutter?.('error', 'Retell error from App.tsx: ' + (error?.message || 'Unknown error'));
retellWebClient.stopCall();
});
}, []);

const toggleConversation = async () => {
if (isCalling) {
setCallStatus('ending');
window.sendToFlutter?.('status', 'Stopping call from App.tsx');
retellWebClient.stopCall();
} else {
setCallStatus('connecting');
window.sendToFlutter?.('status', 'Starting call from App.tsx');
try {
const registerCallResponse = await registerCall(agentId);
if (registerCallResponse.access_token) {
retellWebClient
.startCall({
accessToken: registerCallResponse.access_token,
})
.catch((error) => {
console.error('Failed to start call:', error);
window.sendToFlutter?.('error', 'Failed to start call from App.tsx: ' + error.message);
});
setIsCalling(true);
}
} catch (error) {
console.error('Failed to start call:', error);
window.sendToFlutter?.('error', 'Failed to fetch access token: ' + error.message);
setCallStatus('idle');
}
}
};

async function registerCall(agentId: string): Promise<RegisterCallResponse> {
try {
const response = await fetch("https://apiharm.aiyug.us/create-web-call", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
agent_id: agentId,
}),
});

if (!response.ok) {
throw new Error(`Error: ${response.status}`);
}

const data: RegisterCallResponse = await response.json();
window.sendToFlutter?.('status', 'Access token received');
return data;
} catch (err) {
window.sendToFlutter?.('error', 'Failed to register call: ' + err.message);
throw new Error(err);
}
}

return (
<div className="App">
<button
className={`call-button ${callStatus}`}
onClick={toggleConversation}
disabled={callStatus === 'connecting' || callStatus === 'ending'}
>
<div className="button-content">
{callStatus === 'active' ? (
<svg className="hangup-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.7l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.1-.7-.28-.79-.73-1.68-1.36-2.66-1.85-.33-.16-.56-.51-.56-.90v-3.1C15.15 9.25 13.6 9 12 9z"/>
</svg>
) : (
<svg className="call-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
</svg>
)}
</div>
</button>
</div>
);
};

export default App;`