EnhancedRenderCodeMenu: option to disable livefile

src/common/state/store-ux-labs.ts

@@ -23,6 +23,9 @@ interface UXLabsStore {
   labsEnhanceCodeBlocks: boolean;
   setLabsEnhanceCodeBlocks: (labsEnhanceCodeBlocks: boolean) => void;
 
+  labsEnhanceCodeLiveFile: boolean;
+  setLabsEnhanceCodeLiveFile: (labsEnhanceCodeLiveFile: boolean) => void;
+
   labsHighPerformance: boolean;
   setLabsHighPerformance: (labsHighPerformance: boolean) => void;
 
@@ -58,6 +61,9 @@ export const useUXLabsStore = create<UXLabsStore>()(
       labsEnhanceCodeBlocks: true,
       setLabsEnhanceCodeBlocks: (labsEnhanceCodeBlocks: boolean) => set({ labsEnhanceCodeBlocks }),
 
+      labsEnhanceCodeLiveFile: true,
+      setLabsEnhanceCodeLiveFile: (labsEnhanceCodeLiveFile: boolean) => set({ labsEnhanceCodeLiveFile }),
+
       labsHighPerformance: false,
       setLabsHighPerformance: (labsHighPerformance: boolean) => set({ labsHighPerformance }),
 

src/modules/blocks/code/EnhancedRenderCodeMenu.tsx

@@ -8,8 +8,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { CloseableMenu } from '~/common/components/CloseableMenu';
 import { ConfirmationModal } from '~/common/components/ConfirmationModal';
+import { useLabsDevMode, useUXLabsStore } from '~/common/state/store-ux-labs';
 import { useOverlayComponents } from '~/common/layout/overlays/useOverlayComponents';
-import { useUXLabsStore } from '~/common/state/store-ux-labs';
 
 import { getCodeCollapseManager } from './codeCollapseManager';
 
@@ -26,9 +26,12 @@ export function EnhancedRenderCodeMenu(props: {
 
   // state
   const { showPromisedOverlay } = useOverlayComponents();
-  const { labsEnhanceCodeBlocks, setLabsEnhanceCodeBlocks } = useUXLabsStore(useShallow(state => ({
+  const labsDevMode = useLabsDevMode();
+  const { labsEnhanceCodeBlocks, labsEnhanceCodeLiveFile, setLabsEnhanceCodeBlocks, setLabsEnhanceCodeLiveFile } = useUXLabsStore(useShallow(state => ({
     labsEnhanceCodeBlocks: state.labsEnhanceCodeBlocks,
+    labsEnhanceCodeLiveFile: state.labsEnhanceCodeLiveFile,
     setLabsEnhanceCodeBlocks: state.setLabsEnhanceCodeBlocks,
+    setLabsEnhanceCodeLiveFile: state.setLabsEnhanceCodeLiveFile,
   })));
 
 
@@ -59,11 +62,15 @@ export function EnhancedRenderCodeMenu(props: {
     ).then(() => setLabsEnhanceCodeBlocks(false)).catch(() => null /* ignore closure */);
   }, [labsEnhanceCodeBlocks, setLabsEnhanceCodeBlocks, showPromisedOverlay]);
 
+  const toggleEnhanceCodeLiveFile = React.useCallback(() => {
+    setLabsEnhanceCodeLiveFile(!labsEnhanceCodeLiveFile);
+  }, [labsEnhanceCodeLiveFile, setLabsEnhanceCodeLiveFile]);
+
 
   return (
     <CloseableMenu
-      dense
-      open anchorEl={props.anchor} onClose={props.onClose}
+      open={true} dense
+      anchorEl={props.anchor} onClose={props.onClose}
       placement='bottom-end'
       sx={{ minWidth: 250 }}
     >
@@ -81,12 +88,19 @@ export function EnhancedRenderCodeMenu(props: {
 
       <ListDivider />
 
-      {/* A mix in between UxLabsSettings (labsEnhanceCodeBlocks) and the ChatDrawer MenuItems */}
-      <MenuItem onClick={toggleEnhanceCodeBlocks}>
-        <ListItemDecorator>{labsEnhanceCodeBlocks && <CheckRoundedIcon />}</ListItemDecorator>
-        Enhanced Code Blocks
+      <MenuItem onClick={toggleEnhanceCodeLiveFile}>
+        <ListItemDecorator>{labsEnhanceCodeLiveFile && <CheckRoundedIcon />}</ListItemDecorator>
+        Enable LiveFile
       </MenuItem>
 
+      {labsDevMode && (
+        // A mix in between UxLabsSettings (labsEnhanceCodeBlocks) and the ChatDrawer MenuItems
+        <MenuItem onClick={toggleEnhanceCodeBlocks}>
+          <ListItemDecorator>{labsEnhanceCodeBlocks && <CheckRoundedIcon />}</ListItemDecorator>
+          [DEV] Enhanced Blocks
+        </MenuItem>
+      )}
+
     </CloseableMenu>
   );
 }