add push to talk button

app/globals.css

@@ -18,3 +18,20 @@
 .lk-disconnect-button {
   @apply h-[36px] hover:bg-[#6b221a] hover:text-[white] bg-[#31100c] border-[#6b221a];
 }
+
+.ptt-button {
+  color: white;
+  border: none;
+  border-radius: 50px;
+  padding: 25px 50px;
+  font-size: 18px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.ptt-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
+}

app/page.tsx

@@ -16,6 +16,7 @@ import type { ConnectionDetails } from "./api/connection-details/route";
 import { NoAgentNotification } from "@/components/NoAgentNotification";
 import { CloseIcon } from "@/components/CloseIcon";
 import { useKrispNoiseFilter } from "@livekit/components-react/krisp";
+import { PushToTalkButton } from "@/components/PushToTalkButton";
 
 export default function Page() {
   const [connectionDetails, updateConnectionDetails] = useState<
@@ -129,9 +130,10 @@ function ControlBar(props: {
               animate={{ opacity: 1, top: 0 }}
               exit={{ opacity: 0, top: "-10px" }}
               transition={{ duration: 0.4, ease: [0.09, 1.04, 0.245, 1.055] }}
-              className="flex h-8 absolute left-1/2 -translate-x-1/2  justify-center"
+              className="flex h-8 absolute left-1/2 -translate-x-1/2 justify-center items-center gap-4"
             >
               <VoiceAssistantControlBar controls={{ leave: false }} />
+              <PushToTalkButton />
               <DisconnectButton>
                 <CloseIcon />
               </DisconnectButton>

components/PushToTalkButton.tsx

@@ -0,0 +1,89 @@
+import {
+  useLocalParticipant,
+  useParticipants,
+} from "@livekit/components-react";
+import { motion } from "framer-motion";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function PushToTalkButton() {
+  const { localParticipant } = useLocalParticipant();
+  const participants = useParticipants();
+  const [isPressed, setIsPressed] = useState(false);
+  const lastReleaseTime = useRef(0);
+
+  // Find agent participant that supports PTT
+  const agent = participants.find(
+    (p) => p.attributes?.["supports-ptt"] === "1"
+  );
+
+  useEffect(() => {
+    // start with microphone enabled for PTT agents
+    if (agent && localParticipant) {
+      localParticipant.setMicrophoneEnabled(false);
+    }
+  }, [localParticipant, agent]);
+
+  const handlePushStart = useCallback(async () => {
+    if (!agent || !localParticipant) return;
+
+    try {
+      await localParticipant.setMicrophoneEnabled(true);
+      await localParticipant.performRpc({
+        destinationIdentity: agent.identity,
+        method: "ptt.start",
+      });
+      setIsPressed(true);
+    } catch (error) {
+      console.error("Failed to send PTT push:", error);
+    }
+  }, [agent, localParticipant]);
+
+  const handlePushEnd = useCallback(async () => {
+    if (!agent || !localParticipant || !isPressed) return;
+
+    // Prevent multiple releases within 100ms
+    const now = Date.now();
+    if (now - lastReleaseTime.current < 100) {
+      return;
+    }
+    lastReleaseTime.current = now;
+
+    try {
+      await localParticipant.setMicrophoneEnabled(false);
+      await localParticipant.performRpc({
+        destinationIdentity: agent.identity,
+        method: "ptt.end",
+      });
+    } catch (error) {
+      console.error("Failed to send PTT release:", error);
+    } finally {
+      setIsPressed(false);
+    }
+  }, [agent, localParticipant, isPressed]);
+
+  // Clean up pressed state when component unmounts
+  useEffect(() => {
+    return () => {
+      if (isPressed) {
+        handlePushEnd();
+      }
+    };
+  }, [isPressed, handlePushEnd]);
+
+  if (!agent) return null;
+
+  return (
+    <motion.button
+      className="ptt-button"
+      onMouseDown={handlePushStart}
+      onMouseUp={handlePushEnd}
+      initial={false}
+      animate={{
+        backgroundColor: isPressed ? "#004085" : "#007bff",
+        scale: isPressed ? 0.95 : 1,
+      }}
+    >
+      {isPressed ? "Speaking..." : "Press to Talk"}
+    </motion.button>
+  );
+}

package.json

@@ -9,12 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@livekit/components-react": "^2.6.4",
-    "@livekit/components-styles": "^1.1.3",
+    "@livekit/components-react": "^2.6.11",
+    "@livekit/components-styles": "^1.1.4",
     "@livekit/krisp-noise-filter": "^0.2.12",
     "framer-motion": "^11.9.0",
-    "livekit-client": "^2.5.5",
-    "livekit-server-sdk": "^2.6.1",
+    "livekit-client": "^2.8.0",
+    "livekit-server-sdk": "^2.9.7",
     "next": "14.2.9",
     "react": "^18",
     "react-dom": "^18"