vzcode 2.0.0 → 2.3.0

package/src/client/VZSidebar/useDragAndDrop.tsx

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

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

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

package/src/client/featureFlags.ts

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

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

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

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

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

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

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

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

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