vzcode 2.3.0 → 2.4.0

package/src/client/App/index.tsx

@@ -0,0 +1,152 @@
+import { useContext, useState } from 'react';
+import ShareDBClient from 'sharedb-client-browser/dist/sharedb-client-umd.cjs';
+import { json1Presence } from '../../ot';
+import { Username } from '../../types';
+// @ts-ignore
+import PrettierWorker from '../usePrettier/worker?worker';
+// @ts-ignore
+import {
+  LiveKitRoom,
+  RoomAudioRenderer,
+} from '@livekit/components-react';
+import { v4 } from 'uuid';
+import { SplitPaneResizeProvider } from '../SplitPaneResizeContext';
+import {
+  VZCodeContext,
+  VZCodeProvider,
+} from '../VZCodeContext';
+import { VZLeft } from '../VZLeft';
+import { VZMiddle } from '../VZMiddle';
+import { VZResizer } from '../VZResizer';
+import { VZRight } from '../VZRight';
+import {
+  useInitialUsername,
+  usePersistUsername,
+} from '../usernameLocalStorage';
+import './style.scss';
+import { useShareDB } from './useShareDB';
+import { useESLint } from '../useESLint';
+
+// Instantiate the Prettier worker.
+const prettierWorker = new PrettierWorker();
+
+// Register our custom JSON1 OT type that supports presence.
+// See https://github.com/vizhub-core/json1-presence
+ShareDBClient.types.register(json1Presence.type);
+
+// Establish the singleton ShareDB connection over WebSockets.
+// TODO consider using reconnecting WebSocket
+const { Connection } = ShareDBClient;
+const wsProtocol =
+  window.location.protocol === 'https:'
+    ? 'wss://'
+    : 'ws://';
+const socket = new WebSocket(
+  wsProtocol + window.location.host + '/ws',
+);
+const connection = new Connection(socket);
+
+// Stores the username to local storage.
+// TODO consider if there's a cleaner pattern for this.
+// This makes sense in VZCode itself, but for an app with
+// authentication that wraps VZCode, it is not required.
+const PersistUsername = () => {
+  const { username } = useContext(VZCodeContext);
+  usePersistUsername(username);
+  return null;
+};
+
+function App() {
+  const {
+    shareDBDoc,
+    content,
+    localPresence,
+    docPresence,
+    submitOperation,
+    connected,
+    pending,
+  } = useShareDB({
+    connection,
+  });
+
+  //state for the voice channel
+  const [liveKitToken, setLiveKitToken] =
+    useState(undefined);
+  const [liveKitRoomName, setLiveKitRoomName] =
+    useState(v4()); //default room name will be an arbitrary uuid
+  const [liveKitConnection, setLiveKitConnection] =
+    useState(false);
+  const { esLintSource } = useESLint();
+  // Get the initial username from localStorage.
+  const initialUsername: Username = useInitialUsername();
+
+  //@ts-ignore
+  const serverUrl = import.meta.env.VITE_LIVEKIT_URL; //Vite only parses VITE_ prefixed environment variables
+
+  // Feature flag for enabling the right-side panel.
+  // Useful for debugging dual split pane functionality.
+  // We may want to add this as an actual VZCode feature,
+  // for running the code that the VZCode user is developing
+  // in the same browser window as the VZCode editor,
+  // so that multiple browser windows are not required.
+  const enableRightPanel = true;
+
+  // TODO: enable this when the AI copilot is ready
+  // Currently it's glitchy and frustrating to use.
+  // It appears to be bugs in the upstream CodeMirror copilot code.
+  // Ghost text appears after just moving the cursor, not typing.
+  // It's hard to figure out how to dismiss it.
+  // Clicking on it accepts it but should not.
+  const enableCopilot = false;
+
+  return (
+    <SplitPaneResizeProvider>
+      <VZCodeProvider
+        content={content}
+        shareDBDoc={shareDBDoc}
+        submitOperation={submitOperation}
+        localPresence={localPresence}
+        docPresence={docPresence}
+        prettierWorker={prettierWorker}
+        initialUsername={initialUsername}
+        connected={connected}
+        pending={pending}
+        liveKitRoomName={liveKitRoomName}
+        setLiveKitRoom={setLiveKitRoomName}
+        liveKitToken={liveKitToken}
+        setLiveKitToken={setLiveKitToken}
+        liveKitConnection={liveKitConnection}
+        setLiveKitConnection={setLiveKitConnection}
+        aiChatEndpoint="/ai-chat-message"
+        aiChatOptions={{}}
+      >
+        <LiveKitRoom
+          audio={true}
+          token={liveKitToken}
+          serverUrl={serverUrl}
+          connect={liveKitConnection}
+          style={{ height: '100%' }}
+        >
+          <div className="app">
+            <VZLeft />
+            <VZMiddle
+              aiCopilotEndpoint={
+                enableCopilot ? '/ai-copilot' : null
+              }
+              esLintSource={esLintSource}
+            />
+            {enableRightPanel ? <VZRight /> : null}
+            <VZResizer side="left" />
+            {enableRightPanel ? (
+              <VZResizer side="right" />
+            ) : null}
+          </div>
+          <PersistUsername />
+          <RoomAudioRenderer />
+        </LiveKitRoom>
+      </VZCodeProvider>
+    </SplitPaneResizeProvider>
+  );
+}
+
+export default App;

package/src/client/App/style.scss

@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
+:root {
+  // --vzcode-font-family: ui-monospace, SFMono-Regular,
+  //   'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
+
+  --vzcode-font-family: 'Roboto Mono', monospace !important;
+  --vzcode-font-size: 16px;
+
+  /* Variable for the background color */
+  --vz-bg-color: rgb(
+    41,
+    44,
+    52
+  ); /* Variable for the background color */
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+
+// ::-webkit-scrollbar-track {
+//   background: rgb(255, 255, 255, 0.1);
+// }
+
+::-webkit-scrollbar-thumb {
+  background: rgb(255, 255, 255, 0.3);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Layout Styles */
+html,
+body,
+#root,
+.app {
+  height: 100%;
+}
+
+.app {
+  background-color: var(--vz-bg-color);
+  // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
+  //   'Noto Sans', Helvetica, Arial, sans-serif,
+  //   'Apple Color Emoji', 'Segoe UI Emoji';
+  display: flex;
+
+  /* To support Resizer, which is position: absolute */
+  position: relative;
+
+  .left,
+  .middle {
+    display: flex;
+
+    /* To suport PrettierErrorOverlay, which is position: absolute */
+    position: relative;
+  }
+
+  .middle {
+    // flex: 1;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .right {
+    display: flex;
+    flex: 1;
+    background-color: white;
+
+    iframe {
+      flex: 1;
+      border: none;
+    }
+  }
+}

package/src/client/App/usePending.ts

@@ -0,0 +1,51 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+} from 'react';
+import { ShareDBDoc } from '../../types';
+import { VizContent } from '@vizhub/viz-types';
+
+// import { runDelay } from '../constants';
+// TODO understand what this part is for
+const runDelay = 1000;
+
+export const usePending = (
+  shareDBDoc: ShareDBDoc<VizContent>,
+) => {
+  const lastOpTimerRef = useRef<NodeJS.Timeout>();
+
+  // TODO rename this to isPending,
+  // and also rename connected to isConnected.
+  const [pending, setPending] = useState<boolean>(false);
+
+  const resetOnNoPending = useCallback(() => {
+    if (!shareDBDoc) return;
+
+    // This happens AFTER the changes have been
+    // acknowledged by the server.
+    shareDBDoc.whenNothingPending(() => {
+      setPending(false);
+    });
+  }, [shareDBDoc, setPending]);
+
+  useEffect(() => {
+    if (!shareDBDoc) return;
+
+    // This happens when you type, but BEFORE
+    // the changes are sent to the server.
+    shareDBDoc.on('before op', () => {
+      setPending(true);
+
+      clearTimeout(lastOpTimerRef.current);
+
+      lastOpTimerRef.current = setTimeout(() => {
+        // should be triggered only once, cause upcoming ops unschedule previous resetOnNoPending
+        resetOnNoPending();
+      }, runDelay);
+    });
+  }, [shareDBDoc, resetOnNoPending]);
+
+  return pending;
+};

package/src/client/App/useShareDB.ts

@@ -0,0 +1,161 @@
+import { useEffect, useState, useRef } from 'react';
+import { randomId } from '../../randomId';
+import { ShareDBDoc } from '../../types';
+import { VizContent } from '@vizhub/viz-types';
+import { useSubmitOperation } from '../useSubmitOperation';
+import { usePending } from './usePending';
+
+// Set up the connection to ShareDB.
+export const useShareDB = ({
+  connection,
+}: {
+  connection: any;
+}) => {
+  // The ShareDB document.
+  const [shareDBDoc, setShareDBDoc] =
+    useState<ShareDBDoc<VizContent> | null>(null);
+
+  // Local ShareDB presence, for broadcasting our cursor position
+  // so other clients can see it.
+  // See https://share.github.io/sharedb/api/local-presence
+  const [localPresence, setLocalPresence] = useState(null);
+
+  // The document-level presence object, which emits
+  // changes in remote presence.
+  const [docPresence, setDocPresence] = useState(null);
+
+  // The `doc.data` part of the ShareDB document,
+  // updated on each change to decouple rendering from ShareDB.
+  // Starts out as `null` until the document is loaded.
+  const [content, setContent] = useState<VizContent | null>(
+    null,
+  );
+
+  const [connected, setConnected] =
+    useState<boolean>(false);
+
+  // const [isSaving, setIsSaving] = useState<boolean>(false);
+  // const [isSaved, setIsSaved] = useState<boolean>(false);
+
+  // const debounceTimeoutRef = useRef<ReturnType<
+  //   typeof setTimeout
+  // > | null>(null);
+
+  useEffect(() => {
+    // Listen for connection state changes
+    connection.on('connected', () => {
+      setConnected(true);
+    });
+
+    connection.on('disconnected', () => {
+      setConnected(false);
+    });
+
+    // Since there is only ever a single document,
+    // these things are pretty arbitrary.
+    //  * `collection` - the ShareDB collection to use
+    //  * `id` - the id of the ShareDB document to use
+    const collection = 'documents';
+    const id = '1';
+
+    // Initialize the ShareDB document.
+    const shareDBDoc = connection.get(collection, id);
+
+    // Subscribe to the document to get updates.
+    // This callback gets called once only.
+    shareDBDoc.subscribe(() => {
+      // Expose ShareDB doc to downstream logic.
+      setShareDBDoc(shareDBDoc);
+
+      // Set initial data.
+      setContent(shareDBDoc.data);
+
+      // Listen for all changes and update `data`.
+      // This decouples rendering logic from ShareDB.
+      // This callback gets called on each change.
+      shareDBDoc.on('op', () => {
+        // TODO consider excluding file contents from this,
+        // because currently we are re-rendering the entire
+        // document on each file change (each keystroke while editing).
+        // This is not required, because no part of the app outside
+        // of the CodeMirror integration uses those file contents.
+        // The Sidebar only needs to know file names, not contents.
+        // Start saving process when there’s an operation.
+        // setIsSaving(true);
+        // setIsSaved(false);
+
+        setContent(shareDBDoc.data);
+
+        // // Simulate a saving process and switch status to "saved"
+        // if (debounceTimeoutRef.current) {
+        //   clearTimeout(debounceTimeoutRef.current);
+        // }
+
+        // // Set up a debounce timer to switch from "saving" to "saved" after 2 seconds of inactivity.
+        // debounceTimeoutRef.current = setTimeout(() => {
+        //   setIsSaving(false);
+        //   setIsSaved(true); // Only set isSaved to true after 2 seconds of inactivity
+
+        //   const resetSavedTimeout = setTimeout(() => {
+        //     setIsSaved(false);
+        //   }, 1000); // 1 second delay after `isSaved` becomes true.
+
+        //   return () => clearTimeout(resetSavedTimeout);
+        // }, 1800); // 1.8-second delay for detecting inactivity
+      });
+
+      // Set up presence.
+      // See https://github.com/share/sharedb/blob/master/examples/rich-text-presence/client.js#L53
+      const docPresence = connection.getDocPresence(
+        collection,
+        id,
+      );
+
+      // Subscribe to receive remote presence updates.
+      docPresence.subscribe(function (error) {
+        if (error) throw error;
+      });
+
+      // Set up our local presence for broadcasting this client's presence.
+      const generateTimestampedId = () => {
+        const timestamp = Date.now().toString(36);
+        const randomPart = randomId();
+        return `${timestamp}-${randomPart}`;
+      };
+      setLocalPresence(
+        docPresence.create(generateTimestampedId()),
+      );
+
+      // Store docPresence so child components can listen for changes.
+      setDocPresence(docPresence);
+    });
+
+    // TODO unsubscribe from presence
+    // TODO unsubscribe from doc
+    return () => {
+      // if (debounceTimeoutRef.current)
+      //   clearTimeout(debounceTimeoutRef.current);
+      // shareDBDoc.destroy();
+      // docPresence.destroy();
+    };
+  }, []);
+
+  // True for "Saving..."
+  // False for "Saved"
+  const pending = usePending(shareDBDoc);
+
+  // A convenience function for mutating the ShareDB document
+  // based submitting OT ops generated by diffing the JSON.
+  const submitOperation =
+    useSubmitOperation<VizContent>(shareDBDoc);
+
+  return {
+    shareDBDoc,
+    content,
+    localPresence,
+    docPresence,
+    submitOperation,
+    connected,
+    pending,
+  };
+};

package/src/client/CodeEditor/Copilot/index.ts

@@ -0,0 +1,74 @@
+import { inlineCopilot } from 'codemirror-copilot';
+
+const defaultAICopilotEndpoint = '/ai-copilot';
+
+const DEBUG = false;
+
+// If the endpoint is broken, we don't want to keep sending requests
+// to it. This flag will be set to true if we get an error from the
+// server.
+let isEndpointBroken = false;
+
+export const copilot = ({
+  aiCopilotEndpoint = defaultAICopilotEndpoint,
+}: {
+  aiCopilotEndpoint: string;
+}) => {
+  return inlineCopilot(async (prefix, suffix) => {
+    DEBUG &&
+      console.log('[copilot] Executing AI completion...');
+    if (isEndpointBroken) {
+      DEBUG &&
+        console.log(
+          '[copilot] Endpoint is broken, not sending request',
+        );
+      return '';
+    }
+
+    DEBUG &&
+      console.log('[copilot] Sending request to server...');
+    const response = await fetch(aiCopilotEndpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ prefix, suffix }),
+    });
+
+    if (!response.ok) {
+      DEBUG &&
+        console.error(
+          '[copilot] Error from server:',
+          response.statusText,
+        );
+      DEBUG &&
+        console.error(
+          '[copilot] Disabling future requests to the server',
+        );
+      isEndpointBroken = true;
+      return '';
+    }
+
+    const responseJson = await response.json();
+
+    DEBUG &&
+      console.log(
+        '[copilot] Response from server:',
+        response,
+      );
+
+    if (responseJson.error) {
+      DEBUG &&
+        console.error(
+          '[copilot] error from server:',
+          responseJson.error,
+        );
+      DEBUG &&
+        console.error(
+          '[copilot] Disabling future requests to the server',
+        );
+      isEndpointBroken = true;
+      return '';
+    }
+
+    return responseJson.text;
+  });
+};

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

@@ -0,0 +1,12 @@
+import { InteractRule } from '@replit/codemirror-interact';
+export const boolTogglerRegex = /true|false/g;
+export const boolToggler = (
+  onInteract?: () => void,
+): InteractRule => ({
+  regexp: boolTogglerRegex,
+  cursor: 'pointer',
+  onClick: (text, setText) => {
+    setText(text === 'true' ? 'false' : 'true');
+    if (onInteract) onInteract();
+  },
+});

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

@@ -0,0 +1,68 @@
+import { InteractRule } from '@replit/codemirror-interact';
+
+// Regular expression for hex colors.
+export const colorPickerRegex = /#[0-9A-Fa-f]{6}/g;
+
+// hex color picker
+// Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
+// Works without quotes to support CSS.
+export const colorPicker = (
+  onInteract?: () => void,
+): InteractRule => ({
+  regexp: colorPickerRegex,
+  cursor: 'pointer',
+  onClick(
+    text: string,
+    setText: (newText: string) => void,
+    event: MouseEvent,
+  ) {
+    const startingColor: string = text;
+
+    const sel: HTMLInputElement =
+      document.createElement('input');
+    sel.type = 'color';
+    sel.value = startingColor.toLowerCase();
+
+    // `valueIsUpper` maintains the style of the user's code.
+    // It keeps the case of a-f the same case as the original.
+    const valueIsUpper: boolean =
+      startingColor.toUpperCase() === startingColor;
+
+    const updateHex = (e: Event) => {
+      const el: HTMLInputElement =
+        e.target as HTMLInputElement;
+      if (el.value) {
+        setText(
+          valueIsUpper ? el.value.toUpperCase() : el.value,
+        );
+      }
+      if (onInteract) onInteract();
+    };
+    sel.addEventListener('input', updateHex);
+
+    // Position the color input at the mouse cursor
+    sel.style.position = 'absolute';
+    sel.style.left = `${event.clientX}px`;
+    sel.style.top = `${event.clientY}px`;
+
+    // Make it invisible
+    sel.style.opacity = '0';
+    sel.style.height = '0';
+    sel.style.width = '0';
+    sel.style.border = 'none';
+    sel.style.padding = '0';
+    sel.style.margin = '0';
+    document.body.appendChild(sel);
+
+    // Click the input after a delay, so that
+    // it gets the correct position
+    setTimeout(() => {
+      sel.click();
+    }, 10);
+
+    // Remove the input after interaction
+    sel.addEventListener('blur', () => {
+      document.body.removeChild(sel);
+    });
+  },
+});