fix

2025-01-14 22:33:10 +08:00
parent 7e592df34e
commit e4aa910d4e
11 changed files with 77 additions and 60 deletions
--- a/src/components/ChatAi/index.jsx
+++ b/src/components/ChatAi/index.jsx
@@ -8,11 +8,11 @@ import Editor from "@monaco-editor/react";

 export default function ChatAIDrawer({ open, onClose, onExport }) {
  const STORAGE_KEY = 'chat_history';
-  const [storedMessages, setStoredMessages] = useSessionStorage(STORAGE_KEY, '[]');
+  const [storedMessages, setStoredMessages] = useSessionStorage(STORAGE_KEY, []);
  
  const { messages, input, handleSubmit, handleInputChange, isLoading, setMessages } = useChat({
    api: "https://test-ai-quirkyai.vercel.app/api/chat",
-    initialMessages: JSON.parse(storedMessages),
+    initialMessages: storedMessages.length>0? JSON.parse(storedMessages):[],
  });
  
  const messagesEndRef = useRef(null);
@@ -88,7 +88,6 @@ export default function ChatAIDrawer({ open, onClose, onExport }) {
      width={800}
      open={open}
      onClose={onClose}
-      className="rounded-l-xl"
    >
      <div className="flex flex-col h-[calc(100vh-108px)]">
        <div className="flex-1 overflow-y-auto px-4 space-y-6">
--- a/src/components/Layout/Logo.jsx
+++ b/src/components/Layout/Logo.jsx
@@ -1,7 +1,7 @@
 import React from "react";

 import logo from "@/assets/logo.png";
-import logoCollapsed from "@/assets/logo-collapsed.png";
+import logoCollapsed from "@/assets/minilogo.png";

 export const Logo = ({ collapsed, isDarkMode }) => (
  <div className="logo">
--- a/src/components/difyChatAi/index.jsx
+++ b/src/components/difyChatAi/index.jsx
@@ -3,6 +3,8 @@ import { CodeHighlight } from "@mantine/code-highlight";
 import { DownloadOutlined, EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { useRef, useEffect, useState } from 'react';
 import { useDifyChat } from '@/hooks/aichat';
+import Editor from "@monaco-editor/react";
+import {useTheme}from '@/contexts/ThemeContext'

 export default function DifyChatDrawer({ open, onClose, onExport }) {
  const {
@@ -14,7 +16,7 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
    storedMessages,
    setStoredMessages
  } = useDifyChat();
-  
+  const {isDarkMode}=useTheme()
  const [input, setInput] = useState('');
  const messagesEndRef = useRef(null);
  
@@ -25,6 +27,20 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

+  useEffect(() => {
+    if (storedMessages && storedMessages.length > 0) {
+      console.log(storedMessages,'storedMessages');
+      
+      setMessages(storedMessages);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (messages.length > 0) {
+      setStoredMessages(messages);
+    }
+  }, [messages]);
+
  const handleSendMessage = async (e) => {
    e.preventDefault();
    await sendMessage(input);
@@ -67,15 +83,20 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
    }
  };

+  const handleClearHistory = () => {
+    clearHistory();
+    setStoredMessages([]);
+  };
+
  return (
    <Drawer
      title={
        <div className="flex justify-between items-center">
-          <span className="text-lg font-medium text-gray-800">AI 助手</span>
+          <span className="text-lg font-medium dark:text-gray-200">AI 助手</span>
          <Button 
            size="small"
-            className="hover:bg-gray-100"
-            onClick={clearHistory}
+            className="hover:bg-gray-100 dark:hover:bg-gray-700"
+            onClick={handleClearHistory}
          >
            清空历史
          </Button>
@@ -85,7 +106,6 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
      width={800}
      open={open}
      onClose={onClose}
-      className="rounded-l-xl"
    >
      <div className="flex flex-col h-[calc(100vh-108px)]">
        <div className="flex-1 overflow-y-auto px-4 space-y-6">
@@ -94,13 +114,15 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
              key={message.id}
              className={`rounded-lg p-4 transition-all ${
                message.role === 'assistant' 
-                  ? 'bg-blue-50 hover:bg-blue-100' 
-                  : 'bg-gray-50 hover:bg-gray-100'
+                  ? 'bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50' 
+                  : 'bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700'
              }`}
            >
              <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' 
+                    ? 'text-blue-600 dark:text-blue-400' 
+                    : 'text-gray-600 dark:text-gray-300'
                }`}>
                  {message.role === 'assistant' ? 'AI 助手' : '用户'}
                </span>
@@ -112,7 +134,7 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
                      icon={<EditOutlined />}
                      disabled={isLoading}
                      onClick={() => handleEdit(message)}
-                      className="text-gray-500 hover:text-blue-600"
+                      className="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
                    >
                      编辑
                    </Button>
@@ -121,7 +143,7 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
                      size="small"
                      icon={<DownloadOutlined />}
                      onClick={() => handleExport(message.content)}
-                      className="text-gray-500 hover:text-blue-600"
+                      className="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
                    >
                      导出
                    </Button>
@@ -132,12 +154,12 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
              {message.role === "assistant" ? (
                <div className="relative">
                  {editingMessageId === message.id ? (
-                    <div className="rounded-lg border border-blue-200">
+                    <div className="rounded-lg border border-blue-200 dark:border-blue-700">
                      <Editor
                        height="300px"
                        defaultLanguage="json"
                        value={editingContent}
-                        theme="vs-light"
+                        theme={isDarkMode ? "vs-dark" : "vs-light"}
                        options={{
                          minimap: { enabled: false },
                          scrollBeyondLastLine: false,
@@ -152,12 +174,12 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
                          editor.focus();
                        }}
                      />
-                      <div className="flex justify-end gap-2 p-2 bg-gray-50 border-t">
+                      <div className="flex justify-end gap-2 p-2 bg-gray-50 dark:bg-gray-800 border-t dark:border-gray-700">
                        <Button 
                          size="small"
                          icon={<CloseOutlined />}
                          onClick={handleCancelEdit}
-                          className="hover:bg-gray-200"
+                          className="hover:bg-gray-200 dark:hover:bg-gray-700"
                        >
                          取消
                        </Button>
@@ -166,7 +188,7 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
                          size="small"
                          icon={<CheckOutlined />}
                          onClick={handleSaveEdit}
-                          className="bg-blue-600 hover:bg-blue-700"
+                          className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
                        >
                          保存
                        </Button>
@@ -179,12 +201,12 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
                      copyLabel="复制代码"
                      copiedLabel="已复制！"
                      withLineNumbers
-                      className="rounded-lg"
+                      className="rounded-lg dark:border-gray-700"
                    />
                  )}
                </div>
              ) : (
-                <div className="text-gray-700 whitespace-pre-wrap break-words">
+                <div className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-words">
                  {message.content}
                </div>
              )}
@@ -193,20 +215,20 @@ export default function DifyChatDrawer({ open, onClose, onExport }) {
          <div ref={messagesEndRef} />
        </div>

-        <div className="border-t bg-white p-4">
+        <div className="border-t dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
          <form onSubmit={handleSendMessage} className="flex gap-2">
            <Input
              value={input}
              placeholder="请输入您的问题..."
              onChange={(e) => setInput(e.target.value)}
              disabled={isLoading}
-              className="flex-1 rounded-lg border-gray-300 hover:border-blue-400 focus:border-blue-600 focus:shadow-blue-100"
+              className="flex-1 rounded-lg border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 focus:border-blue-600 dark:focus:border-blue-500 focus:shadow-blue-100 dark:focus:shadow-blue-900 dark:bg-gray-700 dark:text-gray-200"
            />
            <Button 
              type="primary"
              htmlType="submit"
              loading={isLoading}
-              className="rounded-lg bg-blue-600 hover:bg-blue-700"
+              className="rounded-lg bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
            >
              发送
            </Button>