AIDocumentReviewSystemMVP/src/pages/chatConversation/ChatConversation.js

import React, { useState, useRef, useEffect } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import {
  Input,
  Button,
  Typography,
  Spin,
  message,
  Layout,
  Tooltip,
  Input as AntInput,
  Modal,
  Upload,
  Dropdown,
  Space,
  Select,
} from 'antd'
import {
  ArrowUpOutlined,
  LinuxOutlined,
  RobotOutlined,
  LoadingOutlined,
  CopyOutlined,
  ReloadOutlined,
  PaperClipOutlined,
} from '@ant-design/icons'
import { callLocalChatAPI, handleAPIError } from '@/config/api'
import { conversationStore } from '@/utils/pageConversationStore'
import './ChatConversation.less'

const { Text } = Typography
const { TextArea } = Input
const { Sider, Content } = Layout

function ChatConversation() {
  // 会话相关状态 - 使用独立的存储
  const [conversations, setConversations] = useState(conversationStore.getConversations())
  const [currentConversationId, setCurrentConversationId] = useState(conversationStore.getCurrentConversationId())
  const [inputValue, setInputValue] = useState('')
  const [loading, setLoading] = useState(false)
  const [sidebarExpanded, setSidebarExpanded] = useState(false)
  const [editModalVisible, setEditModalVisible] = useState(false)
  const [editingConversation, setEditingConversation] = useState(null)
  const [newTitle, setNewTitle] = useState('')
  const [deepThinkingEnabled, setDeepThinkingEnabled] = useState(false)
  const [typingMessage, setTypingMessage] = useState('')
  const [isTyping, setIsTyping] = useState(false)


  const [streamingContent, setStreamingContent] = useState('')
const [isStreaming, setIsStreaming] = useState(false)
const [currentStreamingMessageId, setCurrentStreamingMessageId] = useState(null)



  // 流式输出状态 - 已移除

  const messagesEndRef = useRef(null)
  const inputRef = useRef(null)
  const typewriterTimeoutRef = useRef(null)

  // 获取当前会话
  const currentConversation = conversations.find(conv => conv.id === currentConversationId)
  const currentMessages = currentConversation?.messages || []    // 当前会话消息
  
  // 调试信息
  console.log('Current conversation state:', {
    conversations: conversations.length,
    currentConversationId,
    currentConversation: !!currentConversation,
    currentMessages: currentMessages.length
  })

  // console.log(currentMessages,"=========================333333")
  const chatScrollRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

  // 流式输出相关函数 - 已移除


  const handleChange = value => {
    console.log(`selected ${value}`);
  }


  // 订阅对话状态变化
  useEffect(() => {
    const unsubscribe = conversationStore.subscribe(({ conversations, currentConversationId }) => {
      setConversations(conversations)
      setCurrentConversationId(currentConversationId)
    })

    return unsubscribe
  }, [])

  // 清理定时器
  useEffect(() => {
    return () => {
      if (typewriterTimeoutRef.current) {
        clearTimeout(typewriterTimeoutRef.current)
      }
    }
  }, [])

  // 打字机效果函数 - 简化版本用于测试
  const typewriterEffect = (text, onComplete) => {
    console.log('Typewriter effect started with text:', text)
    let index = 0
    setTypingMessage('')
    setIsTyping(true)

    const typeNextWords = () => {
      if (index < text.length) {
        // 简化：每次显示3个字符
        const nextIndex = Math.min(index + 3, text.length)
        const currentText = text.substring(0, nextIndex)
        console.log('Typing progress:', currentText)
        setTypingMessage(currentText)
        index = nextIndex
        
        // 500ms间隔
        typewriterTimeoutRef.current = setTimeout(typeNextWords, 500)
      } else {
        console.log('Typewriter effect completed')
        setIsTyping(false)
        onComplete(text)
      }
    }

    typeNextWords()
  }

  // 模拟流式效果
  const simulateStreamingEffect = (fullContent, messageId) => {
    setIsStreaming(true)
    setStreamingContent('')
    
    let currentIndex = 0
    const chunkSize = 3 // 每次显示3个字符
    const delay = 50 // 50ms间隔，可以调整速度
    
    const streamNext = () => {
      if (currentIndex < fullContent.length) {
        const nextIndex = Math.min(currentIndex + chunkSize, fullContent.length)
        const currentContent = fullContent.substring(0, nextIndex)
        
        setStreamingContent(currentContent)
        conversationStore.updateMessage(messageId, currentContent)
        
        currentIndex = nextIndex
        setTimeout(streamNext, delay)
      } else {
        // 流式效果完成
        setIsStreaming(false)
        setStreamingContent('')
        setCurrentStreamingMessageId(null)
      }
    }
    
    streamNext()
  }


  // 创建新对话
  const createNewConversation = () => {
    conversationStore.createNewConversation()
    setInputValue('')
  }

  // 切换对话
  const switchConversation = (conversationId) => {
    conversationStore.switchConversation(conversationId)
    setInputValue('')
  }

  // 删除对话
  const deleteConversation = (conversationId) => {
    if (conversations.length <= 1) {
      message.warning('至少需要保留一个对话')
      return
    }

    conversationStore.deleteConversation(conversationId)
  }

  // 编辑对话标题
  const editConversationTitle = (conversation) => {
    setEditingConversation(conversation)
    setNewTitle(conversation.title)
    setEditModalVisible(true)
  }

  // 保存对话标题
  const saveConversationTitle = () => {
    if (!newTitle.trim()) {
      message.warning('标题不能为空')
      return
    }

    conversationStore.updateConversationTitle(editingConversation.id, newTitle.trim())

    setEditModalVisible(false)
    setEditingConversation(null)
    setNewTitle('')
  }

  // 发送消息
  const sendMessage = async () => {
    const messageText = inputValue.trim()
    if (!messageText || loading) return

    // 添加用户消息到独立存储
    conversationStore.addMessage('user', messageText)

    setInputValue('')
    setLoading(true)

    try {
      // 调用本地后端接口
      const result = await callLocalChatAPI(messageText)
      console.log('API result:', result)

      // 直接处理结果
      const thought = result?.thought || ''
      const message = result?.message || ''
      console.log('Processed content:', { thought, message, deepThinkingEnabled })

      // 根据深度思考按钮状态决定是否包含思考内容
      const finalContent = deepThinkingEnabled 
        ? thought + (message ? '\n\n' + message : '')
        : message

      console.log('Final content:', finalContent)

      if (finalContent.trim()) {
        // 先添加一个空的助手消息
        const assistantMessageId = conversationStore.addMessage('assistant', '')
        setCurrentStreamingMessageId(assistantMessageId)
        
        // 开始模拟流式效果
        simulateStreamingEffect(finalContent, assistantMessageId)
      } else {
        console.log('No content, adding fallback message')
        conversationStore.addMessage('assistant', '抱歉，我无法生成回复内容。')
      }
    } catch (error) {
      const errorMessage = handleAPIError(error)
      message.error(errorMessage)

      // 添加错误消息到独立存储
      conversationStore.addMessage('assistant', `抱歉，我遇到了一个问题：${errorMessage}`)
    } finally {
      setLoading(false)
    }
  }

  // 处理回车键发送
  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      sendMessage()
    }
  }

  // 清空当前对话
  const clearCurrentChat = () => {
    conversationStore.clearCurrentConversation()
  }

  //  兼容剪贴板
  const copyToClipboard = async (text) => {
    if (!text) return Promise.reject(new Error("exmpty text"))

    // 现代 API，需 HTTPS 或 localhost（window.isSecureContext）
    if (navigator.clipboard && window.isSecureContext) {
      try {
        await navigator.clipboard.writeText(text)
        return
      } catch (e) {
        // 若失败，继续使用回退方案
        console.warn('navigator.clipboard failed, fallback to execCommand', e)
      }
    }

    // 回退方案
    return new Promise((resolve, reject) => {
      try {
        const ta = document.createElement('textarea')
        ta.value = text
        ta.setAttribute('readonly', '')
        ta.style.position = 'fixed'
        ta.style.left = '-9999px'
        document.body.appendChild(ta)
        ta.select()
        ta.setSelectionRange(0, ta.value.length)
        const ok = document.execCommand('copy')
        document.body.removeChild(ta)
        if (ok) resolve()
        else reject(new Error('execCommand failed'))
      } catch (err) {
        reject(err)
      }
    })
  }

  // 渲染单条消息 ==================================
  const renderMessage = (msg, index) => {
    const isUser = msg.role === 'user'
    
    // 如果是当前正在流式输出的消息，显示流式内容
    const isCurrentStreaming = isStreaming && 
      currentStreamingMessageId === msg.id && 
      msg.role === 'assistant'
    
    const displayContent = isCurrentStreaming ? streamingContent : (msg.content || '')
    
    // 调试信息
    if (msg.role === 'assistant') {
      console.log('Rendering assistant message:', { 
        index, 
        content: msg.content, 
        displayContent,
        isCurrentStreaming,
        streamingContent
      })
    }
    
    return (
      <div
        key={index}
        className={`ds-message-row ${isUser ? 'from-user' : 'from-assistant'}`}
      >
        {!isUser && (
          <div className='ds-avatar'>
            <RobotOutlined />   
          </div>
        )}
        {isUser && <div className='ds-avatar user'><LinuxOutlined /></div>}

        <div className='ds-message-body'>
          <div className='ds-message-meta'>
            <span className='role'>{isUser ? '' : 'AI对话'}</span>
            <span className='time'>
              {msg.timestamp
                ? (typeof msg.timestamp === 'string'
                  ? msg.timestamp
                  : msg.timestamp.toLocaleString())     // 时间
                : ''}
            </span>
            {!isUser && (
              <span className='actions'>  
                {/* 复制按钮 */}
                <Tooltip title='复制'>     
                  <Button
                    size='small'
                    type='text'
                    icon={<CopyOutlined />}
                    onClick={async () => {
                      try {
                        await copyToClipboard(msg.content || '')
                        message.success('已复制')
                      } catch (err) {
                        console.error('copy failed', err)
                        message.error('复制失败，请在 HTTPS / localhost 或允许剪贴板权限的环境下重试')
                      }
                    }}
                  />
                </Tooltip>
                {/* 重新生成按钮 */}
                <Tooltip title='重新生成(示例)'>  
                  <Button
                    size='small'
                    type='text'
                    icon={<ReloadOutlined />}
                    disabled={loading}
                    onClick={() => {
                      // 可复用最后一条用户消息再请求
                      const lastUser = [...currentMessages].reverse().find(m => m.role === 'user')
                      if (lastUser) {
                        setInputValue(lastUser.content)
                        sendMessage()
                      }
                    }}
                  />
                </Tooltip>
              </span>
            )}
          </div>

          {/* 回答框 */}
          <div className='ds-message-content'>
            {displayContent ? (
              <ReactMarkdown
                remarkPlugins={[remarkGfm]}
              >
                {displayContent}
              </ReactMarkdown>
            ) : (
              <div style={{ color: '#999', fontStyle: 'italic' }}>
                暂无内容
              </div>
            )}
          </div>
        </div>
      </div>
    )
  }

  //  =================================================

  return (
    <div className='ds-chat-page'>
      <div className='ds-chat-scroll' ref={chatScrollRef}>
        <div className='ds-chat-inner'>
          {currentMessages.length === 0 && !loading && (
            //  已有默认初始化对话，无需此处提示
            <div className='ds-empty'>
              <h3>开始对话吧</h3>
              <p>提出一个问题，比如：请帮我总结一段文本。</p>
            </div>
          )}

          {/* 历史消息 */}
          {currentMessages.map(renderMessage)}

          {/* 加载状态 */}
          {loading && (
            <div className='ds-message-row from-assistant thinking'>
              <div className='ds-avatar'>
                <RobotOutlined />
              </div>
              <div className='ds-message-body'>
                <div className='ds-message-meta'>
                  <span className='role'>AI</span>
                  <span className='time'>正在思考…</span>
                </div>
                <div className='ds-message-content typing'>
                  <Spin
                    indicator={<LoadingOutlined style={{ fontSize: 16 }} spin />}
                    size='small'
                  />
                  <span className='typing-dots'>
                    <i /><i /><i />
                  </span>
                </div>
              </div>
            </div>
          )}
          <div ref={messagesEndRef} />
        </div>
      </div>


      {/* 问答输入框 */}
      <div className='ds-input-bar'>
        <div className='ds-input-inner'>
          <div className='ds-textarea-wrap'>
            <TextArea
              ref={inputRef}
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                  e.preventDefault()
                  sendMessage()
                }
              }}
              placeholder='给AI助手发送消息'
              autoSize={{ minRows: 3, maxRows: 8 }}
              disabled={loading}
              bordered={false}
            />
          </div>

          {/* 深度思考按钮 */}
          <Button
            type={deepThinkingEnabled ? 'primary' : 'default'}
            style={{
              minWidth: 100, maxWidth: 120, marginRight: 8
            }}
            onClick={() => setDeepThinkingEnabled(!deepThinkingEnabled)}
          >
            深度思考
          </Button>

          {/* 上传文件 */}
          <Upload className='ds-uploading'>
            <Button
              shape='circle'
              icon={<PaperClipOutlined />}
            />
          </Upload>
          {/* 发送按钮 */}
          <div className='ds-input-actions'>
            <Button
              type='primary'
              shape='circle'
              icon={<ArrowUpOutlined />}
              onClick={sendMessage}
              disabled={!inputValue.trim() || loading}
            >
            </Button>
          </div>

        </div>
        <div className='ds-input-hint'>
          Enter 发送 · Shift+Enter 换行
          <span className='sep'>|</span>
          <a onClick={clearCurrentChat}>清空当前对话</a>
          <Select
            className='ds-select'
            dropdownClassName="ds-select-dropdown"
            defaultValue="模型反馈"
            style={{
              minWidth: 120, maxWidth: 200, marginLeft: 'auto', marginRight: 8
            }}
            onchange={handleChange}
            options={[
              { value: "正面反馈", label: "正面反馈" },
              { value: "负面反馈", label: "负面反馈" },
            ]}>
          </Select>
        </div>
      </div>
    </div>
  )
}

export default ChatConversation