feat(frontend): Update settings to include base URL (#3755)

* Update settings to include base URL

* Fix tests

frontend/src/components/modals/settings/SettingsForm.test.tsx

@@ -6,6 +6,7 @@ import { Settings } from "#/services/settings";
 import SettingsForm from "./SettingsForm";
 
 const onModelChangeMock = vi.fn();
+const onBaseURLChangeMock = vi.fn();
 const onAgentChangeMock = vi.fn();
 const onLanguageChangeMock = vi.fn();
 const onAPIKeyChangeMock = vi.fn();
@@ -19,6 +20,7 @@ const renderSettingsForm = (settings?: Settings) => {
       settings={
         settings || {
           LLM_MODEL: "gpt-4o",
+          LLM_BASE_URL: "base_url",
           AGENT: "agent1",
           LANGUAGE: "en",
           LLM_API_KEY: "sk-...",
@@ -30,6 +32,7 @@ const renderSettingsForm = (settings?: Settings) => {
       agents={["agent1", "agent2", "agent3"]}
       securityAnalyzers={["analyzer1", "analyzer2", "analyzer3"]}
       onModelChange={onModelChangeMock}
+      onBaseURLChange={onBaseURLChangeMock}
       onAgentChange={onAgentChangeMock}
       onLanguageChange={onLanguageChangeMock}
       onAPIKeyChange={onAPIKeyChangeMock}
@@ -59,6 +62,7 @@ describe("SettingsForm", () => {
   it("should display the existing values if they are present", () => {
     renderSettingsForm({
       LLM_MODEL: "gpt-3.5-turbo",
+      LLM_BASE_URL: "base_url",
       AGENT: "agent2",
       LANGUAGE: "es",
       LLM_API_KEY: "sk-...",
@@ -82,6 +86,7 @@ describe("SettingsForm", () => {
       <SettingsForm
         settings={{
           LLM_MODEL: "gpt-4o",
+          LLM_BASE_URL: "base_url",
           AGENT: "agent1",
           LANGUAGE: "en",
           LLM_API_KEY: "sk-...",
@@ -93,6 +98,7 @@ describe("SettingsForm", () => {
         securityAnalyzers={["analyzer1", "analyzer2", "analyzer3"]}
         disabled
         onModelChange={onModelChangeMock}
+        onBaseURLChange={onBaseURLChangeMock}
         onAgentChange={onAgentChangeMock}
         onLanguageChange={onLanguageChangeMock}
         onAPIKeyChange={onAPIKeyChangeMock}
@@ -202,6 +208,7 @@ describe("SettingsForm", () => {
         <SettingsForm
           settings={{
             LLM_MODEL: "gpt-4o",
+            LLM_BASE_URL: "base_url",
             AGENT: "agent1",
             LANGUAGE: "en",
             LLM_API_KEY: "sk-...",
@@ -213,6 +220,7 @@ describe("SettingsForm", () => {
           securityAnalyzers={["analyzer1", "analyzer2", "analyzer3"]}
           disabled
           onModelChange={onModelChangeMock}
+          onBaseURLChange={onBaseURLChangeMock}
           onAgentChange={onAgentChangeMock}
           onLanguageChange={onLanguageChangeMock}
           onAPIKeyChange={onAPIKeyChangeMock}

frontend/src/components/modals/settings/SettingsForm.tsx

@@ -17,6 +17,7 @@ interface SettingsFormProps {
   disabled: boolean;
 
   onModelChange: (model: string) => void;
+  onBaseURLChange: (baseURL: string) => void;
   onAPIKeyChange: (apiKey: string) => void;
   onAgentChange: (agent: string) => void;
   onLanguageChange: (language: string) => void;
@@ -31,6 +32,7 @@ function SettingsForm({
   securityAnalyzers,
   disabled,
   onModelChange,
+  onBaseURLChange,
   onAPIKeyChange,
   onAgentChange,
   onLanguageChange,
@@ -56,12 +58,20 @@ function SettingsForm({
         Advanced Options
       </Switch>
       {enableAdvanced && (
-        <Input
-          data-testid="custom-model-input"
-          label="Custom Model"
-          onValueChange={onModelChange}
-          defaultValue={settings.LLM_MODEL}
-        />
+        <>
+          <Input
+            data-testid="custom-model-input"
+            label="Custom Model"
+            onValueChange={onModelChange}
+            defaultValue={settings.LLM_MODEL}
+          />
+          <Input
+            data-testid="base-url-input"
+            label="Base URL"
+            onValueChange={onBaseURLChange}
+            defaultValue={settings.LLM_BASE_URL}
+          />
+        </>
       )}
       {!enableAdvanced && (
         <ModelSelector

frontend/src/components/modals/settings/SettingsModal.test.tsx

@@ -106,7 +106,7 @@ describe("SettingsModal", () => {
   });
 
   describe("onHandleSave", () => {
-    const initialSettings: Settings = {
+    const initialSettings: Partial<Settings> = {
       LLM_MODEL: "gpt-4o",
       AGENT: "CodeActAgent",
       LANGUAGE: "en",

frontend/src/components/modals/settings/SettingsModal.tsx

@@ -82,6 +82,13 @@ function SettingsModal({ isOpen, onOpenChange }: SettingsProps) {
     }));
   };
 
+  const handleBaseURLChange = (baseURL: string) => {
+    setSettings((prev) => ({
+      ...prev,
+      LLM_BASE_URL: baseURL,
+    }));
+  };
+
   const handleAgentChange = (agent: string) => {
     setSettings((prev) => ({ ...prev, AGENT: agent }));
   };
@@ -179,6 +186,7 @@ function SettingsModal({ isOpen, onOpenChange }: SettingsProps) {
           agents={agents}
           securityAnalyzers={securityAnalyzers}
           onModelChange={handleModelChange}
+          onBaseURLChange={handleBaseURLChange}
           onAgentChange={handleAgentChange}
           onLanguageChange={handleLanguageChange}
           onAPIKeyChange={handleAPIKeyChange}

frontend/src/services/session.test.ts

@@ -19,6 +19,7 @@ describe("startNewSession", () => {
   it("Should start a new session with the current settings", () => {
     const settings: Settings = {
       LLM_MODEL: "llm_value",
+      LLM_BASE_URL: "base_url",
       AGENT: "agent_value",
       LANGUAGE: "language_value",
       LLM_API_KEY: "sk-...",

frontend/src/services/settings.test.ts

@@ -17,6 +17,7 @@ describe("getSettings", () => {
   it("should get the stored settings", () => {
     (localStorage.getItem as Mock)
       .mockReturnValueOnce("llm_value")
+      .mockReturnValueOnce("base_url")
       .mockReturnValueOnce("agent_value")
       .mockReturnValueOnce("language_value")
       .mockReturnValueOnce("api_key")
@@ -27,6 +28,7 @@ describe("getSettings", () => {
 
     expect(settings).toEqual({
       LLM_MODEL: "llm_value",
+      LLM_BASE_URL: "base_url",
       AGENT: "agent_value",
       LANGUAGE: "language_value",
       LLM_API_KEY: "api_key",
@@ -53,6 +55,7 @@ describe("getSettings", () => {
       AGENT: DEFAULT_SETTINGS.AGENT,
       LANGUAGE: DEFAULT_SETTINGS.LANGUAGE,
       LLM_API_KEY: "",
+      LLM_BASE_URL: DEFAULT_SETTINGS.LLM_BASE_URL,
       CONFIRMATION_MODE: DEFAULT_SETTINGS.CONFIRMATION_MODE,
       SECURITY_ANALYZER: DEFAULT_SETTINGS.SECURITY_ANALYZER,
     });
@@ -63,6 +66,7 @@ describe("saveSettings", () => {
   it("should save the settings", () => {
     const settings: Settings = {
       LLM_MODEL: "llm_value",
+      LLM_BASE_URL: "base_url",
       AGENT: "agent_value",
       LANGUAGE: "language_value",
       LLM_API_KEY: "some_key",

frontend/src/services/settings.ts

@@ -2,6 +2,7 @@ const LATEST_SETTINGS_VERSION = 2;
 
 export type Settings = {
   LLM_MODEL: string;
+  LLM_BASE_URL: string;
   AGENT: string;
   LANGUAGE: string;
   LLM_API_KEY: string;
@@ -11,6 +12,7 @@ export type Settings = {
 
 export const DEFAULT_SETTINGS: Settings = {
   LLM_MODEL: "openai/gpt-4o",
+  LLM_BASE_URL: "",
   AGENT: "CodeActAgent",
   LANGUAGE: "en",
   LLM_API_KEY: "",
@@ -60,6 +62,7 @@ export const getDefaultSettings = (): Settings => DEFAULT_SETTINGS;
  */
 export const getSettings = (): Settings => {
   const model = localStorage.getItem("LLM_MODEL");
+  const baseUrl = localStorage.getItem("LLM_BASE_URL");
   const agent = localStorage.getItem("AGENT");
   const language = localStorage.getItem("LANGUAGE");
   const apiKey = localStorage.getItem("LLM_API_KEY");
@@ -68,6 +71,7 @@ export const getSettings = (): Settings => {
 
   return {
     LLM_MODEL: model || DEFAULT_SETTINGS.LLM_MODEL,
+    LLM_BASE_URL: baseUrl || DEFAULT_SETTINGS.LLM_BASE_URL,
     AGENT: agent || DEFAULT_SETTINGS.AGENT,
     LANGUAGE: language || DEFAULT_SETTINGS.LANGUAGE,
     LLM_API_KEY: apiKey || DEFAULT_SETTINGS.LLM_API_KEY,