improved PR

tscircuit · Jan 4, 2025 · 4604927 · 4604927
1 parent fda1771
commit 4604927
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/src/components/CodeEditor.tsx b/src/components/CodeEditor.tsx
@@ -28,7 +28,7 @@ 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"
+import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
 import { Circuit, createUseComponent } from "@tscircuit/core"
@@ -57,7 +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 codeCompletionApi = useCodeCompletionApi()
 
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(initialCode)
@@ -182,20 +182,6 @@ 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()
@@ -227,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 =

diff --git a/src/hooks/use-code-completion-ai-api.ts b/src/hooks/use-code-completion-ai-api.ts
@@ -1,22 +1,22 @@
 import { useMemo } from "react"
 import { useGlobalStore } from "./use-global-store"
 
-export const useCodeCompletionAiApi = () => {
+export const useCodeCompletionApi = () => {
   const sessionToken = useGlobalStore((state) => state.session?.token)
-  const codeium = useMemo(() => {
+  const codeiumApiKey = 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: import.meta.env.VITE_CODIUM_API_KEY,
         }
       : {
           apiKey: "{REPLACE_ON_SERVER}",
         }
   }, [])
 
-  return codeium
+  return codeiumApiKey
 }