vzcode 2.2.0 → 2.3.0

package/src/client/VZKeyboardShortcutsDoc.tsx

@@ -1,148 +0,0 @@
-import React, { useCallback, useContext } from 'react';
-import { Button, Modal, Form } from './bootstrap';
-import { ThemeLabel, themes } from './themes';
-import { VZCodeContext } from './VZCodeContext';
-
-export const VZKeyboardShortcutsDoc = ({
-  enableUsernameField = true,
-}: {
-  // Feature flag to enable/disable username field
-  enableUsernameField?: boolean;
-}) => {
-  const {
-    isDocOpen,
-    closeDoc,
-
-    setTheme,
-
-    setUsername,
-  } = useContext(VZCodeContext);
-
-  const handleThemeChange = useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) => {
-      setTheme(event.target.value as ThemeLabel);
-    },
-    [],
-  );
-
-  return isDocOpen ? (
-    <Modal
-      className="vz-settings"
-      show={isDocOpen}
-      onHide={closeDoc}
-      animation={false}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>Keyboard Shortcuts</Modal.Title>
-      </Modal.Header>
-      <Modal.Body className="pt-1">
-        <Form.Group className="mb-3">
-          <Form.Text className="text-muted">
-            Keyboard shortcuts and interactive widgets for
-            quick actions
-          </Form.Text>
-        </Form.Group>
-        <Form.Group>
-          {/* <Form.Label>WINDOWS</Form.Label> */}
-          <ul>
-            <li>
-              <strong>
-                <kbd>Ctrl</kbd> + <kbd>S</kbd>
-              </strong>{' '}
-              or{' '}
-              <strong>
-                <kbd>Shift↑</kbd> + <kbd>Enter←</kbd>
-              </strong>{' '}
-              <br />
-              <span>Run and format code</span>
-            </li>
-            <li>
-              <strong>
-                <kbd>Alt</kbd> + Drag on a number
-              </strong>
-              <br />
-              <span>
-                Modify the number by dragging left or right
-              </span>
-            </li>
-            <li>
-              <strong>
-                <kbd>Alt</kbd> + Click on a hex color
-              </strong>
-              <br />
-              <span>
-                Open a color picker to modify the color
-              </span>
-            </li>
-            <li>
-              <strong>
-                <kbd>Alt</kbd> + <kbd>W</kbd>
-              </strong>{' '}
-              <br />
-              <span>Close the current tab</span>
-            </li>
-            <li>
-              <strong>
-                <kbd>Alt</kbd> + <kbd>N</kbd>
-              </strong>{' '}
-              or{' '}
-              <strong>
-                <kbd>Ctrl</kbd> + <kbd>Shift↑</kbd> +{' '}
-                <kbd>N</kbd>
-              </strong>{' '}
-              <br />
-              <span>Open the create file modal</span>
-            </li>
-            <li>
-              <strong>
-                <kbd>Alt</kbd> + <kbd>PgUp↑</kbd>
-              </strong>{' '}
-              <br />
-              <span>
-                Change the active tab to the previous one
-              </span>
-            </li>
-            <li>
-              <strong>
-                <kbd>Alt</kbd> + <kbd>PgDn↓</kbd>
-              </strong>{' '}
-              <br />
-              <span>
-                Change the active tab to the next one
-              </span>
-            </li>
-            <li>
-              <strong>Most VSCode Shortcuts</strong> <br />
-              See VSCode docs:{' '}
-              <a
-                href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf"
-                target="_blank"
-              >
-                Windows
-              </a>
-              ,{' '}
-              <a
-                href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf"
-                target="_blank"
-              >
-                MacOS
-              </a>
-              ,{' '}
-              <a
-                href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf"
-                target="_blank"
-              >
-                Linux
-              </a>
-            </li>
-          </ul>
-        </Form.Group>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button variant="primary" onClick={closeDoc}>
-          Done
-        </Button>
-      </Modal.Footer>
-    </Modal>
-  ) : null;
-};

package/src/client/VZLeft.tsx

@@ -1,28 +0,0 @@
-import { enableLiveKit } from './featureFlags';
-import { VZKeyboardShortcutsDoc } from './VZKeyboardShortcutsDoc';
-import { VZSettings } from './VZSettings';
-import { VZSidebar } from './VZSidebar';
-import { CreateDirModal } from './VZSidebar/CreateDirModal';
-import { CreateFileModal } from './VZSidebar/CreateFileModal';
-import { VoiceChatModal } from './VZSidebar/VoiceChatModal';
-
-// The middle portion of the VZCode environment, containing:
-// * The sidebar
-// * The settings modal
-// * The create file modal
-export const VZLeft = ({ enableUsernameField = true }) => {
-  return (
-    <div className="left">
-      <VZSidebar />
-      <VZSettings
-        enableUsernameField={enableUsernameField}
-      />
-      <VZKeyboardShortcutsDoc
-        enableUsernameField={enableUsernameField}
-      />
-      <CreateFileModal />
-      <CreateDirModal />
-      {enableLiveKit && <VoiceChatModal />}
-    </div>
-  );
-};

package/src/client/VZMiddle.tsx

@@ -1,172 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-import { SplitPaneResizeContext } from './SplitPaneResizeContext';
-import { TabList } from './TabList';
-import { CodeEditor } from './CodeEditor';
-import { ImageViewer } from './ImageViewer';
-import { CodeErrorOverlay } from './CodeErrorOverlay';
-import { PresenceNotifications } from './PresenceNotifications';
-import { AIAssistWidget } from './AIAssist/AIAssistWidget';
-import { VZCodeContext } from './VZCodeContext';
-import { RunCodeWidget } from './RunCodeWidget';
-import { InteractRule } from '@replit/codemirror-interact';
-import { EditorView } from '@codemirror/view';
-import { Diagnostic } from '@codemirror/lint';
-import { VizContent } from '@vizhub/viz-types';
-import { LeafPane } from '../types';
-import { isImageFile } from './utils/isImageFile';
-
-// TODO modify this to handle the SplitPane type
-// Recursive structure?
-// SplitPaneView
-// LeafPaneView
-const PaneView = ({
-  pane,
-  content,
-  customInteractRules,
-  enableAIAssist,
-  aiAssistEndpoint,
-  aiAssistOptions,
-  aiAssistTooltipText,
-  aiAssistClickOverride,
-  aiCopilotEndpoint,
-  esLintSource,
-}) => {
-  // This prevents the CodeEditor from rendering
-  // during SSR.
-  const [isClient, setIsClient] = useState(false);
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
-  // TODO something like
-  // return pane.type === 'leafPane' ? (
-  //   <LeafPaneView />
-  // ) : (
-  //   <SplitPaneView />
-  // );
-
-  // This should go in LeafPaneView
-  return (
-    <>
-      <TabList
-        activeFileId={pane.activeFileId}
-        tabList={pane.tabList}
-      />
-      {isClient &&
-        content &&
-        pane.activeFileId &&
-        (() => {
-          // Get the active file to determine if it's an image
-          const activeFile =
-            content.files[pane.activeFileId];
-          const shouldShowImageViewer =
-            activeFile && isImageFile(activeFile.name);
-
-          return shouldShowImageViewer ? (
-            <ImageViewer />
-          ) : (
-            <CodeEditor
-              customInteractRules={customInteractRules}
-              aiCopilotEndpoint={aiCopilotEndpoint}
-              esLintSource={esLintSource}
-            />
-          );
-        })()}
-      {isClient &&
-      enableAIAssist &&
-      content &&
-      pane.activeFileId ? (
-        <AIAssistWidget
-          aiAssistEndpoint={aiAssistEndpoint}
-          aiAssistOptions={aiAssistOptions}
-          aiAssistTooltipText={aiAssistTooltipText}
-          aiAssistClickOverride={aiAssistClickOverride}
-          paneId={pane.id}
-          activeFileId={pane.activeFileId}
-          tabList={pane.tabList}
-        />
-      ) : null}
-      <RunCodeWidget />
-    </>
-  );
-};
-
-// The middle portion of the VZCode environment, containing:
-// * The list of tabs at the top
-// * The code editor itself
-// * The code error overlay
-// * The presence notifications
-// * The UI for AI Assist
-export const VZMiddle = ({
-  enableAIAssist = false,
-  aiAssistEndpoint,
-  aiAssistOptions,
-  aiAssistTooltipText,
-  aiAssistClickOverride,
-  aiCopilotEndpoint,
-  aiChatEndpoint,
-  aiChatOptions,
-  customInteractRules,
-  esLintSource,
-}: {
-  enableAIAssist?: boolean;
-  aiAssistEndpoint?: string;
-  aiAssistOptions?: { [key: string]: string };
-  aiAssistTooltipText?: string;
-  aiAssistClickOverride?: () => void;
-  aiCopilotEndpoint?: string;
-  aiChatEndpoint?: string;
-  aiChatOptions?: { [key: string]: any };
-  customInteractRules?: Array<InteractRule>;
-  esLintSource: (
-    view: EditorView,
-  ) => Promise<readonly Diagnostic[]>;
-}) => {
-  const { codeEditorWidth } = useContext(
-    SplitPaneResizeContext,
-  );
-
-  const {
-    content,
-    localPresence,
-    docPresence,
-    pane,
-    activePane,
-    errorMessage,
-  } = useContext(VZCodeContext);
-
-  if (activePane.type !== 'leafPane') {
-    throw new Error('Expected leafPane');
-  }
-  // True if the editor panes should be shown.
-  const shouldShowEditorPanes: boolean =
-    activePane.activeFileId !== null;
-
-  return shouldShowEditorPanes ? (
-    <div
-      className="middle"
-      style={{ width: codeEditorWidth + 'px' }}
-    >
-      <PaneView
-        pane={pane}
-        content={content}
-        customInteractRules={customInteractRules}
-        enableAIAssist={enableAIAssist}
-        aiAssistEndpoint={aiAssistEndpoint}
-        aiAssistOptions={aiAssistOptions}
-        aiAssistTooltipText={aiAssistTooltipText}
-        aiAssistClickOverride={aiAssistClickOverride}
-        aiCopilotEndpoint={aiCopilotEndpoint}
-        esLintSource={esLintSource}
-      />
-      <CodeErrorOverlay
-        errorMessage={errorMessage}
-        content={content}
-      />
-      <PresenceNotifications
-        docPresence={docPresence}
-        localPresence={localPresence}
-      />
-    </div>
-  ) : null;
-};

package/src/client/VZResizer/index.tsx

@@ -1,128 +0,0 @@
-// The split pane resizer component.
-// This is what users drag to resize the split pane.
-import {
-  useContext,
-  useEffect,
-  useCallback,
-  useRef,
-} from 'react';
-import {
-  Side,
-  SplitPaneResizeContext,
-} from '../SplitPaneResizeContext';
-import { VZCodeContext } from '../VZCodeContext';
-import './styles.scss';
-
-// This is the width of the resizer interaction surface.
-// On this surface, the cursor changes to a resize cursor.
-const resizerInteractionSurfaceWidth = 20;
-
-// Expand while dragging to make it easier to hit.
-// Without this, various sidebar elements get hovered on and change style.
-const resizerInteractionSurfaceWidthWhileDragging = 200;
-
-// This is the width of the resizer visible area.
-// This is the part of the resizer that is visible to the user.
-const resizerThumbWidth = 4;
-
-export const VZResizer = ({
-  side,
-  isSidebarVisible = true,
-}: {
-  side: Side;
-  isSidebarVisible?: boolean;
-}) => {
-  const {
-    sidebarWidth,
-    codeEditorWidth,
-    moveSplitPane,
-    isDraggingRight,
-    isDraggingLeft,
-    setIsDragging,
-  } = useContext(SplitPaneResizeContext);
-
-  // If there is no active file, don't render the resizer
-  // for the right side.
-  const { activePane } = useContext(VZCodeContext);
-
-  const shouldRenderResizer =
-    side === 'left' || activePane.activeFileId;
-
-  const previousClientX = useRef<number>(0);
-
-  const onMouseDown = useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-      previousClientX.current = event.clientX;
-      setIsDragging(true, side);
-      document.body.style.cursor = 'col-resize';
-    },
-    [setIsDragging, side],
-  );
-
-  const onMouseMove = useCallback(
-    (event: MouseEvent) => {
-      event.preventDefault();
-      const movementX =
-        event.clientX - previousClientX.current;
-      previousClientX.current = event.clientX;
-      moveSplitPane(movementX, side);
-    },
-    [moveSplitPane, side],
-  );
-
-  const onMouseUp = useCallback(() => {
-    setIsDragging(false, side);
-    document.body.style.cursor = 'default';
-  }, [setIsDragging, side]);
-
-  // Is the resizer currently being dragged?
-  const isDragging =
-    (side === 'left' && isDraggingLeft) ||
-    (side === 'right' && isDraggingRight);
-
-  useEffect(() => {
-    if (isDragging) {
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
-      return () => {
-        document.removeEventListener(
-          'mousemove',
-          onMouseMove,
-        );
-        document.removeEventListener('mouseup', onMouseUp);
-      };
-    }
-  }, [isDragging, onMouseMove, onMouseUp]);
-
-  const resizerWidth = isDragging
-    ? resizerInteractionSurfaceWidthWhileDragging
-    : resizerInteractionSurfaceWidth;
-
-  const left =
-    (side === 'left'
-      ? sidebarWidth
-      : isSidebarVisible
-        ? sidebarWidth + codeEditorWidth
-        : codeEditorWidth) -
-    resizerWidth / 2;
-
-  return shouldRenderResizer ? (
-    <div
-      className="vz-resizer"
-      onMouseDown={onMouseDown}
-      style={{
-        left: left + resizerWidth / 2 - 1.5,
-        width: resizerWidth,
-      }}
-    >
-      <div
-        className="vz-resizer-thumb"
-        style={{
-          left: resizerThumbWidth / 2 - 1.5,
-          width: resizerThumbWidth,
-        }}
-      />
-    </div>
-  ) : null;
-};

package/src/client/VZResizer/styles.scss

@@ -1,33 +0,0 @@
-.vz-resizer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-
-  // Needed in order to make the resizer hoverable
-  // when there is another div on top of it.
-  z-index: 1;
-
-  // Useful for debugging:
-  // background-color: #ffd0007c;
-}
-
-.vz-resizer:hover {
-  cursor: col-resize;
-}
-
-.vz-resizer .vz-resizer-thumb {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-
-  // Transition the background color after a delay.
-  // First value is the duration of the transition,
-  // second value is the delay before the transition starts.
-  // Tuned to roughly match VSCode's resizer.
-  transition: background-color 0.15s 0.25s;
-}
-
-.vz-resizer:hover .vz-resizer-thumb {
-  background-color: #0078d4;
-}

package/src/client/VZRight.tsx

@@ -1,113 +0,0 @@
-import {
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
-import {
-  createRuntime,
-  VizHubRuntime,
-} from '@vizhub/runtime';
-import BuildWorker from './buildWorker?worker';
-import { VZCodeContext } from './VZCodeContext';
-import { vizFilesToFileCollection } from '@vizhub/viz-utils';
-import { VizContent } from '@vizhub/viz-types';
-
-// Extend VizContent type to include hardRerun property
-type ExtendedVizContent = VizContent & {
-  // TODO remove this, use the runId property from VizContent instead.
-  // If `VizContent.runId` changes, it will trigger a hard rerun.
-  hardRerun?: boolean;
-};
-
-const enableIframe = true;
-
-export const VZRight = () => {
-  const runtimeRef = useRef<VizHubRuntime | null>(null);
-  const isFirstRunRef = useRef(true);
-  const lastRunIdRef = useRef<string | undefined>(
-    undefined,
-  );
-
-  // Get access to the current files.
-  const {
-    content,
-    handleRuntimeError,
-    clearRuntimeError,
-    iframeRef,
-  } = useContext(VZCodeContext);
-
-  const files = useMemo(
-    () =>
-      content
-        ? vizFilesToFileCollection(content.files)
-        : null,
-    [content?.files],
-  );
-
-  const isInteracting = content?.isInteracting || false;
-  const runId = content?.runId;
-  const hardRerun =
-    (content as ExtendedVizContent)?.hardRerun || false;
-
-  // Check if runId has changed
-  const runIdChanged = runId !== lastRunIdRef.current;
-  if (runIdChanged) {
-    lastRunIdRef.current = runId;
-  }
-
-  useEffect(() => {
-    if (!files) return;
-
-    // Initialize the runtime only once
-    if (!runtimeRef.current && iframeRef.current) {
-      const worker = new BuildWorker();
-      runtimeRef.current = createRuntime({
-        iframe: iframeRef.current,
-        worker,
-        setBuildErrorMessage: (error) => {
-          if (error) {
-            console.error('Build error:', error);
-          }
-        },
-        handleRuntimeError,
-      });
-    }
-
-    // Run code in the iframe when:
-    // 1. First run
-    // 2. User is interacting with widgets
-    // 3. runId changed (indicating AI finished or other trigger)
-    if (
-      isFirstRunRef.current ||
-      isInteracting ||
-      runIdChanged
-    ) {
-      // Clear runtime errors when new code runs
-      clearRuntimeError();
-
-      runtimeRef.current?.run({
-        files,
-        // Enable hot reloading when interacting, disable when runId changed without interaction
-        enableHotReloading: isInteracting,
-        enableSourcemap: true,
-        vizId: 'example-viz',
-      });
-      isFirstRunRef.current = false;
-    }
-
-    // TODO use refs, and cleanup on unmount
-    // return () => {
-    //   runtime.cleanup();
-    //   worker.terminate();
-    // };
-  }, [files, isInteracting, runIdChanged, hardRerun]);
-
-  return (
-    <div className="right">
-      {enableIframe ? (
-        <iframe ref={iframeRef}></iframe>
-      ) : null}
-    </div>
-  );
-};