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

move UI stuff around, add message sound

Browse Source
This commit is contained in:
legop3
2025-11-21 04:55:30 -05:00
parent 2baecc90ff
commit b0ca95807c
12 changed files with 80 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/ChatPanel.jsx
+19 -11
View File
@@ -1,4 +1,4 @@
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useChat } from '../context/ChatContext.jsx';
import { useSession } from '../context/SessionContext.jsx';
@@ -30,9 +30,15 @@ export default function ChatPanel() {
const [draft, setDraft] = useState('');
const [sending, setSending] = useState(false);
const canChat = session?.role !== 'spectator';
const listRef = useRef(null);
const sorted = useMemo(() => messages.slice(-200), [messages]);
useEffect(() => {
if (!listRef.current) return;
listRef.current.scrollTop = listRef.current.scrollHeight;
}, [sorted]);
async function handleSend(event) {
event.preventDefault();
if (!canChat) return;
@@ -56,7 +62,7 @@ export default function ChatPanel() {
<span>Chat</span>
<span className="text-xs text-slate-500">{sorted.length}</span>
</div> */}
<div className="surface h-48 overflow-y-auto space-y-0.5">
<div className="surface h-48 overflow-y-auto space-y-0.25" ref={listRef}>
{sorted.length === 0 ? (
<p className="text-sm text-slate-500">No messages yet.</p>
) : (
@@ -66,16 +72,18 @@ export default function ChatPanel() {
return (
<div
key={msg.id}
className={`surface-muted text-sm ${isAdmin ? 'border border-amber-400/30' : ''}`}
className={`surface-muted text-sm flex items-start gap-1 ${
isAdmin ? 'border border-amber-400/30' : ''
}`}
>
<div className="flex items-center gap-1 text-[0.75rem] text-slate-400">
<span>{formatTime(msg.ts)}</span>
<span className={`font-semibold ${roleColors(msg.role)}`}>{displayName(msg)}</span>
{msg.roverId && (
<span className="rounded bg-slate-800 px-1 text-[0.7rem]">rover {msg.roverId}</span>
)}
</div>
<p className="text-slate-100 break-words">{msg.text}</p>
<span className="text-[0.75rem] text-slate-400">{formatTime(msg.ts)}</span>
<span className={`font-semibold text-[0.85rem] ${roleColors(msg.role)}`}>
{displayName(msg)}
</span>
{msg.roverId && (
<span className="rounded bg-slate-800 px-1 text-[0.7rem]">rover {msg.roverId}</span>
)}
<span className="text-slate-100 break-words leading-tight">{msg.text}</span>
</div>
);
})