lke-component 1.1.19-beta-13 → 1.1.19-beta-16

package/README.md

@@ -1,21 +1,224 @@
 # lke-component
 
-知识引擎大模型对话消息渲染组件，适用于基于vue2和react搭建的项目。
+[English](#english) | [中文](#中文)
 
-其它项目环境参考
-* 基于vue3的项目参考 [链接](https://www.npmjs.com/package/lke-component-vue3)
+---
 
-* 基于react的项目参考 [链接](#react)
+<a id="english"></a>
 
-* 小程序参考 [链接](https://www.npmjs.com/package/lke-utils)
+## English
+
+Message rendering component for LKE (Large Knowledge Engine) conversations, designed for Vue2 and React projects.
+
+For other environments:
+* Vue3 projects: [Link](https://www.npmjs.com/package/lke-component-vue3)
+* React projects: [Link](#usage-in-react-projects)
+* Mini Programs: [Link](https://www.npmjs.com/package/lke-utils)
+
+### 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
+
+```js
+// 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
+
+```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
+<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
+
+```jsx
+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>
+  );
+}
+```
 
-提供三个组件：LkeMsg、MsgContent、MsgLoading
+---
 
+<a id="中文"></a>
 
-MsgLoading： 展示模型加载中的状态
+## 中文
+
+知识引擎大模型对话消息渲染组件，适用于基于vue2和react搭建的项目。
+
+其它项目环境参考
+* 基于vue3的项目参考 [链接](https://www.npmjs.com/package/lke-component-vue3)
+* 基于react的项目参考 [链接](#在react项目中使用)
+* 小程序参考 [链接](https://www.npmjs.com/package/lke-utils)
+
+### 组件介绍
+
+提供四个组件：LkeMsg、MsgContent、MsgLoading、MsgThought
+
+**MsgLoading**： 展示模型加载中的状态
 
 ```
 props:
@@ -25,7 +228,8 @@ props:
   transferStatus: Boolean // 转人工状态
 ```
 
-MsgContent： 展示MD内容
+**MsgContent**： 展示MD内容
+
 ```
 props:
   content: String, // MD消息
@@ -38,7 +242,8 @@ props:
   linkify: Boolean // vue-markdown 的props透传，见示例
 ```
 
-LkeMsg： 两个组件的聚合态
+**LkeMsg**： 两个组件的聚合态
+
 ```
 props:
   LoadingIcon: String, // 加载中的图标CDN地址，如果没有传的话，默认不显示图标
@@ -57,28 +262,30 @@ props:
   hideCursorPoint: Boolean | undefined //是否显示打印的图标
 ```
 
-MsgThought： 渲染deepseek 的思考内容
+**MsgThought**： 渲染deepseek 的思考内容
+
 ```
 props:
   content: String // 思考内容 
-  title: String // 标题，如“思考完成"
+  title: String // 标题，如"思考完成"
   titleIcon: String // 图标小图标icon 大小16x16px
-  nodeName: String  // 可不填，如”deepseek“
+  nodeName: String  // 可不填，如"deepseek"
   status: String // 思考状态，可选值'success', 'failed', 'processing', 'stop' 
   elapsed: number // 思考花费时间, 毫秒，如17485
 ```
 
-## 在vue2项目里使用
+### 在vue2项目里使用
+
 1. install方式引入
 
-```
+```js
 // 在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" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" />
+<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" />
@@ -94,11 +301,12 @@ Vue.use(lkeComponent);
 />
 
 <!-- Markdown渲染 -->
-<MsgContent :isReplaceLinks="true" :loadingMessage="item.loading_message" :content="item.content" :isFinal="item.is_final" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" :printCount="1" :hideCursorPoint="true"/>
+<MsgContent :isReplaceLinks="true" :loadingMessage="item.loading_message" :content="item.content" :isFinal="item.is_final" :printCount="1" :hideCursorPoint="true"/>
 ```
 
 2. import方式引入
-```
+
+```js
 // 在需要使用此组件的vue文件，比如component.vue中引入
 import { MsgLoading, MsgContent, MsgThought } from '@tencent/lke-component';
 
@@ -114,9 +322,8 @@ export default {
 // 在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" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" />
+<MsgContent :isReplaceLinks="true" :loadingMessage="item.loading_message" :content="item.content" :isFinal="item.is_final" />
 
 <!-- deepseek 思考内容渲染 -->
 <MsgThought 
@@ -127,50 +334,34 @@ export default {
   :status="success"
   :elapsed="17485"
 />
-
 ```
 
+### 在react项目中使用
 
-
-
-## 在react项目中使用
-
-<div id="react"></div>
-
-```
+```jsx
 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: {}, // MD消息体的style
-    clazzTable: '', // MD消息体的 table 样式
-    clazzMd: '', // MD消息体的类名
-    anchorAttributes: {}, // 为链接添加自定义属性，如{target: '_blank'}
+    isFinal: true,
+    loadingMessage: false,
+    isReplaceLinks: false,
+    styleObj: {},
+    clazzTable: '',
+    clazzMd: '',
+    anchorAttributes: {},
     id: 1,
-    linkify: false // markdown-it 的props透传
+    linkify: false,
     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日，用户的问题只是问候，不需要时间相关的调整，所以直接回答即可。
-        `,
+      title: "思考完成",
+      titleIcon: 'test.png',
+      nodeName: "deepseek",
+      status: "success",
+      detailVisible: true,
+      elapsed: 17485,
+      content: `好的，我现在需要处理用户的问题...`,
     }]
   }]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lke-component",
-  "version": "1.1.19-beta-13",
+  "version": "1.1.19-beta-16",
   "main": "dist/lke-component.umd.js",
   "module": "dist/lke-component.esm.js",
   "files": [