vzcode 0.26.0 → 0.28.0

package/src/client/App.tsx

@@ -1,33 +1,39 @@
-import {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  useReducer,
-} from 'react';
+import { useState, useEffect, useReducer } from 'react';
 import ShareDBClient from 'sharedb-client-browser/dist/sharedb-client-umd.cjs';
 import { json1Presence } from '../ot';
 import { randomId } from '../randomId';
 import { CodeEditor } from './CodeEditor';
 import { VZSettings } from './VZSettings';
 import { VZSidebar } from './VZSidebar';
-import { Files, ShareDBDoc, VZCodeContent } from '../types';
+import {
+  Files,
+  ShareDBDoc,
+  Username,
+  VZCodeContent,
+} from '../types';
 import { TabList } from './TabList';
 import { useOpenDirectories } from './useOpenDirectories';
 import { defaultTheme, useDynamicTheme } from './themes';
-import { useEditorCache } from './useEditorCache';
+import {
+  EditorCache,
+  useEditorCache,
+} from './useEditorCache';
 import { usePrettier } from './usePrettier';
 // @ts-ignore
 import PrettierWorker from './usePrettier/worker?worker';
 import { SplitPaneResizeProvider } from './SplitPaneResizeContext';
 import { Resizer } from './Resizer';
 import { PresenceNotifications } from './PresenceNotifications';
-import { PrettierErrorOverlay } from './PrettierErrorOverlay';
-import { vzReducer } from './vzReducer';
+import { CodeErrorOverlay } from './CodeErrorOverlay';
+import { vzReducer, createInitialState } from './vzReducer';
 import { useActions } from './useActions';
 import { useFileCRUD } from './useFileCRUD';
-import './style.scss';
 import { useSubmitOperation } from './useSubmitOperation';
+import {
+  useInitialUsername,
+  usePersistUsername,
+} from './usernameLocalStorage';
+import './style.scss';
 
 // Instantiate the Prettier worker.
 const prettierWorker = new PrettierWorker();
@@ -53,17 +59,6 @@ function App() {
   const [shareDBDoc, setShareDBDoc] =
     useState<ShareDBDoc<VZCodeContent> | null>(null);
 
-  const submitOperation: (
-    next: (content: VZCodeContent) => VZCodeContent,
-  ) => void = useSubmitOperation(shareDBDoc);
-
-  // Auto-run Pretter after local changes.
-  const { prettierError } = usePrettier(
-    shareDBDoc,
-    submitOperation,
-    prettierWorker,
-  );
-
   // Local ShareDB presence, for broadcasting our cursor position
   // so other clients can see it.
   // See https://share.github.io/sharedb/api/local-presence
@@ -127,7 +122,14 @@ function App() {
       });
 
       // Set up our local presence for broadcasting this client's presence.
-      setLocalPresence(docPresence.create(randomId()));
+      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);
@@ -141,17 +143,40 @@ function App() {
     };
   }, []);
 
+  // Get the initial username from localStorage.
+  const initialUsername: Username = useInitialUsername();
+
+  const submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void = useSubmitOperation(shareDBDoc);
+
+  // Auto-run Pretter after local changes.
+  const {
+    prettierError,
+  }: {
+    prettierError: string | null;
+  } = usePrettier(
+    shareDBDoc,
+    submitOperation,
+    prettierWorker,
+  );
+
   // https://react.dev/reference/react/useReducer
-  const [state, dispatch] = useReducer(vzReducer, {
-    tabList: [],
-    activeFileId: null,
-    theme: defaultTheme,
-    isSettingsOpen: false,
-  });
+  const [state, dispatch] = useReducer(
+    vzReducer,
+    { defaultTheme, initialUsername },
+    createInitialState,
+  );
 
   // Unpack state.
-  const { tabList, activeFileId, theme, isSettingsOpen } =
-    state;
+  const {
+    tabList,
+    activeFileId,
+    theme,
+    isSettingsOpen,
+    editorWantsFocus,
+    username,
+  } = state;
 
   // Functions for dispatching actions to the reducer.
   const {
@@ -161,6 +186,8 @@ function App() {
     setTheme,
     setIsSettingsOpen,
     closeSettings,
+    editorNoLongerWantsFocus,
+    setUsername,
   } = useActions(dispatch);
 
   // The set of open directories.
@@ -168,8 +195,10 @@ function App() {
   const { isDirectoryOpen, toggleDirectory } =
     useOpenDirectories();
 
+  usePersistUsername(username);
+
   // Cache of CodeMirror editors by file id.
-  const editorCache = useEditorCache();
+  const editorCache: EditorCache = useEditorCache();
 
   // Handle dynamic theme changes.
   useDynamicTheme(editorCache, theme);
@@ -177,9 +206,14 @@ function App() {
   // Handle file CRUD operations.
   const {
     createFile,
-    handleRenameFileClick,
-    handleDeleteClick,
-  } = useFileCRUD({ submitOperation, closeTabs });
+    renameFile,
+    deleteFile,
+    deleteDirectory,
+  } = useFileCRUD({
+    submitOperation,
+    closeTabs,
+    openTab,
+  });
 
   // Isolate the files object from the document.
   const files: Files | null = content
@@ -191,11 +225,12 @@ function App() {
       <div className="app">
         <div className="left">
           <VZSidebar
-            createFile={createFile}
             files={files}
-            handleRenameFileClick={handleRenameFileClick}
-            handleDeleteFileClick={handleDeleteClick}
-            handleFileClick={openTab}
+            createFile={createFile}
+            renameFile={renameFile}
+            deleteFile={deleteFile}
+            deleteDirectory={deleteDirectory}
+            openTab={openTab}
             setIsSettingsOpen={setIsSettingsOpen}
             isDirectoryOpen={isDirectoryOpen}
             toggleDirectory={toggleDirectory}
@@ -206,6 +241,8 @@ function App() {
             onClose={closeSettings}
             theme={theme}
             setTheme={setTheme}
+            username={username}
+            setUsername={setUsername}
           />
         </div>
         <div className="right">
@@ -214,7 +251,9 @@ function App() {
             tabList={tabList}
             activeFileId={activeFileId}
             setActiveFileId={setActiveFileId}
+            openTab={openTab}
             closeTabs={closeTabs}
+            createFile={createFile}
           />
           {content && activeFileId ? (
             <CodeEditor
@@ -225,13 +264,17 @@ function App() {
               activeFileId={activeFileId}
               theme={theme}
               editorCache={editorCache}
+              editorWantsFocus={editorWantsFocus}
+              editorNoLongerWantsFocus={
+                editorNoLongerWantsFocus
+              }
+              username={username}
             />
           ) : null}
-          <PrettierErrorOverlay
-            prettierError={prettierError}
-          />
+          <CodeErrorOverlay errorMessage={prettierError} />
           <PresenceNotifications
             docPresence={docPresence}
+            localPresence={localPresence}
           />
         </div>
         <Resizer />

package/src/client/CodeEditor/getOrCreateEditor.ts

@@ -12,6 +12,7 @@ import { json1Presence, textUnicode } from '../../ot';
 import {
   FileId,
   ShareDBDoc,
+  Username,
   VZCodeContent,
 } from '../../types';
 import { json1PresenceBroadcast } from './json1PresenceBroadcast';
@@ -27,6 +28,7 @@ import {
   EditorCacheValue,
 } from '../useEditorCache';
 import { ThemeLabel, themeOptionsByLabel } from '../themes';
+import { AIAssist } from '../AIAssist';
 
 // Language extensions for CodeMirror.
 // Keys are file extensions.
@@ -64,6 +66,9 @@ export const getOrCreateEditor = ({
   theme,
   onInteract,
   editorCache,
+  usernameRef,
+  aiAssistEndpoint,
+  aiAssistOptions,
 }: {
   fileId: FileId;
 
@@ -82,6 +87,11 @@ export const getOrCreateEditor = ({
   theme: ThemeLabel;
   onInteract?: () => void;
   editorCache: EditorCache;
+  usernameRef: React.MutableRefObject<Username>;
+  aiAssistEndpoint?: string;
+  aiAssistOptions?: {
+    [key: string]: any;
+  };
 }): EditorCacheValue => {
   // Cache hit
   if (editorCache.has(fileId)) {
@@ -118,13 +128,15 @@ export const getOrCreateEditor = ({
   );
 
   // Deals with broadcasting changes in cursor location and selection.
-  if (localPresence)
+  if (localPresence) {
     extensions.push(
       json1PresenceBroadcast({
         path: textPath,
         localPresence,
+        usernameRef,
       }),
     );
+  }
 
   // Deals with receiving the broadcas from other clients and displaying them.
   if (docPresence)
@@ -152,7 +164,7 @@ export const getOrCreateEditor = ({
   // using a Compartment.
   const languageCompartment = new Compartment();
   // See https://github.com/vizhub-core/vzcode/issues/55
-  const getLanguageExtension = (fileExtension) => {
+  const getLanguageExtension = (fileExtension: string) => {
     const languageFunc = languageExtensions[fileExtension];
     return languageFunc ? languageFunc() : undefined;
   };
@@ -195,6 +207,14 @@ export const getOrCreateEditor = ({
 
   extensions.push(rotationIndicator);
 
+  extensions.push(
+    AIAssist({
+      fileId,
+      aiAssistEndpoint,
+      aiAssistOptions,
+    }),
+  );
+
   const editor = new EditorView({
     state: EditorState.create({
       doc: text,

package/src/client/CodeEditor/index.tsx

@@ -2,10 +2,12 @@ import {
   useRef,
   useLayoutEffect,
   useCallback,
+  useMemo,
 } from 'react';
 import {
   FileId,
   ShareDBDoc,
+  Username,
   VZCodeContent,
 } from '../../types';
 import { ThemeLabel, defaultTheme } from '../themes';
@@ -25,6 +27,11 @@ export const CodeEditor = ({
   theme = defaultTheme,
   filesPath = ['files'],
   editorCache,
+  editorWantsFocus,
+  editorNoLongerWantsFocus,
+  username,
+  aiAssistEndpoint,
+  aiAssistOptions,
 }: {
   activeFileId: FileId;
   shareDBDoc: ShareDBDoc<VZCodeContent> | null;
@@ -39,6 +46,22 @@ export const CodeEditor = ({
   // Defaults to `files` if not provided.
   filesPath?: string[];
   editorCache: EditorCache;
+
+  // Whether the editor should be focused.
+  editorWantsFocus: boolean;
+
+  // Signals that the editor no longer wants focus.
+  editorNoLongerWantsFocus: () => void;
+  username: Username;
+
+  // The server endpoint for the AI Assist service.
+  aiAssistEndpoint?: string;
+
+  // Additional options to pass to the AI Assist service,
+  // an object with string values.
+  aiAssistOptions?: {
+    [key: string]: string;
+  };
 }) => {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -67,17 +90,15 @@ export const CodeEditor = ({
     }, 800);
   }, [submitOperation]);
 
-  // Every time the active file switches from one file to another,
-  // the editor corresponding to the old file is removed from the DOM,
-  // and the editor corresponding to the new file is added to the DOM.
-  useLayoutEffect(() => {
-    // Guard against cases where page is still loading.
-    if (!ref.current) return;
-    if (!shareDBDoc) return;
+  // Track username on a ref, so that we can use it in the
+  // presence object's `username` property.
+  const usernameRef = useRef<Username>(username);
+  usernameRef.current = username;
 
-    // Get the editor corresponding to the active file.
-    // Looks in `editorCache` first, and if not found, creates a new editor.
-    const editorCacheValue: EditorCacheValue =
+  // Get the editor corresponding to the active file.
+  // Looks in `editorCache` first, and if not found, creates a new editor.
+  const editorCacheValue: EditorCacheValue = useMemo(
+    () =>
       getOrCreateEditor({
         fileId: activeFileId,
         shareDBDoc,
@@ -87,7 +108,32 @@ export const CodeEditor = ({
         theme,
         onInteract,
         editorCache,
-      });
+        usernameRef,
+        aiAssistEndpoint,
+        aiAssistOptions,
+      }),
+    [
+      activeFileId,
+      shareDBDoc,
+      filesPath,
+      localPresence,
+      docPresence,
+      theme,
+      onInteract,
+      editorCache,
+      usernameRef,
+      aiAssistEndpoint,
+      aiAssistOptions,
+    ],
+  );
+
+  // Every time the active file switches from one file to another,
+  // the editor corresponding to the old file is removed from the DOM,
+  // and the editor corresponding to the new file is added to the DOM.
+  useLayoutEffect(() => {
+    // Guard against cases where page is still loading.
+    if (!ref.current) return;
+    if (!shareDBDoc) return;
 
     // Add the editor to the DOM.
     ref.current.appendChild(editorCacheValue.editor.dom);
@@ -97,7 +143,24 @@ export const CodeEditor = ({
       // This happens every time `activeFileId` changes.
       ref.current.removeChild(editorCacheValue.editor.dom);
     };
-  }, [shareDBDoc, activeFileId, onInteract]);
+  }, [shareDBDoc, editorCacheValue]);
+
+  // useEffect(() => {
+  //   if (editorWantsFocus) {
+  //     editorCacheValue.editor.focus();
+  //   }
+
+  // Focus the editor
+  useLayoutEffect(() => {
+    if (editorWantsFocus) {
+      editorCacheValue.editor.focus();
+      editorNoLongerWantsFocus();
+    }
+  }, [
+    editorWantsFocus,
+    editorCacheValue,
+    editorNoLongerWantsFocus,
+  ]);
 
   return <div className="vz-code-editor" ref={ref}></div>;
 };

package/src/client/CodeEditor/json1PresenceBroadcast.ts

@@ -5,11 +5,13 @@ import { EditorView } from 'codemirror';
 export const json1PresenceBroadcast = ({
   path,
   localPresence,
+  usernameRef,
 }) =>
   // See https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395/10
   EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
     // If this update modified the cursor / selection,
     // we broadcast the selection update via ShareDB presence.
+
     if (viewUpdate.selectionSet) {
       // Isolate the single selection to use for presence.
       // Unfortunately JSON1 with presence does not yet
@@ -24,8 +26,10 @@ export const json1PresenceBroadcast = ({
         start: [...path, from],
         end: [...path, to],
 
-        // TODO fill this in with the user's actual username.
-        username: 'anonymous',
+        // We use a ref here so that the presence always broadcasts
+        // the latest username, in the case that it has been changed
+        // in the Settings mid-session.
+        username: usernameRef.current,
       };
 
       // Broadcast presence to remote clients!

package/src/client/CodeEditor/json1PresenceDisplay.ts

@@ -37,10 +37,6 @@ export const json1PresenceDisplay = ({
         // Receive remote presence changes.
         docPresence.on('receive', (id, presence) => {
           // If presence === null, the user has disconnected / exited
-          // notification(presence);
-          // console.log('docPresence in presenceDisplay:',docPresence);
-          // console.log('presence in presenceDisplay:', presence);
-
           // We also check if the presence is for the current file or not.
           if (presence && pathMatches(path, presence)) {
             presenceState[id] = presence;
@@ -107,47 +103,6 @@ export const json1PresenceDisplay = ({
   presenceTheme,
 ];
 
-// const notification = (presence) => {
-//   const notif = document.createElement('div');
-//   notif.className = 'notification-presence';
-//   if (presence === null){
-//     notif.textContent = 'User asdfgasdfgasdfg left the collaboration session.';
-//     notif.style.display = 'block';
-//   }
-//   // The following causes the popup to show every time the remote cursor moves
-//   // to a different location on the file and not when the user first joins
-//   // else {
-//   //   notif.textContent = presence + 'joined the collaboration session.';
-//   //   notif.style.display = 'block';
-//   // }
-//   document.body.appendChild(notif);
-
-//   const notifStyle = document.createElement('style');
-//   notifStyle.innerText = `
-//     .notification-presence {
-//       position: fixed;
-//       display: none;
-//       bottom: 20px;
-//       right: 20px;
-//       max-width: 300px;
-//       overflow-x: hidden;
-//       white-space: nowrap;
-//       background-color: rgb(54, 65, 89);
-//       color: rgb(154, 160, 172);
-//       padding: 15px;
-//     }
-//     .notification-presence:hover {
-//       overflow-x: auto;
-//     }`;
-//   document.head.appendChild(notifStyle);
-
-//   setTimeout(() => {
-//     notif.style.display = 'none';
-//   }, 10000);
-
-//   return notif;
-// };
-
 const presenceAnnotation = Annotation.define();
 
 // Checks that the path of this file

package/src/client/CodeEditor/style.scss

@@ -4,8 +4,12 @@
   font-family: var(--vzcode-font-family);
   overflow-x: auto;
 
-  /* TODO QA this */
   .cm-editor {
     flex: 1;
   }
+
+  .cm-scroller {
+    font-family: var(--vzcode-font-family);
+    font-size: var(--vzcode-font-size);
+  }
 }

package/src/client/CodeErrorOverlay/index.tsx

@@ -0,0 +1,37 @@
+import { useState, useCallback, useEffect } from 'react';
+import './style.scss';
+
+const enableErrorDismiss = true;
+
+export const CodeErrorOverlay = ({
+  errorMessage,
+}: {
+  errorMessage: string | null;
+}) => {
+  const [isOverlayVisible, setIsOverlayVisible] =
+    useState(true);
+
+  // If errorMessage changes, set the overlay to be visible
+  useEffect(() => {
+    if (errorMessage !== null) {
+      setIsOverlayVisible(true);
+    }
+  }, [errorMessage]);
+
+  const handleCloseClick = useCallback(() => {
+    // Set the visibility state to false when the button is clicked
+    setIsOverlayVisible(false);
+  }, []);
+
+  return isOverlayVisible && errorMessage !== null ? (
+    <div className="vz-code-error-overlay">
+      {errorMessage}
+      {enableErrorDismiss ? (
+        <div
+          className={'bx bx-x error-dismiss-button'}
+          onClick={handleCloseClick}
+        ></div>
+      ) : null}
+    </div>
+  ) : null;
+};

package/src/client/CodeErrorOverlay/style.scss

@@ -0,0 +1,41 @@
+.vz-code-error-overlay {
+  color: rgb(255, 35, 35);
+  font-family: var(--vzcode-font-family);
+  font-size: var(--vzcode-font-size);
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  // pointer-events: none;
+  margin: 0;
+  padding: 8px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+
+  /* Define your custom styles here */
+  /* For example, change the font size and color */
+  font-size: 16px;
+  color: #FF5733;
+
+  /* Add a box shadow for a subtle effect */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+
+  /* Customize the dismiss button style */
+  .error-dismiss-button {
+    position: absolute;
+    top: 5px; /* Adjust the top position */
+    right: 5px; /* Adjust the right position */
+    margin: 0;
+    padding: 5px; /* Adjust padding for the button */
+    cursor: pointer;
+    color: white;
+    background-color: #FF5733; /* Change the button's background color */
+    border-radius: 50%; /* Make it circular */
+  }
+
+  /* Style the button on hover */
+  .error-dismiss-button:hover {
+    background-color: #FF826D; /* Change the background color on hover */
+  }
+}