From 28b9a16c4e717a4d7e1524cff9bf78ba70cd4a68 Mon Sep 17 00:00:00 2001
From: Xin Wang <wangxin19930411@163.com>
Date: Fri, 19 Dec 2025 10:55:13 +0800
Subject: [PATCH] make chat message overlay right

---
 src/components/playground/PhoneSimulator.tsx | 47 +++++++++-----------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/components/playground/PhoneSimulator.tsx b/src/components/playground/PhoneSimulator.tsx
index 61f35fa..ae2c0a2 100644
--- a/src/components/playground/PhoneSimulator.tsx
+++ b/src/components/playground/PhoneSimulator.tsx
@@ -70,7 +70,7 @@ export function PhoneSimulator({
   const pushToTalkButtonRef = useRef<HTMLButtonElement>(null);
   const [showChatOverlay, setShowChatOverlay] = useState(false);
   const [chatOverlayPosition, setChatOverlayPosition] = useState({ x: 0, y: 0 }); // Will be positioned at top-right by ChatOverlay component
-  const [chatTogglePosition, setChatTogglePosition] = useState({ x: 0, y: 56 }); // Initial position aligned with visualizer
+  const [chatTogglePosition, setChatTogglePosition] = useState<{ x?: number; right?: number; y: number }>({ right: 16, y: 56 }); // Initial position on the right
   const [isDraggingChatToggle, setIsDraggingChatToggle] = useState(false);
   const chatToggleRef = useRef<HTMLButtonElement>(null);
   const chatToggleDragOffset = useRef({ x: 0, y: 0 });
@@ -203,14 +203,26 @@ export function PhoneSimulator({
     if (!phoneContainerRef.current || !chatToggleRef.current) return;
     
     const containerRect = phoneContainerRef.current.getBoundingClientRect();
+    const buttonRect = chatToggleRef.current.getBoundingClientRect();
     const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
     const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
     
-    // Calculate offset relative to container
-    chatToggleDragOffset.current = {
-      x: clientX - containerRect.left - chatTogglePosition.x,
-      y: clientY - containerRect.top - chatTogglePosition.y,
-    };
+    // If using right positioning, convert to x for dragging
+    if (chatTogglePosition.right !== undefined && chatTogglePosition.x === undefined) {
+      const currentX = containerRect.width - chatTogglePosition.right - buttonRect.width;
+      setChatTogglePosition({ x: currentX, y: chatTogglePosition.y });
+      chatToggleDragOffset.current = {
+        x: clientX - containerRect.left - currentX,
+        y: clientY - containerRect.top - chatTogglePosition.y,
+      };
+    } else {
+      // Already using x positioning
+      const currentX = chatTogglePosition.x ?? 0;
+      chatToggleDragOffset.current = {
+        x: clientX - containerRect.left - currentX,
+        y: clientY - containerRect.top - chatTogglePosition.y,
+      };
+    }
   };
 
   const handleChatToggleDragMove = (e: MouseEvent | TouchEvent) => {
@@ -269,24 +281,8 @@ export function PhoneSimulator({
     };
   }, [isDraggingChatToggle]);
 
-  // Initialize chat toggle button position when connected and container is available
-  useEffect(() => {
-    if (roomState === ConnectionState.Connected && phoneContainerRef.current) {
-      // Use a small delay to ensure the button is rendered
-      const timer = setTimeout(() => {
-        if (phoneContainerRef.current && chatToggleRef.current) {
-          const containerWidth = phoneContainerRef.current.offsetWidth;
-          const buttonWidth = chatToggleRef.current.offsetWidth || 44; // Approximate button width
-          // Position at rightmost border (flush with right edge)
-          setChatTogglePosition({
-            x: containerWidth - buttonWidth - 56,
-            y: 56,
-          });
-        }
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-  }, [roomState]); // Initialize when connected
+  // Initialize chat toggle button position - keep it on the right using 'right' CSS property
+  // Only convert to 'x' (left positioning) when user drags it
 
   useEffect(() => {
     if (showCameraMenu) {
@@ -1013,7 +1009,8 @@ export function PhoneSimulator({
           onTouchStart={handleChatToggleDragStart}
           title={showChatOverlay ? "Hide chat (drag to move)" : "Show chat (drag to move)"}
           style={{
-            left: chatTogglePosition.x,
+            ...(chatTogglePosition.x !== undefined ? { left: chatTogglePosition.x } : {}),
+            ...(chatTogglePosition.right !== undefined ? { right: chatTogglePosition.right } : {}),
             top: chatTogglePosition.y,
           }}
         >