vzcode 2.18.0 → 2.22.0

package/src/llm-streaming-ui/components/useSpeechRecognition.ts

@@ -0,0 +1,116 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  Dispatch,
+  SetStateAction,
+} from 'react';
+
+export interface UseSpeechRecognitionResult {
+  isSpeaking: boolean;
+  toggleSpeechRecognition: () => void;
+  stopSpeaking: () => void;
+}
+
+export const useSpeechRecognition = (
+  onTranscriptChange: Dispatch<SetStateAction<string>>,
+): UseSpeechRecognitionResult => {
+  const [isSpeaking, setIsSpeaking] =
+    useState<boolean>(false);
+  const [recognition, setRecognition] =
+    // @ts-ignore
+    useState<SpeechRecognition | null>(null);
+  const [, setFinalTranscript] = useState<string>('');
+
+  // Speech recognition setup
+  useEffect(() => {
+    // Check if browser supports SpeechRecognition
+    const SpeechRecognition =
+      // @ts-ignore
+      window.SpeechRecognition ||
+      // @ts-ignore
+      window.webkitSpeechRecognition;
+
+    if (SpeechRecognition) {
+      const recognitionInstance = new SpeechRecognition();
+      recognitionInstance.continuous = true;
+      recognitionInstance.interimResults = true;
+
+      recognitionInstance.onresult = (event) => {
+        let finalText = '';
+        let interimText = '';
+
+        // Process all results to separate final and interim text
+        for (let i = 0; i < event.results.length; i++) {
+          const result = event.results[i];
+          if (result.isFinal) {
+            finalText += result[0].transcript;
+          } else {
+            interimText += result[0].transcript;
+          }
+        }
+
+        // Update our final transcript state
+        setFinalTranscript(finalText);
+
+        // Combine final and interim text and update the prompt
+        const fullTranscript = finalText + interimText;
+        onTranscriptChange(fullTranscript);
+      };
+
+      recognitionInstance.onerror = (event) => {
+        console.error(
+          'Speech recognition error',
+          event.error,
+        );
+        setIsSpeaking(false);
+      };
+
+      recognitionInstance.onend = () => {
+        setIsSpeaking(false);
+        // Reset final transcript when recognition ends
+        setFinalTranscript('');
+      };
+
+      setRecognition(recognitionInstance);
+
+      return () => {
+        recognitionInstance.abort();
+      };
+    }
+  }, [onTranscriptChange]);
+
+  const toggleSpeechRecognition = useCallback(() => {
+    if (!recognition) {
+      console.error(
+        'Speech recognition not supported in this browser',
+      );
+      return;
+    }
+
+    if (isSpeaking) {
+      recognition.stop();
+      setIsSpeaking(false);
+    } else {
+      // Reset final transcript when starting new recognition
+      setFinalTranscript('');
+      recognition.start();
+      setIsSpeaking(true);
+    }
+  }, [isSpeaking, recognition]);
+
+  const stopSpeaking = useCallback(() => {
+    if (recognition && isSpeaking) {
+      recognition.stop();
+      setIsSpeaking(false);
+      // Reset final transcript when manually stopping
+      setFinalTranscript('');
+    }
+  }, [isSpeaking, recognition]);
+
+  return {
+    isSpeaking,
+    toggleSpeechRecognition,
+    stopSpeaking,
+  };
+};

package/src/llm-streaming-ui/index.ts

@@ -0,0 +1,34 @@
+/**
+ * @vizhub/llm-streaming-ui
+ *
+ * Client-side React UI components for displaying streaming AI edits and chat.
+ * This module provides functionality for:
+ * - Displaying AI chat messages with streaming support
+ * - Showing real-time diffs and code changes
+ * - Rendering thinking/reasoning scratchpads
+ * - Managing file editing indicators
+ * - Voice input support
+ */
+
+// Main AI Chat component
+export { AIChat } from './components/index.js';
+
+// Message display components
+export { MessageList } from './components/MessageList.js';
+export { Message } from './components/Message.js';
+
+// Diff visualization components
+export { DiffView } from './components/DiffView.js';
+export { IndividualFileDiff } from './components/IndividualFileDiff.js';
+
+// Status and indicator components
+export { TypingIndicator } from './components/TypingIndicator.js';
+export { ThinkingScratchpad } from './components/ThinkingScratchpad.js';
+export { AIEditingStatusIndicator as FileEditingIndicator } from './components/FileEditingIndicator';
+export { JumpToLatestButton } from './components/JumpToLatestButton.js';
+
+// Input components
+export { ChatInput } from './components/ChatInput.js';
+
+// Custom hooks
+export { useSpeechRecognition } from './components/useSpeechRecognition.js';

package/src/server/aiChatHandler/chatOperations.ts

@@ -51,6 +51,7 @@ export const ensureChatExists = (
 
 /**
  * Adds a user message to the chat
+ * Clears old messages to reflect that each prompt is a self-contained code transformation
  */
 export const addUserMessage = (
   shareDBDoc: ShareDBDoc<VizContent>,
@@ -70,10 +71,7 @@ export const addUserMessage = (
       ...shareDBDoc.data.chats,
       [chatId]: {
         ...shareDBDoc.data.chats[chatId],
-        messages: [
-          ...shareDBDoc.data.chats[chatId].messages,
-          userMessage,
-        ],
+        messages: [userMessage], // Replace old messages with just the new user message
         updatedAt: dateToTimestamp(new Date()),
       },
     },
@@ -379,6 +377,7 @@ export const updateFiles = (
   DEBUG && console.log('updateFiles op:');
   DEBUG && console.log(JSON.stringify(filesOp, null, 2));
   shareDBDoc.submitOp(filesOp);
+  return filesOp;
 };
 
 /**

package/src/server/aiChatHandler/index.ts

@@ -1,16 +1,16 @@
-import { validateRequest } from './validation.js';
+import { validateRequest } from '../../llm-streaming-server/validation.js';
 import {
   ensureChatsExist,
   ensureChatExists,
   addUserMessage,
   setAIStatus,
-} from './chatOperations.js';
-import { createLLMFunction } from './llmStreaming.js';
-import { performAIEditing } from './aiEditing.js';
+} from '../../llm-streaming-server/chatOperations.js';
+import { createLLMFunction } from '../../llm-streaming-server/llmStreaming.js';
+import { performAIEditing } from '../../llm-streaming-server/aiEditing.js';
 import {
   handleError,
   handleBackgroundError,
-} from './errorHandling.js';
+} from '../../llm-streaming-server/errorHandling.js';
 import { createRunCodeFunction } from '../../runCode.js';
 import { ShareDBDoc } from '../../types.js';
 import { VizContent } from '@vizhub/viz-types';

package/src/server/aiChatHandler/llmStreaming.ts

@@ -7,6 +7,7 @@ import { mergeFileChanges } from 'editcodewithai';
 import {
   FileCollection,
   VizChatId,
+  VizFiles,
 } from '@vizhub/viz-types';
 import {
   updateFiles,
@@ -22,11 +23,18 @@ import {
 } from '../../types.js';
 import { formatFiles } from '../prettier.js';
 
+// Verbose logs
 const DEBUG = false;
 
 // Useful for testing/debugging the streaming behavior
 const slowMode = false;
 
+// If the `EMIT_FIXTURES` variable is true,
+// then an output file in the `test/fixtures` folder
+// with the before and after file states for testing purposes.
+// This feeds into tests in codemirror-ot.
+const EMIT_FIXTURES = false;
+
 /**
  * Creates and configures the LLM function for streaming with reasoning tokens
  */
@@ -109,7 +117,7 @@ export const createLLMFunction = ({
     const completeFileEditing = async (
       fileName: string,
     ) => {
-      if (fileName && currentFileContent) {
+      if (fileName) {
         DEBUG &&
           console.log(
             `LLMStreaming: Completing file editing for ${fileName}`,
@@ -185,6 +193,38 @@ export const createLLMFunction = ({
           }
         }
       },
+      onFileDelete: async (fileName: string) => {
+        DEBUG &&
+          console.log(
+            `LLMStreaming: File marked for deletion: ${fileName}`,
+          );
+
+        // Emit any accumulated text chunk first
+        await emitTextChunk();
+
+        // Complete previous file if any
+        if (currentEditingFileName) {
+          await completeFileEditing(currentEditingFileName);
+        }
+
+        // Reset current editing state
+        currentEditingFileName = null;
+        currentFileContent = '';
+
+        // Emit file delete event
+        await addStreamingEvent(shareDBDoc, chatId, {
+          type: 'file_delete',
+          fileName,
+          timestamp: Date.now(),
+        });
+
+        // Update status
+        updateStreamingStatus(
+          shareDBDoc,
+          chatId,
+          `Deleting ${fileName}...`,
+        );
+      },
     };
 
     const parser = new StreamingMarkdownParser(callbacks);
@@ -297,17 +337,60 @@ export const createLLMFunction = ({
     const newFilesUnformatted: FileCollection =
       parseMarkdownFiles(fullContent, 'bold').files;
 
-    // Run Prettier on `newFiles` before applying them
+    // Run Prettier on `newFiles` before applying them,
+    // preserving empty files as empty
+    // since that is the cue to delete a file.
     const newFilesFormatted = await formatFiles(
       newFilesUnformatted,
     );
 
+    // Capture the current state of files before applying changes
+    let vizFilesBefore: VizFiles;
+    if (EMIT_FIXTURES) {
+      vizFilesBefore = JSON.parse(
+        JSON.stringify(shareDBDoc.data.files),
+      );
+    }
+
     // Apply all the edits at once
-    const mergedChanges = mergeFileChanges(
+    const vizFilesAfter: VizFiles = mergeFileChanges(
       shareDBDoc.data.files,
       newFilesFormatted,
     );
-    updateFiles(shareDBDoc, mergedChanges);
+
+    const filesOp = updateFiles(shareDBDoc, vizFilesAfter);
+
+    if (EMIT_FIXTURES) {
+      const fs = await import('fs');
+      const path = await import('path');
+      const testCasesDir = path.resolve(
+        process.cwd(),
+        '../',
+        'fixtures',
+      );
+      if (!fs.existsSync(testCasesDir)) {
+        fs.mkdirSync(testCasesDir, { recursive: true });
+      }
+      const timestamp = new Date()
+        .toISOString()
+        .replace(/[:.]/g, '-');
+      const testCasePath = path.join(
+        testCasesDir,
+        `ai-chat-${timestamp}.json`,
+      );
+      const testCaseData = {
+        vizFilesBefore,
+        vizFilesAfter,
+        filesOp,
+      };
+      fs.writeFileSync(
+        testCasePath,
+        JSON.stringify(testCaseData, null, 2),
+      );
+      console.log(
+        `AI chat test case written to ${testCasePath}`,
+      );
+    }
 
     // Finalize streaming message
     finalizeStreamingMessage(shareDBDoc, chatId);

package/src/server/prettier.ts

@@ -5,10 +5,7 @@ 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 {
-  VizFileId,
-  FileCollection,
-} from '@vizhub/viz-types';
+import { FileCollection } from '@vizhub/viz-types';
 
 // Parser mappings - matches client-side implementation
 const parsers = {
@@ -85,43 +82,45 @@ export const formatFile = async (
   }
 };
 
+// Keys are file names, values are file text contents
+//export type FileCollection = Record<string, string>;
+
 /**
  * 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 (
-  fileCollection:
-    | FileCollection
-    | { [key: string]: { name: string; text: string } },
-): Promise<{ [fileId: VizFileId]: string }> => {
-  const results: { [fileId: VizFileId]: string } = {};
-  const targetFileIds = Object.keys(fileCollection);
+  fileCollection: FileCollection,
+): Promise<FileCollection> => {
+  const results: FileCollection = {};
+  const targetFileNames = Object.keys(fileCollection);
 
   // Process files in parallel for better performance
-  const formatPromises = targetFileIds.map(
-    async (fileId) => {
-      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;
+  const formatPromises = targetFileNames.map(
+    async (fileName: string) => {
+      const fileText = fileCollection[fileName];
+      results[fileName] = fileText;
 
-      if (!fileText) return;
+      // Preserve empty files as empty,
+      // since this is the cue to delete a file.
+      if (!fileText || fileText.trim() === '') {
+        return;
+      }
 
-      const formatted = await formatFile(
-        fileText,
-        fileName,
-      );
-      if (formatted !== null && formatted !== fileText) {
-        results[fileId] = formatted;
+      try {
+        const formatted = await formatFile(
+          fileText,
+          fileName,
+        );
+        if (formatted !== null && formatted !== fileText) {
+          results[fileName] = formatted;
+        }
+      } catch (error) {
+        console.error(
+          `Error formatting ${fileName}:`,
+          error,
+        );
       }
     },
   );

package/src/types.ts

@@ -245,6 +245,11 @@ export type StreamingEvent =
       afterContent: string;
       timestamp: number;
     }
+  | {
+      type: 'file_delete';
+      fileName: string;
+      timestamp: number;
+    }
   | {
       type: 'status_update';
       status: string;

package/src/utils/fileDiff.ts

@@ -2,7 +2,33 @@ import { createTwoFilesPatch } from 'diff';
 import { VizFiles, VizFileId } from '@vizhub/viz-types';
 
 export interface UnifiedFilesDiff {
-  [fileId: VizFileId]: string; // Unified diff string
+  [fileId: VizFileId]: string; // Unified diff string or deletion marker
+}
+
+// Special marker to indicate a file deletion
+export const FILE_DELETION_MARKER = '__FILE_DELETED__';
+
+/**
+ * Check if a diff string represents a file deletion
+ */
+export function isFileDeletion(
+  diffString: string,
+): boolean {
+  return diffString.startsWith(FILE_DELETION_MARKER);
+}
+
+/**
+ * Extract file name from a deletion marker
+ */
+export function getDeletedFileName(
+  diffString: string,
+): string {
+  if (!isFileDeletion(diffString)) {
+    return '';
+  }
+  return diffString.substring(
+    FILE_DELETION_MARKER.length + 1,
+  );
 }
 
 /**
@@ -19,6 +45,11 @@ export function generateFileUnifiedDiff(
     return '';
   }
 
+  // Handle file deletion case - when file existed before but is now empty/deleted
+  if (beforeContent && !afterContent) {
+    return `${FILE_DELETION_MARKER}:${fileName}`;
+  }
+
   // Use the diff library's createTwoFilesPatch function to generate unified diff
   const unifiedDiff = createTwoFilesPatch(
     fileName,
@@ -109,9 +140,12 @@ export function parseUnifiedDiffStats(
 
 /**
  * Combine multiple unified diffs into a single diff string
+ * Note: File deletion markers are excluded from combination
  */
 export function combineUnifiedDiffs(
   unifiedDiffs: UnifiedFilesDiff,
 ): string {
-  return Object.values(unifiedDiffs).join('\n');
+  return Object.values(unifiedDiffs)
+    .filter((diff) => !isFileDeletion(diff))
+    .join('\n');
 }