fix(web): load historical messages when opening a conversation

ChatPage only set currentConversationId but never fetched messages from
the API, causing historical conversations to show the welcome screen.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
hailin 2026-02-07 08:00:26 -08:00
parent 15d42315ed
commit 308dd7798e
2 changed files with 31 additions and 2 deletions

View File

@ -9,7 +9,7 @@ import { useAnonymousAuth } from '@/shared/hooks/useAnonymousAuth';
export default function ChatPage() { export default function ChatPage() {
const { conversationId } = useParams(); const { conversationId } = useParams();
const { userId, isLoading: authLoading } = useAnonymousAuth(); const { userId, isLoading: authLoading } = useAnonymousAuth();
const { setCurrentConversation, loadConversations, sidebarOpen, setSidebarOpen } = useChatStore(); const { setCurrentConversation, loadConversations, loadMessages, sidebarOpen, setSidebarOpen } = useChatStore();
useEffect(() => { useEffect(() => {
if (userId) { if (userId) {
@ -20,8 +20,11 @@ export default function ChatPage() {
useEffect(() => { useEffect(() => {
if (conversationId) { if (conversationId) {
setCurrentConversation(conversationId); setCurrentConversation(conversationId);
if (userId) {
loadMessages(userId, conversationId);
} }
}, [conversationId, setCurrentConversation]); }
}, [conversationId, userId, setCurrentConversation, loadMessages]);
// Close sidebar on mobile when selecting a conversation // Close sidebar on mobile when selecting a conversation
useEffect(() => { useEffect(() => {

View File

@ -66,6 +66,7 @@ interface ChatState {
removeConversation: (id: string) => void; removeConversation: (id: string) => void;
setCurrentConversation: (id: string | null) => void; setCurrentConversation: (id: string | null) => void;
loadConversations: (userId: string) => Promise<void>; loadConversations: (userId: string) => Promise<void>;
loadMessages: (userId: string, conversationId: string) => Promise<void>;
deleteConversation: (userId: string, conversationId: string) => Promise<boolean>; deleteConversation: (userId: string, conversationId: string) => Promise<boolean>;
// Messages // Messages
@ -140,6 +141,31 @@ export const useChatStore = create<ChatState>((set, get) => ({
console.error('Failed to load conversations:', error); console.error('Failed to load conversations:', error);
} }
}, },
loadMessages: async (userId, conversationId) => {
// Skip if messages already loaded for this conversation
if (get().messages[conversationId]?.length) return;
try {
const response = await fetch(`/api/v1/conversations/${conversationId}/messages`, {
headers: { 'x-user-id': userId },
});
const data = await response.json();
if (data.success && Array.isArray(data.data)) {
const msgs: Message[] = data.data.map((m: Record<string, unknown>) => ({
id: m.id as string,
role: m.role as Message['role'],
content: m.content as string,
createdAt: m.createdAt as string,
metadata: (m.metadata as Record<string, unknown>) ?? undefined,
attachments: (m.metadata as Record<string, unknown>)?.attachments as FileAttachment[] | undefined,
}));
set((state) => ({
messages: { ...state.messages, [conversationId]: msgs },
}));
}
} catch (error) {
console.error('Failed to load messages:', error);
}
},
deleteConversation: async (userId, conversationId) => { deleteConversation: async (userId, conversationId) => {
try { try {
const response = await fetch(`/api/v1/conversations/${conversationId}`, { const response = await fetch(`/api/v1/conversations/${conversationId}`, {