jketreno/ai-voicebot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow placing Moveable anywhere

Browse Source
This commit is contained in:
James Ketr 2025-09-16 10:04:56 -07:00
parent d4b3bc6ce4
commit adcfdeabfa
1 changed files with 109 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
client/src/UserList.tsx
View File

@ -146,121 +146,121 @@ const UserList: React.FC<UserListProps> = (props: UserListProps) => {
}, [users, sendJsonMessage]); }, [users, sendJsonMessage]);
return ( return (
<Paper <Box sx={{ position: "relative", width: "100%" }}>
className={`UserList ${videoClass}`} <Paper
sx={{ className={`UserList ${videoClass}`}
maxWidth: { xs: "100%", sm: 500 }, sx={{
p: { xs: 1, sm: 2 }, maxWidth: { xs: "100%", sm: 500 },
m: { xs: 0, sm: 2 }, p: { xs: 1, sm: 2 },
maxHeight: "80vh", m: { xs: 0, sm: 2 },
overflowY: "auto", }}
}} >
> <MediaAgent {...{ session, socketUrl, peers, setPeers }} />
<MediaAgent {...{ session, socketUrl, peers, setPeers }} /> <List className="UserSelector">
<List className="UserSelector"> {users?.map((user) => (
{users?.map((user) => ( <Box
<Box key={user.session_id}
key={user.session_id} sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
sx={{ display: "flex", flexDirection: "column", alignItems: "center" }} className={`UserEntry ${user.local ? "UserSelf" : ""}`}
className={`UserEntry ${user.local ? "UserSelf" : ""}`} >
> <Box>
<Box> <Box style={{ display: "flex-wrap", alignItems: "center", justifyContent: "space-between" }}>
<Box style={{ display: "flex-wrap", alignItems: "center", justifyContent: "space-between" }}> <Box style={{ display: "flex-wrap", alignItems: "center" }}>
<Box style={{ display: "flex-wrap", alignItems: "center" }}> <div className="Name">{user.name ? user.name : user.session_id}</div>
<div className="Name">{user.name ? user.name : user.session_id}</div> {user.protected && (
{user.protected && ( <div
<div style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }}
style={{ marginLeft: 8, fontSize: "0.8em", color: "#a00" }} title="This name is protected with a password"
title="This name is protected with a password" >
> 🔒
🔒 </div>
</div> )}
)} {user.bot_instance_id && (
<div style={{ marginLeft: 8, fontSize: "0.8em", color: "#00a" }} title="This is a bot">
🤖
</div>
)}
</Box>
{user.bot_instance_id && ( {user.bot_instance_id && (
<div style={{ marginLeft: 8, fontSize: "0.8em", color: "#00a" }} title="This is a bot"> <Paper elevation={2} sx={{ display: "flex-wrap", gap: "4px", p: 1 }}>
🤖 {user.bot_run_id && (
</div> <IconButton
size="small"
onClick={() => handleOpenBotConfig(user)}
style={{ width: "24px", height: "24px", fontSize: "0.7em" }}
title="Configure bot"
>
<SettingsIcon style={{ fontSize: "14px" }} />
</IconButton>
)}
<Button
size="small"
variant="outlined"
color="secondary"
onClick={() => handleBotLeave(user)}
disabled={leavingBots.has(user.session_id) || !user.bot_instance_id}
style={{ fontSize: "0.7em", minWidth: "50px", height: "24px" }}
title={!user.bot_instance_id ? "Bot instance ID not available" : "Remove bot from lobby"}
>
{leavingBots.has(user.session_id) ? "..." : "Leave"}
</Button>
</Paper>
)} )}
</Box> </Box>
{user.bot_instance_id && ( {user.name && !user.live && <div className="NoNetwork"></div>}
<Paper elevation={2} sx={{ display: "flex-wrap", gap: "4px", p: 1 }}>
{user.bot_run_id && (
<IconButton
size="small"
onClick={() => handleOpenBotConfig(user)}
style={{ width: "24px", height: "24px", fontSize: "0.7em" }}
title="Configure bot"
>
<SettingsIcon style={{ fontSize: "14px" }} />
</IconButton>
)}
<Button
size="small"
variant="outlined"
color="secondary"
onClick={() => handleBotLeave(user)}
disabled={leavingBots.has(user.session_id) || !user.bot_instance_id}
style={{ fontSize: "0.7em", minWidth: "50px", height: "24px" }}
title={!user.bot_instance_id ? "Bot instance ID not available" : "Remove bot from lobby"}
>
{leavingBots.has(user.session_id) ? "..." : "Leave"}
</Button>
</Paper>
)}
</Box> </Box>
{user.name && !user.live && <div className="NoNetwork"></div>} {user.name && user.live && peers[user.session_id] && (user.local || user.has_media !== false) ? (
<MediaControl
className={videoClass}
key={user.session_id}
peer={peers[user.session_id]}
isSelf={user.local}
/>
) : user.name && user.live && user.has_media === false ? (
<div
className="Video fade-in"
style={{
background: "#333",
color: "#fff",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: "100%",
fontSize: "14px",
}}
>
💬 Chat Only
</div>
) : (
<video className="Video"></video>
)}
</Box> </Box>
{user.name && user.live && peers[user.session_id] && (user.local || user.has_media !== false) ? ( ))}
<MediaControl </List>
className={videoClass}
key={user.session_id}
peer={peers[user.session_id]}
isSelf={user.local}
/>
) : user.name && user.live && user.has_media === false ? (
<div
className="Video fade-in"
style={{
background: "#333",
color: "#fff",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: "100%",
fontSize: "14px",
}}
>
💬 Chat Only
</div>
) : (
<video className="Video"></video>
)}
</Box>
))}
</List>
{/* Bot Configuration Dialog */} {/* Bot Configuration Dialog */}
<Dialog open={botConfigDialogOpen} onClose={handleCloseBotConfig} maxWidth="md" fullWidth> <Dialog open={botConfigDialogOpen} onClose={handleCloseBotConfig} maxWidth="md" fullWidth>
<DialogTitle>Configure Bot</DialogTitle> <DialogTitle>Configure Bot</DialogTitle>
<DialogContent> <DialogContent>
{selectedBotForConfig && ( {selectedBotForConfig && (
<BotConfig <BotConfig
botInstanceId={selectedBotForConfig.bot_instance_id || ""} botInstanceId={selectedBotForConfig.bot_instance_id || ""}
botName={selectedBotForConfig.name?.replace(/-bot$/, "") || "unknown"} botName={selectedBotForConfig.name?.replace(/-bot$/, "") || "unknown"}
lobbyId={lobbyId} lobbyId={lobbyId}
onConfigUpdate={(config) => { onConfigUpdate={(config) => {
console.log("Bot configuration updated:", config); console.log("Bot configuration updated:", config);
// Configuration updates are handled via WebSocket, so we don't need to do anything special here // Configuration updates are handled via WebSocket, so we don't need to do anything special here
}} }}
/> />
)} )}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleCloseBotConfig}>Close</Button> <Button onClick={handleCloseBotConfig}>Close</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</Paper> </Paper>
</Box>
); );
}; };