fix end call bug

src/components/playground/PhoneSimulator.tsx

@@ -218,7 +218,21 @@ export function PhoneSimulator({
   };
 
   const handleDisconnect = () => {
-    onDisconnect();
+    try {
+      // Only disconnect if we're actually connected
+      if (roomState === ConnectionState.Connected || roomState === ConnectionState.Connecting) {
+        onDisconnect();
+      }
+    } catch (error) {
+      // Silently handle any errors during disconnect
+      console.warn("Error during disconnect:", error);
+      // Still try to call onDisconnect to ensure cleanup
+      try {
+        onDisconnect();
+      } catch (e) {
+        // Ignore secondary errors
+      }
+    }
   };
 
   const validateImageFile = (file: File) => {

src/components/playground/Playground.tsx

@@ -76,6 +76,47 @@ export default function Playground({
   const [rpcPayload, setRpcPayload] = useState("");
   const [showRpc, setShowRpc] = useState(false);
 
+  // Clean up RPC resolvers before disconnecting to prevent errors
+  const cleanupRpcResolvers = useCallback(() => {
+    // Clean up any pending important message RPC
+    if (importantMessageResolverRef.current) {
+      const resolver = importantMessageResolverRef.current;
+      importantMessageResolverRef.current = null;
+      try {
+        // Only resolve if room is still connected to avoid RPC errors
+        if (roomState === ConnectionState.Connected) {
+          resolver("disconnected");
+        }
+      } catch (error) {
+        // Ignore errors during cleanup - room might be disconnecting
+      }
+    }
+    // Clean up any pending image capture RPC
+    if (imageCaptureResolverRef.current) {
+      const resolver = imageCaptureResolverRef.current;
+      imageCaptureResolverRef.current = null;
+      try {
+        // Only resolve if room is still connected to avoid RPC errors
+        if (roomState === ConnectionState.Connected) {
+          resolver(JSON.stringify({ error: "disconnected" }));
+        }
+      } catch (error) {
+        // Ignore errors during cleanup - room might be disconnecting
+      }
+    }
+  }, [roomState]);
+
+  // Wrapper for disconnect that cleans up RPC resolvers first
+  const handleDisconnect = useCallback(() => {
+    cleanupRpcResolvers();
+    try {
+      onConnect(false);
+    } catch (error) {
+      // Silently handle any errors during disconnect
+      console.warn("Error during disconnect:", error);
+    }
+  }, [onConnect, cleanupRpcResolvers]);
+
   useEffect(() => {
     if (roomState === ConnectionState.Connected) {
       localParticipant.setCameraEnabled(config.settings.inputs.camera);
@@ -145,7 +186,7 @@ export default function Playground({
       'hangUpCall',
       async () => {
         // Disconnect the call
-        onConnect(false);
+        handleDisconnect();
         return JSON.stringify({ success: true });
       }
     );
@@ -179,7 +220,7 @@ export default function Playground({
         });
       }
     );
-  }, [localParticipant, roomState, onConnect]);
+  }, [localParticipant, roomState, handleDisconnect]);
 
   useEffect(() => {
     if (roomState === ConnectionState.Connected) {
@@ -721,7 +762,7 @@ export default function Playground({
         >
           <PhoneSimulator 
             onConnect={() => onConnect(true)} 
-            onDisconnect={() => onConnect(false)}
+            onDisconnect={handleDisconnect}
             phoneMode={phoneMode} 
             capturePrompt={capturePrompt}
             importantMessage={importantMessage}
@@ -792,9 +833,13 @@ export default function Playground({
         height={headerHeight}
         accentColor={config.settings.theme_color}
         connectionState={roomState}
-        onConnectClicked={() =>
-          onConnect(roomState === ConnectionState.Disconnected)
-        }
+        onConnectClicked={() => {
+          if (roomState === ConnectionState.Disconnected) {
+            onConnect(true);
+          } else {
+            handleDisconnect();
+          }
+        }}
       />
       <div
         className={`flex gap-4 py-4 grow w-full selection:bg-${config.settings.theme_color}-900`}
@@ -821,7 +866,7 @@ export default function Playground({
           >
             <PhoneSimulator 
             onConnect={() => onConnect(true)} 
-            onDisconnect={() => onConnect(false)}
+            onDisconnect={handleDisconnect}
             phoneMode={phoneMode} 
             capturePrompt={capturePrompt}
             importantMessage={importantMessage}