vzcode 2.0.0 → 2.3.0

package/dist/utils/fileDiff.js

@@ -0,0 +1,66 @@
+import { createTwoFilesPatch } from 'diff';
+/**
+ * Generate a unified diff for a single file using the diff library
+ */
+export function generateFileUnifiedDiff(fileId, fileName, beforeContent, afterContent) {
+    // Only generate diff if there are actual changes
+    if (beforeContent === afterContent) {
+        return '';
+    }
+    // Use the diff library's createTwoFilesPatch function to generate unified diff
+    const unifiedDiff = createTwoFilesPatch(fileName, fileName, beforeContent, afterContent, '', '', { context: 3 });
+    return unifiedDiff;
+}
+/**
+ * Generate unified diffs for multiple files
+ */
+export function generateFilesUnifiedDiff(beforeFiles, afterFiles) {
+    const result = {};
+    const allFileIds = new Set([
+        ...Object.keys(beforeFiles),
+        ...Object.keys(afterFiles),
+    ]);
+    for (const fileId of allFileIds) {
+        const beforeFile = beforeFiles[fileId];
+        const afterFile = afterFiles[fileId];
+        const beforeContent = beforeFile?.text || '';
+        const afterContent = afterFile?.text || '';
+        const fileName = afterFile?.name || beforeFile?.name || fileId;
+        const unifiedDiff = generateFileUnifiedDiff(fileId, fileName, beforeContent, afterContent);
+        // Only include files that have changes
+        if (unifiedDiff) {
+            result[fileId] = unifiedDiff;
+        }
+    }
+    return result;
+}
+/**
+ * Create a snapshot of current files for diff comparison
+ */
+export function createFilesSnapshot(files) {
+    return JSON.parse(JSON.stringify(files));
+}
+/**
+ * Parse unified diff to extract basic statistics
+ */
+export function parseUnifiedDiffStats(unifiedDiff) {
+    const lines = unifiedDiff.split('\n');
+    let additions = 0;
+    let deletions = 0;
+    for (const line of lines) {
+        if (line.startsWith('+') && !line.startsWith('+++')) {
+            additions++;
+        }
+        else if (line.startsWith('-') &&
+            !line.startsWith('---')) {
+            deletions++;
+        }
+    }
+    return { additions, deletions };
+}
+/**
+ * Combine multiple unified diffs into a single diff string
+ */
+export function combineUnifiedDiffs(unifiedDiffs) {
+    return Object.values(unifiedDiffs).join('\n');
+}

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "vzcode",
-  "version": "2.0.0",
+  "version": "2.3.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
-  "bin": "src/server/index.ts",
+  "bin": "dist/cli.js",
   "files": [
-    "dist/**",
-    "src/**"
+    "dist/**"
   ],
   "scripts": {
     "test": "vitest run",
@@ -15,8 +14,9 @@
     "prettier": "prettier {*.*,**/*.*} --write",
     "typecheck": "tsc --noEmit",
     "dev": "cross-env EDITOR_PORT=5173 concurrently \"npm run test-interactive\" \"vite\"",
-    "build": "vite build",
-    "build-release": "vite build --mode release",
+    "build": "vite build && npm run build:server",
+    "build:server": "tsc --project tsconfig.server.json",
+    "build-release": "vite build --mode release && npm run build:server",
     "preview": "concurrently \"npm run test-interactive\" \"vite preview\"",
     "tauri": "tauri",
     "tauri:dev": "tauri dev",
@@ -117,7 +117,7 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.1",
-    "@langchain/core": "^0.3.68",
+    "@langchain/core": "^0.3.70",
     "@langchain/openai": "^0.6.7",
     "@lezer/highlight": "^1.2.1",
     "@livekit/components-react": "^2.9.14",
@@ -127,17 +127,17 @@
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@teamwork/websocket-json-stream": "^2.0.0",
     "@typescript/vfs": "^1.6.1",
-    "@uiw/codemirror-theme-abcdef": "^4.24.2",
-    "@uiw/codemirror-theme-dracula": "^4.24.2",
-    "@uiw/codemirror-theme-eclipse": "^4.24.2",
-    "@uiw/codemirror-theme-github": "^4.24.2",
-    "@uiw/codemirror-theme-material": "^4.24.2",
-    "@uiw/codemirror-theme-nord": "^4.24.2",
-    "@uiw/codemirror-theme-okaidia": "^4.24.2",
-    "@uiw/codemirror-theme-xcode": "^4.24.2",
-    "@uiw/codemirror-themes": "^4.24.2",
+    "@uiw/codemirror-theme-abcdef": "^4.25.1",
+    "@uiw/codemirror-theme-dracula": "^4.25.1",
+    "@uiw/codemirror-theme-eclipse": "^4.25.1",
+    "@uiw/codemirror-theme-github": "^4.25.1",
+    "@uiw/codemirror-theme-material": "^4.25.1",
+    "@uiw/codemirror-theme-nord": "^4.25.1",
+    "@uiw/codemirror-theme-okaidia": "^4.25.1",
+    "@uiw/codemirror-theme-xcode": "^4.25.1",
+    "@uiw/codemirror-themes": "^4.25.1",
     "@valtown/codemirror-ts": "^2.3.1",
-    "@vizhub/runtime": "^4.3.0",
+    "@vizhub/runtime": "^4.4.0",
     "@vizhub/viz-types": "^0.4.0",
     "@vizhub/viz-utils": "^1.4.0",
     "body-parser": "^2.2.0",
@@ -153,13 +153,14 @@
     "diff2html": "^3.4.52",
     "dotenv": "^17.2.1",
     "editcodewithai": "^2.3.0",
-    "eslint-linter-browserify": "^9.32.0",
+    "eslint-linter-browserify": "^9.33.0",
     "express": "^5.1.0",
     "ignore": "^7.0.5",
     "json0-ot-diff": "^1.1.2",
     "jszip": "^3.10.1",
-    "livekit-server-sdk": "^2.13.1",
+    "livekit-server-sdk": "^2.13.2",
     "llm-code-format": "^3.0.0",
+    "lucide-react": "^0.539.0",
     "npm": "^11.5.2",
     "open": "^10.2.0",
     "prettier-plugin-svelte": "^3.4.0",
@@ -176,21 +177,21 @@
     "ws": "^8.18.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.32.0",
+    "@eslint/js": "^9.33.0",
     "@tauri-apps/cli": "^2.7.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@vitejs/plugin-react": "^5.0.0",
     "concurrently": "^9.2.0",
     "cross-env": "^10.0.0",
-    "eslint": "^9.32.0",
+    "eslint": "^9.33.0",
     "globals": "^16.3.0",
     "npm-check-updates": "^18.0.2",
     "prettier": "^3.6.2",
     "sass": "^1.90.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",
-    "vite": "^7.1.1",
+    "vite": "^7.1.2",
     "vitest": "^3.2.4"
   },
   "optionalDependencies": {

package/src/client/AIAssist/AIAssistCodeMirrorKeyMap.ts

@@ -1,42 +0,0 @@
-import { EditorView, keymap } from '@codemirror/view';
-import { ShareDBDoc, TabState } from '../../types';
-import { VizContent } from '@vizhub/viz-types';
-
-export const AIAssistCodeMirrorKeyMap = ({
-  shareDBDoc,
-  fileId,
-  tabList,
-}: {
-  shareDBDoc: ShareDBDoc<VizContent>;
-  fileId: string;
-  tabList: Array<TabState>;
-}) =>
-  keymap.of([
-    {
-      key: 'control-m',
-      run: (view: EditorView) => {
-        // if (
-        //   shareDBDoc.data.aiStreams === undefined ||
-        //   shareDBDoc.data.aiStreams[mostRecentStreamId] ===
-        //     null ||
-        //   shareDBDoc.data.aiStreams[mostRecentStreamId]
-        //     ?.AIStreamStatus.serverIsRunning !== true
-        // ) {
-
-        // TODO handle starting it
-        // startAIAssist({
-        //   view,
-        //   shareDBDoc,
-        //   fileId,
-        //   tabList,
-        // });
-
-        // TODO handle stopping it
-        // } else {
-        //   haltAIAssist(shareDBDoc);
-        // }
-
-        return true;
-      },
-    },
-  ]);

package/src/client/AIAssist/AIAssistWidget/index.tsx

@@ -1,135 +0,0 @@
-import { useCallback, useContext, useState } from 'react';
-import { OverlayTrigger, Tooltip } from '../../bootstrap';
-import { PaneId, TabState } from '../../../types';
-import { VizFileId } from '@vizhub/viz-types';
-import { VZCodeContext } from '../../VZCodeContext';
-import {
-  RequestId,
-  generateRequestId,
-} from '../../generateRequestId';
-import { SparklesSVG } from '../../Icons';
-import { startAIAssist } from '../startAIAssist';
-import { editorCacheKey } from '../../useEditorCache';
-import { Spinner } from '../Spinner';
-import './style.scss';
-
-const enableStopGeneration = false;
-
-export const AIAssistWidget = ({
-  aiAssistEndpoint,
-  aiAssistOptions,
-  aiAssistTooltipText = 'Start AI Assist',
-  aiAssistClickOverride,
-  activeFileId,
-  tabList,
-  paneId,
-}: {
-  aiAssistEndpoint: string;
-  aiAssistOptions: { [key: string]: string };
-  aiAssistTooltipText?: string;
-  aiAssistClickOverride?: () => void;
-  activeFileId: VizFileId;
-  tabList: Array<TabState>;
-  paneId: PaneId;
-}) => {
-  const {
-    shareDBDoc,
-    editorCache,
-    runPrettierRef,
-    runCodeRef,
-  } = useContext(VZCodeContext);
-
-  // The stream ID of the most recent request.
-  //  * If `null`, no request has been made yet.
-  //  * If non-null, a request has been made, and the
-  //    server is processing it.
-  const [aiStreamId, setAiStreamId] =
-    useState<RequestId | null>(null);
-
-  const handleClick = useCallback(async () => {
-    const isCurrentlyGenerationg = aiStreamId !== null;
-    if (isCurrentlyGenerationg) {
-      // TODO stop generation
-    } else {
-      const newAiStreamId = generateRequestId();
-      setAiStreamId(newAiStreamId);
-
-      // Wait for generation to finish.
-      await startAIAssist({
-        view: editorCache.get(
-          editorCacheKey(activeFileId, paneId),
-        ).editor,
-        shareDBDoc,
-        fileId: activeFileId,
-        tabList,
-        aiStreamId: newAiStreamId,
-        aiAssistEndpoint,
-        aiAssistOptions,
-      });
-
-      // Introduce a delay before running Prettier
-      // and the code, to give the ShareDB ops a chance
-      // to be applied and to propagate via WebSockets
-      // to the client. This is necessary because sometimes
-      // the ShareDB ops from the AI assist actually don't
-      // reach the client until AFTER the response comes back
-      // from `await startAIAssist`.
-      await new Promise((resolve) =>
-        setTimeout(resolve, 1000),
-      );
-
-      // Trigger a Prettier run after the AI Assist.
-      const runPrettier = runPrettierRef.current;
-      if (runPrettier !== null) {
-        runPrettier();
-      }
-
-      // Run the code after the AI Assist.
-      const runCode = runCodeRef.current;
-      if (runCode !== null) {
-        runCode();
-      }
-
-      // Handles the case that the user has started,
-      // stopped, and started again before the first request
-      // has finished, by comparing the current stream ID
-      // with the stream ID that was active when the request
-      // was started.
-      setAiStreamId((currentAIStreamId) =>
-        currentAIStreamId === newAiStreamId
-          ? null
-          : currentAIStreamId,
-      );
-    }
-  }, [activeFileId, paneId, aiStreamId]);
-
-  const showWidget = enableStopGeneration
-    ? true
-    : aiStreamId === null;
-
-  return (
-    <div className="vz-code-ai-assist-widget">
-      {aiStreamId ? (
-        <Spinner /> // Show spinner when aiStreamId is not null
-      ) : (
-        showWidget && (
-          <OverlayTrigger
-            placement="left"
-            overlay={
-              <Tooltip id="ai-assist-widget-tooltip">
-                {aiAssistTooltipText}
-              </Tooltip>
-            }
-          >
-            <i
-              className="icon-button icon-button-dark"
-              onClick={aiAssistClickOverride || handleClick}
-            >
-              <SparklesSVG />
-            </i>
-          </OverlayTrigger>
-        )
-      )}
-    </div>
-  );
-};

package/src/client/AIAssist/AIAssistWidget/style.scss

@@ -1,47 +0,0 @@
-.vz-code-ai-assist-widget {
-  position: absolute;
-  // bottom: 32px;
-  // right: 32px;
-  bottom: 16px;
-  right: 16px;
-  color: var(--vh-color-caution-01);
-}
-
-.vh-spinner {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-/* Fade in after a delay */
-/* https://stackoverflow.com/questions/29846224/css-animation-with-delay-and-opacity */
-.vh-spinner.fade-in svg {
-  animation: 1s linear 0s normal forwards 1 fadein;
-}
-
-@keyframes fadein {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-/* Infinite rotation */
-/* https://stackoverflow.com/questions/6410730/css-endless-rotation-animation */
-.vh-spinner-dots {
-  animation: rotate 3s linear infinite;
-}
-
-@keyframes rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/client/AIAssist/Spinner.jsx

@@ -1,76 +0,0 @@
-// From https://github.com/vizhub-core/vizhub/commit/6ca078935b9771dc6e05a6065bcfd522a4724dcf
-import { useEffect, useState } from 'react';
-import './AIAssistWidget/style.scss';
-
-// const minRadius = 4;
-// const maxRadius = 10;
-// const numDots = 8;
-// const wheelRadius = 40;
-// const round = (number) => Math.floor(number * 100) / 100;
-// const dots = [];
-// for (let i = 0; i < numDots; i++) {
-//   const angle = (i / numDots) * Math.PI * 2;
-//   dots.push({
-//     x: round(Math.cos(angle) * wheelRadius),
-//     y: round(Math.sin(angle) * wheelRadius),
-//     r: round(
-//       minRadius +
-//         (i / (numDots - 1)) * (maxRadius - minRadius),
-//     ),
-//   });
-// }
-// console.log(JSON.stringify(dots));
-
-// Hardcoded to avoid the computation.
-const dots = [
-  { x: 40, y: 0, r: 4 },
-  { x: 28.28, y: 28.28, r: 4.85 },
-  { x: 0, y: 40, r: 5.71 },
-  { x: -28.29, y: 28.28, r: 6.57 },
-  { x: -40, y: 0, r: 7.42 },
-  { x: -28.29, y: -28.29, r: 8.28 },
-  { x: -0.01, y: -40, r: 9.14 },
-  { x: 28.28, y: -28.29, r: 10 },
-];
-
-// From https://bl.ocks.org/curran/685fa8300650c4324d571c6b0ecc55de
-// And vizhub-v2/packages/neoFrontend/src/LoadingScreen/index.js
-export const Spinner = ({
-  height = 40,
-  fill = 'currentcolor',
-  fadeIn = true,
-}) => {
-  const [show, setShow] = useState(false);
-
-  // Avoid SSR of all the SVG elements.
-  useEffect(() => {
-    setShow(true);
-  }, []);
-
-  return (
-    show && (
-      <div
-        className={`vh-spinner${fadeIn ? ' fade-in' : ''}`}
-      >
-        <svg
-          height={height}
-          viewBox="0 0 100 100"
-          style={{ opacity: 1 }}
-        >
-          <g transform="translate(50, 50)" fill={fill}>
-            <g className="vh-spinner-dots">
-              {dots.map(({ x, y, r }, i) => (
-                <circle
-                  key={i}
-                  cx={x}
-                  cy={y}
-                  r={r}
-                ></circle>
-              ))}
-            </g>
-          </g>
-        </svg>
-      </div>
-    )
-  );
-};

package/src/client/AIAssist/formatFile.ts

@@ -1,27 +0,0 @@
-import { VizFile } from '@vizhub/viz-types';
-
-const maxFileNameLength = 100;
-const maxFileTextLength = 2000;
-
-// Formats a file for the prompt.
-export const formatFile = (
-  file: VizFile,
-  truncateText = true,
-) => {
-  const nameTruncated = file.name
-    ?.substring(0, maxFileNameLength)
-    .trim();
-
-  const textTruncated = (
-    truncateText
-      ? file.text?.substring(0, maxFileTextLength)
-      : file.text
-  ).trim();
-
-  return [
-    '`' + nameTruncated + '`:',
-    '```',
-    textTruncated,
-    '```',
-  ].join('\n');
-};

package/src/client/AIAssist/generateFilesContext.ts

@@ -1,25 +0,0 @@
-// import { File } from '../../types';
-
-// const maxFileNameLength = 100;
-// const maxFileTextLength = 2000;
-
-// export const generateFilesContext = (
-//   goodFiles: Array<File>,
-// ): 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/AIAssist/index.ts

@@ -1,2 +0,0 @@
-export { AIAssistWidget } from './AIAssistWidget';
-export { AIAssistCodeMirrorKeyMap } from './AIAssistCodeMirrorKeyMap';

package/src/client/AIAssist/startAIAssist.ts

@@ -1,95 +0,0 @@
-import { EditorView } from 'codemirror';
-import { ShareDBDoc, TabState } from '../../types';
-import {
-  VizFile,
-  VizFileId,
-  VizContent,
-} from '@vizhub/viz-types';
-import { RequestId } from '../generateRequestId';
-import { formatFile } from './formatFile';
-
-const debug = false;
-
-// Enables inclusion of code from open tabs as context.
-const enableTabContext = false;
-
-const defaultAIAssistEndpoint = '/ai-assist';
-
-export const startAIAssist = async ({
-  view,
-  shareDBDoc,
-  fileId,
-  tabList,
-  aiAssistEndpoint = defaultAIAssistEndpoint,
-  aiAssistOptions = {},
-  aiStreamId,
-}: {
-  view: EditorView;
-  shareDBDoc: ShareDBDoc<VizContent>;
-  fileId: VizFileId;
-  tabList: Array<TabState>;
-  aiAssistEndpoint?: string;
-  aiAssistOptions?: {
-    [key: string]: any;
-  };
-  aiStreamId: RequestId;
-}) => {
-  const currentFileName =
-    shareDBDoc.data.files[fileId].name;
-
-  // Generate a version of the current file with a
-  // <FILL_ME> in the middle.
-  const prefix = view.state.sliceDoc(
-    0,
-    view.state.selection.main.from,
-  );
-  const suffix = view.state.sliceDoc(
-    view.state.selection.main.to,
-  );
-  const combinedText = prefix + '<FILL_ME>' + suffix;
-  const currentFile = {
-    name: currentFileName,
-    text: combinedText,
-  };
-
-  const insertionCursor = view.state.selection.main.to;
-
-  // The main prompt is the current file, plus the context files.
-  let inputText = formatFile(currentFile, false);
-
-  if (enableTabContext) {
-    inputText +=
-      '\n\n' +
-      tabList
-        .filter((tabState) => tabState.fileId !== fileId)
-        .map((tabState) =>
-          formatFile(
-            shareDBDoc.data.files[tabState.fileId],
-          ),
-        )
-        .join('\n\n');
-  }
-
-  const response = await fetch(aiAssistEndpoint, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      ...aiAssistOptions,
-      inputText,
-      fileId,
-      insertionCursor,
-      aiStreamId,
-    }),
-  });
-
-  const responseJson = await response.json();
-
-  if (responseJson.error) {
-    console.error(
-      '[startAIAssist] error from server:',
-      responseJson.error,
-    );
-  }
-};