From 80d59fddc603d9b5b02d59f336dd525691b1b90e Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Fri, 10 Jul 2026 22:48:40 +0800
Subject: [PATCH] Update MobileCallPage and useVoicePreview to handle call end
 state

- Introduce a new state variable `callEnded` in `useVoicePreview` to manage call termination more effectively.
- Modify `MobileCallPage` to adjust the `inCall` condition based on `callEnded`, ensuring accurate UI updates during and after calls.
- Update rendering logic to display appropriate messages based on call status, enhancing user feedback during call transitions.
- Refactor button visibility to only show when in an active call, improving user interface clarity.
---
 .../src/components/pages/MobileCallPage.tsx   | 60 +++++++++++--------
 frontend/src/hooks/use-voice-preview.ts       | 19 +++++-
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/pages/MobileCallPage.tsx b/frontend/src/components/pages/MobileCallPage.tsx
index 39191d2..7769b95 100644
--- a/frontend/src/components/pages/MobileCallPage.tsx
+++ b/frontend/src/components/pages/MobileCallPage.tsx
@@ -248,6 +248,7 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
     selectOutputDevice,
     supportsOutputSelection,
     messages,
+    callEnded,
     networkQuality,
     connect,
     replaceVideoStream,
@@ -267,7 +268,7 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [view, setView] = useState<CallView>("camera");
   const connecting = status === "connecting";
-  const inCall = connecting || status === "connected";
+  const inCall = !callEnded && (connecting || status === "connected");
 
   useEffect(() => {
     if (videoRef.current) videoRef.current.srcObject = cameraStream;
@@ -282,6 +283,7 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
   }, [connect, startCamera]);
 
   const endCall = useCallback(() => {
+    setView("camera");
     disconnect();
     stopCamera();
   }, [disconnect, stopCamera]);
@@ -300,11 +302,10 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
   }, [startCall]);
 
   useEffect(() => {
-    if (status === "idle" || status === "failed") {
+    if (callEnded || status === "idle" || status === "failed") {
       stopCamera();
-      setView("camera");
     }
-  }, [status, stopCamera]);
+  }, [callEnded, status, stopCamera]);
 
   const error = previewError || cameraError;
 
@@ -341,33 +342,39 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
         <span
           className={[
             "h-2 w-2 rounded-full",
-            status === "connected"
+            !callEnded && status === "connected"
               ? "animate-pulse bg-emerald-400"
-              : connecting
+              : !callEnded && connecting
                 ? "animate-pulse bg-amber-300"
                 : "bg-white/40",
           ].join(" ")}
         />
-        {status === "connected"
-          ? "通话中"
-          : connecting
-            ? "正在连接…"
-            : "通话已结束"}
+        {callEnded
+          ? "通话已结束"
+          : status === "connected"
+            ? "通话中"
+            : connecting
+              ? "正在连接…"
+              : "通话已结束"}
       </div>
 
-      <button
-        type="button"
-        onClick={() => setView((current) => current === "camera" ? "chat" : "camera")}
-        aria-label={view === "camera" ? "显示聊天记录" : "显示摄像头画面"}
-        title={view === "camera" ? "聊天记录" : "摄像头画面"}
-        className="absolute right-4 top-[max(1rem,env(safe-area-inset-top))] z-10 flex size-9 items-center justify-center rounded-full border border-white/15 bg-black/40 text-white shadow-lg backdrop-blur-md transition-colors hover:bg-black/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
-      >
-        {view === "camera" ? (
-          <MessageSquareText className="size-[18px]" />
-        ) : (
-          <Video className="size-[18px]" />
-        )}
-      </button>
+      {inCall && (
+        <button
+          type="button"
+          onClick={() =>
+            setView((current) => current === "camera" ? "chat" : "camera")
+          }
+          aria-label={view === "camera" ? "显示聊天记录" : "显示摄像头画面"}
+          title={view === "camera" ? "聊天记录" : "摄像头画面"}
+          className="absolute right-4 top-[max(1rem,env(safe-area-inset-top))] z-10 flex size-9 items-center justify-center rounded-full border border-white/15 bg-black/40 text-white shadow-lg backdrop-blur-md transition-colors hover:bg-black/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
+        >
+          {view === "camera" ? (
+            <MessageSquareText className="size-[18px]" />
+          ) : (
+            <Video className="size-[18px]" />
+          )}
+        </button>
+      )}
 
       {!cameraStream && inCall && view === "camera" && (
         <div className="absolute inset-0 z-[2] flex items-center justify-center px-8 text-center">
@@ -391,7 +398,10 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
           <div className="flex max-w-sm flex-col items-center gap-4 text-center">
             <Button
               type="button"
-              onClick={() => void startCall()}
+              onClick={() => {
+                setView("camera");
+                void startCall();
+              }}
               className="h-12 gap-2 rounded-full bg-white px-6 text-[#07101a] shadow-2xl hover:bg-white/90"
             >
               <Phone size={19} />
diff --git a/frontend/src/hooks/use-voice-preview.ts b/frontend/src/hooks/use-voice-preview.ts
index a93753a..37519bb 100644
--- a/frontend/src/hooks/use-voice-preview.ts
+++ b/frontend/src/hooks/use-voice-preview.ts
@@ -214,6 +214,9 @@ export function useVoicePreview(
   // 远端(助手 TTS)媒体流:除挂到 <audio> 播放外,也暴露给波形可视化
   const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
+  // 后端结束节点/EndFrame 触发的正常结束。与 failed 区分，供独立通话页
+  // 立即收起媒体画面并展示重新开始入口。
+  const [callEnded, setCallEnded] = useState(false);
   const [networkQuality, setNetworkQuality] =
     useState<NetworkQuality>("unknown");
   // 可选麦克风/扬声器列表与当前选择(空串表示交给浏览器选默认设备)
@@ -398,6 +401,7 @@ export function useVoicePreview(
     setError(null);
     setMicWarning(null);
     setMessages([]); // 新会话清空上一轮聊天记录
+    setCallEnded(false);
     endedByServerRef.current = false;
     setStatus("connecting");
 
@@ -630,9 +634,12 @@ export function useVoicePreview(
             // 工作流:后端报告当前激活节点,交给画布高亮
             onNodeActiveRef.current?.(msg.nodeId);
           } else if (msg?.type === "call-ended") {
-            // 后端走到结束节点、正常收尾:随后的断开按正常结束处理,不报错
+            // 后端已播完结束节点的收尾语，即将排入 EndFrame。此时主动释放
+            // 浏览器侧资源，不依赖后续 WebRTC 状态事件是否及时到达。
             endedByServerRef.current = true;
+            setCallEnded(true);
             onNodeActiveRef.current?.(null);
+            disconnect();
           }
         } catch {
           /* 非 JSON / 未知消息,忽略 */
@@ -689,7 +696,14 @@ export function useVoicePreview(
     } finally {
       startingRef.current = false;
     }
-  }, [assistantId, applyOutputDevice, fail, closeOnRemoteEnd, refreshDevices]);
+  }, [
+    assistantId,
+    applyOutputDevice,
+    fail,
+    closeOnRemoteEnd,
+    disconnect,
+    refreshDevices,
+  ]);
 
   useEffect(() => {
     if (status !== "connected") return;
@@ -826,6 +840,7 @@ export function useVoicePreview(
     localStream,
     remoteStream,
     messages,
+    callEnded,
     networkQuality,
     audioInputs,
     audioOutputs,