知识引擎大模型对话消息渲染组件，适用于基于vue2和react搭建的项目。
其它项目环境参考
提供三个组件：LkeMsg、MsgContent、MsgLoading
MsgLoading： 展示模型加载中的状态
props:
loadingIcon: String, // 消息的ICON，如果有话显示Icon，没有的话不会显示Icon
loadingMessage: Boolean, // 是否处于加载中
loadingText: String, // 加载中的消息内容
transferStatus: Boolean // 转人工状态
MsgContent： 展示MD内容
props:
content: String, // MD消息
isFinal: Boolean, // 消息是否输出结束
loadingMessage: Boolean, // 是否加载中
isMdExpand: Boolean, // 是否展开所有的消息
isReplaceLinks: Boolean, // 是否替换链接为第三方提示
isPrintAnimate: Boolean, // 是否显示打字的图标
styleObj: Object, // MD消息体的style
clazzTable: String, // MD消息体的 table 样式 （后面会加上默认统一样式），props方便修改
clazzMd: String, // MD消息体的class
anchorAttributes: Object, // vue-markdown 的props透传，见示例
linkify: Boolean // vue-markdown 的props透传，见示例
LkeMsg： 两个组件的聚合态
props:
LoadingIcon: String, // 加载中的图标CDN地址，如果没有传的话，默认不显示图标
type: String, // 当前消息的类型，type透传，一般为 reply 、 token_stat
isReplaceLinks: Boolean, // 是否替换为大模型的第三方链接提示
showProcedures: Boolean, // 是否显示模型输出的状态
isPrintAnimate: Boolean, // 是否显示打字效果
transferStatus: Boolean, // 转人工状态
clazz: String, //外层包裹的div的类名
item: Object, // 当前的消息内容
styleObj: Object, // MD消息体的style
clazzTable: String, // MD消息体的 table 样式 （后面会加上默认统一样式），props方便修改， 组件自带默认样式：table-style、table
clazzMd: String, // MD消息体的class， 组件自带默认样式：answer-md
anchorAttributes: Object, // vue-markdown 的props透传，见示例
linkify: Boolean //vue-markdown 的props透传，见示例
printCount: Number | undefined //每次打印的字数用于控制时间
hideCursorPoint: Boolean | undefined //是否显示打印的图标
MsgThought： 渲染deepseek 的思考内容
props:
content: String // 思考内容
title: String // 标题，如“思考完成"
titleIcon: String // 图标小图标icon 大小16x16px
nodeName: String // 可不填，如”deepseek“
status: String // 思考状态，可选值'success', 'failed', 'processing', 'stop'
elapsed: number // 思考花费时间, 毫秒，如17485
- install方式引入
// 在vue的入口文件引入组件库
import lkeComponent from 'lke-component';
Vue.use(lkeComponent);
// 在对应的vue页面里面使用组件
<!-- Loading切换 + Markdown渲染 -->
<LkeMsg :loadingIcon="loadingIcon" :loadingMessage="item.loading_message" :loadingText="item.text" :transferStatus="transferStatus" :isReplaceLinks="true" :content="item.content" :isFinal="item.is_final" :isMdExpand="item.isMdExpand" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" />
<!-- 非转人工情况下, 展示临时[正在思考中]消息 -->
<MsgLoading :loadingIcon="loadingIcon" :loadingMessage="item.loading_message" :loadingText="item.text" :transferStatus="transferStatus" />
<!-- deepseek 思考内容渲染 -->
<MsgThought
:content="思考内容"
:title="思考标题"
:titleIcon="test.png"
:nodeName="deepseek"
:status="success"
:elapsed="17485"
/>
<!-- Markdown渲染 -->
<MsgContent :isReplaceLinks="true" :loadingMessage="item.loading_message" :content="item.content" :isFinal="item.is_final" :isMdExpand="item.isMdExpand" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" :isPrintAnimate="true" :printCount="1" :hideCursorPoint="true"/>
- import方式引入
// 在需要使用此组件的vue文件，比如component.vue中引入
import { MsgLoading, MsgContent, MsgThought } from '@tencent/lke-component';
// components中注册此组件
export default {
components: {
MsgContent,
MsgLoading,
MsgThought,
}
}
// 在template标签中使用
<MsgLoading :loadingIcon="loadingIcon" :loadingMessage="item.loading_message" :loadingText="item.text" :transferStatus="transferStatus" />
<!-- Markdown渲染 -->
<MsgContent :isReplaceLinks="true" :loadingMessage="item.loading_message" :content="item.content" :isFinal="item.is_final" :isMdExpand="item.isMdExpand" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" />
<!-- deepseek 思考内容渲染 -->
<MsgThought
:content="思考内容"
:title="思考标题"
:titleIcon="test.png"
:nodeName="deepseek"
:status="success"
:elapsed="17485"
/>
import { MsgContent, MsgThought } from "lke-component/react";
import "lke-component/css";
const App = () => {
const [list, setList] = useState([{
content: "天气不错哦<b>?</b>",
isFinal: true, // 消息是否输出结束
loadingMessage: false, // 是否加载中
isMdExpand: false, // 是否展开所有的消息
isReplaceLinks: false, // 是否替换链接为第三方提示
isPrintAnimate: false, // 是否显示打字的效果
styleObj: {}, // MD消息体的style
clazzTable: '', // MD消息体的 table 样式
clazzMd: '', // MD消息体的类名
anchorAttributes: {}, // 为链接添加自定义属性，如{target: '_blank'}
id: 1,
linkify: false // markdown-it 的props透传
thoughts: [{
title: "思考完成", // 标题
titleIcon: 'test.png', // 标题旁的icon，后端一般返回 emoji 图标地址
nodeName: "deepseek", // 非必传，显示大模型名称
status: "success", // 思考状态，用来显示不同状态 icon
detailVisible: true, // 控制思考内容区域是否显示，配合onTitleClick，可以控制思考内容展开和收起
elapsed: 17485, // 思考时间，单位 ms
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日，用户的问题只是问候，不需要时间相关的调整，所以直接回答即可。
`,
}]
}]);
return (
<div className="main">
{list.map((item, index) => (
<div>
{item.thoughts.map((thought, index) => (
<MsgThought
key={index}
detailVisible={thought.detailVisible}
content={thought.content}
title={thought.title}
titleIcon={thought.titleIcon}
nodeName={thought.nodeName}
status={thought.status}
elapsed={thought.elapsed}
onTitleClick={() => void 0}
/>
))}
</div>
<MsgContent
key={id}
content={item.content}
isFinal={item.isFinal}
styleObj={item.styleObj}
clazzTable={item.clazzTable}
clazzMd={item.clazzMd}
anchorAttributes={item.anchorAttributes}
linkify={item.linkify}
isPrintAnimate={item.isPrintAnimate}
isReplaceLinks={item.isReplaceLinks}
isMdExpand={item.isMdExpand}
/>
))}
</div>
);
}