<template>
  <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-start）并占满宽度 -->
  <div class="w-full flex items-center justify-start">
    <div class="align-middle flex-1 overflow-x-hidden">
      <div class="px-3 min-w-0 max-w-full overflow-hidden break-all">
        <div class="flex items-center max-w-full">
          <img v-if="isLoading" class="mr-2 w-7.5 h-6.25" src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif" />
          <ChatMarkdown :key="textKey" :text="processedText" />
          <ChatLoading v-if="isLoading" />
        </div>
        <slot name="content"></slot>
      </div>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import ChatMarkdown from "../ChatMarkdown/index.vue";
import ChatLoading from "../ChatLoading/index.vue";

const { t } = useI18n();

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(t("home.chat.pending")) || textStr.includes("...")) {
    return textStr;
  }

  return textStr;
});

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