lke-component 1.1.19-beta-15 → 1.1.19-beta-16

package/README.md

@@ -1,6 +1,211 @@
 # lke-component
 
-[English](./README.en.md) | 中文
+[English](#english) | [中文](#中文)
+
+---
+
+<a id="english"></a>
+
+## 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>
+  );
+}
+```
+
+---
+
+<a id="中文"></a>
+
+## 中文
 
 知识引擎大模型对话消息渲染组件，适用于基于vue2和react搭建的项目。
 
@@ -9,7 +214,7 @@
 * 基于react的项目参考 [链接](#在react项目中使用)
 * 小程序参考 [链接](https://www.npmjs.com/package/lke-utils)
 
-## 组件介绍
+### 组件介绍
 
 提供四个组件：LkeMsg、MsgContent、MsgLoading、MsgThought
 
@@ -69,7 +274,7 @@ props:
   elapsed: number // 思考花费时间, 毫秒，如17485
 ```
 
-## 在vue2项目里使用
+### 在vue2项目里使用
 
 1. install方式引入
 
@@ -80,7 +285,7 @@ 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" />
@@ -96,7 +301,7 @@ 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方式引入
@@ -118,7 +323,7 @@ export default {
 <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 
@@ -131,7 +336,7 @@ export default {
 />
 ```
 
-## 在react项目中使用
+### 在react项目中使用
 
 ```jsx
 import { MsgContent, MsgThought } from "lke-component/react";
@@ -140,33 +345,23 @@ 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-15",
+  "version": "1.1.19-beta-16",
   "main": "dist/lke-component.umd.js",
   "module": "dist/lke-component.esm.js",
   "files": [

package/README.en.md

@@ -1,206 +0,0 @@
-# lke-component
-
-English | [中文](./README.md)
-
-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" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" />
-
-<!-- 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" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" :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" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" />
-
-<!-- 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, // Whether message output is complete
-    loadingMessage: false, // Whether loading
-    isReplaceLinks: false, // Whether to replace links with third-party prompts
-    styleObj: {}, // Style object for MD message body
-    clazzTable: '', // Table class for MD message body
-    clazzMd: '', // Class for MD message body
-    anchorAttributes: {}, // Custom attributes for links, e.g., {target: '_blank'}
-    id: 1,
-    linkify: false, // Props passed to markdown-it
-    thoughts: [{
-      title: "Thinking Complete", // Title
-      titleIcon: 'test.png', // Icon next to title, usually emoji icon URL from backend
-      nodeName: "deepseek", // Optional, shows LLM name
-      status: "success", // Thinking status, shows different status icons
-      detailVisible: true, // Controls thinking content visibility, use with onTitleClick for expand/collapse
-      elapsed: 17485, // Thinking time in ms
-      content: ` // Thinking content
-        Okay, I need to process the user's question "Hello" and generate a response based on the provided search results while correctly citing sources. First, the user's question is a common greeting, so the answer should explain the meaning and usage of "Hello".
-
-        Looking at the search result entries. Results 1 to 4, 7, 8 are all about the explanation of the word "Hello", including its pinyin, usage, synonyms, etc. Results 5, 6, 9 are about the Korean movie "Hello", which is irrelevant to the user's question and can be ignored.
-
-        Next, I need to extract key information from the relevant results. For example, result 1 mentions that "Hello" is used for polite greetings, suitable for non-acquaintances. Results 2 and 3 also give similar explanations, pointing out that it is a common honorific in Chinese. Result 4 introduces different interpretations of "Hello" in detail, including network interpretation and basic interpretation. Results 7 and 8 supplement its usage as a greeting honorific.
-
-        This information needs to be integrated into a coherent answer with correct citation annotations. For example, combining the content of results 1, 2, 3, 4, 7, 8, explain the basic meaning, usage and applicable occasions of "Hello". Be careful not to mention movie-related information as it is irrelevant to the question.
-
-        Finally, ensure the answer is concise and clear, using colloquial Chinese expression, avoiding Markdown format, and adding citations at appropriate places, such as [1](@ref), [2](@ref), etc.
-        `,
-    }]
-  }]);
-
-  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>
-  );
-}
-```