Fix session replay: fetch newest messages from tail, not oldest from start
This commit is contained in:
@@ -26,7 +26,10 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
|
||||
const [titleDraft, setTitleDraft] = useState("");
|
||||
const { data: sessionData } = useSession(id);
|
||||
const [msgLimit, setMsgLimit] = useState(100);
|
||||
const { data: messagesData, isLoading } = useMessages(id, msgLimit);
|
||||
// Fetch from the tail: offset = max(0, total - limit)
|
||||
const msgTotal = sessionData?.session?.message_count || 0;
|
||||
const msgOffset = Math.max(0, msgTotal - msgLimit);
|
||||
const { data: messagesData, isLoading } = useMessages(id, msgLimit, msgOffset);
|
||||
const [input, setInput] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const [pendingMsg, setPendingMsg] = useState<string | null>(null);
|
||||
@@ -41,7 +44,7 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
|
||||
useEffect(() => {
|
||||
if (!session || session.ended_at) return;
|
||||
const interval = setInterval(() => {
|
||||
qc.invalidateQueries({ queryKey: ["messages", id, msgLimit] });
|
||||
qc.invalidateQueries({ queryKey: ["messages", id] });
|
||||
qc.invalidateQueries({ queryKey: ["session", id] });
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
@@ -278,14 +281,14 @@ export default function SessionReplayPage({ params }: { params: Promise<{ id: st
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Load more (at bottom = older messages since list is reversed) */}
|
||||
{(messagesData?.total || 0) > msgLimit && (
|
||||
{/* Load older messages */}
|
||||
{msgOffset > 0 && (
|
||||
<button
|
||||
onClick={() => setMsgLimit((l) => l + 100)}
|
||||
className="w-full py-3 mt-2 text-[13px] font-medium rounded-xl transition-colors"
|
||||
style={{ color: "var(--accent)", background: "var(--accent-dim)" }}
|
||||
>
|
||||
Load older messages
|
||||
Load older messages ({msgOffset} more)
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user