vzcode 1.62.0 → 2.2.0

package/src/client/VZSidebar/VisualEditor.tsx

@@ -12,13 +12,36 @@ import { EmptyState } from './EmptyState';
 
 const CONFIG_FILE_NAME = 'config.json';
 
+// Helper function to calculate percentage for progress fill
+const calculatePercentage = (
+  value: number,
+  min: number,
+  max: number,
+) => {
+  return ((value - min) / (max - min)) * 100;
+};
+
+// Helper function to format values nicely
+const formatValue = (
+  value: number,
+  min: number,
+  max: number,
+) => {
+  // Determine decimal places based on the range
+  const range = max - min;
+  const decimalPlaces =
+    range < 10 ? 2 : range < 100 ? 1 : 0;
+  return Number(value).toFixed(decimalPlaces);
+};
+
 export const VisualEditor = () => {
-  const {
-    files,
-    submitOperation,
-    runPrettierRef,
-    iframeRef,
-  } = useContext(VZCodeContext);
+  const { files, submitOperation, iframeRef } =
+    useContext(VZCodeContext);
+
+  // Local state to track slider values during user interaction
+  const [localValues, setLocalValues] = useState<{
+    [key: string]: number;
+  }>({});
 
   let configFileId: VizFileId | null = null;
   for (const fileId in files) {
@@ -70,22 +93,23 @@ export const VisualEditor = () => {
     );
   }
 
-  const onInputUpdate = useCallback(
-    (
-      property: string,
-      previousValue: any,
-    ): React.FormEventHandler<HTMLInputElement> =>
-      (event) => {
-        //TODO: test race condition in which someone is editing the config file as another user uses the visual editor
+  const onSliderChange = useCallback(
+    (property: string) =>
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = parseFloat(
+          event.currentTarget.value,
+        );
 
-        const newValueOfConsistentType =
-          typeof previousValue === 'number'
-            ? parseFloat(event.currentTarget.value)
-            : event.currentTarget.value;
+        // Update local state immediately for responsive UI
+        setLocalValues((prev) => ({
+          ...prev,
+          [property]: newValue,
+        }));
 
+        // Update config.json
         const newConfigData = {
           ...configData,
-          [property]: newValueOfConsistentType,
+          [property]: newValue,
         };
 
         submitOperation((document: VizContent) => ({
@@ -98,140 +122,104 @@ export const VisualEditor = () => {
             },
           },
         }));
-
-        iframeRef.current.contentWindow.postMessage({
-          [property]: newValueOfConsistentType,
-        });
       },
-    [configData, files, configFileId],
+    [configData, files, configFileId, setLocalValues],
   );
 
   const visualEditorWidgets: VisualEditorConfigEntry[] =
     configData.visualEditorWidgets;
 
-  // State for advanced interactions
-  const [activeSlider, setActiveSlider] = useState<
-    string | null
-  >(null);
-  const [isDragging, setIsDragging] = useState<
-    string | null
-  >(null);
-  const [hoverValue, setHoverValue] = useState<
-    number | null
-  >(null);
-  const sliderRefs = useRef<{
-    [key: string]: HTMLInputElement | null;
-  }>({});
-
-  // Helper function to format values nicely
-  const formatValue = (
-    value: number,
-    min: number,
-    max: number,
-  ) => {
-    // Determine decimal places based on the range
-    const range = max - min;
-    const decimalPlaces =
-      range < 10 ? 2 : range < 100 ? 1 : 0;
-    return Number(value).toFixed(decimalPlaces);
-  };
-
-  // Helper function to calculate percentage for progress fill
-  const calculatePercentage = (
-    value: number,
-    min: number,
-    max: number,
-  ) => {
-    return ((value - min) / (max - min)) * 100;
-  };
-
-  // Enhanced input handler with animations
-  const onInputUpdateEnhanced = useCallback(
-    (
-      property: string,
-      previousValue: any,
-      widgetConfig: VisualEditorConfigEntry,
-    ): React.FormEventHandler<HTMLInputElement> =>
-      (event) => {
-        const newValueOfConsistentType =
-          typeof previousValue === 'number'
-            ? parseFloat(event.currentTarget.value)
-            : event.currentTarget.value;
+  // Sync local values with config data when it changes (including remote updates)
+  useEffect(() => {
+    const newLocalValues: { [key: string]: number } = {};
+    visualEditorWidgets.forEach((widget) => {
+      if (widget.type === 'number') {
+        newLocalValues[widget.property] =
+          configData[widget.property];
+      }
+    });
+    setLocalValues(newLocalValues);
+  }, [configData, visualEditorWidgets]);
 
-        const newConfigData = {
-          ...configData,
-          [property]: newValueOfConsistentType,
-        };
+  // Track previous config state to detect changes from any source (remote clients, text editor, etc.)
+  const previousConfigRef = useRef<any>(null);
 
-        submitOperation((document: VizContent) => ({
-          ...document,
-          files: {
-            ...files,
-            [configFileId]: {
-              name: 'config.json',
-              text: JSON.stringify(newConfigData, null, 2),
-            },
-          },
-        }));
+  // Detect config.json changes and send updates to iframe
+  useEffect(() => {
+    if (!configFileId || !files || !files[configFileId]) {
+      return;
+    }
 
-        iframeRef.current.contentWindow.postMessage({
-          [property]: newValueOfConsistentType,
-        });
+    let newConfigData;
+    try {
+      newConfigData = JSON.parse(files[configFileId].text);
+    } catch (error) {
+      // If config is invalid JSON, we can't process changes
+      return;
+    }
 
-        // Trigger value change animation
-        const sliderElement = sliderRefs.current[property];
-        if (sliderElement) {
-          sliderElement.classList.add('value-changed');
-          setTimeout(() => {
-            sliderElement.classList.remove('value-changed');
-          }, 300);
-        }
-      },
-    [configData, files, configFileId],
-  );
+    const previousConfig = previousConfigRef.current;
 
-  // Mouse event handlers for enhanced interactions
-  const handleMouseDown = (property: string) => {
-    setIsDragging(property);
-    setActiveSlider(property);
-  };
+    // Update the ref with the new config
+    previousConfigRef.current = newConfigData;
 
-  const handleMouseUp = () => {
-    setIsDragging(null);
-  };
+    // Skip processing if this is the first time or if there's no previous config
+    if (!previousConfig) {
+      return;
+    }
 
-  const handleMouseEnter = (property: string) => {
-    setActiveSlider(property);
-  };
+    // Find changed top-level properties
+    const changedProperties: { [key: string]: any } = {};
 
-  const handleMouseLeave = () => {
-    setActiveSlider(null);
-    setHoverValue(null);
-  };
+    // Check all properties in the new config
+    for (const key in newConfigData) {
+      if (newConfigData[key] !== previousConfig[key]) {
+        // Deep comparison for objects to detect actual changes
+        if (
+          typeof newConfigData[key] === 'object' &&
+          typeof previousConfig[key] === 'object'
+        ) {
+          if (
+            JSON.stringify(newConfigData[key]) !==
+            JSON.stringify(previousConfig[key])
+          ) {
+            changedProperties[key] = newConfigData[key];
+          }
+        } else {
+          changedProperties[key] = newConfigData[key];
+        }
+      }
+    }
 
-  // Add global mouse up listener
-  useEffect(() => {
-    const handleGlobalMouseUp = () => {
-      setIsDragging(null);
-    };
+    // Check for deleted properties (properties that existed before but don't exist now)
+    for (const key in previousConfig) {
+      if (!(key in newConfigData)) {
+        changedProperties[key] = undefined;
+      }
+    }
 
-    document.addEventListener(
-      'mouseup',
-      handleGlobalMouseUp,
-    );
-    return () => {
-      document.removeEventListener(
-        'mouseup',
-        handleGlobalMouseUp,
-      );
-    };
-  }, []);
+    // Send changed properties to iframe if any changes were detected
+    if (Object.keys(changedProperties).length > 0) {
+      try {
+        iframeRef.current.contentWindow.postMessage(
+          changedProperties,
+        );
+      } catch (error) {
+        console.error(
+          'Failed to send config changes to iframe:',
+          error,
+        );
+      }
+    }
+  }, [files, configFileId, iframeRef]);
 
   return (
     <div className="visual-editor">
       {visualEditorWidgets.map((widgetConfig, index) => {
         if (widgetConfig.type === 'number') {
+          // Use local value if available, otherwise fall back to config value
           const currentValue =
+            localValues[widgetConfig.property] ??
             configData[widgetConfig.property];
           const percentage = calculatePercentage(
             currentValue,
@@ -267,11 +255,10 @@ export const VisualEditor = () => {
                   min={widgetConfig.min}
                   max={widgetConfig.max}
                   step="any"
-                  onInput={onInputUpdate(
+                  value={currentValue}
+                  onChange={onSliderChange(
                     widgetConfig.property,
-                    configData[widgetConfig.property],
                   )}
-                  defaultValue={currentValue}
                 />
                 <div
                   className="slider-track-fill"

package/src/client/VZSidebar/aiCopyPaste.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;
+};