vzcode 2.3.0 → 2.4.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "vzcode",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
   "bin": "dist/cli.js",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src/**"
   ],
   "scripts": {
     "test": "vitest run",

package/src/cli.ts

@@ -0,0 +1,208 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+// Get the directory of the current module
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Function to find the Tauri binary
+function findTauriApp(): string | null {
+  // Look for the Tauri binary in common locations
+  const possiblePaths = [
+    // Development location (when running from source)
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'debug',
+      'vzcode',
+    ),
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'debug',
+      'vzcode.exe',
+    ),
+    // Release location (when running from built package)
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'release',
+      'vzcode',
+    ),
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'release',
+      'vzcode.exe',
+    ),
+    // MacOS app bundle
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'debug',
+      'vzcode.app',
+      'Contents',
+      'MacOS',
+      'vzcode',
+    ),
+    path.join(
+      __dirname,
+      '..',
+      'src-tauri',
+      'target',
+      'release',
+      'vzcode.app',
+      'Contents',
+      'MacOS',
+      'vzcode',
+    ),
+  ];
+
+  for (const binaryPath of possiblePaths) {
+    if (fs.existsSync(binaryPath)) {
+      return binaryPath;
+    }
+  }
+
+  return null;
+}
+
+// Function to launch the Tauri app
+function launchTauriApp(workingDirectory: string): void {
+  const tauriBinary = findTauriApp();
+
+  if (!tauriBinary) {
+    console.error(
+      'VZCode desktop app not found. Please build it first with: npm run tauri:build',
+    );
+    console.error(
+      'Falling back to launching browser version...',
+    );
+    launchBrowserVersion(workingDirectory);
+    return;
+  }
+
+  console.log(
+    `Launching VZCode desktop app from: ${workingDirectory}`,
+  );
+
+  // First start the server in the background
+  startServerInBackground(workingDirectory);
+
+  // Give the server a moment to start, then launch Tauri
+  setTimeout(() => {
+    const child = spawn(tauriBinary, [], {
+      cwd: workingDirectory,
+      stdio: 'inherit',
+      detached: true,
+    });
+
+    // Allow the parent process to exit while keeping the child running
+    child.unref();
+  }, 2000);
+}
+
+// Function to start the server in the background
+function startServerInBackground(
+  workingDirectory: string,
+): void {
+  // Start the server process in the background
+  const serverPath = path.join(
+    __dirname,
+    'server',
+    'index.js',
+  );
+  const serverChild = spawn('node', [serverPath], {
+    cwd: workingDirectory,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    detached: true,
+  });
+
+  // Don't block on the server process
+  serverChild.unref();
+
+  // Log server output for debugging
+  if (serverChild.stdout) {
+    serverChild.stdout.on('data', (data) => {
+      console.log('Server:', data.toString());
+    });
+  }
+
+  if (serverChild.stderr) {
+    serverChild.stderr.on('data', (data) => {
+      console.error('Server error:', data.toString());
+    });
+  }
+}
+
+// Fallback function to launch the browser version
+async function launchBrowserVersion(
+  workingDirectory: string,
+): Promise<void> {
+  const { default: open } = await import('open');
+  const serverModule = await import('./server/index.js');
+
+  // Note: The server/index.js will use process.cwd() automatically
+  // and we're already in the correct working directory
+  console.log(
+    `Starting VZCode server from: ${workingDirectory}`,
+  );
+}
+
+// Main CLI function
+function main(): void {
+  const workingDirectory = process.cwd();
+
+  // Parse command line arguments
+  const args = process.argv.slice(2);
+
+  if (args.includes('--help') || args.includes('-h')) {
+    console.log('VZCode - Multiplayer Code Editor');
+    console.log('');
+    console.log('Usage: vzcode [options]');
+    console.log('');
+    console.log('Options:');
+    console.log('  --help, -h     Show this help message');
+    console.log(
+      '  --browser      Force browser version instead of desktop app',
+    );
+    console.log(
+      '  --port=<port>  Specify port for server (default: 3030)',
+    );
+    console.log('');
+    console.log('Examples:');
+    console.log(
+      '  vzcode                    # Launch desktop app in current directory',
+    );
+    console.log(
+      '  vzcode --browser          # Launch browser version',
+    );
+    console.log(
+      '  vzcode --port=4000        # Start server on port 4000',
+    );
+    return;
+  }
+
+  if (args.includes('--browser')) {
+    launchBrowserVersion(workingDirectory);
+  } else {
+    launchTauriApp(workingDirectory);
+  }
+}
+
+// Run the CLI
+main();

package/src/client/AIAssist/AIAssistCodeMirrorKeyMap.ts

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

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

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

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

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

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

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

package/src/client/AIAssist/startAIAssist.ts

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