lke-component 1.1.19-beta-13 → 1.1.19-beta-15

package/README.en.md

@@ -0,0 +1,206 @@
+# 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>
+  );
+}
+```

package/README.md

@@ -1,21 +1,19 @@
 # lke-component
 
+[English](./README.en.md) | 中文
+
 知识引擎大模型对话消息渲染组件，适用于基于vue2和react搭建的项目。
 
 其它项目环境参考
 * 基于vue3的项目参考 [链接](https://www.npmjs.com/package/lke-component-vue3)
-
-* 基于react的项目参考 [链接](#react)
-
+* 基于react的项目参考 [链接](#在react项目中使用)
 * 小程序参考 [链接](https://www.npmjs.com/package/lke-utils)
 
-
 ## 组件介绍
 
-提供三个组件：LkeMsg、MsgContent、MsgLoading
-
+提供四个组件：LkeMsg、MsgContent、MsgLoading、MsgThought
 
-MsgLoading： 展示模型加载中的状态
+**MsgLoading**： 展示模型加载中的状态
 
 ```
 props:
@@ -25,7 +23,8 @@ props:
   transferStatus: Boolean // 转人工状态
 ```
 
-MsgContent： 展示MD内容
+**MsgContent**： 展示MD内容
+
 ```
 props:
   content: String, // MD消息
@@ -38,7 +37,8 @@ props:
   linkify: Boolean // vue-markdown 的props透传，见示例
 ```
 
-LkeMsg： 两个组件的聚合态
+**LkeMsg**： 两个组件的聚合态
+
 ```
 props:
   LoadingIcon: String, // 加载中的图标CDN地址，如果没有传的话，默认不显示图标
@@ -57,21 +57,23 @@ 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项目里使用
+
 1. install方式引入
 
-```
+```js
 // 在vue的入口文件引入组件库
 import lkeComponent from 'lke-component';
 Vue.use(lkeComponent);
@@ -98,7 +100,8 @@ Vue.use(lkeComponent);
 ```
 
 2. import方式引入
-```
+
+```js
 // 在需要使用此组件的vue文件，比如component.vue中引入
 import { MsgLoading, MsgContent, MsgThought } from '@tencent/lke-component';
 
@@ -114,7 +117,6 @@ 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' }" />
 
@@ -127,17 +129,11 @@ export default {
   :status="success"
   :elapsed="17485"
 />
-
 ```
 
-
-
-
 ## 在react项目中使用
 
-<div id="react"></div>
-
-```
+```jsx
 import { MsgContent, MsgThought } from "lke-component/react";
 import "lke-component/css";
 
@@ -152,7 +148,7 @@ const App = () => {
     clazzMd: '', // MD消息体的类名
     anchorAttributes: {}, // 为链接添加自定义属性，如{target: '_blank'}
     id: 1,
-    linkify: false // markdown-it 的props透传
+    linkify: false, // markdown-it 的props透传
     thoughts: [{
       title: "思考完成", // 标题
       titleIcon: 'test.png', // 标题旁的icon，后端一般返回 emoji 图标地址
@@ -160,14 +156,14 @@ const App = () => {
       status: "success", // 思考状态，用来显示不同状态 icon
       detailVisible: true, // 控制思考内容区域是否显示，配合onTitleClick，可以控制思考内容展开和收起
       elapsed: 17485, // 思考时间，单位 ms
-      content: ` // // 思考内容
-        好的，我现在需要处理用户的问题“你好”，并根据提供的搜索结果生成一个回答，同时正确引用来源。首先，用户的问题是一个常见的问候语，所以答案应该解释“你好”的含义和用法。
+      content: ` // 思考内容
+        好的，我现在需要处理用户的问题"你好"，并根据提供的搜索结果生成一个回答，同时正确引用来源。首先，用户的问题是一个常见的问候语，所以答案应该解释"你好"的含义和用法。
 
-        看一下搜索结果的各个条目。结果1到4、7、8都是关于“你好”这个词语的解释，包括它的拼音、用法、近义词等。而结果5、6、9是关于韩国电影《你好》的信息，和用户的问题无关，可以忽略。
+        看一下搜索结果的各个条目。结果1到4、7、8都是关于"你好"这个词语的解释，包括它的拼音、用法、近义词等。而结果5、6、9是关于韩国电影《你好》的信息，和用户的问题无关，可以忽略。
 
-        接下来，我需要从相关的结果中提取关键信息。例如，结果1提到“你好”是用于礼貌的打招呼或问候，适用于非熟人群体。结果2和3也给出了类似的解释，并指出它是汉语中的常用敬语。结果4详细介绍了“你好”的不同解释，包括网络解释和基础解释。结果7和8补充了其作为打招呼的敬语用法。
+        接下来，我需要从相关的结果中提取关键信息。例如，结果1提到"你好"是用于礼貌的打招呼或问候，适用于非熟人群体。结果2和3也给出了类似的解释，并指出它是汉语中的常用敬语。结果4详细介绍了"你好"的不同解释，包括网络解释和基础解释。结果7和8补充了其作为打招呼的敬语用法。
 
-        需要将这些信息整合成一个连贯的回答，并用正确的引用标注。例如，综合结果1、2、3、4、7、8的内容，说明“你好”的基本含义、用法以及适用场合。注意不要提到电影相关的信息，因为与问题无关。
+        需要将这些信息整合成一个连贯的回答，并用正确的引用标注。例如，综合结果1、2、3、4、7、8的内容，说明"你好"的基本含义、用法以及适用场合。注意不要提到电影相关的信息，因为与问题无关。
 
         最后，确保回答简洁明了，使用中文口语化表达，避免使用Markdown格式，并在适当的位置添加引用，如[1](@ref)、[2](@ref)等。同时，根据当前时间2025年2月19日，用户的问题只是问候，不需要时间相关的调整，所以直接回答即可。
         `,

package/package.json

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