Merge branch 'main' into feat/preview

Author: ADARSHsri2004

frontend/package-lock.json

@@ -28,6 +28,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.65.0",
+    "react-hotkeys": "^2.0.0",
     "react-router-dom": "^7.9.4",
     "shadcn": "^3.4.1",
     "socket.io-client": "^4.8.1",

frontend/package.json

@@ -9,6 +9,13 @@ import {
     MessageSquare,
 } from "lucide-react";
 import { motion } from "framer-motion";
+import { HotKeys } from "react-hotkeys";
+
+const keyMap = {
+  TOGGLE_MIC: "ctrl+m",
+  TOGGLE_VIDEO: "ctrl+v",
+  TOGGLE_CHAT: "ctrl+c",
+};
 
 const InRoom: React.FC<{ roomName: string }> = ({ roomName }) => {
     const [micOn, setMicOn] = useState(true);
@@ -138,7 +145,10 @@ const InRoom: React.FC<{ roomName: string }> = ({ roomName }) => {
                                 Send
                             </button>
                         </div>
-                    </motion.div>
+                      </div>
+                    ))}
+                    <div ref={chatEndRef} />
+                  </div>
                 )}
             </div>
 
@@ -176,7 +186,41 @@ const InRoom: React.FC<{ roomName: string }> = ({ roomName }) => {
                 </button>
             </footer>
         </div>
-    );
+
+        {/* Controls */}
+        <footer className="p-4 flex justify-center gap-6 border-t border-gray-800 bg-gray-950">
+          <button
+            onClick={toggleMic}
+            className={`p-3 rounded-full ${micOn ? "bg-gray-800" : "bg-red-600"}`}
+          >
+            {micOn ? <Mic /> : <MicOff />}
+          </button>
+
+          <button
+            onClick={toggleVideo}
+            className={`p-3 rounded-full ${
+              videoOn ? "bg-gray-800" : "bg-red-600"
+            }`}
+          >
+            {videoOn ? <Video /> : <VideoOff />}
+          </button>
+
+          <button className="p-3 rounded-full bg-red-600 hover:bg-red-700">
+            <PhoneOff />
+          </button>
+
+          <button
+            onClick={toggleChat}
+            className={`p-3 rounded-full ${
+              showChat ? "bg-indigo-600" : "bg-gray-800"
+            }`}
+          >
+            <MessageSquare />
+          </button>
+        </footer>
+      </div>
+    </HotKeys>
+  );
 };
 
 export default InRoom;