Re-add banner to App and add change message (#282)

* Re-add banner to App and add change message

* feat: styling improvements for right panel

---------

Co-authored-by: huybery <huybery@gmail.com>

frontend/src/App.tsx

@@ -56,10 +56,15 @@ function App(): JSX.Element {
         <ChatInterface />
       </div>
       <div className="right-pane">
-        <div className="workspace-heading">
-          <p>OpenDevin Workspace</p>
+        <div className="navbar bg-base-100">
+          <div className="flex-1">
+            <div className="btn btn-ghost text-xl">OpenDevin Workspace</div>
+          </div>
+          <div className="flex-none">
+            <BannerSettings />
+          </div>
         </div>
-        <div role="tablist" className="tabs tabs-bordered tabs-lg">
+        <div role="tablist" className="tabs tabs-bordered tabs-lg bg-base-100">
           {TAB_OPTIONS.map((tab) => (
             <Tab
               key={tab}

frontend/src/components/BannerSettings.css

@@ -9,4 +9,5 @@ select {
     padding: 0.5rem;
     border: 0;
     border-radius: 5px;
+    font-size: 1rem;
 }

frontend/src/components/BannerSettings.tsx

@@ -13,7 +13,7 @@ function ModelSelect(): JSX.Element {
       onChange={(e: ChangeEvent<HTMLSelectElement>) =>
         changeModel(e.target.value)
       }
-      className="model-select"
+      className="select w-full max-w-xs bg-base-300"
     >
       {MODELS.map((model) => (
         <option>{model}</option>
@@ -28,7 +28,7 @@ function AgentSelect(): JSX.Element {
       onChange={(e: ChangeEvent<HTMLSelectElement>) =>
         changeAgent(e.target.value)
       }
-      className="agent-select"
+      className="select w-full max-w-xs bg-base-300"
     >
       {AGENTS.map((agent) => (
         <option>{agent}</option>

frontend/src/services/settingsService.ts

@@ -1,4 +1,5 @@
 import socket from "../socket/socket";
+import { appendAssistantMessage } from "../state/chatSlice";
 import { setInitialized } from "../state/taskSlice";
 import store from "../store";
 
@@ -21,6 +22,7 @@ function changeSetting(setting: string, value: string): void {
   const eventString = JSON.stringify(event);
   socket.send(eventString);
   store.dispatch(setInitialized(false));
+  store.dispatch(appendAssistantMessage(`Changed ${setting} to "${value}"`));
 }
 
 export function changeModel(model: Model): void {
@@ -28,7 +30,7 @@ export function changeModel(model: Model): void {
 }
 
 export function changeAgent(agent: Agent): void {
-  changeSetting("agent", agent);
+  changeSetting("agent_cls", agent);
 }
 
 export function changeDirectory(directory: string): void {