ai enable button

frontend/components/editor/index.tsx

@@ -70,6 +70,7 @@ export default function CodeEditor({
   }>({ options: [], instance: undefined })
   const [terminals, setTerminals] = useState<string[]>([])
   const [provider, setProvider] = useState<TypedLiveblocksProvider>()
+  const [ai, setAi] = useState(false)
 
   const clerk = useClerk()
   const room = useRoom()
@@ -150,6 +151,15 @@ export default function CodeEditor({
   }
 
   useEffect(() => {
+    if (!ai) {
+      setGenerate((prev) => {
+        return {
+          ...prev,
+          show: false,
+        }
+      })
+      return
+    }
     if (generate.show) {
       editorRef.current?.changeViewZones(function (changeAccessor) {
         if (!generateRef.current) return
@@ -217,6 +227,8 @@ export default function CodeEditor({
       decorations.instance?.clear()
     }
 
+    if (!ai) return
+
     if (decorations.instance) {
       decorations.instance.set(decorations.options)
     } else {
@@ -426,7 +438,7 @@ export default function CodeEditor({
     <>
       <div ref={generateRef} />
       <div className="z-50 p-1" ref={generateWidgetRef}>
-        {generate.show ? (
+        {generate.show && ai ? (
           <GenerateInput
             socket={socket}
             width={generate.width - 90}
@@ -490,6 +502,8 @@ export default function CodeEditor({
             // setFiles(prev => [...prev, { id, name, type: "folder", children: [] }])
           }
         }}
+        ai={ai}
+        setAi={setAi}
       />
       <ResizablePanelGroup direction="horizontal">
         <ResizablePanel

frontend/components/editor/sidebar/index.tsx

@@ -1,12 +1,14 @@
 "use client"
 
-import { FilePlus, FolderPlus, Loader2, Search } from "lucide-react"
+import { FilePlus, FolderPlus, Loader2, Search, Sparkles } from "lucide-react"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
 import { TFile, TFolder, TTab } from "./types"
 import { useState } from "react"
 import New from "./new"
 import { Socket } from "socket.io-client"
+import Button from "@/components/ui/customButton"
+import Toggle from "@/components/ui/customToggle"
 
 export default function Sidebar({
   files,
@@ -16,6 +18,8 @@ export default function Sidebar({
   handleDeleteFolder,
   socket,
   addNew,
+  ai,
+  setAi,
 }: {
   files: (TFile | TFolder)[]
   selectFile: (tab: TTab) => void
@@ -29,6 +33,8 @@ export default function Sidebar({
   handleDeleteFolder: (folder: TFolder) => void
   socket: Socket
   addNew: (name: string, type: "file" | "folder") => void
+  ai: boolean
+  setAi: React.Dispatch<React.SetStateAction<boolean>>
 }) {
   const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
 
@@ -98,11 +104,12 @@ export default function Sidebar({
           )}
         </div>
       </div>
-      <div className="flex items-center">
-        {/* <div className="text-muted-foreground">
-          {connected ? "Connected" : "Not connected"}
-        </div> */}
-      </div>
+      {/* <div className="flex items-center"> */}
+      <Toggle value={ai} setValue={setAi} className="w-full">
+        <Sparkles className="h-3 w-3 mr-2" />
+        AI Copilot
+      </Toggle>
+      {/* </div> */}
     </div>
   )
 }

frontend/components/ui/customToggle.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { Plus } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "./button"
+
+const Toggle = ({
+  children,
+  className,
+  value,
+  setValue,
+}: {
+  children: React.ReactNode
+  className?: string
+  value: boolean
+  setValue: React.Dispatch<React.SetStateAction<boolean>>
+}) => {
+  if (value)
+    return (
+      <button
+        onClick={() => setValue(false)}
+        className={cn(
+          className,
+          `gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-2 h-9 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`
+        )}
+      >
+        <div className="rounded-[6px] w-full gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-full">
+          {children}
+        </div>
+      </button>
+    )
+  else
+    return (
+      <Button
+        className="w-full"
+        variant="outline"
+        onClick={() => setValue(true)}
+      >
+        {children}
+      </Button>
+    )
+}
+
+export default Toggle