import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { chatApi } from "../api/chat"; import type { ChatMessage, ChatMessageListResponse } from "@paperclipai/shared"; export function useChatMessages(conversationId: string | null) { const queryClient = useQueryClient(); const query = useInfiniteQuery({ queryKey: ["chat", "messages", conversationId], queryFn: ({ pageParam }) => chatApi.listMessages(conversationId!, { cursor: pageParam as string | undefined }), initialPageParam: undefined as string | undefined, getNextPageParam: (lastPage: ChatMessageListResponse) => lastPage.hasMore ? lastPage.items.at(-1)?.createdAt : undefined, enabled: !!conversationId, }); const sendMutation = useMutation({ mutationFn: (data: { content: string }) => chatApi.postMessage(conversationId!, { role: "user", content: data.content }), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["chat", "messages", conversationId] }); // Also invalidate conversations to update lastMessagePreview and sort order queryClient.invalidateQueries({ queryKey: ["chat", "conversations"] }); }, }); // Flatten pages into a single sorted array (oldest first for display) // Messages come from API in desc(createdAt) order -- reversing gives chronological order const messages: ChatMessage[] = query.data?.pages.flatMap((p) => p.items).reverse() ?? []; return { ...query, messages, sendMutation }; }