Add toggle for style customization (#212)

Author: ppsreejith

web/src/components/devtools/Settings.tsx

@@ -1,7 +1,7 @@
 import { Checkbox, Button, Input, VStack, Text, Link, HStack, Box, Divider, AbsoluteCenter, Stack, Switch, Textarea, Radio, RadioGroup, IconButton, Icon, Tag, TagLabel, Badge } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 import { dispatch, logoutState, resetState } from '../../state/dispatch';
-import { updateIsLocal, updateIsDevToolsOpen, updateUploadLogs, updateDevToolsTabName, DevToolsTabName, setConfirmChanges, setDemoMode, setDRMode, setGroupsEnabled, setModelsMode, setViewAllCatalogs, setEnableHighlightHelpers, setUseMemory } from '../../state/settings/reducer';
+import { updateIsLocal, updateIsDevToolsOpen, updateUploadLogs, updateDevToolsTabName, DevToolsTabName, setConfirmChanges, setDemoMode, setDRMode, setGroupsEnabled, setModelsMode, setViewAllCatalogs, setEnableHighlightHelpers, setUseMemory, setEnableStyleCustomization } from '../../state/settings/reducer';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../state/store';
 import { configs } from '../../constants';
@@ -70,6 +70,7 @@ const SettingsPage = () => {
   const thread = useSelector((state: RootState) => state.chat.activeThread)
   const activeThread = useSelector((state: RootState) => state.chat.threads[thread])
   const useMemory = useSelector((state: RootState) => state.settings.useMemory)
+  const enableStyleCustomization = useSelector((state: RootState) => state.settings.enableStyleCustomization)
 
   const reloadBillingInfo = async () => {
     await getBillingInfo().then((billingInfo) => {
@@ -124,6 +125,9 @@ const SettingsPage = () => {
   const updateUseMemory = (value: boolean) => {
     dispatch(setUseMemory(value))
   }
+  const updateEnableStyleCustomization = (value: boolean) => {
+    dispatch(setEnableStyleCustomization(value))
+  }
 
   // const CURRENT_ACTION_TESTS = ACTION_TESTS[tool];
   return (
@@ -208,6 +212,10 @@ const SettingsPage = () => {
             <Text color={"minusxBW.800"} fontSize="sm">Use Memory</Text>
             <Switch color={"minusxBW.800"} colorScheme='minusxGreen' size='md' isChecked={useMemory} onChange={(e) => updateUseMemory(e.target.checked)} />
           </HStack>
+          <HStack justifyContent={"space-between"}>
+            <Text color={"minusxBW.800"} fontSize="sm">Style Customization</Text>
+            <Switch color={"minusxBW.800"} colorScheme='minusxGreen' size='md' isChecked={enableStyleCustomization} onChange={(e) => updateEnableStyleCustomization(e.target.checked)} />
+          </HStack>
         </VStack>
       </SettingsBlock>
       <SettingsBlock title="Privacy">

web/src/components/devtools/index.tsx

@@ -9,6 +9,8 @@ import { configs } from '../../constants';
 import { Context } from './Context';
 import { MinusXMD } from './Memory';
 import CSSCustomization from './CSSCustomization';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../state/store';
 
 const Monitors: MonitorDef[] = [
   {
@@ -29,6 +31,7 @@ const Monitors: MonitorDef[] = [
   {
     title: "CSS Customization",
     component: CSSCustomization,
+    tags: ['production']
   },
   {
     title: "Dev Context",
@@ -45,11 +48,18 @@ const Monitors: MonitorDef[] = [
 ]
 
 export const DevToolsBox: React.FC = () => {
+  const enableStyleCustomization = useSelector((state: RootState) => state.settings.enableStyleCustomization)
+  
   const monitors = Monitors.filter(Monitor => {
-    if (configs.IS_DEV) {
-      return true
+    // Check existing dev/production logic
+    const isAllowedByEnv = configs.IS_DEV || Monitor.tags?.includes('production')
+    
+    // Special filtering for CSS Customization tab
+    if (Monitor.title === 'CSS Customization') {
+      return isAllowedByEnv && enableStyleCustomization
     }
-    return Monitor.tags?.includes('production') || false
+    
+    return isAllowedByEnv
   })
   console.log("Load assets here")
   return (

web/src/state/settings/reducer.ts

@@ -114,6 +114,7 @@ interface Settings {
   enable_highlight_helpers: boolean
   useMemory: boolean
   customCSS: string
+  enableStyleCustomization: boolean
 }
 
 const initialState: Settings = {
@@ -147,6 +148,7 @@ const initialState: Settings = {
   enable_highlight_helpers: false,
   useMemory: true,
   customCSS: '',
+  enableStyleCustomization: false,
 }
 
 export const settingsSlice = createSlice({
@@ -340,6 +342,9 @@ export const settingsSlice = createSlice({
     },
     setCustomCSS: (state, action: PayloadAction<string>) => {
       state.customCSS = action.payload
+    },
+    setEnableStyleCustomization: (state, action: PayloadAction<boolean>) => {
+      state.enableStyleCustomization = action.payload
     }
   },
 })
@@ -351,7 +356,7 @@ export const { updateIsLocal, updateUploadLogs,
   updateSidePanelTabName, updateDevToolsTabName, setSuggestQueries,
   setIframeInfo, setConfirmChanges, setDemoMode, setAppRecording, setAiRules,
   applyTableDiff, setSelectedModels, setDRMode, setSelectedCatalog, saveCatalog, deleteCatalog, setMemberships,
-  setGroupsEnabled, resetDefaultTablesDB, setModelsMode, setViewAllCatalogs, setEnableHighlightHelpers, setUseMemory, addMemory, setCustomCSS
+  setGroupsEnabled, resetDefaultTablesDB, setModelsMode, setViewAllCatalogs, setEnableHighlightHelpers, setUseMemory, addMemory, setCustomCSS, setEnableStyleCustomization
 } = settingsSlice.actions
 
 export default settingsSlice.reducer

web/src/state/store.ts

@@ -415,12 +415,17 @@ const migrations = {
     let newState = {...state}
     newState.settings.customCSS = ''
     return newState
+  },
+  38: (state: RootState) => {
+    let newState = {...state}
+    newState.settings.enableStyleCustomization = false
+    return newState
   }
 }
 
 const persistConfig = {
   key: 'root',
-  version: 37,
+  version: 38,
   storage,
   blacklist: ['billing', 'cache'],
   // @ts-ignore