npm - vzcode - Versions diffs - 1.61.0 → 2.0.0 - Mend

vzcode 1.61.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/assets/{index-Br76WttW.css → index-BM8tDh6M.css} +1 -1
package/dist/assets/{index-EWyCE9d7.js → index-BgqNq-ww.js} +173 -173
package/dist/index.html +2 -2
package/package.json +1 -1
package/src/client/VZCodeContext/types.ts +2 -0
package/src/client/VZCodeContext/useVZCodeState.ts +5 -1
package/src/client/VZSidebar/AIChat/MessageList.tsx +23 -0
package/src/client/VZSidebar/DeleteConfirmationModal.tsx +15 -4
package/src/client/VZSidebar/VisualEditor.tsx +11 -0
package/src/client/VZSidebar/aiCopyPaste.ts +1 -1
package/src/client/VZSidebar/index.tsx +42 -0
package/src/client/VZSidebar/styles.scss +15 -0
package/src/client/useFileCRUD.ts +14 -0
package/src/server/aiChatHandler/aiEditing.ts +50 -1
package/src/server/prettier.ts +115 -0

package/dist/index.html CHANGED Viewed

@@ -20,8 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-EWyCE9d7.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Br76WttW.css">
+    <script type="module" crossorigin src="/assets/index-BgqNq-ww.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BM8tDh6M.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.61.0",
+  "version": "2.0.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",

package/src/client/VZCodeContext/types.ts CHANGED Viewed

@@ -41,6 +41,7 @@ export type VZCodeContextValue = {
     directoryName: string,
   ) => void;
   deleteDirectory: (directoryId: string) => void;
+  deleteAllFiles: () => void;
   setActiveFileId: (fileId: string | null) => void;
   setActiveFileLeft: () => void;
@@ -244,4 +245,5 @@ export interface VZCodeProviderProps {
     chatId: string;
     canUndo: boolean;
   }>;
+  iframeRef?: React.MutableRefObject<HTMLIFrameElement>;
 }

package/src/client/VZCodeContext/useVZCodeState.ts CHANGED Viewed

@@ -52,6 +52,7 @@ export const useVZCodeState = ({
   clearStoredAIPrompt,
   getStoredAIPrompt,
   additionalWidgets,
+  iframeRef: externalIframeRef,
 }: Omit<
   VZCodeProviderProps,
   'children'
@@ -76,7 +77,8 @@ export const useVZCodeState = ({
   const codeEditorRef = useRef(null);
-  const iframeRef = useRef(null);
+  // Use external iframeRef if provided, otherwise create our own
+  const iframeRef = externalIframeRef || useRef(null);
   // The error message shows errors in order of priority:
   // * `runtimeError` - errors from runtime execution, highest priority
@@ -182,6 +184,7 @@ export const useVZCodeState = ({
     createDirectory,
     renameDirectory,
     deleteDirectory,
+    deleteAllFiles,
   } = useFileCRUD({
     submitOperation,
     closeTabs,
@@ -459,6 +462,7 @@ export const useVZCodeState = ({
     createDirectory,
     renameDirectory,
     deleteDirectory,
+    deleteAllFiles,
     setActiveFileId,
     setActiveFileLeft,

package/src/client/VZSidebar/AIChat/MessageList.tsx CHANGED Viewed

@@ -107,6 +107,29 @@ const MessageListComponent = ({
     scrollToBottom,
   ]);
+  // Track previous loading state to detect when AI generation completes
+  const [prevIsLoading, setPrevIsLoading] =
+    useState(isLoading);
+  // Scroll to bottom when AI generation completes (loading changes from true to false)
+  useEffect(() => {
+    // If AI was generating and now it's finished, scroll to bottom
+    if (prevIsLoading && !isLoading) {
+      // Force scroll to bottom regardless of user scroll state
+      // This ensures we always scroll to bottom when generation completes
+      messagesEndRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      });
+      // Re-enable auto-scroll for future messages
+      setIsUserScrolled(false);
+      setAutoScrollEnabled(true);
+    }
+    setPrevIsLoading(isLoading);
+  }, [isLoading, prevIsLoading]);
   // Clean up timeout on unmount
   useEffect(() => {
     return () => {

package/src/client/VZSidebar/DeleteConfirmationModal.tsx CHANGED Viewed

@@ -36,15 +36,26 @@ export const DeleteConfirmationModal = ({
     <Modal show={show} onHide={onClose} centered>
       <Modal.Header closeButton onClick={onClose}>
         <Modal.Title>
-          Delete {isDirectory ? 'Directory' : 'File'}
+          Delete{' '}
+          {name === 'all files'
+            ? 'All Files'
+            : isDirectory
+              ? 'Directory'
+              : 'File'}
         </Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <p>
-          This will delete the{' '}
-          {isDirectory ? 'directory' : 'file'}{' '}
-          <strong>{name}</strong>.
+          {name === 'all files' ? (
+            'This will delete all files in the project.'
+          ) : (
+            <>
+              This will delete the{' '}
+              {isDirectory ? 'directory' : 'file'}{' '}
+              <strong>{name}</strong>.
+            </>
+          )}
         </p>
       </Modal.Body>

package/src/client/VZSidebar/VisualEditor.tsx CHANGED Viewed

@@ -59,6 +59,17 @@ export const VisualEditor = () => {
     );
   }
+  if (!Array.isArray(configData.visualEditorWidgets)) {
+    return (
+      <EmptyState>
+        Your config.json file has "visualEditorWidgets" but
+        it is not an array. Please make sure
+        "visualEditorWidgets" is an array of widget
+        configurations.
+      </EmptyState>
+    );
+  }
   const onInputUpdate = useCallback(
     (
       property: string,

package/src/client/VZSidebar/aiCopyPaste.ts CHANGED Viewed

@@ -102,7 +102,7 @@ export const createAICopyPasteHandlers = (
       ) {
         // Use mergeFileChanges utility from editcodewithai
         const mergedFiles = mergeFileChanges(
-          files,
+          files || {},
           parsed.files,
         );

package/src/client/VZSidebar/index.tsx CHANGED Viewed

@@ -35,6 +35,7 @@ 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 {
@@ -157,6 +158,7 @@ export const VZSidebar = ({
     updatePresenceIndicator,
     setVoiceChatModalOpen,
     submitOperation,
+    deleteAllFiles,
   } = useContext(VZCodeContext);
   const fileTree = useMemo(
@@ -178,6 +180,10 @@ export const VZSidebar = ({
   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,
@@ -195,6 +201,20 @@ export const VZSidebar = ({
     [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,
   );
@@ -653,6 +673,17 @@ export const VZSidebar = ({
             <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 && (
@@ -681,6 +712,17 @@ export const VZSidebar = ({
           </div>
         </div>
       )}
+      {/* Delete All Files Confirmation Modal */}
+      {showDeleteAllModal && (
+        <DeleteConfirmationModal
+          show={showDeleteAllModal}
+          onClose={handleDeleteAllModalClose}
+          onConfirm={handleDeleteAllConfirm}
+          isDirectory={false}
+          name="all files"
+        />
+      )}
     </div>
   );
 };

package/src/client/VZSidebar/styles.scss CHANGED Viewed

@@ -357,6 +357,21 @@
           border-color: var(--vh-color-success-04);
         }
       }
+      &.delete-all-button {
+        border-color: var(--vh-color-neutral-02);
+        color: var(--vh-color-neutral-03);
+        font-size: 11px;
+        font-weight: 400;
+        opacity: 0.7;
+        &:hover {
+          background: var(--vh-color-hover-dark);
+          border-color: var(--vh-color-danger-03);
+          color: var(--vh-color-danger-04);
+          opacity: 1;
+        }
+      }
     }
   }

package/src/client/useFileCRUD.ts CHANGED Viewed

@@ -203,6 +203,19 @@ export const useFileCRUD = ({
     [submitOperation, closeTabs],
   );
+  // Deletes all files
+  const deleteAllFiles = useCallback(() => {
+    const tabsToClose: Array<VizFileId> = [];
+    submitOperation((document: VizContent) => {
+      // Collect all file IDs for closing tabs
+      for (const fileId in document.files) {
+        tabsToClose.push(fileId);
+      }
+      return { ...document, files: {} };
+    });
+    closeTabs(tabsToClose);
+  }, [submitOperation, closeTabs]);
   return {
     createFile,
     renameFile,
@@ -210,5 +223,6 @@ export const useFileCRUD = ({
     createDirectory,
     renameDirectory,
     deleteDirectory,
+    deleteAllFiles,
   };
 };

package/src/server/aiChatHandler/aiEditing.ts CHANGED Viewed

@@ -7,6 +7,9 @@ import {
   createFilesSnapshot,
   generateFilesUnifiedDiff,
 } from '../../utils/fileDiff.js';
+import { formatFiles } from '../prettier.js';
+import { createSubmitOperation } from '../../submitOperation.js';
+import { VizContent } from '@vizhub/viz-types';
 // Dev flag for waiting 1 second before starting the LLM function.
 // Useful for debugging and testing purposes, e.g. checking the typing indicator.
@@ -83,9 +86,55 @@ export const performAIEditing = async ({
   // Call the LLM function which will handle streaming and incremental file updates
   const result = await llmFunction(fullPrompt);
+  // 3. Run Prettier on changed files before running code
+  const afterLLMFiles = createFilesSnapshot(
+    shareDBDoc.data.files,
+  );
+  // Find files that were changed by the AI
+  const changedFileIds = Object.keys(afterLLMFiles).filter(
+    (fileId) =>
+      beforeFiles[fileId]?.text !==
+      afterLLMFiles[fileId]?.text,
+  );
+  if (changedFileIds.length > 0) {
+    // Format the changed files
+    const formattedFiles = await formatFiles(
+      shareDBDoc.data.files,
+      changedFileIds,
+    );
+    // Apply formatted versions to shareDBDoc if formatting succeeded
+    if (Object.keys(formattedFiles).length > 0) {
+      const submitOperation =
+        createSubmitOperation(shareDBDoc);
+      submitOperation((document: VizContent) => {
+        const updatedFiles = { ...document.files };
+        // Apply each formatted file
+        Object.entries(formattedFiles).forEach(
+          ([fileId, formattedText]) => {
+            if (updatedFiles[fileId]) {
+              updatedFiles[fileId] = {
+                ...updatedFiles[fileId],
+                text: formattedText,
+              };
+            }
+          },
+        );
+        return {
+          ...document,
+          files: updatedFiles,
+        };
+      });
+    }
+  }
   runCode();
-  // 3. Capture the state of files after editing and generate diff
+  // 4. Capture the state of files after editing and formatting, then generate diff
   const afterFiles = createFilesSnapshot(
     shareDBDoc.data.files,
   );

package/src/server/prettier.ts ADDED Viewed

@@ -0,0 +1,115 @@
+import { format } from 'prettier/standalone';
+import * as prettierPluginBabel from 'prettier/plugins/babel';
+import * as prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettierPluginHtml from 'prettier/plugins/html';
+import * as prettierPluginMarkdown from 'prettier/plugins/markdown';
+import * as prettierPluginCSS from 'prettier/plugins/postcss';
+import * as prettierPluginTypescript from 'prettier/plugins/typescript';
+import { VizFiles, VizFileId } from '@vizhub/viz-types';
+// Parser mappings - matches client-side implementation
+const parsers = {
+  js: 'babel',
+  jsx: 'babel',
+  mjs: 'babel',
+  cjs: 'babel',
+  ts: 'typescript',
+  tsx: 'typescript',
+  css: 'css',
+  html: 'html',
+  json: 'json',
+  json5: 'json5',
+  md: 'markdown',
+  markdown: 'markdown',
+} as const;
+// Prettier plugins - matches client-side implementation
+const plugins = [
+  prettierPluginBabel,
+  prettierPluginEstree,
+  prettierPluginHtml,
+  prettierPluginMarkdown,
+  prettierPluginTypescript,
+  prettierPluginCSS,
+] as any;
+// Prettier options - matches client-side implementation and .prettierrc
+const prettierOptions = {
+  proseWrap: 'always' as const,
+  singleQuote: true,
+  printWidth: 60,
+};
+/**
+ * Extracts file extension from filename
+ * Example: 'foo.js' => 'js'
+ */
+const getFileExtension = (fileName: string): string => {
+  const match = fileName.match(/\.([^.]+)$/);
+  return match ? match[1] : '';
+};
+/**
+ * Formats a single file using Prettier
+ */
+export const formatFile = async (
+  fileText: string,
+  fileName: string,
+): Promise<string | null> => {
+  const fileExtension = getFileExtension(fileName);
+  const parser =
+    parsers[fileExtension as keyof typeof parsers];
+  // If no parser is found, return null (no formatting)
+  if (!parser) {
+    return null;
+  }
+  try {
+    const formatted = await format(fileText, {
+      parser,
+      plugins,
+      ...prettierOptions,
+    });
+    return formatted;
+  } catch (error) {
+    // Log error but don't throw - return original text
+    console.error(
+      `Prettier formatting error for ${fileName}:`,
+      error,
+    );
+    return null;
+  }
+};
+/**
+ * Formats multiple files using Prettier
+ * Only formats files that have supported extensions
+ * Returns a map of fileId -> formatted text for successfully formatted files
+ */
+export const formatFiles = async (
+  files: VizFiles,
+  fileIds?: VizFileId[],
+): Promise<{ [fileId: VizFileId]: string }> => {
+  const results: { [fileId: VizFileId]: string } = {};
+  const targetFileIds = fileIds || Object.keys(files);
+  // Process files in parallel for better performance
+  const formatPromises = targetFileIds.map(
+    async (fileId) => {
+      const file = files[fileId];
+      if (!file) return;
+      const formatted = await formatFile(
+        file.text,
+        file.name,
+      );
+      if (formatted !== null && formatted !== file.text) {
+        results[fileId] = formatted;
+      }
+    },
+  );
+  await Promise.all(formatPromises);
+  return results;
+};