vzcode 1.43.0 → 1.45.0

package/src/client/VZSidebar/AIChat/DiffView.scss

@@ -0,0 +1,125 @@
+.diff-view {
+  margin: 12px 0;
+
+  .diff-summary {
+    margin-bottom: 8px;
+
+    .diff-stats {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--bs-secondary-color);
+
+      .files-changed {
+        color: white;
+        font-weight: 600;
+      }
+
+      .additions {
+        color: #28a745;
+        font-weight: 600;
+      }
+
+      .deletions {
+        color: #dc3545;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .diff-files {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    // Fix diff2html styling issues for dark theme and layout
+    .d2h-wrapper {
+      // Override diff2html variables for dark theme
+      --d2h-bg-color: rgb(41, 44, 52);
+      --d2h-color: #e6edf3;
+      --d2h-border-color: #30363d;
+      --d2h-dim-color: #6e7681;
+      --d2h-info-bg-color: #161b22;
+      --d2h-file-header-bg-color: #161b22;
+      --d2h-file-header-border-color: #30363d;
+      --d2h-line-border-color: #21262d;
+      --d2h-ins-bg-color: rgba(46, 160, 67, 0.15);
+      --d2h-ins-border-color: rgba(46, 160, 67, 0.4);
+      --d2h-ins-highlight-bg-color: rgba(46, 160, 67, 0.4);
+      --d2h-ins-label-color: #3fb950;
+      --d2h-del-bg-color: rgba(248, 81, 73, 0.1);
+      --d2h-del-border-color: rgba(248, 81, 73, 0.4);
+      --d2h-del-highlight-bg-color: rgba(248, 81, 73, 0.4);
+      --d2h-del-label-color: #f85149;
+
+      background-color: var(--d2h-bg-color);
+      color: var(--d2h-color);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    // Fix layout issues with line numbers
+    .d2h-diff-table {
+      position: relative;
+      background-color: var(--d2h-bg-color);
+    }
+
+    .d2h-code-linenumber {
+      position: relative !important;
+      float: none !important;
+      display: table-cell !important;
+      width: auto !important;
+      background-color: var(--d2h-bg-color) !important;
+      border-color: var(--d2h-line-border-color) !important;
+      color: var(--d2h-dim-color) !important;
+    }
+
+    .d2h-code-side-linenumber {
+      position: relative !important;
+      float: none !important;
+      display: table-cell !important;
+      width: auto !important;
+      background-color: var(--d2h-bg-color) !important;
+      border-color: var(--d2h-line-border-color) !important;
+      color: var(--d2h-dim-color) !important;
+    }
+
+    // Ensure proper table layout
+    .d2h-diff-tbody tr {
+      display: table-row;
+    }
+
+    .d2h-diff-tbody td {
+      display: table-cell;
+      vertical-align: top;
+    }
+
+    // Fix file header styling
+    .d2h-file-header {
+      background-color: var(
+        --d2h-file-header-bg-color
+      ) !important;
+      border-bottom: 1px solid
+        var(--d2h-file-header-border-color) !important;
+      color: var(--d2h-color);
+    }
+
+    // Ensure proper line styling
+    .d2h-del {
+      background-color: var(--d2h-del-bg-color) !important;
+      border-color: var(--d2h-del-border-color) !important;
+    }
+
+    .d2h-ins {
+      background-color: var(--d2h-ins-bg-color) !important;
+      border-color: var(--d2h-ins-border-color) !important;
+    }
+
+    // Fix wrapper border
+    .d2h-file-wrapper {
+      border: 1px solid var(--d2h-border-color) !important;
+      background-color: var(--d2h-bg-color);
+    }
+  }
+}

package/src/client/VZSidebar/AIChat/DiffView.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  UnifiedFilesDiff,
+  parseUnifiedDiffStats,
+  combineUnifiedDiffs,
+} from '../../../utils/fileDiff';
+import * as Diff2Html from 'diff2html';
+import 'diff2html/bundles/css/diff2html.min.css';
+import './DiffView.scss';
+
+interface DiffViewProps {
+  diffData: UnifiedFilesDiff;
+}
+
+export const DiffView: React.FC<DiffViewProps> = ({
+  diffData,
+}) => {
+  const unifiedDiffs = Object.values(diffData).filter(
+    (diff) => diff.length > 0,
+  );
+
+  if (unifiedDiffs.length === 0) {
+    return null;
+  }
+
+  // Calculate statistics from all unified diffs
+  let totalAdditions = 0;
+  let totalDeletions = 0;
+
+  for (const unifiedDiff of unifiedDiffs) {
+    const stats = parseUnifiedDiffStats(unifiedDiff);
+    totalAdditions += stats.additions;
+    totalDeletions += stats.deletions;
+  }
+
+  // Combine all unified diffs and convert to HTML using diff2html
+  const combinedUnifiedDiff = combineUnifiedDiffs(diffData);
+  const diffHtml = Diff2Html.html(combinedUnifiedDiff, {
+    drawFileList: false,
+    matching: 'words',
+    diffStyle: 'word',
+    outputFormat: 'line-by-line',
+  });
+
+  return (
+    <div className="diff-view">
+      <div className="diff-summary">
+        <div className="diff-stats">
+          <span className="files-changed">
+            {unifiedDiffs.length} file
+            {unifiedDiffs.length !== 1 ? 's' : ''} changed
+          </span>
+          {totalAdditions > 0 && (
+            <span className="additions">
+              +{totalAdditions}
+            </span>
+          )}
+          {totalDeletions > 0 && (
+            <span className="deletions">
+              -{totalDeletions}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div
+        className="diff-files"
+        dangerouslySetInnerHTML={{ __html: diffHtml }}
+      />
+    </div>
+  );
+};

package/src/client/VZSidebar/AIChat/Message.tsx

@@ -2,6 +2,9 @@ import { timestampToDate } from '@vizhub/viz-utils';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { useMemo, memo } from 'react';
+import { DiffView } from './DiffView';
+import { UnifiedFilesDiff } from '../../../utils/fileDiff';
+import { enableDiffView } from '../../featureFlags';
 
 interface MessageProps {
   id: string;
@@ -9,6 +12,7 @@ interface MessageProps {
   content: string;
   timestamp: number;
   isStreaming?: boolean;
+  diffData?: UnifiedFilesDiff;
 }
 
 const MessageComponent = ({
@@ -16,6 +20,7 @@ const MessageComponent = ({
   content,
   timestamp,
   isStreaming,
+  diffData,
 }: MessageProps) => {
   // Memoize date formatting to avoid repeated computation
   const formattedTime = useMemo(() => {
@@ -32,12 +37,18 @@ const MessageComponent = ({
   const messageClassName = useMemo(() => {
     return `ai-chat-message ${role}${isStreaming ? ' streaming' : ''}`;
   }, [role, isStreaming]);
+
   return (
     <div className={messageClassName}>
       <div className="ai-chat-message-content">
         <Markdown remarkPlugins={[remarkGfm]}>
           {content}
         </Markdown>
+        {enableDiffView &&
+          diffData &&
+          Object.keys(diffData).length > 0 && (
+            <DiffView diffData={diffData} />
+          )}
       </div>
       <div className="ai-chat-message-time">
         {formattedTime}

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

@@ -48,6 +48,7 @@ const MessageListComponent = ({
           role={msg.role}
           content={msg.content}
           timestamp={msg.timestamp}
+          diffData={(msg as any).diffData}
         />
       ))}
 

package/src/client/VZSidebar/AIChat/index.tsx

@@ -13,7 +13,9 @@ import './styles.scss';
 const defaultAIChatEndpoint = '/ai-chat-message';
 
 export const AIChat = () => {
-  const [message, setMessage] = useState('');
+  const { aiChatMessage, setAIChatMessage } =
+    useContext(VZCodeContext);
+
   const [isLoading, setIsLoading] = useState(false);
   const [currentChatId] = useState(() => uuidv4());
 
@@ -40,9 +42,9 @@ export const AIChat = () => {
   );
 
   const handleSendMessage = useCallback(async () => {
-    if (!message.trim() || isLoading) return;
+    if (!aiChatMessage.trim() || isLoading) return;
 
-    setMessage('');
+    setAIChatMessage('');
     setIsLoading(true);
 
     // Call backend endpoint for AI response
@@ -55,7 +57,7 @@ export const AIChat = () => {
         },
         body: JSON.stringify({
           ...aiChatOptions,
-          content: message.trim(),
+          content: aiChatMessage.trim(),
           chatId: currentChatId,
         }),
       });
@@ -75,7 +77,7 @@ export const AIChat = () => {
       setIsLoading(false);
     }
   }, [
-    message,
+    aiChatMessage,
     isLoading,
     aiChatEndpoint,
     aiChatOptions,
@@ -90,8 +92,8 @@ export const AIChat = () => {
         isLoading={isLoading}
       />
       <ChatInput
-        message={message}
-        setMessage={setMessage}
+        aiChatMessage={aiChatMessage}
+        setAIChatMessage={setAIChatMessage}
         onSendMessage={handleSendMessage}
         isLoading={isLoading}
         focused={aiChatFocused}

package/src/client/VZSidebar/aiCopyPaste.ts

@@ -8,12 +8,14 @@ import {
 } from 'editcodewithai';
 import { VizFiles } from '@vizhub/viz-types';
 import { vizFilesToFileCollection } from '@vizhub/viz-utils';
+import JSZip from 'jszip';
 
 export const createAICopyPasteHandlers = (
   files: VizFiles,
   submitOperation: any,
   setCopyButtonText: (text: string) => void,
   setPasteButtonText: (text: string) => void,
+  setExportButtonText: (text: string) => void,
 ) => {
   // Copy for AI - formats all files and copies to clipboard
   const handleCopyForAI = async () => {
@@ -79,8 +81,16 @@ export const createAICopyPasteHandlers = (
         return;
       }
 
+      // Preprocess to remove formatting instructions section to avoid creating extra files
+      const preprocessed = normalized
+        .split('## Formatting Instructions')[0]
+        .trim();
+
       // Parse the markdown files format
-      const parsed = parseMarkdownFiles(normalized, 'bold');
+      const parsed = parseMarkdownFiles(
+        preprocessed,
+        'bold',
+      );
 
       if (
         parsed.files &&
@@ -124,8 +134,61 @@ export const createAICopyPasteHandlers = (
     }
   };
 
+  // Export to ZIP - creates and downloads a ZIP file with all viz files
+  const handleExportToZip = async () => {
+    if (!files || Object.keys(files).length === 0) {
+      setExportButtonText('No files to export');
+      setTimeout(
+        () => setExportButtonText('Export to ZIP'),
+        2000,
+      );
+      return;
+    }
+
+    try {
+      // Create the ZIP
+      const zip = new JSZip();
+
+      // Add each file to the ZIP
+      Object.entries(files).forEach(([fileId, file]) => {
+        const fileName = file.name || fileId;
+        const fileContent = file.text || '';
+        zip.file(fileName, fileContent);
+      });
+
+      // Generate and download
+      const blob = await zip.generateAsync({
+        type: 'blob',
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'viz-files.zip';
+      a.click();
+      URL.revokeObjectURL(url);
+
+      // Show success feedback
+      setExportButtonText('Exported!');
+      setTimeout(
+        () => setExportButtonText('Export to ZIP'),
+        2000,
+      );
+    } catch (error) {
+      console.error(
+        'Failed to export files to ZIP:',
+        error,
+      );
+      setExportButtonText('Error');
+      setTimeout(
+        () => setExportButtonText('Export to ZIP'),
+        2000,
+      );
+    }
+  };
+
   return {
     handleCopyForAI,
     handlePasteForAI,
+    handleExportToZip,
   };
 };

package/src/client/VZSidebar/index.tsx

@@ -164,15 +164,22 @@ export const VZSidebar = ({
     useState('Copy for AI');
   const [pasteButtonText, setPasteButtonText] =
     useState('Paste for AI');
+  const [exportButtonText, setExportButtonText] =
+    useState('Export to ZIP');
 
   // Create AI copy/paste handlers
-  const { handleCopyForAI, handlePasteForAI } = useMemo(
+  const {
+    handleCopyForAI,
+    handlePasteForAI,
+    handleExportToZip,
+  } = useMemo(
     () =>
       createAICopyPasteHandlers(
         files,
         submitOperation,
         setCopyButtonText,
         setPasteButtonText,
+        setExportButtonText,
       ),
     [files, submitOperation],
   );
@@ -548,6 +555,15 @@ export const VZSidebar = ({
       </div>
       {!isAIChatOpen && !isSearchOpen && (
         <div className="ai-buttons">
+          {filesExist && (
+            <button
+              className="ai-button export-button"
+              onClick={handleExportToZip}
+              title="Export files to ZIP"
+            >
+              {exportButtonText}
+            </button>
+          )}
           {filesExist && (
             <button
               className="ai-button copy-button"
@@ -557,6 +573,7 @@ export const VZSidebar = ({
               {copyButtonText}
             </button>
           )}
+
           <button
             className="ai-button paste-button"
             onClick={handlePasteForAI}

package/src/client/VZSidebar/styles.scss

@@ -335,6 +335,15 @@
         }
       }
 
+      &.export-button {
+        border-color: var(--vh-color-primary-03);
+
+        &:hover {
+          background: var(--vh-color-hover-dark);
+          border-color: var(--vh-color-neutral-04);
+        }
+      }
+
       &.paste-button {
         border-color: var(--vh-color-success-03);
 

package/src/client/VZSidebar/useDragAndDrop.tsx

@@ -78,6 +78,23 @@ export const useDragAndDrop = () => {
     return isText;
   };
 
+  const isImageFile = (file: File): boolean => {
+    const imageTypes = ['image/'];
+    const isImage =
+      imageTypes.some((type) =>
+        file.type.startsWith(type),
+      ) ||
+      file.name.match(
+        /\.(png|jpg|jpeg|gif|bmp|svg|webp)$/i,
+      ) !== null;
+
+    DEBUG &&
+      console.log(
+        `[useDragAndDrop] File ${file.name} is${isImage ? '' : ' not'} an image file`,
+      );
+    return isImage;
+  };
+
   const readFileAsText = (file: File): Promise<string> => {
     return new Promise((resolve, reject) => {
       DEBUG &&
@@ -127,6 +144,98 @@ export const useDragAndDrop = () => {
     });
   };
 
+  const readImageAsBase64 = (
+    file: File,
+  ): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      DEBUG &&
+        console.log(
+          `[useDragAndDrop] Reading image file: ${file.name}`,
+        );
+
+      if (!isImageFile(file)) {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Rejected non-image file: ${file.name}`,
+          );
+        reject(
+          new Error(
+            `File ${file.name} is not an image file`,
+          ),
+        );
+        return;
+      }
+
+      // For SVG files, read as text if they're text-based
+      if (
+        file.type === 'image/svg+xml' ||
+        file.name.toLowerCase().endsWith('.svg')
+      ) {
+        const textReader = new FileReader();
+        textReader.onload = (e) => {
+          if (e.target?.result) {
+            DEBUG &&
+              console.log(
+                `[useDragAndDrop] Successfully read SVG file as text: ${file.name}`,
+              );
+            resolve(e.target.result as string);
+          } else {
+            reject(
+              new Error(
+                `Failed to read SVG file ${file.name}`,
+              ),
+            );
+          }
+        };
+        textReader.onerror = () =>
+          reject(
+            new Error(
+              `Error reading SVG file ${file.name}`,
+            ),
+          );
+        textReader.readAsText(file);
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target?.result) {
+          DEBUG &&
+            console.log(
+              `[useDragAndDrop] Successfully read image file: ${file.name}`,
+            );
+          // Return just the base64 part without the data URL prefix
+          const base64 = (e.target.result as string).split(
+            ',',
+          )[1];
+          resolve(base64);
+        } else {
+          DEBUG &&
+            console.log(
+              `[useDragAndDrop] Failed to read image file: ${file.name}`,
+            );
+          reject(
+            new Error(
+              `Failed to read image file ${file.name}`,
+            ),
+          );
+        }
+      };
+      reader.onerror = () => {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Error reading image file: ${file.name}`,
+          );
+        reject(
+          new Error(
+            `Error reading image file ${file.name}`,
+          ),
+        );
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+
   const processEntry = async (
     entry: FileSystemEntry,
     path: string,
@@ -144,12 +253,21 @@ export const useDragAndDrop = () => {
           );
         entry.file(async (file) => {
           try {
-            const content = await readFileAsText(file);
-            DEBUG &&
-              console.log(
-                `[useDragAndDrop] Creating file: ${path}${file.name}`,
-              );
-            createFile(`${path}${file.name}`, content);
+            if (isImageFile(file)) {
+              const content = await readImageAsBase64(file);
+              DEBUG &&
+                console.log(
+                  `[useDragAndDrop] Creating image file: ${path}${file.name}`,
+                );
+              createFile(`${path}${file.name}`, content);
+            } else {
+              const content = await readFileAsText(file);
+              DEBUG &&
+                console.log(
+                  `[useDragAndDrop] Creating text file: ${path}${file.name}`,
+                );
+              createFile(`${path}${file.name}`, content);
+            }
           } catch (error) {
             console.error(
               `Error processing file ${file.name}:`,
@@ -237,8 +355,15 @@ export const useDragAndDrop = () => {
                   `[useDragAndDrop] Processing dropped file: ${file.name}`,
                 );
               try {
-                const content = await readFileAsText(file);
-                createFile(file.name, content);
+                if (isImageFile(file)) {
+                  const content =
+                    await readImageAsBase64(file);
+                  createFile(file.name, content);
+                } else {
+                  const content =
+                    await readFileAsText(file);
+                  createFile(file.name, content);
+                }
               } catch (error) {
                 console.error(
                   `Error processing file ${file.name}:`,

package/src/client/featureFlags.ts

@@ -2,3 +2,5 @@ export const enableLiveKit =
   import.meta.env.VITE_ENABLE_LIVEKIT === 'true';
 
 export const enableAIChat = true;
+
+export const enableDiffView = true;

package/src/client/useRuntimeError.ts

@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react';
+
+// Custom hook to manage runtime error state
+export const useRuntimeError = () => {
+  // State to hold the runtime error message
+  // `null` means no errors
+  // If this is a string, it's the
+  // error message from runtime execution.
+  const [runtimeError, setRuntimeError] = useState<
+    string | null
+  >(null);
+
+  // Callback function to handle runtime errors
+  // This will be passed to the createRuntime function
+  const handleRuntimeError = useCallback(
+    (formattedErrorMessage: string) => {
+      setRuntimeError(formattedErrorMessage);
+    },
+    [],
+  );
+
+  // Function to clear runtime errors
+  const clearRuntimeError = useCallback(() => {
+    setRuntimeError(null);
+  }, []);
+
+  return {
+    runtimeError,
+    handleRuntimeError,
+    clearRuntimeError,
+  };
+};

package/src/client/utils/isImageFile.ts

@@ -0,0 +1,12 @@
+/**
+ * Utility function to check if a file is an image based on its name.
+ * @param fileName - The name of the file (e.g., "image.png", "photo.jpg")
+ * @returns true if the file is an image, false otherwise
+ */
+export const isImageFile = (fileName: string): boolean => {
+  return (
+    fileName.match(
+      /\.(png|jpg|jpeg|gif|bmp|svg|webp)$/i,
+    ) !== null
+  );
+};