i will share my all components code you can change only shadcn ui to Hero ui ::"use client" // Meeting controls component (mute, video, screen share, etc.) import { useState } from "react" import { useSelector } from "react-redux" // import type { RootState } from "@/frontend/store/store" import { useSocket } from "@/hooks/useSocket" import { useWebRTC } from "@/hooks/useWebRTC" import {Button, ButtonGroup} from "@heroui/button"; import { Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem} from "@heroui/dropdown"; // import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Mic, MicOff, Video, VideoOff, Monitor, MonitorOff, PhoneOff, ChevronUp, Settings } from "lucide-react" export function MeetingControls() { const { socket } = useSocket() const { toggleAudioTrack, toggleVideoTrack, startScreenShare, stopScreenShare } = useWebRTC(socket) const { isAudioOn, isVideoOn, isScreenSharing, currentMeeting } = useSelector((state: any) => state.meeting) const [isScreenShareMenuOpen, setIsScreenShareMenuOpen] = useState(false) // Handle audio toggle const handleAudioToggle = () => { toggleAudioTrack() } // Handle video toggle const handleVideoToggle = () => { toggleVideoTrack() } // Handle screen share with options const handleScreenShare = async (shareType?: "screen" | "window" | "tab") => { if (isScreenSharing) { stopScreenShare() } else { // For now, we'll use the default screen share // In a full implementation, you'd handle different share types await startScreenShare() } setIsScreenShareMenuOpen(false) } // Handle ending call const handleEndCall = () => { if (socket && currentMeeting) { socket.emit("leave-meeting") window.location.href = "/" } } return ( <div className="bg-gray-800 rounded-full px-6 py-3 flex items-center space-x-4 shadow-lg"> {/* Audio Control */} <Button variant={isAudioOn ? "secondary" : "destructive"} size="lg" onClick={handleAudioToggle} className="rounded-full w-12 h-12 p-0" > {isAudioOn ? <Mic className="h-5 w-5" /> : <MicOff className="h-5 w-5" />} </Button> {/* Video Control */} <Button variant={isVideoOn ? "secondary" : "destructive"} size="lg" onClick={handleVideoToggle} className="rounded-full w-12 h-12 p-0" > {isVideoOn ? <Video className="h-5 w-5" /> : <VideoOff className="h-5 w-5" />} </Button> {/* Screen Share Control with Dropdown */} <DropdownMenu open={isScreenShareMenuOpen} onOpenChange={setIsScreenShareMenuOpen}> <DropdownMenuTrigger asChild> <Button variant={isScreenSharing ? "default" : "secondary"} size="lg" className="rounded-full w-12 h-12 p-0 relative" > {isScreenSharing ? <MonitorOff className="h-5 w-5" /> : <Monitor className="h-5 w-5" />} <ChevronUp className="h-3 w-3 absolute -top-1 -right-1" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="center" className="w-48"> {!isScreenSharing ? ( <> <DropdownMenuItem onClick={() => handleScreenShare("screen")}> <Monitor className="h-4 w-4 mr-2" /> Share Entire Screen </DropdownMenuItem> <DropdownMenuItem onClick={() => handleScreenShare("window")}> <Settings className="h-4 w-4 mr-2" /> Share Window </DropdownMenuItem> <DropdownMenuItem onClick={() => handleScreenShare("tab")}> <Video className="h-4 w-4 mr-2" /> Share Browser Tab </DropdownMenuItem> </> ) : ( <DropdownMenuItem onClick={() => handleScreenShare()}> <MonitorOff className="h-4 w-4 mr-2" /> Stop Sharing </DropdownMenuItem> )} </DropdownMenuContent> </DropdownMenu> {/* End Call */} <Button variant="destructive" size="lg" onClick={handleEndCall} className="rounded-full w-12 h-12 p-0"> <PhoneOff className="h-5 w-5" /> </Button> </div> ) } ::: "use client" import type React from "react" // Chat panel component for live messaging import { useState, useRef, useEffect } from "react" import { useSelector, useDispatch } from "react-redux" // import type { RootState } from "@/frontend/store/store" import { useSocket } from "@/hooks/useSocket" import { setChatOpen } from "@/store/reducer/chatSlice" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { Send, MessageSquare } from "lucide-react" import { cn } from "@/lib/utils" export function ChatPanel() { const dispatch = useDispatch() const { socket } = useSocket() const { messages, isChatOpen } = useSelector((state: any) => state.chat) const { currentMeeting } = useSelector((state: any) => state.meeting) const { user } = useSelector((state: any) => state.auth) const [newMessage, setNewMessage] = useState("") const messagesEndRef = useRef<HTMLDivElement>(null) const inputRef = useRef<HTMLInputElement>(null) // Auto-scroll to bottom when new messages arrive useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) // Open chat panel on mount useEffect(() => { dispatch(setChatOpen(true)) return () => { dispatch(setChatOpen(false)) } }, [dispatch]) // Focus input when chat opens useEffect(() => { if (isChatOpen && inputRef.current) { inputRef.current.focus() } }, [isChatOpen]) // Handle sending message const handleSendMessage = (e: React.FormEvent) => { e.preventDefault() if (!newMessage.trim() || !socket || !currentMeeting) return // Send message through socket socket.emit("send-message", { message: newMessage.trim(), meetingId: currentMeeting, }) setNewMessage("") } // Handle key press const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage(e) } } // Format timestamp const formatTime = (timestamp: string) => { const date = new Date(timestamp) return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) } // Check if message is from current user const isOwnMessage = (messageUserId: string) => { return messageUserId === user?.id } return ( <div className="h-full flex flex-col bg-gray-800"> {/* Chat Header */} <div className="p-4 border-b border-gray-700"> <div className="flex items-center space-x-2"> <MessageSquare className="h-5 w-5 text-gray-400" /> <h3 className="text-white font-medium">Meeting Chat</h3> <span className="text-gray-400 text-sm">({messages.length})</span> </div> </div> {/* Messages Area */} <ScrollArea className="flex-1 p-4"> <div className="space-y-4"> {messages.length === 0 ? ( <div className="text-center text-gray-400 py-8"> <MessageSquare className="h-12 w-12 mx-auto mb-4 opacity-50" /> <p className="text-sm">No messages yet</p> <p className="text-xs mt-1">Start the conversation!</p> </div> ) : ( messages.map((message: any) => ( <div key={message.id} className={cn("flex", isOwnMessage(message.userId) ? "justify-end" : "justify-start")} > <div className={cn( "max-w-xs lg:max-w-md px-3 py-2 rounded-lg", isOwnMessage(message.userId) ? "bg-blue-600 text-white" : "bg-gray-700 text-gray-100", )} > {/* Message Header */} {!isOwnMessage(message.userId) && ( <div className="text-xs text-gray-300 mb-1 font-medium">{message.userName}</div> )} {/* Message Content */} <div className="text-sm whitespace-pre-wrap break-words">{message.message}</div> {/* Message Time */} <div className={cn("text-xs mt-1", isOwnMessage(message.userId) ? "text-blue-200" : "text-gray-400")}> {formatTime(message.timestamp)} </div> </div> </div> )) )} <div ref={messagesEndRef} /> </div> </ScrollArea> {/* Message Input */} <div className="p-4 border-t border-gray-700"> <form onSubmit={handleSendMessage} className="flex space-x-2"> <Input ref={inputRef} value={newMessage} onChange={(e) => setNewMessage(e.target.value)} onKeyPress={handleKeyPress} placeholder="Type a message..." className="flex-1 bg-gray-700 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500" maxLength={500} /> <Button type="submit" size="sm" disabled={!newMessage.trim()} className="px-3"> <Send className="h-4 w-4" /> </Button> </form> {/* Character count */} <div className="text-xs text-gray-400 mt-1 text-right">{newMessage.length}/500</div> </div> </div> ) } :::"use client" // Waiting room component for users waiting for admission import { useEffect, useState } from "react" import { useSelector } from "react-redux" // import type { RootState } from "@/frontend/store/store" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Clock, Users, Video, VideoOff, Mic, MicOff, Settings } from "lucide-react" interface WaitingRoomProps { meetingId: string } export function WaitingRoom({ meetingId }: WaitingRoomProps) { const { user } = useSelector((state: any) => state.auth) const [waitingTime, setWaitingTime] = useState(0) const [isVideoOn, setIsVideoOn] = useState(true) const [isAudioOn, setIsAudioOn] = useState(false) // Start muted in waiting room // Timer for waiting time useEffect(() => { const timer = setInterval(() => { setWaitingTime((prev) => prev + 1) }, 1000) return () => clearInterval(timer) }, []) // Format waiting time const formatWaitingTime = (seconds: number) => { const mins = Math.floor(seconds / 60) const secs = seconds % 60 return `${mins}:${secs.toString().padStart(2, "0")}` } // Handle leaving waiting room const handleLeaveWaitingRoom = () => { window.location.href = "/" } // Get user type badge const getUserTypeBadge = () => { return user?.type === "employee" ? ( <Badge className="bg-blue-500 text-white">Employee</Badge> ) : ( <Badge className="bg-green-500 text-white">User</Badge> ) } return ( <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4"> <Card className="w-full max-w-md"> <CardHeader className="text-center"> <div className="mx-auto mb-4 w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center"> <Clock className="h-8 w-8 text-yellow-600" /> </div> <CardTitle className="text-xl">Waiting for admission</CardTitle> <p className="text-gray-600 text-sm">The meeting host will let you in soon</p> </CardHeader> <CardContent className="space-y-6"> {/* Meeting Info */} <div className="text-center space-y-2"> <div className="flex items-center justify-center space-x-2"> <Users className="h-4 w-4 text-gray-500" /> <span className="text-sm text-gray-600">Meeting ID:</span> <code className="text-sm font-mono bg-gray-100 px-2 py-1 rounded">{meetingId}</code> </div> </div> {/* User Info */} <div className="bg-gray-50 rounded-lg p-4"> <div className="flex items-center space-x-3"> <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold"> {user?.name ?.split(" ") .map((n: any) => n[0]) .join("") .toUpperCase() .slice(0, 2)} </div> <div className="flex-1"> <h3 className="font-medium">{user?.name}</h3> <p className="text-sm text-gray-600">{user?.email}</p> <div className="mt-1">{getUserTypeBadge()}</div> </div> </div> </div> {/* Waiting Status */} <div className="text-center space-y-2"> <div className="flex items-center justify-center space-x-2"> <div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div> <span className="text-sm text-gray-600">Waiting time: {formatWaitingTime(waitingTime)}</span> </div> <p className="text-xs text-gray-500">You'll be notified when the host admits you</p> </div> {/* Preview Controls */} <div className="space-y-4"> <h4 className="text-sm font-medium text-gray-700 flex items-center"> <Settings className="h-4 w-4 mr-2" /> Preview Settings </h4> <div className="flex justify-center space-x-4"> {/* Audio Toggle */} <Button variant={isAudioOn ? "default" : "secondary"} size="sm" onClick={() => setIsAudioOn(!isAudioOn)} className="flex items-center space-x-2" > {isAudioOn ? <Mic className="h-4 w-4" /> : <MicOff className="h-4 w-4" />} <span className="text-xs">{isAudioOn ? "Mute" : "Unmute"}</span> </Button> {/* Video Toggle */} <Button variant={isVideoOn ? "default" : "secondary"} size="sm" onClick={() => setIsVideoOn(!isVideoOn)} className="flex items-center space-x-2" > {isVideoOn ? <Video className="h-4 w-4" /> : <VideoOff className="h-4 w-4" />} <span className="text-xs">{isVideoOn ? "Turn off" : "Turn on"}</span> </Button> </div> <p className="text-xs text-gray-500 text-center">These settings will apply when you join the meeting</p> </div> {/* Actions */} <div className="space-y-3"> <div className="bg-blue-50 border border-blue-200 rounded-lg p-3"> <div className="flex items-center space-x-2"> <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div> <p className="text-sm text-blue-700">Waiting for host to admit you...</p> </div> </div> <Button variant="outline" onClick={handleLeaveWaitingRoom} className="w-full"> Leave Waiting Room </Button> </div> {/* Tips */} <div className="bg-gray-50 rounded-lg p-3"> <h5 className="text-xs font-medium text-gray-700 mb-2">Tips while you wait:</h5> <ul className="text-xs text-gray-600 space-y-1"> <li>• Check your camera and microphone settings</li> <li>• Ensure you have a stable internet connection</li> <li>• The host will be notified of your request</li> </ul> </div> </CardContent> </Card> </div> ) }