feat: CodeEditor AI driven auto completion

package.json

@@ -69,6 +69,7 @@
     "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
     "@typescript/ata": "^0.9.7",
+    "@valtown/codemirror-codeium": "^1.1.1",
     "@valtown/codemirror-ts": "^2.2.0",
     "@vercel/analytics": "^1.4.1",
     "change-case": "^5.4.4",

src/components/CodeEditor.tsx

@@ -27,7 +27,8 @@ import { EditorView } from "codemirror"
 import { useEffect, useMemo, useRef, useState } from "react"
 import ts from "typescript"
 import CodeEditorHeader from "./CodeEditorHeader"
-
+import { copilotPlugin, Language } from "@valtown/codemirror-codeium"
+import { useCodeCompletionAiApi } from "@/hooks/use-code-completion-ai-api"
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
 import { Circuit, createUseComponent } from "@tscircuit/core"
@@ -56,6 +57,7 @@ export const CodeEditor = ({
   const viewRef = useRef<EditorView | null>(null)
   const ataRef = useRef<ReturnType<typeof setupTypeAcquisition> | null>(null)
   const apiUrl = useSnippetsBaseApiUrl()
+  const codeCompletionApi = useCodeCompletionAiApi()
 
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(initialCode)
@@ -180,6 +182,20 @@ export const CodeEditor = ({
         : javascript({ typescript: true, jsx: true }),
       keymap.of([indentWithTab]),
       EditorState.readOnly.of(readOnly),
+      copilotPlugin({
+        apiKey: codeCompletionApi.apiKey,
+        language: Language.TYPESCRIPT,
+      }),
+      EditorView.theme({
+        ".cm-ghostText, .cm-ghostText *": {
+          opacity: "0.6",
+          filter: "grayscale(20%)",
+          cursor: "pointer",
+        },
+        ".cm-ghostText:hover": {
+          background: "#eee",
+        },
+      }),
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           const newContent = update.state.doc.toString()

src/hooks/use-code-completion-ai-api.ts

@@ -0,0 +1,22 @@
+import { useMemo } from "react"
+import { useGlobalStore } from "./use-global-store"
+
+export const useCodeCompletionAiApi = () => {
+  const sessionToken = useGlobalStore((state) => state.session?.token)
+  const codeium = useMemo(() => {
+    if (import.meta.env.VITE_USE_DIRECT_AI_REQUESTS === "true") {
+      console.warn(
+        "Direct AI requests are enabled. Do not use this in production.",
+      )
+    }
+    return import.meta.env.VITE_USE_DIRECT_AI_REQUESTS === "true"
+      ? {
+          apiKey: import.meta.env.VITE_CODE_COMPLETION_API_KEY,
+        }
+      : {
+          apiKey: "{REPLACE_ON_SERVER}",
+        }
+  }, [])
+
+  return codeium
+}