fix: move mode toggle out of settings

src/components/ChatWindow.tsx

@@ -20,6 +20,7 @@ import {
   TASK_STATUS_EXECUTING,
   TASK_STATUS_COMPLETED,
   TASK_STATUS_FINAL,
+  AUTOMATIC_MODE,
   PAUSE_MODE,
 } from "../types/agentTypes";
 import clsx from "clsx";
@@ -57,10 +58,13 @@ const ChatWindow = ({
 }: ChatWindowProps) => {
   const [t] = useTranslation();
   const [hasUserScrolled, setHasUserScrolled] = useState(false);
+
   const scrollRef = useRef<HTMLDivElement>(null);
   const isAgentPaused = useAgentStore.use.isAgentPaused();
   const agentMode = useAgentStore.use.agentMode();
   const agent = useAgentStore.use.agent();
+  const [isPauseMode, setIsPauseMode] = useState(agentMode === PAUSE_MODE);
+  const updateAgentMode = useAgentStore.use.updateAgentMode();
   const isWebSearchEnabled = useAgentStore.use.isWebSearchEnabled();
   const setIsWebSearchEnabled = useAgentStore.use.setIsWebSearchEnabled();
 
@@ -93,6 +97,11 @@ const ChatWindow = ({
     }
   };
 
+  const handleUpdateAgentMode = (value: boolean) => {
+    setIsPauseMode(value);
+    updateAgentMode(value ? PAUSE_MODE : AUTOMATIC_MODE);
+  };
+
   return (
     <div
       className={
@@ -167,22 +176,41 @@ const ChatWindow = ({
         )}
       </div>
       {displaySettings && (
-        <>
-          <div className="flex items-center justify-center">
-            <div className="m-1 flex items-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
-              <p className="font-mono text-sm">Web search</p>
-              <Switch
-                value={isWebSearchEnabled}
-                onChange={handleChangeWebSearch}
-              />
-            </div>
-          </div>
-        </>
+        <div className="flex flex-col items-center justify-center md:flex-row">
+          <SwitchContainer label="Web Search">
+            <Switch
+              value={isWebSearchEnabled}
+              onChange={handleChangeWebSearch}
+            />
+          </SwitchContainer>
+          <SwitchContainer label={agentMode}>
+            <Switch
+              disabled={agent !== null}
+              value={isPauseMode}
+              onChange={handleUpdateAgentMode}
+            />
+          </SwitchContainer>
+        </div>
       )}
     </div>
   );
 };
 
+const SwitchContainer = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div className="m-1 flex w-44 items-center justify-center gap-2 rounded-lg border-[2px] border-white/20 bg-zinc-700 px-2 py-1">
+      <p className="font-mono text-sm">{label}</p>
+      {children}
+    </div>
+  );
+};
+
 const ExampleAgentButton = ({
   name,
   children,

src/components/SettingsDialog.tsx

@@ -7,7 +7,6 @@ import {
   FaExclamationCircle,
   FaSyncAlt,
   FaCoins,
-  FaTachometerAlt,
 } from "react-icons/fa";
 import Dialog from "./Dialog";
 import Input from "./Input";
@@ -16,8 +15,6 @@ import Accordion from "./Accordion";
 import type { ModelSettings, SettingModel } from "../utils/types";
 import LanguageCombobox from "./LanguageCombobox";
 import clsx from "clsx";
-import { AUTOMATIC_MODE, PAUSE_MODE } from "../types/agentTypes";
-import { useAgentStore } from "./stores";
 import { useTranslation } from "next-i18next";
 
 export const SettingsDialog: React.FC<{
@@ -29,9 +26,6 @@ export const SettingsDialog: React.FC<{
     ...customSettings.settings,
   });
   const [t] = useTranslation();
-  const agent = useAgentStore.use.agent();
-  const agentMode = useAgentStore.use.agentMode();
-  const updateAgentMode = useAgentStore.use.updateAgentMode();
 
   useEffect(() => {
     setSettings(customSettings.settings);
@@ -244,32 +238,6 @@ export const SettingsDialog: React.FC<{
           attributes={{ options: GPT_MODEL_NAMES }}
           disabled={disabled}
         />
-        <Input
-          left={
-            <>
-              <FaTachometerAlt />
-              <span className="ml-2">{`${t("LABEL_MODE", {
-                ns: "settings",
-              })}`}</span>
-            </>
-          }
-          value={agentMode}
-          disabled={agent !== null}
-          onChange={() => null}
-          setValue={updateAgentMode as (agentMode: string) => void}
-          type="combobox"
-          toolTipProperties={{
-            message: `${t("AUTOMATIC_MODE", { ns: "settings" })} ${t(
-              "AUTOMATIC_MODE_DESCRIPTION",
-              { ns: "settings" }
-            )} \n\n${t("PAUSE_MODE", { ns: "settings" })}: ${t(
-              "PAUSE_MODE_DESCRIPTION",
-              { ns: "settings" }
-            )}`,
-            disabled: false,
-          }}
-          attributes={{ options: [AUTOMATIC_MODE, PAUSE_MODE] }}
-        />
         <Accordion
           child={advancedSettings}
           name={t("ADVANCED_SETTINGS", { ns: "settings" })}

src/components/Switch.tsx

@@ -4,10 +4,11 @@ import React, { useEffect, useState } from "react";
 
 interface SwitchProps {
   value: boolean;
+  disabled?: boolean;
   onChange: (checked: boolean) => void;
 }
 
-const Switch = ({ value, onChange }: SwitchProps) => {
+const Switch = ({ value, disabled = false, onChange }: SwitchProps) => {
   const [checked, setChecked] = useState(false);
 
   // Due to SSR, we should only change the internal state after the initial render
@@ -28,6 +29,7 @@ const Switch = ({ value, onChange }: SwitchProps) => {
         "relative inline-flex h-4 w-7 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out",
         "focus:outline-none focus-visible:ring focus-visible:ring-sky-500 focus-visible:ring-opacity-75"
       )}
+      disabled={disabled}
       onCheckedChange={handleChange}
       checked={checked}
     >