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

<template>
  <LayoutWithTabs>
    <template #default="{ scrollToBottom }">
      <MetaHead>
        <title>Чат {{ chatDoc?.name ? `«${chatDoc.name}»` : '' }} — НаСвязи</title>
        <meta
          name="description"
          content="Ваш QR-код успешно создан! Узнайте, как его использовать и настройте все доступные функции для удобного взаимодействия с окружающими."
        />
      </MetaHead>

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

    <template #footer>
      <ChatForm :qr_code_uri :chat userRole="owner" />
    </template>
  </LayoutWithTabs>
</template>

<script setup lang="ts">
import type { MessageDocument } from '@hereconnect/types'
import { getQrCodeDocument } from '@/api/qrCode'
import { useQuery } from '@tanstack/vue-query'

const props = defineProps<{
  qr_code_uri: MessageDocument['qr_code_uri']
  chat: MessageDocument['chat']
}>()

const { data: chatDoc } = useQuery({
  queryKey: ['qrCode', computed(() => props.qr_code_uri)],
  queryFn: () => getQrCodeDocument(props.qr_code_uri),
})
</script>