byt-lingxiao-ai 0.2.4 → 0.2.6

package/components/ChatWindow.vue

@@ -10,118 +10,53 @@
       <source :src="audioSrc" type="audio/mpeg">
       您的浏览器不支持音频元素。
     </audio>
-    <div v-if="robotStatus !== 'leaving'" :class="['chat-robot', robotStatus]" ></div>
-    <div v-else class="chat-ai" @click="toggleWindow">
-      <div :class="['chat-ai-avater', avaterStatus]"></div>
-      <div class="chat-ai-text">{{ avaterText }}</div>
-    </div>
-    <!-- 添加一个遮罩层，用于捕获点击外部事件 -->
-    <div class="chat-overlay" v-show="visible" @click="handleOverlayClick">
-      <div class="chat-window" @click.stop>
-        <div class="chat-window-header">
-          <div class="chat-window-header-title">凌霄大模型AI对话</div>
-          <div class="chat-window-header-close" @click="visible = false">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M5.50002 5.5L18.5 18.5"
-                stroke="#4E5969"
-                stroke-width="1.89404"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-              <path
-                d="M5.50002 18.5L18.5 5.5"
-                stroke="#4E5969"
-                stroke-width="1.89404"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </div>
-        </div>
-        <div ref="chatArea" class="chat-window-content scrollbar-hide">
-          <div
-            class="chat-window-message"
-            v-for="message in messages"
-            :key="message.id"
-          >
-            <div
-              class="chat-window-message-user"
-              v-if="message.type === 'user'"
-            >
-              <div class="user-message">{{ message.content }}</div>
-            </div>
-            <div class="chat-window-message-ai" v-else>
-              <div class="ai-render">
-                <div class="ai-thinking">
-                  <div class="ai-thinking-time">思考用时{{ message.time }}秒</div>
-                  <div class="ai-thinking-content">{{ message.thinking }}</div>
-                </div>
-                <div class="ai-content">{{ message.content }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="chat-window-footer">
-          <div class="chat-window-textarea">
-            <el-input
-              type="textarea"
-              class="chat-window-input"
-              placeholder="有什么我能帮您的吗？"
-              rows="2"
-              resize="none"
-              v-model="inputMessage"
-              @keydown="handleKeyDown"
-            ></el-input>
-            <div class="chat-window-bar">
-              <div class="chat-window-send" @click="handleSend">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  fill="none"
-                >
-                  <g clip-path="url(#clip0_640_2107)">
-                    <path
-                      d="M18.6427 2.37822C19.3253 2.47432 19.8025 3.10738 19.7065 3.79002C19.6871 3.97072 19.5381 4.41327 19.5403 4.41161L14.9673 17.8079L14.9632 17.8093C14.7858 18.3838 14.212 18.7607 13.5971 18.6744C13.4173 18.6492 13.2504 18.5862 13.1055 18.4949L13.0973 18.4977L9.83449 16.3686C9.58371 16.2584 9.4276 15.9939 9.46729 15.7115C9.5154 15.3691 9.83278 15.1317 10.1751 15.1798C10.293 15.1964 10.3988 15.2448 10.4853 15.3161L13.4054 17.2314L13.4073 17.2317C13.4452 17.2566 13.4882 17.2746 13.5364 17.2814C13.6911 17.3029 13.8371 17.2052 13.8793 17.0593L18.0469 4.89796L8.27396 14.3367L7.77435 17.8916C7.72706 18.2281 7.41369 18.464 7.07727 18.4169C6.74073 18.3696 6.50469 18.0564 6.55198 17.7198L7.07633 13.9889C7.08231 13.9464 7.09382 13.9066 7.10727 13.867C7.13549 13.7645 7.19079 13.6657 7.27291 13.5866L17.0754 4.12041L2.68514 8.17767L2.68487 8.1796C2.58481 8.21873 2.50686 8.31058 2.49042 8.42643C2.47412 8.5424 2.52417 8.65007 2.6093 8.71729L2.60903 8.71922L3.28261 9.16101L3.28013 9.16461C3.47505 9.29254 3.58819 9.52563 3.55386 9.77111C3.50575 10.1134 3.18836 10.3509 2.84602 10.3028C2.75512 10.29 2.6708 10.2584 2.59833 10.2127L2.59806 10.2147L1.37843 9.42001L1.37951 9.41227C1.02215 9.14901 0.816644 8.70195 0.882687 8.23203C0.951867 7.74096 1.29791 7.35545 1.73968 7.21445L1.73995 7.21251L17.7833 2.57104C18.0287 2.41036 18.3294 2.3342 18.6427 2.37822Z"
-                      fill="#013378"
-                    />
-                    <path
-                      d="M3.1309 10.9936C3.2178 10.5684 3.82528 10.5684 3.91218 10.9936C4.10411 11.9326 4.83794 12.6664 5.77697 12.8584C6.20213 12.9453 6.20213 13.5527 5.77697 13.6397C4.83794 13.8316 4.10411 14.5654 3.91218 15.5044C3.82528 15.9296 3.2178 15.9296 3.1309 15.5044C2.93897 14.5654 2.20513 13.8316 1.26611 13.6397C0.840944 13.5527 0.840944 12.9453 1.26611 12.8584C2.20513 12.6664 2.93897 11.9326 3.1309 10.9936Z"
-                      fill="#2B80F6"
-                    />
-                    <path
-                      d="M6.20382 8.56242C6.25596 8.30732 6.62045 8.30732 6.67259 8.56242C6.78775 9.12583 7.22805 9.56613 7.79146 9.68129C8.04656 9.73343 8.04656 10.0979 7.79146 10.1501C7.22805 10.2652 6.78775 10.7055 6.67259 11.2689C6.62045 11.524 6.25596 11.524 6.20382 11.2689C6.08866 10.7055 5.64836 10.2652 5.08495 10.1501C4.82985 10.0979 4.82985 9.73343 5.08495 9.68129C5.64836 9.56613 6.08866 9.12583 6.20382 8.56242Z"
-                      fill="#2B80F6"
-                    />
-                  </g>
-                  <defs>
-                    <clipPath id="clip0_640_2107">
-                      <rect width="20" height="20" fill="white" />
-                    </clipPath>
-                  </defs>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+
+    <!-- 机器人动画 -->
+    <ChatRobot 
+      v-if="robotStatus !== 'leaving'" 
+      :status="robotStatus" 
+    />
+
+    <!-- AI头像入口 -->
+    <ChatAvatar 
+      v-else
+      :status="avaterStatus"
+      @click="toggleWindow"
+    />
+
+    <!-- 聊天窗口 -->
+    <ChatWindowDialog
+      v-model="visible"
+      :messages="messages"
+      :input-message="inputMessage"
+      :think-status="thinkStatus"
+      @update:inputMessage="inputMessage = $event"
+      @send="handleSend"
+      @thinking-click="handleThinkingClick"
+      @overlay-click="handleOverlayClick"
+    />
   </div>
 </template>
+
 <script>
+import ChatRobot from './ChatRobot.vue'
+import ChatAvatar from './ChatAvatar.vue'
+import ChatWindowDialog from './ChatWindowDialog.vue'
+import audioMixin from './mixins/audioMixin'
+import webSocketMixin from './mixins/webSocketMixin'
+import messageMixin from './mixins/messageMixin'
+
 const SAMPLE_RATE = 16000;
 const FRAME_SIZE = 512;
 
 export default {
   name: 'ChatWindow',
+  components: {
+    ChatRobot,
+    ChatAvatar,
+    ChatWindowDialog
+  },
+  mixins: [audioMixin, webSocketMixin, messageMixin],
   props: {
     appendToBody: {
       type: Boolean,
@@ -130,75 +65,43 @@ export default {
   },
   data() {
     return {
-      audioSrc: '/minio/lingxiaoai/byt.mp3', // 音频URL
-      inputMessage: '', // 输入消息
-      visible: false, // 窗口是否可见
+      audioSrc: '/minio/lingxiaoai/byt.mp3',
+      inputMessage: '',
+      visible: false,
       messages: [
         {
           id: 1,
           type: 'user',
           sender: '',
           time: '',
-          content: '你好，欢迎来到凌霄大模型AI对话。',
+          content: '你好,欢迎来到凌霄大模型AI对话。',
         },
         {
           id: 2,
           type: 'ai',
           sender: 'AI',
           time: '',
-          thinking: '嗯，用户问的是回转窑的工业应用。首先，我需要回忆一下之前对话的内容。用户之前让我解释了水泥的制作流程，特别是提到了回转窑在高温煅烧熟料中的作用。',
-          charts: [
-            {
-              title: '',
-              options: {}
-            }
-          ],
-          content: '回转窑（Rotary Kiln）是一种长筒形旋转煅烧设备（类似倾斜安装的大管子），因其独特的旋转运动和高温耐火衬里设计，在多个工业领域都有广泛应用',
+          thinking: '嗯,用户问的是回转窑的工业应用。首先,我需要回忆一下之前对话的内容。用户之前让我解释了水泥的制作流程,特别是提到了回转窑在高温煅烧熟料中的作用。',
+          charts: [{ title: '', options: {} }],
+          content: '回转窑(Rotary Kiln)是一种长筒形旋转煅烧设备(类似倾斜安装的大管子),因其独特的旋转运动和高温耐火衬里设计,在多个工业领域都有广泛应用',
         }
-      ], // 消息列表
-      isRecording: false, // 正在录制
-      isMicAvailable: false, // 麦克风是否可用
-      mediaRecorder: null, // 媒体录制器
-      ws: null, // WebSocket连接
-      // wsUrl: 'wss://mes.shnfonline.top:8316/ai_model/ws/voice-stream', // WebSocket URL
-      wsUrl: 'ws://192.168.8.9:9999/ai_model/ws/voice-stream', // WebSocket URL
-      isConnected: false, // WebSocket是否已连接
-      audioContext: null, // 音频上下文
-      microphone: null, // 麦克风输入节点
-      processor: null, // 音频处理节点
-      robotStatus: 'leaving', // 机器人状态 waiting, speaking, leaving, entering
-      avaterStatus: 'normal', // 头像状态 normal output thinking
-      buffer: '', // 音频缓冲区
-      currentMessage: null, // 当前消息
-      inTag: false, // 是否在标签页
-      tagBuilder: '', // 标签构建器
-      audioBuffer: new Float32Array(0) // 音频缓冲区
-    }
-  },
-  computed: {
-    avaterText() {
-      const textMap = {
-        'normal': '凌霄AI',
-        'thinking': '思考中',
-        'output': '语音中'
-      }
-      return textMap[this.avaterStatus]
+      ],
+      robotStatus: 'leaving',
+      avaterStatus: 'normal',
+      currentMessage: null,
+      thinkStatus: true,
+      jumpedTimePoints: new Set(),
+      SAMPLE_RATE,
+      FRAME_SIZE
     }
   },
   mounted() {
     this.initWebSocket()
-
-    // 处理append-to-body逻辑
     if (this.appendToBody) {
       this.appendToBodyHandler()
     }
   },
-  unmounted() {
-    this.closeWebSocket()
-    this.stopRecording()
-  },
   beforeDestroy() {
-    // 组件销毁前，如果元素被移动到body中，需要移除
     if (this.appendToBody && this.$el.parentElement === document.body) {
       document.body.removeChild(this.$el)
     }
@@ -206,12 +109,23 @@ export default {
     this.stopRecording()
   },
   methods: {
-    // 处理音频播放结束事件
-    onAudioEnded() {
-      this.robotStatus = 'leaving'
-      this.jumpedTimePoints.clear()
+    toggleWindow() {
+      this.visible = !this.visible
+    },
+    handleThinkingClick() {
+      this.thinkStatus = !this.thinkStatus
     },
-    // 处理音频播放时间更新事件
+    handleOverlayClick() {
+      this.visible = false
+    },
+    appendToBodyHandler() {
+      this.$nextTick(() => {
+        if (this.$el.parentElement !== document.body) {
+          document.body.appendChild(this.$el)
+        }
+      })
+    },
+    // 音频时间更新处理
     onTimeUpdate() {
       const audio = this.$refs.audioPlayer
       const currentTime = audio.currentTime
@@ -225,431 +139,31 @@ export default {
         { time: 65, url: '/permission/menu', name: 'permission_menu', title: '菜单管理' }, 
         { time: 75, url: '/permission/role', name: 'permission_role', title: '角色管理' }
       ]
-      // 检查当前时间是否达到跳转点
+
       timeJumpPoints.forEach(point => {
-        // 使用一定的误差范围，确保不会因为播放进度的微小差异而错过跳转点
         if (currentTime >= point.time && currentTime < point.time + 0.5 && !this.jumpedTimePoints.has(point.time)) {
           this.jumpedTimePoints.add(point.time)
-          console.log(`到达时间点 ${point.time} 秒，跳转到 ${point.title}`)
           this.$appOptions.store.dispatch('tags/addTagview', {
             path: point.url,
             fullPath: point.url,
             label: point.title,
             name: point.title,
-            meta: {
-              title: point.title
-            },
+            meta: { title: point.title },
             query: {},
             params: {}
           })
-          this.$appOptions.router.push({
-            path: point.url
-          })
+          this.$appOptions.router.push({ path: point.url })
         }
       })
-
-      console.log('当前播放时间:', currentTime)
-    },
-    play() {
-      this.robotStatus = 'speaking'
-      this.$refs.audioPlayer.play()
     },
-    pause() {
-      this.robotStatus = 'waiting'
-      this.$refs.audioPlayer.pause()
-    },
-    stop() {
+    onAudioEnded() {
       this.robotStatus = 'leaving'
-      this.$refs.audioPlayer.pause()
-      this.$refs.audioPlayer.currentTime = 0
       this.jumpedTimePoints.clear()
-    },
-    initWebSocket() {
-      try {
-        this.ws = new WebSocket(this.wsUrl)
-        this.ws.binaryType = 'arraybuffer'
-
-        this.ws.onopen = async () => {
-          console.log('连接成功')
-          this.isConnected = true
-          this.initAudio()
-        }
-        this.ws.onmessage = (event) => {
-          try {
-            console.log("收到原始消息:", event.data);
-            // 二进制数据直接返回
-            if (event.data instanceof ArrayBuffer) {
-              console.log("收到二进制音频数据");
-              return;
-            }
-            // 解析JSON数据
-            const data = JSON.parse(event.data);
-            console.log("解析后的数据:", data);
-
-            if (data.type === 'config'){
-              console.log('配置信息:', data);
-            } else if (data.code === 0) {
-              if (data.data.type === 'detection') {
-                console.log('检测到唤醒词...');
-                this.avaterStatus = 'normal'
-              } else if (data.data.type === 'Collecting') {
-                console.log('状态: 采集中...');
-                this.avaterStatus = 'thinking'
-              } else if (data.data.type === 'command') {
-                // 根据指令改变机器人的状态
-                console.log('状态: 处理中...')
-                this.analyzeAudioCommand(data.data.category)
-              } else {
-                console.log('状态: 其他...')
-              }
-            } else {
-              console.error("服务器返回错误:", data.msg);
-            }
-          } catch (error) {
-            console.error("消息解析错误:", error);
-          }
-        }
-        this.ws.onclose = () => {
-          console.log('连接关闭')
-          this.isConnected = false
-          if (this.isRecording) {
-            this.stopRecording()
-          }
-          setTimeout(() => {
-            console.log('尝试重新建立连接')
-            if (!this.isConnected) {
-              // 尝试重连
-              this.initWebSocket()
-            }
-          }, 3000)
-        }
-      } catch (error) {
-        console.error('WebSocket连接失败:', error);
-      }
-    },
-    closeWebSocket() {
-      if (this.ws) {
-        this.ws.close()
-      }
-    },
-    createAiMessage() {
-      const message = {
-        id: this.messages.length + 1,
-        type: 'ai',
-        sender: 'AI',
-        time: '',
-        thinking: '',
-        charts: [],
-        content: '',
-      }
-      this.messages.push(message)
-      this.currentMessage = message
-      return message
-    },
-    createUserMessage(content) {
-      const message = {
-        id: this.messages.length + 1,
-        type: 'user',
-        sender: '用户',
-        time: '',
-        content,
-      }
-      this.messages.push(message)
-      this.inputMessage = ''
-      return message
-    },
-    async initAudio() {
-      if (this.isRecording) return;
-      try {
-        this.isMicAvailable = true;
-        // 2. 获取麦克风权限
-        const stream = await navigator.mediaDevices.getUserMedia({
-          audio: {
-            sampleRate: SAMPLE_RATE, // 请求指定采样率
-            channelCount: 1,         // 单声道
-            noiseSuppression: true,
-            echoCancellation: true
-          }
-        });
-
-        // 3. 创建音频处理环境
-        this.audioContext = new AudioContext({ sampleRate: SAMPLE_RATE });
-        const actualSampleRate = this.audioContext.sampleRate;
-        this.microphone = this.audioContext.createMediaStreamSource(stream);
-
-        // 4. 创建音频处理器
-        this.processor = this.audioContext.createScriptProcessor(FRAME_SIZE, 1, 1);
-        this.processor.onaudioprocess = this.processAudio;
-        // 连接处理链
-        this.microphone.connect(this.processor);
-        this.processor.connect(this.audioContext.destination);
-
-        this.isRecording = true;
-
-        console.log(`状态: 录音中 (采样率: ${actualSampleRate}Hz)`)
-      } catch (error) {
-        console.error("音频初始化失败:", error);
-        this.isRecording = false
-        this.isMicAvailable = false
-      }
-    },
-    async handleSend() {
-      if (!this.inputMessage.trim()) {
-        return
-      }
-      const message = this.inputMessage.trim();
-      // 初始化信息
-      this.initState()
-      // 发送消息
-      this.createUserMessage(message)
-      // 创建AI消息
-      this.createAiMessage()
-
-      try {
-        const controller = new AbortController();
-        const token = `Bearer e298f087-85bc-48c2-afb9-7c69ffc911aa`
-        const response = await fetch('/bytserver/api-model/chat/stream', {
-          timeout: 30000,
-          method: 'POST',
-          signal: controller.signal,
-          headers: {
-            'Content-Type': 'application/json' ,
-            'Authorization': token,
-          },
-          body: JSON.stringify({ content: message })
-        });
-        if (!response.ok) {
-          throw new Error(`${response.status}`);
-        }
-
-        const render = response.body.getReader()
-         const decoder = new TextDecoder()
-
-        // eslint-disable-next-line no-constant-condition
-        while (true) {
-          const { done, value } = await render.read()
-          if (done) break
-          const chunk = decoder.decode(value, { stream: true })
-          this.processStreamChunk(chunk)
-        }
-      } catch (error) {
-        console.error('发送消息失败:', error)
-      }
-    },
-    initState() {},
-    // 分析音频命令
-    analyzeAudioCommand(command) {
-      console.log('分析音频命令:', command)
-      // 解析到开始导览，执行机器人进入动画
-      if (command === 'C5') {
-        this.robotStatus = 'entering'
-        setTimeout(() => {
-          this.robotStatus = 'speaking'
-          this.play()
-        }, 3000)
-      }
-      // 继续导览
-      else if (command === 'C8') {
-        this.robotStatus = 'speaking'
-        this.play()
-      }
-      // 解析到暂停导览，执行机器人暂停动画
-      else if (command === 'C7') {
-        this.robotStatus = 'waiting'
-        this.pause()
-      }
-      // 解析到结束导览，执行机器人离开动画
-      else if (command === 'C6') {
-        this.robotStatus = 'leaving'
-        this.stop()
-      }
-    },
-    processStreamChunk(chunk) {
-      console.log('原始数据:', chunk)
-      try {
-        this.buffer += chunk;
-
-        // eslint-disable-next-line no-constant-condition
-        while (true) {
-          const eventEnd = this.buffer.indexOf('\n\n');
-          if (eventEnd === -1) break;
-
-          const eventData = this.buffer.slice(0, eventEnd);
-          this.buffer = this.buffer.slice(eventEnd + 2);
-          console.log('解析数据:', eventData)
-          this.processEventData(eventData);
-        }
-      } catch (error) {
-        console.error('流数据处理异常:', error);
-        this.streaming = false;
-        this.response = this.$t('3d.chat.dataFormatError');
-        this.$forceUpdate();
-      }
-    },
-    processEventData(data) {
-      data.split('\n').forEach(line => {
-        console.log('原始数据:', line)
-        if (!line.startsWith('data:')) return;
-
-        const jsonStr = line.replace(/^data:\s*/, '').trim();
-        if (jsonStr === '[DONE]') return;
-
-        try {
-          const data = this.safeJsonParse(jsonStr);
-          this.processContentDelta(data.choices[0].delta);
-        } catch (e) {
-          console.warn('JSON解析跳过:', e.message);
-        }
-      });
-    },
-    safeJsonParse(jsonStr) {
-      try {
-        return JSON.parse(jsonStr);
-      } catch (error) {
-        console.warn('JSON parse failed:', jsonStr);
-        return null;
-      }
-    },
-    processContentDelta(delta) {
-      const content = delta.content || '';
-      if (!content || !this.currentMessage) return;
-
-      for (let i = 0; i < content.length; i++) {
-        const char = content[i];
-
-        // 处理正在拼接的标签
-        if (this.inTag) {
-          this.tagBuilder += char;
-
-          if (char === '>') {
-            const tag = this.tagBuilder;
-
-            if (tag === '<think>') {
-              this.avaterStatus = 'thinking'
-            } else if (tag === '</think>') {
-              this.avaterStatus = 'output'
-            } else {
-              console.log('无效标签:', tag)
-            }
-
-            // 重置
-            this.inTag = false;
-            this.tagBuilder = '';
-          }
-          continue;
-        }
-
-        // 检测是否是标签开始
-        if (char === '<') {
-          this.inTag = true;
-          this.tagBuilder = '<';
-          continue;
-        }
-
-        // 正常字符处理
-        if (this.avaterStatus === 'thinking') {
-          this.currentMessage.thinking += char;
-        } else {
-          this.currentMessage.content += char;
-        }
-      }
-
-      this.$forceUpdate();
-    },
-    processAudio(event) {
-      if (!this.isRecording) return;
-      // 5. 获取音频数据并处理
-      const inputData = event.inputBuffer.getChannelData(0);
-
-      // 累积音频数据
-      const tempBuffer = new Float32Array(this.audioBuffer.length + inputData.length);
-      tempBuffer.set(this.audioBuffer, 0);
-      tempBuffer.set(inputData, this.audioBuffer.length);
-      this.audioBuffer = tempBuffer;
-
-      // 当累积足够一帧时发送
-      while (this.audioBuffer.length >= FRAME_SIZE) {
-        const frame = this.audioBuffer.slice(0, FRAME_SIZE);
-        this.audioBuffer = this.audioBuffer.slice(FRAME_SIZE);
-
-        // 转换为16位PCM
-        const pcmData = this.floatTo16BitPCM(frame);
-
-        // 通过WebSocket发送
-        if (this.ws && this.ws.readyState === this.ws.OPEN) {
-          this.ws.send(pcmData);
-        }
-      }
-    },
-    floatTo16BitPCM(input) {
-      const output = new Int16Array(input.length);
-      for (let i = 0; i < input.length; i++) {
-        const s = Math.max(-1, Math.min(1, input[i]));
-        output[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
-      }
-      return output.buffer;
-    },
-    toggleWindow() {
-      this.visible = !this.visible
-    },
-    showWindow() {
-      this.visible = true
-    },
-    hideWindow() {
-      this.visible = false
-    },
-    scrollToBottom() {
-      this.$nextTick(() => {
-        const chatArea = this.$refs.chatArea
-        if (chatArea) {
-          chatArea.scrollTop = chatArea.scrollHeight
-        }
-      })
-    },
-    handleKeyDown(e) {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault()
-        this.handleSend()
-      }
-    },
-    stopRecording() {
-      if (!this.isRecording) return;
-      if (this.microphone) this.microphone.disconnect();
-      if (this.processor) this.processor.disconnect();
-      if (this.analyser) this.analyser.disconnect();
-      if (this.audioContext) {
-        this.audioContext.close().catch(e => {
-          console.error("关闭音频上下文失败:", e);
-        });
-      }
-      this.isRecording = false;
-    },
-    // 添加到body的处理函数
-    appendToBodyHandler() {
-      // 确保DOM已经渲染完成
-      this.$nextTick(() => {
-        // 检查元素是否已经在body中
-        if (this.$el.parentElement !== document.body) {
-          // 将组件的根元素移动到body中
-          document.body.appendChild(this.$el)
-        }
-      })
-    },
-    // 处理点击遮罩层事件
-    handleOverlayClick() {
-      this.visible = false
-    },
-  },
-  watch: {
-    messages: {
-      handler() {
-        this.scrollToBottom()
-      },
-      deep: true,
-    },
-  },
+    }
+  }
 }
 </script>
+
 <style scoped>
 .hidden-audio {
   position: absolute;
@@ -657,266 +171,11 @@ export default {
   opacity: 0;
   pointer-events: none;
 }
-.chat-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  z-index: 10000;
-}
 
-::v-deep .el-textarea__inner {
-  border: none !important;
-  padding: 0 5px;
-  font-family: 'PingFang SC' !important;
-}
-::v-deep .el-textarea__inner::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-}
-::v-deep .el-textarea__inner::-webkit-scrollbar-track {
-  background: transparent;
-}
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
 .chat {
   position: fixed;
   bottom: 20px;
   right: 10px;
   z-index: 10001;
 }
-.chat-ai {
-  display: flex;
-  width: 38px;
-  padding: 2px 2px 9px 2px;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  border-radius: 40px;
-  background: linear-gradient(180deg, #3e5beb 0%, #5ca5f9 100%);
-  box-shadow: 0 2px 11.6px 0 rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  user-select: none;
-}
-.chat-robot {
-  width: 150px;
-  height: 200px;
-}
-.chat-robot.entering {
-    background-image: url('./assets/entering.png');
-    background-size: cover;
-  }
-.chat-robot.waiting {
-    background-image: url('./assets/waiting.png');
-    background-size: cover;
-  }
-.chat-robot.speaking {
-    background-image: url('./assets/speaking.png');
-    background-size: cover;
-  }
-.chat-ai-avater {
-  border-radius: 67px;
-  border: 1px solid #0f66e4;
-  background: #124087;
-  display: flex;
-  width: 34px;
-  height: 33px;
-  padding: 2px 2px 1px 2px;
-  justify-content: center;
-  align-items: center;
-  background-size: cover;
-  background-position: center;
-}
-.chat-ai-avater.normal {
-  background-image: url('./assets/normal.png');
-}
-.chat-ai-avater.thinking {
-  background-image: url('./assets/thinking.png');
-}
-.chat-ai-avater.output {
-  background-image: url('./assets/output.png');
-}
-.chat-ai-text {
-  color: #fff;
-  font-family: 'PingFang SC';
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  width: 20px;
-  margin: 0 auto;
-  text-align: center;
-}
-.chat-window-message-user {
-  display: flex;
-  justify-content: flex-end;
-}
-.user-message {
-  max-width: 80%;
-  display: flex;
-  padding: 8px 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  border-radius: 12px;
-  background: #e3ecff;
-}
-.chat-window-bar {
-  display: flex;
-  justify-content: flex-end;
-  padding: 8px;
-}
-.chat-window-message-ai {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  max-width: 100%;
-  border-radius: 12px;
-  background: #f6f8fc;
-  padding: 8px 12px;
-}
-.chat-window {
-  width: 480px;
-  height: 740px;
-  border-radius: 14px;
-  background: #fff;
-  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.16);
-  position: absolute;
-  bottom: 20px;
-  right: 60px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.chat-window-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #eaeaea;
-  background: #fff;
-  padding: 16px;
-  flex-shrink: 0;
-}
-.chat-window-content {
-  flex: 1;
-  padding: 16px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.chat-window-header-title {
-  color: #29414e;
-  font-size: 18px;
-  font-weight: 900;
-  position: relative;
-  padding-left:36px;
-}
-.chat-window-header-title::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 32px;
-  height: 32px;
-  background-image: url('./assets/logo.png');
-  background-size: cover;
-}
-.chat-window-header-close {
-  width: 24px;
-  height: 24px;
-  overflow: hidden;
-  cursor: pointer;
-}
-.chat-window-footer {
-  padding: 16px;
-}
-.chat-window-textarea {
-  min-height: 99px;
-  max-height: 180px;
-  border-radius: 8px;
-  border: 1px solid #f2f2f2;
-  background: #fff;
-  display: flex;
-  flex-direction: column;
-}
-.chat-window-input {
-  padding: 10px 12px;
-  font-size: 16px;
-  font-family: 'PingFang SC';
-}
-.chat-window-send {
-  width: 70px;
-  height: 36px;
-  flex-shrink: 0;
-  border-radius: 6px;
-  background: rgba(43, 128, 246, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-.ai-thinking-time {
-  border-radius: 9px;
-  background: #ECEDF4;
-  color: #86909C;
-  font-family: "Alibaba PuHuiTi 2.0";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  padding: 0 26px 0 26px;
-  height: 28px;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  user-select: none;
-  cursor: pointer;
-}
-.ai-thinking-time::before {
-  content: '';
-  position: absolute;
-  left: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  background: url('./assets/think.png') no-repeat;
-  background-size: cover;
-}
-.ai-thinking-time::after {
-  content: '';
-  position: absolute;
-  right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  background: url('./assets/arrow.png') no-repeat;
-  background-size: cover;
-}
-.ai-thinking-content {
-  color: #86909C;
-  font-family: "Alibaba PuHuiTi 2.0";
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-  padding: 8px 0 8px 12px;
-}
-</style>
+</style>