LLM settings

All-Hands-AI · Jan 30, 2025 · ce06d5c · ce06d5c
1 parent 0bc2955
commit ce06d5c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/frontend/__tests__/routes/settings.test.tsx b/frontend/__tests__/routes/settings.test.tsx
@@ -108,7 +108,14 @@ describe("Settings Screen", () => {
   });
 
   describe("LLM Settings", () => {
-    it.todo("should render the basic LLM settings");
+    it("should render the basic LLM settings by default", async () => {
+      renderSettingsScreen();
+
+      screen.getByTestId("llm-provider-input");
+      screen.getByTestId("llm-model-input");
+      screen.getByTestId("llm-api-key-input");
+    });
+
     it.todo(
       "should render the advanced LLM settings if the advanced switch is toggled",
     );

diff --git a/frontend/src/components/features/settings/settings-input.tsx b/frontend/src/components/features/settings/settings-input.tsx
@@ -1,17 +1,25 @@
+import { cn } from "#/utils/utils";
+
 interface SettingsInputProps {
   testId?: string;
   label: string;
   type: React.HTMLInputTypeAttribute;
+  className?: string;
 }
 
-export function SettingsInput({ testId, label, type }: SettingsInputProps) {
+export function SettingsInput({
+  testId,
+  label,
+  type,
+  className,
+}: SettingsInputProps) {
   return (
-    <label className="flex flex-col gap-2.5">
+    <label className={cn("flex flex-col gap-2.5 w-fit", className)}>
       <span className="text-sm">{label}</span>
       <input
         data-testid={testId}
         type={type}
-        className="bg-[#454545] border border-[#717888] h-10 w-[680px] rounded p-2"
+        className="bg-[#454545] border border-[#717888] h-10 w-full rounded p-2"
       />
     </label>
   );

diff --git a/frontend/src/routes/settings.tsx b/frontend/src/routes/settings.tsx
@@ -14,11 +14,14 @@ function SettingsScreen() {
   return (
     <main className="bg-[#24272E] border border-[#454545] h-full rounded-xl">
       <form action="" className="flex flex-col h-full">
-        <div className="flex flex-col gap-6 grow">
+        <header className="text-sm leading-6 px-3 py-1.5 border-b border-b-[#454545]">
+          Settings
+        </header>
+
+        <div className="flex flex-col gap-6 grow w-fit">
           <h2 className="text-[28px] leading-8 tracking-[-0.02em] font-bold">
             Account Settings
           </h2>
-
           {isSaas && (
             <button type="button">Configure GitHub Repositories</button>
           )}
@@ -27,9 +30,9 @@ function SettingsScreen() {
               testId="github-token-input"
               label="GitHub Token"
               type="password"
+              className="w-[680px]"
             />
           )}
-
           {isGitHubTokenSet && (
             <BrandButton variant="primary">Disconnect from GitHub</BrandButton>
           )}
@@ -41,15 +44,35 @@ function SettingsScreen() {
               className="bg-[#454545] border border-[#717888] h-10 w-[680px] rounded p-2"
             />
           </label>
-
           <SettingsSwitch testId="enable-analytics-switch" showOptionalTag>
             Enable analytics
           </SettingsSwitch>
-
-          <h2>LLM Settings</h2>
+          <h2 className="text-[28px] leading-8 tracking-[-0.02em] font-bold">
+            LLM Settings
+          </h2>
+          <div className="flex w-full justify-between gap-[46px]">
+            <SettingsInput
+              testId="llm-provider-input"
+              label="LLM Provider"
+              type="text"
+              className="flex grow"
+            />
+            <SettingsInput
+              testId="llm-model-input"
+              label="LLM Model"
+              type="text"
+              className="flex grow"
+            />
+          </div>
+          <SettingsInput
+            testId="llm-api-key-input"
+            label="API Key"
+            type="password"
+            className="w-[680px]"
+          />
         </div>
 
-        <footer className="flex gap-6 p-6 justify-end border-t border-t-[#717888]">
+        <footer className="flex gap-6 p-6 justify-end border-t border-t-[#454545]">
           <BrandButton variant="secondary">Reset to defaults</BrandButton>
           <BrandButton variant="primary">Save Changes</BrandButton>
         </footer>