feat(web-chat): add message history pagination

- add loadMoreMessages with before_id cursor in chat store
- track hasMore/loading state per chat
- add 'Load older messages' control in message list

web/src/components/MessageList.tsx

@@ -24,6 +24,9 @@ export function MessageList() {
   const activeChatId = useChatStore((s) => s.activeChatId);
   const messagesByChat = useChatStore((s) => s.messagesByChat);
   const typingByChat = useChatStore((s) => s.typingByChat);
+  const hasMoreByChat = useChatStore((s) => s.hasMoreByChat);
+  const loadingMoreByChat = useChatStore((s) => s.loadingMoreByChat);
+  const loadMoreMessages = useChatStore((s) => s.loadMoreMessages);
   const unreadBoundaryByChat = useChatStore((s) => s.unreadBoundaryByChat);
   const chats = useChatStore((s) => s.chats);
   const setReplyToMessage = useChatStore((s) => s.setReplyToMessage);
@@ -61,6 +64,8 @@ export function MessageList() {
   }, [chats, forwardQuery]);
   const unreadBoundaryCount = activeChatId ? (unreadBoundaryByChat[activeChatId] ?? 0) : 0;
   const unreadBoundaryIndex = unreadBoundaryCount > 0 ? Math.max(0, messages.length - unreadBoundaryCount) : -1;
+  const hasMore = Boolean(activeChatId && hasMoreByChat[activeChatId]);
+  const isLoadingMore = Boolean(activeChatId && loadingMoreByChat[activeChatId]);
   const selectedMessages = useMemo(
     () => messages.filter((m) => selectedIds.has(m.id)),
     [messages, selectedIds]
@@ -254,6 +259,17 @@ export function MessageList() {
         </div>
       ) : null}
       <div className="tg-scrollbar flex-1 overflow-auto px-3 py-4 md:px-6">
+        {hasMore ? (
+          <div className="mb-3 flex justify-center">
+            <button
+              className="rounded-full border border-slate-700/80 bg-slate-900/70 px-3 py-1 text-xs text-slate-300 hover:bg-slate-800 disabled:opacity-60"
+              disabled={isLoadingMore}
+              onClick={() => void loadMoreMessages(chatId)}
+            >
+              {isLoadingMore ? "Loading..." : "Load older messages"}
+            </button>
+          </div>
+        ) : null}
         {messages.map((message, messageIndex) => {
           const own = message.sender_id === me?.id;
           const replySource = message.reply_to_message_id ? messagesMap.get(message.reply_to_message_id) : null;