编辑功能
This commit is contained in:
liamzi
@@ -1,9 +1,10 @@
|
||||
import { Button, Drawer, Input, Space, message } from 'antd';
|
||||
import { useChat } from "ai/react";
|
||||
import { CodeHighlight } from "@mantine/code-highlight";
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { DownloadOutlined, EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { useSessionStorage } from 'react-use';
|
||||
import Editor from "@monaco-editor/react";
|
||||
|
||||
export default function ChatAIDrawer({ open, onClose, onExport }) {
|
||||
const STORAGE_KEY = 'chat_history';
|
||||
@@ -35,13 +36,44 @@ export default function ChatAIDrawer({ open, onClose, onExport }) {
|
||||
}
|
||||
};
|
||||
|
||||
const [editingMessageId, setEditingMessageId] = useState(null);
|
||||
const [editingContent, setEditingContent] = useState('');
|
||||
|
||||
// 优化编辑处理函数
|
||||
const handleEdit = (message) => {
|
||||
if(isLoading) return;
|
||||
setEditingContent(message.content);
|
||||
setEditingMessageId(message.id);
|
||||
};
|
||||
|
||||
const handleSaveEdit = () => {
|
||||
try {
|
||||
JSON.parse(editingContent);
|
||||
setMessages(messages.map(msg =>
|
||||
msg.id === editingMessageId
|
||||
? { ...msg, content: editingContent }
|
||||
: msg
|
||||
));
|
||||
setEditingMessageId(null);
|
||||
message.success('编辑成功');
|
||||
} catch (error) {
|
||||
message.error('请输入有效的 JSON 格式');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelEdit = () => {
|
||||
setEditingMessageId(null);
|
||||
setEditingContent('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span>AI 助手</span>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-lg font-medium text-gray-800">AI 助手</span>
|
||||
<Button
|
||||
size="small"
|
||||
className="hover:bg-gray-100"
|
||||
onClick={() => {
|
||||
setMessages([]);
|
||||
setStoredMessages('[]');
|
||||
@@ -53,94 +85,136 @@ export default function ChatAIDrawer({ open, onClose, onExport }) {
|
||||
</div>
|
||||
}
|
||||
placement="right"
|
||||
width={600}
|
||||
width={800}
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
className="rounded-l-xl"
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 108px)' }}>
|
||||
<div style={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
marginBottom: 16,
|
||||
padding: '0 16px'
|
||||
}}>
|
||||
<div className="flex flex-col h-[calc(100vh-108px)]">
|
||||
<div className="flex-1 overflow-y-auto px-4 space-y-6">
|
||||
{messages.map((message) => (
|
||||
<div
|
||||
key={message.id}
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
backgroundColor: message.role === 'assistant' ? '#f0f9ff' : '#f8f9fa',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.05)'
|
||||
}}
|
||||
className={`rounded-lg p-4 transition-all ${
|
||||
message.role === 'assistant'
|
||||
? 'bg-blue-50 hover:bg-blue-100'
|
||||
: 'bg-gray-50 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
<div style={{
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 8,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
color: message.role === 'assistant' ? '#1677ff' : '#52525b'
|
||||
}}>
|
||||
<span>{message.role === 'assistant' ? 'AI 助手' : '用户'}</span>
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className={`font-medium ${
|
||||
message.role === 'assistant' ? 'text-blue-600' : 'text-gray-600'
|
||||
}`}>
|
||||
{message.role === 'assistant' ? 'AI 助手' : '用户'}
|
||||
</span>
|
||||
{message.role === 'assistant' && (
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => handleExport(message.content)}
|
||||
>
|
||||
导出
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{message.role === "assistant" ? (
|
||||
<CodeHighlight
|
||||
code={message.content}
|
||||
language="json"
|
||||
copyLabel="复制代码"
|
||||
copiedLabel="已复制！"
|
||||
withLineNumbers
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordBreak: 'break-word'
|
||||
}}>
|
||||
{message.content}
|
||||
</div>
|
||||
<Space>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
disabled={isLoading}
|
||||
onClick={() => handleEdit(message)}
|
||||
className="text-gray-500 hover:text-blue-600"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={() => handleExport(message.content)}
|
||||
className="text-gray-500 hover:text-blue-600"
|
||||
>
|
||||
导出
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{message.role === "assistant" ? (
|
||||
<div className="relative">
|
||||
{editingMessageId === message.id ? (
|
||||
<div className="rounded-lg border border-blue-200">
|
||||
<Editor
|
||||
height="300px"
|
||||
defaultLanguage="json"
|
||||
value={editingContent}
|
||||
theme="vs-light"
|
||||
options={{
|
||||
minimap: { enabled: false },
|
||||
scrollBeyondLastLine: false,
|
||||
fontSize: 14,
|
||||
lineNumbers: 'on',
|
||||
renderLineHighlight: 'none',
|
||||
roundedSelection: true,
|
||||
}}
|
||||
onChange={setEditingContent}
|
||||
onMount={(editor) => {
|
||||
editor.getModel()?.updateOptions({ tabSize: 2 });
|
||||
editor.focus();
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-end gap-2 p-2 bg-gray-50 border-t">
|
||||
<Button
|
||||
size="small"
|
||||
icon={<CloseOutlined />}
|
||||
onClick={handleCancelEdit}
|
||||
className="hover:bg-gray-200"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon={<CheckOutlined />}
|
||||
onClick={handleSaveEdit}
|
||||
className="bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<CodeHighlight
|
||||
code={message.content}
|
||||
language="json"
|
||||
copyLabel="复制代码"
|
||||
copiedLabel="已复制！"
|
||||
withLineNumbers
|
||||
className="rounded-lg"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-gray-700 whitespace-pre-wrap break-words">
|
||||
{message.content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{
|
||||
padding: '16px',
|
||||
borderTop: '1px solid #f0f0f0',
|
||||
backgroundColor: '#fff'
|
||||
}}>
|
||||
<Space.Compact style={{ width: '100%' }}>
|
||||
<div className="border-t bg-white p-4">
|
||||
<form onSubmit={handleSubmit} className="flex gap-2">
|
||||
<Input
|
||||
value={input}
|
||||
placeholder="请输入您的问题..."
|
||||
onChange={handleInputChange}
|
||||
disabled={isLoading}
|
||||
style={{ borderRadius: '6px 0 0 6px' }}
|
||||
className="flex-1 rounded-lg border-gray-300 hover:border-blue-400 focus:border-blue-600 focus:shadow-blue-100"
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={isLoading}
|
||||
style={{ borderRadius: '0 6px 6px 0' }}
|
||||
className="rounded-lg bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
发送
|
||||
</Button>
|
||||
</Space.Compact>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user