lke-component 2.0.0-beta.9 → 2.0.1-beta.2

package/README.md

@@ -0,0 +1,401 @@
+# 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项目中使用)
+* 小程序参考 [链接](https://www.npmjs.com/package/lke-utils)
+
+### 组件介绍
+
+提供四个组件：LkeMsg、MsgContent、MsgLoading、MsgThought
+
+**MsgLoading**： 展示模型加载中的状态
+
+```
+props:
+  loadingIcon: String,  // 消息的ICON，如果有话显示Icon，没有的话不会显示Icon
+  loadingMessage: Boolean, // 是否处于加载中
+  loadingText: String, // 加载中的消息内容
+  transferStatus: Boolean // 转人工状态
+```
+
+**MsgContent**： 展示MD内容
+
+```
+props:
+  content: String, // MD消息
+  isFinal: Boolean, // 消息是否输出结束
+  isReplaceLinks: 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, // 是否显示模型输出的状态
+  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
+```
+
+### 在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" />
+
+<!-- 非转人工情况下, 展示临时[正在思考中]消息 -->
+<MsgLoading :loadingIcon="loadingIcon" :loadingMessage="item.loading_message" :loadingText="item.text" :transferStatus="transferStatus" />
+
+<!-- deepseek 思考内容渲染 -->
+<MsgThought
+  :content="思考内容"
+  :title="思考标题"
+  :titleIcon="test.png"
+  :nodeName="deepseek"
+  :status="success"
+  :elapsed="17485"
+/>
+
+<!-- Markdown渲染 -->
+<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';
+
+// components中注册此组件
+export default {
+    components: {
+        MsgContent,
+        MsgLoading,
+        MsgThought,
+    }
+}
+
+// 在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" />
+
+<!-- deepseek 思考内容渲染 -->
+<MsgThought 
+  :content="思考内容" 
+  :title="思考标题"
+  :titleIcon="test.png" 
+  :nodeName="deepseek" 
+  :status="success"
+  :elapsed="17485"
+/>
+```
+
+### 在react项目中使用
+
+```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: {},
+    clazzTable: '',
+    clazzMd: '',
+    anchorAttributes: {},
+    id: 1,
+    linkify: false,
+    thoughts: [{
+      title: "思考完成",
+      titleIcon: 'test.png',
+      nodeName: "deepseek",
+      status: "success",
+      detailVisible: true,
+      elapsed: 17485,
+      content: `好的，我现在需要处理用户的问题...`,
+    }]
+  }]);
+
+  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>
+  );
+}
+```