聊天机器人

export default {
  name: "ChatBot",
  components: {
    Avatar,
  },
  data() {
    return {
      messages: [
        {
          id: 1,
          content: this.$t("detail.ChatHello"),
          isRequest: false,
          timestamp: "",
          curDone: false,
          requestFinishedFlag: false,
          zan: false,
          cai: false,
          caiTotal: 0,
          responseText: "",
          zanMouseover: false,
          caiMouseover: false,
          copyMouseover: false,
        },
      ],
      inputMessage: "",
      sendingMessage: false,
      responseAvatar: `../../assets/images/lenovo-icon.png`,
      retryWidth: "revert-layer",
      clearWidth: "revert-layer",
      BMContent: "",
    };
  },
  computed: {
    ...mapGetters(["name", "language"]),
    RetryStyle() {
      return { width: this.retryWidth };
    },
    ClearStyle() {
      return { width: this.clearWidth };
    },
  },
  methods: {
    startStreaming(params) {
      let flag = true;
      // 创建 XMLHttpRequest 对象
      const xhr = new XMLHttpRequest();
      // 设置请求的 URL
      xhr.open("POST", axios.defaults.baseURL + `/consultant/consult`, true);
      xhr.setRequestHeader("token", getToken());
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      xhr.setRequestHeader("Content-Language", store.getters.language);
      // 监听 readyStateChange 事件
      xhr.onreadystatechange = () => {
        // 如果 readyState 是 3，表示正在接收数据
        if (xhr.readyState === 3) {
          // 将数据添加到文本框中
          this.sendingMessage = false;
          if (flag) {
            flag = false;
            this.pushMessage(xhr.responseText, false);
          } else {
            let json = this.replaceURLsWithLinks(xhr.responseText);
            this.messages[this.messages.length - 1].content = json.content;
            if (!this.messages[this.messages.length - 1].curDone) {
              this.messages[this.messages.length - 1].curDone = json.curDone;
            }
          }
        }
        // 如果 readyState 是 4，表示完成请求
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            // 避免接受过程中缺少字符
            this.sendingMessage = false;
            if (flag) {
              flag = false;
              this.pushMessage(xhr.responseText, false);
            } else {
              let json = this.replaceURLsWithLinks(xhr.responseText);
              this.messages[this.messages.length - 1].content = json.content;
              if (!this.messages[this.messages.length - 1].curDone) {
                this.messages[this.messages.length - 1].curDone = json.curDone;
              }
              this.messages[
                this.messages.length - 1
              ].requestFinishedFlag = true; // 用于显示红字提示

              this.messages[this.messages.length - 1].responseText =
                xhr.responseText; //用于复制
            }
          }
        }
      };
      // 发送请求
      let sendData = params.map((item) => {
        let obj = {};
        obj.role = item.role;
        obj.message = item.message.split("<br />")[0];
        obj.index = item.index;
        return obj;
      });

      let data = { legalQuestions: sendData };
      xhr.send(JSON.stringify(data));
    },
    async sendMessage() {
      if (this.inputMessage.trim() !== "" && !this.sendingMessage) {
        this.pushMessage(this.inputMessage, true);
        this.inputMessage = "";
        this.sendingMessage = true; // Show loading animation
        this.scrollToEnd(); //滚动到聊天窗口底部
        let params = [...this.messages];
        if (!params[0].isRequest) {
          params.shift();
        }
        params = params.map((obj, i) => ({
          role: obj.isRequest ? 1 : 0,
          message: obj.content,
          index: i + 1,
        }));
        this.startStreaming(params);
      }
    },
    async ReSendMessage() {
      if (!this.sendingMessage && this.messages.length > 0) {
        if (this.messages.length == 1 && !this.messages[0].isRequest) {
          return;
        }
        this.sendingMessage = true; // Show loading animation
        this.scrollToEnd();
        this.messages.pop();
        let params = [...this.messages];
        if (!params[0].isRequest) {
          params.shift();
        }
        params = params.map((obj, i) => ({
          role: obj.isRequest ? 1 : 0,
          message: obj.content,
          index: i + 1,
        }));
        this.startStreaming(params);
      }
    },
    pushMessage(content, isRequest) {
      const timestamp = new Date().toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
      });
      this.messages.push({
        id: this.messages.length + 1,
        content,
        isRequest,
        timestamp: timestamp,
        curDone: false,
        requestFinishedFlag: false,
        zan: false,
        cai: false,
        caiTotal: 0,
        responseText: content,
        zanMouseover: false,
        caiMouseover: false,
        copyMouseover: false,
      });
    },
    ClearContext() {
      if (!this.sendingMessage) this.messages = [];
    },
    changeWidth(type) {
      this.language == "en";
      if (this.language == "en") {
        type == "Retry"
          ? (this.retryWidth = "75px")
          : (this.clearWidth = "125px");
      } else {
        type == "Retry"
          ? (this.retryWidth = "97px")
          : (this.clearWidth = "97px");
      }
    },
    resetWidth(type) {
      type == "Retry"
        ? (this.retryWidth = "revert-layer")
        : (this.clearWidth = "revert-layer");
    },
    replaceURLsWithLinks(html) {
      if (html.indexOf("{&&}") < 0) {
        return {
          content: html.replace(/\n/g, "<br />"),
        };
      } else {
        let arr = html.split("{%%}");
        let newHtml = "";
        if (arr[1] === "1") {
          let linkArr = arr[2].replace(/\n/g, "<br />").split("<br />");
          let linkhtml = "";
          for (var i = 1; i < linkArr.length; i++) {
            let itemLinkArr = linkArr[i].split("{&&}");
            linkhtml +=
              '<a href="' +
              itemLinkArr[1] +
              '" target="_blank">' +
              itemLinkArr[0] +
              "</a><br />";
          }
          newHtml = arr[0] + "<br />" + linkhtml;
        } else if (arr[1] === "0") {
          //不显示知识来源 ok
          newHtml = `${arr[0]}`;
        }
        let curDone = arr[1] === "1" ? true : false;
        return {
          content: newHtml.replace(/\n/g, "<br />"),
          curDone,
        };
      }
    },
    scrollToEnd() {
      this.$nextTick(() => {
        this.$el.querySelector(".chat-scrollbar").scrollTo({
          top: this.$el.querySelector(".chat-scrollbar").scrollHeight,

          behavior: "smooth",
        });
      });
    },
  },
};