vzcode 2.18.0 → 2.22.0

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

@@ -11,7 +11,7 @@
       display: flex;
       align-items: center;
       gap: 8px;
-      font-size: 12px;
+      font-size: 14px;
       color: var(--bs-secondary-color);
 
       .files-changed {
@@ -134,4 +134,40 @@
       background-color: var(--d2h-bg-color);
     }
   }
+
+  .deleted-file {
+    margin-bottom: 8px;
+    border: 1px solid #30363d;
+    border-radius: 6px;
+    background-color: rgb(41, 44, 52);
+    overflow: hidden;
+
+    .deleted-file-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px;
+      background-color: #161b22;
+      border-bottom: 1px solid #30363d;
+
+      .deleted-file-name {
+        color: #e6edf3;
+        font-weight: 600;
+        font-family:
+          'SFMono-Regular', Consolas, 'Liberation Mono',
+          Menlo, monospace;
+        font-size: 14px;
+      }
+
+      .deleted-file-status {
+        color: #f85149;
+        font-weight: 600;
+        font-size: 14px;
+        background-color: rgba(248, 81, 73, 0.1);
+        padding: 4px 8px;
+        border-radius: 4px;
+        border: 1px solid rgba(248, 81, 73, 0.4);
+      }
+    }
+  }
 }

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

@@ -9,6 +9,8 @@ import {
   UnifiedFilesDiff,
   parseUnifiedDiffStats,
   combineUnifiedDiffs,
+  isFileDeletion,
+  getDeletedFileName,
 } from '../../../utils/fileDiff';
 import * as Diff2Html from 'diff2html';
 import 'diff2html/bundles/css/diff2html.min.css';
@@ -41,21 +43,33 @@ export const DiffView = forwardRef<
     useContext(VZCodeContext);
   const diffContainerRef = useRef<HTMLDivElement>(null);
 
-  const unifiedDiffs = Object.values(diffData).filter(
+  const allDiffs = Object.values(diffData).filter(
     (diff) => diff.length > 0,
   );
 
-  // Calculate statistics from all unified diffs
+  // Separate deleted files from regular diffs
+  const deletedFiles: string[] = [];
+  const regularDiffs: string[] = [];
+
+  for (const diff of allDiffs) {
+    if (isFileDeletion(diff)) {
+      deletedFiles.push(diff);
+    } else {
+      regularDiffs.push(diff);
+    }
+  }
+
+  // Calculate statistics from regular unified diffs only
   let totalAdditions = 0;
   let totalDeletions = 0;
 
-  for (const unifiedDiff of unifiedDiffs) {
+  for (const unifiedDiff of regularDiffs) {
     const stats = parseUnifiedDiffStats(unifiedDiff);
     totalAdditions += stats.additions;
     totalDeletions += stats.deletions;
   }
 
-  // Combine all unified diffs and convert to HTML using diff2html
+  // Combine regular unified diffs and convert to HTML using diff2html
   const combinedUnifiedDiff = combineUnifiedDiffs(diffData);
   const diffHtml = Diff2Html.html(combinedUnifiedDiff, {
     drawFileList: false,
@@ -155,7 +169,7 @@ export const DiffView = forwardRef<
     };
   }, [diffHtml, content, openTab, setIsAIChatOpen]);
 
-  if (unifiedDiffs.length === 0) {
+  if (allDiffs.length === 0) {
     return null;
   }
 
@@ -164,8 +178,8 @@ export const DiffView = forwardRef<
       <div className="diff-summary" id="diff-summary">
         <div className="diff-stats">
           <span className="files-changed">
-            {unifiedDiffs.length} file
-            {unifiedDiffs.length !== 1 ? 's' : ''} changed
+            {allDiffs.length} file
+            {allDiffs.length !== 1 ? 's' : ''} changed
           </span>
           {totalAdditions > 0 && (
             <span className="additions">
@@ -177,18 +191,43 @@ export const DiffView = forwardRef<
               -{totalDeletions}
             </span>
           )}
+          {deletedFiles.length > 0 && (
+            <span className="deletions">
+              {deletedFiles.length} deleted
+            </span>
+          )}
         </div>
       </div>
 
-      <div
-        className="diff-files"
-        ref={diffContainerRef}
-        tabIndex={-1}
-        role="region"
-        aria-label="Code diff content"
-        aria-describedby="diff-summary"
-        dangerouslySetInnerHTML={{ __html: diffHtml }}
-      />
+      {/* Render deleted files */}
+      {deletedFiles.map((deletionMarker, index) => {
+        const fileName = getDeletedFileName(deletionMarker);
+        return (
+          <div key={index} className="deleted-file">
+            <div className="deleted-file-header">
+              <span className="deleted-file-name">
+                {fileName}
+              </span>
+              <span className="deleted-file-status">
+                File deleted
+              </span>
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Render regular diffs */}
+      {regularDiffs.length > 0 && (
+        <div
+          className="diff-files"
+          ref={diffContainerRef}
+          tabIndex={-1}
+          role="region"
+          aria-label="Code diff content"
+          aria-describedby="diff-summary"
+          dangerouslySetInnerHTML={{ __html: diffHtml }}
+        />
+      )}
     </div>
   );
 });

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

@@ -362,6 +362,25 @@
     margin-top: 1rem;
     margin-bottom: 0.5rem;
     color: inherit;
+    font-weight: 600;
+  }
+
+  h1 {
+    font-size: 1.25rem; // 20px at 16px base
+  }
+
+  h2 {
+    font-size: 1.125rem; // 18px at 16px base
+  }
+
+  h3 {
+    font-size: 1rem; // 16px at 16px base
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 0.875rem; // 14px at 16px base
   }
 
   ul,
@@ -784,10 +803,29 @@
     h6 {
       margin: 8px 0 6px 0;
       color: var(--vh-color-neutral-04);
+      font-weight: 600;
 
       &:first-child {
         margin-top: 0;
       }
     }
+
+    h1 {
+      font-size: 1.125rem; // 18px at 16px base
+    }
+
+    h2 {
+      font-size: 1rem; // 16px at 16px base
+    }
+
+    h3 {
+      font-size: 0.9375rem; // 15px at 16px base
+    }
+
+    h4,
+    h5,
+    h6 {
+      font-size: 0.8125rem; // 13px at 16px base
+    }
   }
 }

package/src/client/VZSidebar/FileTypeIcon.tsx

@@ -25,6 +25,7 @@ export function getExtensionIcon(fileName: string) {
     case 'json':
       return <JsonSVG />;
     case 'md':
+    case 'prompt':
       return <MarkdownSVG />;
     case 'html':
       return <HtmlSVG />;

package/src/client/VZSidebar/index.tsx

@@ -32,7 +32,7 @@ import { MicSVG } from '../Icons/MicSVG';
 import { sortFileTree } from '../sortFileTree';
 import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { VZCodeContext } from '../VZCodeContext';
-import { AIChat } from './AIChat';
+import { AIChat } from '../../llm-streaming-ui/components/index.js';
 import { Listing } from './Listing';
 import { Search } from './Search';
 import { DeleteConfirmationModal } from './DeleteConfirmationModal';

package/src/client/featureFlags.ts

@@ -9,3 +9,10 @@ export const enableAskMode = false;
 
 // Phase 0: Feature flag for minimal AI edit flow
 export const enableMinimalEditFlow = true;
+
+// If true, only include the minimal set of extensions,
+// namely only the JSON1 OT extension and that's it.
+// This is useful for testing and debugging the OT functionality
+// without any other extensions getting in the way,
+// just to rule them out as the source of a bug.
+export const MINIMAL_EXTENSIONS = false;

package/src/llm-streaming-server/README.md

@@ -0,0 +1,71 @@
+# LLM Streaming Server
+
+Server-side library for streaming LLM responses with ShareDB integration.
+
+## Overview
+
+This module is being extracted from VZCode's AI chat functionality to become a standalone, reusable library. It provides server-side functionality for:
+
+- **LLM Streaming**: Creating and managing streaming LLM functions with OpenAI/OpenRouter
+- **AI Code Editing**: Performing AI-assisted code transformations and edits
+- **ShareDB Integration**: Managing chat operations and real-time collaboration
+- **Request Validation**: Validating incoming AI chat requests
+- **Error Handling**: Handling errors gracefully in streaming contexts
+
+## Current Status
+
+⚠️ **Work in Progress**: This is Phase 1 of the extraction plan. The files have been copied to this directory and imports have been updated, but the code is not yet decoupled from VZCode.
+
+## Files
+
+- `index.ts` - Main entry point exporting all public APIs
+- `llmStreaming.ts` - Core LLM streaming functionality with OpenAI/OpenRouter
+- `aiEditing.ts` - AI-assisted code editing operations
+- `chatOperations.ts` - ShareDB chat operations (messages, events, streaming)
+- `validation.ts` - Request validation utilities
+- `errorHandling.ts` - Error handling for streaming contexts
+
+## Dependencies
+
+Currently depends on:
+
+- `openai` - OpenAI SDK for LLM interactions
+- `sharedb` - Real-time collaborative editing framework
+- `llm-code-format` - Markdown parsing for code blocks
+- `editcodewithai` - Code editing utilities
+- VZCode utilities: `../types.js`, `../ot.js`, `../randomId.js`, etc.
+
+## Future Plans
+
+This module will eventually be:
+
+1. Decoupled from VZCode-specific types and utilities
+2. Published as `@vizhub/llm-streaming-server` on npm
+3. Made framework-agnostic (can work with Express, Fastify, etc.)
+4. Fully documented with usage examples
+
+See the [main issue](https://github.com/vizhub-core/vzcode/issues/XXX) for the full extraction plan.
+
+## Usage (Current)
+
+Currently, this module is imported by `src/server/aiChatHandler/index.ts`:
+
+```typescript
+import { createLLMFunction } from '../../llm-streaming-server/llmStreaming.js';
+import { performAIEditing } from '../../llm-streaming-server/aiEditing.js';
+import {
+  ensureChatsExist,
+  ensureChatExists,
+  addUserMessage,
+  setAIStatus,
+} from '../../llm-streaming-server/chatOperations.js';
+```
+
+## Contributing
+
+As this module is being extracted, please:
+
+- Keep changes minimal and focused
+- Maintain backward compatibility with VZCode
+- Update tests when modifying functionality
+- Document any new dependencies or breaking changes

package/src/llm-streaming-server/aiEditing.ts

@@ -0,0 +1,102 @@
+import {
+  assembleFullPrompt,
+  prepareFilesForPrompt,
+} from 'editcodewithai';
+import { formatMarkdownFiles } from 'llm-code-format';
+import {
+  createFilesSnapshot,
+  generateFilesUnifiedDiff,
+} from '../utils/fileDiff.js';
+
+// Dev flag for waiting 1 second before starting the LLM function.
+// Useful for debugging and testing purposes, e.g. checking the typing indicator.
+const delayStart = false;
+
+/**
+ * Performs AI chat without editing - just generates a response
+ */
+export const performAIChat = async ({
+  prompt,
+  shareDBDoc,
+  llmFunction,
+}) => {
+  const { files } = prepareFilesForPrompt(
+    shareDBDoc.data.files,
+  );
+  const filesContext = formatMarkdownFiles(files);
+
+  // 2. Assemble the final prompt for Q&A mode
+  const fullPrompt = assembleFullPrompt({
+    filesContext,
+    prompt,
+    editFormat: 'whole',
+  });
+
+  if (delayStart) {
+    await new Promise((resolve) =>
+      setTimeout(resolve, 1000),
+    );
+  }
+
+  // Call the LLM function which will handle streaming but won't edit files
+  const result = await llmFunction(fullPrompt);
+
+  return {
+    content: result.content,
+    generationId: result.generationId,
+    diffData: {}, // No file changes in ask mode
+  };
+};
+
+/**
+ * Performs AI editing operations using streaming with incremental OT operations
+ */
+export const performAIEditing = async ({
+  prompt,
+  shareDBDoc,
+  llmFunction,
+  runCode,
+}) => {
+  // Capture the current state of files before editing
+  const beforeFiles = createFilesSnapshot(
+    shareDBDoc.data.files,
+  );
+
+  const { files } = prepareFilesForPrompt(
+    shareDBDoc.data.files,
+  );
+  const filesContext = formatMarkdownFiles(files);
+
+  // Assemble the final prompt
+  const fullPrompt = assembleFullPrompt({
+    filesContext,
+    prompt,
+    editFormat: 'whole',
+  });
+
+  if (delayStart) {
+    await new Promise((resolve) =>
+      setTimeout(resolve, 1000),
+    );
+  }
+
+  // Call the LLM function which will handle streaming, incremental file updates, and Prettier formatting
+  const result = await llmFunction(fullPrompt);
+
+  runCode();
+
+  // 4. Capture the state of files after editing and formatting, then generate diff
+  const afterFiles = createFilesSnapshot(
+    shareDBDoc.data.files,
+  );
+  const diffData = generateFilesUnifiedDiff(
+    beforeFiles,
+    afterFiles,
+  );
+
+  return {
+    content: result.content,
+    generationId: result.generationId,
+    diffData,
+  };
+};