vzcode 2.2.0 → 2.3.0

package/src/client/App/index.tsx

@@ -1,153 +0,0 @@
-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"
-        aiChatUndoEndpoint="/ai-chat-undo"
-        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

@@ -1,82 +0,0 @@
-@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

@@ -1,51 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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);
-    });
-  },
-});