导出模块

2024-12-31 13:40:08 +08:00
parent d43fca017c
commit d129178dbb
6 changed files with 865 additions and 131 deletions
--- a/src/components/ChatAi/index.jsx
+++ b/src/components/ChatAi/index.jsx
@@ -0,0 +1,143 @@
+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 { useEffect, useRef } from 'react';
+
+export default function ChatAIDrawer({ open, onClose, onExport }) {
+  const STORAGE_KEY = 'chat_history';
+  const { messages, input, handleSubmit, handleInputChange, isLoading, setMessages } = useChat({
+    api: "https://test-ai-quirkyai.vercel.app/api/chat",
+    initialMessages: JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'),
+  });
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(messages));
+  }, [messages]);
+
+  // 新消息时自动滚动到底部
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  // 修改导出函数，接收单条消息内容
+  const handleExport = (content) => {
+    try {
+        const jsonContent = JSON.parse(content);
+        onExport?.(jsonContent);
+    } catch (error) {
+      console.log(error);
+      message.error('导出失败，请重试');
+    }
+  };
+
+  return (
+    <Drawer
+      title={
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span>AI 助手</span>
+          <Button 
+            size="small" 
+            onClick={() => {
+              setMessages([]);
+              localStorage.removeItem(STORAGE_KEY);
+              message.success('历史记录已清空');
+            }}
+          >
+            清空历史
+          </Button>
+        </div>
+      }
+      placement="right"
+      width={600}
+      open={open}
+      onClose={onClose}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 108px)' }}>
+        <div style={{ 
+          flex: 1, 
+          overflowY: 'auto', 
+          marginBottom: 16,
+          padding: '0 16px'
+        }}>
+          {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)'
+              }}
+            >
+              <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>
+                {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>
+                )}
+              </div>
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+
+        <form onSubmit={handleSubmit} style={{ 
+          padding: '16px',
+          borderTop: '1px solid #f0f0f0',
+          backgroundColor: '#fff'
+        }}>
+          <Space.Compact style={{ width: '100%' }}>
+            <Input
+              value={input}
+              placeholder="请输入您的问题..."
+              onChange={handleInputChange}
+              disabled={isLoading}
+              style={{ borderRadius: '6px 0 0 6px' }}
+            />
+            <Button 
+              type="primary" 
+              htmlType="submit" 
+              loading={isLoading}
+              style={{ borderRadius: '0 6px 6px 0' }}
+            >
+              发送
+            </Button>
+          </Space.Compact>
+        </form>
+      </div>
+    </Drawer>
+  );
+}