configurable room name and perform RPC calls (#127)

src/components/playground/Playground.tsx

@@ -23,11 +23,13 @@ import {
   useRoomInfo,
   useTracks,
   useVoiceAssistant,
+  useRoomContext,
 } from "@livekit/components-react";
 import { ConnectionState, LocalParticipant, Track } from "livekit-client";
 import { QRCodeSVG } from "qrcode.react";
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import tailwindTheme from "../../lib/tailwindTheme.preval";
+import { EditableNameValueRow } from "@/components/config/NameValueRow";
 
 export interface PlaygroundMeta {
   name: string;
@@ -56,6 +58,10 @@ export default function Playground({
 
   const roomState = useConnectionState();
   const tracks = useTracks();
+  const room = useRoomContext();
+
+  const [rpcMethod, setRpcMethod] = useState("");
+  const [rpcPayload, setRpcPayload] = useState("");
 
   useEffect(() => {
     if (roomState === ConnectionState.Connected) {
@@ -212,6 +218,21 @@ export default function Playground({
     return <></>;
   }, [config.settings.theme_color, voiceAssistant.audioTrack]);
 
+  const handleRpcCall = useCallback(async () => {
+    if (!voiceAssistant.agent || !room) return;
+    
+    try {
+      const response = await room.localParticipant.performRpc({
+        destinationIdentity: voiceAssistant.agent.identity,
+        method: rpcMethod,
+        payload: rpcPayload,
+      });
+      console.log('RPC response:', response);
+    } catch (e) {
+      console.error('RPC call failed:', e);
+    }
+  }, [room, rpcMethod, rpcPayload, voiceAssistant.agent]);
+
   const settingsTileContent = useMemo(() => {
     return (
       <div className="flex flex-col gap-4 h-full w-full items-start overflow-y-auto">
@@ -222,19 +243,65 @@ export default function Playground({
         )}
 
         <ConfigurationPanelItem title="Settings">
-          {localParticipant && (
-            <div className="flex flex-col gap-2">
-              <NameValueRow
-                name="Room"
-                value={name}
-                valueColor={`${config.settings.theme_color}-500`}
-              />
-              <NameValueRow
-                name="Participant"
-                value={localParticipant.identity}
-              />
-            </div>
-          )}
+          <div className="flex flex-col gap-4">
+            <EditableNameValueRow
+              name="Room"
+              value={roomState === ConnectionState.Connected ? name : config.settings.room_name}
+              valueColor={`${config.settings.theme_color}-500`}
+              onValueChange={(value) => {
+                const newSettings = { ...config.settings };
+                newSettings.room_name = value;
+                setUserSettings(newSettings);
+              }}
+              placeholder="Enter room name"
+              editable={roomState !== ConnectionState.Connected}
+            />
+            <EditableNameValueRow
+              name="Participant"
+              value={roomState === ConnectionState.Connected ? 
+                (localParticipant?.identity || '') : 
+                (config.settings.participant_name || '')}
+              valueColor={`${config.settings.theme_color}-500`}
+              onValueChange={(value) => {
+                const newSettings = { ...config.settings };
+                newSettings.participant_name = value;
+                setUserSettings(newSettings);
+              }}
+              placeholder="Enter participant id"
+              editable={roomState !== ConnectionState.Connected}
+            />
+          </div>
+          <div className="flex flex-col gap-2 mt-4">
+            <div className="text-xs text-gray-500 mt-2">RPC Method</div>
+            <input
+              type="text"
+              value={rpcMethod}
+              onChange={(e) => setRpcMethod(e.target.value)}
+              className="w-full text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2"
+              placeholder="RPC method name"
+            />
+            
+            <div className="text-xs text-gray-500 mt-2">RPC Payload</div>
+            <textarea
+              value={rpcPayload}
+              onChange={(e) => setRpcPayload(e.target.value)}
+              className="w-full text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2"
+              placeholder="RPC payload"
+              rows={2}
+            />
+            
+            <button
+              onClick={handleRpcCall}
+              disabled={!voiceAssistant.agent || !rpcMethod}
+              className={`mt-2 px-2 py-1 rounded-sm text-xs 
+                ${voiceAssistant.agent && rpcMethod 
+                  ? `bg-${config.settings.theme_color}-500 hover:bg-${config.settings.theme_color}-600` 
+                  : 'bg-gray-700 cursor-not-allowed'
+                } text-white`}
+            >
+              Perform RPC Call
+            </button>
+          </div>
         </ConfigurationPanelItem>
         <ConfigurationPanelItem title="Status">
           <div className="flex flex-col gap-2">
@@ -327,6 +394,9 @@ export default function Playground({
     themeColors,
     setUserSettings,
     voiceAssistant.agent,
+    rpcMethod,
+    rpcPayload,
+    handleRpcCall,
   ]);
 
   let mobileTabs: PlaygroundTab[] = [];