legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-17 10:00:46 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

move nickname entry to inside chat panel

Browse Source
This commit is contained in:
legop3
2026-05-21 22:33:47 -04:00
parent 7e7b07083a
commit f56d865c8e
10 changed files with 157 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-BIQkdXB4.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-C-j0HVkU.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-EY6LbYPB.js
+131
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-tQBHQF7J.js
-131
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+2 -2
View File
@@ -11,8 +11,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Roomba Rover" />
<title>Roomba Rover</title> <title>Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-tQBHQF7J.js"></script> <script type="module" crossorigin src="/assets/index-EY6LbYPB.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C-j0HVkU.css"> <link rel="stylesheet" crossorigin href="/assets/index-BIQkdXB4.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
webui/src/App.jsx
+1 -5
View File
@@ -23,7 +23,6 @@ import HomeAssistantControls from './components/HomeAssistantControls/index.jsx'
import TurnAlertListener from './components/TurnAlertListener/index.jsx'; import TurnAlertListener from './components/TurnAlertListener/index.jsx';
import RawUserPilePanel from './components/RawUserPilePanel/index.jsx'; import RawUserPilePanel from './components/RawUserPilePanel/index.jsx';
import OverseerPreferencePanel from './components/OverseerPreferencePanel/index.jsx'; import OverseerPreferencePanel from './components/OverseerPreferencePanel/index.jsx';
import NicknameForm from './components/NicknameForm/index.jsx';
import SocialButtonsGrid from './components/SocialButtonsGrid/index.jsx'; import SocialButtonsGrid from './components/SocialButtonsGrid/index.jsx';
import ChatPanel from './components/ChatPanel/index.jsx'; import ChatPanel from './components/ChatPanel/index.jsx';
import FullscreenPrompt from './components/FullscreenPrompt/index.jsx'; import FullscreenPrompt from './components/FullscreenPrompt/index.jsx';
@@ -144,12 +143,9 @@ function MobileFeatureTabs({
<TabPanels> <TabPanels>
<TabPanel id="chat"> <TabPanel id="chat">
<div className="space-y-0.5"> <div className="space-y-0.5">
<ChatPanel /> <ChatPanel nicknameLayout="stacked" />
<div className="space-y-0.5"> <div className="space-y-0.5">
<div className="grid gap-0.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]"> <div className="grid gap-0.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
<div className="surface flex w-full items-center px-0 py-0">
<NicknameForm />
</div>
<SocialButtonsGrid /> <SocialButtonsGrid />
</div> </div>
<div className="grid gap-0.5 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"> <div className="grid gap-0.5 grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
webui/src/components/ChatPanel/index.jsx
+17 -4
View File
@@ -8,6 +8,7 @@ import { useSettingsNamespace } from '../../settings/index.js';
import ChatMessageRow from '../ChatMessageRow/index.jsx'; import ChatMessageRow from '../ChatMessageRow/index.jsx';
import ChatTypingRow from '../ChatTypingRow/index.jsx'; import ChatTypingRow from '../ChatTypingRow/index.jsx';
import CardFrame from '../CardFrame/index.jsx'; import CardFrame from '../CardFrame/index.jsx';
import NicknameForm from '../NicknameForm/index.jsx';
const FLITE_VOICES = ['kal', 'rms', 'slt', 'ksp', 'bdl']; const FLITE_VOICES = ['kal', 'rms', 'slt', 'ksp', 'bdl'];
const ESPEAK_PITCHES = Array.from({ length: 10 }, (_, idx) => idx * 10); const ESPEAK_PITCHES = Array.from({ length: 10 }, (_, idx) => idx * 10);
@@ -18,6 +19,7 @@ export default function ChatPanel({
fillHeight = false, fillHeight = false,
allowSpectatorInput = false, allowSpectatorInput = false,
title = 'Chat', title = 'Chat',
nicknameLayout = 'inline',
}) { }) {
const role = useSessionSelector((state) => state.session?.role || null); const role = useSessionSelector((state) => state.session?.role || null);
const currentRoverId = useSessionSelector((state) => state.session?.assignment?.roverId || null); const currentRoverId = useSessionSelector((state) => state.session?.assignment?.roverId || null);
@@ -105,6 +107,7 @@ export default function ChatPanel({
} }
const listClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : 'h-48 overflow-y-auto'; const listClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : 'h-48 overflow-y-auto';
const isStackedNickname = nicknameLayout === 'stacked';
return ( return (
<CardFrame <CardFrame
@@ -125,9 +128,15 @@ export default function ChatPanel({
))} ))}
</div> </div>
{!hideInput && ( {!hideInput && (
<form className="flex flex-wrap items-stretch gap-0.5" onSubmit={handleSend}> <form
className={`flex items-stretch gap-0.5 ${isStackedNickname ? 'flex-col' : 'flex-wrap'}`}
onSubmit={handleSend}
>
<div className={isStackedNickname ? 'w-full' : 'w-[9rem] sm:w-[10rem] shrink-0'}>
<NicknameForm compact />
</div>
<input <input
className="field-input flex-1 min-w-[10rem]" className={`field-input ${isStackedNickname ? 'w-full min-w-0' : 'flex-1 min-w-[10rem]'}`}
value={draft} value={draft}
onChange={(e) => { onChange={(e) => {
const next = e.target.value; const next = e.target.value;
@@ -154,7 +163,11 @@ export default function ChatPanel({
disabled={!canChat} disabled={!canChat}
/> />
{ttsSupported && ( {ttsSupported && (
<div className="flex flex-wrap items-center gap-0.5 basis-full sm:basis-auto"> <div
className={`flex flex-wrap items-center gap-0.5 ${
isStackedNickname ? 'w-full' : 'basis-full sm:basis-auto'
}`}
>
<label className="flex items-center gap-0.5 text-xs text-slate-300"> <label className="flex items-center gap-0.5 text-xs text-slate-300">
<input <input
type="checkbox" type="checkbox"
@@ -214,7 +227,7 @@ export default function ChatPanel({
<button <button
type="submit" type="submit"
disabled={!canChat || sending} disabled={!canChat || sending}
className="button-dark h-full disabled:opacity-50 self-stretch" className={`button-dark disabled:opacity-50 ${isStackedNickname ? 'w-full h-8' : 'h-full self-stretch'}`}
> >
{sending ? '...' : 'Send'} {sending ? '...' : 'Send'}
</button> </button>
webui/src/components/ModeGateOverlay/index.jsx
+1 -3
View File
@@ -6,7 +6,6 @@ import AuthPanel from '../AuthPanel/index.jsx';
import { useSessionSelector } from '../../context/SessionContext.jsx'; import { useSessionSelector } from '../../context/SessionContext.jsx';
import SocialButton from '../SocialButton/index.jsx'; import SocialButton from '../SocialButton/index.jsx';
import ChatPanel from '../ChatPanel/index.jsx'; import ChatPanel from '../ChatPanel/index.jsx';
import NicknameForm from '../NicknameForm/index.jsx';
const PRIVILEGED_ROLES = new Set(['admin', 'lockdown', 'lockdown-admin']); const PRIVILEGED_ROLES = new Set(['admin', 'lockdown', 'lockdown-admin']);
const LOCKDOWN_ROLES = new Set(['lockdown', 'lockdown-admin']); const LOCKDOWN_ROLES = new Set(['lockdown', 'lockdown-admin']);
@@ -101,8 +100,7 @@ export default function ModeGateOverlay() {
You can still use the chat while the server is locked: You can still use the chat while the server is locked:
{/* set max height of this box */} {/* set max height of this box */}
<div className='max-h-80 overflow-y-auto'> <div className='max-h-80 overflow-y-auto'>
<ChatPanel /> <ChatPanel nicknameLayout="stacked" />
<NicknameForm />
</div> </div>
{/* <p className="text-xs text-slate-500"> {/* <p className="text-xs text-slate-500">
webui/src/components/OverseerPreferencePanel/index.jsx
+2 -2
View File
@@ -33,9 +33,9 @@ export default function OverseerPreferencePanel() {
</label> </label>
<span className="text-xs">Enable a local LLM in chat</span> <span className="text-xs">Enable a local LLM in chat</span>
{/* <div className="mt-0.5 text-slate-400"> <div className="mt-0.5 text-slate-400">
Yes!: {Number(vote?.yesCount || 0)}, No...: {Number(vote?.noCount || 0)} Yes!: {Number(vote?.yesCount || 0)}, No...: {Number(vote?.noCount || 0)}
</div> */} </div>
<div className="mt-0.5 flex justify-center"> <div className="mt-0.5 flex justify-center">
<span <span
className={`inline-flex items-center rounded px-1.5 py-0.5 text-[0.7rem] font-medium ${ className={`inline-flex items-center rounded px-1.5 py-0.5 text-[0.7rem] font-medium ${
webui/src/components/RightPaneTabs/index.jsx
+2 -3
View File
@@ -6,7 +6,7 @@ import HomeAssistantControls from '../HomeAssistantControls/index.jsx';
import SettingsPanel from '../SettingsPanel/index.jsx'; import SettingsPanel from '../SettingsPanel/index.jsx';
import HelpPanel from '../HelpPanel/index.jsx'; import HelpPanel from '../HelpPanel/index.jsx';
import ChatPanel from '../ChatPanel/index.jsx'; import ChatPanel from '../ChatPanel/index.jsx';
import { LinkButtonsPanel, NicknameEntryPanel } from '../UserListPanel/index.jsx'; import { LinkButtonsPanel } from '../UserListPanel/index.jsx';
import ReplaySourcesPanel from '../ReplaySourcesPanel/index.jsx'; import ReplaySourcesPanel from '../ReplaySourcesPanel/index.jsx';
import Tabs, { Tab, TabList, TabPanel, TabPanels } from '../Tabs/index.jsx'; import Tabs, { Tab, TabList, TabPanel, TabPanels } from '../Tabs/index.jsx';
import TopDownMap from '../TopDownMap/index.jsx'; import TopDownMap from '../TopDownMap/index.jsx';
@@ -180,10 +180,9 @@ export default function RightPaneTabs({ layout, onOpenHelpOverlay }) {
</div> </div>
<div className="grid items-stretch gap-0.5 grid-cols-[minmax(0,1.3fr)_minmax(0,0.22fr)] h-[14rem]"> <div className="grid items-stretch gap-0.5 grid-cols-[minmax(0,1.3fr)_minmax(0,0.22fr)] h-[14rem]">
<ChatPanel fillHeight /> <ChatPanel fillHeight />
<div className="grid min-h-0 gap-0.5 grid-rows-[auto_minmax(0,1fr)_auto]"> <div className="grid min-h-0 gap-0.5 grid-rows-[auto_minmax(0,1fr)]">
<OverseerPreferencePanel /> <OverseerPreferencePanel />
<RawUserPilePanel compact hideNicknameForm fillHeight /> <RawUserPilePanel compact hideNicknameForm fillHeight />
<NicknameEntryPanel compact />
</div> </div>
</div> </div>
<HomeAssistantControls /> <HomeAssistantControls />