feat: relocate codeium api request from server to client

As part of this, I had to build the protobuf file into a set of "json
definitions" that I could more easily include in a javascript bundle vs
the raw bytes of a proto file.

Author: 1egoman

packages/api/package.json

@@ -31,10 +31,8 @@
     "depcheck": "^1.4.7",
     "drizzle-orm": "^0.33.0",
     "express": "^4.20.0",
-    "long": "^5.2.3",
     "marked": "catalog:",
     "posthog-node": "^4.2.0",
-    "protobufjs": "^7.4.0",
     "ws": "catalog:",
     "zod": "catalog:"
   },

packages/api/server/http.mts

@@ -14,7 +14,6 @@ import {
   exportSrcmdText,
 } from '../session.mjs';
 import { generateCells, generateSrcbook, healthcheck } from '../ai/generate.mjs';
-import { runCodiumAiAutocomplete } from '../ai/autocomplete/index.mjs';
 import {
   getConfig,
   updateConfig,
@@ -348,21 +347,6 @@ router.post('/feedback', cors(), async (req, res) => {
   return res.json({ success: result.ok });
 });
 
-router.options('/ai-autocomplete', cors());
-router.post('/ai-autocomplete', cors(), async (req, res) => {
-  const { source, cursorOffset } = req.body;
-  const config = await getConfig();
-
-  let result;
-  try {
-    result = await runCodiumAiAutocomplete(config.codeiumApiKey, source, cursorOffset);
-  } catch (err) {
-    console.error('Error running ai autocomplete:', err);
-    return res.json({ error: true });
-  }
-  return res.json({ error: false, result });
-});
-
 type NpmSearchResult = {
   package: {
     name: string;

packages/web/package.json

@@ -27,8 +27,10 @@
     "clsx": "^2.1.1",
     "codemirror": "^6.0.1",
     "codemirror-copilot": "^0.0.7",
+    "long": "^5.2.3",
     "lucide-react": "^0.439.0",
     "marked": "catalog:",
+    "protobufjs": "^7.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",

packages/web/src/components/cells/code.tsx

@@ -18,7 +18,8 @@ import { SessionChannel } from '@/clients/websocket';
 import { useCells } from '@srcbook/components/src/components/use-cell';
 import { mapCMLocationToTsServer, mapTsServerLocationToCM } from './util';
 import { toast } from 'sonner';
-import { getFileContent, runCodiumAiAutocomplete } from '@/lib/server';
+import { getFileContent } from '@/lib/server';
+import { runCodiumAiAutocomplete } from '@/lib/ai-autocomplete';
 import { tsHover } from '@/components/cells/hover';
 import { autocompletion } from '@codemirror/autocomplete';
 import { type Diagnostic, linter } from '@codemirror/lint';
@@ -137,7 +138,7 @@ export default function ControlledCodeCell(props: Props) {
   const [prompt, setPrompt] = useState('');
   const [newSource, setNewSource] = useState('');
   const [fullscreen, setFullscreen] = useState(false);
-  const { aiEnabled } = useSettings();
+  const { aiEnabled, codeiumApiKey } = useSettings();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState('');
@@ -384,17 +385,17 @@ export default function ControlledCodeCell(props: Props) {
     inlineCopilot(async (prefix, suffix) => {
       let response;
       try {
-        response = await runCodiumAiAutocomplete(prefix+suffix, prefix.length);
+        response = await runCodiumAiAutocomplete(
+          codeiumApiKey ?? null,
+          prefix+suffix,
+          prefix.length,
+        );
       } catch (err) {
         console.error('Error fetching ai autocomplete suggestion:', err);
         return "";
       }
 
-      if (response.error) {
-        return "";
-      }
-
-      const completionItems = response.result.completionItems ?? [];
+      const completionItems = response.completionItems ?? [];
       const mostLikelyCompletionScore = Math.min(...completionItems.map(item => item.completion.score));
       const mostLikelyCompletion = completionItems.find(item => item.completion.score === mostLikelyCompletionScore);
 

…api/ai/autocomplete/codeium_common.proto …lib/ai-autocomplete/codeium_common.protopackages/api/ai/autocomplete/codeium_common.proto renamed to packages/web/src/lib/ai-autocomplete/codeium_common.proto packages/api/ai/autocomplete/codeium_common.proto renamed to packages/web/src/lib/ai-autocomplete/codeium_common.proto

@@ -1,28 +1,28 @@
-import path from 'node:path';
 import protobuf from 'protobufjs';
 import Long from 'long';
 import { type CodiumCompletionResult } from "@srcbook/shared";
 
+import languageServerProto from "./language-server-proto";
+
 // NOTE: this EDITOR_API_KEY value was just included as a raw string in
 // @codeium/react-code-editor. This seems to not be a secret?
 const EDITOR_API_KEY = 'd49954eb-cfba-4992-980f-d8fb37f0e942';
-const LANGUAGE_SERVER_PROTO_FILE_PATH = path.join(__dirname, "language_server.proto");
 
 export async function runCodiumAiAutocomplete(
-  apiKey: string | null,
+  optionalApiKey: string | null,
   source: string,
   cursorOffset: number,
 ): Promise<CodiumCompletionResult> {
-  const protos = await protobuf.load(LANGUAGE_SERVER_PROTO_FILE_PATH)
-  const GetCompletionsRequest = protos.lookupType("GetCompletionsRequest");
-  const Metadata = protos.lookupType("Metadata");
-  const DocumentInfo = protos.lookupType("Document");
-  const EditorOptions = protos.lookupType("EditorOptions");
-  const Language = protos.lookupEnum("Language");
-  const GetCompletionsResponse = protos.lookupType("GetCompletionsResponse");
+  const protos = protobuf.Root.fromJSON(languageServerProto as protobuf.INamespace);
+  const GetCompletionsRequest = protos.lookupType("exa.language_server_pb.GetCompletionsRequest");
+  const Metadata = protos.lookupType("exa.codeium_common_pb.Metadata");
+  const DocumentInfo = protos.lookupType("exa.language_server_pb.Document");
+  const EditorOptions = protos.lookupType("exa.codeium_common_pb.EditorOptions");
+  const Language = protos.lookupEnum("exa.codeium_common_pb.Language");
+  const GetCompletionsResponse = protos.lookupType("exa.language_server_pb.GetCompletionsResponse");
 
   const sessionId = `react-editor-${crypto.randomUUID()}`;
-  const apiKey = apiKey ?? EDITOR_API_KEY;
+  const apiKey = optionalApiKey ?? EDITOR_API_KEY;
 
   const payload = {
     otherDocuments: [],
@@ -74,5 +74,5 @@ export async function runCodiumAiAutocomplete(
   //   console.log(item.completion.text);
   // }
 
-  return responseBody;
+  return responseBody.toJSON();
 }