<script setup lang="ts">
import { computed } from 'vue'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'
import ContinueQuestion from './continue-question.vue'

interface Props {
  agentApplicationConfig: PersonalAppConfigState
}

const props = defineProps<Props>()

const agentApplicationConfig = computed(() => props.agentApplicationConfig)

const agentAvatar = computed(() => {
  return (
    agentApplicationConfig.value.baseInfo.agentAvatar ||
    'https://gsst-poe-sit.gz.bcebos.com/data/20240911/1726041369632.webp'
  )
})
</script>

<template>
  <div class="preamble-wrapper">
    <div class="avatar-container">
      <img :src="agentAvatar" class="agent-avatar" />
    </div>

    <div class="preamble-container">
      <p class="agent-title">
        {{ agentApplicationConfig.baseInfo.agentTitle }}
      </p>

      <div class="flex w-full flex-col items-start justify-center">
        <p v-show="agentApplicationConfig.commConfig.preamble" class="preamble">
          {{ agentApplicationConfig.commConfig.preamble }}
        </p>

        <ContinueQuestion
          v-model:continuous-question-list="agentApplicationConfig.commConfig.featuredQuestions"
          :type="'featured'"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.preamble-wrapper {
  @apply flex w-full flex-col px-[20px];

  .avatar-container {
    @apply mb-[7.5px] mt-[25px] flex w-full justify-center;

    .agent-avatar {
      @apply rounded-theme h-[40px] w-[40px] object-cover;
    }
  }

  .preamble-container {
    @apply flex flex-col items-center justify-center;

    .agent-title {
      @apply font-family-medium mb-[17px] line-clamp-1 text-[13px] text-[#333];
    }

    .preamble {
      @apply select-none break-all rounded-[10px] rounded-tl-none bg-[#DCDEFF] px-[12.5px] py-[11px] text-[12px];
    }
  }
}
</style>
