vzcode 2.3.0 → 2.4.0

package/src/client/PresenceNotifications/index.tsx

@@ -0,0 +1,158 @@
+import { useState, useEffect, useRef } from 'react';
+import { PresenceId, Username } from '../../types';
+import './style.scss';
+
+type PresenceNotification = {
+  user: Username;
+  join: boolean;
+  presenceId: PresenceId;
+};
+
+export const extractTimestampFromId = (
+  id: string,
+): number => {
+  const [timestampPart] = id.split('-');
+  return parseInt(timestampPart, 36);
+};
+
+export const shouldShowNotification = (
+  remotePresenceId: PresenceId,
+  localPresenceId: PresenceId,
+): boolean => {
+  const remotePresenceTimestamp = extractTimestampFromId(
+    remotePresenceId,
+  );
+  const localPresenceTimestamp =
+    extractTimestampFromId(localPresenceId);
+  return remotePresenceTimestamp > localPresenceTimestamp;
+};
+
+export const handleJoin = (
+  presenceId: PresenceId,
+  username: Username,
+  alreadyJoined: React.MutableRefObject<
+    Map<PresenceId, Username>
+  >,
+  setPresenceNotifications: any,
+) => {
+  if (!alreadyJoined.current.has(presenceId)) {
+    alreadyJoined.current.set(presenceId, username);
+    setPresenceNotifications(
+      (prev: PresenceNotification[]) => [
+        ...prev,
+        { user: username, join: true, presenceId },
+      ],
+    );
+  } else {
+    alreadyJoined.current.set(presenceId, username); // Update in case username changed
+  }
+};
+
+export const handleLeave = (
+  presenceId: PresenceId,
+  alreadyJoined: React.MutableRefObject<
+    Map<PresenceId, Username>
+  >,
+  setPresenceNotifications: any,
+) => {
+  const user = alreadyJoined.current.get(presenceId);
+  if (user) {
+    alreadyJoined.current.delete(presenceId);
+    setPresenceNotifications(
+      (prev: PresenceNotification[]) => [
+        ...prev,
+        { user, join: false, presenceId },
+      ],
+    );
+  }
+};
+
+export const PresenceNotifications = ({
+  docPresence,
+  localPresence,
+}: {
+  docPresence?: any;
+  localPresence?: any;
+}) => {
+  // `presenceNotifications`:
+  // - State variable containing a list of user presence notifications.
+  // - Each notification indicates if a user has joined or left a session.
+  const [presenceNotifications, setPresenceNotifications] =
+    useState<PresenceNotification[]>([]);
+
+  // `alreadyJoined`:
+  // - Ref (persistent across re-renders) containing a Map.
+  // - Map's key: `PresenceId` (unique identifier for user's presence).
+  // - Map's value: `Username` of the associated user.
+  // - Tracks users who have joined the session and their possible username changes.
+  const alreadyJoined = useRef<Map<PresenceId, Username>>(
+    new Map(),
+  );
+
+  useEffect(() => {
+    if (docPresence) {
+      const handleReceive = (
+        presenceId: PresenceId,
+        update: any,
+      ) => {
+        const join = update !== null;
+        if (
+          shouldShowNotification(
+            presenceId,
+            localPresence.presenceId,
+          )
+        ) {
+          if (join) {
+            const username =
+              docPresence.remotePresences[presenceId]
+                ?.username;
+            handleJoin(
+              presenceId,
+              username,
+              alreadyJoined,
+              setPresenceNotifications,
+            );
+          } else {
+            handleLeave(
+              presenceId,
+              alreadyJoined,
+              setPresenceNotifications,
+            );
+          }
+
+          const timeoutId = setTimeout(() => {
+            setPresenceNotifications((prev) =>
+              prev.slice(1),
+            );
+          }, 5000);
+
+          return () => {
+            clearTimeout(timeoutId);
+          };
+        }
+      };
+
+      docPresence.on('receive', handleReceive);
+      return () => {
+        docPresence.off('receive', handleReceive);
+      };
+    }
+  }, [docPresence, localPresence]);
+
+  return presenceNotifications.length > 0 ? (
+    <div className="vz-notification">
+      {presenceNotifications.map(
+        ({ user, join, presenceId }) => (
+          <div
+            key={presenceId}
+            className="vz-notification-item"
+          >
+            {join
+              ? `${user} has joined the session.`
+              : `${user} has left the session.`}
+          </div>
+        ),
+      )}
+    </div>
+  ) : null;
+};

package/src/client/PresenceNotifications/style.scss

@@ -0,0 +1,17 @@
+.vz-notification {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  bottom: 20px;
+  right: 20px;
+
+  color: rgb(154, 160, 172);
+  padding: 15px;
+
+  .vz-notification-item {
+    background-color: rgb(54, 65, 89);
+    padding: 5px;
+    border-radius: 5px;
+  }
+}

package/src/client/RunCodeWidget/index.tsx

@@ -0,0 +1,117 @@
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import { PlaySVG } from '../Icons';
+import { SplitEditorSVG } from '../Icons/SplitEditorSVG';
+import { VZCodeContext } from '../VZCodeContext';
+import { OverlayTrigger, Tooltip } from '../bootstrap';
+
+import './style.scss';
+
+// Feature flag for split pane feature (WIP)
+const enableSplitPane = false;
+
+export const RunCodeWidget = ({
+  runCodeWidgetTooltipText = (
+    <>
+      <strong>Run Code</strong>
+      <div>(Shift + Enter or Ctrl + s)</div>
+    </>
+  ),
+}: {
+  runCodeWidgetTooltipText?: JSX.Element;
+}) => {
+  const { runCodeRef, runPrettierRef, splitCurrentPane } =
+    useContext(VZCodeContext);
+  const [isRunning, setIsRunning] = useState(false);
+
+  const handleClick = useCallback(
+    (event?: React.MouseEvent) => {
+      setIsRunning(true); // Set the running state to true
+
+      // Run Prettier
+      const runPrettier = runPrettierRef.current;
+      if (runPrettier !== null) {
+        runPrettier();
+      }
+
+      // Run the code
+      const runCode = runCodeRef.current;
+      if (runCode !== null) {
+        runCode();
+      }
+
+      // Optional: reset the icon state after animation completes (e.g., 1 second)
+      setTimeout(() => setIsRunning(false), 1000);
+    },
+    [runCodeRef, runPrettierRef],
+  );
+
+  const handleSplitEditor = useCallback(() => {
+    splitCurrentPane();
+  }, [splitCurrentPane]);
+
+  // Add the keyboard event listener for Ctrl+S and Shift+Enter
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        (event.ctrlKey && event.key === 's') ||
+        (event.shiftKey && event.key === 'Enter')
+      ) {
+        event.preventDefault();
+        handleClick();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    // Cleanup the event listener on component unmount
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleClick]);
+
+  return (
+    <div>
+      <div className="vz-code-split-view-widget">
+        {enableSplitPane && (
+          <OverlayTrigger
+            placement="bottom"
+            overlay={
+              <Tooltip id="fork-file-tooltip">
+                Split Editor
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleSplitEditor}
+              className="icon-button icon-button-dark"
+            >
+              <SplitEditorSVG />
+            </i>
+          </OverlayTrigger>
+        )}
+      </div>
+      <div className="vz-code-run-code-widget">
+        <OverlayTrigger
+          placement="bottom"
+          overlay={
+            <Tooltip id="run-code-widget-tooltip">
+              {runCodeWidgetTooltipText}
+            </Tooltip>
+          }
+        >
+          <i
+            className={`icon-button icon-button-dark ${isRunning ? 'rotate-icon' : ''}`}
+            onClick={handleClick}
+          >
+            <PlaySVG />
+          </i>
+        </OverlayTrigger>
+      </div>
+    </div>
+  );
+};

package/src/client/RunCodeWidget/style.scss

@@ -0,0 +1,24 @@
+.vz-code-run-code-widget {
+  position: absolute;
+  right: 16px;
+  top: 9px;
+  color: var(--vh-color-neutral-04);
+  .rotate-icon {
+    animation: spin 1s linear;
+  }
+}
+.vz-code-split-view-widget {
+  position: absolute;
+  right: 51px;
+  top: 9px;
+  color: var(--vh-color-neutral-04);
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/client/SplitPaneResizeContext.tsx

@@ -0,0 +1,159 @@
+// From https://github.com/vizhub-core/vizhub/edit/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/SplitPaneResizeContext/index.js
+import {
+  createContext,
+  useReducer,
+  useCallback,
+  useEffect,
+} from 'react';
+
+export type Side = 'left' | 'right';
+
+export type SplitPaneResizeContextValue = {
+  codeEditorWidth: number;
+  sidebarWidth: number;
+  moveSplitPane: (a: number, side: Side) => void;
+  isDraggingRight: boolean;
+  isDraggingLeft: boolean;
+  setIsDragging: (a: boolean, side: Side) => void;
+  setSidebarView: (isAIChatOpen: boolean) => void;
+};
+
+// Default widths for different sidebar views
+const filesViewWidth = 300;
+const aiChatViewWidth = 800;
+const initialCodeEditorWidthDefault = 800;
+
+const initialValue: SplitPaneResizeContextValue = {
+  codeEditorWidth: initialCodeEditorWidthDefault,
+  sidebarWidth: filesViewWidth, // Default to files view
+  moveSplitPane: () => {},
+  isDraggingRight: false,
+  isDraggingLeft: false,
+  setIsDragging: () => {},
+  setSidebarView: () => {},
+};
+
+export const SplitPaneResizeContext =
+  createContext<SplitPaneResizeContextValue>(initialValue);
+
+type SplitPaneState = {
+  // The width of the sidebar, in pixels.
+  sidebarWidth: number;
+  codeEditorWidth: number;
+  isDraggingLeft: boolean;
+  isDraggingRight: boolean;
+};
+
+const initialState: SplitPaneState = {
+  sidebarWidth: filesViewWidth,
+  codeEditorWidth: initialCodeEditorWidthDefault,
+  isDraggingLeft: false,
+  isDraggingRight: false,
+};
+
+type SplitPaneAction =
+  | {
+      type: 'move';
+      side: Side;
+      movementX: number;
+    }
+  | {
+      type: 'setIsDragging';
+      side: Side;
+      isDragging: boolean;
+    }
+  | {
+      type: 'setSidebarView';
+      isAIChatOpen: boolean;
+    };
+
+const splitPaneReducer = (
+  state: SplitPaneState,
+  action: SplitPaneAction,
+) => {
+  switch (action.type) {
+    case 'move':
+      return action.side === 'left'
+        ? {
+            ...state,
+            sidebarWidth:
+              state.sidebarWidth + action.movementX,
+          }
+        : {
+            ...state,
+            codeEditorWidth:
+              state.codeEditorWidth + action.movementX,
+          };
+    // Handle setIsDragging
+    case 'setIsDragging':
+      return action.side === 'left'
+        ? {
+            ...state,
+            isDraggingLeft: action.isDragging,
+          }
+        : {
+            ...state,
+            isDraggingRight: action.isDragging,
+          };
+    case 'setSidebarView':
+      return {
+        ...state,
+        sidebarWidth: action.isAIChatOpen
+          ? aiChatViewWidth
+          : filesViewWidth,
+      };
+    default:
+      return state;
+  }
+};
+
+export const SplitPaneResizeProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(
+    splitPaneReducer,
+    initialState,
+  );
+
+  const setIsDragging = useCallback(
+    (isDragging: boolean, side: Side) => {
+      dispatch({ type: 'setIsDragging', isDragging, side });
+    },
+    [dispatch],
+  );
+
+  const moveSplitPane = useCallback(
+    (movementX: number, side: Side) => {
+      dispatch({ type: 'move', movementX, side });
+    },
+    [dispatch],
+  );
+
+  const setSidebarView = useCallback(
+    (isAIChatOpen: boolean) => {
+      dispatch({ type: 'setSidebarView', isAIChatOpen });
+    },
+    [dispatch],
+  );
+
+  const {
+    sidebarWidth,
+    codeEditorWidth,
+    isDraggingLeft,
+    isDraggingRight,
+  } = state;
+
+  const value: SplitPaneResizeContextValue = {
+    codeEditorWidth,
+    sidebarWidth,
+    moveSplitPane,
+    isDraggingLeft,
+    isDraggingRight,
+    setIsDragging,
+    setSidebarView,
+  };
+
+  return (
+    <SplitPaneResizeContext.Provider value={value}>
+      {children}
+    </SplitPaneResizeContext.Provider>
+  );
+};

package/src/client/TabList/Tab.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useMemo } from 'react';
+import type { TabState } from '../../types';
+import type { VizFileId } from '@vizhub/viz-types';
+import { CloseSVG } from '../Icons';
+
+// Supports adding the file's containing folder to the tab name
+const fileNameSplit = (fileName: string) => {
+  const split = fileName.split('/');
+  if (split.length === 1) return split[split.length - 1];
+  return (
+    split[split.length - 2] + '/' + split[split.length - 1]
+  );
+};
+
+export const Tab = ({
+  fileId,
+  isTransient,
+  isActive,
+  setActiveFileId,
+  openTab,
+  closeTabs,
+  fileName,
+}: {
+  fileId: VizFileId;
+  isTransient?: boolean;
+  isActive: boolean;
+  setActiveFileId: (fileId: VizFileId) => void;
+  openTab: (tabState: TabState) => void;
+  closeTabs: (fileIds: VizFileId[]) => void;
+  fileName: string;
+}) => {
+  const handleCloseClick = useCallback(
+    (event: React.MouseEvent) => {
+      // Stop propagation so that the outer listener doesn't fire.
+      event.stopPropagation();
+
+      closeTabs([fileId]);
+    },
+    [closeTabs, fileId],
+  );
+
+  const tabName = useMemo(
+    () => fileNameSplit(fileName),
+    [fileName],
+  );
+
+  const handleClick = useCallback(() => {
+    setActiveFileId(fileId);
+  }, [fileId, setActiveFileId]);
+
+  // Double-clicking a transient tab makes it a persistent tab.
+  const handleDoubleClick = useCallback(() => {
+    openTab({ fileId });
+  }, [fileId, openTab]);
+
+  return (
+    <div
+      className={`tab user-select-none ${
+        isActive ? 'active' : ''
+      } ${isTransient ? 'transient' : ''}`}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+    >
+      {tabName}
+      <i
+        className="icon-button icon-button-dark"
+        onClick={handleCloseClick}
+      >
+        <CloseSVG />
+      </i>
+    </div>
+  );
+};

package/src/client/TabList/index.tsx

@@ -0,0 +1,35 @@
+import { useContext } from 'react';
+import { TabState } from '../../types';
+import { VZCodeContext } from '../VZCodeContext';
+import { Tab } from './Tab';
+import './style.scss';
+
+// Displays the list of tabs above the code editor.
+export const TabList = ({ activeFileId, tabList }) => {
+  const { files, setActiveFileId, openTab, closeTabs } =
+    useContext(VZCodeContext);
+
+  return (
+    <div className="vz-tab-list">
+      {files &&
+        tabList
+          // Handles the case that the tab list references a file that was deleted.
+          .filter(
+            (tabState: TabState) =>
+              tabState.fileId in files,
+          )
+          .map((tabState: TabState) => (
+            <Tab
+              key={tabState.fileId}
+              fileId={tabState.fileId}
+              isTransient={tabState.isTransient}
+              isActive={tabState.fileId === activeFileId}
+              setActiveFileId={setActiveFileId}
+              openTab={openTab}
+              closeTabs={closeTabs}
+              fileName={files[tabState.fileId].name}
+            />
+          ))}
+    </div>
+  );
+};

package/src/client/TabList/style.scss

@@ -0,0 +1,51 @@
+.vz-tab-list {
+  display: flex;
+  background-color: #1f2022;
+  // When the tab list becomes too large, a horizontal scroll bar appears.
+  overflow-x: auto;
+
+  .tab {
+    // background: #47546b;
+    color: #fff;
+    font-family: var(--vzcode-font-family);
+    font-weight: 500;
+    align-items: center;
+    display: flex;
+    gap: 6px;
+    padding: 4px 4px 4px 14px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    margin-top: 6px;
+    margin-left: 2px;
+    margin-right: 2px;
+    cursor: pointer;
+    // Make sure text doesn't wrap within tabs.
+    white-space: nowrap;
+
+    // No left margin for first child
+    &:first-child {
+      margin-left: 0;
+    }
+
+    // on hover
+    &:hover {
+      // background-color: var(--vh-color-hover-dark);
+      background-color: rgba(255, 255, 255, 0.075);
+    }
+  }
+
+  .tab.active {
+    background-color: #202e46;
+  }
+
+  .tab.transient {
+    font-style: italic;
+  }
+
+  .icon-button {
+    color: var(--vh-color-neutral-03);
+  }
+  .icon-button:hover {
+    color: var(--vh-color-action-03);
+  }
+}

package/src/client/VZCodeContext/index.tsx

@@ -0,0 +1,29 @@
+import React, { Context, createContext } from 'react';
+import {
+  VZCodeContextValue,
+  VZCodeProviderProps,
+} from './types';
+import { useVZCodeState } from './useVZCodeState';
+
+// This context centralizes all the "smart" logic
+// to do with the application state. This includes
+//  * Accessing and manipulating ShareDB data
+//  * Centralized application state
+export const VZCodeContext: Context<VZCodeContextValue | null> =
+  createContext<VZCodeContextValue>(null);
+
+export const VZCodeProvider: React.FC<
+  VZCodeProviderProps
+> = ({ children, ...props }) => {
+  // Use the custom hook to get all the context value
+  const value = useVZCodeState(props);
+
+  return (
+    <VZCodeContext.Provider value={value}>
+      {children}
+    </VZCodeContext.Provider>
+  );
+};
+
+// Re-export types for backward compatibility
+export type { VZCodeContextValue, VZCodeProviderProps };