start generate logic

frontend/components/editor/generate.tsx

@@ -10,11 +10,13 @@ export default function GenerateInput({
   submit,
   width,
   onExpand,
+  onAccept,
 }: {
   cancel: () => void
   submit: (input: string) => void
   width: number
   onExpand: () => void
+  onAccept: (code: string) => void
 }) {
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -26,13 +28,18 @@ export default function GenerateInput({
   console.log(result);`)
   const [expanded, setExpanded] = useState(false)
   const [loading, setLoading] = useState(false)
+  const [input, setInput] = useState("")
+  const [currentPrompt, setCurrentPrompt] = useState("")
 
   useEffect(() => {
-    inputRef.current?.focus()
+    setTimeout(() => {
+      inputRef.current?.focus()
+    }, 0)
   }, [])
 
   const handleGenerate = async () => {
     setLoading(true)
+    setCurrentPrompt(input)
     // const res = await generateCode()
     await new Promise((resolve) => setTimeout(resolve, 1000))
 
@@ -49,11 +56,17 @@ export default function GenerateInput({
           style={{
             width: width + "px",
           }}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
           placeholder="✨ Generate code with a prompt"
           className="h-8 w-full rounded-md border border-muted-foreground bg-transparent px-3 py-1 text-sm shadow-sm transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
         />
 
-        <Button size="sm" disabled={loading} onClick={handleGenerate}>
+        <Button
+          size="sm"
+          disabled={loading || input === ""}
+          onClick={handleGenerate}
+        >
           {loading ? (
             <>
               <Loader2 className="animate-spin h-3 w-3 mr-2" />
@@ -73,7 +86,7 @@ export default function GenerateInput({
             <pre>{code}</pre>
           </div>
           <div className="flex space-x-2">
-            <Button size="sm">
+            <Button onClick={() => onAccept(code)} size="sm">
               <Check className="h-3 w-3 mr-2" />
               Accept
             </Button>

frontend/components/editor/index.tsx

@@ -50,10 +50,11 @@ export default function CodeEditor({
   const [generate, setGenerate] = useState<{
     show: boolean
     id: string
+    line: number
     widget: monaco.editor.IContentWidget | undefined
     pref: monaco.editor.ContentWidgetPositionPreference[]
     width: number
-  }>({ show: false, id: "", widget: undefined, pref: [], width: 0 })
+  }>({ show: false, line: 0, id: "", widget: undefined, pref: [], width: 0 })
   const [decorations, setDecorations] = useState<{
     options: monaco.editor.IModelDeltaDecoration[]
     instance: monaco.editor.IEditorDecorationsCollection | undefined
@@ -147,7 +148,7 @@ export default function CodeEditor({
           domNode: generateRef.current,
         })
         setGenerate((prev) => {
-          return { ...prev, id }
+          return { ...prev, id, line: cursorLine }
         })
       })
 
@@ -389,6 +390,15 @@ export default function CodeEditor({
                 })
               })
             }}
+            onAccept={(code: string) => {
+              setGenerate((prev) => {
+                return {
+                  ...prev,
+                  show: !prev.show,
+                }
+              })
+              console.log("accepted:", code)
+            }}
           />
         ) : null}
       </div>

frontend/lib/actions.ts

@@ -72,3 +72,29 @@ export async function unshareSandbox(sandboxId: string, userId: string) {
 
   revalidatePath(`/code/${sandboxId}`)
 }
+
+export async function generateCode(code: string, line: number) {
+  const res = await fetch(
+    "https://api.cloudflare.com/client/v4/accounts/d18f2f848da38e37adc9a34eab3d5ae2/ai/run/@cf/meta/llama-3-8b-instruct",
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.CF_API_TOKEN}`,
+      },
+      body: JSON.stringify({
+        messages: [
+          {
+            role: "system",
+            content:
+              "You are an expert coding assistant who reads from an existing code file, and suggests code to add to the file.",
+          },
+          {
+            role: "user",
+            content: "", //todo
+          },
+        ],
+      }),
+    }
+  )
+}