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

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

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

const renderedContent = computed(() => {
  if (props.role === "user") return props.content;
  return markdown.render(props.content || "");
});
</script>

<template>
  <article class="message" :class="role">
    <div class="avatar">{{ role === "assistant" ? "AI" : "我" }}</div>
    <div class="bubble">
      <div v-if="role === 'assistant'" class="content markdown-content" v-html="renderedContent"></div>
      <div v-else class="content">{{ renderedContent }}</div>
      <span v-if="streaming" class="typing">正在生成</span>
    </div>
  </article>
</template>
