vzcode 0.26.0 → 0.28.0

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

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest';
+import { openTabReducer } from './openTabReducer';
+import { VZAction, VZState, createInitialState } from '.';
+import { defaultTheme } from '../themes';
+
+const initialState: VZState = createInitialState({
+  defaultTheme,
+});
+
+describe('openTabReducer', () => {
+  it('Opens a new tab', () => {
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: false,
+    };
+    const newState = openTabReducer(initialState, action);
+
+    expect(newState.tabList.length).toBe(1);
+    expect(newState.tabList[0].fileId).toBe('file1');
+    expect(newState.tabList[0].isTransient).toBe(false);
+    expect(newState.activeFileId).toBe('file1');
+  });
+
+  it('Replaces a transient tab', () => {
+    const stateWithTransientTab = {
+      ...initialState,
+      tabList: [{ fileId: 'file2', isTransient: true }],
+    };
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: true,
+    };
+    const newState = openTabReducer(
+      stateWithTransientTab,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(1);
+    expect(newState.tabList[0].fileId).toBe('file1');
+    expect(newState.tabList[0].isTransient).toBe(true);
+    expect(newState.activeFileId).toBe('file1');
+  });
+
+  it('Does not modify a non-transient tab', () => {
+    const stateWithNonTransientTab = {
+      ...initialState,
+      tabList: [{ fileId: 'file1', isTransient: false }],
+    };
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: true,
+    };
+    const newState = openTabReducer(
+      stateWithNonTransientTab,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(1);
+    expect(newState.tabList[0].fileId).toBe('file1');
+    expect(newState.tabList[0].isTransient).toBe(false); // should remain non-transient
+    expect(newState.activeFileId).toBe('file1');
+  });
+
+  it('Activates an already open tab', () => {
+    const stateWithMultipleTabs = {
+      ...initialState,
+      tabList: [
+        { fileId: 'file1', isTransient: false },
+        { fileId: 'file2', isTransient: false },
+      ],
+    };
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: false,
+    };
+    const newState = openTabReducer(
+      stateWithMultipleTabs,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(2);
+    expect(newState.activeFileId).toBe('file1');
+  });
+
+  it('Sets editorWantsFocus to true for non-transient tabs', () => {
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file3',
+      isTransient: false, // This tab is persistent
+    };
+    const newState = openTabReducer(initialState, action);
+
+    expect(newState.editorWantsFocus).toBe(true);
+  });
+
+  it('Sets editorWantsFocus to false for transient tabs', () => {
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file4',
+      isTransient: true, // This tab is transient
+    };
+    const newState = openTabReducer(initialState, action);
+
+    expect(newState.editorWantsFocus).toBe(false);
+  });
+});

package/src/client/vzReducer/openTabReducer.ts

@@ -0,0 +1,57 @@
+import { TabState, VZAction, VZState } from '.';
+
+export const openTabReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type !== 'open_tab') return state;
+
+  // Check if the tab is already open and if it's transient.
+  const existingTabIndex = state.tabList.findIndex(
+    (tab) => tab.fileId === action.fileId,
+  );
+  const tabExists = existingTabIndex !== -1;
+  const existingTabIsTransient =
+    tabExists &&
+    state.tabList[existingTabIndex].isTransient;
+
+  // Find if there's any other transient tab.
+  const transientTabIndex = state.tabList.findIndex(
+    (tab) =>
+      tab.isTransient && tab.fileId !== action.fileId,
+  );
+
+  // The new tab state.
+  const newTabState: TabState = {
+    fileId: action.fileId,
+    isTransient: action.isTransient,
+  };
+
+  let newTabList: Array<TabState>;
+
+  if (tabExists) {
+    if (existingTabIsTransient) {
+      newTabList = state.tabList.map((tabState) =>
+        tabState.fileId === action.fileId
+          ? newTabState
+          : tabState,
+      );
+    } else {
+      newTabList = [...state.tabList];
+    }
+  } else if (transientTabIndex !== -1) {
+    newTabList = [...state.tabList];
+    newTabList[transientTabIndex] = newTabState;
+  } else {
+    newTabList = [...state.tabList, newTabState];
+  }
+
+  return {
+    ...state,
+    activeFileId: action.fileId,
+    tabList: newTabList,
+
+    // If the tab is persistent, the editor should focus on the next render.
+    editorWantsFocus: !action.isTransient,
+  };
+};

package/src/client/vzReducer/setActiveFileIdReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setActiveFileIdReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_active_file_id'
+    ? { ...state, activeFileId: action.activeFileId }
+    : state;

package/src/client/vzReducer/setIsSettingsOpenReducer.ts

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

package/src/client/vzReducer/setThemeReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setThemeReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_theme'
+    ? { ...state, theme: action.themeLabel }
+    : state;

package/src/client/vzReducer/setUsernameReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setUsernameReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_username'
+    ? { ...state, username: action.username }
+    : state;

package/src/index.ts

@@ -15,16 +15,22 @@ export type {
 
 export { VZSidebar } from './client/VZSidebar';
 export { VZSettings } from './client/VZSettings';
-export { SplitPaneResizeContext } from './client/SplitPaneResizeContext';
+export {
+  SplitPaneResizeProvider,
+  SplitPaneResizeContext,
+} from './client/SplitPaneResizeContext';
 export { Resizer } from './client/Resizer';
 export { TabList } from './client/TabList';
 export { CodeEditor } from './client/CodeEditor';
 export { usePrettier } from './client/usePrettier';
-export { PrettierErrorOverlay } from './client/PrettierErrorOverlay';
+export { CodeErrorOverlay } from './client/CodeErrorOverlay';
 export { PresenceNotifications } from './client/PresenceNotifications';
 export { useFileCRUD } from './client/useFileCRUD';
 export { useSubmitOperation } from './client/useSubmitOperation';
-export { vzReducer } from './client/vzReducer';
+export {
+  vzReducer,
+  createInitialState,
+} from './client/vzReducer';
 export { useActions } from './client/useActions';
 export { useOpenDirectories } from './client/useOpenDirectories';
 export {

package/src/server/handleAIAssist.js

@@ -0,0 +1,69 @@
+import OpenAI from 'openai';
+import { editOp } from 'ot-json1';
+
+const openai = new OpenAI();
+
+export async function generateAIResponse({
+  inputText,
+  insertionCursor,
+  fileId,
+  shareDBDoc,
+}) {
+  const stream = await openai.chat.completions.create({
+    model: 'gpt-3.5-turbo',
+    messages: [
+      {
+        role: 'system',
+        content:
+          'Write typescript or javascript code that would follow the prompt',
+      },
+      { role: 'user', content: inputText },
+    ],
+    stream: true,
+  });
+
+  let currentCursor = insertionCursor;
+
+  for await (const part of stream) {
+    const op = editOp(
+      ['files', fileId, 'text'],
+      'text-unicode',
+      [
+        currentCursor,
+        part.choices[0]?.delta?.content || '',
+      ],
+    );
+
+    shareDBDoc.submitOp(op);
+    currentCursor += (part.choices[0]?.delta?.content || '')
+      .length;
+  }
+}
+
+export const handleAIAssist =
+  (shareDBDoc) => async (req, res) => {
+    const {
+      text: inputText,
+      cursorLocation: insertionCursor,
+      fileId,
+    } = req.body;
+
+    try {
+      await generateAIResponse({
+        inputText,
+        insertionCursor,
+        fileId,
+        shareDBDoc,
+      });
+
+      res
+        .status(200)
+        .send({ message: 'Operation successful!' });
+    } catch (error) {
+      console.error('handleAIAssist error:', error);
+      res.status(500).send({
+        message: 'Internal Server Error',
+        error: error.message,
+      });
+    }
+  };

package/src/server/index.js

@@ -12,6 +12,8 @@ import ngrok from 'ngrok';
 import dotenv from 'dotenv';
 import { computeInitialDocument } from './computeInitialDocument.js';
 import { json1Presence } from '../ot.js';
+import bodyParser from 'body-parser';
+import { handleAIAssist } from './handleAIAssist.js';
 
 dotenv.config({ path: '../../.env' });
 
@@ -95,6 +97,13 @@ const shareDBConnection = shareDBBackend.connect();
 const shareDBDoc = shareDBConnection.get('documents', '1');
 shareDBDoc.create(initialDocument, json1Presence.type.uri);
 
+// Handle AI Assist requests.
+app.post(
+  '/AIAssist',
+  bodyParser.json(),
+  handleAIAssist(shareDBDoc),
+);
+
 // The state of the document when files were last auto-saved.
 let previousDocument = initialDocument;
 

package/src/types.ts

@@ -30,6 +30,11 @@ export interface File {
   text: string;
 }
 
+// FileTreePath
+//  * The path to the directory, e.g. "src/components", OR
+//  * The path to the file e.g. "src/components/HelloWorld.js".
+export type FileTreePath = string;
+
 // FileTree
 //  * A tree of files.
 //  * Each node in the tree is either a directory or a file.
@@ -38,13 +43,9 @@ export interface File {
 //  * Each file has a `fileId` string.
 //  * Each directory has a `name` string.
 //  * Each directory has a `path` string.
-//  * The `path` string is the path to the directory.
-//    e.g. "src/components".
-//  * The `path` string is the path to the file.
-//    e.g. "src/components/HelloWorld.js".
 export interface FileTree {
   name: string;
-  path?: string;
+  path?: FileTreePath;
   children?: Array<FileTree | FileTreeFile>;
 }
 
@@ -93,3 +94,9 @@ export type VZCodeContent = {
   //     * Hot reloading is debounced when this is `false`.
   isInteracting?: boolean;
 };
+
+// An id used for presence.
+export type PresenceId = string;
+
+// A user name for display in presence.
+export type Username = string;