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 { useCodeCompletionApi } 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 = useCodeCompletionApi()
 
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(initialCode)
@@ -211,6 +213,24 @@ export const CodeEditor = ({
         }
       }),
     ]
+    if (codeCompletionApi?.apiKey) {
+      baseExtensions.push(
+        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",
+          },
+        }),
+      )
+    }
 
     // Add TypeScript-specific extensions and handlers
     const tsExtensions =

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

@@ -0,0 +1,11 @@
+import { useMemo } from "react"
+
+export const useCodeCompletionApi = () => {
+  const codeiumApiKey = useMemo(() => {
+    return {
+      apiKey: import.meta.env.VITE_CODIUM_API_KEY,
+    }
+  }, [])
+
+  return codeiumApiKey
+}