ai-error-assistant-mobile 0.0.1

package/components/demo/src/chat.vue

@@ -0,0 +1,618 @@
+<template>
+  <div class="chat-contain" ref="chatContainer">
+    <error-chat :question-stem="analyExercise" :businessSource="businessSource" @on-init="errorChatInit"/>
+    <div v-for="(list, index) in messageData" :key="index"
+         :class="{'user-list': list.type === 'user'}"
+         class="message">
+      <div v-if="list.type === 'user' && avatarUrl" class="robot">
+        <img :src="avatarUrl" alt="" style="width: 48px; height: 48px; border-radius: 50%;">
+      </div>
+      <div v-if="list.type === 'user' && avatarUrl===''" class="robot user">user</div>
+      <div :class="{'user-info': list.type === 'user'}" class="robot-message">
+        <div v-html="list.message"></div>
+        <div v-if="list.type === 'robot' && list.links.length > 0 && showFile" class="link">
+          <div v-if="!list.allIdWithStart">
+            <div class="link-title">参考文件</div>
+            <div class="link-content">
+              <template v-for="item in list.links">
+                <template v-if="!item.title.startsWith(chatMajorId)">
+                  <div class="links">
+                                    <span>{{ `《${item.title}》` }} 共
+                                        <span style="font-weight: bold">
+                                            {{ item.fileDTOS.length }}
+                                        </span>
+                                        处引用
+                                    </span>
+                  </div>
+                  <div
+                      v-for="(pdf, index) in item.fileDTOS"
+                      class="link-part-container"
+                      :key="index"
+                  >
+                                    <span class="link-list-part">
+                                        {{ pdf.matchContent }}
+                                    </span>
+<!--                    <span-->
+<!--                        class="link-list-button"-->
+<!--                        @click="seeDetail(pdf, item.documentUrl)"-->
+<!--                    >-->
+<!--                                        点击查看-->
+<!--                                    </span>-->
+                  </div>
+                </template>
+              </template>
+            </div>
+          </div>
+        </div>
+        <div v-if="list.type === 'robot' && list.connectUrl.length > 0" class="link">
+          <div class="link-title">相关链接</div>
+          <div class="link-content">
+            <template v-for="item in list.connectUrl">
+              <div class="links">
+                <a :href="item.iaUrl" target="_blank">
+                  <span>{{ item.iaUrlName }}</span>
+                </a>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div v-if="list.type === 'robot' && finish && list.followUps && list.followUps.length > 0">
+          <div class="link-title">智能追问</div>
+          <div class="link-content">
+            <div class="hot-list"
+                 v-for="(list, index) in list.followUps"
+                 :key="index"
+                 @click="selectModule(list)">
+              {{ list }}
+              <i class="el-icon-arrow-right go-icon"></i>
+            </div>
+          </div>
+        </div>
+        <chat-tools v-if="list.type === 'robot'"
+                    :chatId="chatId"
+                    :detail-data="list"
+                    :sending="list.sending"
+                    :is-last="index === messageData.length - 1"
+                    @on-reanswer="(list) => reanswer(list, index)"
+                    @on-stop-chat="onStopChat"/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {errorList} from '../utils/config';
+import ChatTools from './chat-tools.vue';
+import ErrorChat from './error-chat.vue';
+import {marked} from 'marked';
+import {chartClear, sendMessageEventSource, getAutoQuestioning, pdfUrlBase} from "../api";
+
+const controller = new AbortController();
+const signal = controller.signal;
+
+export default {
+  name: 'Chat',
+  components: {
+    ErrorChat,
+    ChatTools
+  },
+  props: {
+    analyExercise: {},
+    keyWord: {
+      type: String,
+      default: '',
+    },
+    businessSource: {
+      type: String,
+      default: ''
+    },
+    resId: {
+      type: String,
+      default: '',
+    },
+    xtId: {
+      type: String,
+      default: '',
+    },
+    showMoreQA: {
+      type: Boolean,
+      default: false,
+    },
+    showFile: {
+      type: Boolean,
+      default: false,
+    },
+    avatarUrl: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      popover: false,
+      input: '',
+      errors: [],
+      errorList: errorList,
+      cacheKeyWord: '', // 由于外部需要快速清掉 keyword 但是存在重新发送请求的情况,因此需要一个混存记录
+      messageData: [],
+      chatId: '', // 对话id
+      chatMajorId: '',
+      finish: false,
+    }
+  },
+  computed: {
+    canSubmit() {
+      return this.errors.length === 0 && this.input === "";
+    },
+  },
+  watch: {
+    keyWord: {
+      handler() {
+        if (this.keyWord) {
+          this.cacheKeyWord = this.keyWord;
+          this.postMessage();
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    cancelPopover() {
+      this.popover = false;
+    },
+    openPopover() {
+      this.popover = true;
+    },
+    scrollToBottom() {
+      this.$refs.chatContainer.scrollTop = this.$refs.chatContainer.scrollHeight;
+    },
+    async postMessage(list, commonKey, parentMsgId) {
+      let reanswerParams = {};
+      this.finish = false;
+      if (list) {
+        list.sending = true;
+        reanswerParams = {
+          reStatus: 1,
+          parentMsgId: list.parentMsgId,
+          msgId: list.msgId,
+          content: this.messageData[list.index - 1].message,
+        }
+        this.messageData[list.index].message = '';
+        this.messageData[list.index].cacheMessage = '';
+        this.makeAutoMessage();
+      }
+      const params = {
+        messageList: [
+          {
+            content: this.keyWord || this.cacheKeyWord,
+            resId: this.resId,
+            chatId: this.chatId || undefined,
+            commonKey: commonKey || false,
+            parentMsgId: parentMsgId || undefined,
+            xtId: this.analyExercise.busId,
+            ...reanswerParams,
+          }
+        ]
+      };
+      // list 存在说明是重新生成
+      if (!list && !commonKey) {
+        const userWord = this.keyWord || this.cacheKeyWord;
+        this.messageData.push({type: 'user', message: userWord.replace(/\n/g, '<br>')});
+        setTimeout(() => {
+          this.messageData.push(
+              {
+                type: 'robot',
+                message: '',
+                cacheMessage: '',
+                zan: false,
+                cai: false,
+                stop: false,
+                finish: false,
+                sending: true,
+                links: [],
+                connectUrl: [],
+                reAnswerCount: 0
+              }
+          )
+          this.makeAutoMessage();
+        });
+      }
+      await sendMessageEventSource(params, signal, res => {
+        this.makeMessageLine(res, list);
+      });
+    },
+    makeAutoMessage() {
+      const cacheMessage = [];
+      for (let i = 0; i < this.messageData.length; i++) {
+        const current = this.messageData[i];
+        cacheMessage.push({
+          role: current.type === 'robot' ? 'assistant' : 'user',
+          content: current.message || '正在思考中。',
+        });
+      }
+      if (this.showMoreQA) {
+        this.makeAutoQuestioning(cacheMessage);
+      }
+    },
+    makeMessageLine(res, list) {
+      const {content, status, chatId, msgId, parentMsgId, reference, commonKey, connectUrl} = JSON.parse(res.data);
+      let index = list ? list.index : this.messageData.length - 1;
+      const currentList = this.messageData[index];
+      let allIdWithStart = true;
+      // 结束标识
+      if (status === 2 || status === 1) {
+        if (commonKey) {
+          currentList.sending = true;
+          this.postMessage(list, commonKey, parentMsgId);
+          return;
+        }
+        currentList.finish = true;
+        if (reference) {
+          currentList.links = JSON.parse(reference);
+          currentList.links.map((item) => {
+            if (!item.title.startsWith(this.chatMajorId)) {
+              allIdWithStart = false;
+            }
+          });
+        }
+        if (connectUrl) {
+          currentList.connectUrl = JSON.parse(connectUrl);
+        }
+        currentList.allIdWithStart = allIdWithStart;
+        this.cacheKeyWord = '';
+        this.finish = true;
+        this.$emit('on-message-finish', chatId);
+        return;
+      }
+      currentList.cacheMessage += content;
+      currentList.cacheMessage = currentList.cacheMessage.replace('```json{', '```json\n{');
+      currentList.message = marked.parse(currentList.cacheMessage);
+      currentList.msgId = msgId;
+      currentList.parentMsgId = parentMsgId;
+      currentList.chatId = chatId;
+
+      setTimeout(() => {
+        if (!list) this.scrollToBottom();
+      }, 100);
+      // 防止出现调用基础模型前导致停止回答id错误
+      setTimeout(() => currentList.sending = false, 500);
+    },
+    async makeAutoQuestioning(messages) {
+      // 首次不触发
+      if (messages.length <= 2) return;
+      const autoRes = await getAutoQuestioning(this.chatMajorId, messages);
+      const {
+        message: {
+          content: {followUps},
+        },
+      } = autoRes;
+      this.messageData[this.messageData.length - 1].followUps = [];
+      this.messageData[this.messageData.length - 1].followUps =
+          followUps.length > 3 ? followUps.splice(0, 3) : followUps;
+    },
+    onStopChat(list) {
+      this.$emit('on-message-finish', list.chatId)
+    },
+    selectModule(message) {
+      this.cacheKeyWord = message;
+      this.postMessage();
+    },
+    async clearChat() {
+      if (this.messageData.length < 1) {
+        this.$message.warning('当前对话为最新对话');
+        return;
+      }
+      await chartClear(this.chatId);
+      this.messageData = []
+      this.$message.success('对话清除成功！');
+    },
+    reanswer(list, index) {
+      list.index = index;
+      list.stop = false;
+      list.finish = false;
+      list.links = [];
+      list.connectUrl = [];
+      this.postMessage(list);
+      this.$emit('on-reanser');
+    },
+    errorChatInit(list, chatId) {
+      if (list && list[0].contents) {
+        const {chatMajorId} = list[0];
+        this.chatMajorId = chatMajorId && chatMajorId.toString();
+        const cacheArray = [];
+        list[0].contents.reverse().map((list) => {
+          let allIdWithStart = true;
+          if (this.chatMajorId && list.references) {
+            list.references.map((item) => {
+              if (!item.title.startsWith(this.chatMajorId)) {
+                allIdWithStart = false;
+              }
+            });
+          }
+          const obj = {
+            type: list.role === 'assistant' ? 'robot' : 'user',
+            message: list.role === 'assistant' ? marked.parse(list.content || '') : list.content.replace(/\n/g, '<br>'),
+            zan: list.type === 1,
+            cai: list.type === 2,
+            stop: list.status === 1,
+            finish: true,
+            links: list.references || [],
+            connectUrl: list.connectUrls || [],
+            reAnswerCount: 0,
+            msgId: list.contentId,
+            parentMsgId: list.parentMsgId,
+            allIdWithStart
+          };
+          cacheArray.push(obj);
+        })
+        this.messageData = cacheArray;
+        this.chatId = chatId;
+      } else {
+        this.messageData = [];
+      }
+    },
+    seeDetail(pdfInfo, url) {
+      console.log(1234);
+      const {pageIndex} = pdfInfo;
+      const baseUrl = `${pdfUrlBase}/#/pdf-view?documentUrl=${encodeURIComponent(url)}&pageIndex=${pageIndex}`;
+      window.open(baseUrl, '_blank');
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.chat-contain {
+  height: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 0.75rem;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+  touch-action: manipulation;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  .message-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem 0;
+  }
+}
+
+.message {
+  display: flex;
+  gap: 0.75rem;
+  max-width: 100%;
+  margin-bottom: 1rem;
+  margin-left: 0;
+  margin-right: auto;
+  position: relative;
+  padding: 0.625rem;
+
+  &.user-list {
+    flex-direction: row-reverse;
+    margin-left: auto;
+    margin-right: 0;
+    margin-top: 1rem;
+    padding: 0.75rem;
+
+    .robot-message {
+      background: linear-gradient(90deg, rgb(130, 136, 220) 0%, rgb(48, 90, 220) 100%);
+      color: white;
+      border-radius: 1rem 0.25rem 1rem 1rem;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      max-width: 90%;
+    }
+  }
+
+  &:not(.user-list) {
+    .robot-message {
+      background: white;
+      color: #333;
+      border-radius: 0.25rem 1rem 1rem 1rem;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      min-width: 120px;
+      max-width: 85%;
+      padding: 0.75rem;
+    }
+  }
+}
+
+.robot {
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0;
+  flex-shrink: 0;
+
+  &.user {
+    background: linear-gradient(90deg, rgb(0, 144, 240) 0%, rgb(144, 48, 240) 100%);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    color: #fff;
+    box-shadow: 2px 2px 4px rgba(0, 3, 6, 0.16);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  .robot-image-div {
+    width: 100%;
+    height: 100%;
+    background: url('../static/robot.png') no-repeat center center;
+    background-size: cover;
+    border-radius: 50%;
+  }
+}
+
+.robot-message {
+  padding: 0.75rem;
+  box-sizing: border-box;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  flex-grow: 0;
+  flex-shrink: 1;
+
+  &.user-info {
+    background: linear-gradient(90deg, rgb(130, 136, 220) 0%, rgb(48, 90, 220) 100%);
+    color: #fff;
+    border-radius: 1rem 0.25rem 1rem 1rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  :deep(p) {
+    margin: 0.5rem 0;
+    line-height: 1.6;
+    font-size: 0.9375rem;
+  }
+
+  :deep(pre) {
+    background: #f5f5f5;
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    margin: 0.5rem 0;
+    font-size: 0.875rem;
+  }
+
+  :deep(code) {
+    font-family: monospace;
+    background: #f5f5f5;
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+  }
+
+  :deep(a) {
+    color: #6050f0;
+    text-decoration: none;
+    font-size: 0.9375rem;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .link {
+    margin-top: 0.75rem;
+    font-size: 0.9375rem;
+
+    .link-title {
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: #333;
+    }
+
+    .link-content {
+      .links {
+        margin-bottom: 0.5rem;
+        font-size: 0.875rem;
+      }
+
+      .link-part-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        font-size: 0.875rem;
+
+        .link-list-part {
+          flex: 1;
+          margin-right: 0.5rem;
+        }
+
+        .link-list-button {
+          color: #6050f0;
+          cursor: pointer;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .hot-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    background: #f5f5f5;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+
+    .go-icon {
+      color: #999;
+    }
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .chat-contain {
+    padding: 0.5rem;
+  }
+
+  .message {
+    gap: 0.5rem;
+    padding: 0.5rem;
+
+    &.user-list {
+      padding: 0.5rem;
+    }
+  }
+
+  .robot {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .robot-message {
+    padding: 0.5rem;
+    font-size: 0.875rem;
+
+    :deep(p) {
+      font-size: 0.875rem;
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .chat-contain {
+    padding: 1rem;
+  }
+
+  .message {
+    gap: 1rem;
+    padding: 0.75rem;
+
+    &.user-list {
+      padding: 1rem;
+    }
+  }
+
+  .robot {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  .robot-message {
+    padding: 1rem;
+    font-size: 1rem;
+
+    :deep(p) {
+      font-size: 1rem;
+    }
+  }
+}
+</style>