<script setup lang="ts">
import { Bot } from "@lucide/vue";
import MarkdownIt from "markdown-it";
import { computed } from "vue";

const props = defineProps<{
  messageId: string;
  role: "user" | "assistant";
  content: string;
  createdAt: string;
  streaming?: boolean;
}>();

const markdown = new MarkdownIt({ breaks: true, html: false, linkify: true });

const answer = computed(() => {
  if (props.role === "user") return props.content;
  // 部分模型会产生嵌套 think 标签，使用贪婪匹配移除完整思考区，再清理流式残留标签。
  let content = props.content.replace(/<think>[\s\S]*<\/think>/gi, "");
  content = content.replace(/<think>[\s\S]*$/i, "");
  content = content.replace(/<\/?think>/gi, "");
  return content.trim();
});

const renderedContent = computed(() =>
  props.role === "assistant" ? markdown.render(answer.value) : answer.value,
);

const displayTime = computed(() => {
  // 消息服务返回的是 UTC 无时区字符串，补齐时区后再按用户本地时间展示。
  const normalized = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(props.createdAt) ? props.createdAt : `${props.createdAt}Z`;
  const date = new Date(normalized);
  if (Number.isNaN(date.getTime())) return "";
  return new Intl.DateTimeFormat("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
});
</script>

<template>
  <article class="chat-message" :class="role" :data-message-id="messageId">
    <div v-if="role === 'assistant'" class="assistant-icon" aria-hidden="true">
      <Bot :size="19" />
    </div>
    <div class="message-bubble">
      <template v-if="role === 'assistant'">
        <div v-if="renderedContent" class="message-content markdown-content" v-html="renderedContent"></div>
        <div v-if="streaming && !renderedContent" class="generation-state">
          <span></span><span></span><span></span>
          正在生成回答...
        </div>
      </template>
      <div v-else class="message-content">{{ renderedContent }}</div>
      <time v-if="displayTime" :datetime="createdAt">{{ displayTime }}</time>
    </div>
  </article>
</template>
