vzcode 2.2.0 → 2.3.0

package/src/client/VZSidebar/index.tsx

@@ -1,728 +0,0 @@
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  useRef,
-} from 'react';
-import {
-  FileTree,
-  FileTreeFile,
-  Presence,
-  PresenceId,
-  PresenceIndicator,
-} from '../../types';
-import { VizFileId } from '@vizhub/viz-types';
-import { OverlayTrigger, Tooltip } from '../bootstrap';
-import { getFileTree } from '../getFileTree';
-import {
-  BugSVG,
-  FileSVG,
-  FolderSVG,
-  GearSVG,
-  NewSVG,
-  PinSVG,
-  QuestionMarkSVG,
-  SearchSVG,
-  SparklesSVG,
-  AdjustmentSVG,
-} from '../Icons';
-import { MicSVG } from '../Icons/MicSVG';
-import { sortFileTree } from '../sortFileTree';
-import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
-import { VZCodeContext } from '../VZCodeContext';
-import { AIChat } from './AIChat';
-import { Listing } from './Listing';
-import { Search } from './Search';
-import { DeleteConfirmationModal } from './DeleteConfirmationModal';
-import { useDragAndDrop } from './useDragAndDrop';
-import { createAICopyPasteHandlers } from './aiCopyPaste';
-import {
-  enableLiveKit,
-  enableAIChat,
-} from '../featureFlags';
-import './styles.scss';
-import { VisualEditor } from './VisualEditor';
-
-const enableConnectionStatus = true;
-
-export const VZSidebar = ({
-  createFileTooltipText = (
-    <>
-      <strong>New file</strong>
-      {/* TODO verify that Ctrl + Shift + N works - does not work in Linux */}
-      <div>(Alt + N or Ctrl + Shift + N)</div>
-    </>
-  ),
-  createDirTooltipText = (
-    <div>
-      <strong>New Directory</strong>
-      {/* TODO consider Alt+D, as Ctrl + Shift + D does not work in Linux */}
-      <div>(Ctrl + Shift + D)</div>
-    </div>
-  ),
-  openSettingsTooltipText = (
-    <div>
-      <strong>Open Settings</strong>
-      <div>(Ctrl + Shift + S or Ctrl + ,)</div>
-    </div>
-  ),
-  openKeyboardShortcuts = (
-    <div>
-      <strong>Keyboard Shortcuts</strong>
-      <div>(Ctrl + Shift + K)</div>
-    </div>
-  ),
-  reportBugTooltipText = (
-    <div>
-      <strong>Report Bug</strong>
-      {/* TODO get this keyboard shortcut working? */}
-      {/* <div>(Ctrl + Shift + B)</div> */}
-    </div>
-  ),
-  searchToolTipText = (
-    <div>
-      <strong>Search</strong>
-      <div>(Ctrl + Shift + F)</div>
-    </div>
-  ),
-  filesToolTipText = (
-    <div>
-      <strong>Files</strong>
-      <div>(Ctrl + Shift + E)</div>
-    </div>
-  ),
-  enableAutoFollowTooltipText = (
-    <div>
-      <strong>Enable Auto Follow</strong>
-      <div>(Ctrl + Shift + A)</div>
-    </div>
-  ),
-  disableAutoFollowTooltipText = (
-    <div>
-      <strong>Disable Auto Follow</strong>
-      {/* TODO consider Alt+A, this breaks in Linux */}
-      <div>(Ctrl + Shift + A)</div>
-    </div>
-  ),
-  voiceChatToolTipText = (
-    <div>
-      <strong>Open Voice Chat Menu</strong>
-    </div>
-  ),
-  aiChatToolTipText = (
-    <div>
-      <strong>Edit with AI</strong>
-    </div>
-  ),
-
-  visualEditorToolTipText = (
-    <div>
-      <strong>Visual Editor</strong>
-    </div>
-  ),
-}: {
-  createFileTooltipText?: React.ReactNode;
-  createDirTooltipText?: React.ReactNode;
-  openSettingsTooltipText?: React.ReactNode;
-  reportBugTooltipText?: React.ReactNode;
-  openKeyboardShortcuts?: React.ReactNode;
-  searchToolTipText?: React.ReactNode;
-  filesToolTipText?: React.ReactNode;
-  enableAutoFollowTooltipText?: React.ReactNode;
-  disableAutoFollowTooltipText?: React.ReactNode;
-  voiceChatToolTipText?: React.ReactNode;
-  aiChatToolTipText?: React.ReactNode;
-  visualEditorToolTipText?: React.ReactNode;
-}) => {
-  const {
-    files,
-    openTab,
-    setIsSettingsOpen,
-    setIsDocOpen,
-    isSearchOpen,
-    setIsSearchOpen,
-    isVisualEditorOpen,
-    setIsVisualEditorOpen,
-    isAIChatOpen,
-    setIsAIChatOpen,
-    handleOpenCreateFileModal,
-    handleOpenCreateDirModal,
-    connected,
-    pending,
-    sidebarRef,
-    enableAutoFollow,
-    toggleAutoFollow,
-    docPresence,
-    updatePresenceIndicator,
-    setVoiceChatModalOpen,
-    submitOperation,
-    deleteAllFiles,
-  } = useContext(VZCodeContext);
-
-  const fileTree = useMemo(
-    () => (files ? sortFileTree(getFileTree(files)) : null),
-    [files],
-  );
-  const handleQuestionMarkClick = useCallback(() => {
-    setIsDocOpen(true);
-  }, []);
-  const handleSettingsClick = useCallback(() => {
-    setIsSettingsOpen(true);
-  }, []);
-
-  // State for AI operation feedback
-  const [copyButtonText, setCopyButtonText] =
-    useState('Copy for AI');
-  const [pasteButtonText, setPasteButtonText] =
-    useState('Paste for AI');
-  const [exportButtonText, setExportButtonText] =
-    useState('Export to ZIP');
-
-  // State for delete all confirmation modal
-  const [showDeleteAllModal, setShowDeleteAllModal] =
-    useState(false);
-
-  // Create AI copy/paste handlers
-  const {
-    handleCopyForAI,
-    handlePasteForAI,
-    handleExportToZip,
-  } = useMemo(
-    () =>
-      createAICopyPasteHandlers(
-        files,
-        submitOperation,
-        setCopyButtonText,
-        setPasteButtonText,
-        setExportButtonText,
-      ),
-    [files, submitOperation],
-  );
-
-  // Delete all handlers
-  const handleDeleteAllClick = useCallback(() => {
-    setShowDeleteAllModal(true);
-  }, []);
-
-  const handleDeleteAllModalClose = useCallback(() => {
-    setShowDeleteAllModal(false);
-  }, []);
-
-  const handleDeleteAllConfirm = useCallback(() => {
-    setShowDeleteAllModal(false);
-    deleteAllFiles();
-  }, [deleteAllFiles]);
-
-  const { sidebarWidth, setSidebarView } = useContext(
-    SplitPaneResizeContext,
-  );
-
-  // On single-click, open the file in a transient tab.
-  const handleFileClick = useCallback(
-    (fileId: VizFileId) => {
-      openTab({ fileId, isTransient: true });
-    },
-    [openTab],
-  );
-
-  // On double-click, open the file in a persistent tab.
-  const handleFileDoubleClick = useCallback(
-    (fileId: VizFileId) => {
-      openTab({ fileId, isTransient: false });
-    },
-    [openTab],
-  );
-
-  // True if files exist.
-  const filesExist =
-    fileTree &&
-    fileTree.children &&
-    fileTree.children.length > 0;
-
-  const {
-    isDragOver,
-    handleDragEnter,
-    handleDragOver,
-    handleDragLeave,
-    handleDrop,
-  } = useDragAndDrop();
-
-  // Track presence of remote users across files
-  // so that they can be displayed in the sidebar.
-  useEffect(() => {
-    docPresence;
-  }, []);
-
-  // Track the presence indicators for display in sidebar
-  useEffect(() => {
-    if (docPresence) {
-      const handleReceive = (
-        presenceId: PresenceId,
-        update: Presence,
-      ) => {
-        // Sometimes this can be null, so we check.
-        // This can happen when the user disconnects.
-        // If this happens, we do not update the presence indicator.
-        // TODO test removal of presence indicator.
-        if (!update) return;
-
-        const presenceIndicator: PresenceIndicator = {
-          username: update.username,
-          fileId: update.start[1] as VizFileId,
-        };
-
-        updatePresenceIndicator(presenceIndicator);
-      };
-
-      docPresence.on('receive', handleReceive);
-      return () => {
-        docPresence.off('receive', handleReceive);
-      };
-    }
-  }, [docPresence]);
-
-  const [saved, setSaved] = useState(false);
-  const [isConnecting, setIsConnecting] = useState(true);
-  const previousPendingRef = useRef<boolean>(pending);
-
-  // Handle connection status transitions
-  useEffect(() => {
-    if (isConnecting && connected) {
-      setIsConnecting(false);
-    }
-  }, [connected, isConnecting]);
-
-  // Handle 'saved' state based on 'pending' transition
-  useEffect(() => {
-    // Check if 'pending' transitioned from true to false
-    if (
-      previousPendingRef.current &&
-      !pending &&
-      connected &&
-      !isConnecting
-    ) {
-      setSaved(true);
-      const timer = setTimeout(() => {
-        setSaved(false);
-      }, 1500); // Reset after 2 seconds
-      return () => clearTimeout(timer);
-    }
-    // Update the ref with the current 'pending' state
-    previousPendingRef.current = pending;
-  }, [pending, connected, isConnecting]);
-
-  // Automatically adjust sidebar width when view changes
-  useEffect(() => {
-    setSidebarView(isAIChatOpen);
-  }, [isAIChatOpen, setSidebarView]);
-
-  return (
-    <div
-      className="vz-sidebar"
-      style={{ width: sidebarWidth + 'px' }}
-    >
-      <div
-        className="full-box"
-        ref={sidebarRef}
-        tabIndex={-1}
-      >
-        <div className="sidebar-section-buttons">
-          {enableAIChat && (
-            <OverlayTrigger
-              placement="right"
-              overlay={
-                <Tooltip id="ai-chat-tooltip">
-                  {aiChatToolTipText}
-                </Tooltip>
-              }
-            >
-              <i
-                id="ai-chat-icon"
-                className="icon-button icon-button-dark"
-                onClick={() => {
-                  setIsAIChatOpen(true);
-                  setIsSearchOpen(false);
-                  setSidebarView(true); // Switch to AI chat view
-                }}
-              >
-                <SparklesSVG />
-              </i>
-            </OverlayTrigger>
-          )}
-
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="files-tooltip">
-                {filesToolTipText}
-              </Tooltip>
-            }
-          >
-            <i
-              id="files-icon"
-              className="icon-button icon-button-dark"
-              onClick={() => {
-                setIsSearchOpen(false);
-                setIsAIChatOpen(false);
-                setIsVisualEditorOpen(false);
-                setSidebarView(false); // Switch to files view
-              }}
-            >
-              <FolderSVG />
-            </i>
-          </OverlayTrigger>
-
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="search-tooltip">
-                {searchToolTipText}
-              </Tooltip>
-            }
-          >
-            <i
-              id="search-icon"
-              className="icon-button icon-button-dark"
-              onClick={() => {
-                setIsSearchOpen(true);
-                setIsAIChatOpen(false);
-                setIsVisualEditorOpen(false);
-                setSidebarView(false); // Switch to files view (search uses same width as files)
-              }}
-            >
-              <SearchSVG />
-            </i>
-          </OverlayTrigger>
-
-          {enableAIChat && (
-            <OverlayTrigger
-              placement="right"
-              overlay={
-                <Tooltip id="ai-chat-tooltip">
-                  {aiChatToolTipText}
-                </Tooltip>
-              }
-            >
-              <i
-                id="ai-chat-icon"
-                className="icon-button icon-button-dark"
-                onClick={() => {
-                  setIsAIChatOpen(true);
-                  setIsSearchOpen(false);
-                  setIsVisualEditorOpen(false);
-                }}
-              >
-                <SparklesSVG />
-              </i>
-            </OverlayTrigger>
-          )}
-
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="visual-editor-tooltip">
-                {visualEditorToolTipText}
-              </Tooltip>
-            }
-          >
-            <i
-              id="visual-editor-icon"
-              className="icon-button icon-button-dark"
-              onClick={() => {
-                setIsVisualEditorOpen(true);
-                setIsAIChatOpen(false);
-                setIsSearchOpen(false);
-              }}
-            >
-              <AdjustmentSVG />
-            </i>
-          </OverlayTrigger>
-
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="open-keyboard-shortcuts">
-                {openKeyboardShortcuts}
-              </Tooltip>
-            }
-          >
-            <i
-              id="shortcut-icon"
-              className="icon-button icon-button-dark"
-              onClick={handleQuestionMarkClick}
-            >
-              <QuestionMarkSVG />
-            </i>
-          </OverlayTrigger>
-
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="report-bug-tooltip">
-                {reportBugTooltipText}
-              </Tooltip>
-            }
-          >
-            <a
-              href="https://github.com/vizhub-core/vzcode/issues/new"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <i
-                id="bug-icon"
-                className="icon-button icon-button-dark"
-              >
-                <BugSVG />
-              </i>
-            </a>
-          </OverlayTrigger>
-
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="open-settings-tooltip">
-                {openSettingsTooltipText}
-              </Tooltip>
-            }
-          >
-            <i
-              id="settings-icon"
-              className="icon-button icon-button-dark"
-              onClick={handleSettingsClick}
-            >
-              <GearSVG />
-            </i>
-          </OverlayTrigger>
-
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="create-file-tooltip">
-                {createFileTooltipText}
-              </Tooltip>
-            }
-          >
-            <i
-              id="new-file-icon"
-              className="icon-button icon-button-dark"
-              onClick={handleOpenCreateFileModal}
-            >
-              <NewSVG />
-            </i>
-          </OverlayTrigger>
-
-          {/*Directory Rename*/}
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="create-dir-tooltip">
-                {createDirTooltipText}
-              </Tooltip>
-            }
-          >
-            <i
-              id="new-directory-icon"
-              className="icon-button icon-button-dark"
-              onClick={handleOpenCreateDirModal}
-            >
-              <FileSVG />
-            </i>
-          </OverlayTrigger>
-
-          {/*Toggle Follow*/}
-          <OverlayTrigger
-            placement="right"
-            overlay={
-              <Tooltip id="toggle-auto-follow">
-                {enableAutoFollow
-                  ? disableAutoFollowTooltipText
-                  : enableAutoFollowTooltipText}
-              </Tooltip>
-            }
-          >
-            <i
-              id="auto-focus-icon"
-              className={`icon-button icon-button-dark${
-                enableAutoFollow
-                  ? ' vh-color-success-01'
-                  : ''
-              }`}
-              onClick={toggleAutoFollow}
-            >
-              <i></i>
-              <PinSVG />
-            </i>
-          </OverlayTrigger>
-          {/* Start Voice Chat */}
-          {enableLiveKit && (
-            <OverlayTrigger
-              placement="right"
-              overlay={
-                <Tooltip id="voice-chat">
-                  {voiceChatToolTipText}
-                </Tooltip>
-              }
-            >
-              <i
-                id="mic-icon"
-                className="icon-button icon-button-dark"
-                onClick={() => {
-                  setVoiceChatModalOpen(true);
-                }}
-              >
-                <MicSVG />
-              </i>
-            </OverlayTrigger>
-          )}
-        </div>
-        <div
-          className="files"
-          id="sidebar-view-container"
-          onDragEnter={handleDragEnter}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-        >
-          {isAIChatOpen ? (
-            <div className="sidebar-ai-chat">
-              <AIChat />
-            </div>
-          ) : isSearchOpen ? (
-            <div className="sidebar-search">
-              <Search />
-            </div>
-          ) : isVisualEditorOpen ? (
-            <div className="sidebar-visual-editor">
-              <VisualEditor />
-            </div>
-          ) : (
-            <div className="sidebar-files">
-              {isDragOver ? (
-                <div className="empty drag-over">
-                  <div className="empty-text">
-                    It looks like you don't have any files
-                    yet! Click the "Create file" button
-                    above to create your first file.
-                  </div>
-                  <div className="empty-text">
-                    Drop files here!
-                  </div>
-                </div>
-              ) : filesExist ? (
-                fileTree.children.map((entity) => {
-                  const { fileId } = entity as FileTreeFile;
-                  const { path } = entity as FileTree;
-                  const key = fileId ? fileId : path;
-                  return (
-                    <Listing
-                      key={key}
-                      entity={entity}
-                      handleFileClick={handleFileClick}
-                      handleFileDoubleClick={
-                        handleFileDoubleClick
-                      }
-                    />
-                  );
-                })
-              ) : (
-                <div className="empty">
-                  <div className="empty-text">
-                    It looks like you don't have any files
-                    yet! Click the "Create file" button
-                    above to create your first file.
-                  </div>
-                  <div className="empty-text">
-                    Drop files here!
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-      {!isAIChatOpen && !isSearchOpen && (
-        <div className="ai-buttons">
-          {filesExist && (
-            <button
-              className="ai-button export-button"
-              onClick={handleExportToZip}
-              title="Export files to ZIP"
-            >
-              <i className="bi bi-download"></i>
-              {exportButtonText}
-            </button>
-          )}
-          {filesExist && (
-            <button
-              className="ai-button copy-button"
-              onClick={handleCopyForAI}
-              title="Copy files formatted for AI"
-            >
-              <i className="bi bi-clipboard"></i>
-              {copyButtonText}
-            </button>
-          )}
-
-          <button
-            className="ai-button paste-button"
-            onClick={handlePasteForAI}
-            title="Paste files from AI"
-          >
-            <i className="bi bi-clipboard-plus"></i>
-            {pasteButtonText}
-          </button>
-
-          {filesExist && (
-            <button
-              className="ai-button delete-all-button"
-              onClick={handleDeleteAllClick}
-              title="Delete all files"
-            >
-              <i className="bi bi-trash"></i>
-              delete all
-            </button>
-          )}
-        </div>
-      )}
-      {enableConnectionStatus && (
-        <div className="connection-status">
-          {isConnecting
-            ? 'Connecting...'
-            : !connected
-              ? 'Connection Lost'
-              : pending
-                ? 'Saving...'
-                : saved
-                  ? 'Saved.'
-                  : 'Connected'}
-          <div className="connection">
-            <div
-              className={`connection-status-indicator ${
-                isConnecting
-                  ? 'pending'
-                  : !connected
-                    ? 'disconnected'
-                    : pending
-                      ? 'pending'
-                      : 'connected'
-              }`}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Delete All Files Confirmation Modal */}
-      {showDeleteAllModal && (
-        <DeleteConfirmationModal
-          show={showDeleteAllModal}
-          onClose={handleDeleteAllModalClose}
-          onConfirm={handleDeleteAllConfirm}
-          isDirectory={false}
-          name="all files"
-        />
-      )}
-    </div>
-  );
-};