make endcall button keeps when connection fail

src/components/playground/PhoneSimulator.tsx

@@ -715,7 +715,7 @@ export function PhoneSimulator({
                   >
                       <PhoneIcon className="w-8 h-8" />
                   </div>
-                  <span className="font-medium text-white">Call Agent</span>
+                  <span className="font-medium text-white">呼叫智能体</span>
               </button>
 
               <div className="relative">
@@ -725,7 +725,7 @@ export function PhoneSimulator({
                 >
                   <VoiceIcon className="w-3 h-3" />
                   <span>
-                    {currentVoiceId === "BV001_streaming" ? "Female Voice" : "Male Voice"}
+                    {currentVoiceId === "BV001_streaming" ? "女性声音" : "男性声音"}
                   </span>
                 </button>
                 {showVoiceMenu && (
@@ -745,7 +745,7 @@ export function PhoneSimulator({
                           : "text-white"
                       }`}
                     >
-                      <span>Female Voice</span>
+                      <span>女性声音</span>
                       {currentVoiceId === "BV001_streaming" && <CheckIcon />}
                     </button>
                     <button
@@ -760,7 +760,7 @@ export function PhoneSimulator({
                           : "text-white"
                       }`}
                     >
-                      <span>Male Voice</span>
+                      <span>男性声音</span>
                       {currentVoiceId === "BV002_streaming" && (
                         <CheckIcon />
                       )}
@@ -1198,6 +1198,20 @@ export function PhoneSimulator({
                   </button>
                 </div>
               )}
+
+              {/* Fallback: Show End Call Button when in push-to-talk mode but no agent/audio */}
+              {phoneMode === "normal" && 
+               isPushToTalkMode && 
+               !voiceAssistant.agent && (
+                <div className="w-full flex items-center justify-center">
+                  <button
+                    className="p-4 rounded-full bg-red-500 text-white hover:bg-red-600 transition-colors"
+                    onClick={handleDisconnect}
+                  >
+                    <PhoneOffIcon className="w-6 h-6" />
+                  </button>
+                </div>
+              )}
             </div>
             </div>
           )

src/components/playground/PlaygroundTile.tsx

@@ -100,7 +100,18 @@ export const PlaygroundTabbedTile: React.FC<PlaygroundTabbedTileProps> = ({
           padding: `${contentPadding * 4}px`,
         }}
       >
-        {tabs[activeTab].content}
+        {tabs.map((tab, index) => (
+          <div
+            key={index}
+            style={{
+              display: index === activeTab ? 'block' : 'none',
+              height: '100%',
+              width: '100%',
+            }}
+          >
+            {tab.content}
+          </div>
+        ))}
       </div>
     </div>
   );

src/transcriptions/TranscriptionTile.tsx

@@ -11,7 +11,7 @@ import {
   Track,
   TranscriptionSegment,
 } from "livekit-client";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 
 export function TranscriptionTile({
   agentAudioTrack,
@@ -30,39 +30,51 @@ export function TranscriptionTile({
     participant: localParticipant.localParticipant,
   });
 
-  const [transcripts, setTranscripts] = useState<Map<string, ChatMessageType>>(
-    new Map(),
-  );
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
   const { chatMessages, send: sendChat } = useChat();
+  const transcriptMapRef = useRef<Map<string, ChatMessageType>>(new Map());
 
-  // store transcripts
+  // Build messages from segments and chat - always rebuild from current state
   useEffect(() => {
+    const transcriptMap = transcriptMapRef.current;
+    
+    // Process agent segments - update existing or add new
     if (agentAudioTrack) {
-      agentMessages.segments.forEach((s) =>
+      agentMessages.segments.forEach((s) => {
-        transcripts.set(
+        const existing = transcriptMap.get(s.id);
+        transcriptMap.set(
           s.id,
           segmentToChatMessage(
             s,
-            transcripts.get(s.id),
+            existing,
             agentAudioTrack.participant,
           ),
-        ),
+        );
-      );
+      });
     }
 
-    localMessages.segments.forEach((s) =>
+    // Process local segments - update existing or add new
-      transcripts.set(
+    localMessages.segments.forEach((s) => {
+      const existing = transcriptMap.get(s.id);
+      transcriptMap.set(
         s.id,
         segmentToChatMessage(
           s,
-          transcripts.get(s.id),
+          existing,
           localParticipant.localParticipant,
         ),
-      ),
+      );
-    );
+    });
 
-    const allMessages = Array.from(transcripts.values());
+    // Build all messages
+    const allMessages: ChatMessageType[] = [];
+    
+    // Add all transcript messages
+    transcriptMap.forEach((msg) => {
+      allMessages.push(msg);
+    });
+    
+    // Add chat messages
     for (const msg of chatMessages) {
       const isAgent = agentAudioTrack
         ? msg.from?.identity === agentAudioTrack.participant?.identity
@@ -79,6 +91,7 @@ export function TranscriptionTile({
           name = "Unknown";
         }
       }
+      
       allMessages.push({
         name,
         message: msg.message,
@@ -86,10 +99,11 @@ export function TranscriptionTile({
         isSelf: isSelf,
       });
     }
+    
+    // Sort by timestamp
     allMessages.sort((a, b) => a.timestamp - b.timestamp);
     setMessages(allMessages);
   }, [
-    transcripts,
     chatMessages,
     localParticipant.localParticipant,
     agentAudioTrack?.participant,