more commits.

frontend/src/components/message/MessageList.vue

@@ -1,9 +1,13 @@
 <template>
     <div ref="threadEl" class="overflow-y-scroll">
-        <div class="text-center mt-3" v-if="conversationStore.messages.hasMore">
-            <Button variant="secondary" @click="conversationStore.fetchNextMessages">Fetch more</Button>
+        <div class="text-center mt-3" v-if="conversationStore.messages.hasMore && !conversationStore.messages.loading">
+            <Button variant="ghost" @click="conversationStore.fetchNextMessages">
+                <RefreshCw size="17" class="mr-2" />
+                Load more
+            </Button>
         </div>
-        <div v-for="message in conversationStore.sortedMessages" :key="message.uuid" :class="message.type === 'activity' ? 'm-4' : 'm-6'">
+        <div v-for="message in conversationStore.sortedMessages" :key="message.uuid"
+            :class="message.type === 'activity' ? 'm-4' : 'm-6'">
             <div v-if="!message.private">
                 <ContactMessageBubble :message="message" v-if="message.type === 'incoming'" />
                 <AgentMessageBubble :message="message" v-if="message.type === 'outgoing'" />
@@ -19,30 +23,37 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import ContactMessageBubble from "./ContactMessageBubble.vue";
 import ActivityMessageBubble from "./ActivityMessageBubble.vue";
 import AgentMessageBubble from "./AgentMessageBubble.vue";
 import { useConversationStore } from '@/stores/conversation'
 import { Button } from '@/components/ui/button';
+import { RefreshCw } from 'lucide-vue-next';
 
 const conversationStore = useConversationStore()
 const threadEl = ref(null);
 
 
 const scrollToBottom = () => {
-    const thread = threadEl.value;
-    if (thread) {
-        thread.scrollTop = thread.scrollHeight;
-    }
+    setTimeout(() => {
+        console.log("Scrolling bottom")
+        const thread = threadEl.value;
+        if (thread) {
+            thread.scrollTop = thread.scrollHeight;
+        }
+    }, 0)
 };
 
+
 onMounted(() => {
-    setTimeout(() => {
-        scrollToBottom();
-    }, 0);
+    scrollToBottom();
 });
 
+// On conversation change scroll to the bottom
+watch(() => conversationStore.conversation.data, () => {
+    scrollToBottom();
+});
 
 const isPrivateNote = (message) => {
     return message.type === "outgoing" && message.private;