Add attributes inspector and explicit dispatch support

.github/ISSUE_TEMPLATE/config.yml

@@ -2,4 +2,4 @@ blank_issues_enabled: false
 contact_links:
   - name: Slack Community Chat
     url: https://livekit.io/join-slack
-    about: Ask questions and discuss with other LiveKit users in real time.
+    about: Ask questions and discuss with other LiveKit users in real time.

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -41,4 +41,4 @@ body:
     id: additional-context
     attributes:
       label: Additional Information
-      description: Add any other context or screenshots about the feature request here.
+      description: Add any other context or screenshots about the feature request here.

README.md

@@ -11,8 +11,10 @@
 # LiveKit Agents Playground
 
 <!--BEGIN_DESCRIPTION-->
+
 The Agents Playground is designed for quickly prototyping with server side agents built with [LiveKit Agents Framework](https://github.com/livekit/agents). Easily tap into LiveKit WebRTC sessions and process or generate audio, video, and data streams.
-  The playground includes components to fully interact with any LiveKit agent, through video, audio and chat.
+The playground includes components to fully interact with any LiveKit agent, through video, audio and chat.
+
 <!--END_DESCRIPTION-->
 
 ## Docs and references
@@ -69,7 +71,9 @@ NEXT_PUBLIC_LIVEKIT_URL=wss://<Your Cloud URL>
 - Mobile device sizes not supported currently
 
 <!--BEGIN_REPO_NAV-->
+
 <br/><table>
+
 <thead><tr><th colspan="2">LiveKit Ecosystem</th></tr></thead>
 <tbody>
 <tr><td>LiveKit SDKs</td><td><a href="https://github.com/livekit/client-sdk-js">Browser</a> · <a href="https://github.com/livekit/client-sdk-swift">iOS/macOS/visionOS</a> · <a href="https://github.com/livekit/client-sdk-android">Android</a> · <a href="https://github.com/livekit/client-sdk-flutter">Flutter</a> · <a href="https://github.com/livekit/client-sdk-react-native">React Native</a> · <a href="https://github.com/livekit/rust-sdks">Rust</a> · <a href="https://github.com/livekit/node-sdks">Node.js</a> · <a href="https://github.com/livekit/python-sdks">Python</a> · <a href="https://github.com/livekit/client-sdk-unity">Unity</a> · <a href="https://github.com/livekit/client-sdk-unity-web">Unity (WebGL)</a></td></tr><tr></tr>

package.json

@@ -6,35 +6,37 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@livekit/components-react": "^2.9.3",
-    "@livekit/components-styles": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "cookies-next": "^4.1.1",
-    "framer-motion": "^10.16.16",
+    "@livekit/components-styles": "^1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "cookies-next": "^4.3.0",
+    "framer-motion": "^10.18.0",
     "js-yaml": "^4.1.0",
-    "livekit-client": "^2.5.1",
-    "livekit-server-sdk": "^2.6.1",
+    "livekit-client": "^2.9.5",
+    "livekit-server-sdk": "^2.13.0",
     "lodash": "^4.17.21",
-    "next": "^14.0.4",
+    "next": "^14.2.20",
     "next-plugin-preval": "^1.2.6",
-    "qrcode.react": "^4.0.0",
-    "react": "^18",
-    "react-dom": "^18"
+    "qrcode.react": "^4.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "^4.17.0",
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^20.17.9",
+    "@types/react": "^18.3.14",
+    "@types/react-dom": "^18.3.3",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.2.26",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^5.3.3"
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.7.2",
+    "prettier": "^3.4.2"
   }
 }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/cloud/README.md

@@ -1 +1 @@
-Files in this `cloud/` directory can be ignored. They are mocks which we override in our private, hosted version of the agents-playground that supports LiveKit Cloud authentication.
+Files in this `cloud/` directory can be ignored. They are mocks which we override in our private, hosted version of the agents-playground that supports LiveKit Cloud authentication.

src/cloud/useCloud.tsx

@@ -9,4 +9,4 @@ export function useCloud() {
   const wsUrl = "";
 
   return { generateToken, wsUrl };
-}
+}

src/components/config/AttributeRow.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { AttributeItem } from "@/lib/types";
+
+interface AttributeRowProps {
+  attribute: AttributeItem;
+  onKeyChange: (id: string, newKey: string) => void;
+  onValueChange: (id: string, newValue: string) => void;
+  onRemove?: (id: string) => void;
+  disabled?: boolean;
+}
+
+export const AttributeRow: React.FC<AttributeRowProps> = ({
+  attribute,
+  onKeyChange,
+  onValueChange,
+  onRemove,
+  disabled = false,
+}) => {
+  return (
+    <div className="flex items-center gap-2 mb-2">
+      <input
+        value={attribute.key}
+        onChange={(e) => onKeyChange(attribute.id, e.target.value)}
+        className="flex-1 min-w-0 text-gray-400 text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-1 font-mono"
+        placeholder="Name"
+        disabled={disabled}
+      />
+      <input
+        value={attribute.value}
+        onChange={(e) => onValueChange(attribute.id, e.target.value)}
+        className="flex-1 min-w-0 text-gray-400 text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-1 font-mono"
+        placeholder="Value"
+        disabled={disabled}
+      />
+      {onRemove && (
+        <button
+          onClick={() => onRemove(attribute.id)}
+          className="flex-shrink-0 w-6 h-6 flex items-center justify-center text-gray-400 hover:text-white"
+          disabled={disabled}
+          style={{ display: disabled ? "none" : "flex" }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};