<script setup lang="ts">
import { ref } from 'vue'
import { MessageItemInterface } from '../types'
import { useI18n } from 'vue-i18n'

interface Props {
  isAgentMessage: boolean
  messageItem: MessageItemInterface
  messageAuthor: string
}

defineProps<Props>()

const { t } = useI18n()

const isShowReasoningContent = ref(true)

function handleShowReasoningContentSwitch() {
  isShowReasoningContent.value = !isShowReasoningContent.value
}
</script>

<template>
  <template v-if="isAgentMessage && messageItem.name === 'Deepseek R1'">
    <div class="mb-[7px] select-none text-[14px]">
      <div
        class="inline-flex cursor-pointer items-center transition-[color] duration-200 ease-in-out hover:!text-[#777ef9]"
        @click="handleShowReasoningContentSwitch"
      >
        <span class="mr-[8px]">{{ messageAuthor }}</span>

        <i
          class="iconfont icon-left rotate-[90deg] text-[12px] transition-[transform] duration-200 ease-in-out"
          :class="{ '!rotate-[270deg]': isShowReasoningContent }"
        ></i>
      </div>
    </div>

    <Transition>
      <div v-show="isShowReasoningContent" class="h-fit">
        <div class="mb-[14px] border-l-[1px] border-solid border-l-[#ccc] p-[13px]">
          <div>
            <img
              v-if="!messageItem.reasoningContent && !messageItem.content"
              src="@/assets/images/home/bubble-loading.gif"
              alt="bubble-loading"
            />
            <template v-else>
              <MarkdownRender
                ref="markdownRenderRef"
                :raw-text-content="
                  messageItem.reasoningContent
                    ? messageItem.reasoningContent
                    : t('common_module.dialogue_module.empty_message_content')
                "
                color="#999"
              />
            </template>
          </div>
        </div>
      </div>
    </Transition>
  </template>
  <div v-else class="mb-[7px] text-[12px] text-[#999]">
    {{ messageAuthor }}
  </div>
</template>

<style lang="scss" scoped>
.v-enter-active,
.v-leave-active {
  overflow: hidden;
  transition-timing-function: ease-in-out;
  transition-duration: 0.3s;
  transition-property: opacity height;
}

.v-enter-from,
.v-leave-to {
  height: 0 !important;
  opacity: 0;
}
</style>
