From 03881dc20f940de6dc40f47fcff798d7a06fa469 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Thu, 3 Oct 2024 15:00:20 +0200
Subject: [PATCH] Fixed | Change API Keys

---
 app/components/settings/Settings.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index cde6e92..18fb661 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -124,10 +124,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [selectedTheme, setSelectedTheme] = useState<string>('');
 
   // API Keys
-  const [mistral, setMistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
-  const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
-  const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
-  const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
+  const [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
+  const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
+  const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
+  const [google, setGoogle] = useState(localStorage.getItem('google') || "");
   const [myBoolean, setMyBoolean] =useState<boolean | any>(() => getItemFromLocalStorage('myBoolean'));
 
   const settings = {
@@ -624,24 +624,28 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={mistral} // State variable for the input
               setValue={setMistral} // State updater function
               type="text" // Input type
+              placeholder={localStorage.getItem('mistral') || "Enter the API key"}
             />
             <TextSettings
               label="OpenAI" // Label for the input
               value={openai} // State variable for the input
               setValue={setOpenai} // State updater function
               type="text" // Input type
+              placeholder={localStorage.getItem('openai') || "Enter the API key"}
             />
             <TextSettings
               label="Anthropic" // Label for the input
               value={anthropic} // State variable for the input
               setValue={setAnthropic} // State updater function
               type="text" // Input type
+              placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
             />
             <TextSettings
               label="Google" // Label for the input
               value={google} // State variable for the input
               setValue={setGoogle} // State updater function
               type="text" // Input type
+              placeholder={localStorage.getItem('google') || "Enter the API key"}
             />
           </div>
         );