hereconnect/apps/frontend/src/views/PublicChatView.vue

<template>
  <LayoutWithTabs>
    <template #default="{ scrollToBottom }">
      <MetaHead>
        <title>Чат — НаСвязи</title>
        <meta
          name="description"
          content="Чат QR-кода. Безопасная и конфиденциальная связь для решения всех вопросов"
        />
      </MetaHead>

      <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'
defineProps<{ qr_code_uri: MessageDocument['qr_code_uri']; chat: MessageDocument['chat'] }>()
</script>