wms / wms4_hangzhoudonglin · Files

<template>
  <div class="chat-wrapper">
    <aside class="chat-sidebar">
      <h3>会话列表</h3>
      <ul>
        <li class="active">客服小助手</li>
        <li>技术支持</li>
        <li>售后服务</li>
      </ul>
    </aside>

    <div class="chat-container">
      <header class="chat-header">
<!--        <img src="http://localhost:3000/wms/favicon.ico" alt="avatar" class="avatar"/>-->
        <span class="nickname">华恒小助手</span>
      </header>

      <main class="chat-main" ref="chatMain">
        <div
          class="message"
          :class="msg.from === 'bot' ? 'bot' : 'user'"
          v-for="(msg, index) in messages"
          :key="index"
        >
          <img
            src="http://localhost:3000/wms/favicon.ico"
            class="msg-avatar"
            :class="{ right: msg.from === 'user' }"
          />
          <div class="msg-content" v-if="msg.from === 'user'" v-html="msg.displayText"></div>

          <!-- 机器人消息分为思考过程和知识检索 -->
          <div v-if="msg.from === 'bot'">
            <div v-if="index !== 0"> <!-- 非第一个才显示思考过程 -->
              <div class="thinking-section">
                <div class="thinking-header" @click="toggleThinkingCollapse(index)">
                  <span>思考过程</span>
                  <button>{{ thinkingCollapsed[index] ? '展开' : '收起' }}</button>
                </div>
                <div
                  class="thinking-content"
                  :class="{ collapsed: thinkingCollapsed[index] }"
                  v-html="msg.thinkingText"
                ></div>
              </div>
            </div>

            <div class="knowledge-section" v-if="msg.knowledgeText">
              <div class="knowledge-header">知识检索</div>
              <div class="knowledge-content" v-html="msg.knowledgeText"></div>
            </div>
          </div>

        </div>
      </main>

      <div class="suggestions">
        <button
          v-for="(suggestion, idx) in suggestions"
          :key="idx"
          @click="handleSuggestion(suggestion)"
          :disabled="isReplying"
        >
          {{ suggestion }}
        </button>
        <div class="right-actions">
          <button @click="cancelReply" v-if="isReplying">取消回复</button>
          <button @click="clearMessages">清空记忆</button>
        </div>
      </div>

      <footer class="chat-footer">
        <input
          v-model="userInput"
          @keyup.enter="handleSend"
          :disabled="isReplying"
          placeholder="说些什么吧..."
        />
        <button @click="handleSend" :disabled="isReplying">发送</button>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AiChatList',
  data() {
    return {
      userInput: '',
      messages: [],
      suggestions: [
        '公司的发展和规划',
        '公司的休假制度是怎样的',
        '公司的核心价值观'
      ],
      isReplying: false,
      thinkingCollapsed: [],  // 用于记录每条bot消息的思考过程是否收起状态
      fullThinkingText: ' ',     // 存储完整内容
      displayedThinkingText: '', // 每次只显示部分
      thinkingTimer: null,
      typingInterval: null,
      abortController: null,
    };
  },
  mounted() {
    this.addBotMessage('欢迎来到华恒机器人智能客服中心，有任何问题都可以随时咨询哦！');
  },
  methods: {
    addBotMessage(text) {
      this.messages.push({
        from: 'bot',
        reasoningText: '123',
        knowledgeText: '欢迎来到华恒机器人智能客服中心，有任何问题都可以随时咨询哦！',
        showKnowledge: false,
        displayText: text // 兼容旧消息格式（用户消息用）
      });
      this.$nextTick(this.scrollToBottom);
    },
    async handleSend() {
      if (!this.userInput.trim() || this.isReplying) return;
      const text = this.userInput.trim();
      this.messages.push({from: 'user', displayText: text});
      this.userInput = '';
      this.$nextTick(this.scrollToBottom);

      try {
        this.isReplying = true;

        // 新建 AbortController
        this.abortController = new AbortController();

        // 新增结构，思考过程和知识检索分开存储
        const botMessage = {
          from: 'bot',
          thinkingText: '',
          knowledgeText: '',
          displayText: '',  // 保持兼容（可以不使用）
        };

        this.messages.push(botMessage);
        // 默认 bot 消息设置为收起状态（true 表示收起）
        this.thinkingCollapsed.push(true);
        this.$nextTick(this.scrollToBottom);

        const apiKey = "Bearer sk-ea17488f760444baaf61f284e219be32";
        const applicationId = "9bc7b5b0811741988085479458af84f2";
        const url = `https://dashscope.aliyuncs.com/api/v1/apps/${applicationId}/completion`;

        const response = await fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': apiKey,
            'X-DashScope-SSE': 'enable'
          },
          body: JSON.stringify({
            input: {prompt: text},
            parameters: {
              has_thoughts: true,
              incremental_output: true
            },
            debug: {}
          }),
          signal: this.abortController.signal  // 传入signal
        });

        if (!response.body || !window.TextDecoder) {
          throw new Error('当前浏览器不支持流式响应或TextDecoder');
        }

        const reader = response.body.getReader();
        const decoder = new TextDecoder('utf-8');
        let buffer = '';


        let isReasoningDone = false;

        while (true) {
          const {done, value} = await reader.read();
          if (done) break;
          buffer += decoder.decode(value, {stream: true});

          const lines = buffer.split('\n');
          buffer = lines.pop();

          for (let line of lines) {
            line = line.trim();
            if (line.indexOf('data:') === 0) {
              const jsonStr = line.slice(5).trim();
              try {
                const parsed = JSON.parse(jsonStr);
                if (parsed && parsed.output) {
                  const thoughts = parsed.output.thoughts || [];

                  thoughts.forEach(thought => {
                    if (thought.action_name === '思考过程' && thought.response) {
                      botMessage.thinkingText = this.appendClean(botMessage.thinkingText, thought.response);
                    }
                  });

                  const reasoningEmpty = thoughts.every(th => th.action_name !== '思考过程' || !th.response);
                  if (reasoningEmpty) {
                    isReasoningDone = true;
                    const lastIdx = this.messages.length - 1;

                  }

                  if (isReasoningDone && parsed.output.text) {
                    botMessage.knowledgeText = this.appendClean(botMessage.knowledgeText, parsed.output.text);
                  }

                  this.$forceUpdate();
                  this.$nextTick(this.scrollToBottom);
                }

                if (parsed.output && parsed.output.finish_reason && parsed.output.finish_reason !== 'null') {
                  break;
                }
              } catch (e) {
                console.warn('解析失败', jsonStr);
              }
            }
          }
        }

        this.isReplying = false;
        this.abortController = null; // 清理控制器
      } catch (error) {
        console.error('请求错误', error);
        const lastMsg = this.messages[this.messages.length - 1];
        if (lastMsg && lastMsg.from === 'bot' && !lastMsg.reasoningText && !lastMsg.knowledgeText) {
          lastMsg.reasoningText = '网络异常，请稍后再试';
        } else {
          this.addBotMessage('网络异常，请稍后再试');
        }
        this.isReplying = false;
        this.abortController = null;
      }
    },
    handleSuggestion(text) {
      if (this.isReplying) return;
      this.userInput = text;
      this.handleSend();
    },
    cancelReply() {
      if (this.abortController) {
        this.abortController.abort();
      }
      this.isReplying = false;
    },
    appendClean(oldText, newText) {
      if (!newText) return oldText || '';

      // 去掉 newText 前后空白字符
      newText = newText.trim();

      // 如果 oldText 为空，直接返回 newText
      if (!oldText) return newText;

      // oldText 也去掉尾部空白
      oldText = oldText.trim();

      // 拼接时用换行符隔开，确保不会多余空格
      return oldText + newText;
    }
,

    toggleThinkingCollapse(index) {
      this.$set(this.thinkingCollapsed, index, !this.thinkingCollapsed[index]);
    },

    clearMessages() {
      this.cancelReply();
      this.messages = [];
      this.addBotMessage('欢迎来到华恒机器人智能客服中心，有任何问题都可以随时咨询哦！');
    },
    scrollToBottom() {
      const el = this.$refs.chatMain;
      if (el) {
        el.scrollTop = el.scrollHeight;
      }
    }
  }
};
</script>


<style scoped>

/* 思考过程部分 */
.thinking-section {
  margin-bottom: 8px;
}

.thinking-header {
  font-weight: 600;
  font-size: 13px;
  color: #666;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding: 4px 8px;
  background: #f0f4ff;
  border-radius: 6px;
  margin-bottom: 4px;
}

.thinking-header button {
  border: none;
  background: transparent;
  color: #409eff;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.thinking-content {
  font-size: 14px;
  color: #888;
  line-height: 1.5;
  max-height: none;
  overflow: auto;
  white-space: pre-wrap; /* 自动换行 */
  word-break: break-word;
  transition: max-height 0.3s ease;
  background: #f9fbff;
  border-left: 3px solid #409eff;
  padding: 10px 12px;
  border-radius: 0 12px 12px 12px;
}

/* 收起时限制高度 */
.thinking-content.collapsed {
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

/* 知识检索部分 */
.knowledge-section {
  margin-top: 10px;
}

.knowledge-header {
  font-weight: 700;
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
}

.knowledge-content {
  font-size: 15px;
  color: #222;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
}


.chat-wrapper {
  display: flex;
  height: 80vh;
  max-width: 1000px;
  margin: 40px auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background-color: #f9f9f9;
}

/* 左侧会话栏 */
.chat-sidebar {
  width: 220px;
  background-color: #2f3e4e;
  color: white;
  padding: 20px;
}

.chat-sidebar h3 {
  font-size: 16px;
  margin-bottom: 15px;
}

.chat-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chat-sidebar li {
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 10px;
  background-color: #3e4e5e;
  transition: background 0.2s;
}

.chat-sidebar li.active,
.chat-sidebar li:hover {
  background-color: #409eff;
}

/* 聊天容器 */
.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
}


.chat-header {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.nickname {
  font-weight: bold;
  color: #333;
}

.chat-main {
  padding: 15px;
  flex: 1;
  overflow-y: auto;
  background-color: #fdfdfd;
}

/* 消息气泡 */
.message {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

/* 机器人消息：头像左边，气泡有左侧小三角 */
.message.bot {
  flex-direction: row;
}

.message.bot .msg-content {
  background: #f0f0f0;
  color: #333;
  border-radius: 12px 12px 12px 0;
  position: relative;
  max-width: 80%;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px;
}

/* 机器人消息小三角 */
.message.bot .msg-content::before {
  content: '';
  position: absolute;
  top: 12px;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 8px solid #f0f0f0;
  border-bottom: 8px solid transparent;
}

/* 打字机容器 */
.thinking-content {
  font-family: "Courier New", Courier, monospace;
  white-space: pre-wrap;
  line-height: 1.6;
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 8px;
  position: relative;
  border-left: 4px solid #4caf50;
  transition: max-height 0.3s ease;
}

/* 收起状态样式 */
.thinking-content.collapsed {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  border-left: none;
  background: transparent;
}

/* 打字机光标效果 */
.thinking-content::after {
  content: '|';
  display: inline-block;
  margin-left: 4px;
  animation: blink 1s step-end infinite;
  color: #4caf50;
  font-weight: bold;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* 思考过程标题行样式 */
.thinking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e8f5e9;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  color: #2e7d32;
  margin-top: 10px;
}

.thinking-header button {
  background: transparent;
  border: none;
  color: #2e7d32;
  cursor: pointer;
  font-size: 14px;
}
/* 用户消息：头像右边，气泡有右侧小三角 */
.message.user {
  flex-direction: row-reverse;
}

.message.user .msg-content {
  background-color: #409eff;
  color: white;
  border-radius: 12px 12px 0 12px;
  position: relative;
  max-width: 80%;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px;
}

/* 用户消息小三角 */
.message.user .msg-content::after {
  content: '';
  position: absolute;
  top: 12px;
  right: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 8px solid #409eff;
  border-bottom: 8px solid transparent;
}

.msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 10px;
}

.msg-avatar.right {
  margin-left: 10px;
  margin-right: 0;
}

/* 建议按钮区域 */
.suggestions {
  padding: 10px 15px;
  border-top: 1px solid #eee;
  background-color: #fafafa;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.suggestions > button {
  background: #e0e0e0;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.suggestions > button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.suggestions > button:hover:not(:disabled) {
  background: #d0d0d0;
}

.right-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.right-actions button {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s;
}

.right-actions button:hover {
  background: #e6e6e6;
}

/* 输入区域 */
.chat-footer {
  display: flex;
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  background-color: #f5f5f5;
}

.chat-footer input {
  flex: 1;
  border-radius: 20px;
  border: 1px solid #ccc;
  padding: 8px 15px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.chat-footer input:focus {
  border-color: #409eff;
}

.chat-footer button {
  margin-left: 10px;
  background-color: #409eff;
  border: none;
  color: white;
  border-radius: 20px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.chat-footer button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

</style>