vzcode 0.45.0 → 0.46.0

package/src/server/generateAIResponse.js

@@ -0,0 +1,101 @@
+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);
+
+  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,
+  });
+
+  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;
-};

package/src/client/AIAssistWidget/index.tsx

@@ -1,101 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Button } from '../bootstrap';
-import './style.scss';
-import {
-  mostRecentStreamId,
-  haltAIAssist,
-  startAIAssist,
-} from '../AIAssist';
-import {
-  FileId,
-  ShareDBDoc,
-  VZCodeContent,
-} from '../../types';
-import { EditorCache } from '../useEditorCache';
-import { TabState } from '../vzReducer';
-// From
-// https://primer.style/foundations/icons/zap-24
-const ZapSVG = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    width="24"
-    height="24"
-  >
-    <path d="M15.716 1.329a1.341 1.341 0 0 1 2.109 1.55L15.147 9h4.161c1.623 0 2.372 2.016 1.143 3.075L8.102 22.721a1.148 1.148 0 0 1-1.81-1.317L8.996 15H4.674c-1.619 0-2.37-2.008-1.148-3.07l12.19-10.6Zm.452 1.595L4.51 13.061a.25.25 0 0 0 .164.439h5.45a.749.749 0 0 1 .692 1.041l-2.559 6.066 11.215-9.668a.25.25 0 0 0-.164-.439H14a.75.75 0 0 1-.687-1.05Z"></path>
-  </svg>
-);
-
-// From Wikimedia
-// https://commons.wikimedia.org/wiki/File:Stopsign.svg
-const StopSVG = () => (
-  <svg
-    width="15pt"
-    height="15pt"
-    version="1.1"
-    viewBox="0 0 15 15"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g transform="scale(.75)" fill="#fff" stroke="#000">
-      <path d="m17.5 0.5c1.1055 0 2 0.89453 2 2v15c0 1.1055-0.89453 2-2 2h-15c-1.1055 0-2-0.89453-2-2v-15c0-1.1055 0.89453-2 2-2z" />
-    </g>
-  </svg>
-);
-
-export const AIAssistWidget = ({
-  activeFileId,
-  shareDBDoc,
-  editorCache,
-  tabList,
-}: {
-  activeFileId: FileId;
-  shareDBDoc: ShareDBDoc<VZCodeContent>;
-  editorCache: EditorCache;
-  tabList: Array<TabState>;
-}) => {
-  const [AIAssistRunning, setAIAssistRunning] =
-    useState(false);
-
-  useEffect(() => {
-    const handleOp = (op, source) => {
-      if (op !== null && op[0] === 'aiStreams') {
-        // The check if the value is true is required
-        // because the value could be null rather than false.
-        setAIAssistRunning(
-          shareDBDoc.data.aiStreams[mostRecentStreamId]
-            ?.AIStreamStatus.serverIsRunning === true,
-        );
-      }
-    };
-    shareDBDoc.on('op', handleOp);
-
-    return () => {
-      shareDBDoc.off('op', handleOp);
-    };
-  }, [shareDBDoc]);
-
-  const handleClick = useCallback(() => {
-    if (!AIAssistRunning) {
-      startAIAssist(
-        editorCache.get(activeFileId).editor,
-        shareDBDoc,
-        activeFileId,
-        tabList,
-      );
-    } else {
-      haltAIAssist(shareDBDoc);
-    }
-  }, [activeFileId, AIAssistRunning]);
-
-  return (
-    <div className="vz-code-ai-assist-widget">
-      <Button
-        variant="light"
-        title="Start AI Assist"
-        onClick={handleClick}
-      >
-        {AIAssistRunning ? <StopSVG /> : <ZapSVG />}
-      </Button>
-    </div>
-  );
-};

package/src/client/AIAssistWidget/style.scss

@@ -1,10 +0,0 @@
-.vz-code-ai-assist-widget {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-
-  .btn {
-    /* Center the icon */
-    padding: 6px 6px 7px 6px;
-  }
-}