vzcode 0.45.0 → 0.47.0

package/src/client/VZMiddle.tsx

@@ -4,7 +4,7 @@ import { TabList } from './TabList';
 import { CodeEditor } from './CodeEditor';
 import { CodeErrorOverlay } from './CodeErrorOverlay';
 import { PresenceNotifications } from './PresenceNotifications';
-import { AIAssistWidget } from './AIAssistWidget';
+import { AIAssistWidget } from './AIAssist/AIAssistWidget';
 import { VZCodeContext } from './VZCodeContext';
 
 // The middle portion of the VZCode environment, containing:
@@ -13,7 +13,15 @@ import { VZCodeContext } from './VZCodeContext';
 // * The code error overlay
 // * The presence notifications
 // * The UI for AI Assist
-export const VZMiddle = ({ enableAIAssist = true }) => {
+export const VZMiddle = ({
+  enableAIAssist = true,
+  aiAssistEndpoint,
+  aiAssistOptions,
+}: {
+  enableAIAssist?: boolean;
+  aiAssistEndpoint: string;
+  aiAssistOptions: { [key: string]: string };
+}) => {
   const { codeEditorWidth } = useContext(
     SplitPaneResizeContext,
   );
@@ -70,22 +78,26 @@ export const VZMiddle = ({ enableAIAssist = true }) => {
           }
           username={username}
           typeScriptWorker={typeScriptWorker}
-          tabList={tabList}
         />
       ) : null}
-      <CodeErrorOverlay errorMessage={errorMessage} />
-      <PresenceNotifications
-        docPresence={docPresence}
-        localPresence={localPresence}
-      />
       {enableAIAssist && content && activeFileId ? (
         <AIAssistWidget
           activeFileId={activeFileId}
           shareDBDoc={shareDBDoc}
           editorCache={editorCache}
           tabList={tabList}
+          aiAssistEndpoint={aiAssistEndpoint}
+          aiAssistOptions={aiAssistOptions}
         />
       ) : null}
+      <CodeErrorOverlay
+        errorMessage={errorMessage}
+        content={content}
+      />
+      <PresenceNotifications
+        docPresence={docPresence}
+        localPresence={localPresence}
+      />
     </div>
   ) : null;
 };

package/src/client/generateRequestId.ts

@@ -0,0 +1,6 @@
+export type RequestId = string;
+
+// Generates a random string of digits.
+// e.g. "6891835662438279"
+export const generateRequestId = (): RequestId =>
+  (Math.random() + '').slice(2);

package/src/client/useTypeScript/index.ts

@@ -27,6 +27,10 @@ export const useTypeScript = ({
 
   const debounceUpdateContent = useCallback(
     (content: VZCodeContent) => {
+      // Handle the case where the content has not yet been loaded.
+      if (content === null) {
+        return;
+      }
       clearTimeout(debounceTimeoutId.current);
       debounceTimeoutId.current = window.setTimeout(() => {
         typeScriptWorker.postMessage({

package/src/server/generateAIResponse.js

@@ -0,0 +1,111 @@
+import OpenAI from 'openai';
+import { json1Presence } from '../ot.js';
+
+const { editOp, type } = json1Presence;
+
+const debug = false;
+
+// Feature flag to slow down AI for development/testing
+const slowdown = false;
+
+let openai;
+if (process.env.OPENAI_API_KEY !== undefined) {
+  openai = new OpenAI();
+}
+
+const AISourceName = 'AIAssist';
+
+function opComesFromAIAssist(ops, source) {
+  return source === AISourceName;
+}
+
+const streams = {};
+
+export const generateAIResponse = async ({
+  inputText,
+  insertionCursor,
+  fileId,
+  streamId,
+  shareDBDoc,
+}) => {
+  if (debug) {
+    console.log(
+      '[generateAIResponse] inputText:',
+      inputText,
+    );
+    console.log(
+      '[generateAIResponse] insertionCursor:',
+      insertionCursor,
+    );
+    console.log('[generateAIResponse] fileId:', fileId);
+    console.log('[generateAIResponse] streamId:', streamId);
+    console.log(
+      '[generateAIResponse] shareDBDoc:',
+      shareDBDoc,
+    );
+  }
+  function accomodateDocChanges(op, source) {
+    if (!opComesFromAIAssist(op, source)) {
+      if (op !== null) {
+        insertionCursor = type
+          .transformPosition(
+            ['files', fileId, 'text', insertionCursor],
+            op,
+          )
+          .slice(-1)[0];
+      }
+    }
+  }
+
+  shareDBDoc.on('op', accomodateDocChanges);
+
+  const messages = [
+    {
+      role: 'system',
+      content: [
+        'You are an expert programmer.',
+        'Your task is to output ONLY the code that replaces <FILL_ME> correctly.',
+        'Do not add any markdown.',
+        'Do not duplicate the code before or after <FILL_ME>.',
+        'Do not make any changes outside of <FILL_ME>.',
+      ].join(' '),
+    },
+    { role: 'user', content: inputText },
+  ];
+
+  console.log('messages');
+  console.log(messages);
+
+  streams[streamId] = await openai.chat.completions.create({
+    // model: 'gpt-3.5-turbo',
+    model: 'gpt-4',
+
+    messages,
+    stream: true,
+  });
+
+  for await (const part of streams[streamId]) {
+    const op = editOp(
+      ['files', fileId, 'text'],
+      'text-unicode',
+      [
+        insertionCursor,
+        part.choices[0]?.delta?.content || '',
+      ],
+    );
+
+    shareDBDoc.submitOp(op, { source: AISourceName });
+
+    // Wait for 500ms
+    if (slowdown) {
+      await new Promise((resolve) => {
+        setTimeout(resolve, 1000);
+      });
+    }
+
+    insertionCursor += (
+      part.choices[0]?.delta?.content || ''
+    ).length;
+  }
+  shareDBDoc.off('op', accomodateDocChanges);
+};

package/src/server/handleAIAssist.js

@@ -1,109 +1,20 @@
-import OpenAI from 'openai';
-import { json1Presence } from '../ot.js';
+import { generateAIResponse } from './generateAIResponse.js';
 
-const { editOp, type, replaceOp } = json1Presence;
+const debug = false;
 
-// Feature flag to slow down AI for development/testing
-const slowdown = false;
-
-let openai;
-if (process.env.OPENAI_API_KEY !== undefined) {
-  openai = new OpenAI();
-}
-
-export async function generateAIResponse({
-  inputText,
-  insertionCursor,
-  fileId,
-  streamId,
-  shareDBDoc,
-}) {
-  function accomodateDocChanges(op, source) {
-    if (!opComesFromAIAssist(op, source)) {
-      if (op !== null) {
-        insertionCursor = type
-          .transformPosition(
-            ['files', fileId, 'text', insertionCursor],
-            op,
-          )
-          .slice(-1)[0];
-      }
-    }
-  }
-
-  shareDBDoc.on('op', accomodateDocChanges);
-
-  streams[streamId] = await openai.chat.completions.create({
-    // model: 'gpt-3.5-turbo',
-    model: 'gpt-4',
-
-    messages: [
-      {
-        role: 'system',
-        content:
-          'Write typescript or javascript code to continue the current file, given the other files for context. Use // for comments.',
-      },
-      { role: 'user', content: inputText },
-    ],
-    stream: true,
-  });
+export const handleAIAssist =
+  (shareDBDoc) => async (req, res) => {
+    const { inputText, insertionCursor, fileId } = req.body;
 
-  for await (const part of streams[streamId]) {
-    const op = editOp(
-      ['files', fileId, 'text'],
-      'text-unicode',
-      [
+    if (debug) {
+      console.log('[handleAIAssist] inputText:', inputText);
+      console.log(
+        '[handleAIAssist] insertionCursor:',
         insertionCursor,
-        part.choices[0]?.delta?.content || '',
-      ],
-    );
-
-    shareDBDoc.submitOp(op, { source: AISourceName });
-
-    // Wait for 500ms
-    if (slowdown) {
-      await new Promise((resolve) => {
-        setTimeout(resolve, 1000);
-      });
+      );
+      console.log('[handleAIAssist] fileId:', fileId);
     }
 
-    insertionCursor += (
-      part.choices[0]?.delta?.content || ''
-    ).length;
-  }
-  shareDBDoc.off('op', accomodateDocChanges);
-
-  const confirmCompletedOperation = replaceOp(
-    [
-      'aiStreams',
-      streamId,
-      'AIStreamStatus',
-      'serverIsRunning',
-    ],
-    true,
-    false,
-  );
-  shareDBDoc.submitOp(confirmCompletedOperation, {
-    source: 'AIServer',
-  });
-}
-
-const AISourceName = 'AIAssist';
-
-function opComesFromAIAssist(ops, source) {
-  return source === AISourceName;
-}
-
-const streams = {};
-
-export const handleAIAssist =
-  (shareDBDoc) => async (req, res) => {
-    const {
-      text: inputText,
-      cursorLocation: insertionCursor,
-      fileId,
-    } = req.body;
-
     try {
       await generateAIResponse({
         inputText,

package/src/server/index.js

@@ -13,13 +13,7 @@ import ngrok from 'ngrok';
 import bodyParser from 'body-parser';
 import { json1Presence } from '../ot.js';
 import { computeInitialDocument } from './computeInitialDocument.js';
-import {
-  generateAIResponse,
-  haltGeneration,
-  handleAIAssist,
-} from './handleAIAssist.js';
-
-const { replaceOp } = json1Presence;
+import { handleAIAssist } from './handleAIAssist.js';
 
 // The time in milliseconds by which auto-saving is debounced.
 const autoSaveDebounceTimeMS = 800;
@@ -103,7 +97,7 @@ shareDBDoc.create(initialDocument, json1Presence.type.uri);
 
 // Handle AI Assist requests.
 app.post(
-  '/AIAssist',
+  '/ai-assist',
   bodyParser.json(),
   handleAIAssist(shareDBDoc),
 );
@@ -219,53 +213,53 @@ shareDBDoc.subscribe(() => {
       debounceSave();
     }
 
-    if (
-      op !== null &&
-      op[0] == 'aiStreams' &&
-      source !== 'AIServer' &&
-      source !== 'AIAssist'
-    ) {
-      //This is an insert operation (a new request)
-      if (
-        op[op.length - 1]['i'] !== undefined &&
-        op[op.length - 1]['i']['AIStreamStatus'] !==
-          undefined
-      ) {
-        const input =
-          op[op.length - 1]['i']['AIStreamStatus'];
-
-        generateAIResponse({
-          inputText: input.text,
-          insertionCursor: input.insertionCursor,
-          shareDBDoc: shareDBDoc,
-          streamId: op[op.length - 2],
-          fileId: input.fileId,
-        });
-
-        const confirmStartOperation = replaceOp(
-          [
-            ...op.filter(
-              (value) => typeof value === 'string',
-            ),
-            'AIStreamStatus',
-            'serverIsRunning',
-          ],
-          true,
-          true,
-        );
-
-        shareDBDoc.submitOp(confirmStartOperation, {
-          source: 'AIServer',
-        });
-      }
-      if (
-        op[op.length - 1]['r'] !== null &&
-        op[op.length - 2] == 'clientWantsToStart'
-      ) {
-        //client wants to halt generation
-        haltGeneration(op[1]);
-      }
-    }
+    // if (
+    //   op !== null &&
+    //   op[0] == 'aiStreams' &&
+    //   source !== 'AIServer' &&
+    //   source !== 'AIAssist'
+    // ) {
+    //   //This is an insert operation (a new request)
+    //   if (
+    //     op[op.length - 1]['i'] !== undefined &&
+    //     op[op.length - 1]['i']['AIStreamStatus'] !==
+    //       undefined
+    //   ) {
+    //     const input =
+    //       op[op.length - 1]['i']['AIStreamStatus'];
+
+    //     generateAIResponse({
+    //       inputText: input.text,
+    //       insertionCursor: input.insertionCursor,
+    //       shareDBDoc: shareDBDoc,
+    //       streamId: op[op.length - 2],
+    //       fileId: input.fileId,
+    //     });
+
+    //     const confirmStartOperation = replaceOp(
+    //       [
+    //         ...op.filter(
+    //           (value) => typeof value === 'string',
+    //         ),
+    //         'AIStreamStatus',
+    //         'serverIsRunning',
+    //       ],
+    //       true,
+    //       true,
+    //     );
+
+    //     shareDBDoc.submitOp(confirmStartOperation, {
+    //       source: 'AIServer',
+    //     });
+    //   }
+    //   if (
+    //     op[op.length - 1]['r'] !== null &&
+    //     op[op.length - 2] == 'clientWantsToStart'
+    //   ) {
+    //     //client wants to halt generation
+    //     haltGeneration(op[1]);
+    //   }
+    // }
   });
 });
 

package/src/types.ts

@@ -87,23 +87,23 @@ export type ShareDBDoc<T> = {
 // Generated by the client.
 export type AIStreamId = string;
 
-// TODO define this interface.
-export type AIStreamStatus = {
-  // This field is managed by the client.
-  //  * `true` if the client wants the server to start the generation.
-  //  * `false` if the client does not want the server to start the generation.
-  clientWantsToStart: boolean;
-
-  // This field is managed by the server.
-  //  * `true` if the server is running the generation.
-  //  * `false` if the server is not running the generation.
-  serverIsRunning: boolean;
+// // TODO define this interface.
+// export type AIStreamStatus = {
+//   // This field is managed by the client.
+//   //  * `true` if the client wants the server to start the generation.
+//   //  * `false` if the client does not want the server to start the generation.
+//   clientWantsToStart: boolean;
 
-  text: string;
+//   // This field is managed by the server.
+//   //  * `true` if the server is running the generation.
+//   //  * `false` if the server is not running the generation.
+//   serverIsRunning: boolean;
 
-  startingInsertionCursor: number;
-  fileId: FileId;
-};
+//   text: string;
+
+//   startingInsertionCursor: number;
+//   fileId: FileId;
+// };
 
 /// Alternative universe
 
@@ -161,12 +161,12 @@ export type VZCodeContent = {
   //    client and server.
   //  * This can power the transition of the icon from
   //    lightning bolt to stop sign and back (when stream finishes)
-  aiStreams?: {
-    // These need to be removed at some point?
-    [aiStreamId: AIStreamId]: {
-      AIStreamStatus: AIStreamStatus;
-    };
-  };
+  // aiStreams?: {
+  //   // These need to be removed at some point?
+  //   [aiStreamId: AIStreamId]: {
+  //     AIStreamStatus: AIStreamStatus;
+  //   };
+  // };
 
   // TODO consider is there a way to replace the HTTP request to
   // the AIAssist endpoint with a manipulation of the ShareDB document?

package/src/client/AIAssist.ts

@@ -1,133 +0,0 @@
-import { EditorView, keymap } from '@codemirror/view';
-import { json1Presence } from '../ot';
-import {
-  FileId,
-  File,
-  ShareDBDoc,
-  VZCodeContent,
-} from '../types';
-import { generateRequestId } from './CodeEditor/typeScriptCompletions';
-
-import { TabState } from './vzReducer';
-
-const { insertOp, replaceOp } = json1Presence;
-
-export const AIAssist = ({
-  shareDBDoc,
-  // The file id of the file the AI should assist with.
-  fileId,
-  tabList,
-}: {
-  shareDBDoc: ShareDBDoc<VZCodeContent>;
-  fileId: string;
-  aiAssistEndpoint: string;
-  aiAssistOptions?: {
-    [key: string]: any;
-  };
-  tabList: Array<TabState>;
-}) =>
-  keymap.of([
-    {
-      key: 'control-m',
-      run: (view: EditorView) => {
-        if (
-          shareDBDoc.data.aiStreams === undefined ||
-          shareDBDoc.data.aiStreams[mostRecentStreamId] ===
-            null ||
-          shareDBDoc.data.aiStreams[mostRecentStreamId]
-            ?.AIStreamStatus.serverIsRunning !== true
-        ) {
-          startAIAssist(view, shareDBDoc, fileId, tabList);
-        } else {
-          haltAIAssist(shareDBDoc);
-        }
-
-        return true;
-      },
-    },
-  ]);
-
-// TODO use ref forwarding instead of `export let`
-export let mostRecentStreamId = null;
-
-export const startAIAssist = async (
-  view: EditorView,
-  shareDBDoc: ShareDBDoc<VZCodeContent>,
-  fileId: FileId,
-  tabList: Array<TabState>,
-  // TODO mostRecentStreamIdRef: React.MutableRefObject<string>,
-) => {
-  const textToSend =
-    (await generateFilesContext(
-      tabList.map(
-        (tabState) =>
-          shareDBDoc.data.files[tabState.fileId],
-      ),
-    )) +
-    'Current File:\n' +
-    view.state.sliceDoc(0, view.state.selection.main.to);
-
-  console.log(textToSend);
-
-  // TODO mostRecentStreamIdRef.current = generateRequestId();
-  mostRecentStreamId = generateRequestId();
-
-  if (shareDBDoc.data['aiStreams'] === undefined) {
-    shareDBDoc.submitOp(insertOp(['aiStreams'], {}), {
-      source: 'AIClient',
-    });
-  }
-
-  shareDBDoc.submitOp(
-    insertOp(['aiStreams', mostRecentStreamId], {
-      AIStreamStatus: {
-        clientWantsToStart: true,
-        serverIsRunning: false,
-        text: textToSend,
-        insertionCursor: view.state.selection.main.to,
-        fileId: fileId,
-      },
-    }),
-    { source: 'AIClient' },
-  );
-};
-
-export const haltAIAssist = (
-  shareDBDoc: ShareDBDoc<VZCodeContent>,
-) => {
-  const haltGenerationOp = replaceOp(
-    [
-      'aiStreams',
-      mostRecentStreamId,
-      'AIStreamStatus',
-      'clientWantsToStart',
-    ],
-    true,
-    false,
-  );
-
-  shareDBDoc.submitOp(haltGenerationOp, {
-    source: 'AIClient',
-  });
-};
-
-export const generateFilesContext = async (
-  goodFiles: File[],
-): Promise<string> => {
-  const input = goodFiles
-    .map((file) => {
-      const nameSubstring = file.name
-        // ?.substring(0, maxFileNameLength)
-        .trim();
-
-      const textSubstring = file.text
-        // ?.substring(0, maxFileTextLength)
-        .trim();
-
-      // Generate Markdown that AI will understand.
-      return `File \`${nameSubstring}\`:\n\`\`\`${textSubstring}\`\`\``;
-    })
-    .join('\n\n');
-
-  return input;
-};