vzcode 1.16.0 → 1.18.0

package/src/client/CodeEditor/getOrCreateEditor.ts

@@ -10,11 +10,13 @@ import { markdown } from '@codemirror/lang-markdown';
 import { html } from '@codemirror/lang-html';
 import { css } from '@codemirror/lang-css';
 import { json1Sync } from 'codemirror-ot';
+
 import { autocompletion } from '@codemirror/autocomplete';
 import { indentationMarkers } from '@replit/codemirror-indentation-markers';
 // import { showMinimap } from '@replit/codemirror-minimap';
 import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 import { Diagnostic, linter } from '@codemirror/lint';
+
 import { json1Presence, textUnicode } from '../../ot';
 import {
   FileId,
@@ -45,11 +47,14 @@ import { InteractRule } from '@replit/codemirror-interact';
 import rainbowBrackets from '../CodeEditor/rainbowBrackets';
 import { cssLanguage } from '@codemirror/lang-css';
 import { javascriptLanguage } from '@codemirror/lang-javascript';
+import { copilot } from './Copilot';
 
 // Feature flag to enable TypeScript completions & TypeScript Linter.
-const enableTypeScriptCompletions = true;
 const enableTypeScriptLinter = true;
 
+// Feature flag to enable AI copilot
+const enableCopilot = true;
+
 // Enables TypeScript +JSX support in CodeMirror.
 const tsx = () =>
   javascript({ jsx: true, typescript: true });
@@ -74,6 +79,7 @@ const htmlConfig = {
   ],
   nestedAttributes: [],
 };
+
 // Language extensions for CodeMirror.
 // Keys are file extensions.
 // Values are CodeMirror extensions.
@@ -101,6 +107,13 @@ const getAtPath = (obj, path) => {
   return current;
 };
 
+// Extend the EditorCacheValue type to include the compartments and the updateRainbowBrackets method
+interface ExtendedEditorCacheValue extends EditorCacheValue {
+  themeCompartment: Compartment;
+  rainbowBracketsCompartment: Compartment;
+  updateRainbowBrackets: (enabled: boolean) => void;
+}
+
 // Gets or creates an `editorCache` entry for the given file id.
 // Looks in `editorCache` first, and if not found, creates a new editor.
 export const getOrCreateEditor = ({
@@ -120,6 +133,8 @@ export const getOrCreateEditor = ({
   allowGlobals,
   enableAutoFollowRef,
   openTab,
+  aiCopilotEndpoint,
+  rainbowBracketsEnabled = true, // New parameter to enable or disable Rainbow Brackets
 }: {
   // TODO pass this in from the outside
   paneId?: PaneId;
@@ -156,13 +171,15 @@ export const getOrCreateEditor = ({
   // enable auto-following the cursors of remote users.
   enableAutoFollowRef: React.MutableRefObject<boolean>;
   openTab: (tabState: TabState) => void;
-}): EditorCacheValue => {
+  aiCopilotEndpoint: string;
+  rainbowBracketsEnabled?: boolean; // New parameter type
+}): ExtendedEditorCacheValue => {
   // Cache hit
 
   const cacheKey = editorCacheKey(fileId, paneId);
 
   if (editorCache.has(cacheKey)) {
-    return editorCache.get(cacheKey);
+    return editorCache.get(cacheKey) as ExtendedEditorCacheValue;
   }
 
   // Cache miss
@@ -177,6 +194,9 @@ export const getOrCreateEditor = ({
   // Create a compartment for the theme so that it can be changed dynamically.
   // Inspired by: https://github.com/craftzdog/cm6-themes/blob/main/example/index.ts
   let themeCompartment = new Compartment();
+  
+  // Create a compartment for rainbow brackets so that it can be enabled/disabled dynamically.
+  let rainbowBracketsCompartment = new Compartment();
 
   // The CodeMirror extensions to use.
   // const extensions = [autocompletion(), html(htmlConfig)]
@@ -237,6 +257,13 @@ export const getOrCreateEditor = ({
     themeCompartment.of(themeOptionsByLabel[theme].value),
   );
 
+  // Adds compartment for rainbow brackets with initial toggle state.
+  extensions.push(
+    rainbowBracketsCompartment.of(
+      rainbowBracketsEnabled ? rainbowBrackets() : []
+    ),
+  );
+
   // TODO handle dynamic changing of the file extension.
   // TODO handle dynamic file extensions by making
   // the CodeMirror language extension dynamic
@@ -380,8 +407,11 @@ export const getOrCreateEditor = ({
       }),
     ),
   );
-  // adds rainbow brackets
-  extensions.push(rainbowBrackets());
+
+  // adds copilot
+  if (enableCopilot) {
+    extensions.push(copilot({ aiCopilotEndpoint }));
+  }
 
   const editor = new EditorView({
     state: EditorState.create({
@@ -390,10 +420,17 @@ export const getOrCreateEditor = ({
     }),
   });
 
-  const editorCacheValue = { editor, themeCompartment };
+  const editorCacheValue: ExtendedEditorCacheValue = { editor, themeCompartment, rainbowBracketsCompartment, updateRainbowBrackets: (enabled) => {
+    editor.dispatch({
+      effects: rainbowBracketsCompartment.reconfigure(enabled ? rainbowBrackets() : []),
+    });
+  }};
 
   // Populate the cache.
   editorCache.set(cacheKey, editorCacheValue);
 
+  // Initialize rainbow brackets based on the toggle state
+  editorCacheValue.updateRainbowBrackets(rainbowBracketsEnabled);
+
   return editorCacheValue;
 };

package/src/client/CodeEditor/index.tsx

@@ -19,9 +19,11 @@ const filesPath = ['files'];
 export const CodeEditor = ({
   customInteractRules,
   allowGlobals,
+  aiCopilotEndpoint,
 }: {
   customInteractRules?: Array<InteractRule>;
   allowGlobals: boolean;
+  aiCopilotEndpoint: string;
 }) => {
   const {
     activePane,
@@ -99,7 +101,7 @@ export const CodeEditor = ({
         allowGlobals,
         enableAutoFollowRef,
         openTab,
-        // splitPaneView,
+        aiCopilotEndpoint,
       }),
     [
       activePane,
@@ -112,6 +114,7 @@ export const CodeEditor = ({
       editorCache,
       usernameRef,
       typeScriptWorker,
+      aiCopilotEndpoint,
     ],
   );
 

package/src/client/CodeEditor/rainbowBrackets.ts

@@ -8,6 +8,12 @@ function generateColors() {
   return ['red', 'orange', 'yellow', 'green'];
 }
 
+let isRainbowEnabled = true;
+
+export const toggleRainbowBrackets = (enabled: boolean) => {
+  isRainbowEnabled = enabled;
+};
+
 const rainbowBracketsPlugin = ViewPlugin.fromClass(
   class {
     decorations;
@@ -50,12 +56,16 @@ const rainbowBracketsPlugin = ViewPlugin.fromClass(
           ) {
             const color =
               colors[stack.length % colors.length];
+            const bracketClass = isRainbowEnabled
+              ? `rainbow-bracket-${color}`
+              : `default-bracket`;
+
             decorations.push(
               Decoration.mark({
-                class: `rainbow-bracket-${color}`,
+                class: bracketClass,
               }).range(open.from, open.from + 1),
               Decoration.mark({
-                class: `rainbow-bracket-${color}`,
+                class: bracketClass,
               }).range(pos, pos + 1),
             );
           }
@@ -105,6 +115,8 @@ export default function rainbowBrackets() {
       },
       '.rainbow-bracket-green': { color: '#B2FFB2' },
       '.rainbow-bracket-green > span': { color: '#B2FFB2' },
+      '.default-bracket': { color: 'currentColor' },
+      '.default-bracket > span': { color: 'currentColor' },
     }),
   ];
 }

package/src/client/CodeEditor/style.scss

@@ -48,4 +48,109 @@
   .cm-line {
     font-family: var(--vzcode-font-family);
   }
-}
+
+  .tooltip_hover_circle {
+    color: white;
+    text-align: center;
+    position: fixed;
+    background-color: black;
+    padding: 5px;
+    border-radius: 5px;
+    white-space: nowrap;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 1000;
+    pointer-events: none;
+  }
+
+  .tooltip_hover_circle strong {
+    font-size: 14px;
+  }
+
+  .tooltip_hover_circle div {
+    font-size: 12px;
+  }
+  
+  .cm-panel.cm-search {
+    padding: 5px;
+    position: relative;
+    background-color: var(--vh-color-neutral-01);
+    border-radius: 6px;
+    color: var(--vh-color-neutral-04);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  }
+  
+  .cm-panels {
+    background-color: #333338;
+    color: var(--vh-color-neutral-04);
+    border: 2px solid var(--vh-color-neutral-02);
+    border-radius: 6px;
+  }
+  
+  .cm-textfield {
+    background-color: var(--vh-color-neutral-01);
+    color: #efe7dc;
+    border: 1px solid var(--vh-color-neutral-04);
+    padding: 8px;
+    border-radius: 6px;
+    font-size: 14px;
+  }
+  
+  .cm-button {
+    background-color: var(--vh-color-neutral-01);
+        border: 1px solid #193350;
+    color: var(--vh-color-neutral-04);
+    border: 1px solid var(--vh-color-neutral-04);
+    border-radius: 5px;
+    padding: 6px 12px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+  
+  .cm-button:hover {
+    background-color: #50c878;
+    color: #ffffff;
+    transform: scale(1.1);
+  }
+  
+  .cm-button:active {
+    background-color: #202e46;
+    transform: scale(0.95);
+  }
+  
+  .cm-searchMatch {
+    background-color: rgba(255, 255, 0, 0.5);
+    border-radius: 2px;
+  }
+  
+  .cm-searchMatch-selected {
+    background-color: rgba(255, 140, 0, 0.5);
+    border: 2px solid #ff8800;
+    border-radius: 2px;
+  }
+  .cm-panel.cm-search [name="close"] {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    background-color: var(--vh-color-neutral-01); 
+    color: var(--vh-color-neutral-04);
+    border: none; 
+    font: inherit; 
+    padding: 4px 8px; 
+    margin: 4px;
+    border-radius: 4px; 
+    cursor: pointer; 
+    transition: all 0.3s ease-in-out; 
+  }
+  
+  .cm-panel.cm-search [name="close"]:hover {
+    background-color: var(--vh-color-caution-01); 
+    color: #ffffff; 
+  }
+  
+  .cm-panel.cm-search [name="close"]:active {
+    background-color: var(--vh-color-caution-02); 
+    transform: scale(0.95); 
+  }
+}

package/src/client/Icons/MicSVG.tsx

@@ -0,0 +1,25 @@
+export const MicSVG = () => (
+  <svg
+    fill="#000000"
+    height="24"
+    width="24"
+    stroke="currentColor"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    enable-background="new 0 0 512 512"
+  >
+    <g>
+      <g>
+        <path
+          fill="currentColor"
+          d="m439.5,236c0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,70-64,126.9-142.7,126.9-78.7,0-142.7-56.9-142.7-126.9 0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,86.2 71.5,157.4 163.1,166.7v57.5h-23.6c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h88c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-23.6v-57.5c91.6-9.3 163.1-80.5 163.1-166.7z"
+        />
+        <path
+          fill="currentColor"
+          d="m256,323.5c51,0 92.3-41.3 92.3-92.3v-127.9c0-51-41.3-92.3-92.3-92.3s-92.3,41.3-92.3,92.3v127.9c0,51 41.3,92.3 92.3,92.3zm-52.3-220.2c0-28.8 23.5-52.3 52.3-52.3s52.3,23.5 52.3,52.3v127.9c0,28.8-23.5,52.3-52.3,52.3s-52.3-23.5-52.3-52.3v-127.9z"
+        />
+      </g>
+    </g>
+  </svg>
+);

package/src/client/RunCodeWidget/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { PlaySVG } from '../Icons';
 import { SplitEditorSVG } from '../Icons/SplitEditorSVG';
 import { VZCodeContext } from '../VZCodeContext';
@@ -17,7 +17,7 @@ export const RunCodeWidget = ({
     </>
   ),
 }: {
-  runCodeWidgetTooltipText?: JSX.Element;
+    runCodeWidgetTooltipText?: JSX.Element;
 }) => {
   const { runCodeRef, runPrettierRef, splitCurrentPane } =
     useContext(VZCodeContext);
@@ -40,7 +40,7 @@ export const RunCodeWidget = ({
 
     // Optional: reset the icon state after animation completes (e.g., 1 second)
     setTimeout(() => setIsRunning(false), 1000);
-  }, []);
+  }, [runCodeRef, runPrettierRef]);
 
   const handleSplitEditor = useCallback(() => {
     console.log('Split Editor');
@@ -48,6 +48,23 @@ export const RunCodeWidget = ({
     splitCurrentPane();
   }, [splitCurrentPane]);
 
+  // Add the keyboard event listener for Ctrl+S and Shift+Enter
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey && event.key === 's') || (event.shiftKey && event.key === 'Enter')) {
+        event.preventDefault();
+        handleClick();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    // Cleanup the event listener on component unmount
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleClick]);
+
   return (
     <div>
       <div className="vz-code-split-view-widget">

package/src/client/VZCodeContext.tsx

@@ -2,42 +2,42 @@ 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,
-  LeafPane,
 } 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
@@ -156,6 +156,7 @@ export type VZCodeContextValue = {
   codeEditorRef: React.RefObject<HTMLDivElement>;
 
   connected: boolean;
+  pending: boolean;
 
   hoveredItemId: ItemId | null;
   setHoveredItemId: (itemId: ItemId | null) => void;
@@ -169,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 = ({
@@ -183,6 +193,13 @@ export const VZCodeProvider = ({
   children,
   codeError = null,
   connected,
+  pending,
+  liveKitToken,
+  setLiveKitToken,
+  liveKitRoomName,
+  setLiveKitRoom,
+  liveKitConnection,
+  setLiveKitConnection,
 }: {
   content: VZCodeContent;
   shareDBDoc: ShareDBDoc<VZCodeContent>;
@@ -195,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 {
@@ -393,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,
@@ -471,6 +500,7 @@ export const VZCodeProvider = ({
     codeEditorRef,
 
     connected,
+    pending,
 
     hoveredItemId,
     setHoveredItemId,
@@ -480,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,10 @@
-import { VZSettings } from './VZSettings';
+import { enableLiveKit } from './featureFlags';
 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 +22,7 @@ export const VZLeft = ({ enableUsernameField = true }) => {
       />
       <CreateFileModal />
       <CreateDirModal />
+      {enableLiveKit && <VoiceChatModal />}
     </div>
   );
 };

package/src/client/VZMiddle.tsx

@@ -23,6 +23,7 @@ const PaneView = ({
   aiAssistOptions,
   aiAssistTooltipText,
   aiAssistClickOverride,
+  aiCopilotEndpoint,
 }) => {
   // This prevents the CodeEditor from rendering
   // during SSR.
@@ -49,6 +50,7 @@ const PaneView = ({
         <CodeEditor
           customInteractRules={customInteractRules}
           allowGlobals={allowGlobals}
+          aiCopilotEndpoint={aiCopilotEndpoint}
         />
       )}
       {isClient &&
@@ -82,6 +84,7 @@ export const VZMiddle = ({
   aiAssistOptions,
   aiAssistTooltipText,
   aiAssistClickOverride,
+  aiCopilotEndpoint,
   customInteractRules,
   allowGlobals = false,
 }: {
@@ -90,6 +93,7 @@ export const VZMiddle = ({
   aiAssistOptions?: { [key: string]: string };
   aiAssistTooltipText?: string;
   aiAssistClickOverride?: () => void;
+  aiCopilotEndpoint?: string;
   customInteractRules?: Array<InteractRule>;
   allowGlobals?: boolean;
 }) => {
@@ -128,6 +132,7 @@ export const VZMiddle = ({
         aiAssistOptions={aiAssistOptions}
         aiAssistTooltipText={aiAssistTooltipText}
         aiAssistClickOverride={aiAssistClickOverride}
+        aiCopilotEndpoint={aiCopilotEndpoint}
       />
       <CodeErrorOverlay
         errorMessage={errorMessage}