<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="flex w-full flex-1 flex-col px-[20px]">
    <div class="mb-[7.5px] mt-[25px] flex w-full justify-center">
      <img :src="agentAvatar" class="rounded-theme h-[40px] w-[40px] object-cover" />
    </div>

    <div class="flex flex-col items-center justify-center">
      <p class="font-family-medium mb-[17px] line-clamp-1 text-[13px] text-[#333]">
        {{ agentApplicationConfig.baseInfo.agentTitle }}
      </p>

      <div class="flex w-full flex-col items-start justify-center">
        <p
          v-show="agentApplicationConfig.commConfig.preamble"
          class="mb-0 select-none break-all rounded-[10px] rounded-tl-none bg-[#DCDEFF] px-[12.5px] py-[11px] text-[12px]"
        >
          {{ agentApplicationConfig.commConfig.preamble }}
        </p>

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