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

Mobile UI changes

Browse Source
This commit is contained in:
James Ketr 2025-09-16 10:03:37 -07:00
parent 046321dafb
commit d4b3bc6ce4
4 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/App.tsx
View File

@ -205,12 +205,22 @@ const LobbyView: React.FC<LobbyProps> = (props: LobbyProps) => {
};
return (
<Paper className="Lobby" sx={{ p: 2, m: 2, width: "fit-content" }}>
<Paper
className="Lobby"
sx={{
p: { xs: 1, sm: 2 },
m: { xs: 0, sm: 2 },
width: { xs: "100%", sm: "fit-content" },
maxWidth: { xs: "100%", sm: 600 },
}}
>
{readyState !== ReadyState.OPEN || !session ? (
<ConnectionStatus readyState={readyState} reconnectAttempt={reconnectAttempt} />
) : (
<>
<Box sx={{ mb: 2, display: "flex", gap: 2, alignItems: "flex-start", flexDirection: "column" }}>
<Box
sx={{ mb: 2, display: "flex", gap: 2, alignItems: "flex-start", flexDirection: { xs: "column", sm: "row" } }}
>
<Box>
<Typography variant="h5">AI Voice Chat Lobby: {lobbyName}</Typography>
<Typography variant="caption">
@ -226,7 +236,7 @@ const LobbyView: React.FC<LobbyProps> = (props: LobbyProps) => {
You can optionally set a password to reserve this name; supply it again to takeover the name from
another client.
</Typography>
<Box sx={{ display: "flex", gap: 1, width: "100%" }}>
<Box sx={{ display: "flex", gap: 1, width: "100%", flexDirection: { xs: "column", sm: "row" } }}>
<Input
type="text"
value={editName}
@ -339,7 +349,7 @@ const App = () => {
}, [session, getSession]);
return (
<Box>
<Box sx={{ p: { xs: 1, sm: 2 }, maxWidth: { xs: "100%", sm: 800 }, margin: "0 auto", height: "100vh", overflowY: "auto" }}>
{!session && (
<ConnectionStatus
readyState={sessionRetryAttempt > 0 ? ReadyState.CLOSED : ReadyState.CONNECTING}

11
client/src/BotManager.tsx
View File

@ -171,7 +171,16 @@ const BotManager: React.FC<BotManagerProps> = ({ lobbyId, onBotAdded, sx }) => {
const providerCount = botProviders.length;
return (
<Paper sx={{ p: 2, ...sx }}>
<Paper
sx={{
p: { xs: 1, sm: 2 },
maxWidth: { xs: "100%", sm: 500 },
m: { xs: 0, sm: 2 },
maxHeight: "80vh",
overflowY: "auto",
...sx,
}}
>
<Box display="flex" alignItems="center" justifyContent="space-between" mb={2}>
<Typography variant="h6" display="flex" alignItems="center" gap={1}>
<BotIcon />

16
client/src/LobbyChat.tsx
View File

@ -135,7 +135,19 @@ const LobbyChat: React.FC<LobbyChatProps> = ({ socketUrl, session, lobbyId }) =>
};
return (
<Paper className="lobby-chat" sx={{ height: 400, display: "flex", flexDirection: "column", p: 1 }}>
<Paper
className="lobby-chat"
sx={{
height: { xs: 300, sm: 400 },
display: "flex",
flexDirection: "column",
p: { xs: 1, sm: 2 },
maxWidth: { xs: "100%", sm: 500 },
m: { xs: 0, sm: 2 },
maxHeight: "80vh",
overflowY: "auto",
}}
>
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }}>
<Typography variant="h6" sx={{ textAlign: "center", flexGrow: 1 }}>
Chat
@ -198,7 +210,7 @@ const LobbyChat: React.FC<LobbyChatProps> = ({ socketUrl, session, lobbyId }) =>
</Box>
{session.name ? (
<Box sx={{ display: "flex", gap: 1, alignItems: "flex-end" }}>
<Box sx={{ display: "flex", gap: 1, alignItems: "flex-end", flexDirection: { xs: "column", sm: "row" } }}>
<TextField
fullWidth
size="small"

11
client/src/UserList.tsx
View File

@ -146,7 +146,16 @@ const UserList: React.FC<UserListProps> = (props: UserListProps) => {
}, [users, sendJsonMessage]);
return (
<Paper className={`UserList ${videoClass}`}>
<Paper
className={`UserList ${videoClass}`}
sx={{
maxWidth: { xs: "100%", sm: 500 },
p: { xs: 1, sm: 2 },
m: { xs: 0, sm: 2 },
maxHeight: "80vh",
overflowY: "auto",
}}
>
<MediaAgent {...{ session, socketUrl, peers, setPeers }} />
<List className="UserSelector">
{users?.map((user) => (