RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chat Widget, changes in nav bar

Browse Source 
Auto Scroll chat and changes in Nav bar
This commit is contained in:
Nikitha
2026-04-15 08:12:16 -06:00
parent c5c5461167
commit 8e1ab89e6c
6 changed files with 106 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/components/FloatingChat.js
View File

@@ -21,10 +21,20 @@ export default function FloatingChat() {
const [input, setInput] = useState("");
const messagesEndRef = useRef(null);
const prevAiLengthRef = useRef(0);
const prevLiveLengthRef = useRef(0);
useEffect(() => {
if (isOpen) messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [aiMessages, liveMessages, isOpen]);
if (!isOpen) return;
const aiGrew = aiMessages.length > prevAiLengthRef.current;
const liveGrew = liveMessages.length > prevLiveLengthRef.current;
prevAiLengthRef.current = aiMessages.length;
prevLiveLengthRef.current = liveMessages.length;
if (aiGrew || liveGrew) {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}
}, [aiMessages, liveMessages, isOpen]);
useEffect(() => {
if (view === "history" && token && isOpen) loadConversations(token);
@@ -137,7 +147,7 @@ export default function FloatingChat() {
</div>
)}
{conversations.filter(c => c.status === "OPEN" && c.staffId).map((conv) => (
<button key={conv.Id} style={s.convItem} onClick={() => openLiveConversation(conv.id, token)}>
<button key={conv.id} style={s.convItem} onClick={() => openLiveConversation(conv.id, token)}>
<div style={s.convTop}>
<span style={s.convSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
<span style={{ ...s.statusBadge, ...s.statusOpen }}>Active</span>

4
web/components/Navigation.js
View File

@@ -55,7 +55,7 @@ export default function DisplayNav() {
<Link href="/appointments" className="nav-link">Appointments</Link>
<Link href="/ai-chat" className="nav-link">Help</Link>
<Link href="/contact" className="nav-link">Contact</Link>
<Link href="/about" className="nav-link">About</Link>
{/*} <Link href="/about" className="nav-link">About</Link> */}
</div>
<div className="nav-auth">
@@ -131,7 +131,7 @@ export default function DisplayNav() {
<Link href="/appointments" className="nav-drawer-link" onClick={closeMenu}>Appointments</Link>
<Link href="/ai-chat" className="nav-drawer-link" onClick={closeMenu}>Help</Link>
<Link href="/contact" className="nav-drawer-link" onClick={closeMenu}>Contact</Link>
<Link href="/about" className="nav-drawer-link" onClick={closeMenu}>About</Link>
{/* <Link href="/about" className="nav-drawer-link" onClick={closeMenu}>About</Link> */}
<div className="nav-drawer-divider" />