lke-component 1.1.19-beta-16 → 1.1.20-beta-2

package/README.md

@@ -1,224 +1,21 @@
 # lke-component
 
-[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搭建的项目。
 
 其它项目环境参考
 * 基于vue3的项目参考 [链接](https://www.npmjs.com/package/lke-component-vue3)
-* 基于react的项目参考 [链接](#在react项目中使用)
+
+* 基于react的项目参考 [链接](#react)
+
 * 小程序参考 [链接](https://www.npmjs.com/package/lke-utils)
 
-### 组件介绍
 
-提供四个组件：LkeMsg、MsgContent、MsgLoading、MsgThought
+## 组件介绍
+
+提供三个组件：LkeMsg、MsgContent、MsgLoading
 
-**MsgLoading**： 展示模型加载中的状态
+
+MsgLoading： 展示模型加载中的状态
 
 ```
 props:
@@ -228,8 +25,7 @@ props:
   transferStatus: Boolean // 转人工状态
 ```
 
-**MsgContent**： 展示MD内容
-
+MsgContent： 展示MD内容
 ```
 props:
   content: String, // MD消息
@@ -242,8 +38,7 @@ props:
   linkify: Boolean // vue-markdown 的props透传，见示例
 ```
 
-**LkeMsg**： 两个组件的聚合态
-
+LkeMsg： 两个组件的聚合态
 ```
 props:
   LoadingIcon: String, // 加载中的图标CDN地址，如果没有传的话，默认不显示图标
@@ -262,30 +57,28 @@ 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" />
+<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' }" />
 
 <!-- 非转人工情况下, 展示临时[正在思考中]消息 -->
 <MsgLoading :loadingIcon="loadingIcon" :loadingMessage="item.loading_message" :loadingText="item.text" :transferStatus="transferStatus" />
@@ -301,12 +94,11 @@ Vue.use(lkeComponent);
 />
 
 <!-- Markdown渲染 -->
-<MsgContent :isReplaceLinks="true" :loadingMessage="item.loading_message" :content="item.content" :isFinal="item.is_final" :printCount="1" :hideCursorPoint="true"/>
+<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方式引入
-
-```js
+```
 // 在需要使用此组件的vue文件，比如component.vue中引入
 import { MsgLoading, MsgContent, MsgThought } from '@tencent/lke-component';
 
@@ -322,8 +114,9 @@ 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" />
+<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 思考内容渲染 -->
 <MsgThought 
@@ -334,34 +127,50 @@ export default {
   :status="success"
   :elapsed="17485"
 />
+
 ```
 
-### 在react项目中使用
 
-```jsx
+
+
+## 在react项目中使用
+
+<div id="react"></div>
+
+```
 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: {},
+    isFinal: true, // 消息是否输出结束
+    loadingMessage: false, // 是否加载中
+    isReplaceLinks: false, // 是否替换链接为第三方提示
+    styleObj: {}, // MD消息体的style
+    clazzTable: '', // MD消息体的 table 样式
+    clazzMd: '', // MD消息体的类名
+    anchorAttributes: {}, // 为链接添加自定义属性，如{target: '_blank'}
     id: 1,
-    linkify: false,
+    linkify: false // markdown-it 的props透传
     thoughts: [{
-      title: "思考完成",
-      titleIcon: 'test.png',
-      nodeName: "deepseek",
-      status: "success",
-      detailVisible: true,
-      elapsed: 17485,
-      content: `好的，我现在需要处理用户的问题...`,
+      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日，用户的问题只是问候，不需要时间相关的调整，所以直接回答即可。
+        `,
     }]
   }]);
 

package/dist/lke-component.common.js.LICENSE.txt

@@ -34,4 +34,4 @@ PERFORMANCE OF THIS SOFTWARE.
 
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */