fix chat scroll inside scroll

apps/frontend/src/views/PublicChatView.vue

@@ -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>

apps/frontend/src/views/manage/ManageChatsView.vue

@@ -12,7 +12,7 @@
       <template #default="{ data }">
         <div
           v-if="data.length > 0"
-          class="justify-self-start align-baseline-start flex flex-col gap-4"
+          class="grid grid-cols-1 gap-5 place-self-center sm:place-self-start w-full"
         >
           <ChatCard
             v-for="row in data"

apps/frontend/src/views/manage/ManageQRCodeChatView.vue

@@ -1,56 +1,49 @@
 <template>
   <LayoutWithTabs>
-    <MetaHead>
-      <title>Чат {{ chatDoc?.name ? `«${chatDoc.name}»` : '' }} — НаСвязи</title>
-      <meta
-        name="description"
-        content="Ваш QR-код успешно создан! Узнайте, как его использовать и настройте все доступные функции для удобного взаимодействия с окружающими."
-      />
-    </MetaHead>
+    <template #default="{ scrollToBottom }">
+      <MetaHead>
+        <title>Чат {{ chatDoc?.name ? `«${chatDoc.name}»` : '' }} — НаСвязи</title>
+        <meta
+          name="description"
+          content="Ваш QR-код успешно создан! Узнайте, как его использовать и настройте все доступные функции для удобного взаимодействия с окружающими."
+        />
+      </MetaHead>
 
-    <div class="flex flex-col min-h-full">
-      <!-- Основной контент -->
-      <main class="flex-grow flex flex-col">
-        <section class="flex flex-col flex-grow max-w-prose w-full mx-auto">
-          <ChatComponent userRole="owner" :qr_code_uri="qr_code_uri" :chat="chat">
-            <template #endOfMessages="{ count, lastMessage }">
-              <div
-                v-if="!count"
-                class="flex flex-col items-center justify-center flex-grow text-center text-gray-500"
-              >
-                <h1 class="text-2xl font-bold mb-4">Пока нет сообщений</h1>
-                <p class="text-gray-600">Вы можете начать общение, отправив первое сообщение.</p>
-              </div>
-              <div
-                v-else-if="lastMessage && lastMessage.from === 'owner'"
-                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>
-        </section>
-      </main>
+      <ChatMessages
+        userRole="owner"
+        :qr_code_uri="qr_code_uri"
+        :chat="chat"
+        @scrollToBottom="scrollToBottom()"
+      >
+        <template #endOfMessages="{ count, lastMessage }">
+          <div
+            v-if="!count"
+            class="flex flex-col items-center justify-center flex-grow text-center text-gray-500"
+          >
+            <h1 class="text-2xl font-bold mb-4">Пока нет сообщений</h1>
+            <p class="text-gray-600">Вы можете начать общение, отправив первое сообщение.</p>
+          </div>
+          <div
+            v-else-if="lastMessage && lastMessage.from === 'owner'"
+            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>
 
-      <!-- Футер -->
-      <!--    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">-->
-      <!--      <p><a href="/create" class="underline underline-offset-2">Создайте свой QR‑код</a>.</p>-->
-      <!--      <p class="mt-1">-->
-      <!--        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline underline-offset-2"-->
-      <!--          >поддержке</a-->
-      <!--        >.-->
-      <!--      </p>-->
-      <!--    </footer>-->
-    </div>
+    <template #footer>
+      <ChatForm :qr_code_uri :chat userRole="owner" />
+    </template>
   </LayoutWithTabs>
 </template>
 
 <script setup lang="ts">
 import type { MessageDocument } from '@hereconnect/types'
-import ChatComponent from '@/components/ChatComponent.vue'
 import { getQrCodeDocument } from '@/api/qrCode'
 import { useQuery } from '@tanstack/vue-query'