lke-component-vue3

知识引擎大模型对话消息渲染组件，适用于基于vue3搭建的项目。

其它项目环境参考

• 基于react和vue2的项目参考 链接

• 小程序参考 链接

组件介绍

提供两个组件：MsgContent、MsgThought

MsgContent： 展示消息内容

props:
  content: String, // 消息
  isFinal: Boolean, // 消息是否输出结束
  loadingMessage: Boolean, // 是否加载中
  isMdExpand: Boolean, // 是否展开所有的消息
  isReplaceLinks: Boolean, // 是否替换链接为第三方提示
  isPrintAnimate: Boolean, // 是否显示打字的图标
  styleObj: Object, // 消息体的style
  clazzTable: String, // 消息体的 table 样式 （后面会加上默认统一样式），props方便修改
  clazzMd: String, // 消息体的class
  anchorAttributes: Object, // // 为链接添加自定义属性，如{target: '_blank'}
  linkify: Boolean // markdown-it 的props透传，见示例

MsgThought： 显示deepseek 的思考内容

props:
  content: String \\ 思考内容
  title: String \\ 标题，如“思考完成"
  titleIcon: String \\ 图标小图标icon 大小16x16px
  nodeName: String  \\ 可不填，如”deepseek“
  status: String \\ 思考状态，可选值'success', 'failed', 'processing', 'stop'
  elapsed: number \\ 思考花费时间, 毫秒，如17485

在vue3项目里使用

<script>
import { MsgContent, MsgThought } from 'lke-component-vue3'
import 'lke-component-vue3/style.css'

const msgList = ref([{
    content: "天气不错哦<b>?</b>",
    isFinal: false,
    isPrintAnimate: true,
    showTags: true,
    printCount: 1,
    hideCursorPoint: true,
    thoughts: [
      {
        title: "思考完成",
        nodeName: "",
        status: "success",
        detailVisible: true,
        elapsed: 17485,
        titleIcon: 'https://lke-realtime-1251316161.cos.ap-guangzhou.myqcloud.com/icon/thinking.png',
        mdRenderEnabled: true,
        content: `
    好的，我现在需要处理用户的问题“你好”，并根据提供的搜索结果生成一个回答，同时正确引用来源。首先，用户的问题是一个常见的问候语，所以答案应该解释“你好”的含义和用法。

    看一下搜索结果的各个条目。结果1到4、7、8都是关于“你好”这个词语的解释，包括它的拼音、用法、近义词等。而结果5、6、9是关于韩国电影《你好》的信息，和用户的问题无关，可以忽略。

    接下来，我需要从相关的结果中提取关键信息。例如，结果1提到“你好”是用于礼貌的打招呼或问候，适用于非熟人群体。结果2和3也给出了类似的解释，并指出它是汉语中的常用敬语。结果4详细介绍了“你好”的不同解释，包括网络解释和基础解释。结果7和8补充了其作为打招呼的敬语用法。

    需要将这些信息整合成一个连贯的回答，并用正确的引用标注。例如，综合结果1、2、3、4、7、8的内容，说明“你好”的基本含义、用法以及适用场合。注意不要提到电影相关的信息，因为与问题无关。

    最后，确保回答简洁明了，使用中文口语化表达，避免使用Markdown格式，并在适当的位置添加引用，如[1](@ref)、[2](@ref)等。同时，根据当前时间2025年2月19日，用户的问题只是问候，不需要时间相关的调整，所以直接回答即可。
    `,
      }
    ]
}]);


</script>

<template>

<div v-for="item in msgList">
  <!-- deepseek 思考内容渲染 -->
  <MsgThought
    v-for="thought in item.thoughts"
    :content="thought.content"
    :title="thought.title"
    :titleIcon="thought.titleIcon"
    :nodeName="thought.nodeName"
    :status="thought.status"
    :elapsed="thought.elapsed"
    :detailVisible="thought.detailVisible"
  />
  <!-- Markdown渲染 -->
  <msg-content
    :content="item.content"
    :is-final="item.isFinal"
    :is-print-animate="item.isPrintAnimate"
    :print-count="item.printCount"
    :is-md-expand="item.isMdExpand"
  />
</div>