vzcode 1.15.0 → 1.17.0

package/src/client/CodeEditor/InteractiveWidgets/colorsInTextPlugin.ts

@@ -32,7 +32,8 @@ class ColorWidget extends WidgetType {
 
     parent.setAttribute(
       'style',
-      `width:${size}px;height:${size}px`,
+      `width:${size}px;height:${size}px;position:relative;`, 
+      // Position relative for the hovering tool tip to work      
     );
     parent.className = 'color-circle-parent';
     const svg = document.createElementNS(
@@ -72,8 +73,42 @@ class ColorWidget extends WidgetType {
     svg.appendChild(colorCircle);
 
     parent.appendChild(svg);
+
+    // Hovering tool tip shortcut for when users hover over color circle
+    const hoveringTooltip = document.createElement('div');
+
+    // Set class for tooltip to use CSS styles
+    hoveringTooltip.className = 'tooltip_hover_circle';
+
+    
+    hoveringTooltip.innerHTML = 
+      `<strong>Alt + Click on a hex color</strong><br />
+      <div>Open a color picker to modify the color</div>`;
+
+    
+    parent.appendChild(hoveringTooltip);
+
+    // Timer to prevent constant pop-ups when scrolling through code
+    let hoverTimeout: number;
+
+    // Fade in and fade out effect for when user hovers over the circle
+    // Mouse Event to set y and x of the tool tip pop up to prevent overlap onto circle
+    parent.addEventListener('mouseenter', (event: MouseEvent) => {
+      hoverTimeout = window.setTimeout(() => {
+        hoveringTooltip.style.top = `${event.clientY - 60}px`;
+        hoveringTooltip.style.left = `${event.clientX}px`; 
+        hoveringTooltip.style.opacity = '1';
+      }, 700); 
+    });
+
+    parent.addEventListener('mouseleave', () => {
+      clearTimeout(hoverTimeout);
+      hoveringTooltip.style.opacity = '0';
+    });
+
     return parent;
   }
+  
   ignoreEvent() {
     return false;
   }

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,12 +19,14 @@ const filesPath = ['files'];
 export const CodeEditor = ({
   customInteractRules,
   allowGlobals,
+  aiCopilotEndpoint,
 }: {
   customInteractRules?: Array<InteractRule>;
   allowGlobals: boolean;
+  aiCopilotEndpoint: string;
 }) => {
   const {
-    activeFileId,
+    activePane,
     shareDBDoc,
     content,
     submitOperation,
@@ -84,7 +86,7 @@ export const CodeEditor = ({
   const editorCacheValue: EditorCacheValue = useMemo(
     () =>
       getOrCreateEditor({
-        fileId: activeFileId,
+        fileId: activePane.activeFileId,
         shareDBDoc,
         content,
         filesPath,
@@ -99,10 +101,10 @@ export const CodeEditor = ({
         allowGlobals,
         enableAutoFollowRef,
         openTab,
-        // splitPaneView,
+        aiCopilotEndpoint,
       }),
     [
-      activeFileId,
+      activePane,
       shareDBDoc,
       filesPath,
       localPresence,
@@ -112,6 +114,7 @@ export const CodeEditor = ({
       editorCache,
       usernameRef,
       typeScriptWorker,
+      aiCopilotEndpoint,
     ],
   );
 

package/src/client/CodeEditor/json1PresenceDisplay.ts

@@ -5,7 +5,7 @@ import {
   Decoration,
 } from '@codemirror/view';
 import { Annotation, RangeSet } from '@codemirror/state';
-import ColorHash from 'color-hash';
+import { assignUserColor } from '../presenceColor';
 import {
   FileId,
   Presence,
@@ -114,11 +114,11 @@ export const json1PresenceDisplay = ({
               const { start, end } = presence;
               const from = +start[start.length - 1];
               const to = +end[end.length - 1];
-              const userColor = new ColorHash({
-                lightness: 0.75,
-              }).rgb(id);
+              const userColor = assignUserColor(
+                presence.username,
+              );
               const { username } = presence;
-
+              //console.log("File User Color:" + assignUserColor(presence.username));
               presenceDecorations.push({
                 from,
                 to: from,

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/TabList/index.tsx

@@ -1,26 +1,23 @@
 import { useContext } from 'react';
+import { TabState } from '../../types';
 import { VZCodeContext } from '../VZCodeContext';
 import { Tab } from './Tab';
 import './style.scss';
-import { TabState } from '../../types';
 
 // Displays the list of tabs above the code editor.
-export const TabList = () => {
-  const {
-    files,
-    activeFileId,
-    setActiveFileId,
-    tabList,
-    openTab,
-    closeTabs,
-  } = useContext(VZCodeContext);
+export const TabList = ({ activeFileId, tabList }) => {
+  const { files, setActiveFileId, openTab, closeTabs } =
+    useContext(VZCodeContext);
 
   return (
     <div className="vz-tab-list">
       {files &&
         tabList
           // Handles the case that the tab list references a file that was deleted.
-          .filter((tabState) => tabState.fileId in files)
+          .filter(
+            (tabState: TabState) =>
+              tabState.fileId in files,
+          )
           .map((tabState: TabState) => (
             <Tab
               key={tabState.fileId}