Refining the CRM chat interface

apps/web/src/views/ConversationsView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { RouterLink } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
@@ -29,9 +29,17 @@ const groupMemberIds = ref<string[]>([]);
 const dmPeerId = ref('');
 
 const { messages, loadingMessages, status, loadMessages, sendText, sendRead } = useOrgChat();
+const msgStreamEl = ref<HTMLElement | null>(null);
 
 const canCreateGroup = computed(() => access.value?.canCreateGroup ?? false);
 
+async function scrollToBottom() {
+  await nextTick();
+  const el = msgStreamEl.value;
+  if (!el) return;
+  el.scrollTop = el.scrollHeight;
+}
+
 const sortedRooms = computed(() =>
   [...rooms.value].sort((a, b) => {
     const ta = a.lastMessageAt ? new Date(a.lastMessageAt).getTime() : 0;
@@ -154,6 +162,17 @@ watch(activeRoom, () => {
   draft.value = '';
 });
 
+watch(
+  () => messages.value.length,
+  () => {
+    void scrollToBottom();
+  },
+);
+
+watch(loadingMessages, (v) => {
+  if (!v) void scrollToBottom();
+});
+
 onMounted(() => {
   void bootstrap();
 });
@@ -230,7 +249,7 @@ onMounted(() => {
           </div>
 
           <div v-if="loadingMessages" class="muted center pad">در حال دریافت پیام‌ها…</div>
-          <ul v-else class="msg-stream">
+          <ul v-else ref="msgStreamEl" class="msg-stream">
             <li
               v-for="msg in messages"
               :key="msg.id"