vzcode 2.3.0 → 2.4.0

package/src/client/vzReducer/updatePane.ts

@@ -0,0 +1,40 @@
+import { Pane, PaneId, TabState } from '../../types';
+import { VizFileId } from '@vizhub/viz-types';
+
+// Immutable update pattern for updating a pane's tab list.
+export const updatePane = ({
+  pane,
+  activePaneId,
+  newTabList,
+  newActiveFileId,
+}: {
+  pane: Pane;
+  activePaneId: PaneId;
+  newTabList?: Array<TabState>;
+  newActiveFileId?: VizFileId | null;
+}): Pane =>
+  pane.type === 'splitPane'
+    ? {
+        ...pane,
+        children: pane.children.map((child) =>
+          updatePane({
+            pane: child,
+            activePaneId,
+            newTabList,
+            newActiveFileId,
+          }),
+        ),
+      }
+    : pane.id === activePaneId
+      ? {
+          ...pane,
+          tabList:
+            newTabList !== undefined
+              ? newTabList
+              : pane.tabList,
+          activeFileId:
+            newActiveFileId !== undefined
+              ? newActiveFileId
+              : pane.activeFileId,
+        }
+      : pane;

package/src/client/vzReducer/updatePresenceIndicatorReducer.ts

@@ -0,0 +1,30 @@
+import { VZAction, VZState } from '.';
+
+export const updatePresenceIndicatorReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'update_presence_indicator') {
+    // True if there's already an entry for this user.
+    const needsUpdate =
+      state.sidebarPresenceIndicators.find(
+        (d) =>
+          d.username === action.presenceIndicator.username,
+      );
+
+    return {
+      ...state,
+      sidebarPresenceIndicators: needsUpdate
+        ? state.sidebarPresenceIndicators.map((d) =>
+            d.username === action.presenceIndicator.username
+              ? action.presenceIndicator
+              : d,
+          )
+        : [
+            ...state.sidebarPresenceIndicators,
+            action.presenceIndicator,
+          ],
+    };
+  }
+  return state;
+};

package/src/client/vzReducer/visualEditorReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setIsVisualEditorOpenReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_is_visual_editor_open'
+    ? { ...state, isVisualEditorOpen: action.value }
+    : state;

package/src/ot.ts

@@ -0,0 +1,24 @@
+// Operational Transformation (OT) utilities.
+// 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;
+
+// The OT type used throughout the codebase.
+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/randomId.ts

@@ -0,0 +1,15 @@
+// Generate a random ID string consisting of digits.
+const numDigits = 8;
+export const randomId = () => {
+  let randomString = '';
+  for (let i = 0; i < numDigits; i++) {
+    randomString += Math.floor(Math.random() * 10);
+  }
+  return randomString;
+};
+
+// const probabilityOfCollision =
+//   1 - Math.pow(1 - 1 / Math.pow(10, numDigits), numRuns);
+// Using this formula, the probability of generating the same ID twice
+// when using 8 digits and running the code 1000 times is approximately
+// 0.0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001

package/src/reactRouterExports.ts

@@ -0,0 +1,15 @@
+// The React Router exports have been a pain to deal with.
+// After upgrading Node and React Router, there were random errors.
+// And we want to migrate soon from `react-router-dom` to `react-router`,
+// so the exports are centralized here.
+import * as reactRouterDOM from 'react-router-dom';
+
+export const {
+  useSearchParams,
+
+  // This actually is the only thing that works.
+  // It looks crazy, but it works.
+  // - reactRouterDOM.default works for Vite SSR build
+  // - reactRouterDOM works for Vite frontend build
+  // @ts-ignore
+} = reactRouterDOM.default || reactRouterDOM;

package/src/runCode.ts

@@ -0,0 +1,27 @@
+import { generateRunId } from '@vizhub/viz-utils';
+import { SubmitOperation } from './types';
+import { VizContent } from '@vizhub/viz-types';
+
+/**
+ * Creates a runCode function that triggers code execution by changing the `runId` in the content.
+ * This works for both client-side (with submitOperation) and server-side (with ShareDB document).
+ */
+export const createRunCodeFunction =
+  (submitOperation: SubmitOperation) => () => {
+    submitOperation((content: VizContent) => ({
+      ...content,
+      runId: generateRunId(),
+    }));
+  };
+
+/**
+ * Creates a runCodeRef object compatible with React refs.
+ * This is useful for maintaining compatibility with existing code that expects a ref.
+ */
+export const createRunCodeRef = (
+  submitOperation: SubmitOperation,
+) => {
+  return {
+    current: createRunCodeFunction(submitOperation),
+  };
+};

package/src/server/aiChatHandler/aiEditing.ts

@@ -0,0 +1,151 @@
+import {
+  assembleFullPrompt,
+  prepareFilesForPrompt,
+} from 'editcodewithai';
+import { formatMarkdownFiles } from 'llm-code-format';
+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.
+const delayStart = false;
+
+/**
+ * Performs AI chat without editing - just generates a response
+ */
+export const performAIChat = async ({
+  prompt,
+  shareDBDoc,
+  llmFunction,
+}) => {
+  const preparedFiles = prepareFilesForPrompt(
+    shareDBDoc.data.files,
+  );
+  const filesContext = formatMarkdownFiles(preparedFiles);
+
+  // 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,
+}) => {
+  // 1. Capture the current state of files before editing
+  const beforeFiles = createFilesSnapshot(
+    shareDBDoc.data.files,
+  );
+
+  const preparedFiles = prepareFilesForPrompt(
+    shareDBDoc.data.files,
+  );
+  const filesContext = formatMarkdownFiles(preparedFiles);
+
+  // 2. 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 and incremental file updates
+  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
+  const afterFiles = createFilesSnapshot(
+    shareDBDoc.data.files,
+  );
+  const diffData = generateFilesUnifiedDiff(
+    beforeFiles,
+    afterFiles,
+  );
+
+  return {
+    content: result.content,
+    generationId: result.generationId,
+    diffData,
+  };
+};