npm - vzcode - Versions diffs - 0.28.0 → 0.29.0 - Mend

vzcode 0.28.0 → 0.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/dist/assets/index-836bdce7.css +1 -0
package/dist/assets/index-c7f894a9.js +115 -0
package/dist/assets/worker-a2979249.js +366 -0
package/dist/index.html +2 -2
package/package.json +10 -6
package/src/client/AIAssist.ts +110 -19
package/src/client/AIAssistWidget/index.tsx +101 -0
package/src/client/AIAssistWidget/style.scss +10 -0
package/src/client/App/VZCodeContext.tsx +251 -0
package/src/client/App/VZLeft.tsx +56 -0
package/src/client/App/VZMiddle.tsx +91 -0
package/src/client/App/VZRight.tsx +15 -0
package/src/client/App/index.tsx +104 -0
package/src/client/{style.scss → App/style.scss} +14 -3
package/src/client/App/useShareDB.ts +103 -0
package/src/client/CodeEditor/getOrCreateEditor.ts +54 -6
package/src/client/CodeEditor/index.tsx +9 -0
package/src/client/CodeEditor/json1PresenceDisplay.ts +38 -9
package/src/client/CodeEditor/typeScriptCompletions.ts +108 -0
package/src/client/CodeEditor/typeScriptLinter.ts +45 -0
package/src/client/CodeErrorOverlay/index.tsx +27 -1
package/src/client/CodeErrorOverlay/style.scss +11 -11
package/src/client/SplitPaneResizeContext.tsx +195 -39
package/src/client/TabList/index.tsx +1 -27
package/src/client/{Resizer → VZResizer}/index.tsx +37 -13
package/src/client/VZSettings.tsx +1 -1
package/src/client/VZSidebar/CreateFileModal.tsx +93 -0
package/src/client/VZSidebar/DeleteConfirmationModal.tsx +42 -24
package/src/client/VZSidebar/index.tsx +69 -9
package/src/client/useFileCRUD.ts +19 -19
package/src/client/useOpenDirectories.ts +12 -8
package/src/client/usePrettier/index.ts +13 -1
package/src/client/useTypeScript/index.ts +44 -0
package/src/client/useTypeScript/requestTypes.ts +29 -0
package/src/client/useTypeScript/worker.ts +222 -0
package/src/client/usernameLocalStorage.ts +1 -1
package/src/client/vzReducer/createInitialState.ts +4 -5
package/src/index.ts +5 -1
package/src/server/handleAIAssist.js +76 -12
package/src/server/index.js +55 -2
package/src/types.ts +78 -1
package/dist/assets/index-a9585cbc.js +0 -111
package/dist/assets/index-d30c9f1b.css +0 -1
package/src/client/App.tsx +0 -286
/package/src/client/{Resizer → VZResizer}/styles.scss +0 -0

package/dist/index.html CHANGED Viewed

@@ -24,8 +24,8 @@
       href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-a9585cbc.js"></script>
-    <link rel="stylesheet" href="/assets/index-d30c9f1b.css">
+    <script type="module" crossorigin src="/assets/index-c7f894a9.js"></script>
+    <link rel="stylesheet" href="/assets/index-836bdce7.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -45,16 +45,19 @@
   },
   "homepage": "https://github.com/vizhub-core/vzcode#readme",
   "dependencies": {
+    "@codemirror/autocomplete": "^6.11.0",
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.6",
     "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-markdown": "^6.2.2",
     "@codemirror/state": "^6.3.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.21.4",
+    "@codemirror/view": "^6.22.0",
     "@lezer/highlight": "^1.1.6",
     "@replit/codemirror-interact": "^6.3.0",
     "@teamwork/websocket-json-stream": "^2.0.0",
+    "@typescript/vfs": "^1.5.0",
     "@uiw/codemirror-theme-abcdef": "^4.21.20",
     "@uiw/codemirror-theme-dracula": "^4.21.20",
     "@uiw/codemirror-theme-eclipse": "^4.21.20",
@@ -67,6 +70,7 @@
     "body-parser": "^1.20.2",
     "codemirror": "^6.0.1",
     "codemirror-ot": "^4.1.0",
+    "color-hash": "^2.0.2",
     "d3-array": "^3.2.4",
     "diff-match-patch": "^1.0.5",
     "dotenv": "^16.3.1",
@@ -74,7 +78,7 @@
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
     "open": "^9.1.0",
-    "openai": "^4.14.1",
+    "openai": "^4.17.4",
     "ot-json1": "^1.0.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
@@ -85,9 +89,9 @@
     "ws": "^8.14.2"
   },
   "devDependencies": {
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.2.14",
-    "@vitejs/plugin-react": "^4.1.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.1.1",
     "prettier": "^3.0.3",
     "sass": "^1.69.5",
     "typescript": "^5.2.2",

package/src/client/AIAssist.ts CHANGED Viewed

@@ -1,8 +1,20 @@
 import { EditorView, keymap } from '@codemirror/view';
+import {
+  FileId,
+  File,
+  ShareDBDoc,
+  VZCodeContent,
+} from '../types';
+import { generateRequestId } from './CodeEditor/typeScriptCompletions';
+import { insertOp, replaceOp } from 'ot-json1';
+import { TabState } from './vzReducer';
 export const AIAssist = ({
+  shareDBDoc,
   // The file id of the file the AI should assist with.
   fileId,
+  tabList,
   // Optional endpoint override.
   aiAssistEndpoint = '/AIAssist',
@@ -10,37 +22,116 @@ export const AIAssist = ({
   // Optional additional options to pass to the endpoint.
   aiAssistOptions = {},
 }: {
+  shareDBDoc: ShareDBDoc<VZCodeContent>;
   fileId: string;
   aiAssistEndpoint: string;
   aiAssistOptions?: {
     [key: string]: any;
   };
+  tabList: Array<TabState>;
 }) =>
   keymap.of([
     {
       key: 'control-m',
       run: (view: EditorView) => {
-        const textToSend = view.state.sliceDoc(
-          0,
-          view.state.selection.main.to,
-        );
-        fetch(aiAssistEndpoint, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            // Pass additional options to the AI Assist endpoint.
-            ...aiAssistOptions,
-            text: textToSend,
-            fileId,
-            cursorLocation: view.state.selection.main.to,
-          }),
-        });
+        if (
+          shareDBDoc.data.aiStreams === undefined ||
+          shareDBDoc.data.aiStreams[mostRecentStreamId] ===
+            null ||
+          shareDBDoc.data.aiStreams[mostRecentStreamId]
+            ?.AIStreamStatus.serverIsRunning !== true
+        ) {
+          startAIAssist(view, shareDBDoc, fileId, tabList);
+        } else {
+          haltAIAssist(shareDBDoc);
+        }
         return true;
       },
     },
   ]);
+// TODO use ref forwarding instead of `export let`
+export let mostRecentStreamId = null;
+export const startAIAssist = async (
+  view: EditorView,
+  shareDBDoc: ShareDBDoc<VZCodeContent>,
+  fileId: FileId,
+  tabList: Array<TabState>,
+  // TODO mostRecentStreamIdRef: React.MutableRefObject<string>,
+) => {
+  const textToSend =
+    (await generateFilesContext(
+      tabList.map(
+        (tabState) =>
+          shareDBDoc.data.files[tabState.fileId],
+      ),
+    )) +
+    'Current File:\n' +
+    view.state.sliceDoc(0, view.state.selection.main.to);
+  console.log(textToSend);
+  // TODO mostRecentStreamIdRef.current = generateRequestId();
+  mostRecentStreamId = generateRequestId();
+  if (shareDBDoc.data['aiStreams'] === undefined) {
+    shareDBDoc.submitOp(insertOp(['aiStreams'], {}), {
+      source: 'AIClient',
+    });
+  }
+  shareDBDoc.submitOp(
+    insertOp(['aiStreams', mostRecentStreamId], {
+      AIStreamStatus: {
+        clientWantsToStart: true,
+        serverIsRunning: false,
+        text: textToSend,
+        insertionCursor: view.state.selection.main.to,
+        fileId: fileId,
+      },
+    }),
+    { source: 'AIClient' },
+  );
+};
+export const haltAIAssist = (
+  shareDBDoc: ShareDBDoc<VZCodeContent>,
+) => {
+  const haltGenerationOp = replaceOp(
+    [
+      'aiStreams',
+      mostRecentStreamId,
+      'AIStreamStatus',
+      'clientWantsToStart',
+    ],
+    true,
+    false,
+  );
+  shareDBDoc.submitOp(haltGenerationOp, {
+    source: 'AIClient',
+  });
+};
+export const generateFilesContext = async (
+  goodFiles: File[],
+): Promise<string> => {
+  const input = goodFiles
+    .map((file) => {
+      const nameSubstring = file.name
+        // ?.substring(0, maxFileNameLength)
+        .trim();
+      const textSubstring = file.text
+        // ?.substring(0, maxFileTextLength)
+        .trim();
+      // Generate Markdown that AI will understand.
+      return `File \`${nameSubstring}\`:\n\`\`\`${textSubstring}\`\`\``;
+    })
+    .join('\n\n');
+  return input;
+};

package/src/client/AIAssistWidget/index.tsx ADDED Viewed

@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Button } from '../bootstrap';
+import './style.scss';
+import {
+  mostRecentStreamId,
+  haltAIAssist,
+  startAIAssist,
+} from '../AIAssist';
+import {
+  FileId,
+  ShareDBDoc,
+  VZCodeContent,
+} from '../../types';
+import { EditorCache } from '../useEditorCache';
+import { TabState } from '../vzReducer';
+// From
+// https://primer.style/foundations/icons/zap-24
+const ZapSVG = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path d="M15.716 1.329a1.341 1.341 0 0 1 2.109 1.55L15.147 9h4.161c1.623 0 2.372 2.016 1.143 3.075L8.102 22.721a1.148 1.148 0 0 1-1.81-1.317L8.996 15H4.674c-1.619 0-2.37-2.008-1.148-3.07l12.19-10.6Zm.452 1.595L4.51 13.061a.25.25 0 0 0 .164.439h5.45a.749.749 0 0 1 .692 1.041l-2.559 6.066 11.215-9.668a.25.25 0 0 0-.164-.439H14a.75.75 0 0 1-.687-1.05Z"></path>
+  </svg>
+);
+// From Wikimedia
+// https://commons.wikimedia.org/wiki/File:Stopsign.svg
+const StopSVG = () => (
+  <svg
+    width="15pt"
+    height="15pt"
+    version="1.1"
+    viewBox="0 0 15 15"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g transform="scale(.75)" fill="#fff" stroke="#000">
+      <path d="m17.5 0.5c1.1055 0 2 0.89453 2 2v15c0 1.1055-0.89453 2-2 2h-15c-1.1055 0-2-0.89453-2-2v-15c0-1.1055 0.89453-2 2-2z" />
+    </g>
+  </svg>
+);
+export const AIAssistWidget = ({
+  activeFileId,
+  shareDBDoc,
+  editorCache,
+  tabList,
+}: {
+  activeFileId: FileId;
+  shareDBDoc: ShareDBDoc<VZCodeContent>;
+  editorCache: EditorCache;
+  tabList: Array<TabState>;
+}) => {
+  const [AIAssistRunning, setAIAssistRunning] =
+    useState(false);
+  useEffect(() => {
+    const handleOp = (op, source) => {
+      if (op !== null && op[0] === 'aiStreams') {
+        // The check if the value is true is required
+        // because the value could be null rather than false.
+        setAIAssistRunning(
+          shareDBDoc.data.aiStreams[mostRecentStreamId]
+            ?.AIStreamStatus.serverIsRunning === true,
+        );
+      }
+    };
+    shareDBDoc.on('op', handleOp);
+    return () => {
+      shareDBDoc.off('op', handleOp);
+    };
+  }, [shareDBDoc]);
+  const handleClick = useCallback(() => {
+    if (!AIAssistRunning) {
+      startAIAssist(
+        editorCache.get(activeFileId).editor,
+        shareDBDoc,
+        activeFileId,
+        tabList,
+      );
+    } else {
+      haltAIAssist(shareDBDoc);
+    }
+  }, [activeFileId, AIAssistRunning]);
+  return (
+    <div className="vz-code-ai-assist-widget">
+      <Button
+        variant="light"
+        title="Start AI Assist"
+        onClick={handleClick}
+      >
+        {AIAssistRunning ? <StopSVG /> : <ZapSVG />}
+      </Button>
+    </div>
+  );
+};

package/src/client/AIAssistWidget/style.scss ADDED Viewed

@@ -0,0 +1,10 @@
+.vz-code-ai-assist-widget {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  .btn {
+    /* Center the icon */
+    padding: 6px 6px 7px 6px;
+  }
+}

package/src/client/App/VZCodeContext.tsx ADDED Viewed

@@ -0,0 +1,251 @@
+import { createContext, useReducer } from 'react';
+import {
+  Files,
+  ShareDBDoc,
+  Username,
+  VZCodeContent,
+} from '../../types';
+import { useSubmitOperation } from '../useSubmitOperation';
+import { usePrettier } from '../usePrettier';
+import { useTypeScript } from '../useTypeScript';
+import {
+  TabState,
+  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';
+// This context centralizes all the "smart" logic
+// to do with the application state. This includes
+//  * Accessing and manipulating ShareDB data
+//  * Centralized application state
+export const VZCodeContext =
+  createContext<VZCodeContextValue>(null);
+// The type of the object provided by this context.
+export type VZCodeContextValue = {
+  content: VZCodeContent | null;
+  shareDBDoc: ShareDBDoc<VZCodeContent> | null;
+  submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void;
+  localPresence: any;
+  docPresence: any;
+  files: Files | null;
+  createFile: (fileName: string) => void;
+  renameFile: (fileId: string, fileName: string) => void;
+  deleteFile: (fileId: string) => void;
+  deleteDirectory: (directoryId: string) => void;
+  activeFileId: string | null;
+  setActiveFileId: (fileId: string | null) => void;
+  tabList: Array<TabState>;
+  openTab: ({
+    fileId,
+    isTransient,
+  }: {
+    fileId: string;
+    isTransient?: boolean;
+  }) => void;
+  closeTabs: (fileIds: string[]) => void;
+  isSettingsOpen: boolean;
+  setIsSettingsOpen: (isSettingsOpen: boolean) => void;
+  closeSettings: () => void;
+  theme: ThemeLabel;
+  setTheme: (theme: ThemeLabel) => void;
+  username: Username;
+  setUsername: (username: Username) => void;
+  isDirectoryOpen: (path: string) => boolean;
+  toggleDirectory: (path: string) => void;
+  editorCache: EditorCache;
+  editorWantsFocus: boolean;
+  editorNoLongerWantsFocus: () => void;
+  errorMessage: string | null;
+  typeScriptWorker: Worker | null;
+};
+export const VZCodeProvider = ({
+  content,
+  shareDBDoc,
+  localPresence,
+  docPresence,
+  prettierWorker,
+  typeScriptWorker,
+  initialUsername,
+  children,
+  codeError = null,
+}: {
+  content: VZCodeContent;
+  shareDBDoc: ShareDBDoc<VZCodeContent>;
+  localPresence: any;
+  docPresence: any;
+  prettierWorker: Worker;
+  typeScriptWorker: Worker;
+  initialUsername: Username;
+  children: React.ReactNode;
+  codeError?: string | null;
+}) => {
+  // A convenience function for mutating the ShareDB document
+  // based submitting OT ops generated by diffing the JSON.
+  const submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void = useSubmitOperation(shareDBDoc);
+  // Auto-run Pretter after local changes.
+  const {
+    prettierError,
+  }: {
+    prettierError: string | null;
+  } = usePrettier(
+    shareDBDoc,
+    submitOperation,
+    prettierWorker,
+  );
+  // The error message shows either:
+  // * `prettierError` - errors from Prettier, client-side only
+  // * `codeError` - errors from an external source, such as
+  //   build-time errors or intercepted runtime errors.
+  // Since `prettierError` surfaces syntax errors, it's more likely to be
+  // useful to the user, so we prioritize it.
+  const errorMessage: string | null = prettierError
+    ? prettierError
+    : codeError;
+  // Set up the TypeScript Language Server worker.
+  // This acts as a central "brain" for features powered
+  // by the TypeScript Language Server including:
+  //  * Completions
+  //  * Linting
+  useTypeScript({
+    content,
+    typeScriptWorker,
+  });
+  // Set up the reducer that manages much of the application state.
+  // See https://react.dev/reference/react/useReducer
+  const [state, dispatch] = useReducer(
+    vzReducer,
+    { defaultTheme, initialUsername },
+    createInitialState,
+  );
+  // Unpack state.
+  const {
+    tabList,
+    activeFileId,
+    theme,
+    isSettingsOpen,
+    editorWantsFocus,
+    username,
+  } = state;
+  // Functions for dispatching actions to the reducer.
+  const {
+    setActiveFileId,
+    openTab,
+    closeTabs,
+    setTheme,
+    setIsSettingsOpen,
+    closeSettings,
+    editorNoLongerWantsFocus,
+    setUsername,
+  } = useActions(dispatch);
+  // The set of open directories.
+  // TODO move this into reducer/useActions
+  const { isDirectoryOpen, toggleDirectory } =
+    useOpenDirectories();
+  // Cache of CodeMirror editors by file id.
+  const editorCache: EditorCache = useEditorCache();
+  // Handle dynamic theme changes.
+  useDynamicTheme(editorCache, theme);
+  // Handle file CRUD operations (Create, Read, Update, Delete)
+  const {
+    createFile,
+    renameFile,
+    deleteFile,
+    deleteDirectory,
+  } = useFileCRUD({
+    submitOperation,
+    closeTabs,
+    openTab,
+  });
+  // Isolate the files object from the document.
+  const files: Files | null = content
+    ? content.files
+    : null;
+  // The value provided by this context.
+  const value: VZCodeContextValue = {
+    content,
+    shareDBDoc,
+    submitOperation,
+    localPresence,
+    docPresence,
+    files,
+    createFile,
+    renameFile,
+    deleteFile,
+    deleteDirectory,
+    activeFileId,
+    setActiveFileId,
+    tabList,
+    openTab,
+    closeTabs,
+    isSettingsOpen,
+    setIsSettingsOpen,
+    closeSettings,
+    theme,
+    setTheme,
+    username,
+    setUsername,
+    isDirectoryOpen,
+    toggleDirectory,
+    editorCache,
+    editorWantsFocus,
+    editorNoLongerWantsFocus,
+    errorMessage,
+    typeScriptWorker,
+  };
+  return (
+    <VZCodeContext.Provider value={value}>
+      {children}
+    </VZCodeContext.Provider>
+  );
+};

package/src/client/App/VZLeft.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import { useContext } from 'react';
+import { VZSettings } from '../VZSettings';
+import { VZSidebar } from '../VZSidebar';
+import { VZCodeContext } from './VZCodeContext';
+// The middle portion of the VZCode environment, containing:
+// * The sidebar
+// * The settings modal
+export const VZLeft = () => {
+  // TODO leverage this context in deeper levels of the component tree.
+  const {
+    files,
+    createFile,
+    renameFile,
+    deleteFile,
+    deleteDirectory,
+    activeFileId,
+    openTab,
+    closeTabs,
+    isSettingsOpen,
+    setIsSettingsOpen,
+    closeSettings,
+    theme,
+    setTheme,
+    username,
+    setUsername,
+    isDirectoryOpen,
+    toggleDirectory,
+  } = useContext(VZCodeContext);
+  return (
+    <div className="left">
+      <VZSidebar
+        files={files}
+        createFile={createFile}
+        renameFile={renameFile}
+        deleteFile={deleteFile}
+        deleteDirectory={deleteDirectory}
+        openTab={openTab}
+        closeTabs={closeTabs}
+        setIsSettingsOpen={setIsSettingsOpen}
+        isDirectoryOpen={isDirectoryOpen}
+        toggleDirectory={toggleDirectory}
+        activeFileId={activeFileId}
+      />
+      <VZSettings
+        show={isSettingsOpen}
+        onClose={closeSettings}
+        theme={theme}
+        setTheme={setTheme}
+        username={username}
+        setUsername={setUsername}
+      />
+    </div>
+  );
+};