From ae835c17914302914555a4d87977cd736d051492 Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Sat, 4 Mar 2023 12:06:10 +0800
Subject: [PATCH] improvements

---
 index.html                                    |  2 +-
 .../ChatContent/Message/MessageContent.tsx    |  1 +
 .../ChatContent/Message/NewMessageButton.tsx  |  2 +-
 src/components/ConfigMenu/ConfigMenu.tsx      |  9 ++++-
 .../Menu/MenuOptions/ThemeSwitcher.tsx        | 38 +++++++++++++------
 5 files changed, 37 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index c1464c9..4e1c29a 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
     />
     <meta name="twitter:title" content="ChatGPTFreeApp" />
     <meta name="twitter:card" content="summary_large_image" />
-    <title>ChatGPT Free</title>
+    <title>Free ChatGPT</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/components/Chat/ChatContent/Message/MessageContent.tsx b/src/components/Chat/ChatContent/Message/MessageContent.tsx
index 531fc2e..bf8bc4d 100644
--- a/src/components/Chat/ChatContent/Message/MessageContent.tsx
+++ b/src/components/Chat/ChatContent/Message/MessageContent.tsx
@@ -314,6 +314,7 @@ const EditView = ({
         <button
           className='btn relative btn-primary mr-2'
           onClick={() => {
+            if (_content === '') return;
             const updatedMessages: MessageInterface[] = JSON.parse(
               JSON.stringify(messages)
             );
diff --git a/src/components/Chat/ChatContent/Message/NewMessageButton.tsx b/src/components/Chat/ChatContent/Message/NewMessageButton.tsx
index 3cfc277..b0ab6fd 100644
--- a/src/components/Chat/ChatContent/Message/NewMessageButton.tsx
+++ b/src/components/Chat/ChatContent/Message/NewMessageButton.tsx
@@ -60,7 +60,7 @@ const NewMessageButton = ({ messageIndex }: { messageIndex: number }) => {
   };
 
   return (
-    <div className='h-0 relative' key={messageIndex}>
+    <div className='h-0 w-0 relative' key={messageIndex}>
       <div
         className='absolute top-0 right-0 translate-x-1/2 translate-y-[-50%] text-gray-600 dark:text-white cursor-pointer bg-gray-200 dark:bg-gray-600/80 rounded-full p-1 text-sm hover:bg-gray-300 dark:hover:bg-gray-800/80 transition-bg duration-200'
         onClick={addMessage}
diff --git a/src/components/ConfigMenu/ConfigMenu.tsx b/src/components/ConfigMenu/ConfigMenu.tsx
index c16c772..d8eaf66 100644
--- a/src/components/ConfigMenu/ConfigMenu.tsx
+++ b/src/components/ConfigMenu/ConfigMenu.tsx
@@ -107,7 +107,7 @@ const ConfigMenu = () => {
                   </div>
                   <input
                     type='text'
-                    className='text-white p-3 text-sm border-none bg-gray-600 rounded-md p-0 m-0 w-full mr-0 h-8 focus:outline-none'
+                    className='text-gray-800 dark:text-white p-3 text-sm border-none bg-gray-200 dark:bg-gray-600 rounded-md p-0 m-0 w-full mr-0 h-8 focus:outline-none'
                     value={_apiKey}
                     onChange={(e) => {
                       _setApiKey(e.target.value);
@@ -132,6 +132,13 @@ const ConfigMenu = () => {
                 here
               </a>
             </div>
+            <div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm mt-4'>
+              We prioritize the security of your API key and handle it with
+              utmost care. Your key is exclusively stored on your browser and
+              never shared with any third-party entity. It is solely used for
+              the intended purpose of accessing the OpenAI API and not for any
+              other unauthorized use.
+            </div>
           </div>
 
           <div className='flex items-center justify-center p-6 gap-4'>
diff --git a/src/components/Menu/MenuOptions/ThemeSwitcher.tsx b/src/components/Menu/MenuOptions/ThemeSwitcher.tsx
index 67372d1..5f055d3 100644
--- a/src/components/Menu/MenuOptions/ThemeSwitcher.tsx
+++ b/src/components/Menu/MenuOptions/ThemeSwitcher.tsx
@@ -12,26 +12,40 @@ const getOppositeTheme = (theme: Theme): Theme => {
   }
 };
 const ThemeSwitcher = () => {
-  const [theme, setTheme] = useState<Theme>('dark');
+  const [theme, setTheme] = useState<Theme>();
 
   const switchTheme = () => {
-    setTheme(getOppositeTheme(theme));
+    setTheme(getOppositeTheme(theme!));
   };
 
   useEffect(() => {
-    document.documentElement.className = theme;
+    const _theme = localStorage.getItem('theme');
+    if (_theme === 'light' || _theme === 'dark') {
+      setTheme(_theme);
+    } else {
+      setTheme('dark');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (theme) {
+      document.documentElement.className = theme;
+      localStorage.setItem('theme', theme);
+    }
   }, [theme]);
 
   return (
-    <a
-      className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
-      onClick={switchTheme}
-    >
-      {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
-      {getOppositeTheme(theme).charAt(0).toUpperCase() +
-        getOppositeTheme(theme).slice(1)}{' '}
-      mode
-    </a>
+    theme && (
+      <a
+        className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
+        onClick={switchTheme}
+      >
+        {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
+        {getOppositeTheme(theme).charAt(0).toUpperCase() +
+          getOppositeTheme(theme).slice(1)}{' '}
+        mode
+      </a>
+    )
   );
 };
 
