sg-paisou 0.0.0 → 0.0.1

package/src/components/AIChatSDK/AIChatComponent.vue

@@ -1,963 +0,0 @@
-<template>
-  <div
-    :class="['ai-chat-container', config.customClasses?.container]"
-    :style="mergedStyles.container as StyleValue"
-  >
-    <!-- 普通题 -->
-    <template v-if="questionInfo?.questionType !== 1">
-      <!-- AI头部区域 -->
-      <div
-        :class="['ai-sticky-header', config.customClasses?.header]"
-        :style="mergedStyles.header as StyleValue"
-      >
-        <!-- AI头像 -->
-        <div class="ai-avatar">
-          <img
-            :src="config.avatar?.src || DEFAULT_CONFIG.avatar.src"
-            :alt="config.avatar?.alt || DEFAULT_CONFIG.avatar.alt"
-            :style="{
-              width: config.avatar?.width || DEFAULT_CONFIG.avatar.width,
-              height: config.avatar?.height || DEFAULT_CONFIG.avatar.height,
-              borderRadius: config.avatar?.borderRadius || DEFAULT_CONFIG.avatar.borderRadius
-            }"
-          />
-        </div>
-
-        <!-- AI信息 -->
-        <div class="ai-info">
-          <h3 :style="mergedAIInfoStyles.name">
-            {{ config.aiInfo?.name || DEFAULT_CONFIG.aiInfo.name }}
-          </h3>
-          <p :style="mergedAIInfoStyles.title">
-            {{ config.aiInfo?.title || DEFAULT_CONFIG.aiInfo.title }}
-          </p>
-        </div>
-
-        <!-- 静音按钮 -->
-        <div class="mute-button" @click="handleMuteToggle">
-          <img
-            v-if="isSoundOn"
-            :src="config.muteButton?.soundOnIcon || DEFAULT_CONFIG.muteButton.soundOnIcon"
-            alt="声音开启"
-            :style="{
-              width: config.muteButton?.width || DEFAULT_CONFIG.muteButton.width,
-              height: config.muteButton?.height || DEFAULT_CONFIG.muteButton.height
-            }"
-          />
-          <img
-            v-else
-            :src="config.muteButton?.soundOffIcon || DEFAULT_CONFIG.muteButton.soundOffIcon"
-            alt="声音关闭"
-            :style="{
-              width: config.muteButton?.width || DEFAULT_CONFIG.muteButton.width,
-              height: config.muteButton?.height || DEFAULT_CONFIG.muteButton.height
-            }"
-          />
-        </div>
-      </div>
-
-      <!-- 聊天内容区域 -->
-      <div
-        :class="['chat-content', config.customClasses?.chatContent]"
-        :style="mergedStyles.chatContent as StyleValue"
-      >
-        <!-- 消息列表 -->
-        <div class="chat-messages" ref="messagesContainer">
-          <div
-            v-for="message in messages"
-            :key="message.id"
-            :class="['message', `${message.type}-message`]"
-            :style="{ marginBottom: mergedStyles.messages?.messageGap }"
-          >
-            <template v-if="message.type === 'ai'">
-              <div class="message-wrapper">
-                  <div
-                    class="message-content"
-                    :style="mergedStyles.messages?.aiMessage"
-                    @touchstart="!isAIResponding && !message.disableLongPress && handleLongPressStart($event, message)"
-                    @touchend="!message.disableLongPress && handleLongPressEnd"
-                    @mousedown="!isAIResponding && !message.disableLongPress && handleLongPressStart($event, message)"
-                    @mouseup="!message.disableLongPress && handleLongPressEnd"
-                    @mouseleave="!message.disableLongPress && handleLongPressEnd"
-                  >
-                    <div class="message-text-wrapper">
-                      <span v-html="renderContent(message.content)"></span>
-                      <!-- 打字/流式接收时的呼吸灯 - 紧跟在文字后面 -->
-                      <span v-if="message.isTyping || message.isStreaming" class="typing-indicator"></span>
-                    </div>
-                    <!-- 操作按钮 (Not my question / Start Explaining) - AI消息 -->
-                    <div v-if="message.showButtons" class="message-buttons">
-                      <button class="btn-secondary" @click="handleNotMyQuestion">Not my question</button>
-                      <button class="btn-primary" @click="handleStartExplaining">Start Explaining</button>
-                    </div>
-
-                    <!-- 只显示反馈按钮（追问后的回复） -->
-                    <div v-if="message.showFeedbackOnly" class="feedback-actions-only">
-                      <img :src="message.isPlayingTTS ? volumeingIcon : volumeIcon" 
-                           @click="handleMessageFeedback(message.isPlayingTTS ? 'volumeing' : 'volume', message)" 
-                           :alt="message.isPlayingTTS ? '播放中' : '播放'" />
-                      <img :src="message.vote === 'upvote' ? praiseingIcon : praiseIcon"
-                           @click="handleMessageFeedback('upvote', message)"
-                           :alt="message.vote === 'upvote' ? '已点赞' : '点赞'" />
-                      <img :src="message.vote === 'downvote' ? trampleingIcon : trampleIcon"
-                           @click="handleMessageFeedback('downvote', message)"
-                           :alt="message.vote === 'downvote' ? '已不喜欢' : '不喜欢'" />
-                    </div>
-
-                    <!-- 反馈按钮和 Continue 按钮 - 流式消息完成后显示 -->
-                    <div v-if="message.showFeedbackAndContinue" class="feedback-and-continue">
-                      <div class="feedback-actions">
-                        <img :src="message.isPlayingTTS ? volumeingIcon : volumeIcon" 
-                             @click="handleMessageFeedback(message.isPlayingTTS ? 'volumeing' : 'volume', message)" 
-                             :alt="message.isPlayingTTS ? '播放中' : '播放'" />
-                        <img :src="message.vote === 'upvote' ? praiseingIcon : praiseIcon"
-                             @click="handleMessageFeedback('upvote', message)"
-                             :alt="message.vote === 'upvote' ? '已点赞' : '点赞'" />
-                        <img :src="message.vote === 'downvote' ? trampleingIcon : trampleIcon"
-                             @click="handleMessageFeedback('downvote', message)"
-                             :alt="message.vote === 'downvote' ? '已不喜欢' : '不喜欢'" />
-                      </div>
-                      <button class="btn-continue" @click="handleContinueClick(message.id)">Continue</button>
-                    </div>
-
-                  </div>
-              </div>
-            </template>
-
-            <!-- 用户消息：头像在右侧 -->
-            <template v-else>
-              <div class="message-wrapper user-message-wrapper">
-                <div
-                  class="message-content"
-                  :style="mergedStyles.messages?.userMessage"
-                  :class="{ 'background-transparent': message.imageUrl }"
-                >
-                  <!-- 图片消息 -->
-                  <div v-if="message.imageUrl" class="message-image">
-                    <img :src="message.imageUrl" alt="Question Image" @click="openImagePreview(message.imageUrl)" />
-                  </div>
-
-                  <!-- 文本消息 -->
-                  <div v-html="renderContent(message.content)"></div>
-
-                  <!-- 用户消息的选项 -->
-                  <div v-if="message.options && message.options.length > 0" class="options">
-                    <span
-                      v-for="(option, index) in message.options"
-                      :key="index"
-                      v-html="renderContent(option)"
-                    ></span>
-                  </div>
-                </div>
-                <div class="message-avatar user-avatar">
-                  <img
-                    :src="questionInfo?.avatar || config.userAvatar?.src || DEFAULT_CONFIG.userAvatar.src"
-                    :alt="config.userAvatar?.alt || DEFAULT_CONFIG.userAvatar.alt"
-                    :style="{
-                      width: config.userAvatar?.width || DEFAULT_CONFIG.userAvatar.width,
-                      height: config.userAvatar?.height || DEFAULT_CONFIG.userAvatar.height,
-                      borderRadius: config.userAvatar?.borderRadius || DEFAULT_CONFIG.userAvatar.borderRadius
-                    }"
-                  />
-                </div>
-              </div>
-            </template>
-
-            <!-- 讲题完成区域 - Was this helpful + 追问 + Snap another one -->
-            
-            <div v-if="message.showCompletionSection" class="completion-section">
-              <!-- Was this solution helpful? -->
-              <div class="helpful-section">
-                <span class="helpful-text">Was this solution helpful?</span>
-                <img :src="smilingIcon"
-                     @click="handleHelpfulReaction('upvote')"
-                     :class="{ 'voted': message.vote === 'upvote' }"
-                     :alt="message.vote === 'upvote' ? '已点赞' : '赞'" />
-                <img :src="angerIcon"
-                     @click="handleHelpfulReaction('downvote')"
-                     :class="{ 'voted': message.vote === 'downvote' }"
-                     :alt="message.vote === 'downvote' ? '已踩' : '踩'" />
-              </div>
-
-              <!-- 追问问题列表 -->
-              <div v-if="message.followUpQuestions && message.followUpQuestions.length > 0" class="follow-up-questions">
-                <div
-                  v-for="(question, index) in message.followUpQuestions"
-                  :key="index"
-                  class="follow-up-item"
-                  @click="handleFollowUpClick(question, message.id)"
-                >
-                  <img :src="starIcon" alt="追问" />
-                  <span class="question-text">{{ question }}</span>
-                </div>
-              </div>
-
-              <!-- Snap Another One 按钮 -->
-              <button class="btn-snap-another" @click="handleSnapAnother">
-                <img :src="cameraIcon" alt="拍照" />
-                Snap Another One
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 长按反馈弹窗遮罩 -->
-      <div
-        v-if="showMessageFeedback"
-        class="feedback-overlay"
-        @click="closeFeedbackPopup"
-      ></div>
-
-      <!-- 长按反馈弹窗 -->
-      <div
-        v-if="showMessageFeedback"
-        class="message-feedback-popup"
-        :class="{ 'show-above': feedbackPosition.showAbove }"
-        :style="{
-          top: feedbackPosition.top + 'px',
-          left: feedbackPosition.left + 'px'
-        }"
-      >
-        <!-- 气泡小三角 -->
-        <div class="popup-arrow"></div>
-
-        <!-- 反馈按钮 -->
-        <div class="popup-buttons">
-          <img :src="getCurrentMessage()?.isPlayingTTS ? volumeingIcon : volumeIcon" 
-               @click="handleMessageFeedback(getCurrentMessage()?.isPlayingTTS ? 'volumeing' : 'volume', currentLongPressMessage)" 
-               :alt="getCurrentMessage()?.isPlayingTTS ? '播放中' : '播放'" />
-          <img :src="getCurrentMessage()?.vote === 'upvote' ? praiseingIcon : praiseIcon"
-               @click="handleMessageFeedback('upvote',currentLongPressMessage)"
-               :alt="getCurrentMessage()?.vote === 'upvote' ? '已点赞' : '点赞'" />
-          <img :src="getCurrentMessage()?.vote === 'downvote' ? trampleingIcon : trampleIcon"
-               @click="handleMessageFeedback('downvote',currentLongPressMessage)"
-               :alt="getCurrentMessage()?.vote === 'downvote' ? '已不喜欢' : '不喜欢'" />
-        </div>
-      </div>
-
-      <!-- 输入区域 -->
-      <div
-        :class="['chat-input-container', config.customClasses?.inputContainer]"
-        :style="mergedStyles.inputContainer as StyleValue"
-      >
-        <!-- 快捷回复按钮 -->
-        <div
-          v-if="config.feedback?.show !== false && feedbackButtons.length > 0 && isQuickReply"
-          class="feedback-buttons"
-          :class="{ disabled: isAIResponding }"
-          :style="(config.feedback?.containerStyle || {}) as StyleValue"
-        >
-          <button
-            v-for="button in feedbackButtons"
-            :key="button.id"
-            class="feedback-btn"
-            :style="button.style as StyleValue"
-            @click="handleQuickReply(button.text)"
-            :disabled="isAIResponding"
-          >
-            <img
-              v-if="button.icon"
-              :src="button.icon"
-              alt=""
-              style="width: 24px; height: 24px; vertical-align: middle; margin-right: 8px;"
-            />
-            {{ button.text }}
-          </button>
-        </div>
-
-        <!-- 输入框 -->
-        <div class="input-wrapper" :style="inputWrapperStyle">
-          <input
-            type="text"
-            v-model="inputMessage"
-            :placeholder="config.input?.placeholder || DEFAULT_CONFIG.input.placeholder"
-            @keyup.enter="handleSendMessage"
-            class="chat-input"
-            :style="inputStyle"
-            :disabled="isAIResponding"
-          />
-          <div
-            class="send-button"
-            @click="handleSendMessage"
-            :class="{ disabled: !inputMessage.trim() || isAIResponding }"
-            :style="sendButtonStyle"
-          >
-            <img
-              :src="config.input?.sendIcon || DEFAULT_CONFIG.input.sendIcon"
-              alt="发送"
-              :style="{
-                width: config.input?.sendIconWidth || DEFAULT_CONFIG.input.sendIconWidth,
-                height: config.input?.sendIconHeight || DEFAULT_CONFIG.input.sendIconHeight
-              }"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-    <!--特殊题-->
-    <SpecialQuestions v-else-if="questionInfo?.questionType === 1" @feedback="handleFeedback" :isDownVoted="isDownVoted" :solutionAnswer="solutionAnswerData" />
-  </div>
-
-  <ImagePreview :visible="showImagePreview" :image-url="previewImageUrl" @close="closeImagePreview" />
-  <Dialogs :dialogType="dialogType" :visible="isDialogVisible" :feedbackType="feedbackType" :currentLongPressMessageId="currentLongPressMessageId" @close="handleClose" />
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, nextTick, onMounted, watch } from 'vue'
-import type { StyleValue } from 'vue'
-import { renderLatex } from './utils/latex'
-import {
-  mergeConfig,
-  mergeStyles,
-  getMergedAIInfoStyles,
-  getFeedbackButtons,
-  getInputWrapperStyle,
-  getInputStyle,
-  getSendButtonStyle
-} from './utils/mergeConfig'
-import {
-  IMessage,
-  IAIChatConfig,
-  IFeedbackButton, DEFAULT_CONFIG
-} from './types'
-import SpecialQuestions from './component/SpecialQuestions.vue'
-import Dialogs from './component/Dialogs.vue'
-import ImagePreview from '../ImagePreview.vue'
-import { Typewriter } from '../../utils/typewriter'
-import { explainQuestionSSE } from '../../utils/useSSE'
-import { feedbackApi } from '../../utils/request'
-import { showMessageToast } from '../../utils/messageToast'
-import { ttsPlayer, playTTSAudio, playMessageTTS, stopMessageTTS } from '../../utils/tts'
-
-import volumeIcon from '@/assets/images/volume-icon.png'
-import volumeingIcon from '@/assets/images/volumeing-icon.png'
-import praiseIcon from '@/assets/images/praise-icon.png'
-import praiseingIcon from '@/assets/images/praiseing-icon.png'
-import trampleIcon from '@/assets/images/trample-icon.png'
-import trampleingIcon from '@/assets/images/trampleing-icon.png'
-import smilingIcon from '@/assets/images/smiling.png'
-import angerIcon from '@/assets/images/anger.png'
-import starIcon from '@/assets/images/star-icon.png'
-import cameraIcon from '@/assets/images/Camera-icon.png'
-
-// Props定义
-const props = withDefaults(defineProps<{
-  config: IAIChatConfig
-  questionInfo: any
-}>(), {
-  config: () => ({}),
-  questionInfo: () => ({})
-})
-
-// Emits定义
-const emit = defineEmits<{
-  messageSend: [message: string]
-  feedback: [feedbackId: string]
-  muteToggle: [isMuted: boolean]
-  'not-my-question': []
-  'snap-another': []
-}>()
-
-// 响应式数据
-const isSoundOn = ref(true) // 默认开启声音
-const inputMessage = ref('') // 输入框内容
-const messages = ref<IMessage[]>([]) // 消息列表
-const messagesContainer = ref<HTMLElement>() // 消息容器
-const isDialogVisible = ref(false) // 弹窗是否显示
-const dialogType = ref<'insolubility' | 'feedback'>('insolubility') // 弹窗类型
-const feedbackType = ref<'angry' | 'thumbsDown'>('angry') // 反馈类型
-const currentTypewriter = ref<Typewriter | null>(null) // 打字机
-const currentStreamAbort = ref<(() => void) | null>(null) // 当前流的中止函数
-const questionConfirmMessageId = ref<string>('')  // 用于存储需要确认的问题消息ID
-const isDownVoted = ref(false) // 是否已不喜欢
-const isQuickReply = ref(false) // 是否是快捷回复
-
-// 长按反馈相关
-const showMessageFeedback = ref(false)
-const feedbackPosition = ref({ top: 0, left: 0, showAbove: false })
-const currentLongPressMessage = ref<any>(null)
-const currentLongPressMessageId = ref<string>('')
-
-// 图片预览相关
-const showImagePreview = ref(false)
-const previewImageUrl = ref('')
-let longPressTimer: any = null
-
-// AI响应状态（用于禁用输入、长按等操作）
-const isAIResponding = ref(true)
-const solutionAnswerData = ref<{ solution: any, answer: any }>({ solution: {}, answer: '' })
-
-const questionInfo = computed(() => {
-  sessionStorage.setItem('questionInfo', JSON.stringify(props.questionInfo))
-  return props.questionInfo
-})
-
-// 合并配置
-const config = computed<IAIChatConfig>(() => mergeConfig(props.config))
-
-// 合并样式
-const mergedStyles = computed(() => mergeStyles(props.config))
-
-// AI信息样式
-const mergedAIInfoStyles = computed(() => getMergedAIInfoStyles(mergeConfig(props.config)))
-
-// 快捷回复按钮
-const feedbackButtons = computed<IFeedbackButton[]>(() => getFeedbackButtons(mergeConfig(props.config)))
-
-// 输入框样式
-const inputWrapperStyle = computed(() => getInputWrapperStyle(mergeConfig(props.config)))
-
-const inputStyle = computed(() => getInputStyle())
-
-const sendButtonStyle = computed(() => getSendButtonStyle())
-
-// 内容渲染
-const renderContent = (content: string): string => {
-  return config.value.enableLatex ? renderLatex(content) : content
-}
-
-// 全局声音开关
-const handleMuteToggle = () => {
-  isSoundOn.value = !isSoundOn.value
-  
-  // 控制TTS播放
-  ttsPlayer.setMuted(!isSoundOn.value)
-  
-  // 调用配置中的回调
-  config.value.muteButton?.onClick?.(isSoundOn.value)
-  console.log('AI聊天声音状态:', isSoundOn.value ? '静音' : '开启')
-}
-
-const handleSendMessage = () => {
-  if (!inputMessage.value.trim()) return
-  const message = inputMessage.value.trim()
-
-  // 添加用户消息
-  addMessage({
-    id: `user_${Date.now()}`,
-    type: 'user',
-    content: message,
-    timestamp: Date.now()
-  })
-
-  // 清空输入框
-  inputMessage.value = ''
-
-  // 调用配置中的回调
-  config.value.input?.onSend?.(message)
-
-  // 触发事件
-  emit('messageSend', message)
-  // 发送消息
-  setTimeout(() => sendStreamMessage(message), 300)
-}
-
-// 辅助函数：查找消息
-const findMessage = (id: string) => messages.value.find(m => m.id === id)
-
-// 获取当前长按消息
-const getCurrentMessage = () => findMessage(currentLongPressMessageId.value)
-
-// 通用流式消息处理函数
-const sendStreamMessage = (content: string, isFollowUp = false) => {
-  if (!props.questionInfo?.sessionId) {
-    console.error('Missing sessionId for streaming')
-    return
-  }
-
-  isAIResponding.value = true
-
-  const streamMessageId = `ai_${Date.now()}`
-  const streamMessage: IMessage = {
-    id: streamMessageId,
-    type: 'ai',
-    content: '',
-    showFeedbackAndContinue: false,
-    isStreaming: true,
-    timestamp: Date.now()
-  }
-
-  messages.value.push(streamMessage)
-  nextTick(() => scrollToBottom())
-
-  const handleSSEMessage = (e: any) => {
-    const msg = findMessage(streamMessageId)
-    if (!msg) return
-
-    if (e.event === 'finish') {
-      msg.isStreaming = false
-      msg.showFeedbackAndContinue = !isFollowUp
-      currentStreamAbort.value = null
-      isAIResponding.value = false
-    } else if (e.event === 'complete') {
-      msg.isStreaming = false
-      msg.showCompletionSection = true
-      if (e.data?.followUpQuestions) {
-        msg.followUpQuestions = e.data.followUpQuestions
-      }
-      currentStreamAbort.value = null
-      isAIResponding.value = false
-    } else if (e.data) {
-      const newContent = typeof e.data === 'string' ? e.data : e.data.content || ''
-      msg.content += newContent
-      
-      // 请求并播放TTS音频
-      if (newContent && isSoundOn.value) {
-        const sessionDetailId = e.msgId || e.id || streamMessageId
-        playTTSAudio(
-          props.questionInfo.sessionId,
-          sessionDetailId,
-          newContent,
-          !isSoundOn.value
-        ).catch(err => console.error('TTS playback error:', err))
-      }
-      
-      nextTick(() => scrollToBottom())
-    }
-  }
-
-  const handleSSEError = (error: any) => {
-    console.error('SSE Error:', error)
-    const msg = findMessage(streamMessageId)
-    if (msg) {
-      msg.isStreaming = false
-      msg.content += '\n\n[Error: Failed to receive response]'
-    }
-    currentStreamAbort.value = null
-    isAIResponding.value = false
-  }
-
-  const handleSSEClose = () => {
-    const msg = findMessage(streamMessageId)
-    if (msg) {
-      msg.isStreaming = false
-      if (!isFollowUp) {
-        msg.showFeedbackAndContinue = false
-      } else {
-        msg.showFeedbackOnly = true
-      }
-    }
-    currentStreamAbort.value = null
-    isAIResponding.value = false
-  }
-
-  const { startSSE, abort } = explainQuestionSSE(
-    {
-      sessionId: props.questionInfo.sessionId,
-      content,
-      recommendQuestions: false
-    },
-    handleSSEMessage,
-    handleSSEError,
-    handleSSEClose
-  )
-
-  currentStreamAbort.value = abort
-  startSSE()
-}
-
-// 公共方法
-const addMessage = (message: IMessage) => {
-  messages.value.push(message)
-  nextTick(() => {
-    scrollToBottom()
-  })
-}
-
-// 添加AI消息
-const addAIMessage = (content: string, options?: string[]) => {
-  addMessage({
-    id: `ai_${Date.now()}`,
-    type: 'ai',
-    content,
-    options,
-    timestamp: Date.now()
-  })
-}
-
-// 添加用户消息
-const addUserMessage = (content: string, options?: string[]) => {
-  addMessage({
-    id: `user_${Date.now()}`,
-    type: 'user',
-    content,
-    options,
-    timestamp: Date.now()
-  })
-}
-
- // 清空消息
-const clearMessages = () => messages.value = []
-
-// 滚动到底部
-const scrollToBottom = () => { 
-  if (messagesContainer.value) {
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-  }
-}
-
-// 打字机效果发送AI消息
-const typeAIMessage = (content: string, onComplete?: () => void, disableLongPress?: boolean) => {
-  const messageId = `ai_${Date.now()}`
-  const message: IMessage = {
-    id: messageId,
-    type: 'ai',
-    content: '',
-    isTyping: true,
-    timestamp: Date.now(),
-    disableLongPress: disableLongPress || false
-  }
-
-  messages.value.push(message)
-  nextTick(() => scrollToBottom())
-
-  // 创建打字机实例
-  currentTypewriter.value = new Typewriter({
-    text: content,
-    wordDelay: 10,  // 每个单词10ms
-    onUpdate: (displayedText) => {
-      const msg = findMessage(messageId)
-      if (msg) {
-        msg.content = displayedText
-        nextTick(() => scrollToBottom())
-      }
-    },
-    onComplete: () => {
-      const msg = findMessage(messageId)
-      if (msg) {
-        msg.isTyping = false
-      }
-      currentTypewriter.value = null
-      onComplete?.()
-    }
-  })
-
-  currentTypewriter.value.start()
-}
-
-// 图片预览相关函数
-const openImagePreview = (imageUrl: string) => { // 打开图片预览
-  previewImageUrl.value = imageUrl
-  showImagePreview.value = true
-}
-
-const closeImagePreview = () => { // 关闭图片预览
-  showImagePreview.value = false
-  previewImageUrl.value = ''
-}
-
-// 处理 Continue 按钮点击
-const handleContinueClick = (messageId: string) => {
-  const msg = findMessage(messageId)
-  if (msg) msg.showFeedbackAndContinue = false
-
-  addUserMessage('Continue Explaining')
-  setTimeout(() => sendStreamMessage('Continue Explaining'), 300)
-}
-
-// 处理快捷回复按钮
-const handleQuickReply = (reply: string) => {
-  // 查找最后一条AI消息并隐藏反馈按钮
-  for (let i = messages.value.length - 1; i >= 0; i--) {
-    if (messages.value[i].type === 'ai') {
-      messages.value[i].showFeedbackAndContinue = false
-      messages.value[i].showCompletionSection = false
-      break
-    }
-  }
-
-  addUserMessage(reply)
-  setTimeout(() => sendStreamMessage(reply), 300)
-}
-
-// 处理追问点击
-const handleFollowUpClick = (question: string, messageId: string) => {
-  const msg = findMessage(messageId)
-  if (msg) msg.showCompletionSection = false
-
-  addUserMessage(question)
-  setTimeout(() => sendStreamMessage(question, true), 300)
-}
-
-// 处理 Snap Another One 按钮
-const handleSnapAnother = () => emit('snap-another')
-
-// 处理"Start Explaining"按钮
-const handleStartExplaining = () => {
-  // 隐藏AI消息上的按钮
-  const msg = findMessage(questionConfirmMessageId.value)
-  if (msg) msg.showButtons = false
-  isAIResponding.value = false
-  // 发送用户消息
-  addUserMessage('Start Explaining')
-  // 开始流式解释
-  setTimeout(() => sendStreamMessage('Start Explaining'), 300)
-  isQuickReply.value = true
-}
-
-// 初始化普通题的对话流程
-const initNormalQuestionFlow = () => {
-  const isNormalQuestion = props.questionInfo?.questionType === 0 || props.questionInfo?.questionType === '0'
-  if (isNormalQuestion) {
-  }
-
-  // 清空消息
-  messages.value = []
-
-  // 1. 用户消息1：文本 "Could you help me solve this question?"
-  const userTextMessage: IMessage = {
-    id: `user_${Date.now()}`,
-    type: 'user',
-    content: 'Could you help me solve this question?',
-    timestamp: Date.now()
-  }
-  messages.value.push(userTextMessage)
-  nextTick(() => scrollToBottom())
-
-  // 2. 用户消息2：图片
-  setTimeout(() => {
-    const imageUrl = props.questionInfo?.imgUrl || props.questionInfo?.imagePath
-
-    if (imageUrl) {
-      const userImageMessage: IMessage = {
-        id: `user_${Date.now()}`,
-        type: 'user',
-        content: '',
-        imageUrl: imageUrl,
-        timestamp: Date.now()
-      }
-      messages.value.push(userImageMessage)
-      nextTick(() => scrollToBottom())
-    }
-    if (isNormalQuestion) {
-      dialogType.value = 'insolubility'
-      isDialogVisible.value = true
-      return
-    }
-    // 3. AI打字机回复：Sure, Please confirm the question.
-    setTimeout(() => {
-      typeAIMessage('Sure, Please confirm the question.', () => {
-        playTTSAudio(
-          props.questionInfo.sessionId,
-          questionConfirmMessageId.value,
-          'Sure, Please confirm the question.',
-          !isSoundOn.value
-        ).catch(err => console.error('TTS playback error:', err))
-        // 4. AI消息：orcText 打字机效果 + 操作按钮（打字机完成后显示）
-        setTimeout(() => {
-          const orcText = props.questionInfo?.orcText || 'Question text here'
-          questionConfirmMessageId.value = `ai_${Date.now()}`
-
-          // 先添加不带按钮的AI消息
-          const confirmMessage: IMessage = {
-            id: questionConfirmMessageId.value,
-            type: 'ai',
-            content: '',
-            showButtons: false,
-            isTyping: true,
-            timestamp: Date.now(),
-            disableLongPress: true
-          }
-          messages.value.push(confirmMessage)
-          nextTick(() => scrollToBottom())
-
-          // 启动打字机效果显示 orcText
-          currentTypewriter.value = new Typewriter({
-            text: orcText,
-            wordDelay: 10,
-            onUpdate: (displayedText) => {
-              const msg = findMessage(questionConfirmMessageId.value)
-              if (msg) {
-                msg.content = displayedText
-                nextTick(() => scrollToBottom())
-              }
-            },
-            onComplete: () => {
-              const msg = findMessage(questionConfirmMessageId.value)
-              if (msg) {
-                msg.isTyping = false
-                // 打字机完成后，显示按钮
-                  msg.showButtons = true
-                  nextTick(() => scrollToBottom())
-              }
-              currentTypewriter.value = null
-            }
-          })
-
-          currentTypewriter.value.start()
-        }, 50)
-      }, true)
-    }, 50)
-  }, 10)
-}
-
-
-// 反馈相关方法
-
-const handleClose = (messageId?: string) => {
-  if (messageId) {
-    const message = findMessage(messageId)
-    if (message) {
-      message.vote = 'downvote'
-      message.isDownvote = 1
-    }
-  }
-  if (feedbackType.value === 'angry') isDownVoted.value = true
-  isDialogVisible.value = false
-}
-
-// 特殊题反馈
-const handleFeedback = async (type?: 'upvote' | 'downvote', isDownVoted?: boolean) => {
-  if (!type) return
-  if (type === 'upvote') {
-    await feedbackApi({ subjectId: props.questionInfo?.sessionId, vote: 'upvote' })
-  } else if (type === 'downvote') {
-    if (isDownVoted) {
-      await feedbackApi({ subjectId: props.questionInfo?.sessionId, vote: 'downvote' })
-      return
-    }
-    isDialogVisible.value = true
-    dialogType.value = 'feedback'
-    feedbackType.value = 'angry'
-  }
-}
-
-// 关闭长按反馈弹窗
-const closeFeedbackPopup = () => {
-  showMessageFeedback.value = false
-  currentLongPressMessageId.value = ''
-}
-
-// 处理消息下方的反馈按钮
-const handleMessageFeedback = async (type: 'upvote' | 'downvote' | 'volume' | 'volumeing', message: any) => {
-  const targetMessageId = message.id || currentLongPressMessageId.value
-  const msg = findMessage(targetMessageId)
-  
-  if (type === 'volume' || type === 'volumeing') { // 播放/停止TTS
-    if (!msg) return
-    
-    // 如果正在播放，则停止
-    if (msg.isPlayingTTS) {
-      stopMessageTTS(targetMessageId)
-      msg.isPlayingTTS = false
-    } else {
-      // 开始播放
-      msg.isPlayingTTS = true
-      await playMessageTTS(
-        props.questionInfo.sessionId,
-        targetMessageId,
-        msg.content,
-        () => {
-          // 播放开始
-          console.log('[TTS] Started playing message:', targetMessageId)
-        },
-        () => {
-          // 播放结束
-          if (msg) {
-            msg.isPlayingTTS = false
-          }
-          console.log('[TTS] Finished playing message:', targetMessageId)
-        }
-      )
-    }
-  } else if (type === 'upvote') { // 点赞
-    await feedbackApi({ subjectId: targetMessageId, vote: 'upvote' })
-    if (msg) {
-      msg.vote = 'upvote'
-    }
-  } else if (type === 'downvote') { // 不喜欢
-    if(message.isDownvote === 1) {
-      await feedbackApi({ subjectId: targetMessageId, vote: 'downvote' })
-      if (msg) {
-        msg.vote = 'downvote'
-      }
-      return
-    }
-    isDialogVisible.value = true
-    dialogType.value = 'feedback'
-    feedbackType.value = 'thumbsDown'
-    currentLongPressMessageId.value = targetMessageId
-  }
-}
-
-// 处理"Not my question"按钮
-const handleNotMyQuestion = async () => {
-  await feedbackApi({ subjectId: props.questionInfo?.sessionId, question: 'Not my question' })
-  showMessageToast()
-}
-
-// 处理 "Was this helpful" 的反馈
-const handleHelpfulReaction = async (type: 'upvote' | 'downvote') => {
-
-  if (type === 'upvote') { // 点赞
-    await feedbackApi({ subjectId: props.questionInfo?.sessionId, vote: 'upvote' })
-  } else if (type === 'downvote') { // 不喜欢
-    if (isDownVoted.value) {
-      await feedbackApi({ subjectId: props.questionInfo?.sessionId, vote: 'downvote' })
-      return
-    }
-    isDialogVisible.value = true
-    dialogType.value = 'feedback'
-    feedbackType.value = 'angry'
-  }
-}
-
-// 长按开始
-const handleLongPressStart = (event: TouchEvent | MouseEvent, message: any) => {
-  longPressTimer = setTimeout(() => showFeedbackPopup(event, message), 500)
-}
-
-// 长按结束
-const handleLongPressEnd = () => {
-  if (longPressTimer) {
-    clearTimeout(longPressTimer)
-    longPressTimer = null
-  }
-}
-
-// 显示反馈弹窗
-const showFeedbackPopup = (event: TouchEvent | MouseEvent, message: any) => {
-  const target = event.target as HTMLElement
-  const messageElement = target.closest('.message-content')
-  if (!messageElement) return
-
-  const rect = messageElement.getBoundingClientRect()
-  const showAbove = rect.bottom > window.innerHeight / 2
-  const popupWidth = 176
-  const centerLeft = rect.left + (rect.width / 2) - (popupWidth / 2)
-
-  feedbackPosition.value = {
-    top: showAbove ? rect.top - 60 : rect.bottom + 5,
-    left: Math.max(10, Math.min(centerLeft, window.innerWidth - popupWidth - 10)),
-    showAbove
-  }
-  currentLongPressMessage.value = message
-  currentLongPressMessageId.value = message.id
-  showMessageFeedback.value = true
-}
-
-onMounted(() => {})
-
-// 监听 questionInfo 变化，初始化普通题流程
-watch(() => props.questionInfo, (newVal) => {
-  if (newVal) {
-    initNormalQuestionFlow()
-  }
-}, { immediate: true, deep: true })
-
-// 暴露方法
-defineExpose({
-  addMessage,
-  addAIMessage,
-  addUserMessage,
-  clearMessages,
-  scrollToBottom,
-  messages: messages.value
-})
-</script>
-
-<style scoped lang="scss">
-  @import './style.scss';
-</style>
-