<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import CustomLoading from './custom-loading.vue'
import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'
import { useLayoutConfig } from '@/composables/useLayoutConfig'
import { useUserStore } from '@/store/modules/user'

interface Props {
  role: 'user' | 'assistant'
  messageItem: ConversationMessageItem
  agentApplicationConfig: PersonalAppConfigState
}

const { t } = useI18n()

const props = defineProps<Props>()

const userStore = useUserStore()

const { isMobile } = useLayoutConfig()

const useAvatar = computed(() => {
  return userStore.userInfo.avatarUrl || 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'
})

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

<template>
  <div
    class="mb-5 flex last:mb-0"
    :class="[
      isMobile ? 'flex-row-reverse' : 'flex-row',
      role === 'assistant' && isMobile ? 'justify-end' : 'justify-start',
    ]"
  >
    <NImage
      v-show="!isMobile"
      :src="role === 'user' ? useAvatar : assistantAvatar"
      preview-disabled
      :width="32"
      :height="32"
      object-fit="cover"
      class="mr-2 mt-1.5 h-8 w-8 rounded-full"
    />

    <div
      class="min-w-[80px] flex-wrap rounded-xl border border-[#e8e9eb] px-4 py-[11px]"
      :class="[
        role === 'user' ? 'bg-theme-color text-white' : 'bg-white text-[#333]',
        isMobile ? 'max-w-[calc(100%-20px)]' : 'max-w-[calc(100%-32px-12px)]',
      ]"
    >
      <div v-if="messageItem.isTextContentLoading" class="py-1.5 pl-4">
        <CustomLoading />
      </div>

      <div v-else>
        <p class="break-all">
          <MarkdownRender
            :raw-text-content="
              messageItem.isEmptyContent
                ? t('common_module.dialogue_module.empty_message_content')
                : messageItem.textContent
            "
            :color="role === 'user' ? '#fff' : '#192338'"
          />
        </p>

        <div v-show="role === 'assistant' && messageItem.isAnswerResponseLoading" class="mb-[5px] mt-4 px-4">
          <CustomLoading />
        </div>
      </div>
    </div>
  </div>
</template>
