show messages directly when sending them

resources/js/components/Chat.vue

@@ -2,7 +2,7 @@
 import { useForm, usePage, router } from '@inertiajs/vue3';
 import { useEcho, echoIsConfigured, configureEcho } from '@laravel/echo-vue';
 import { Paperclip, Info } from '@lucide/vue';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { route } from 'ziggy-js';
 
 const props = withDefaults(
@@ -51,6 +51,27 @@ const messages = ref(
 );
 const nextPageUrl = ref(props.initialMessages?.next_page_url || null);
 
+watch(
+    () => props.initialMessages,
+    (newVal) => {
+        if (newVal) {
+            messages.value = newVal.data.slice().reverse();
+            nextPageUrl.value = newVal.next_page_url;
+        }
+    },
+    { deep: true }
+);
+
+watch(
+    () => props.chat.messages,
+    (newVal) => {
+        if (!props.initialMessages && newVal) {
+            messages.value = newVal.slice();
+        }
+    },
+    { deep: true }
+);
+
 function loadMoreMessages() {
     if (!nextPageUrl.value) {
         return;