Merge pull request continuedev#4760 from continuedev/dallin/better-toggles

Settings toggle improvements

Author: sestinj

gui/src/components/gui/Switch.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { vscButtonBackground } from "..";
 
 type ToggleSwitchProps = {
   isToggled: boolean;
@@ -28,7 +29,10 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
         >
           <div className="relative h-full w-full">
             <div
-              className={`absolute left-1/4 top-0 h-full w-1/2 transform rounded-full transition-all ${isToggled ? "translate-x-1/2 bg-green-500" : "-translate-x-1/2 bg-red-500"}`}
+              className={`absolute left-1/4 top-0 h-full w-1/2 transform rounded-full border-[0.2px] border-solid transition-all ${isToggled ? "translate-x-1/2 brightness-150" : "-translate-x-1/2 brightness-75"}`}
+              style={{
+                backgroundColor: isToggled ? vscButtonBackground : "",
+              }}
             />
           </div>
         </div>

gui/src/pages/config/index.tsx

@@ -89,17 +89,17 @@ function ConfigPage() {
   }
 
   // TODO defaults are in multiple places, should be consolidated and probably not explicit here
-  const showSessionTabs = config.ui?.showSessionTabs ?? false;
+  const enableSessionTabs = config.ui?.showSessionTabs ?? false;
   const codeWrap = config.ui?.codeWrap ?? false;
   const showChatScrollbar = config.ui?.showChatScrollbar ?? false;
-  const displayRawMarkdown = config.ui?.displayRawMarkdown ?? false;
-  const disableSessionTitles = config.disableSessionTitles ?? false;
+  const formatMarkdownOutput = !(config.ui?.displayRawMarkdown ?? false);
+  const enableSessionTitles = !(config.disableSessionTitles ?? false);
   const readResponseTTS = config.experimental?.readResponseTTS ?? false;
 
   const allowAnonymousTelemetry = config.allowAnonymousTelemetry ?? true;
-  const disableIndexing = config.disableIndexing ?? false;
+  const enableIndexing = !(config.disableIndexing ?? false);
 
-  const useAutocompleteCache = config.tabAutocompleteOptions?.useCache ?? false;
+  const useAutocompleteCache = config.tabAutocompleteOptions?.useCache ?? true;
   const useChromiumForDocsCrawling =
     config.experimental?.useChromiumForDocsCrawling ?? false;
   const codeBlockToolbarPosition = config.ui?.codeBlockToolbarPosition ?? "top";
@@ -217,10 +217,10 @@ function ConfigPage() {
 
                 <div className="flex flex-col gap-4">
                   <ToggleSwitch
-                    isToggled={showSessionTabs}
+                    isToggled={enableSessionTabs}
                     onToggle={() =>
                       handleUpdate({
-                        showSessionTabs: !showSessionTabs,
+                        showSessionTabs: !enableSessionTabs,
                       })
                     }
                     text="Show Session Tabs"
@@ -234,82 +234,83 @@ function ConfigPage() {
                     }
                     text="Wrap Codeblocks"
                   />
+
                   <ToggleSwitch
-                    isToggled={displayRawMarkdown}
+                    isToggled={showChatScrollbar}
                     onToggle={() =>
                       handleUpdate({
-                        displayRawMarkdown: !displayRawMarkdown,
+                        showChatScrollbar: !showChatScrollbar,
                       })
                     }
-                    text="Display Raw Markdown"
+                    text="Show Chat Scrollbar"
                   />
                   <ToggleSwitch
-                    isToggled={allowAnonymousTelemetry}
+                    isToggled={readResponseTTS}
                     onToggle={() =>
                       handleUpdate({
-                        allowAnonymousTelemetry: !allowAnonymousTelemetry,
+                        readResponseTTS: !readResponseTTS,
                       })
                     }
-                    text="Allow Anonymous Telemetry"
+                    text="Text to Speech Output"
                   />
-                  <ToggleSwitch
-                    isToggled={disableIndexing}
+
+                  {/* <ToggleSwitch
+                    isToggled={useChromiumForDocsCrawling}
                     onToggle={() =>
                       handleUpdate({
-                        disableIndexing: !disableIndexing,
+                        useChromiumForDocsCrawling: !useChromiumForDocsCrawling,
                       })
                     }
-                    text="Disable Indexing"
-                  />
-
+                    text="Use Chromium for Docs Crawling"
+                  /> */}
                   <ToggleSwitch
-                    isToggled={disableSessionTitles}
+                    isToggled={enableSessionTitles}
                     onToggle={() =>
                       handleUpdate({
-                        disableSessionTitles: !disableSessionTitles,
+                        disableSessionTitles: !enableSessionTitles,
                       })
                     }
-                    text="Disable Session Titles"
+                    text="Enable Session Titles"
                   />
                   <ToggleSwitch
-                    isToggled={readResponseTTS}
+                    isToggled={formatMarkdownOutput}
                     onToggle={() =>
                       handleUpdate({
-                        readResponseTTS: !readResponseTTS,
+                        displayRawMarkdown: !formatMarkdownOutput,
                       })
                     }
-                    text="Response Text to Speech"
+                    text="Format Markdown"
                   />
 
                   <ToggleSwitch
-                    isToggled={showChatScrollbar}
+                    isToggled={allowAnonymousTelemetry}
                     onToggle={() =>
                       handleUpdate({
-                        showChatScrollbar: !showChatScrollbar,
+                        allowAnonymousTelemetry: !allowAnonymousTelemetry,
                       })
                     }
-                    text="Show Chat Scrollbar"
+                    text="Allow Anonymous Telemetry"
                   />
 
                   <ToggleSwitch
-                    isToggled={useAutocompleteCache}
+                    isToggled={enableIndexing}
                     onToggle={() =>
                       handleUpdate({
-                        useAutocompleteCache: !useAutocompleteCache,
+                        disableIndexing: !enableIndexing,
                       })
                     }
-                    text="Use Autocomplete Cache"
+                    text="Enable Indexing"
                   />
 
-                  <ToggleSwitch
-                    isToggled={useChromiumForDocsCrawling}
+                  {/* <ToggleSwitch
+                    isToggled={useAutocompleteCache}
                     onToggle={() =>
                       handleUpdate({
-                        useChromiumForDocsCrawling: !useChromiumForDocsCrawling,
+                        useAutocompleteCache: !useAutocompleteCache,
                       })
                     }
-                    text="Use Chromium for Docs Crawling"
-                  />
+                    text="Use Autocomplete Cache"
+                  /> */}
 
                   <label className="flex items-center justify-between gap-3">
                     <span className="lines lines-1 text-left">

gui/src/pages/gui/Chat.tsx

@@ -322,7 +322,7 @@ export function Chat() {
     [history],
   );
 
-  const showScrollbar = showChatScrollbar || window.innerHeight > 5000;
+  const showScrollbar = showChatScrollbar ?? window.innerHeight > 5000;
 
   useAutoScroll(stepsDivRef, history);
 
@@ -451,8 +451,8 @@ export function Chat() {
           </div>
         ))}
       </StepsDiv>
-      <div className={`relative`}>
-        <div className="absolute -top-8 right-2 z-30">
+      <div className={`relative mt-1`}>
+        <div className="absolute -top-8 right-2 z-30 flex flex-col gap-1">
           {ttsActive && (
             <StopButton
               className=""