Add model and agent options in frontend (#271)

Add model and agent options in frontend

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import Planner from "./components/Planner";
 import CodeEditor from "./components/CodeEditor";
 import Browser from "./components/Browser";
 import Errors from "./components/Errors";
+import BannerSettings from "./components/BannerSettings";
 
 const TAB_OPTIONS = ["terminal", "planner", "code", "browser"] as const;
 type TabOption = (typeof TAB_OPTIONS)[number];
@@ -55,7 +56,8 @@ function App(): JSX.Element {
       <div className="right-pane">
         <div className="workspace-content">
           <div className="workspace-heading">
-            <p>OpenDevin's Workspace</p>
+            <p>OpenDevin&apos;s Workspace</p>
+            <BannerSettings />
           </div>
           <div className="tab-container">
             {TAB_OPTIONS.map((tab) => (

frontend/src/components/BannerSettings.css

@@ -0,0 +1,12 @@
+.banner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+select {
+    padding: 0.5rem;
+    border: 0;
+    border-radius: 5px;
+}

frontend/src/components/BannerSettings.tsx

@@ -0,0 +1,49 @@
+import React, { ChangeEvent } from "react";
+import {
+  AGENTS,
+  MODELS,
+  changeAgent,
+  changeModel,
+} from "../services/settingsService";
+import "./BannerSettings.css";
+
+function ModelSelect(): JSX.Element {
+  return (
+    <select
+      onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+        changeModel(e.target.value)
+      }
+      className="model-select"
+    >
+      {MODELS.map((model) => (
+        <option>{model}</option>
+      ))}
+    </select>
+  );
+}
+
+function AgentSelect(): JSX.Element {
+  return (
+    <select
+      onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+        changeAgent(e.target.value)
+      }
+      className="agent-select"
+    >
+      {AGENTS.map((agent) => (
+        <option>{agent}</option>
+      ))}
+    </select>
+  );
+}
+
+function BannerSettings(): JSX.Element {
+  return (
+    <div className="banner">
+      <ModelSelect />
+      <AgentSelect />
+    </div>
+  );
+}
+
+export default BannerSettings;

frontend/src/services/settingsService.ts

@@ -0,0 +1,36 @@
+import socket from "../socket/socket";
+import { setInitialized } from "../state/taskSlice";
+import store from "../store";
+
+export const MODELS = [
+  "gpt-3.5-turbo-1106",
+  "gpt-4-0125-preview",
+  "claude-3-haiku-20240307",
+  "claude-3-sonnet-20240229",
+  "claude-3-sonnet-20240307",
+];
+
+export type Model = (typeof MODELS)[number];
+
+export const AGENTS = ["LangchainsAgent", "CodeActAgent"];
+
+export type Agent = (typeof AGENTS)[number];
+
+function changeSetting(setting: string, value: string): void {
+  const event = { action: "initialize", args: { [setting]: value } };
+  const eventString = JSON.stringify(event);
+  socket.send(eventString);
+  store.dispatch(setInitialized(false));
+}
+
+export function changeModel(model: Model): void {
+  changeSetting("model", model);
+}
+
+export function changeAgent(agent: Agent): void {
+  changeSetting("agent", agent);
+}
+
+export function changeDirectory(directory: string): void {
+  changeSetting("directory", directory);
+}

opendevin/server/session.py

@@ -115,14 +115,14 @@ class Session:
 
     async def create_controller(self, start_event=None):
         directory = DEFAULT_WORKSPACE_DIR
-        if start_event and "directory" in start_event.args:
-            directory = start_event.args["directory"]
+        if start_event and "directory" in start_event["args"]:
+            directory = start_event["args"]["directory"]
         agent_cls = "LangchainsAgent"
-        if start_event and "agent_cls" in start_event.args:
-            agent_cls = start_event.args["agent_cls"]
+        if start_event and "agent_cls" in start_event["args"]:
+            agent_cls = start_event["args"]["agent_cls"]
         model = LLM_MODEL
-        if start_event and "model" in start_event.args:
-            model = start_event.args["model"]
+        if start_event and "model" in start_event["args"]:
+            model = start_event["args"]["model"]
         if not os.path.exists(directory):
             print(f"Workspace directory {directory} does not exist. Creating it...")
             os.makedirs(directory)