askbot-dragon 1.6.21 → 1.6.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "askbot-dragon",
-  "version": "1.6.21",
+  "version": "1.6.22",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/AnswerDocknowledge.vue

@@ -17,7 +17,28 @@
                     <p v-html="msg.content.text"></p>
                 </template>
                 <template v-else-if="msg.content.renderType == 2">
-                    <markDownText :chainValues="msg.content.text" :isHistory="isHistory"></markDownText>
+                    <!-- <markDownText :chainValues="msg.content.text" :isHistory="isHistory"></markDownText> -->
+                    <markDownText
+                        :chainValues="msg.content.text || ''"
+                        :whetherRequestStream="msg.content.whetherRequestStream"
+                        @sseOtherInfo="sseOtherInfo"
+                        @answerDocKnowledgeFn="answerDocKnowledgeFn"
+                        :streamRequestUrl="msg.content.streamRequestUrl"
+                        :msgId="msg.id"
+                        :isHistory="isHistory">
+                    </markDownText>
+                </template>
+                <template v-else-if="msg.content.renderType == null">
+                    <!-- <markDownText :chainValues="msg.content.text" :isHistory="isHistory"></markDownText> -->
+                    <markDownText
+                        :chainValues="msg.content.text || ''"
+                        :whetherRequestStream="msg.content.whetherRequestStream"
+                        @sseOtherInfo="sseOtherInfo"
+                        @answerDocKnowledgeFn="answerDocKnowledgeFn"
+                        :streamRequestUrl="msg.content.streamRequestUrl"
+                        :msgId="msg.id"
+                        :isHistory="isHistory">
+                    </markDownText>
                 </template>
                 <template v-else>{{ msg.content.text }}</template>
             </div>
@@ -75,7 +96,7 @@
                         </div>
                     </div>
                 </template>
-                <template v-if="msg.content.type == 0">
+                <template v-if="msg.content.type == 0 || msg.content.type == 2">
                     <div v-for="(item, itemIndex) in  msg.content.list" :key="itemIndex" class="ad-list-cell-recognition" :id="item.knowledgeId + knowledgeIndex">
                         <div class="alc-source-name" @click="lookAttach(item.url, item, $event)">
                             <img class="alc-title-icon" height="18px" width="18px" :src="getIconSrc(item)" alt srcset />
@@ -328,6 +349,24 @@ export default {
         }
     },
     methods: {
+        answerDocKnowledgeFn(){
+            console.log(
+                "answerDocKnowledgeFn 2"
+            );
+            this.$emit('answerDocKnowledgeFn');
+        },
+        // 知识类型消息 推荐、关联文档、图片
+        sseOtherInfo(msgId, eventId, data){
+            if (eventId === "matched") {
+                console.log("matched: ", this.msg.content.type);
+
+                if (JSON.parse(data.content).length > 0) {
+                    this.$set(this.msg.content, "list", JSON.parse(data.content));
+                }
+            } else {
+                this.$emit("sseOtherInfo",msgId, eventId, data);
+            }
+        },
         getIconSrc (element) {
             if ((element.format === "txt" || element.format === "html") && element.source === "WECHAT") {
                 return require("../assets/image/filtType/wechat.png")

package/src/components/markDownText.vue

@@ -1,176 +1,341 @@
 <template>
     <div @click="lookImage">
-        <vue-markdown class="mark_down" :source="typedContent" :ref="'markdown' + msgId">
-        </vue-markdown>
-        <div v-if="showPreview">
-            <img-view :url-list="imgList" @closeViewer="closeViewer"></img-view>
-        </div>
+      <vue-markdown class="mark_down" :source="typedContent" :ref="'markdown' + msgId">
+      </vue-markdown>
+      <div v-if="showPreview">
+        <img-view :url-list="imgList" @closeViewer="closeViewer"></img-view>
+      </div>
     </div>
-</template>
-
-<script>
-import VueMarkdown from "vue-markdown";
-import ImgView from "./imgView.vue";
-
-export default {
+  
+  </template>
+  
+  <script>
+  import VueMarkdown from 'vue-markdown';
+  import ImgView from "./imgView";
+//   import Typed from "typed.js";
+  
+  export default {
     name: "markDownText",
     data() {
-        return {
-            typedContent: "",
-            typingSpeed: 15,
-            showPreview: false,
-            imgList: [],
-        };
+      return {
+        typedContent: "",
+        typingSpeed: 15,
+        showPreview: false,
+        imgList: [],
+        isManualScroll: false,
+      }
     },
     props: {
-        chainValues: {
-            type: String,
-            default: "",
-        },
-        msgId: {
-            type: String,
-            default: "",
-        },
-        isHistory: {
-            type: Boolean,
-            default: false,
-        },
+      chainValues: {
+        type: String,
+        default: ""
+      },
+      msgId: {
+        type: String,
+        default: ""
+      },
+      isHistory: {
+        type: Boolean,
+        default: false
+      },
+      streamRequestUrl: {
+        type: String,
+        default: ""
+      },
+      whetherRequestStream: {
+        type: Boolean,
+        default: false
+      }
     },
     components: {
-        ImgView,
-        VueMarkdown,
+      ImgView,
+      VueMarkdown
     },
     mounted() {
-        this.$nextTick(() => {
-            // let ref = 'markdown' + this.msgId
-            // const el = this.$refs[ref].$el;
-            // if (this.isHistory){
-            //   el.innerHTML = this.chainValues;
-            // } else {
-            //   new Typed(el, {
-            //     strings: [this.chainValues],
-            //     typeSpeed: 30,
-            //     showCursor: false
-            //   })
-            // }
-            this.typedContent = this.chainValues;
-            // if (this.isHistory) {
-            //     this.typedContent = this.chainValues;
-            // } else {
-            //     this.startTypingEffect();
-            // }
-        });
+      this.$nextTick(() => {
+        console.log("this.askMassageStream: ", this.askMassageStream);
+        console.log("this.whetherRequestStream: ", this.whetherRequestStream);
+        console.log("this.streamRequestUrl: ", this.streamRequestUrl);
+        console.log("this.isHistory: ", this.isHistory);
+        if (this.isHistory) {
+          if (this.whetherRequestStream) {
+            console.log("71 新版 真 流 打字 效果");
+            window.addEventListener('wheel', this.handleScroll, true);
+            this.streamInfo(this.streamRequestUrl);
+          } else {
+            this.typedContent = this.chainValues
+            console.log(JSON.parse(JSON.stringify(this.typedContent)));
+            
+          }
+          
+        } else {
+          console.log("78 pre 新版 真 流 打字 效果");
+          // 新版 真 流 打字 效果
+          if (this.askMassageStream && this.whetherRequestStream && this.streamRequestUrl) {
+            console.log("81 新版 真 流 打字 效果");
+            window.addEventListener('wheel', this.handleScroll, true);
+            this.streamInfo(this.streamRequestUrl);
+          } else {
+            this.$emit("sseOtherInfo", this.msgId, "start", "");
+            // 旧版 模拟 流 打字 效果
+            this.typedContent = this.chainValues
+            // this.startTypingEffect();
+          }
+        }
+      })
     },
     methods: {
-        startTypingEffect() {
-            let i = 0;
-            const interval = setInterval(() => {
-                if (i < this.chainValues.length) {
-                    this.typedContent += this.chainValues.charAt(i);
-                    i++;
-                } else {
-                    clearInterval(interval);
+      // 打字效果已在MarkdownText文件中处理
+    //   typeNewWriter(text, keyId, msg) {
+    //       setTimeout(() => {
+    //           let ref = 'msgTyped' + keyId;
+    //           const el = this.$refs[ref][0];
+    //           new Typed(el, {
+    //               strings: [text],
+    //               typeSpeed: 15,
+    //               showCursor: false,
+    //               onComplete: () => {
+    //                   msg.isHistory = true
+    //                   this.$emit('openFirstPreview', msg)
+    //                   this.typingSuccess()
+    //               },
+    //           })
+    //       }, 500)
+    //   },
+      handleScroll() {
+        console.log("this.isManualScroll = true;");
+        this.isManualScroll = true;
+        window.removeEventListener('wheel', this.handleScroll, true);
+      },
+      scrollMarkdown(){
+        !this.isManualScroll && this.$nextTick(() => {
+          const element = document.getElementById('el_id_markdown_' + this.msgId);
+          if (element) {
+            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          }
+        });
+      },
+      streamInfo(url){
+        // 通知消息列表，当前还未建立sse，先不出空消息
+        this.$emit("sseOtherInfo", this.msgId, "init", "");
+  
+        const eventSource = new EventSource(url);
+        let tempString = "";
+        let generatingString = "";
+        let timer = null;
+        let images = [];
+        let matched = [];
+        let recommendItems = [];
+        let isfirstStr = false;
+        const backslashOrNRegex = /[\\n]/;
+        eventSource.onmessage = (event) => {
+          const data = JSON.parse(event.data);
+          if (event.lastEventId === 'finish') { // 不能删除 finish
+            console.log("finish+++++");
+          } else if (event.lastEventId === '[DONE]') {
+            let DONETmier = setInterval(() => {
+              // 在所有文本内容打字效果完毕后 展示底部图片 文件 推荐等
+              if (generatingString == "") {
+                if (images.length != 0) {
+                  setTimeout(() => {
+                    this.$emit("sseOtherInfo", this.msgId,"images", images);
+                    this.scrollMarkdown();
+                  }, 50);
                 }
-            }, this.typingSpeed);
-        },
-        lookImage(e) {
-            let previewImageUrl = "";
-            console.log("e.target", e.target);
-            if (e.target.localName == "img") {
-                previewImageUrl = e.target.currentSrc;
-                this.showPreview = true;
-            }
-            let richtext = JSON.parse(JSON.stringify(this.typedContent));
-            this.imgList = [];
-            richtext.replace(
-                /<img [^>]*src=['"]([^'"]+)[^>]*>/g,
-                (match, capture) => {
-                    this.imgList.push(capture);
+                if (matched.length != 0) {
+                  setTimeout(() => {
+                    this.$emit("sseOtherInfo", this.msgId, "matched", matched);
+                    this.scrollMarkdown();
+                  }, 100);
                 }
-            );
-            /*当前点击的图片作为第一个图片*/
-            let index = this.imgList.indexOf(previewImageUrl);
-            this.imgList.splice(index, 1);
-            this.imgList.unshift(previewImageUrl);
-        },
-        closeViewer() {
-            this.showPreview = false;
-        },
-    },
-};
-</script>
-
-<style scoped lang="less">
-.mark_down {
+                if (recommendItems.length != 0) {
+                  setTimeout(() => {
+                    this.$emit("sseOtherInfo", this.msgId, "recommendItems", recommendItems);
+                    this.scrollMarkdown();
+                  }, 150);
+                }
+                clearInterval(DONETmier);
+              }
+            }, 100);
+            
+            eventSource.close();
+          } else if (event.lastEventId === 'matched') {
+            matched = data;
+          } else if (event.lastEventId === 'images') {
+            images = data;
+          } else if (event.lastEventId === 'recommendItems') {
+            recommendItems = data;
+          } else {
+            // 设置当前知识答案id，用于loading取消和展示
+            this.$emit("sseOtherInfo", this.msgId, "start", "");
+            // 字符串中存在特定字符，本次接收消息暂不展示
+            if (backslashOrNRegex.test(data.content)) {
+              tempString += data.content;
+            } else {
+              if (!isfirstStr) {
+                isfirstStr = true;
+                timer = setInterval(() => {
+                  if (generatingString != "") {
+                    this.$set(this, "typedContent", this.typedContent + generatingString.charAt(0))
+                    generatingString = generatingString.slice(1)
+                    this.scrollMarkdown();
+                  } else {
+                    clearInterval(timer);
+                  }
+                }, 20);
+                console.log(
+                    "answerDocKnowledgeFn 1"
+                );
+                
+                this.$emit("answerDocKnowledgeFn");
+              }
+              let repStr = tempString.replace(/\\n/g, '\n');
+              generatingString = generatingString + repStr + data.content;
+              tempString = "";
+            }
+          }
+        };
+  
+        eventSource.onerror = function(err) {
+          console.error('EventSource failed:', err);
+          this.typedContent += '\nError receiving data from server.\n';
+          eventSource.close();
+        };
+      },
+      startTypingEffect() {
+        // 使用正则表达式将 HTML 内容按 <table> 标签分割
+        const segments = this.chainValues.split(/(<\/?table[\s\S]*?>[\s\S]*?<\/table>)/i);
+        console.log("segments: ", segments);
+        
+        let segmentIndex = 0;
+        let i = 0;
+        const processNextSegment = () => {
+          if (segmentIndex >= segments.length) {
+            this.$emit('openFirstPreview')
+            this.$emit('typingSuccess');
+            return;
+          }
+          const segment = segments[segmentIndex];
+          if (/^<\/?table[\s\S]*?>[\s\S]*?<\/table>$/i.test(segment)) {
+            // 如果当前段是 <table> 标签，直接添加到 typedContent 中
+            this.typedContent += segment;
+            segmentIndex++;
+            processNextSegment();
+          } else {
+            i = 0;
+            const updateContent = () => {
+              if (i < segment.length) {
+                this.typedContent += segment.charAt(i);
+                i++;
+                // 使用 requestAnimationFrame 替代 setInterval，防止卡顿
+                requestAnimationFrame(updateContent);
+              } else {
+                segmentIndex++;
+                processNextSegment();
+              }
+            };
+            updateContent();
+          }
+        };
+        processNextSegment();
+      },
+  
+      lookImage(e) {
+        let previewImageUrl = ""
+        console.log('e.target', e.target)
+        if (e.target.localName == 'img') {
+          previewImageUrl = e.target.currentSrc;
+          this.showPreview = true;
+        }
+        let richtext = JSON.parse(JSON.stringify(this.typedContent))
+        this.imgList = [];
+        richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
+          this.imgList.push(capture);
+        });
+        /*当前点击的图片作为第一个图片*/
+        let index = this.imgList.indexOf(previewImageUrl);
+        this.imgList.splice(index, 1);
+        this.imgList.unshift(previewImageUrl);
+      },
+      closeViewer() {
+        this.showPreview = false;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped lang="less">
+  .mark_down {
     line-height: 24px;
     overflow-x: auto;
     /deep/p {
-        margin-bottom: 14px;
-        font-size: 16px;
+      margin-bottom: 14px;
+      font-size: 16px;
     }
-
+  
     /deep/p:only-child {
-        margin: 0 !important;
+      margin: 0 !important;
     }
-
+  
     /deep/p:last-child {
-        margin-bottom: 0 !important;
+      margin-bottom: 0 !important;
     }
-
+  
     /deep/ul {
-        margin-bottom: 16px;
-        list-style: disc;
-        padding-left: 16px;
-
-        li {
-            margin: 7px 0 !important;
-            font-size: 16px;
-            // padding-left: 40px;
-
-        }
+      margin-bottom: 16px;
+      list-style: disc;
+      padding-left: 40px;
+  
+      li {
+        margin: 7px 0 !important;
+        font-size: 16px;
+        // padding-left: 40px;
+  
+      }
     }
-
+  
     /deep/ ol {
-        list-style: auto;
-        padding-left: 16px;
-
-        li {
-            margin: 7px 0 !important;
-            font-size: 16px;
-            // padding-left: 40px;
-        }
+      list-style: auto;
+      padding-left: 40px;
+  
+      li {
+        margin: 7px 0 !important;
+        font-size: 16px;
+        // padding-left: 40px;
+      }
     }
-
+  
     /deep/img {
-        max-width: 400px;
+      max-width: 400px;
     }
-
+  
     /deep/h3,
     /deep/h2,
     /deep/h1,
     /deep/h4,
     /deep/h5,
     /deep/h6 {
-        color: #000000;
-        font-weight: 500;
-        line-height: 26px;
+      color: #000000;
+      font-weight: 500;
+      line-height: 26px;
     }
-
+  
     /deep/h3 {
-        font-size: 20px;
+      font-size: 20px;
     }
-
+  
     /deep/h2 {
-        font-size: 22px;
+      font-size: 22px;
     }
-
+  
     /deep/h1 {
-        font-size: 24px;
+      font-size: 24px;
     }
-
+  
     /deep/h3 {
-        font-size: 20px;
+      font-size: 20px;
     }
+  
 
     /deep/ table {
         border-spacing: 0;
@@ -180,6 +345,7 @@ export default {
         min-width: 800px;
         overflow-x: auto;
     }
+
     /deep/ th {
         background: #EEF1FF;
         border: solid 1px #e0e6f7;
@@ -195,4 +361,5 @@ export default {
         min-width: 100px;
     }
 }
-</style>
+</style>
+