Make API key configurable. Fixes #10

demo/index.ts

@@ -17,7 +17,9 @@ increment('not a number');`,
         typescript: true,
         jsx: true,
       }),
-      copilotPlugin(),
+      copilotPlugin({
+        apiKey: "d49954eb-cfba-4992-980f-d8fb37f0e942",
+      }),
     ],
     parent: document.querySelector("#editor")!,
   });

src/codeium.ts

@@ -3,10 +3,9 @@ import { LanguageServerService } from "./api/proto/exa/language_server_pb/langua
 import { createConnectTransport } from "@connectrpc/connect-web";
 import { Language } from "./api/proto/exa/codeium_common_pb/codeium_common_pb.js";
 import { GetCompletionsResponse } from "./api/proto/exa/language_server_pb/language_server_pb.js";
+import { CodeiumConfig } from "./config.js";
 
 // This is the same as the monaco editor example
-const EDITOR_API_KEY = "d49954eb-cfba-4992-980f-d8fb37f0e942";
-
 const transport = createConnectTransport({
   baseUrl: "https://web-backend.codeium.com",
   useBinaryFormat: true,
@@ -19,9 +18,11 @@ const sessionId = crypto.randomUUID();
 export async function getCodeiumCompletions({
   text,
   cursorOffset,
+  config,
 }: {
   text: string;
   cursorOffset: number;
+  config: CodeiumConfig;
 }) {
   const completions = (await client.getCompletions(
     {
@@ -30,15 +31,15 @@ export async function getCodeiumCompletions({
         ideVersion: "unknown",
         extensionName: "@valtown/codemirror-codeium",
         extensionVersion: "unknown",
-        apiKey: EDITOR_API_KEY,
+        apiKey: config.apiKey,
         sessionId: sessionId,
       },
       document: {
         text: text,
         cursorOffset: BigInt(cursorOffset),
         language: Language.TYPESCRIPT,
         // The types don't like this here, but it works.
-        editorLanguage: "typescript", // Language.TYPESCRIPT as unknown as string,
+        editorLanguage: "typescript",
         lineEnding: "\n",
       },
       editorOptions: {
@@ -51,7 +52,7 @@ export async function getCodeiumCompletions({
     {
       // signal,
       headers: {
-        Authorization: `Basic ${EDITOR_API_KEY}-${sessionId}`,
+        Authorization: `Basic ${config.apiKey}-${sessionId}`,
       },
     },
     // TODO: why doesn't this work by default?

src/completionRequester.ts

@@ -9,6 +9,7 @@ import {
 } from "./effects.js";
 import { completionDecoration } from "./completionDecoration.js";
 import { copilotEvent } from "./annotations.js";
+import { codeiumConfig } from "./config.js";
 
 // milliseconds before cancelling request
 // against codeium
@@ -59,6 +60,8 @@ export function completionRequester() {
   let lastPos = 0;
 
   return EditorView.updateListener.of((update: ViewUpdate) => {
+    const config = update.view.state.facet(codeiumConfig);
+
     if (!shouldRequestCompletion(update)) return;
 
     // Cancel the previous timeout
@@ -85,6 +88,7 @@ export function completionRequester() {
         const completionResult = await getCodeiumCompletions({
           text: source,
           cursorOffset: pos,
+          config,
         });
 
         if (!completionResult || completionResult.length === 0) {

src/config.ts

@@ -0,0 +1,14 @@
+import { Facet, combineConfig } from "@codemirror/state";
+
+export interface CodeiumConfig {
+  apiKey: string;
+}
+
+export const codeiumConfig = Facet.define<
+  CodeiumConfig,
+  Required<CodeiumConfig>
+>({
+  combine(configs) {
+    return combineConfig<Required<CodeiumConfig>>(configs, {}, {});
+  },
+});

src/plugin.ts

@@ -3,6 +3,7 @@ import { Extension, Prec } from "@codemirror/state";
 import { completionDecoration } from "./completionDecoration.js";
 import { completionRequester } from "./completionRequester.js";
 import { sameKeyCommand, rejectSuggestionCommand } from "./commands.js";
+import { CodeiumConfig, codeiumConfig } from "./config.js";
 
 function completionPlugin() {
   return EditorView.domEventHandlers({
@@ -32,8 +33,9 @@ function viewCompletionPlugin() {
   });
 }
 
-export function copilotPlugin(): Extension {
+export function copilotPlugin(config: CodeiumConfig): Extension {
   return [
+    codeiumConfig.of(config),
     completionDecoration,
     Prec.highest(completionPlugin()),
     Prec.highest(viewCompletionPlugin()),