lke-component 1.0.125-beta.4

package/README.md

@@ -0,0 +1,223 @@
+# lke-component
+
+npm install lke-component@^1.0.92
+
+提供三个组件：LkeMsg、MsgContent、MsgLoading
+
+npm install lke-utils@^0.0.4
+
+提供一个小程序环境的转换方法： getMarkdownHtml
+
+
+组件使用说明：
+
+MsgLoading： 展示模型加载中的状态
+
+```
+props:
+        loadingIcon: String,  // 消息的ICON，如果有话显示Icon，没有的话不会显示Icon
+        loadingMessage: Boolean, // 是否处于加载中
+        loadingText: String, // 加载中的消息内容
+        transferStatus: Boolean // 转人工状态
+```
+
+MsgContent： 展示MD内容
+
+```
+props:
+        content: String, // MD消息
+        isFinal: Boolean, // 消息是否输出结束
+        loadingMessage: Boolean, // 是否加载中
+        isMdExpand: Boolean, // 是否展开所有的消息
+        isReplaceLinks: Boolean, // 是否替换链接为第三方提示
+        isPrintAnimate: 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, // 是否显示模型输出的状态
+        isPrintAnimate: 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
+```
+
+在vue项目里使用
+1. install方式引入
+
+```
+// 在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" :isMdExpand="item.isMdExpand" :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" />
+
+
+<!-- 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" :isMdExpand="item.isMdExpand" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" :isPrintAnimate="true" :printCount="1" :hideCursorPoint="true"/>
+```
+
+2. import方式引入
+```
+// 在需要使用此组件的vue文件，比如component.vue中引入
+import { MsgLoading, MsgContent } from 'lke-component';
+
+// components中注册此组件
+export default {
+    components: {
+        MsgContent,
+        MsgLoading,
+    }
+}
+
+// 在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" :isMdExpand="item.isMdExpand" :clazzMd="`question-text ${webIMSource === 'client' && isMobile ? 'question-text-mobile' : ''}`" :styleObj="{ 'max-width': webIMSource === 'client' && isMobile ? '352px' : '680px' }" />
+```
+
+
+小程序转换方法使用说明：
+
+getMarkdownHtml 提供一个方法，传入MD格式的字符串，返回Html格式的字符串。
+
+
+
+import { getMarkdownHtml } from 'lke-utils';
+
+```
+/**
+ * 传入MD格式的字符串，返回Html格式的字符串
+ * @param {String} markdownStr markdown字符串
+ * @param {Boolean} isMsgComplete 是否最终的消息
+ * @param {Object} marked 引入 marked-it 返回的marked对象：import { marked } from '@/utils/marked.min.js';
+ * @returns {String} html字符串
+ */
+ getMarkdownHtml(markdownStr, isMsgComplete, marked = null)
+```
+
+
+### 在react组件中使用
+```
+import { MsgContent, MsgThought } from "lke-component/react";
+import "lke-component/css";
+
+const App = () => {
+  const [list, setList] = useState([{
+    content: "天气不错哦<b>?</b>",
+    isFinal: true, // 消息是否输出结束
+    loadingMessage: false, // 是否加载中
+    isMdExpand: false, // 是否展开所有的消息
+    isReplaceLinks: false, // 是否替换链接为第三方提示
+    isPrintAnimate: false, // 是否显示打字的效果
+    styleObj: {}, // MD消息体的style
+    clazzTable: '', // MD消息体的 table 样式
+    clazzMd: '', // MD消息体的类名
+    anchorAttributes: {}, // 为链接添加自定义属性，如{target: '_blank'}
+    id: 1,
+    linkify: false // markdown-it 的props透传
+    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日，用户的问题只是问候，不需要时间相关的调整，所以直接回答即可。
+        `,
+    }]
+  }]);
+
+  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}
+                isPrintAnimate={item.isPrintAnimate}
+                isReplaceLinks={item.isReplaceLinks}
+                isMdExpand={item.isMdExpand}
+            />
+        ))}
+    </div>
+  );
+}
+```

package/dist/demo.html

@@ -0,0 +1,8 @@
+<meta charset="utf-8">
+<title>lke-component demo</title>
+<script src="./lke-component.umd.js"></script>
+
+
+<script>
+console.log(lke-component)
+</script>