Merge branch 'phone-interface'

src/components/playground/Playground.tsx

@@ -75,6 +75,7 @@ export default function Playground({
   const [rpcMethod, setRpcMethod] = useState("");
   const [rpcPayload, setRpcPayload] = useState("");
   const [showRpc, setShowRpc] = useState(false);
+  const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
 
   // Clean up RPC resolvers before disconnecting to prevent errors
   const cleanupRpcResolvers = useCallback(() => {
@@ -406,17 +407,25 @@ export default function Playground({
   }, [agentVideoTrack, config, roomState]);
 
   useEffect(() => {
-    document.body.style.setProperty(
+    if (typeof document !== "undefined") {
-      "--lk-theme-color",
+      document.body.style.setProperty(
-      // @ts-ignore
+        "--lk-theme-color",
-      tailwindTheme.colors[config.settings.theme_color]["500"],
+        // @ts-ignore
-    );
+        tailwindTheme.colors[config.settings.theme_color]["500"],
-    document.body.style.setProperty(
+      );
-      "--lk-drop-shadow",
+      document.body.style.setProperty(
-      `var(--lk-theme-color) 0px 0px 18px`,
+        "--lk-drop-shadow",
-    );
+        `var(--lk-theme-color) 0px 0px 18px`,
+      );
+    }
   }, [config.settings.theme_color]);
 
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setQrCodeUrl(window.location.href);
+    }
+  }, []);
+
   const audioTileContent = useMemo(() => {
     const disconnectedContent = (
       <div className="flex flex-col items-center justify-center gap-2 text-gray-700 text-center w-full">
@@ -738,10 +747,10 @@ export default function Playground({
             <AudioInputTile trackRef={localMicTrack} />
           </ConfigurationPanelItem>
         )}
-        {config.show_qr && (
+        {config.show_qr && qrCodeUrl && (
           <div className="w-full">
             <ConfigurationPanelItem title="QR Code">
-              <QRCodeSVG value={window.location.href} width="128" />
+              <QRCodeSVG value={qrCodeUrl} width="128" />
             </ConfigurationPanelItem>
           </div>
         )}