Update src/components/settings/settings.tsx

src/components/settings/settings.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import classNames from "classnames";
-
+import { useEffect } from "react";
 import { PiGearSixFill } from "react-icons/pi";
 // @ts-expect-error not needed
 import { PROVIDERS } from "./../../../utils/providers";
@@ -11,13 +11,27 @@ function Settings({
   provider,
   error,
   onChange,
+  localSettings,
+  setLocalSettings,
 }: {
   open: boolean;
   provider: string;
   error?: string;
   onClose: React.Dispatch<React.SetStateAction<boolean>>;
   onChange: (provider: string) => void;
+  localSettings: any;
+  setLocalSettings: React.Dispatch<React.SetStateAction<any>>;
 }) {
+
+  // persist the local settings to local storage
+  const persistLocalSettings = () => {
+    localStorage.setItem('localSettings', JSON.stringify(localSettings));
+  };
+
+  useEffect(() => {
+    persistLocalSettings();
+  }, [localSettings]);
+
   return (
     <div className="">
       <button
@@ -54,16 +68,6 @@ function Settings({
         <main className="px-4 pt-3 pb-4 space-y-4">
           {/* toggle using tailwind css */}
           <div>
-            <a
-              href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/74"
-              target="_blank"
-              className="w-full flex items-center justify-between text-gray-600 bg-gray-50 border border-gray-100 px-2 py-2 rounded-lg mb-3 text-sm font-medium hover:brightness-95"
-            >
-              How to use it locally?
-              <button className="bg-black text-white rounded-md px-3 py-1.5 text-xs font-semibold cursor-pointer">
-                See the guide
-              </button>
-            </a>
             <div className="flex items-center justify-between">
               <p className="text-gray-800 text-sm font-medium flex items-center justify-between">
                 Use auto-provider
@@ -128,10 +132,114 @@ function Settings({
                 </div>
               ))}
             </div>
+            <hr className="text-gray-800 text-sm font-medium mb-2" />
           </label>
+          {provider === "local" && (
+            <div className="space-y-2">
+              <p className="text-gray-800 text-sm font-medium mb-2">
+                Make sure to run the local server first
+              </p>
+              <hr className="text-gray-800 text-sm font-medium mb-2" />
+              <label className="block">
+                <p className="text-gray-800 text-sm font-medium mb-1">
+                  API Key
+                </p>
+                <input
+                  type="text"
+                  value={localSettings.apiKey}
+                  onChange={(e) => {
+                    setLocalSettings({ ...localSettings, apiKey: e.target.value });
+                  }}
+                  className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </label>
+              <label className="block">
+                <p className="text-gray-800 text-sm font-medium mb-1">
+                  API URL
+                </p>
+                <input
+                  type="text"
+                  value={localSettings.apiUrl || "http://localhost:11434/v1"}
+                  onChange={(e) => {
+                    setLocalSettings({ ...localSettings, apiUrl: e.target.value });
+                  }}
+                  className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </label>
+              <label className="block">
+                <p className="text-gray-800 text-sm font-medium mb-1">
+                  Model
+                </p>
+                <input
+                  type="text"
+                  value={localSettings.model || "gemma3:1b"}
+                  onChange={(e) => {
+                    setLocalSettings({ ...localSettings, model: e.target.value });
+                  }}
+                  className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </label>
+            </div>
+          )}
+          {provider === "openrouter" && (
+            <div className="space-y-2">
+              <p className="text-gray-800 text-sm font-medium mb-2">
+                Get your OpenRouter API key from
+                <a
+                  href="https://openrouter.ai/
+                  "
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500"
+                >
+                  here
+                </a>
+              </p>
+              <hr className="text-gray-800 text-sm font-medium mb-2" />
+              <label className="block">
+                <p className="text-gray-800 text-sm font-medium mb-1">
+                  API Key
+                </p>
+                <input
+                  type="text"
+                  value={localSettings.openRouterApiKey}
+                  onChange={(e) => {
+                    setLocalSettings({ ...localSettings, openRouterApiKey: e.target.value });
+                  }}
+                  className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </label>
+              <label className="block">
+                <p className="text-gray-800 text-sm font-medium mb-1">
+                  Base URL
+                </p>
+                <input
+                  type="text"
+                  value={localSettings.openRouterApiUrl || "https://openrouter.ai/api/v1"}
+                  onChange={(e) => {
+                    setLocalSettings({ ...localSettings, openRouterApiUrl: e.target.value });
+                  }}
+                  className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </label>
+              <label className="block">
+                <p className="text-gray-800 text-sm font-medium mb-1">
+                  Model
+                </p>
+                <input
+                  type="text"
+                  value={localSettings.openRouterModel || "deepseek/deepseek-chat-v3-0324:free"}
+                  onChange={(e) => {
+                    setLocalSettings({ ...localSettings, openRouterModel: e.target.value });
+                  }}
+                  className="w-full border border-gray-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </label>
+            </div>
+          )}
         </main>
       </div>
     </div>
   );
 }
-export default Settings;
+export default Settings;