<template>
  <view class="container">
    <view class="chat-ai">
      <view class="loading-container">
        <image
          v-if="isLoading"
          class="loading-img"
          src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif"
          mode="aspectFit"
        />
        <ChatMarkdown :key="textKey" :text="processedText" />
        <DotLoading v-if="isLoading" />
      </view>
      <slot name="content"></slot>
    </view>
    <slot name="footer"></slot>
  </view>
</template>

<script setup>
import { defineProps, computed, ref, watch } from "vue";
import ChatMarkdown from "../ChatMarkdown/index.vue";
import DotLoading from "../../loading/DotLoading.vue";

const props = defineProps({
  text: {
    type: String,
    default: "",
  },
  isLoading: {
    type: Boolean,
    default: false,
  },
});

// 用于强制重新渲染的key
const textKey = ref(0);

// 处理文本内容
const processedText = computed(() => {
  if (!props.text) {
    return "";
  }

  // 确保文本是字符串类型
  const textStr = String(props.text);

  // 处理加载状态的文本
  if (textStr.includes("加载中") || textStr.includes("...")) {
    return textStr;
  }

  return textStr;
});

// 监听text变化，强制重新渲染
watch(
  () => props.text,
  (newText, oldText) => {
    if (newText !== oldText) {
      textKey.value++;
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
@use "./styles/index.scss";
</style>
