Bug fixed

src/components/playground/PhoneSimulator.tsx

@@ -78,6 +78,32 @@ export function PhoneSimulator({
     }
   }, [config.settings.attributes]);
 
+  // Set talking_mode attribute when connected or when mode changes
+  useEffect(() => {
+    if (roomState === ConnectionState.Connected && localParticipant) {
+      const talkingMode = isPushToTalkMode ? "push_to_talk" : "realtime";
+      try {
+        // Get current attributes to preserve them
+        const currentAttributes: Record<string, string> = {};
+        // Note: LiveKit's setAttributes replaces all attributes, so we need to merge
+        // with existing ones from config if any
+        const configAttributes = config.settings.attributes || [];
+        configAttributes.forEach(attr => {
+          if (attr.key && attr.value) {
+            currentAttributes[attr.key] = attr.value;
+          }
+        });
+        // Set talking_mode along with other attributes
+        localParticipant.setAttributes({
+          ...currentAttributes,
+          talking_mode: talkingMode,
+        });
+      } catch (error) {
+        console.error("Failed to set talking_mode attribute:", error);
+      }
+    }
+  }, [roomState, localParticipant, isPushToTalkMode, config.settings.attributes]);
+
   const [currentTime, setCurrentTime] = useState("");
 
   const [visualizerPosition, setVisualizerPosition] = useState({
@@ -1255,7 +1281,7 @@ export function PhoneSimulator({
               )}
 
               {/* Realtime Mode Layout */}
-              {!isPushToTalkMode && (
+              {!isPushToTalkMode && phoneMode !== "hand_off" && (
                 <>
                   {/* Important Message Mode - Centered End Call Button */}
                   {phoneMode === "important_message" ? (
@@ -1270,22 +1296,20 @@ export function PhoneSimulator({
                   ) : (
                     <div className="w-full flex items-center justify-center gap-4">
                       {/* Mic Toggle */}
-                      {phoneMode !== "hand_off" && (
-                        <button
-                          className={`p-4 rounded-full backdrop-blur-md transition-colors ${
-                            !isMicEnabled
-                              ? "bg-white text-black"
-                              : "bg-gray-600/50 text-white hover:bg-gray-600/70"
-                          }`}
-                          onClick={handleMicToggle}
-                        >
-                          {isMicEnabled ? (
-                            <MicIcon className="w-6 h-6" />
-                          ) : (
-                            <MicOffIcon className="w-6 h-6" />
-                          )}
-                        </button>
-                      )}
+                      <button
+                        className={`p-4 rounded-full backdrop-blur-md transition-colors ${
+                          !isMicEnabled
+                            ? "bg-white text-black"
+                            : "bg-gray-600/50 text-white hover:bg-gray-600/70"
+                        }`}
+                        onClick={handleMicToggle}
+                      >
+                        {isMicEnabled ? (
+                          <MicIcon className="w-6 h-6" />
+                        ) : (
+                          <MicOffIcon className="w-6 h-6" />
+                        )}
+                      </button>
 
                       {/* End Call Button */}
                       <button