|
|
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 [streamingThought, setStreamingThought] = useState('')
|
|
|
const [streamingMessage, setStreamingMessage] = useState('')
|
|
|
const [isStreaming, setIsStreaming] = useState(false)
|
|
|
const [displayedThought, setDisplayedThought] = useState('')
|
|
|
const [displayedMessage, setDisplayedMessage] = useState('')
|
|
|
|
|
|
// 流式显示控制
|
|
|
const [isTyping, setIsTyping] = useState(false)
|
|
|
|
|
|
const messagesEndRef = useRef(null)
|
|
|
const inputRef = useRef(null)
|
|
|
const typewriterTimeoutRef = useRef(null)
|
|
|
|
|
|
// 获取当前会话
|
|
|
const currentConversation = conversations.find(conv => conv.id === currentConversationId)
|
|
|
const currentMessages = currentConversation?.messages || []
|
|
|
// 自动滚动到底部
|
|
|
const chatScrollRef = useRef(null);
|
|
|
useEffect(() => {
|
|
|
if (chatScrollRef.current) {
|
|
|
chatScrollRef.current.scrollTop = chatScrollRef.current.scrollHeight;
|
|
|
}
|
|
|
}, [currentMessages, loading]); // currentMessages 是你的消息数组
|
|
|
|
|
|
const scrollToBottom = () => {
|
|
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
|
|
|
}
|
|
|
|
|
|
// 打字机效果函数
|
|
|
const typewriterEffect = (targetText, setDisplayedText, delay = 20) => {
|
|
|
let currentIndex = 0
|
|
|
const currentDisplayed = displayedThought + displayedMessage
|
|
|
|
|
|
const typeNextChar = () => {
|
|
|
if (currentIndex < targetText.length) {
|
|
|
setDisplayedText(targetText.substring(0, currentIndex + 1))
|
|
|
currentIndex++
|
|
|
typewriterTimeoutRef.current = setTimeout(typeNextChar, delay)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
typeNextChar()
|
|
|
}
|
|
|
|
|
|
// 监听流式内容变化，实现真正的流式显示
|
|
|
useEffect(() => {
|
|
|
if (streamingThought && streamingThought !== displayedThought) {
|
|
|
// 直接显示新内容，实现真正的流式显示
|
|
|
setDisplayedThought(streamingThought)
|
|
|
setIsTyping(true)
|
|
|
}
|
|
|
}, [streamingThought])
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (streamingMessage && streamingMessage !== displayedMessage) {
|
|
|
// 直接显示新内容，实现真正的流式显示
|
|
|
setDisplayedMessage(streamingMessage)
|
|
|
setIsTyping(true)
|
|
|
}
|
|
|
}, [streamingMessage])
|
|
|
|
|
|
// 当流式输出停止时，停止打字状态
|
|
|
useEffect(() => {
|
|
|
if (!isStreaming) {
|
|
|
setIsTyping(false)
|
|
|
}
|
|
|
}, [isStreaming])
|
|
|
|
|
|
|
|
|
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)
|
|
|
}
|
|
|
}
|
|
|
}, [])
|
|
|
|
|
|
useEffect(() => {
|
|
|
scrollToBottom()
|
|
|
}, [currentMessages])
|
|
|
|
|
|
// 创建新对话
|
|
|
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)
|
|
|
setIsStreaming(true)
|
|
|
setStreamingThought('')
|
|
|
setStreamingMessage('')
|
|
|
setDisplayedThought('')
|
|
|
setDisplayedMessage('')
|
|
|
|
|
|
try {
|
|
|
// 调用本地后端接口（流式版本）
|
|
|
const result = await callLocalChatAPI(messageText, (streamData) => {
|
|
|
console.log('Stream data received:', streamData)
|
|
|
if (streamData.type === 'thought') {
|
|
|
console.log('Setting streamingThought:', streamData.content)
|
|
|
// 使用totalContent作为完整内容，content作为新增内容
|
|
|
setStreamingThought(streamData.totalContent || streamData.content)
|
|
|
} else if (streamData.type === 'message') {
|
|
|
console.log('Setting streamingMessage:', streamData.content)
|
|
|
// 使用totalContent作为完整内容，content作为新增内容
|
|
|
setStreamingMessage(streamData.totalContent || streamData.content)
|
|
|
} else if (streamData.type === 'complete') {
|
|
|
// 流式输出完成，将最终内容添加到对话存储
|
|
|
// 使用complete事件中传递的最终内容
|
|
|
const finalThought = streamData.thoughtContent || streamingThought
|
|
|
const finalMessage = streamData.messageContent || streamingMessage
|
|
|
const finalContent = finalThought + (finalMessage ? '\n\n' + finalMessage : '')
|
|
|
|
|
|
console.log('Complete event - finalThought:', finalThought)
|
|
|
console.log('Complete event - finalMessage:', finalMessage)
|
|
|
console.log('Complete event - finalContent:', finalContent)
|
|
|
|
|
|
if (finalContent.trim()) {
|
|
|
conversationStore.addMessage('assistant', finalContent)
|
|
|
} else {
|
|
|
conversationStore.addMessage('assistant', '抱歉，我无法生成回复内容。')
|
|
|
}
|
|
|
|
|
|
setIsStreaming(false)
|
|
|
setStreamingThought('')
|
|
|
setStreamingMessage('')
|
|
|
setDisplayedThought('')
|
|
|
setDisplayedMessage('')
|
|
|
}
|
|
|
})
|
|
|
|
|
|
// 如果API没有返回流式数据，直接处理结果
|
|
|
if (result && !isStreaming) {
|
|
|
const thought = result?.thought || ''
|
|
|
const message = result?.message || ''
|
|
|
const finalContent = thought + (message ? '\n\n' + message : '')
|
|
|
|
|
|
if (finalContent.trim()) {
|
|
|
conversationStore.addMessage('assistant', finalContent)
|
|
|
} else {
|
|
|
conversationStore.addMessage('assistant', '抱歉，我无法生成回复内容。')
|
|
|
}
|
|
|
}
|
|
|
} catch (error) {
|
|
|
const errorMessage = handleAPIError(error)
|
|
|
message.error(errorMessage)
|
|
|
|
|
|
// 添加错误消息到独立存储
|
|
|
conversationStore.addMessage('assistant', `抱歉，我遇到了一个问题：${errorMessage}`)
|
|
|
setIsStreaming(false)
|
|
|
setStreamingThought('')
|
|
|
setStreamingMessage('')
|
|
|
setDisplayedThought('')
|
|
|
setDisplayedMessage('')
|
|
|
} 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'
|
|
|
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'>
|
|
|
<ReactMarkdown
|
|
|
remarkPlugins={[remarkGfm]}
|
|
|
>
|
|
|
{msg.content || ''}
|
|
|
</ReactMarkdown>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
// 渲染流式输出消息
|
|
|
const renderStreamingMessage = () => {
|
|
|
if (!isStreaming && !displayedThought && !displayedMessage) return null
|
|
|
|
|
|
return (
|
|
|
<div className='ds-message-row from-assistant streaming'>
|
|
|
<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'>
|
|
|
{/* 思考内容 - 浅灰色 */}
|
|
|
{displayedThought && (
|
|
|
<div className='ds-thought-content'>
|
|
|
<ReactMarkdown
|
|
|
remarkPlugins={[remarkGfm]}
|
|
|
>
|
|
|
{displayedThought}
|
|
|
</ReactMarkdown>
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
{/* 回复内容 - 正常颜色 */}
|
|
|
{displayedMessage && (
|
|
|
<div className='ds-response-content'>
|
|
|
<ReactMarkdown
|
|
|
remarkPlugins={[remarkGfm]}
|
|
|
>
|
|
|
{displayedMessage}
|
|
|
</ReactMarkdown>
|
|
|
{/* 流式输入光标 */}
|
|
|
{isTyping && isStreaming && (
|
|
|
<span className='ds-typing-cursor'>|</span>
|
|
|
)}
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
{/* 流式输出指示器 */}
|
|
|
{isStreaming && (
|
|
|
<div className='ds-streaming-indicator'>
|
|
|
<Spin
|
|
|
indicator={<LoadingOutlined style={{ fontSize: 14 }} spin />}
|
|
|
size='small'
|
|
|
/>
|
|
|
<span className='streaming-text'>
|
|
|
{isTyping ? '正在输入...' : '正在思考...'}
|
|
|
</span>
|
|
|
</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)}
|
|
|
|
|
|
{/* 流式输出消息 */}
|
|
|
{renderStreamingMessage()}
|
|
|
|
|
|
{/* 加载状态（当没有流式输出时显示） */}
|
|
|
{loading && !isStreaming && (
|
|
|
<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>
|
|
|
|
|
|
{/* 模型切换 */}
|
|
|
{/* <Select
|
|
|
defaultValue="智能定性"
|
|
|
style={{
|
|
|
minWidth: 120, maxWidth: 200, marginRight: 8
|
|
|
}}
|
|
|
onchange={handleChange}
|
|
|
options={[
|
|
|
{ value: "智能定性", label: "智能定性" },
|
|
|
// { value: "GPT-5 mini", label: "GPT-5 mini" },
|
|
|
// { value: "Claude Sonnet 4", label: "Claude Sonnet 4" },
|
|
|
// { value: "Kimi Senior", label: "Kimi Senior" },
|
|
|
]}>
|
|
|
</Select> */}
|
|
|
|
|
|
{/* 上传文件 */}
|
|
|
<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
|
