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

chat typing and classic typing beeps

Browse Source
This commit is contained in:
legop3
2026-01-22 04:18:55 -05:00
parent c30325afc0
commit dbc5111c53
13 changed files with 549 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/AlertFeed.jsx
+4
View File
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useState } from 'react';
import { useSession } from '../context/SessionContext.jsx';
import ChatMessageRow from './ChatMessageRow.jsx';
import ChatTypingRow from './ChatTypingRow.jsx';
const LIFETIME_MS = 3000;
const DEFAULT_COLOR = '#2196f3';
@@ -68,6 +69,9 @@ function AlertToast({ alert }) {
if (alert.kind === 'chat' && alert.payload) {
return <ChatMessageRow message={alert.payload} />;
}
if (alert.kind === 'chat-typing' && alert.payload) {
return <ChatTypingRow message={alert.payload} />;
}
const rgb = hexToRgb(alert.color) || hexToRgb(DEFAULT_COLOR);
const backgroundColor = rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.18)` : 'rgba(33, 150, 243, 0.18)';
const borderColor = rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.45)` : 'rgba(33, 150, 243, 0.45)';
webui/src/components/ChatMessageRow.jsx
+24 -13
View File
@@ -57,23 +57,12 @@ function DiscordAvatar({ guildIconUrl, userAvatarUrl, label }) {
);
}
export default function ChatMessageRow({ message }) {
const isAdmin =
message.role === 'admin' || message.role === 'lockdown' || message.role === 'lockdown-admin';
export function ChatIdentity({ message }) {
const discordLabel = message.fromDiscord
? `${message.discordGuildName || 'Discord'} · ${displayName(message)}`
: null;
return (
<div
className={`surface-muted relative flex flex-wrap items-start gap-0.5 text-sm ${
isAdmin
? 'border border-amber-400/30'
: message.fromDiscord
? 'border border-indigo-400/30 bg-indigo-900/20'
: ''
}`}
>
<>
{message.fromDiscord ? (
<>
<FaDiscord className="h-3.5 w-3.5 text-indigo-200" />
@@ -90,6 +79,26 @@ export default function ChatMessageRow({ message }) {
{message.roverId && (
<span className="rounded bg-slate-800 px-1 text-[0.7rem]">{message.roverId}</span>
)}
</>
);
}
function chatRowClass(message) {
const isAdmin =
message.role === 'admin' || message.role === 'lockdown' || message.role === 'lockdown-admin';
return `surface-muted relative flex flex-wrap items-start gap-0.5 text-sm ${
isAdmin
? 'border border-amber-400/30'
: message.fromDiscord
? 'border border-indigo-400/30 bg-indigo-900/20'
: ''
}`;
}
export default function ChatMessageRow({ message }) {
return (
<div className={chatRowClass(message)}>
<ChatIdentity message={message} />
<span className="text-slate-100 break-words leading-tight whitespace-pre-wrap">{message.text}</span>
<span className="absolute bottom-0.5 right-1 text-[0.65rem] text-slate-400/60">
{formatTime(message.ts)}
@@ -97,3 +106,5 @@ export default function ChatMessageRow({ message }) {
</div>
);
}
export { chatRowClass };
webui/src/components/ChatPanel.jsx
+32 -6
View File
@@ -3,13 +3,23 @@ import { useChat } from '../context/ChatContext.jsx';
import { useSession } from '../context/SessionContext.jsx';
import { useSettingsNamespace } from '../settings/index.js';
import ChatMessageRow from './ChatMessageRow.jsx';
import ChatTypingRow from './ChatTypingRow.jsx';
const FLITE_VOICES = ['kal', 'rms', 'slt', 'ksp', 'bdl'];
const ESPEAK_PITCHES = Array.from({ length: 10 }, (_, idx) => idx * 10);
export default function ChatPanel({ hideInput = false, hideSpectatorNotice = false, fillHeight = false }) {
const { session } = useSession();
const { messages, sendMessage, registerInputRef, onInputFocus, onInputBlur, blurChat } = useChat();
const {
messages,
typing,
sendMessage,
registerInputRef,
onInputFocus,
onInputBlur,
blurChat,
setTypingActive,
} = useChat();
const {
value: ttsSettings,
save: saveTtsSettings,
@@ -31,11 +41,12 @@ export default function ChatPanel({ hideInput = false, hideSpectatorNotice = fal
const ttsSupported = Boolean(rover?.audio?.ttsEnabled);
const sorted = useMemo(() => messages.slice(-200), [messages]);
const typingRows = useMemo(() => typing || [], [typing]);
useEffect(() => {
if (!listRef.current) return;
listRef.current.scrollTop = listRef.current.scrollHeight;
}, [sorted]);
}, [sorted, typingRows]);
useEffect(() => {
const nextEngine = ttsSettings?.engine || 'flite';
@@ -74,6 +85,7 @@ export default function ChatPanel({ hideInput = false, hideSpectatorNotice = fal
await sendMessage(clean, ttsPayload);
setDraft('');
blurChat();
setTypingActive(false);
} catch (err) {
alert(err.message);
} finally {
@@ -86,24 +98,38 @@ export default function ChatPanel({ hideInput = false, hideSpectatorNotice = fal
return (
<section className={`panel-section space-y-0.5 text-base ${fillHeight ? 'flex h-full flex-col overflow-hidden' : ''}`}>
<div className={`surface overflow-y-auto space-y-0.5 px-0 ${listClass}`} ref={listRef}>
{sorted.length === 0 ? (
{sorted.length === 0 && typingRows.length === 0 ? (
<p className="text-sm text-slate-500">No messages yet.</p>
) : (
sorted.map((msg) => <ChatMessageRow key={msg.id} message={msg} />)
)}
{typingRows.map((entry) => (
<ChatTypingRow key={`typing-${entry.typingId || entry.id}`} message={entry} />
))}
</div>
{!hideInput && (
<form className="flex flex-wrap items-stretch gap-0.5" onSubmit={handleSend}>
<input
className="field-input flex-1 min-w-[10rem]"
value={draft}
onChange={(e) => setDraft(e.target.value)}
onFocus={onInputFocus}
onBlur={onInputBlur}
onChange={(e) => {
const next = e.target.value;
setDraft(next);
setTypingActive(Boolean(next.trim()));
}}
onFocus={(event) => {
onInputFocus(event);
setTypingActive(Boolean(draft.trim()));
}}
onBlur={(event) => {
onInputBlur(event);
setTypingActive(false);
}}
onKeyDown={(event) => {
if (event.key === 'Enter' && !draft.trim()) {
event.preventDefault();
blurChat();
setTypingActive(false);
}
}}
ref={(el) => registerInputRef(el, { target: 'panel' })}
webui/src/components/ChatTypingRow.jsx
+10
View File
@@ -0,0 +1,10 @@
import { ChatIdentity, chatRowClass } from './ChatMessageRow.jsx';
export default function ChatTypingRow({ message }) {
return (
<div className={`${chatRowClass(message)} italic opacity-80 border-slate-600/40 bg-slate-900/40`}>
<ChatIdentity message={message} />
<span className="text-slate-300">typing...</span>
</div>
);
}
webui/src/components/VideoTile.jsx
+16 -4
View File
@@ -812,7 +812,7 @@ function LowBatteryOverlay({ charge, config, compact = false }) {
function HudChatInput({ compact = false }) {
const { session } = useSession();
const { sendMessage, onInputFocus, onInputBlur, blurChat, registerInputRef } = useChat();
const { sendMessage, onInputFocus, onInputBlur, blurChat, registerInputRef, setTypingActive } = useChat();
const { value: ttsSettings } = useSettingsNamespace('tts', { engine: 'flite', voice: 'rms', pitch: 50 });
const [draft, setDraft] = useState('');
const [sending, setSending] = useState(false);
@@ -857,6 +857,7 @@ function HudChatInput({ compact = false }) {
await sendMessage(clean, ttsPayload);
setDraft('');
blurChat();
setTypingActive(false);
} catch (err) {
alert(err.message);
} finally {
@@ -871,13 +872,24 @@ function HudChatInput({ compact = false }) {
<input
className={inputClass}
value={draft}
onChange={(event) => setDraft(event.target.value)}
onFocus={onInputFocus}
onBlur={onInputBlur}
onChange={(event) => {
const next = event.target.value;
setDraft(next);
setTypingActive(Boolean(next.trim()));
}}
onFocus={(event) => {
onInputFocus(event);
setTypingActive(Boolean(draft.trim()));
}}
onBlur={(event) => {
onInputBlur(event);
setTypingActive(false);
}}
onKeyDown={(event) => {
if (event.key === 'Enter' && !draft.trim()) {
event.preventDefault();
blurChat();
setTypingActive(false);
}
}}
ref={(el) => registerInputRef(el, { target: 'hud' })}
webui/src/context/ChatContext.jsx
+96 -1
View File
@@ -7,12 +7,14 @@ import messageSound from '../assets/message.mp3';
const ChatContext = createContext({
messages: [],
typing: [],
sendMessage: async () => {},
focusChat: () => {},
blurChat: () => {},
registerInputRef: () => {},
onInputFocus: () => {},
onInputBlur: () => {},
setTypingActive: () => {},
isChatFocused: false,
});
@@ -20,10 +22,30 @@ export function ChatProvider({ children }) {
const socket = useSocket();
const { session, pushAlert } = useSession();
const [messages, setMessages] = useState([]);
const [typing, setTyping] = useState([]);
const [isChatFocused, setIsChatFocused] = useState(false);
const panelInputRef = useRef(null);
const hudInputRef = useRef(null);
const audioRef = useRef(null);
const typingRef = useRef(new Map());
const typingAlertRef = useRef(new Map());
const typingStateRef = useRef({ isTyping: false, lastSent: 0 });
const rebuildTyping = useCallback(() => {
const entries = Array.from(typingRef.current.values())
.sort((a, b) => a.lastUpdate - b.lastUpdate)
.map((entry) => entry.payload);
setTyping(entries);
}, []);
const resolveTypingKey = useCallback((payload) => {
if (!payload || typeof payload !== 'object') return null;
if (payload.typingId) return payload.typingId;
if (payload.fromDiscord) {
return `discord:${payload.discordUserId || payload.discordUserName || payload.nickname || 'unknown'}`;
}
return `socket:${payload.socketId || payload.nickname || 'unknown'}`;
}, []);
useEffect(() => {
audioRef.current = new Audio(messageSound);
@@ -57,6 +79,62 @@ export function ChatProvider({ children }) {
};
}, [playSound, session?.socketId, socket]);
useEffect(() => {
function handleTyping(payload = {}) {
const key = resolveTypingKey(payload);
if (!key) return;
const now = Date.now();
if (payload?.socketId && session?.socketId && payload.socketId === session.socketId) {
if (!payload.isTyping) {
typingRef.current.delete(key);
rebuildTyping();
}
return;
}
if (payload.isTyping) {
typingRef.current.set(key, {
payload,
expiresAt: now + 6000,
lastUpdate: now,
});
const lastAlertAt = typingAlertRef.current.get(key) || 0;
if (now - lastAlertAt >= 2500) {
typingAlertRef.current.set(key, now);
pushAlert?.({
kind: 'chat-typing',
payload,
id: `chat-typing-${key}-${payload.id || Math.random().toString(36).slice(2)}`,
receivedAt: now,
});
}
} else {
typingRef.current.delete(key);
}
rebuildTyping();
}
socket.on('chat:typing', handleTyping);
return () => {
socket.off('chat:typing', handleTyping);
};
}, [pushAlert, rebuildTyping, resolveTypingKey, session?.socketId, socket]);
useEffect(() => {
const interval = setInterval(() => {
const now = Date.now();
let changed = false;
typingRef.current.forEach((entry, key) => {
if (entry.expiresAt <= now) {
typingRef.current.delete(key);
changed = true;
}
});
if (changed) {
rebuildTyping();
}
}, 2000);
return () => clearInterval(interval);
}, [rebuildTyping]);
useEffect(() => {
function handleInit(payload = []) {
if (!Array.isArray(payload)) return;
@@ -75,6 +153,21 @@ export function ChatProvider({ children }) {
};
}, [socket]);
const setTypingActive = useCallback(
(next) => {
const isTyping = Boolean(next);
const now = Date.now();
const last = typingStateRef.current;
const shouldSendStop = !isTyping && last.isTyping;
const shouldSendStart =
isTyping && (!last.isTyping || now - last.lastSent >= 3500);
if (!shouldSendStart && !shouldSendStop) return;
typingStateRef.current = { isTyping, lastSent: now };
socket.emit('chat:typing', { isTyping });
},
[socket],
);
const sendMessage = useCallback(
(text, tts = null) =>
new Promise((resolve, reject) => {
@@ -121,10 +214,12 @@ export function ChatProvider({ children }) {
registerInputRef,
onInputFocus,
onInputBlur,
setTypingActive,
typing,
isChatFocused,
selfSocketId: session?.socketId || null,
}),
[blurChat, focusChat, isChatFocused, messages, onInputBlur, onInputFocus, registerInputRef, sendMessage, session?.socketId],
[blurChat, focusChat, isChatFocused, messages, onInputBlur, onInputFocus, registerInputRef, sendMessage, session?.socketId, setTypingActive, typing],
);
return <ChatContext.Provider value={value}>{children}</ChatContext.Provider>;