feat: infinite scroll — load older messages on scroll up
This commit is contained in:
parent
c96bd88f2a
commit
f4f09bfeee
@ -1,9 +1,10 @@
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { Message } from "@/lib/api";
|
||||
import { getMessages, sendMessage } from "@/lib/api";
|
||||
import { wsClient } from "@/lib/ws";
|
||||
|
||||
const PAGE_SIZE = 30;
|
||||
|
||||
const AUTHOR_ICON: Record<string, string> = {
|
||||
human: "👤",
|
||||
agent: "🤖",
|
||||
@ -20,19 +21,32 @@ export default function ChatPanel({ chatId, fullscreen = false }: Props) {
|
||||
const [input, setInput] = useState("");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [sending, setSending] = useState(false);
|
||||
const [loadingOlder, setLoadingOlder] = useState(false);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const initialLoad = useRef(true);
|
||||
|
||||
// Initial load — last N messages
|
||||
useEffect(() => {
|
||||
if (chatId) {
|
||||
getMessages({ chat_id: chatId, limit: 50 }).then(setMessages).catch(() => {});
|
||||
}
|
||||
if (!chatId) return;
|
||||
initialLoad.current = true;
|
||||
setHasMore(true);
|
||||
getMessages({ chat_id: chatId, limit: PAGE_SIZE })
|
||||
.then((msgs) => {
|
||||
setMessages(msgs);
|
||||
setHasMore(msgs.length >= PAGE_SIZE);
|
||||
// Scroll to bottom on initial load
|
||||
setTimeout(() => bottomRef.current?.scrollIntoView(), 50);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [chatId]);
|
||||
|
||||
// WS real-time messages
|
||||
useEffect(() => {
|
||||
const unsub = wsClient.on("message.new", (data: any) => {
|
||||
if (data.chat_id === chatId) {
|
||||
setMessages((prev) => {
|
||||
// Dedup by message id
|
||||
if (prev.some((m) => m.id === data.id)) return prev;
|
||||
return [...prev, data as Message];
|
||||
});
|
||||
@ -41,10 +55,61 @@ export default function ChatPanel({ chatId, fullscreen = false }: Props) {
|
||||
return () => { unsub?.(); };
|
||||
}, [chatId]);
|
||||
|
||||
// Auto-scroll to bottom on new messages (only if already near bottom)
|
||||
useEffect(() => {
|
||||
if (initialLoad.current) {
|
||||
initialLoad.current = false;
|
||||
return;
|
||||
}
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 100;
|
||||
if (nearBottom) {
|
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}, [messages]);
|
||||
|
||||
// Load older messages on scroll to top
|
||||
const loadOlder = useCallback(async () => {
|
||||
if (loadingOlder || !hasMore || !chatId || messages.length === 0) return;
|
||||
setLoadingOlder(true);
|
||||
const el = scrollRef.current;
|
||||
const prevHeight = el?.scrollHeight || 0;
|
||||
|
||||
try {
|
||||
const older = await getMessages({
|
||||
chat_id: chatId,
|
||||
limit: PAGE_SIZE,
|
||||
offset: messages.length,
|
||||
});
|
||||
if (older.length < PAGE_SIZE) setHasMore(false);
|
||||
if (older.length > 0) {
|
||||
setMessages((prev) => {
|
||||
// Dedup
|
||||
const existingIds = new Set(prev.map((m) => m.id));
|
||||
const unique = older.filter((m) => !existingIds.has(m.id));
|
||||
return [...unique, ...prev];
|
||||
});
|
||||
// Maintain scroll position
|
||||
requestAnimationFrame(() => {
|
||||
if (el) el.scrollTop = el.scrollHeight - prevHeight;
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to load older messages:", e);
|
||||
} finally {
|
||||
setLoadingOlder(false);
|
||||
}
|
||||
}, [chatId, messages.length, loadingOlder, hasMore]);
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
if (el.scrollTop < 50 && hasMore && !loadingOlder) {
|
||||
loadOlder();
|
||||
}
|
||||
}, [loadOlder, hasMore, loadingOlder]);
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!input.trim() || !chatId || sending) return;
|
||||
const text = input.trim();
|
||||
@ -52,7 +117,11 @@ export default function ChatPanel({ chatId, fullscreen = false }: Props) {
|
||||
setSending(true);
|
||||
try {
|
||||
const msg = await sendMessage({ chat_id: chatId, content: text });
|
||||
setMessages((prev) => [...prev, msg]);
|
||||
setMessages((prev) => {
|
||||
if (prev.some((m) => m.id === msg.id)) return prev;
|
||||
return [...prev, msg];
|
||||
});
|
||||
setTimeout(() => bottomRef.current?.scrollIntoView({ behavior: "smooth" }), 50);
|
||||
} catch (e) {
|
||||
console.error("Failed to send:", e);
|
||||
setInput(text);
|
||||
@ -61,11 +130,7 @@ export default function ChatPanel({ chatId, fullscreen = false }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
if (fullscreen) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-3">
|
||||
{messages.map((msg) => (
|
||||
const renderMessage = (msg: Message) => (
|
||||
<div key={msg.id} className="text-sm">
|
||||
<div className="flex items-center gap-1 text-xs text-[var(--muted)] mb-0.5">
|
||||
<span>{AUTHOR_ICON[msg.author_type] || "👤"}</span>
|
||||
@ -75,7 +140,23 @@ export default function ChatPanel({ chatId, fullscreen = false }: Props) {
|
||||
</div>
|
||||
<div className="ml-5 whitespace-pre-wrap">{msg.content}</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
|
||||
if (fullscreen) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={handleScroll}
|
||||
className="flex-1 overflow-y-auto px-6 py-4 space-y-3"
|
||||
>
|
||||
{loadingOlder && (
|
||||
<div className="text-center text-xs text-[var(--muted)] py-2">Загрузка...</div>
|
||||
)}
|
||||
{!hasMore && messages.length > 0 && (
|
||||
<div className="text-center text-xs text-[var(--muted)] py-2">— начало истории —</div>
|
||||
)}
|
||||
{messages.map(renderMessage)}
|
||||
{messages.length === 0 && (
|
||||
<div className="text-sm text-[var(--muted)] italic py-8 text-center">Нет сообщений</div>
|
||||
)}
|
||||
@ -113,7 +194,14 @@ export default function ChatPanel({ chatId, fullscreen = false }: Props) {
|
||||
|
||||
{open && (
|
||||
<div className="flex flex-col h-[calc(100%-2.5rem)]">
|
||||
<div className="flex-1 overflow-y-auto px-4 py-2 space-y-2">
|
||||
<div
|
||||
ref={!fullscreen ? scrollRef : undefined}
|
||||
onScroll={!fullscreen ? handleScroll : undefined}
|
||||
className="flex-1 overflow-y-auto px-4 py-2 space-y-2"
|
||||
>
|
||||
{loadingOlder && (
|
||||
<div className="text-center text-xs text-[var(--muted)] py-1">Загрузка...</div>
|
||||
)}
|
||||
{messages.map((msg) => (
|
||||
<div key={msg.id} className="text-sm">
|
||||
<span className="text-xs text-[var(--muted)]">
|
||||
|
||||
@ -225,11 +225,12 @@ export async function deleteStep(taskId: string, stepId: string): Promise<void>
|
||||
|
||||
// --- Messages (unified: chat + task comments) ---
|
||||
|
||||
export async function getMessages(params: { chat_id?: string; task_id?: string; limit?: number }): Promise<Message[]> {
|
||||
export async function getMessages(params: { chat_id?: string; task_id?: string; limit?: number; offset?: number }): Promise<Message[]> {
|
||||
const qs = new URLSearchParams();
|
||||
if (params.chat_id) qs.set("chat_id", params.chat_id);
|
||||
if (params.task_id) qs.set("task_id", params.task_id);
|
||||
if (params.limit) qs.set("limit", String(params.limit));
|
||||
if (params.offset) qs.set("offset", String(params.offset));
|
||||
return request(`/api/v1/messages?${qs}`);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user