chat improvements

resources/js/components/Chat.vue

@@ -33,30 +33,49 @@ const props = withDefaults(
             } | null;
         }>;
         dynamicId: string;
+        ledgerId?: string | null;
         initialMessages?: {
             data: Array<any>;
-            next_page_url: string | null;
+            next_page_url?: string | null;
+            links?: {
+                next: string | null;
+            } | null;
+            current_page?: number;
+            meta?: {
+                current_page: number;
+            } | null;
         } | null;
     }>(),
     {
         participants: () => [],
         initialMessages: null,
+        ledgerId: null,
     }
 );
 
+const getNextPageUrl = (paginator: any) => {
+    return paginator?.links?.next ?? paginator?.next_page_url ?? null;
+};
+
+const getCurrentPage = (paginator: any) => {
+    return paginator?.meta?.current_page ?? paginator?.current_page ?? 1;
+};
+
 const messages = ref(
     props.initialMessages
         ? props.initialMessages.data.slice().reverse()
         : (props.chat.messages || []).slice()
 );
-const nextPageUrl = ref(props.initialMessages?.next_page_url || null);
+const nextPageUrl = ref(getNextPageUrl(props.initialMessages));
+const currentPageNum = ref(1);
 
 watch(
     () => props.initialMessages,
     (newVal) => {
-        if (newVal) {
+        if (newVal && getCurrentPage(newVal) === 1) {
             messages.value = newVal.data.slice().reverse();
-            nextPageUrl.value = newVal.next_page_url;
+            nextPageUrl.value = getNextPageUrl(newVal);
+            currentPageNum.value = 1;
         }
     },
     { deep: true }
@@ -77,16 +96,23 @@ function loadMoreMessages() {
         return;
     }
 
-    router.get(nextPageUrl.value, {}, {
-        preserveState: true,
-        preserveScroll: true,
-        only: ['messages'],
-        onSuccess: (page) => {
-            const newMessages = page.props.messages as { data: Array<any>; next_page_url: string | null };
-            messages.value = [...newMessages.data.reverse(), ...messages.value];
-            nextPageUrl.value = newMessages.next_page_url;
-        },
-    });
+    currentPageNum.value++;
+
+    const apiRouteName = props.ledgerId ? 'dynamics.ledgers.messages' : 'dynamics.messages';
+    const apiParams = props.ledgerId ? [props.dynamicId, props.ledgerId] : [props.dynamicId];
+    const url = route(apiRouteName, [...apiParams, { page: currentPageNum.value }]);
+
+    fetch(url)
+        .then((res) => res.json())
+        .then((json) => {
+            const data = json?.data || [];
+            messages.value = [...data.slice().reverse(), ...messages.value];
+            nextPageUrl.value = getNextPageUrl(json);
+        })
+        .catch((err) => {
+            console.error('Failed to load older messages:', err);
+            currentPageNum.value--;
+        });
 }
 
 if (!echoIsConfigured()) {
@@ -238,6 +264,7 @@ function isOwnMessage(messageUserId: number | null): boolean {
 
 function submit() {
     form.post(route('chats.messages.store', props.chat.id), {
+        preserveScroll: true,
         onSuccess: () => {
             form.reset();