<template>
  <div class="max-w-[75%] flex flex-col">
    <slot name="header"></slot>
    <div class="text-sm text-gray-700 flex flex-row">
      <div v-html="compiledMarkdown"></div>
      <ChatLoading v-if="msg.isLoading" />
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script lang="ts" setup>
import { ChatMessage } from '../model/ChatModel';
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import ChatLoading from './ChatLoading.vue';

interface Props {
  msg: ChatMessage
}

const { msg } = defineProps<Props>()
const md = new MarkdownIt({
  highlight: function (str: string, lang: string) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
      } catch (__) { }
    }
    // 自动检测
    return hljs.highlightAuto(str).value;
  }
});
const compiledMarkdown = computed(() => md.render(msg.messageContent))

</script>