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

Only scroll the chatbox not the entire window when new messages arrive

Browse Source
This commit is contained in:
James Ketr 2025-09-16 10:48:22 -07:00
parent a0148fe8b9
commit 77a3bf89a7
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/LobbyChat.tsx
View File

@ -26,9 +26,12 @@ const LobbyChat: React.FC<LobbyChatProps> = ({ socketUrl, session, lobbyId }) =>
const [newMessage, setNewMessage] = useState<string>(""); const [newMessage, setNewMessage] = useState<string>("");
const [isClearing, setIsClearing] = useState<boolean>(false); const [isClearing, setIsClearing] = useState<boolean>(false);
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const chatMessagesRef = useRef<HTMLDivElement>(null);
const scrollToBottom = () => { const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); if (chatMessagesRef.current) {
chatMessagesRef.current.scrollTop = chatMessagesRef.current.scrollHeight;
}
}; };
const { sendJsonMessage } = useWebSocket(socketUrl, { const { sendJsonMessage } = useWebSocket(socketUrl, {
@ -167,7 +170,7 @@ const LobbyChat: React.FC<LobbyChatProps> = ({ socketUrl, session, lobbyId }) =>
)} )}
</Box> </Box>
<Box className="chat-messages" sx={{ flexGrow: 1, overflowY: "auto", mb: 1 }}> <Box className="chat-messages" sx={{ flexGrow: 1, overflowY: "auto", mb: 1 }} ref={chatMessagesRef}>
<List dense> <List dense>
{messages.length === 0 ? ( {messages.length === 0 ? (
<ListItem> <ListItem>