vzcode 2.3.0 → 2.4.0

package/src/client/VZSidebar/useDragAndDrop.tsx

@@ -0,0 +1,408 @@
+import { useState, useContext, useCallback } from 'react';
+import { VZCodeContext } from '../VZCodeContext';
+import './styles.scss';
+
+interface FileSystemEntry {
+  isFile: boolean;
+  isDirectory: boolean;
+  name: string;
+  createReader: () => FileSystemDirectoryReader;
+  file: (callback: (file: File) => void) => void;
+}
+
+interface FileSystemDirectoryReader {
+  readEntries: (
+    callback: (entries: FileSystemEntry[]) => void,
+  ) => void;
+}
+
+const DEBUG = false;
+
+export const useDragAndDrop = () => {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const { createFile } = useContext(VZCodeContext);
+
+  const handleDragEnter = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      DEBUG && console.log('[useDragAndDrop] Drag Enter');
+      setIsDragOver(true);
+    },
+    [],
+  );
+
+  const handleDragOver = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      DEBUG && console.log('[useDragAndDrop] Drag Over');
+      if (!isDragOver) setIsDragOver(true);
+    },
+    [isDragOver],
+  );
+
+  const handleDragLeave = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      DEBUG && console.log('[useDragAndDrop] Drag Leave');
+      setIsDragOver(false);
+    },
+    [],
+  );
+
+  const isTextFile = (file: File): boolean => {
+    // Add more text file types as needed
+    const textTypes = [
+      'text/',
+      'application/json',
+      'application/javascript',
+      'application/typescript',
+      'application/xml',
+      'application/x-httpd-php',
+    ];
+    const isText =
+      textTypes.some((type) =>
+        file.type.startsWith(type),
+      ) ||
+      file.name.match(
+        /\.(txt|js|jsx|ts|tsx|md|css|scss|html|xml|json|php|py|rb|java|c|cpp|h|hpp)$/i,
+      ) !== null;
+
+    DEBUG &&
+      console.log(
+        `[useDragAndDrop] File ${file.name} is${isText ? '' : ' not'} a text file`,
+      );
+    return isText;
+  };
+
+  const isImageFile = (file: File): boolean => {
+    const imageTypes = ['image/'];
+    const isImage =
+      imageTypes.some((type) =>
+        file.type.startsWith(type),
+      ) ||
+      file.name.match(
+        /\.(png|jpg|jpeg|gif|bmp|svg|webp)$/i,
+      ) !== null;
+
+    DEBUG &&
+      console.log(
+        `[useDragAndDrop] File ${file.name} is${isImage ? '' : ' not'} an image file`,
+      );
+    return isImage;
+  };
+
+  const readFileAsText = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      DEBUG &&
+        console.log(
+          `[useDragAndDrop] Reading file: ${file.name}`,
+        );
+
+      if (!isTextFile(file)) {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Rejected non-text file: ${file.name}`,
+          );
+        reject(
+          new Error(`File ${file.name} is not a text file`),
+        );
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target?.result) {
+          DEBUG &&
+            console.log(
+              `[useDragAndDrop] Successfully read file: ${file.name}`,
+            );
+          resolve(e.target.result as string);
+        } else {
+          DEBUG &&
+            console.log(
+              `[useDragAndDrop] Failed to read file: ${file.name}`,
+            );
+          reject(
+            new Error(`Failed to read file ${file.name}`),
+          );
+        }
+      };
+      reader.onerror = () => {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Error reading file: ${file.name}`,
+          );
+        reject(
+          new Error(`Error reading file ${file.name}`),
+        );
+      };
+      reader.readAsText(file);
+    });
+  };
+
+  const readImageAsBase64 = (
+    file: File,
+  ): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      DEBUG &&
+        console.log(
+          `[useDragAndDrop] Reading image file: ${file.name}`,
+        );
+
+      if (!isImageFile(file)) {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Rejected non-image file: ${file.name}`,
+          );
+        reject(
+          new Error(
+            `File ${file.name} is not an image file`,
+          ),
+        );
+        return;
+      }
+
+      // For SVG files, read as text if they're text-based
+      if (
+        file.type === 'image/svg+xml' ||
+        file.name.toLowerCase().endsWith('.svg')
+      ) {
+        const textReader = new FileReader();
+        textReader.onload = (e) => {
+          if (e.target?.result) {
+            DEBUG &&
+              console.log(
+                `[useDragAndDrop] Successfully read SVG file as text: ${file.name}`,
+              );
+            resolve(e.target.result as string);
+          } else {
+            reject(
+              new Error(
+                `Failed to read SVG file ${file.name}`,
+              ),
+            );
+          }
+        };
+        textReader.onerror = () =>
+          reject(
+            new Error(
+              `Error reading SVG file ${file.name}`,
+            ),
+          );
+        textReader.readAsText(file);
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target?.result) {
+          DEBUG &&
+            console.log(
+              `[useDragAndDrop] Successfully read image file: ${file.name}`,
+            );
+          // Return just the base64 part without the data URL prefix
+          const base64 = (e.target.result as string).split(
+            ',',
+          )[1];
+          resolve(base64);
+        } else {
+          DEBUG &&
+            console.log(
+              `[useDragAndDrop] Failed to read image file: ${file.name}`,
+            );
+          reject(
+            new Error(
+              `Failed to read image file ${file.name}`,
+            ),
+          );
+        }
+      };
+      reader.onerror = () => {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Error reading image file: ${file.name}`,
+          );
+        reject(
+          new Error(
+            `Error reading image file ${file.name}`,
+          ),
+        );
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+
+  const processEntry = async (
+    entry: FileSystemEntry,
+    path: string,
+  ): Promise<void> => {
+    try {
+      DEBUG &&
+        console.log(
+          `[useDragAndDrop] Processing entry: ${entry.name} at path: ${path}`,
+        );
+
+      if (entry.isFile) {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Processing file: ${entry.name}`,
+          );
+        entry.file(async (file) => {
+          try {
+            if (isImageFile(file)) {
+              const content = await readImageAsBase64(file);
+              DEBUG &&
+                console.log(
+                  `[useDragAndDrop] Creating image file: ${path}${file.name}`,
+                );
+              createFile(`${path}${file.name}`, content);
+            } else {
+              const content = await readFileAsText(file);
+              DEBUG &&
+                console.log(
+                  `[useDragAndDrop] Creating text file: ${path}${file.name}`,
+                );
+              createFile(`${path}${file.name}`, content);
+            }
+          } catch (error) {
+            console.error(
+              `Error processing file ${file.name}:`,
+              error,
+            );
+          }
+        });
+      } else if (entry.isDirectory) {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Processing directory: ${entry.name}`,
+          );
+        return new Promise<void>((resolve) => {
+          const dirReader = entry.createReader();
+          const readEntries = () => {
+            dirReader.readEntries(async (entries) => {
+              if (entries.length === 0) {
+                DEBUG &&
+                  console.log(
+                    `[useDragAndDrop] Finished reading directory: ${entry.name}`,
+                  );
+                resolve();
+                return;
+              }
+
+              const newPath = `${path}${entry.name}/`;
+              DEBUG &&
+                console.log(
+                  `[useDragAndDrop] Reading ${entries.length} entries in directory: ${newPath}`,
+                );
+              await Promise.all(
+                entries.map((entry) =>
+                  processEntry(entry, newPath),
+                ),
+              );
+              readEntries(); // Continue reading if there are more entries
+            });
+          };
+          readEntries();
+        });
+      }
+    } catch (error) {
+      console.error(
+        `Error processing entry ${entry.name}:`,
+        error,
+      );
+    }
+  };
+
+  const handleDrop = useCallback(
+    async (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      DEBUG &&
+        console.log('[useDragAndDrop] Drop event started');
+      setIsDragOver(false);
+      setIsProcessing(true);
+
+      try {
+        const items = event.dataTransfer.items;
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Processing ${items.length} dropped items`,
+          );
+        const entries: FileSystemEntry[] = [];
+
+        for (const item of Array.from(items)) {
+          // Try webkit first, then fallback to other methods
+          const entry =
+            item.webkitGetAsEntry?.() ||
+            (item as any).getAsEntry?.() ||
+            (item as any).createEntry?.();
+
+          if (entry) {
+            DEBUG &&
+              console.log(
+                `[useDragAndDrop] Got entry for: ${entry.name}`,
+              );
+            entries.push(entry as FileSystemEntry);
+          } else if (item.kind === 'file') {
+            const file = item.getAsFile();
+            if (file) {
+              DEBUG &&
+                console.log(
+                  `[useDragAndDrop] Processing dropped file: ${file.name}`,
+                );
+              try {
+                if (isImageFile(file)) {
+                  const content =
+                    await readImageAsBase64(file);
+                  createFile(file.name, content);
+                } else {
+                  const content =
+                    await readFileAsText(file);
+                  createFile(file.name, content);
+                }
+              } catch (error) {
+                console.error(
+                  `Error processing file ${file.name}:`,
+                  error,
+                );
+              }
+            }
+          }
+        }
+
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Processing ${entries.length} entries`,
+          );
+        await Promise.all(
+          entries.map((entry) => processEntry(entry, '')),
+        );
+      } catch (error) {
+        console.error(
+          'Error processing dropped items:',
+          error,
+        );
+      } finally {
+        DEBUG &&
+          console.log(
+            '[useDragAndDrop] Drop processing completed',
+          );
+        setIsProcessing(false);
+      }
+    },
+    [createFile],
+  );
+
+  return {
+    isDragOver,
+    isProcessing,
+    handleDragEnter,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+  };
+};

package/src/client/bootstrap.ts

@@ -0,0 +1,26 @@
+// A central place where we import what we need from react-bootstrap.
+// This strange looking way of importing makes it work with Vite's SSR build.
+// Otherwise we get `Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import`
+import Form from 'react-bootstrap/cjs/Form.js';
+import Button from 'react-bootstrap/cjs/Button.js';
+import ButtonGroup from 'react-bootstrap/cjs/ButtonGroup.js';
+import ToggleButton from 'react-bootstrap/cjs/ToggleButton.js';
+import Modal from 'react-bootstrap/cjs/Modal.js';
+import OverlayTrigger from 'react-bootstrap/cjs/OverlayTrigger.js';
+import Tooltip from 'react-bootstrap/cjs/Tooltip.js';
+
+// Pull in custom CSS from vizhub-ui.
+import 'vizhub-ui/dist/vizhub-ui.css';
+
+// Pull in Bootstrap Icons CSS.
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
+export {
+  Form,
+  Button,
+  ButtonGroup,
+  ToggleButton,
+  Modal,
+  OverlayTrigger,
+  Tooltip,
+};

package/src/client/buildWorker.ts

@@ -0,0 +1,3 @@
+// @ts-ignore TODO fix this type error
+import { initWorker } from '@vizhub/runtime/worker';
+initWorker();

package/src/client/featureFlags.ts

@@ -0,0 +1,8 @@
+export const enableLiveKit =
+  import.meta.env.VITE_ENABLE_LIVEKIT === 'true';
+
+export const enableAIChat = true;
+
+export const enableDiffView = true;
+
+export const enableAskMode = false;

package/src/client/generateRequestId.ts

@@ -0,0 +1,6 @@
+export type RequestId = string;
+
+// Generates a random string of digits.
+// e.g. "6891835662438279"
+export const generateRequestId = (): RequestId =>
+  (Math.random() + '').slice(2);

package/src/client/getFileTree.ts

@@ -0,0 +1,53 @@
+// Inspired by
+
+import { FileTree } from '../types';
+import { VizFiles } from '@vizhub/viz-types';
+
+// https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/FileTree/getFileTree.js
+export const getFileTree = (files: VizFiles): FileTree => {
+  const tree: FileTree = { name: 'files' };
+  for (const fileId of Object.keys(files)) {
+    const file = files[fileId];
+    const path = file.name.split('/');
+    const n = path.length;
+    let node = tree;
+
+    // Walk the path.
+    for (let i = 0; i < n - 1; i++) {
+      // Search for an existing child.
+      let child: FileTree | undefined;
+      const name = path[i];
+      if (node.children) {
+        for (let j = 0; j < node.children.length; j++) {
+          const nodeChild = node.children[j];
+          if (nodeChild.name === name) {
+            child = nodeChild;
+            break;
+          }
+        }
+      }
+
+      // Create a child if none with matching name exists.
+      if (!child) {
+        child = {
+          name: path[i],
+          path: path.slice(0, i + 1).join('/'),
+        };
+        (node.children || (node.children = [])).push(child);
+      }
+
+      node = child;
+    }
+
+    // file.text being `null` signifies
+    // that this is a directory.
+    if (file.text !== null) {
+      (node.children || (node.children = [])).push({
+        name: path[n - 1],
+        file: file as any, // Type assertion to resolve compatibility issue
+        fileId,
+      });
+    }
+  }
+  return tree;
+};

package/src/client/index.ts

@@ -0,0 +1,19 @@
+export type { ThemeLabel, ThemeOption } from './themes';
+export type { EditorCache } from './useEditorCache';
+
+export { VZCodeProvider } from './VZCodeContext';
+export { VZSidebar } from './VZSidebar';
+export { VZSettings } from './VZSettings';
+export { VZKeyboardShortcutsDoc } from './VZKeyboardShortcutsDoc';
+export { VZResizer } from './VZResizer';
+export { VZLeft } from './VZLeft';
+export { VZMiddle } from './VZMiddle';
+export {
+  SplitPaneResizeProvider,
+  SplitPaneResizeContext,
+} from './SplitPaneResizeContext';
+export { useSubmitOperation } from './useSubmitOperation';
+export { shouldTriggerRun } from './shouldTriggerRun';
+export { mergeFileChanges } from 'editcodewithai';
+
+export * from './Icons';

package/src/client/main.jsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+);

package/src/client/presenceColor.ts

@@ -0,0 +1,8 @@
+import ColorHash from 'color-hash';
+
+export const assignUserColor = (name: string): string => {
+  const userColor = new ColorHash({ lightness: 0.75 })
+    .rgb(name)
+    .join(',');
+  return userColor;
+};

package/src/client/shouldTriggerRun.ts

@@ -0,0 +1,31 @@
+// This module is responsible for checking
+// keyboard events and determining whether
+// a run should be triggered or not.
+export const shouldTriggerRun = (event: KeyboardEvent) => {
+  const isMac = /Mac|iMac|MacBook/i.test(
+    navigator.userAgent,
+  );
+  const ctrlOrCmd = isMac ? event.metaKey : event.ctrlKey;
+
+  if (ctrlOrCmd && event.key === 's') {
+    // Save
+    return true;
+  } else if (
+    event.key === 'F5' || // Run (F5)
+    (ctrlOrCmd && event.key === 'Enter') || // Ctrl+Enter or Cmd+Enter
+    (event.shiftKey && event.key === 'Enter') || // Shift+Enter
+    // Let's not override the browser's default behavior for refresh page.
+    // (ctrlOrCmd && event.key === 'r') || // Ctrl+R or Cmd+R
+
+    (event.altKey && event.key === 'Enter') || // Alt+Enter
+    (ctrlOrCmd &&
+      event.shiftKey &&
+      (event.key === 'B' || event.key === 'b')) || // Ctrl+Shift+B or Cmd+Shift+B
+    (ctrlOrCmd && event.shiftKey && event.key === 'F10') || // Ctrl+Shift+F10 or Cmd+Shift+F10
+    event.key === 'F8' ||
+    event.key === 'F9'
+  ) {
+    return true;
+  }
+  return false;
+};

package/src/client/sortFileTree.ts

@@ -0,0 +1,21 @@
+// Recursively sorts the file tree in-place.
+// Sorts first to group directories before files.
+// Sorts second alphabetically.
+
+import { FileTree, FileTreeFile } from '../types';
+
+// From https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/FileTree/sortFileTree.js
+export const sortFileTree = (fileTree: FileTree) => {
+  if (fileTree.children) {
+    fileTree.children.sort((a, b) => {
+      const aIsFile = (a as FileTreeFile).file ? 1 : 0;
+      const bIsFile = (b as FileTreeFile).file ? 1 : 0;
+      // Directories before files.
+      return (
+        aIsFile - bIsFile || a.name.localeCompare(b.name)
+      );
+    });
+    fileTree.children.forEach(sortFileTree);
+  }
+  return fileTree;
+};

package/src/client/tabsSearchParameters.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, test } from 'vitest';
+import {
+  encodeTabs,
+  decodeTabs,
+  delimiter,
+} from './tabsSearchParameters';
+import { VizContent } from '@vizhub/viz-types';
+
+describe('tabsSearchParameters', () => {
+  test.each([
+    {
+      name: 'empty',
+      tabStateParams: {},
+      tabList: [],
+      activeFileId: null,
+    },
+    {
+      name: 'single active tab',
+      tabStateParams: {
+        file: 'index.html',
+      },
+
+      tabList: [{ fileId: '789' }],
+      activeFileId: '789',
+    },
+    {
+      name: 'multiple tabs, active tab first',
+      tabStateParams: {
+        file: 'index.html',
+        tabs: `index.html${delimiter}README.md${delimiter}index.js`,
+      },
+      tabList: [
+        { fileId: '789' },
+        { fileId: '456' },
+        { fileId: '123' },
+      ],
+      activeFileId: '789',
+    },
+    {
+      name: 'multiple tabs, active tab in middle',
+      tabStateParams: {
+        file: 'README.md',
+        tabs: `index.html${delimiter}README.md${delimiter}index.js`,
+      },
+      tabList: [
+        { fileId: '789' },
+        { fileId: '456' },
+        { fileId: '123' },
+      ],
+      activeFileId: '456',
+    },
+  ])(
+    'round trip: $name',
+    ({ tabStateParams, tabList, activeFileId }) => {
+      // Fake Content object
+      const content: VizContent = {
+        id: 'test-viz-id', // Add required id property
+        files: {
+          '123': { name: 'index.js', text: 'abc' },
+          '456': { name: 'README.md', text: 'def' },
+          '789': { name: 'index.html', text: 'ghi' },
+        },
+      };
+
+      const decoded = decodeTabs({
+        tabStateParams,
+        content,
+      });
+      const expected = { tabList, activeFileId };
+      expect(decoded).toStrictEqual(expected);
+      const encoded = encodeTabs({
+        tabList,
+        activeFileId,
+        content,
+      });
+      expect(encoded).toEqual(tabStateParams);
+    },
+  );
+});