ai-manus/chat-client/src/views/chatweb/composables/useMessageHandlers.ts

import { ref, reactive, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import { throttle } from 'lodash'
import { sendChatMessage, stopMessagesStream, getFilePathList, type ChatMessageResponse, type TraceData, type TraceFile, type TraceContext } from '@/api/chat'
import { useI18n } from 'vue-i18n'

interface EChartData {
  id: string
  option: any
}

interface Message {
  text: string
  isUser: boolean
  isLoading?: boolean
  formattedText?: string
  sources?: TraceData
  conversationId?: string
  messageId?: string
  echarts?: EChartData[]
  isOpenRemark?: boolean
}

export function useMessageHandlers() {
  const { t } = useI18n()
  
  const isLoading = ref(false)
  const currentTaskId = ref('')
  const showStopButton = ref(false)
  const hoveredMessageIndex = ref(-1)
  const editingMessageIndex = ref(-1)
  const editingMessageText = ref('')

  // 解析ECharts代码块
  const parseECharts = (text: string): { processedText: string; echarts: EChartData[] } => {
    const echartsRegex = /```echarts\n([\s\S]*?)\n```/g
    const echarts: EChartData[] = []
    let match
    let processedText = text

    while ((match = echartsRegex.exec(text)) !== null) {
      try {
        const echartsJson = match[1].trim()
        const option = JSON.parse(echartsJson)
        const id = `echart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
        
        echarts.push({ id, option })
        
        // 将echarts代码块替换为占位符
        processedText = processedText.replace(match[0], `<div class="echart-placeholder" data-chart-id="${id}"></div>`)
      } catch (error) {
        console.error('解析ECharts配置失败:', error)
        // 如果解析失败，保留原始代码块
      }
    }

    return { processedText, echarts }
  }

  // 格式化答案
  const formatAnswer = async (text: string) => {
    try {
      // 先解析ECharts代码块
      const { processedText, echarts } = parseECharts(text)
      
      // 配置marked以更好地支持表格  
      const html = await marked.parse(processedText, {
        gfm: true,
        breaks: true,
        async: true
      })

      // 为表格添加容器包装和强制样式属性
      const wrappedHtml = html.replace(
        /<table>/g, 
        `<details class="table-wrapper" open>
        <summary>
            Expand / Collapse table
        </summary>
        <div class="table-container"><table class="excel-table" border="1" width="auto" cellspacing="0" cellpadding="0">`
      ).replace(
      /<\/table>/g,
      '</table></div></details>'

      ).replace(
        /<th>/g,
        '<th style="border: 1px solid #cbd5e1; padding: 12px; background: #f1f5f9;">'
      ).replace(
        /<td>/g,
        '<td style="border: 1px solid #cbd5e1; padding: 12px;">'
      ).replace(/<img /g, '<img loading="lazy" style="max-width: 100%; display: block; margin: 1rem auto;" ')

      const sanitizedHtml = DOMPurify.sanitize(wrappedHtml, {
        ALLOWED_TAGS: [
          'strong', 'em', 'code', 'pre', 'a', 'br', 'p', 
          'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'span',
          'blockquote', 'hr', 'table', 'thead', 'tbody',
          'tr', 'th', 'td', 'div', 'details', 'summary', 'img'
        ],
        ALLOWED_ATTR: ['href', 'target', 'class', 'style', 'data-chart-id', 'border', 'cellspacing', 'cellpadding', 'open','src', 'alt', 'loading', 'style']
      }) as string

      console.log('Markdown输入:', processedText)
      console.log('生成的HTML:', sanitizedHtml)

      return { html: sanitizedHtml, echarts }
    } catch (error) {
      console.error('Error formatting answer:', error)
      return { html: text, echarts: [] }
    }
  }

  // 解析think标签
  const parseThink = (text: string) => {
    const thinkRegex = /<think>(.*?)<\/think>/s
    const match = text.match(thinkRegex)
    return {
      think: match?.[1] || '',
      answer: match ? text.replace(thinkRegex, '').trim() : text,
    }
  }

  // 生成Excel文件名 (格式: YYYYMMDDHHMM.excel)
  const generateExcelFileName = (timestamp: number = Date.now()) => {
    const date = new Date(timestamp)
    const year = date.getFullYear()
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    const hour = date.getHours().toString().padStart(2, '0')
    const minute = date.getMinutes().toString().padStart(2, '0')
    
    return `${year}${month}${day}${hour}${minute}.excel`
  }

  // 发送消息的核心逻辑
  const sendMessageCore = async (
    userQuery: string,
    messages: Message[],
    userId: string,
    chatType: string,
    conversationId?: string,
    onMessageUpdate?: (message: Message) => void,
    onStreamComplete?: (data: { conversationId: string; messageId: string; content: string }) => void,
    onStreamUpdate?: () => void
  ) => {
    try {
      isLoading.value = true

      // 添加用户消息
      const userMessage: Message = {
        text: userQuery,
        isUser: true,
      }
      messages.push(userMessage)
      onMessageUpdate?.(userMessage)

      // 创建响应式机器人消息
      const botMessage = reactive<Message>({
        text: '',
        isUser: false,
        isLoading: true,
        formattedText: ''
      })
      messages.push(botMessage)

      // 发起请求
      const response = await sendChatMessage({
        content: userQuery,
        userId: userId,
        chatType: chatType,
        conversationId: conversationId
      })

      // 显示中止按钮
      showStopButton.value = true

      if (!response.body) throw new Error('No response body')

      const reader = response.body.getReader()
      const decoder = new TextDecoder()
      let buffer = ''
      let newConversationId = ''
      let newMessageId = ''

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        buffer += decoder.decode(value, { stream: true })
        const chunks = buffer.split(/\n\n/)
        buffer = chunks.pop() || ''

        for (const chunk of chunks) {
          const eventData = chunk.trim()
          if (!eventData) continue

          const jsonData = eventData.replace(/^data:\s*/, '')
          
          try {
            const data = JSON.parse(jsonData) as ChatMessageResponse
            if (data.answer) {
              botMessage.text += data.answer
              const formatted = await formatAnswer(parseThink(botMessage.text).answer)
              botMessage.formattedText = formatted.html
              botMessage.echarts = formatted.echarts
              
              // 更新会话ID和消息ID
              if (data.conversationId) {
                newConversationId = data.conversationId
              }
              if (data.messageId) {
                newMessageId = data.messageId
              }
              
              // 获取并存储taskId
              if (data.taskId) {
                currentTaskId.value = data.taskId
              }
              
              // 触发流式更新回调，用于滚动
              onStreamUpdate?.()
            }
          } catch (e) {
            console.error('解析错误:', e)
          }
        }
      }

      // 处理剩余数据
      if (buffer) {
        const eventData = buffer.trim()
        if (eventData) {
          try {
            const jsonData = eventData.replace(/^data:\s*/, '')
            const data = JSON.parse(jsonData)
            if (data.answer) {
              botMessage.text += data.answer
              const formatted = await formatAnswer(parseThink(botMessage.text).answer)
              botMessage.formattedText = formatted.html
              botMessage.echarts = formatted.echarts
              
              if (data.conversationId) {
                newConversationId = data.conversationId
              }
              if (data.messageId) {
                newMessageId = data.messageId
              }
              
              // 触发流式更新回调，用于滚动
              onStreamUpdate?.()
            }
          } catch (e) {
            console.error('最终解析错误:', e)
          }
        }
      }

      // 获取文件来源数据
      if (newConversationId && newMessageId) {
        try {
          const { data } = await getFilePathList(newConversationId, newMessageId)
          // 检查数据是否存在且不为null
          if (data !== null && data !== undefined && (
            (data.resultPdf && data.resultPdf.length > 0) ||
            (data.resultExcel && data.resultExcel.length > 0) ||
            (data.resultMarkdown && data.resultMarkdown.length > 0) ||
            (data.resultWord && data.resultWord.length > 0) ||
            // 保持对旧结构的兼容
            (data.tracePdf && data.tracePdf.length > 0) ||
            (data.traceExcel && data.traceExcel.trim())
          )) {
            // 如果是旧结构，转换为新结构
            if (data.tracePdf || data.traceExcel) {
              const convertedData: TraceData = {
                resultPdf: data.tracePdf || [],
                resultExcel: data.traceExcel ? [{ fileName: generateExcelFileName(), context: data.traceExcel }] : [],
                resultMarkdown: [],
                resultWord: []
              }
              botMessage.sources = convertedData
            } else {
              botMessage.sources = data
            }
            botMessage.conversationId = newConversationId
            botMessage.messageId = newMessageId
          }
        } catch (error) {
          console.log('获取文件来源失败:', error)
          // 不显示错误信息，静默失败
        }
      }

      // 发射消息接收事件
      onMessageUpdate?.(botMessage)

      // 流式请求完成，发送事件
      onStreamComplete?.({
        conversationId: newConversationId,
        messageId: newMessageId,
        content: userQuery
      })

      return { success: true, conversationId: newConversationId, messageId: newMessageId }

    } catch (error) {
      console.error('请求失败:', error)
      const errorMessage: Message = {
        text: '请求失败，请稍后重试',
        isUser: false,
      }
      messages.push(errorMessage)
      onMessageUpdate?.(errorMessage)
      return { success: false }
    } finally {
      isLoading.value = false
      showStopButton.value = false // 隐藏中止按钮
      currentTaskId.value = '' // 清除taskId
      if (messages[messages.length - 1]?.isLoading) {
        messages[messages.length - 1].isLoading = false
      }
    }
  }

  // 中止流式回答
  const handleStopStream = async (chatType: string, userId: string) => {
    if (currentTaskId.value) {
      try {
        await stopMessagesStream(Number(chatType), currentTaskId.value, userId)
        
        // 隐藏中止按钮
        showStopButton.value = false
        
        // 停止加载状态
        isLoading.value = false
        
        // 清除taskId
        currentTaskId.value = ''
        
        ElMessage.success('已停止生成')
      } catch (error) {
        console.error('停止流式回答失败:', error)
        ElMessage.error('停止失败，请重试')
      }
    }
  }

  // 处理消息悬浮事件
  const handleMessageHover = (index: number, isHovered: boolean) => {
    hoveredMessageIndex.value = isHovered ? index : -1
  }

  // 复制消息内容
  const handleCopyMessage = async (message: Message) => {
    const textToCopy = message.text
    
    try {
      // 优先使用现代的 Clipboard API
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(textToCopy)
        ElMessage.success('已复制到剪贴板')
        return
      }
      
      // 回退到传统方法
      const textArea = document.createElement('textarea')
      textArea.value = textToCopy
      textArea.style.position = 'fixed'
      textArea.style.left = '-999999px'
      textArea.style.top = '-999999px'
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      
      const successful = document.execCommand('copy')
      document.body.removeChild(textArea)
      
      if (successful) {
        ElMessage.success('已复制到剪贴板')
      } else {
        throw new Error('execCommand failed')
      }
    } catch (error) {
      console.error('复制失败:', error)
      ElMessage.error('复制失败')
    }
  }

  // 编辑消息
  const handleEditMessage = (message: Message, index: number) => {
    editingMessageIndex.value = index
    editingMessageText.value = message.text
    hoveredMessageIndex.value = -1 // 隐藏操作按钮
  }

  // 取消编辑
  const handleCancelEdit = () => {
    editingMessageIndex.value = -1
    editingMessageText.value = ''
  }

  // 点赞消息
  const handleLikeMessage = (index: number) => {
    // TODO: 实现点赞逻辑，调用相关API
    ElMessage.success('感谢您的反馈！')
  }

  // 点踩消息
  const handleDislikeMessage = (index: number) => {
    // TODO: 实现点踩逻辑，调用相关API
    ElMessage.info('感谢您的反馈，我们会继续改进')
  }

  // 手动解析markdown表格为HTML
  const parseMarkdownTable = (markdown: string): string => {
    const lines = markdown.trim().split('\n')
    if (lines.length < 3) return markdown // 至少需要表头、分隔线、数据行
    
    const headerLine = lines[0]
    const separatorLine = lines[1]
    const dataLines = lines.slice(2)
    
    // 检查是否是有效的markdown表格
    if (!headerLine.includes('|') || !separatorLine.includes('---')) {
      return markdown
    }
    
    // 解析表头
    const headers = headerLine.split('|').map(h => h.trim()).filter(h => h)
    
    // 解析数据行
    const rows = dataLines.map(line => 
      line.split('|').map(cell => cell.trim()).filter(cell => cell)
    ).filter(row => row.length > 0)
    
    // 生成HTML表格
    let html = `
      <div class="table-container">
        <table class="excel-table" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse; width: auto; border: 2px solid #cbd5e1;">
          <thead>
            <tr>
    `
    
    headers.forEach(header => {
      html += `<th style="border: 1px solid #cbd5e1; padding: 12px; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); font-weight: 600; text-align: left; position: sticky; top: 0; z-index: 2; white-space: nowrap;">${header}</th>`
    })
    
    html += `
            </tr>
          </thead>
          <tbody>
    `
    
    rows.forEach((row, rowIndex) => {
      html += '<tr>'
      row.forEach((cell, cellIndex) => {
        const cellStyle = rowIndex % 2 === 0 
          ? 'border: 1px solid #cbd5e1; padding: 12px; background: white;'
          : 'border: 1px solid #cbd5e1; padding: 12px; background: #f8fafc;'
        html += `<td style="${cellStyle}">${cell}</td>`
      })
      html += '</tr>'
    })
    
    html += `
          </tbody>
        </table>
      </div>
    `
    
    return html
  }

  return {
    // 状态
    isLoading,
    currentTaskId,
    showStopButton,
    hoveredMessageIndex,
    editingMessageIndex,
    editingMessageText,
    
    // 方法
    formatAnswer,
    parseThink,
    generateExcelFileName,
    sendMessageCore,
    handleStopStream,
    handleMessageHover,
    handleCopyMessage,
    handleEditMessage,
    handleCancelEdit,
    handleLikeMessage,
    handleDislikeMessage,
    parseMarkdownTable
  }
}