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

fix chat ux and ai model

Browse Source
This commit is contained in:
Harkamal Randhawa
2026-04-16 00:11:08 -06:00
parent 102edbdb19
commit 3c4ec5b11e
4 changed files with 61 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
web/app/ai-chat/page.js
View File

@@ -84,6 +84,8 @@ function AiChatPage() {
const [convsLoading, setConvsLoading] = useState(false);
const [closedExpanded, setClosedExpanded] = useState(false);
const [selectedFile, setSelectedFile] = useState(null);
const [botTyping, setBotTyping] = useState(false);
const [switchingConv, setSwitchingConv] = useState(false);
const messagesEndRef = useRef(null);
const messagesAreaRef = useRef(null);
@@ -93,6 +95,7 @@ function AiChatPage() {
const fileInputRef = useRef(null);
const lastScrolledIdRef = useRef(null);
const initialLoadDoneRef = useRef(false);
const botTypingTimeoutRef = useRef(null);
useEffect(() => {
if (!authLoading && !user) {
@@ -108,11 +111,22 @@ function AiChatPage() {
lastScrolledIdRef.current = lastMsg.id;
const area = messagesAreaRef.current;
if (!area) return;
const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 150;
if (nearBottom) {
const isOwn = lastMsg.senderId === user?.id;
if (isOwn) {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
} else {
const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 150;
if (nearBottom) messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}
}, [messages]);
}, [messages, user?.id]);
useEffect(() => {
if (!botTyping) return;
const area = messagesAreaRef.current;
if (!area) return;
const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 150;
if (nearBottom) messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [botTyping]);
const fetchMessages = useCallback(async (convId) => {
if (!token || !convId) return;
@@ -183,6 +197,8 @@ function AiChatPage() {
const msg = JSON.parse(frame.body);
setMessages((prev) => prev.some((m) => m.id === msg.id) ? prev : [...prev, msg]);
lastMessageIdRef.current = msg.id;
if (botTypingTimeoutRef.current) clearTimeout(botTypingTimeoutRef.current);
setBotTyping(false);
} catch { /* silent */ }
});
const convTopic = user?.role === "CUSTOMER"
@@ -310,6 +326,11 @@ function AiChatPage() {
const msg = await res.json();
setMessages((prev) => prev.some((m) => m.id === msg.id) ? prev : [...prev, msg]);
lastMessageIdRef.current = msg.id;
if (!isEscalated) {
setBotTyping(true);
if (botTypingTimeoutRef.current) clearTimeout(botTypingTimeoutRef.current);
botTypingTimeoutRef.current = setTimeout(() => setBotTyping(false), 30000);
}
} catch {
setError("Network error. Please try again.");
setInput(text);
@@ -414,10 +435,11 @@ function AiChatPage() {
if (stompRef.current) { stompRef.current.deactivate(); stompRef.current = null; }
setMessages([]);
setError(null);
setLoadingConv(true);
setBotTyping(false);
setSwitchingConv(true);
await fetchConversation(convId);
await fetchMessages(convId);
setLoadingConv(false);
setSwitchingConv(false);
connectStomp(convId);
router.replace(`/ai-chat?id=${convId}`, { scroll: false });
}
@@ -629,6 +651,24 @@ function AiChatPage() {
</div>
);
})}
{botTyping && !isEscalated && (
<div style={{ ...s.messageRow, ...s.messageRowAgent }}>
<div style={s.aiAvatarSmall}>🐾</div>
<div style={{ ...s.messageBubble, ...s.bubbleAgent, display: "flex", alignItems: "center", gap: "4px", padding: "0.6rem 0.9rem" }}>
<span className="fc-dot" />
<span className="fc-dot" style={{ animationDelay: "0.2s" }} />
<span className="fc-dot" style={{ animationDelay: "0.4s" }} />
</div>
</div>
)}
{switchingConv && (
<div style={{ textAlign: "center", padding: "1rem", color: "#aaa", fontSize: "0.85rem" }}>
Loading messages…
</div>
)}
<div ref={messagesEndRef} />
</div>

19
web/app/chat/page.js
View File

@@ -84,6 +84,7 @@ function ChatPage() {
const [convsLoading, setConvsLoading] = useState(false);
const [closedExpanded, setClosedExpanded] = useState(false);
const [selectedFile, setSelectedFile] = useState(null);
const [switchingConv, setSwitchingConv] = useState(false);
const messagesEndRef = useRef(null);
const messagesAreaRef = useRef(null);
@@ -108,11 +109,14 @@ function ChatPage() {
lastScrolledIdRef.current = lastMsg.id;
const area = messagesAreaRef.current;
if (!area) return;
const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 80;
if (nearBottom) {
const isOwn = lastMsg.senderId === user?.id;
if (isOwn) {
area.scrollTop = area.scrollHeight;
} else {
const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 80;
if (nearBottom) area.scrollTop = area.scrollHeight;
}
}, [messages]);
}, [messages, user?.id]);
const fetchMessages = useCallback(async (convId) => {
if (!token || !convId) return;
@@ -416,10 +420,10 @@ function ChatPage() {
if (stompRef.current) { stompRef.current.deactivate(); stompRef.current = null; }
setMessages([]);
setError(null);
setLoadingConv(true);
setSwitchingConv(true);
await fetchConversation(convId);
await fetchMessages(convId);
setLoadingConv(false);
setSwitchingConv(false);
connectStomp(convId);
router.replace(`/chat?id=${convId}`, { scroll: false });
}
@@ -640,6 +644,11 @@ function ChatPage() {
</div>
);
})}
{switchingConv && (
<div style={{ textAlign: "center", padding: "1rem", color: "#aaa", fontSize: "0.85rem" }}>
Loading messages…
</div>
)}
<div ref={messagesEndRef} />
</div>