Merge pull request 'added API keys' (#103) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/103

app/components/settings/ButtonSettings.tsx

@@ -9,9 +9,9 @@ interface ButtonSettingProps {
 const ButtonSetting: React.FC<ButtonSettingProps> = ({ label, onClick, className }) => {
   return (
     <div className="settings-option">
-      <button
+      <button 
         onClick={onClick} // Call the onClick function when the button is clicked
-        className={className} // Apply any additional classes
+        className={className="export-button"} // Apply any additional classes
       >
         {label} {/* Display the label on the button */}
       </button>

app/components/settings/Settings.tsx

@@ -618,6 +618,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               type="text" // Input type
               placeholder={localStorage.getItem('mistral') || "Enter the API key"}
             />
+            <div className="settings-option">
+              <a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
+                <button className="export-button">Get your API key here</button>
+              </a>
+            </div>
             <TextSettings
               label="OpenAI" // Label for the input
               value={openai} // State variable for the input
@@ -625,6 +630,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               type="text" // Input type
               placeholder={localStorage.getItem('openai') || "Enter the API key"}
             />
+            <div className="settings-option">
+              <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
+                <button className="export-button">Get your API key here</button>
+              </a>
+            </div>
             <TextSettings
               label="Anthropic" // Label for the input
               value={anthropic} // State variable for the input
@@ -632,6 +642,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               type="text" // Input type
               placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
             />
+            <div className="settings-option">
+              <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
+                <button className="export-button">Get your API key here</button>
+              </a>
+            </div>
             <TextSettings
               label="Google" // Label for the input
               value={google} // State variable for the input
@@ -639,6 +654,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               type="text" // Input type
               placeholder={localStorage.getItem('google') || "Enter the API key"}
             />
+            <div className="settings-option">
+              <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
+                <button className="export-button">Get your API key here</button>
+              </a>
+            </div>
           </div>
         );