lke-component

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

Components

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

Usage in Vue2 Projects

1. Install and import

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

// Use in Vue pages
<!-- Loading toggle + Markdown rendering -->
<LkeMsg :loadingIcon="loadingIcon" :loadingMessage="item.loading_message" :loadingText="item.text" :transferStatus="transferStatus" :isReplaceLinks="true" :content="item.content" :isFinal="item.is_final" />

<!-- Show temporary [Thinking...] message when not transferring to human -->
<MsgLoading :loadingIcon="loadingIcon" :loadingMessage="item.loading_message" :loadingText="item.text" :transferStatus="transferStatus" />

<!-- DeepSeek thinking content rendering -->
<MsgThought
  :content="thinkingContent"
  :title="thinkingTitle"
  :titleIcon="test.png"
  :nodeName="deepseek"
  :status="success"
  :elapsed="17485"
/>

<!-- Markdown rendering -->
<MsgContent :isReplaceLinks="true" :loadingMessage="item.loading_message" :content="item.content" :isFinal="item.is_final" :printCount="1" :hideCursorPoint="true"/>

2. Import method

// 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
<MsgLoading :loadingIcon="loadingIcon" :loadingMessage="item.loading_message" :loadingText="item.text" :transferStatus="transferStatus" />

<!-- Markdown rendering -->
<MsgContent :isReplaceLinks="true" :loadingMessage="item.loading_message" :content="item.content" :isFinal="item.is_final" />

<!-- DeepSeek thinking content rendering -->
<MsgThought 
  :content="thinkingContent" 
  :title="thinkingTitle"
  :titleIcon="test.png" 
  :nodeName="deepseek" 
  :status="success"
  :elapsed="17485"
/>

Usage in React Projects

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

const App = () => {
  const [list, setList] = useState([{
    content: "Nice weather today<b>?</b>",
    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 (
    <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}
                isReplaceLinks={item.isReplaceLinks}
            />
        ))}
    </div>
  );
}

中文

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

其它项目环境参考

• 基于vue3的项目参考 链接
• 基于react的项目参考 链接
• 小程序参考 链接

组件介绍

提供四个组件：LkeMsg、MsgContent、MsgLoading、MsgThought

MsgLoading： 展示模型加载中的状态

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

在vue2项目里使用

1. 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" />

<!-- 非转人工情况下, 展示临时[正在思考中]消息 -->
<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" :printCount="1" :hideCursorPoint="true"/>

2. 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" />

<!-- deepseek 思考内容渲染 -->
<MsgThought 
  :content="思考内容" 
  :title="思考标题"
  :titleIcon="test.png" 
  :nodeName="deepseek" 
  :status="success"
  :elapsed="17485"
/>

在react项目中使用

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

const App = () => {
  const [list, setList] = useState([{
    content: "天气不错哦<b>?</b>",
    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 (
    <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}
                isReplaceLinks={item.isReplaceLinks}
            />
        ))}
    </div>
  );
}