fix chat scroll inside scroll

2024-12-07 01:33:10 +02:00
parent 14e7dec5b4
commit 7d611b6916
7 changed files with 120 additions and 106 deletions
@@ -1,32 +1,42 @@
 <template>
  <LayoutWithTabs>
-    <MetaHead>
-      <title>Чат — НаСвязи</title>
-      <meta
-        name="description"
-        content="Чат QR-кода. Безопасная и конфиденциальная связь для решения всех вопросов"
-      />
-    </MetaHead>
+    <template #default="{ scrollToBottom }">
+      <MetaHead>
+        <title>Чат — НаСвязи</title>
+        <meta
+          name="description"
+          content="Чат QR-кода. Безопасная и конфиденциальная связь для решения всех вопросов"
+        />
+      </MetaHead>

-    <ChatComponent userRole="guest" :qr_code_uri="qr_code_uri" :chat="chat">
-      <template #endOfMessages="{ count, lastMessage }">
-        <!-- Уведомление, если гость отправил только одно сообщение -->
-        <div
-          v-if="count === 1 && lastMessage && lastMessage.from === 'guest'"
-          class="flex flex-col items-center justify-center text-center bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6 mt-6"
-        >
-          <p class="text-gray-700 font-medium text-lg">Ваше сообщение отправлено.</p>
-          <p class="text-gray-600 mt-2">
-            Вы можете написать ещё одно сообщение или подождать ответа.
-          </p>
-        </div>
-      </template>
-    </ChatComponent>
+      <ChatMessages
+        userRole="guest"
+        :qr_code_uri="qr_code_uri"
+        :chat="chat"
+        @scrollToBottom="scrollToBottom()"
+      >
+        <template #endOfMessages="{ count, lastMessage }">
+          <!-- Уведомление, если гость отправил только одно сообщение -->
+          <div
+            v-if="count === 1 && lastMessage && lastMessage.from === 'guest'"
+            class="flex flex-col items-center justify-center text-center bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6 my-6"
+          >
+            <p class="text-gray-700 font-medium text-lg">Ваше сообщение отправлено.</p>
+            <p class="text-gray-600 mt-2">
+              Вы можете написать ещё одно сообщение или подождать ответа.
+            </p>
+          </div>
+        </template>
+      </ChatMessages>
+    </template>
+
+    <template #footer>
+      <ChatForm :qr_code_uri :chat userRole="guest" />
+    </template>
  </LayoutWithTabs>
 </template>

 <script setup lang="ts">
 import type { MessageDocument } from '@hereconnect/types'
-import ChatComponent from '@/components/ChatComponent.vue'
 defineProps<{ qr_code_uri: MessageDocument['qr_code_uri']; chat: MessageDocument['chat'] }>()
 </script>