feat: move mode ouf of setting dialog

Author: 汤圆

src/components/ChatWindow.tsx

@@ -20,6 +20,7 @@ import {
   TASK_STATUS_COMPLETED,
   TASK_STATUS_FINAL,
   PAUSE_MODE,
+  AUTOMATIC_MODE,
 } from "../types/agentTypes";
 import clsx from "clsx";
 import { getMessageContainerStyle, getTaskStatusIcon } from "./utils/helpers";
@@ -61,6 +62,7 @@ const ChatWindow = ({
   const agent = useAgentStore.use.agent();
   const isWebSearchEnabled = useAgentStore.use.isWebSearchEnabled();
   const setIsWebSearchEnabled = useAgentStore.use.setIsWebSearchEnabled();
+  const updateAgentMode = useAgentStore.use.updateAgentMode();
 
   const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
     const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
@@ -116,6 +118,10 @@ const ChatWindow = ({
     return depth;
   };
 
+  const handleUpdateAgentMode = (value: boolean) => {
+    updateAgentMode(value ? PAUSE_MODE : AUTOMATIC_MODE);
+  };
+
   return (
     <div
       className={
@@ -178,20 +184,42 @@ 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">{t("web-search")}</p>
+        <div className="flex flex-col items-center justify-center md:flex-row">
+          <SwitchContainer label="Web Search">
             <Switch
+              disabled={agent !== null}
               value={isWebSearchEnabled}
               onChange={handleChangeWebSearch}
             />
-          </div>
+          </SwitchContainer>
+          <SwitchContainer label={PAUSE_MODE}>
+            <Switch
+              disabled={agent !== null}
+              value={agentMode === PAUSE_MODE}
+              onChange={handleUpdateAgentMode}
+            />
+          </SwitchContainer>
         </div>
       )}
     </div>
   );
 };
 
+const SwitchContainer = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div className="m-1 flex w-36 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>
+  );
+};
+
 interface HeaderProps {
   title?: string | ReactNode;
   messages: Message[];

src/components/SettingsDialog.tsx

@@ -10,7 +10,6 @@ import {
   FaCoins,
   FaCode,
   FaServer,
-  FaTachometerAlt,
 } from "react-icons/fa";
 import Dialog from "./Dialog";
 import Input from "./Input";
@@ -19,8 +18,6 @@ import Accordion from "./Accordion";
 import type { ModelSettings, SettingModel } from "../utils/types";
 import { useGuestMode } from "../hooks/useGuestMode";
 import clsx from "clsx";
-import { AUTOMATIC_MODE, PAUSE_MODE } from "../types/agentTypes";
-import { useAgentStore } from "./stores";
 
 export const SettingsDialog: React.FC<{
   show: boolean;
@@ -32,9 +29,6 @@ export const SettingsDialog: React.FC<{
   });
   const { isGuestMode } = useGuestMode(settings.customGuestKey);
   const { t } = useTranslation(["settings", "common"]);
-  const agent = useAgentStore.use.agent();
-  const agentMode = useAgentStore.use.agentMode();
-  const updateAgentMode = useAgentStore.use.updateAgentMode();
 
   useEffect(() => {
     setSettings(customSettings.settings);
@@ -253,24 +247,6 @@ export const SettingsDialog: React.FC<{
             type="password"
           />
         )}
-        <Input
-          left={
-            <>
-              <FaTachometerAlt />
-              <span className="ml-2">{t("mode")}</span>
-            </>
-          }
-          value={agentMode}
-          disabled={agent !== null}
-          onChange={() => null}
-          setValue={updateAgentMode as (agentMode: string) => void}
-          type="combobox"
-          toolTipProperties={{
-            message: t("mode-tips") as string,
-            disabled: false,
-          }}
-          attributes={{ options: [AUTOMATIC_MODE, PAUSE_MODE] }}
-        />
         <Accordion
           child={advancedSettings}
           name={t("advanced-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
@@ -23,11 +24,12 @@ const Switch = ({ value, onChange }: SwitchProps) => {
     <SwitchPrimitive.Root
       className={clsx(
         "group",
-        "radix-state-checked:bg-sky-600",
-        "radix-state-unchecked:bg-zinc-500 dark:radix-state-unchecked:bg-zinc-800",
-        "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"
+        "radix-state-checked:bg-sky-600 radix-state-unchecked:bg-zinc-500 dark:radix-state-unchecked:bg-zinc-800",
+        "relative inline-flex h-4 w-7 flex-shrink-0 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 ? "cursor-not-allowed opacity-60" : "cursor-pointer "
       )}
+      disabled={disabled}
       onCheckedChange={handleChange}
       checked={checked}
     >