fix: add editable room name with fresh token on each connect (#199)

Author: longcw

package.json

@@ -19,7 +19,7 @@
     "cookies-next": "^6.0.0",
     "framer-motion": "^12.0.0",
     "js-yaml": "^4.1.0",
-    "livekit-client": "^2.16.0",
+    "livekit-client": "^2.18.0",
     "livekit-server-sdk": "^2.14.2",
     "lodash": "^4.17.21",
     "next": "^15.5.12",

src/components/playground/Playground.tsx

@@ -60,6 +60,10 @@ export interface PlaygroundProps {
 
 const headerHeight = 56;
 
+function generateRandomRoomName() {
+  return `room-${Math.random().toString(36).substring(2, 10)}`;
+}
+
 export default function Playground({
   logo,
   themeColors,
@@ -73,31 +77,30 @@ export default function Playground({
   const [rpcPayload, setRpcPayload] = useState("");
   const [hasConnected, setHasConnected] = useState(false);
 
+  // User-entered room name. When empty, a random name is generated
+  // in tokenFetchOptions for each session.
+  const [userRoomName, setUserRoomName] = useState("");
+
   const [tokenFetchOptions, setTokenFetchOptions] =
-    useState<TokenSourceFetchOptions>();
+    useState<TokenSourceFetchOptions>(() => {
+      // Always initialize with a roomName so the SDK's token cache
+      // has a non-empty key set for future equality comparisons.
+      const opts: TokenSourceFetchOptions = {
+        roomName: generateRandomRoomName(),
+      };
+      if (initialAgentOptions) {
+        opts.agentName = initialAgentOptions.agentName ?? "";
+        opts.agentMetadata = initialAgentOptions.metadata ?? "";
+      }
+      return opts;
+    });
 
   // Store attributes as an array with stable IDs to prevent disappearing while editing
   // Initialize with one empty attribute so the inspector isn't empty on first open
   const [attributeItems, setAttributeItems] = useState<AttributeItem[]>([
     { id: `attr_initial_${Date.now()}`, key: "", value: "" },
   ]);
 
-  // initialize token fetch options from initial values, which can come from config
-  useEffect(() => {
-    if (tokenFetchOptions !== undefined || initialAgentOptions === undefined) {
-      return;
-    }
-    setTokenFetchOptions({
-      agentName: initialAgentOptions?.agentName ?? "",
-      agentMetadata: initialAgentOptions?.metadata ?? "",
-    });
-  }, [
-    tokenFetchOptions,
-    initialAgentOptions,
-    initialAgentOptions?.agentName,
-    initialAgentOptions?.metadata,
-  ]);
-
   const session = useSession(tokenSource, tokenFetchOptions);
   const { connectionState } = session;
   const agent = useAgent(session);
@@ -332,14 +335,23 @@ export default function Playground({
 
         <ConfigurationPanelItem title="Room">
           <div className="flex flex-col gap-2">
-            <NameValueRow
+            <EditableNameValueRow
               name="Room name"
               value={
                 connectionState === ConnectionState.Connected
                   ? session.room.name
-                  : ""
+                  : userRoomName
               }
               valueColor={`${config.settings.theme_color}-500`}
+              onValueChange={(value) => {
+                setUserRoomName(value);
+                setTokenFetchOptions((prev) => ({
+                  ...prev,
+                  roomName: value || generateRandomRoomName(),
+                }));
+              }}
+              placeholder="Auto"
+              editable={connectionState !== ConnectionState.Connected}
             />
             <NameValueRow
               name="Status"
@@ -577,6 +589,7 @@ export default function Playground({
     attributeItems,
     tokenFetchOptions,
     setTokenFetchOptions,
+    userRoomName,
   ]);
 
   let mobileTabs: PlaygroundTab[] = [];
@@ -644,6 +657,14 @@ export default function Playground({
               startSession();
             } else if (connectionState === ConnectionState.Connected) {
               session.end();
+              // Generate a new random room name for next connect so the
+              // SDK fetches a fresh token. User-set names are preserved.
+              if (!userRoomName) {
+                setTokenFetchOptions((prev) => ({
+                  ...prev,
+                  roomName: generateRandomRoomName(),
+                }));
+              }
             }
           }}
         />