vzcode 1.40.0 → 1.42.0

package/src/client/vzReducer/searchReducer.test.ts

@@ -0,0 +1,250 @@
+import { describe, expect, it } from 'vitest';
+import { setSearchResultsReducer } from './searchReducer';
+import { VZAction, VZState, createInitialState } from '.';
+import { defaultTheme } from '../themes';
+
+// Mock ShareDBDoc for testing
+const createMockShareDBDoc = (files: any) => ({
+  data: { files },
+});
+
+const initialState: VZState = createInitialState({
+  defaultTheme,
+});
+
+describe('searchReducer', () => {
+  describe('setSearchResultsReducer', () => {
+    it('should find case-insensitive matches', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const Hello = "world";\nconst goodbye = "HELLO";',
+        },
+        'file2.js': {
+          name: 'file2.js',
+          text: 'function hello() {\n  return "Hello World";\n}',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello', // lowercase search pattern
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      // Should find matches in both files despite different cases
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(2);
+
+      // Check file1.js results
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results).toBeDefined();
+      expect(file1Results.matches).toHaveLength(2); // "Hello" and "HELLO"
+      expect(file1Results.matches[0].line).toBe(1);
+      expect(file1Results.matches[0].index).toBe(6); // position of "Hello"
+      expect(file1Results.matches[1].line).toBe(2);
+      expect(file1Results.matches[1].index).toBe(18); // position of "HELLO"
+
+      // Check file2.js results
+      const file2Results =
+        newState.search.results['file2.js'];
+      expect(file2Results).toBeDefined();
+      expect(file2Results.matches).toHaveLength(2); // "hello" and "Hello"
+      expect(file2Results.matches[0].line).toBe(1);
+      expect(file2Results.matches[0].index).toBe(9); // position of "hello"
+      expect(file2Results.matches[1].line).toBe(2);
+      expect(file2Results.matches[1].index).toBe(10); // position of "Hello"
+    });
+
+    it('should find exact case matches', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const hello = "world";',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello', // exact case match
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results.matches).toHaveLength(1);
+      expect(file1Results.matches[0].line).toBe(1);
+      expect(file1Results.matches[0].index).toBe(6);
+    });
+
+    it('should not find matches when pattern does not exist', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const world = "test";',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello',
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(0);
+    });
+
+    it('should handle uppercase search pattern', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const Hello = "world";\nfunction hello() {}',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'HELLO', // uppercase search pattern
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results.matches).toHaveLength(2); // Should find both "Hello" and "hello"
+    });
+
+    it('should handle mixed case search pattern', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const HeLLo = "world";\nconst hello = "test";\nconst HELLO = "end";',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'HeLLo', // mixed case search pattern
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results.matches).toHaveLength(3); // Should find all three variations
+    });
+
+    it('should skip files without text content', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const hello = "world";',
+        },
+        'file2.js': {
+          name: 'file2.js',
+          // no text property
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello',
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      // Should only find results in file1.js
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      expect(
+        newState.search.results['file1.js'],
+      ).toBeDefined();
+      expect(
+        newState.search.results['file2.js'],
+      ).toBeUndefined();
+    });
+  });
+});

package/src/client/vzReducer/searchReducer.ts

@@ -24,7 +24,9 @@ function searchPattern(
       const matches = [];
 
       for (let j = 0; j < lines.length; j++) {
-        const index = lines[j].indexOf(pattern);
+        const index = lines[j]
+          .toLowerCase()
+          .indexOf(pattern.toLowerCase());
 
         if (index !== -1) {
           matches.push({

package/src/{ot.js → ot.ts}

@@ -2,6 +2,8 @@
 // This file is the central point where the OT types are imported.
 // Localized to one file so it's easy to change it in future.
 import OTJSON1Presence from 'sharedb-client-browser/dist/ot-json1-presence-umd.cjs';
+import jsondiff from 'json0-ot-diff';
+import diffMatchPatch from 'diff-match-patch';
 
 export const { json1Presence, textUnicode } =
   OTJSON1Presence;
@@ -11,3 +13,12 @@ export const otType = json1Presence.type;
 
 // Applies an OT op to an object.
 export const apply = otType.apply;
+
+export const diff = (a, b) =>
+  jsondiff(
+    a,
+    b,
+    diffMatchPatch,
+    json1Presence,
+    textUnicode,
+  );

package/src/runCode.ts

@@ -1,31 +1,14 @@
 import { SubmitOperation } from './types';
 import { VizContent } from '@vizhub/viz-types';
-import { createSubmitOperation } from './submitOperation';
 
 /**
  * Creates a runCode function that triggers code execution by flashing `isInteracting` to `true`.
  * This works for both client-side (with submitOperation) and server-side (with ShareDB document).
  */
 export const createRunCodeFunction = (
-  submitOperationOrDoc:
-    | SubmitOperation
-    | { data: any; submitOp: (ops: any) => void },
+  submitOperation: SubmitOperation,
 ) => {
   return () => {
-    let submitOperation: SubmitOperation;
-
-    // Check if this is a client-side submitOperation or server-side ShareDB document
-    if (typeof submitOperationOrDoc === 'function') {
-      // Client-side: already a submitOperation function
-      submitOperation =
-        submitOperationOrDoc as SubmitOperation;
-    } else {
-      // Server-side: create submitOperation from ShareDB document
-      submitOperation = createSubmitOperation(
-        submitOperationOrDoc,
-      );
-    }
-
     // Use the unified submitOperation approach for both client and server
     submitOperation((content: VizContent) => ({
       ...content,
@@ -39,7 +22,7 @@ export const createRunCodeFunction = (
       submitOperation(
         ({ isInteracting, ...newDocument }) => newDocument,
       );
-    }, 0);
+    }, 100);
   };
 };
 
@@ -48,11 +31,9 @@ export const createRunCodeFunction = (
  * This is useful for maintaining compatibility with existing code that expects a ref.
  */
 export const createRunCodeRef = (
-  submitOperationOrDoc:
-    | SubmitOperation
-    | { data: any; submitOp: (ops: any) => void },
+  submitOperation: SubmitOperation,
 ) => {
   return {
-    current: createRunCodeFunction(submitOperationOrDoc),
+    current: createRunCodeFunction(submitOperation),
   };
 };

package/src/server/aiChatHandler/aiEditing.ts

@@ -4,6 +4,10 @@ import {
 } from 'editcodewithai';
 import { formatMarkdownFiles } from 'llm-code-format';
 
+// 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 editing operations using streaming with incremental OT operations
  */
@@ -25,16 +29,15 @@ export const performAIEditing = async ({
     editFormat: 'whole',
   });
 
+  if (delayStart) {
+    await new Promise((resolve) =>
+      setTimeout(resolve, 1000),
+    );
+  }
+
   // Call the LLM function which will handle streaming and incremental file updates
   const result = await llmFunction(fullPrompt);
 
-  // Clear the scratchpad and update status
-  // clearAIScratchpadAndStatus(
-  //   shareDBDoc,
-  //   chatId,
-  //   'Done editing with AI.',
-  // );
-
   runCode();
 
   return {

package/src/server/aiChatHandler/chatOperations.ts

@@ -1,6 +1,13 @@
 import { dateToTimestamp } from '@vizhub/viz-utils';
-import { diff } from '../../client/diff.js';
 import { randomId } from '../../randomId.js';
+import { ShareDBDoc } from '../../types.js';
+import { diff } from '../../ot.js';
+import {
+  VizChatId,
+  VizContent,
+  VizFileId,
+  VizFiles,
+} from '@vizhub/viz-types';
 
 /**
  * Ensures the chats object exists in the ShareDB document
@@ -18,7 +25,10 @@ export const ensureChatsExist = (shareDBDoc) => {
 /**
  * Ensures a specific chat exists in the ShareDB document
  */
-export const ensureChatExists = (shareDBDoc, chatId) => {
+export const ensureChatExists = (
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+) => {
   if (!shareDBDoc.data.chats[chatId]) {
     const op = diff(shareDBDoc.data, {
       ...shareDBDoc.data,
@@ -40,9 +50,9 @@ export const ensureChatExists = (shareDBDoc, chatId) => {
  * Adds a user message to the chat
  */
 export const addUserMessage = (
-  shareDBDoc,
-  chatId,
-  content,
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+  content: string,
 ) => {
   const userMessage = {
     id: `user-${Date.now()}`,
@@ -74,9 +84,9 @@ export const addUserMessage = (
  * Updates AI status in the chat
  */
 export const updateAIStatus = (
-  shareDBDoc,
-  chatId,
-  status,
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+  status: string,
 ) => {
   const op = diff(shareDBDoc.data, {
     ...shareDBDoc.data,
@@ -95,9 +105,9 @@ export const updateAIStatus = (
  * Updates AI scratchpad content
  */
 export const updateAIScratchpad = (
-  shareDBDoc,
-  chatId,
-  content,
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+  content: string,
 ) => {
   const op = diff(shareDBDoc.data, {
     ...shareDBDoc.data,
@@ -122,9 +132,9 @@ export const updateAIScratchpad = (
  * Clears AI scratchpad and updates status
  */
 export const clearAIScratchpadAndStatus = (
-  shareDBDoc,
-  chatId,
-  status,
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+  status: string,
 ) => {
   const op = diff(shareDBDoc.data, {
     ...shareDBDoc.data,
@@ -141,12 +151,108 @@ export const clearAIScratchpadAndStatus = (
 };
 
 /**
- * Adds an AI response message to the chat
+ * Creates an initial empty AI message for streaming
+ */
+export const createAIMessage = (
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+) => {
+  const aiMessage = {
+    id: `assistant-${Date.now()}`,
+    role: 'assistant',
+    content: '',
+    timestamp: dateToTimestamp(new Date()),
+  };
+
+  const messageOp = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    chats: {
+      ...shareDBDoc.data.chats,
+      [chatId]: {
+        ...shareDBDoc.data.chats[chatId],
+        messages: [
+          ...shareDBDoc.data.chats[chatId].messages,
+          aiMessage,
+        ],
+        updatedAt: dateToTimestamp(new Date()),
+      },
+    },
+  });
+  shareDBDoc.submitOp(messageOp);
+
+  return aiMessage.id;
+};
+
+/**
+ * Updates the content of an AI message during streaming
+ */
+export const updateAIMessageContent = (
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+  messageId: string,
+  content: string,
+) => {
+  const chat = shareDBDoc.data.chats[chatId];
+  const messageIndex = chat.messages.findIndex(
+    (msg) => msg.id === messageId,
+  );
+
+  if (messageIndex === -1) {
+    console.warn(
+      `AI message with id ${messageId} not found`,
+    );
+    return;
+  }
+
+  const updatedMessages = [...chat.messages];
+  updatedMessages[messageIndex] = {
+    ...updatedMessages[messageIndex],
+    content,
+  };
+
+  const messageOp = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    chats: {
+      ...shareDBDoc.data.chats,
+      [chatId]: {
+        ...chat,
+        messages: updatedMessages,
+        updatedAt: dateToTimestamp(new Date()),
+      },
+    },
+  });
+  shareDBDoc.submitOp(messageOp);
+};
+
+/**
+ * Finalizes an AI message by clearing temporary fields
+ */
+export const finalizeAIMessage = (
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+) => {
+  const op = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    chats: {
+      ...shareDBDoc.data.chats,
+      [chatId]: {
+        ...shareDBDoc.data.chats[chatId],
+        aiScratchpad: undefined,
+        aiStatus: undefined,
+        updatedAt: dateToTimestamp(new Date()),
+      },
+    },
+  });
+  shareDBDoc.submitOp(op);
+};
+
+/**
+ * Adds an AI response message to the chat (legacy function, kept for compatibility)
  */
 export const addAIMessage = (
-  shareDBDoc,
-  chatId,
-  content,
+  shareDBDoc: ShareDBDoc<VizContent>,
+  chatId: VizChatId,
+  content?: string,
 ) => {
   const aiResponse = {
     id: Date.now() + 1,
@@ -178,7 +284,10 @@ export const addAIMessage = (
 /**
  * Updates files in the ShareDB document
  */
-export const updateFiles = (shareDBDoc, files) => {
+export const updateFiles = (
+  shareDBDoc: ShareDBDoc<VizContent>,
+  files: VizFiles,
+) => {
   const filesOp = diff(shareDBDoc.data, {
     ...shareDBDoc.data,
     files,
@@ -186,30 +295,6 @@ export const updateFiles = (shareDBDoc, files) => {
   shareDBDoc.submitOp(filesOp);
 };
 
-/**
- * Sets isInteracting flag
- */
-export const setIsInteracting = (
-  shareDBDoc,
-  isInteracting,
-) => {
-  // Only generate an operation if the value is actually changing
-  const currentIsInteracting =
-    shareDBDoc.data.isInteracting;
-
-  if (currentIsInteracting === isInteracting) {
-    return;
-  }
-
-  const newState = {
-    ...shareDBDoc.data,
-    isInteracting: isInteracting,
-  };
-
-  const interactingOp = diff(shareDBDoc.data, newState);
-  shareDBDoc.submitOp(interactingOp);
-};
-
 /**
  * Finds a file ID by searching for a matching file name
  */
@@ -233,7 +318,10 @@ export const resolveFileId = (
 /**
  * Creates a new file with a random ID
  */
-export const createNewFile = (shareDBDoc, fileName) => {
+export const createNewFile = (
+  shareDBDoc: ShareDBDoc<VizContent>,
+  fileName: string,
+) => {
   // Generate a new random file ID
   const newFileId = randomId();
 
@@ -270,7 +358,10 @@ export const ensureFileExists = (shareDBDoc, fileName) => {
 /**
  * Clears the content of a file
  */
-export const clearFileContent = (shareDBDoc, fileId) => {
+export const clearFileContent = (
+  shareDBDoc: ShareDBDoc<VizContent>,
+  fileId: VizFileId,
+) => {
   const currentFile = shareDBDoc.data.files[fileId];
 
   if (currentFile && currentFile.text) {
@@ -295,29 +386,24 @@ export const clearFileContent = (shareDBDoc, fileId) => {
  * Appends a line to a file using OT operations
  */
 export const appendLineToFile = (
-  shareDBDoc,
-  fileId,
-  line,
+  shareDBDoc: ShareDBDoc<VizContent>,
+  fileId: VizFileId,
+  line: string,
 ) => {
   const currentFile = shareDBDoc.data.files[fileId];
   const currentContent = currentFile?.text || '';
   const newContent = currentContent + line + '\n';
 
-  // Create the new file state
-  const newFileState = {
-    ...currentFile,
-    text: newContent,
-  };
-
   const newDocState = {
     ...shareDBDoc.data,
     files: {
       ...shareDBDoc.data.files,
-      [fileId]: newFileState,
+      [fileId]: {
+        ...currentFile,
+        text: newContent,
+      },
     },
   };
 
-  // Generate OT operation using the diff utility
-  const op = diff(shareDBDoc.data, newDocState);
-  shareDBDoc.submitOp(op);
+  shareDBDoc.submitOp(diff(shareDBDoc.data, newDocState));
 };

package/src/server/aiChatHandler/errorHandling.ts

@@ -1,5 +1,5 @@
 import { dateToTimestamp } from '@vizhub/viz-utils';
-import { diff } from '../../client/diff.js';
+import { diff } from '../../ot.js';
 
 /**
  * Handles errors by adding an error message to the chat and clearing AI state

package/src/server/aiChatHandler/index.ts

@@ -10,6 +10,7 @@ import { handleError } from './errorHandling.js';
 import { createRunCodeFunction } from '../../runCode.js';
 import { ShareDBDoc } from '../../types.js';
 import { VizContent } from '@vizhub/viz-types';
+import { createSubmitOperation } from '../../submitOperation.js';
 
 const DEBUG = false;
 
@@ -32,6 +33,8 @@ export const handleAIChatMessage =
         content,
         'chatId:',
         chatId,
+        'shareDBDoc:',
+        shareDBDoc,
       );
     }
 
@@ -55,8 +58,11 @@ export const handleAIChatMessage =
         chatId,
       });
 
-      // Create server-side runCode function using shared module
-      const runCode = createRunCodeFunction(shareDBDoc);
+      // Create server-side runCode function using shareDBDoc
+      const submitOperation =
+        createSubmitOperation(shareDBDoc);
+      const runCode =
+        createRunCodeFunction(submitOperation);
 
       // Perform AI editing
       const editResult = await performAIEditing({