lke-component

English | 中文

---

English

Message rendering component for LKE (Large Knowledge Engine) conversations, designed for Vue2 and React projects.

For other environments:
* Vue3 projects: Link
* React projects: Link
* Mini Programs: Link

$3

Four components are provided: LkeMsg, MsgContent, MsgLoading, MsgThought

MsgLoading: Shows model loading state

``
props:
loadingIcon: String, // Message icon, displays if provided
loadingMessage: Boolean, // Whether in loading state
loadingText: String, // Loading message content
transferStatus: Boolean // Transfer to human agent status
`

MsgContent: Renders Markdown content

`
props:
content: String, // Markdown message
isFinal: Boolean, // Whether the message output is complete
isReplaceLinks: Boolean, // Whether to replace links with third-party prompts
styleObj: Object, // Style object for MD message body
clazzTable: String, // Table class for MD message body (default styles will be added)
clazzMd: String, // Class for MD message body
anchorAttributes: Object, // Props passed to vue-markdown, see example
linkify: Boolean // Props passed to vue-markdown, see example
`

LkeMsg: Aggregated component combining the above

`
props:
LoadingIcon: String, // CDN URL for loading icon, not displayed if not provided
type: String, // Current message type, usually 'reply' or 'token_stat'
isReplaceLinks: Boolean, // Whether to replace with LLM third-party link prompts
showProcedures: Boolean, // Whether to show model output status
transferStatus: Boolean, // Transfer to human agent status
clazz: String, // Class name for outer wrapper div
item: Object, // Current message content
styleObj: Object, // Style object for MD message body
clazzTable: String, // Table class for MD message body, default styles: table-style, table
clazzMd: String, // Class for MD message body, default style: answer-md
anchorAttributes: Object, // Props passed to vue-markdown, see example
linkify: Boolean // Props passed to vue-markdown, see example
printCount: Number | undefined // Characters per print for timing control
hideCursorPoint: Boolean | undefined // Whether to show print cursor icon
`

MsgThought: Renders DeepSeek thinking content

`
props:
content: String // Thinking content
title: String // Title, e.g., "Thinking Complete"
titleIcon: String // Small icon, 16x16px
nodeName: String // Optional, e.g., "deepseek"
status: String // Thinking status: 'success', 'failed', 'processing', 'stop'
elapsed: number // Time spent thinking in milliseconds, e.g., 17485
`

$3

1. Install and import

`js
// Import in Vue entry file
import lkeComponent from 'lke-component';
Vue.use(lkeComponent);

// Use in Vue pages




:content="thinkingContent"
:title="thinkingTitle"
:titleIcon="test.png"
:nodeName="deepseek"
:status="success"
:elapsed="17485"
/>



`

2. Import method

`js
// Import in Vue file, e.g., component.vue
import { MsgLoading, MsgContent, MsgThought } from '@tencent/lke-component';

// Register components
export default {
components: {
MsgContent,
MsgLoading,
MsgThought,
}
}

// Use in template



:content="thinkingContent"
:title="thinkingTitle"
:titleIcon="test.png"
:nodeName="deepseek"
:status="success"
:elapsed="17485"
/>
`

$3

`jsx
import { MsgContent, MsgThought } from "lke-component/react";
import "lke-component/css";

const App = () => {
const [list, setList] = useState([{
content: "Nice weather today?",
isFinal: true,
loadingMessage: false,
isReplaceLinks: false,
styleObj: {},
clazzTable: '',
clazzMd: '',
anchorAttributes: {},
id: 1,
linkify: false,
thoughts: [{
title: "Thinking Complete",
titleIcon: 'test.png',
nodeName: "deepseek",
status: "success",
detailVisible: true,
elapsed: 17485,
content: Okay, I need to process the user's question...,
}]
}]);

return (


`
props:
loadingIcon: String, // 消息的ICON，如果有话显示Icon，没有的话不会显示Icon
loadingMessage: Boolean, // 是否处于加载中
loadingText: String, // 加载中的消息内容
transferStatus: Boolean // 转人工状态
`

MsgContent： 展示MD内容

`
props:
content: String, // MD消息
isFinal: Boolean, // 消息是否输出结束
isReplaceLinks: 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, // 是否显示模型输出的状态
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
`

$3

1. install方式引入

`js
// 在vue的入口文件引入组件库
import lkeComponent from 'lke-component';
Vue.use(lkeComponent);

// 在对应的vue页面里面使用组件




:content="思考内容"
:title="思考标题"
:titleIcon="test.png"
:nodeName="deepseek"
:status="success"
:elapsed="17485"
/>



`

2. import方式引入

`js
// 在需要使用此组件的vue文件，比如component.vue中引入
import { MsgLoading, MsgContent, MsgThought } from '@tencent/lke-component';

// components中注册此组件
export default {
components: {
MsgContent,
MsgLoading,
MsgThought,
}
}

// 在template标签中使用



:content="思考内容"
:title="思考标题"
:titleIcon="test.png"
:nodeName="deepseek"
:status="success"
:elapsed="17485"
/>
`

$3

`jsx
import { MsgContent, MsgThought } from "lke-component/react";
import "lke-component/css";

const App = () => {
const [list, setList] = useState([{
content: "天气不错哦?",
isFinal: true,
loadingMessage: false,
isReplaceLinks: false,
styleObj: {},
clazzTable: '',
clazzMd: '',
anchorAttributes: {},
id: 1,
linkify: false,
thoughts: [{
title: "思考完成",
titleIcon: 'test.png',
nodeName: "deepseek",
status: "success",
detailVisible: true,
elapsed: 17485,
content: 好的，我现在需要处理用户的问题...,
}]
}]);

return (