lke-component 1.0.125-beta.4 → 1.0.125-beta.8

package/README.md

@@ -1,77 +1,78 @@
 # lke-component
 
-npm install lke-component@^1.0.92
+知识引擎大模型对话消息渲染组件，适用于基于vue2和react搭建的项目。
 
-提供三个组件：LkeMsg、MsgContent、MsgLoading
+其它项目环境参考
+* 基于vue3的项目参考 [链接](https://www.npmjs.com/package/lke-component-vue3)
+
+* 基于react的项目参考 [链接](#react)
+
+* 小程序参考 [链接](https://www.npmjs.com/package/lke-utils)
 
-npm install lke-utils@^0.0.4
 
-提供一个小程序环境的转换方法： getMarkdownHtml
+## 组件介绍
 
+提供三个组件：LkeMsg、MsgContent、MsgLoading
 
-组件使用说明：
 
 MsgLoading： 展示模型加载中的状态
 
 ```
 props:
-        loadingIcon: String,  // 消息的ICON，如果有话显示Icon，没有的话不会显示Icon
-        loadingMessage: Boolean, // 是否处于加载中
-        loadingText: String, // 加载中的消息内容
-        transferStatus: Boolean // 转人工状态
+  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透传，见示例
+  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 的思考内容
-
+  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
+  content: String // 思考内容 
+  title: String // 标题，如“思考完成"
+  titleIcon: String // 图标小图标icon 大小16x16px
+  nodeName: String  // 可不填，如”deepseek“
+  status: String // 思考状态，可选值'success', 'failed', 'processing', 'stop' 
+  elapsed: number // 思考花费时间, 毫秒，如17485
 ```
 
-在vue项目里使用
+## 在vue2项目里使用
 1. install方式引入
 
 ```
@@ -79,16 +80,13 @@ props:
 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="思考内容"
@@ -106,13 +104,14 @@ Vue.use(lkeComponent);
 2. import方式引入
 ```
 // 在需要使用此组件的vue文件，比如component.vue中引入
-import { MsgLoading, MsgContent } from 'lke-component';
+import { MsgLoading, MsgContent, MsgThought } from '@tencent/lke-component';
 
 // components中注册此组件
 export default {
     components: {
         MsgContent,
         MsgLoading,
+        MsgThought,
     }
 }
 
@@ -122,30 +121,26 @@ export default {
 
 <!-- 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"
+/>
 
-getMarkdownHtml 提供一个方法，传入MD格式的字符串，返回Html格式的字符串。
+```
 
 
 
-import { getMarkdownHtml } from 'lke-utils';
 
-```
-/**
- * 传入MD格式的字符串，返回Html格式的字符串
- * @param {String} markdownStr markdown字符串
- * @param {Boolean} isMsgComplete 是否最终的消息
- * @param {Object} marked 引入 marked-it 返回的marked对象：import { marked } from '@/utils/marked.min.js';
- * @returns {String} html字符串
- */
- getMarkdownHtml(markdownStr, isMsgComplete, marked = null)
-```
+## 在react项目中使用
 
+<div id="react"></div>
 
-### 在react组件中使用
 ```
 import { MsgContent, MsgThought } from "lke-component/react";
 import "lke-component/css";