vzcode 1.15.0 → 1.17.0

package/src/client/VZCodeContext.tsx

@@ -2,41 +2,43 @@ import {
   createContext,
   useCallback,
   useReducer,
-  useState,
   useRef,
+  useState,
 } from 'react';
 import {
   Files,
   ItemId,
+  LeafPane,
+  Pane,
+  PaneId,
+  PresenceIndicator,
+  SearchFileVisibility,
+  SearchResults,
   ShareDBDoc,
   SubmitOperation,
+  TabState,
   Username,
   VZCodeContent,
-  SearchResults,
-  SearchFileVisibility,
-  TabState,
-  PresenceIndicator,
-  Pane,
-  PaneId,
 } from '../types';
-import { usePrettier } from './usePrettier';
-import { useTypeScript } from './useTypeScript';
-import { createInitialState, vzReducer } from './vzReducer';
 import {
   ThemeLabel,
   defaultTheme,
   useDynamicTheme,
 } from './themes';
 import { useActions } from './useActions';
-import { useOpenDirectories } from './useOpenDirectories';
-import { useFileCRUD } from './useFileCRUD';
 import {
   EditorCache,
   useEditorCache,
 } from './useEditorCache';
-import { useURLSync } from './useURLSync';
+import { useFileCRUD } from './useFileCRUD';
 import { useKeyboardShortcuts } from './useKeyboardShortcuts';
+import { useOpenDirectories } from './useOpenDirectories';
+import { usePrettier } from './usePrettier';
 import { useRunCode } from './useRunCode';
+import { useTypeScript } from './useTypeScript';
+import { useURLSync } from './useURLSync';
+import { createInitialState, vzReducer } from './vzReducer';
+import { findPane } from './vzReducer/findPane';
 
 // This context centralizes all the "smart" logic
 // to do with the application state. This includes
@@ -72,14 +74,14 @@ export type VZCodeContextValue = {
   ) => void;
   deleteDirectory: (directoryId: string) => void;
 
-  activeFileId: string | null;
   setActiveFileId: (fileId: string | null) => void;
   setActiveFileLeft: () => void;
   setActiveFileRight: () => void;
 
   activePaneId: PaneId;
+  pane: Pane;
+  activePane: LeafPane;
 
-  tabList: Array<TabState>;
   openTab: (tabState: TabState) => void;
   closeTabs: (fileIds: string[]) => void;
 
@@ -154,6 +156,7 @@ export type VZCodeContextValue = {
   codeEditorRef: React.RefObject<HTMLDivElement>;
 
   connected: boolean;
+  pending: boolean;
 
   hoveredItemId: ItemId | null;
   setHoveredItemId: (itemId: ItemId | null) => void;
@@ -167,6 +170,15 @@ export type VZCodeContextValue = {
 
   sidebarPresenceIndicators: Array<PresenceIndicator>;
   splitCurrentPane: () => void;
+
+  liveKitToken: string;
+  setLiveKitToken: (state: string) => void;
+  liveKitRoomName: string;
+  setLiveKitRoom: (state: string) => void;
+  liveKitConnection: boolean;
+  setLiveKitConnection: (state: boolean) => void;
+  voiceChatModalOpen: boolean;
+  setVoiceChatModalOpen: (state: boolean) => void;
 };
 
 export const VZCodeProvider = ({
@@ -181,6 +193,13 @@ export const VZCodeProvider = ({
   children,
   codeError = null,
   connected,
+  pending,
+  liveKitToken,
+  setLiveKitToken,
+  liveKitRoomName,
+  setLiveKitRoom,
+  liveKitConnection,
+  setLiveKitConnection,
 }: {
   content: VZCodeContent;
   shareDBDoc: ShareDBDoc<VZCodeContent>;
@@ -193,6 +212,13 @@ export const VZCodeProvider = ({
   children: React.ReactNode;
   codeError?: string | null;
   connected: boolean;
+  pending: boolean;
+  liveKitToken: string | undefined;
+  setLiveKitToken: (state: string) => void;
+  liveKitRoomName: string | undefined;
+  setLiveKitRoom: (state: string) => void;
+  liveKitConnection: boolean;
+  setLiveKitConnection: (state: boolean) => void;
 }) => {
   // Auto-run Pretter after local changes.
   const {
@@ -260,12 +286,11 @@ export const VZCodeProvider = ({
     sidebarPresenceIndicators,
   } = state;
 
-  // TODO support splitPane type
-  if (pane.type !== 'leafPane') {
+  const activePane = findPane(pane, activePaneId);
+  if (activePane.type !== 'leafPane') {
+    // Should never happen
     throw new Error('Expected leafPane');
   }
-  const tabList = pane.tabList;
-  const activeFileId = pane.activeFileId;
 
   // Functions for dispatching actions to the reducer.
   const {
@@ -298,8 +323,8 @@ export const VZCodeProvider = ({
     content,
     openTab,
     setActiveFileId,
-    tabList,
-    activeFileId,
+    tabList: activePane.tabList,
+    activeFileId: activePane.activeFileId,
   });
 
   // The set of open directories.
@@ -374,7 +399,8 @@ export const VZCodeProvider = ({
 
   useKeyboardShortcuts({
     closeTabs,
-    activeFileId,
+    // TODO verify that this makes sense
+    activeFileId: activePane.activeFileId,
     activePaneId,
     handleOpenCreateFileModal,
     setActiveFileLeft,
@@ -391,6 +417,11 @@ export const VZCodeProvider = ({
   const [hoveredItemId, setHoveredItemId] =
     useState<ItemId | null>(null);
 
+  // Livekit Voice Chat Modal
+
+  const [voiceChatModalOpen, setVoiceChatModalOpen] =
+    useState(false);
+
   // The value provided by this context.
   const value: VZCodeContextValue = {
     content,
@@ -407,14 +438,16 @@ export const VZCodeProvider = ({
     renameDirectory,
     deleteDirectory,
 
-    activeFileId,
     setActiveFileId,
     setActiveFileLeft,
     setActiveFileRight,
 
     activePaneId,
+    // Root pane
+    pane,
+    // Active leaf pane
+    activePane,
 
-    tabList,
     openTab,
     closeTabs,
 
@@ -467,6 +500,7 @@ export const VZCodeProvider = ({
     codeEditorRef,
 
     connected,
+    pending,
 
     hoveredItemId,
     setHoveredItemId,
@@ -476,6 +510,14 @@ export const VZCodeProvider = ({
     updatePresenceIndicator,
     sidebarPresenceIndicators,
     splitCurrentPane,
+    liveKitRoomName,
+    setLiveKitRoom,
+    liveKitToken,
+    setLiveKitToken,
+    liveKitConnection,
+    setLiveKitConnection,
+    voiceChatModalOpen,
+    setVoiceChatModalOpen,
   };
 
   return (

package/src/client/VZKeyboardShortcutsDoc.tsx

@@ -46,41 +46,41 @@ export const VZKeyboardShortcutsDoc = ({
           {/* <Form.Label>WINDOWS</Form.Label> */}
           <ul>
             <li>
-              <strong>Ctrl + s</strong> or{' '}
-              <strong>Shift + Enter</strong> <br />
+              <strong><kbd>Ctrl</kbd> + <kbd>S</kbd></strong> or{' '}
+              <strong><kbd>Shift↑</kbd> + <kbd>Enter←</kbd></strong> <br />
               <span>Run and format code</span>
             </li>
             <li>
-              <strong>Alt + drag on a number</strong>
+              <strong><kbd>Alt</kbd> + Drag on a number</strong>
               <br />
               <span>
                 Modify the number by dragging left or right
               </span>
             </li>
             <li>
-              <strong>Alt + click on a hex color</strong>
+              <strong><kbd>Alt</kbd> + Click on a hex color</strong>
               <br />
               <span>
                 Open a color picker to modify the color
               </span>
             </li>
             <li>
-              <strong>Alt + w</strong> <br />
+              <strong><kbd>Alt</kbd> + <kbd>W</kbd></strong> <br />
               <span>Close the current tab</span>
             </li>
             <li>
-              <strong>Alt + n or Ctrl + Shift + n</strong>{' '}
+              <strong><kbd>Alt</kbd> + <kbd>N</kbd></strong> or{' '} <strong><kbd>Ctrl</kbd> + <kbd>Shift↑</kbd> + <kbd>N</kbd></strong>{' '}
               <br />
               <span>Open the create file modal</span>
             </li>
             <li>
-              <strong>Alt + Page Up</strong> <br />
+              <strong><kbd>Alt</kbd> + <kbd>PgUp↑</kbd></strong> <br />
               <span>
                 Change the active tab to the previous one
               </span>
             </li>
             <li>
-              <strong>Alt + Page Down</strong> <br />
+              <strong><kbd>Alt</kbd> + <kbd>PgDn↓</kbd></strong> <br />
               <span>
                 Change the active tab to the next one
               </span>

package/src/client/VZLeft.tsx

@@ -1,8 +1,9 @@
-import { VZSettings } from './VZSettings';
 import { VZKeyboardShortcutsDoc } from './VZKeyboardShortcutsDoc';
+import { VZSettings } from './VZSettings';
 import { VZSidebar } from './VZSidebar';
-import { CreateFileModal } from './VZSidebar/CreateFileModal';
 import { CreateDirModal } from './VZSidebar/CreateDirModal';
+import { CreateFileModal } from './VZSidebar/CreateFileModal';
+import { VoiceChatModal } from './VZSidebar/VoiceChatModal';
 
 // The middle portion of the VZCode environment, containing:
 // * The sidebar
@@ -20,6 +21,7 @@ export const VZLeft = ({ enableUsernameField = true }) => {
       />
       <CreateFileModal />
       <CreateDirModal />
+      <VoiceChatModal />
     </div>
   );
 };

package/src/client/VZMiddle.tsx

@@ -9,6 +9,69 @@ import { VZCodeContext } from './VZCodeContext';
 import { RunCodeWidget } from './RunCodeWidget';
 import { InteractRule } from '@replit/codemirror-interact';
 
+// TODO modify this to handle the SplitPane type
+// Recursive structure?
+// SplitPaneView
+// LeafPaneView
+const PaneView = ({
+  pane,
+  content,
+  customInteractRules,
+  allowGlobals,
+  enableAIAssist,
+  aiAssistEndpoint,
+  aiAssistOptions,
+  aiAssistTooltipText,
+  aiAssistClickOverride,
+  aiCopilotEndpoint,
+}) => {
+  // This prevents the CodeEditor from rendering
+  // during SSR.
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // TODO something like
+  // return pane.type === 'leafPane' ? (
+  //   <LeafPaneView />
+  // ) : (
+  //   <SplitPaneView />
+  // );
+
+  // This should go in LeafPaneView
+  return (
+    <>
+      <TabList
+        activeFileId={pane.activeFileId}
+        tabList={pane.tabList}
+      />
+      {isClient && content && pane.activeFileId && (
+        <CodeEditor
+          customInteractRules={customInteractRules}
+          allowGlobals={allowGlobals}
+          aiCopilotEndpoint={aiCopilotEndpoint}
+        />
+      )}
+      {isClient &&
+      enableAIAssist &&
+      content &&
+      pane.activeFileId ? (
+        <AIAssistWidget
+          aiAssistEndpoint={aiAssistEndpoint}
+          aiAssistOptions={aiAssistOptions}
+          aiAssistTooltipText={aiAssistTooltipText}
+          aiAssistClickOverride={aiAssistClickOverride}
+          paneId={pane.id}
+          activeFileId={pane.activeFileId}
+          tabList={pane.tabList}
+        />
+      ) : null}
+      <RunCodeWidget />
+    </>
+  );
+};
+
 // The middle portion of the VZCode environment, containing:
 // * The list of tabs at the top
 // * The code editor itself
@@ -21,6 +84,7 @@ export const VZMiddle = ({
   aiAssistOptions,
   aiAssistTooltipText,
   aiAssistClickOverride,
+  aiCopilotEndpoint,
   customInteractRules,
   allowGlobals = false,
 }: {
@@ -29,6 +93,7 @@ export const VZMiddle = ({
   aiAssistOptions?: { [key: string]: string };
   aiAssistTooltipText?: string;
   aiAssistClickOverride?: () => void;
+  aiCopilotEndpoint?: string;
   customInteractRules?: Array<InteractRule>;
   allowGlobals?: boolean;
 }) => {
@@ -40,41 +105,35 @@ export const VZMiddle = ({
     content,
     localPresence,
     docPresence,
-    activeFileId,
+    pane,
+    activePane,
     errorMessage,
   } = useContext(VZCodeContext);
 
-  // This prevents the CodeEditor from rendering
-  // during SSR.
-  const [isClient, setIsClient] = useState(false);
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
+  if (activePane.type !== 'leafPane') {
+    throw new Error('Expected leafPane');
+  }
+  // True if the editor panes should be shown.
+  const shouldShowEditorPanes: boolean =
+    activePane.activeFileId !== null;
 
-  return activeFileId !== null ? (
+  return shouldShowEditorPanes ? (
     <div
       className="middle"
       style={{ width: codeEditorWidth + 'px' }}
     >
-      <TabList />
-      {isClient && content && activeFileId && (
-        <CodeEditor
-          customInteractRules={customInteractRules}
-          allowGlobals={allowGlobals}
-        />
-      )}
-      {isClient &&
-      enableAIAssist &&
-      content &&
-      activeFileId ? (
-        <AIAssistWidget
-          aiAssistEndpoint={aiAssistEndpoint}
-          aiAssistOptions={aiAssistOptions}
-          aiAssistTooltipText={aiAssistTooltipText}
-          aiAssistClickOverride={aiAssistClickOverride}
-        />
-      ) : null}
-      <RunCodeWidget />
+      <PaneView
+        pane={pane}
+        content={content}
+        customInteractRules={customInteractRules}
+        allowGlobals={allowGlobals}
+        enableAIAssist={enableAIAssist}
+        aiAssistEndpoint={aiAssistEndpoint}
+        aiAssistOptions={aiAssistOptions}
+        aiAssistTooltipText={aiAssistTooltipText}
+        aiAssistClickOverride={aiAssistClickOverride}
+        aiCopilotEndpoint={aiCopilotEndpoint}
+      />
       <CodeErrorOverlay
         errorMessage={errorMessage}
         content={content}

package/src/client/VZResizer/index.tsx

@@ -6,7 +6,6 @@ import {
   useCallback,
   useRef,
 } from 'react';
-
 import {
   Side,
   SplitPaneResizeContext,
@@ -44,9 +43,10 @@ export const VZResizer = ({
 
   // If there is no active file, don't render the resizer
   // for the right side.
-  const { activeFileId } = useContext(VZCodeContext);
+  const { activePane } = useContext(VZCodeContext);
+
   const shouldRenderResizer =
-    side === 'left' || activeFileId;
+    side === 'left' || activePane.activeFileId;
 
   const previousClientX = useRef<number>(0);
 

package/src/client/VZSettings.tsx

@@ -9,8 +9,9 @@ import { Button, Modal, Form } from './bootstrap';
 import { ThemeLabel, themes } from './themes';
 import { VZCodeContext } from './VZCodeContext';
 import { fonts } from './Fonts/fonts';
+import { toggleRainbowBrackets } from './CodeEditor/rainbowBrackets';
 
-const fontSizes = ['16px', '18px', '20px', '24px'];
+const fontSizes = ['10px','12px','14px','16px', '18px', '20px', '24px'];
 
 export const VZSettings = ({
   enableUsernameField = true,
@@ -29,11 +30,21 @@ export const VZSettings = ({
 
   const handleThemeChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) => {
-      setTheme(event.target.value as ThemeLabel);
+      const selectedTheme = event.target.value as ThemeLabel;
+      setTheme(selectedTheme);
+      localStorage.setItem('vzcodeSelectedTheme', selectedTheme);
     },
     [],
   );
-
+  
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('vzcodeSelectedTheme') as ThemeLabel | null;
+    if (savedTheme) {
+      setTheme(savedTheme);
+    } else {
+      setTheme('vizhub');
+    }
+  }, [setTheme]);
   // Initialize font and size from localStorage or defaults
   // const [selectedFont, setSelectedFont] = useState(
   //   localStorage.getItem('vzcodeSelectedFont') ||
@@ -48,6 +59,10 @@ export const VZSettings = ({
   const [selectedFontSize, setSelectedFontSize] =
     useState('16px');
 
+  // Initialize rainbowBrackets setting from localStorage or default to 'on'
+  const [rainbowBrackets, setRainbowBrackets] =
+    useState('on');
+
   useEffect(() => {
     // If we're in the browser,
     if (typeof window !== 'undefined') {
@@ -60,6 +75,12 @@ export const VZSettings = ({
         'vzcodeSelectedFontSize',
       );
 
+      const rainbowBracketsFromLocalStorage:
+        | string
+        | null = window.localStorage.getItem(
+        'vzcodeRainbowBrackets',
+      );
+
       if (selectedFontFromLocalStorage !== null) {
         setSelectedFont(selectedFontFromLocalStorage);
       }
@@ -68,6 +89,9 @@ export const VZSettings = ({
           selectedFontSizeFromLocalStorage,
         );
       }
+      if (rainbowBracketsFromLocalStorage !== null) {
+        setRainbowBrackets(rainbowBracketsFromLocalStorage);
+      }
     } else {
       // If we're not in the browser, use the default initial width.
     }
@@ -96,6 +120,17 @@ export const VZSettings = ({
     [],
   );
 
+  // Called when the user changes the Rainbow Brackets setting
+  const handleRainbowBracketsChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const newSetting = event.target.value;
+      localStorage.setItem('vzcodeRainbowBrackets', newSetting);
+      setRainbowBrackets(newSetting);
+      toggleRainbowBrackets(newSetting === 'on');
+    },
+    [],
+  );
+
   useEffect(() => {
     document.body.style.setProperty(
       '--vzcode-font-family',
@@ -220,6 +255,22 @@ export const VZSettings = ({
             Select a font size for the editor
           </Form.Text>
         </Form.Group>
+        
+        <Form.Group className="mb-3" controlId="formFork">
+          <Form.Label>Rainbow Brackets</Form.Label>
+          <select
+            className="form-select"
+            onChange={handleRainbowBracketsChange}
+            value={rainbowBrackets}
+          >
+            <option value="on">On</option>
+            <option value="off">Off</option>
+          </select>
+          <Form.Text className="text-muted">
+            Toggle Rainbow Brackets
+          </Form.Text>
+        </Form.Group>
+
       </Modal.Body>
       <Modal.Footer>
         <Button variant="primary" onClick={closeSettings}>

package/src/client/VZSidebar/FileListing.tsx

@@ -3,6 +3,7 @@ import { Item } from './Item';
 import { FileId, PresenceIndicator } from '../../types';
 import { VZCodeContext } from '../VZCodeContext';
 import { FileTypeIcon } from './FileTypeIcon';
+import { assignUserColor } from '../presenceColor';
 
 const PresenceIndicators = ({
   presence,
@@ -11,12 +12,25 @@ const PresenceIndicators = ({
 }) => {
   return (
     <div className="presence-indicators">
-      {presence.map((indicator, index) => (
-        <div key={index} className="presence-indicator">
-          {indicator.username[0]}{' '}
-          {/* Display the first letter of the username */}
-        </div>
-      ))}
+      {presence.map((indicator, index) => {
+        // Get the raw RGB values from assignUserColor
+        const color = assignUserColor(indicator.username);
+
+        // Format it as `rgb()` directly in the component
+        const formattedColor = `rgb(${color})`;
+
+        //console.log(`Username: ${indicator.username}, Assigned Color: ${formattedColor}`);
+
+        return (
+          <div
+            key={index}
+            className="presence-indicator"
+            style={{ backgroundColor: formattedColor }}
+          >
+            {indicator.username[0]}
+          </div>
+        );
+      })}
     </div>
   );
 };

package/src/client/VZSidebar/Listing.tsx

@@ -19,7 +19,7 @@ export const Listing = ({
   handleFileClick: (fileId: FileId) => void;
   handleFileDoubleClick: (fileId: FileId) => void;
 }) => {
-  const { activeFileId, sidebarPresenceIndicators } =
+  const { activePane, sidebarPresenceIndicators } =
     useContext(VZCodeContext);
   const { name, file, fileId } = entity as FileTreeFile;
   const { path, children } = entity as FileTree;
@@ -35,7 +35,7 @@ export const Listing = ({
       name={name}
       handleFileClick={handleFileClick}
       handleFileDoubleClick={handleFileDoubleClick}
-      isActive={fileId === activeFileId}
+      isActive={fileId === activePane.activeFileId}
       presence={presence}
     />
   ) : (