refactor(frontend): settings and friends (#1400)

* refactor settings and friends

* extend base modal to support disabled property

* extend settings handler to change language via i18next

* remove unused settings.d.ts

---------

Co-authored-by: Jim Su <jimsu@protonmail.com>
Co-authored-by: Engel Nyst <enyst@users.noreply.github.com>

frontend/src/App.tsx

@@ -9,13 +9,14 @@ import Workspace from "#/components/Workspace";
 import LoadPreviousSessionModal from "#/components/modals/load-previous-session/LoadPreviousSessionModal";
 import SettingsModal from "#/components/modals/settings/SettingsModal";
 import { fetchMsgTotal } from "#/services/session";
-import { initializeAgent } from "#/services/settingsService";
 import Socket from "#/services/socket";
 import { ResFetchMsgTotal } from "#/types/ResponseType";
 import "./App.css";
 import AgentControlBar from "./components/AgentControlBar";
 import AgentStatusBar from "./components/AgentStatusBar";
 import Terminal from "./components/terminal/Terminal";
+import { initializeAgent } from "./services/agent";
+import { getSettings } from "./services/settings";
 
 interface Props {
   setSettingOpen: (isOpen: boolean) => void;
@@ -72,7 +73,7 @@ function App(): JSX.Element {
     if (initOnce) return;
     initOnce = true;
 
-    initializeAgent();
+    initializeAgent(getSettings());
 
     Socket.registerCallback("open", [getMsgTotal]);
 

frontend/src/api/index.ts

@@ -0,0 +1,9 @@
+export async function fetchModels() {
+  const response = await fetch(`/api/litellm-models`);
+  return response.json();
+}
+
+export async function fetchAgents() {
+  const response = await fetch(`/api/agents`);
+  return response.json();
+}

frontend/src/components/modals/base-modal/BaseModal.test.tsx

@@ -96,6 +96,42 @@ describe("BaseModal", () => {
     expect(screen.getByText("Children")).toBeInTheDocument();
   });
 
+  it("should disable the action given the condition", () => {
+    const { rerender } = render(
+      <BaseModal
+        isOpen
+        onOpenChange={vi.fn}
+        title="Settings"
+        actions={[
+          {
+            label: "Save",
+            action: () => {},
+            isDisabled: true,
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("Save")).toBeDisabled();
+
+    rerender(
+      <BaseModal
+        isOpen
+        onOpenChange={vi.fn}
+        title="Settings"
+        actions={[
+          {
+            label: "Save",
+            action: () => {},
+            isDisabled: false,
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText("Save")).not.toBeDisabled();
+  });
+
   it.skip("should not close if the backdrop or escape key is pressed", () => {
     const onOpenChangeMock = vi.fn();
     render(

frontend/src/components/modals/base-modal/FooterContent.tsx

@@ -3,6 +3,7 @@ import React from "react";
 
 export interface Action {
   action: () => void;
+  isDisabled?: boolean;
   label: string;
   className?: string;
   closeAfterAction?: boolean;
@@ -16,19 +17,22 @@ interface FooterContentProps {
 export function FooterContent({ actions, closeModal }: FooterContentProps) {
   return (
     <>
-      {actions.map(({ action, label, className, closeAfterAction }) => (
-        <Button
-          key={label}
-          type="button"
-          onClick={() => {
-            action();
-            if (closeAfterAction) closeModal();
-          }}
-          className={className}
-        >
-          {label}
-        </Button>
-      ))}
+      {actions.map(
+        ({ action, isDisabled, label, className, closeAfterAction }) => (
+          <Button
+            key={label}
+            type="button"
+            isDisabled={isDisabled}
+            onClick={() => {
+              action();
+              if (closeAfterAction) closeModal();
+            }}
+            className={className}
+          >
+            {label}
+          </Button>
+        ),
+      )}
     </>
   );
 }

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

@@ -4,15 +4,22 @@ import React from "react";
 import { renderWithProviders } from "test-utils";
 import AgentTaskState from "#/types/AgentTaskState";
 import SettingsForm from "./SettingsForm";
+import { Settings } from "#/services/settings";
 
 const onModelChangeMock = vi.fn();
 const onAgentChangeMock = vi.fn();
 const onLanguageChangeMock = vi.fn();
 
-const renderSettingsForm = (settings: Partial<Settings>) => {
+const renderSettingsForm = (settings?: Settings) => {
   renderWithProviders(
     <SettingsForm
-      settings={settings}
+      settings={
+        settings || {
+          LLM_MODEL: "model1",
+          AGENT: "agent1",
+          LANGUAGE: "en",
+        }
+      }
       models={["model1", "model2", "model3"]}
       agents={["agent1", "agent2", "agent3"]}
       onModelChange={onModelChangeMock}
@@ -24,7 +31,7 @@ const renderSettingsForm = (settings: Partial<Settings>) => {
 
 describe("SettingsForm", () => {
   it("should display the first values in the array by default", () => {
-    renderSettingsForm({});
+    renderSettingsForm();
 
     const modelInput = screen.getByRole("combobox", { name: "model" });
     const agentInput = screen.getByRole("combobox", { name: "agent" });
@@ -54,7 +61,11 @@ describe("SettingsForm", () => {
   it("should disable settings while task is running", () => {
     renderWithProviders(
       <SettingsForm
-        settings={{}}
+        settings={{
+          LLM_MODEL: "model1",
+          AGENT: "agent1",
+          LANGUAGE: "en",
+        }}
         models={["model1", "model2", "model3"]}
         agents={["agent1", "agent2", "agent3"]}
         onModelChange={onModelChangeMock}
@@ -74,7 +85,7 @@ describe("SettingsForm", () => {
 
   describe("onChange handlers", () => {
     it("should call the onModelChange handler when the model changes", () => {
-      renderSettingsForm({});
+      renderSettingsForm();
 
       const modelInput = screen.getByRole("combobox", { name: "model" });
       act(() => {
@@ -90,7 +101,7 @@ describe("SettingsForm", () => {
     });
 
     it("should call the onAgentChange handler when the agent changes", () => {
-      renderSettingsForm({});
+      renderSettingsForm();
 
       const agentInput = screen.getByRole("combobox", { name: "agent" });
       act(() => {
@@ -106,7 +117,7 @@ describe("SettingsForm", () => {
     });
 
     it("should call the onLanguageChange handler when the language changes", () => {
-      renderSettingsForm({});
+      renderSettingsForm();
 
       const languageInput = screen.getByRole("combobox", { name: "language" });
       act(() => {

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

@@ -6,9 +6,10 @@ import { I18nKey } from "../../../i18n/declaration";
 import { RootState } from "../../../store";
 import AgentTaskState from "../../../types/AgentTaskState";
 import { AutocompleteCombobox } from "./AutocompleteCombobox";
+import { Settings } from "#/services/settings";
 
 interface SettingsFormProps {
-  settings: Partial<Settings>;
+  settings: Settings;
   models: string[];
   agents: string[];