vzcode 2.16.0 → 2.18.0

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

@@ -140,8 +140,7 @@
 .file-editing-indicator {
   display: flex;
   align-items: center;
-  padding: 0.75rem;
-  margin: 0.5rem 0;
+  margin: 0.25rem 0;
   background-color: var(--vscode-editor-background);
   border: 1px solid var(--vscode-panel-border);
   border-radius: 4px;
@@ -150,6 +149,7 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    width: 100%;
   }
 
   .file-editing-icon {
@@ -161,6 +161,7 @@
   .file-editing-text {
     color: var(--vscode-foreground);
     font-size: 0.9rem;
+    flex: 1;
 
     code {
       background-color: var(
@@ -170,6 +171,36 @@
       border-radius: 3px;
       font-family: var(--vscode-editor-font-family);
     }
+
+    .file-editing-done-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      gap: 0.5rem;
+    }
+
+    .file-editing-done-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 16px;
+      font-weight: 500;
+      margin-left: 4px;
+    }
+
+    .file-editing-done-widgets {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex-shrink: 0;
+
+      // // Override the margin-top for undo-button-container when inside file editing indicator
+      // .undo-button-container {
+      //   margin-top: 0;
+      //   margin-bottom: 0;
+      // }
+    }
   }
 }
 
@@ -288,33 +319,6 @@
   line-height: 1.4;
   word-wrap: break-word;
 
-  .undo-button-container {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    margin-top: 16px;
-  }
-
-  .undo-button {
-    background-color: #dc3545;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 4px 8px;
-    font-size: 12px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-
-    &:hover:not(:disabled) {
-      background-color: #c82333;
-    }
-
-    &:disabled {
-      background-color: #6c757d;
-      cursor: not-allowed;
-    }
-  }
-
   // Markdown styling for dark backgrounds
   pre {
     background-color: rgba(0, 0, 0, 0.3);

package/src/client/hooks/useAutoScroll.ts

@@ -148,7 +148,6 @@ export const useAutoScroll = (
     // Ignore scroll events during programmatic scrolling
     if (isProgrammaticScrollRef.current) return;
 
-    console.log('handleScroll called');
     const container = containerRef.current;
     if (!container) return;
 

package/src/server/aiChatHandler/aiEditing.ts

@@ -7,9 +7,6 @@ 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.
@@ -60,7 +57,7 @@ export const performAIEditing = async ({
   llmFunction,
   runCode,
 }) => {
-  // 1. Capture the current state of files before editing
+  // Capture the current state of files before editing
   const beforeFiles = createFilesSnapshot(
     shareDBDoc.data.files,
   );
@@ -70,7 +67,7 @@ export const performAIEditing = async ({
   );
   const filesContext = formatMarkdownFiles(files);
 
-  // 2. Assemble the final prompt
+  // Assemble the final prompt
   const fullPrompt = assembleFullPrompt({
     filesContext,
     prompt,
@@ -83,55 +80,9 @@ export const performAIEditing = async ({
     );
   }
 
-  // Call the LLM function which will handle streaming and incremental file updates
+  // Call the LLM function which will handle streaming, incremental file updates, and Prettier formatting
   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();
 
   // 4. Capture the state of files after editing and formatting, then generate diff

package/src/server/aiChatHandler/chatOperations.ts

@@ -376,6 +376,8 @@ export const updateFiles = (
     ...shareDBDoc.data,
     files,
   });
+  DEBUG && console.log('updateFiles op:');
+  DEBUG && console.log(JSON.stringify(filesOp, null, 2));
   shareDBDoc.submitOp(filesOp);
 };
 

package/src/server/aiChatHandler/llmStreaming.ts

@@ -4,8 +4,10 @@ import {
   StreamingMarkdownParser,
 } from 'llm-code-format';
 import { mergeFileChanges } from 'editcodewithai';
-import { VizChatId } from '@vizhub/viz-types';
-import { generateRunId } from '@vizhub/viz-utils';
+import {
+  FileCollection,
+  VizChatId,
+} from '@vizhub/viz-types';
 import {
   updateFiles,
   updateAIScratchpad,
@@ -14,11 +16,11 @@ import {
   updateStreamingStatus,
   finalizeStreamingMessage,
 } from './chatOperations.js';
-import { diff } from '../../ot.js';
 import {
   ShareDBDoc,
   ExtendedVizContent,
 } from '../../types.js';
+import { formatFiles } from '../prettier.js';
 
 const DEBUG = false;
 
@@ -285,51 +287,30 @@ export const createLLMFunction = ({
       await completeFileEditing(currentEditingFileName);
     }
 
+    // // Capture the current state of files before applying changes
+    // const beforeFiles = createFilesSnapshot(
+    //   shareDBDoc.data.files,
+    // );
+
+    // Parse the full content to extract file changes
+    // export type FileCollection = Record<string, string>;
+    const newFilesUnformatted: FileCollection =
+      parseMarkdownFiles(fullContent, 'bold').files;
+
+    // Run Prettier on `newFiles` before applying them
+    const newFilesFormatted = await formatFiles(
+      newFilesUnformatted,
+    );
+
     // Apply all the edits at once
-    updateFiles(
-      shareDBDoc,
-      mergeFileChanges(
-        shareDBDoc.data.files,
-        parseMarkdownFiles(fullContent, 'bold').files,
-      ),
+    const mergedChanges = mergeFileChanges(
+      shareDBDoc.data.files,
+      newFilesFormatted,
     );
+    updateFiles(shareDBDoc, mergedChanges);
 
     // Finalize streaming message
-    await finalizeStreamingMessage(shareDBDoc, chatId);
-
-    // Generate a new runId to trigger a run when AI finishes editing
-    // This will trigger a re-run without hot reloading
-    const newRunId = generateRunId();
-    const runIdOp = diff(shareDBDoc.data, {
-      ...shareDBDoc.data,
-      runId: newRunId,
-    });
-    shareDBDoc.submitOp(runIdOp, (error) => {
-      if (error) {
-        console.warn(
-          'Error setting runId after AI editing:',
-          error,
-        );
-      } else {
-        DEBUG &&
-          console.log(
-            'Set new runId after AI editing:',
-            newRunId,
-          );
-      }
-    });
-
-    // Write chunks file for debugging
-    // if (DEBUG) {
-    //   const chunksFileJSONpath = `./ai-chunks-${chatId}.json`;
-    //   fs.writeFileSync(
-    //     chunksFileJSONpath,
-    //     JSON.stringify(chunks, null, 2),
-    //   );
-    //   console.log(
-    //     `AI chunks written to ${chunksFileJSONpath}`,
-    //   );
-    // }
+    finalizeStreamingMessage(shareDBDoc, chatId);
 
     return {
       content: fullContent,

package/src/server/prettier.ts

@@ -5,7 +5,10 @@ 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';
+import {
+  VizFileId,
+  FileCollection,
+} from '@vizhub/viz-types';
 
 // Parser mappings - matches client-side implementation
 const parsers = {
@@ -88,23 +91,36 @@ export const formatFile = async (
  * Returns a map of fileId -> formatted text for successfully formatted files
  */
 export const formatFiles = async (
-  files: VizFiles,
-  fileIds?: VizFileId[],
+  fileCollection:
+    | FileCollection
+    | { [key: string]: { name: string; text: string } },
 ): Promise<{ [fileId: VizFileId]: string }> => {
   const results: { [fileId: VizFileId]: string } = {};
-  const targetFileIds = fileIds || Object.keys(files);
+  const targetFileIds = Object.keys(fileCollection);
 
   // Process files in parallel for better performance
   const formatPromises = targetFileIds.map(
     async (fileId) => {
-      const file = files[fileId];
-      if (!file) return;
+      const fileData = fileCollection[fileId];
+      if (!fileData) return;
+
+      // Handle both FileCollection format and test format
+      const fileName =
+        typeof fileData === 'string'
+          ? fileId
+          : fileData.name;
+      const fileText =
+        typeof fileData === 'string'
+          ? fileData
+          : fileData.text;
+
+      if (!fileText) return;
 
       const formatted = await formatFile(
-        file.text,
-        file.name,
+        fileText,
+        fileName,
       );
-      if (formatted !== null && formatted !== file.text) {
+      if (formatted !== null && formatted !== fileText) {
         results[fileId] = formatted;
       }
     },

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

@@ -1,77 +0,0 @@
-import React, { useMemo } from 'react';
-import { timestampToDate } from '@vizhub/viz-utils';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { StreamingEvent } from '../../../types.js';
-import { IndividualFileDiff } from './IndividualFileDiff';
-
-const DEBUG = false;
-
-interface StreamingMessageProps {
-  timestamp: number;
-  events: StreamingEvent[];
-  isActive?: boolean; // Is this the currently streaming message?
-  children?: React.ReactNode;
-}
-
-export const StreamingMessage: React.FC<
-  StreamingMessageProps
-> = ({ timestamp, events, isActive, children }) => {
-  DEBUG &&
-    console.log(
-      'StreamingMessage: Rendered with events:',
-      events,
-    );
-
-  // Memoize date formatting to avoid repeated computation
-  const formattedTime = useMemo(() => {
-    return timestampToDate(timestamp).toLocaleTimeString(
-      [],
-      {
-        hour: '2-digit',
-        minute: '2-digit',
-      },
-    );
-  }, [timestamp]);
-
-  return (
-    <div className="ai-chat-message assistant streaming">
-      <div className="ai-chat-message-content">
-        {/* Render events in order */}
-        {events.map((event, index) => {
-          switch (event.type) {
-            case 'text_chunk':
-              return (
-                <div
-                  key={`text-${index}`}
-                  className="text-chunk"
-                >
-                  <Markdown remarkPlugins={[remarkGfm]}>
-                    {event.content}
-                  </Markdown>
-                </div>
-              );
-            case 'file_complete':
-              return (
-                <IndividualFileDiff
-                  key={`file-${event.fileName}-${index}`}
-                  fileName={event.fileName}
-                  beforeContent={event.beforeContent || ''}
-                  afterContent={event.afterContent || ''}
-                />
-              );
-            case 'file_start':
-              // File start events are now handled by centralized status logic in MessageList
-              return null;
-            default:
-              return null;
-          }
-        })}
-        {isActive && children}
-      </div>
-      <div className="ai-chat-message-time">
-        {formattedTime}
-      </div>
-    </div>
-  );
-};