feat: integrate template awareness into AI assistant

- Add template configurations with file structures and conventions
- Update AI route handler to include template context in system messages
- Pass template type through AIChat component
- Add template-specific run commands
- Enhance AI responses with project structure knowledge
- Move hardcoded run commands from navbar/run.tsx to templates/index.ts

This improves the AI's understanding of different project templates (React, Next.js, Streamlit, Vanilla JS) and enables more contextual assistance based on the project type.

frontend/components/editor/AIChat/index.tsx

@@ -17,6 +17,7 @@ export default function AIChat({
   editorRef,
   lastCopiedRangeRef,
   files,
+  templateType,
 }: AIChatProps) {
   // Initialize socket and messages
   const { socket } = useSocket()
@@ -143,7 +144,9 @@ export default function AIChat({
       setIsGenerating,
       setIsLoading,
       abortControllerRef,
-      activeFileContent
+      activeFileContent,
+      false,
+      templateType
     )
     // Clear context tabs after sending
     setContextTabs([])

frontend/components/editor/AIChat/lib/chatUtils.ts

@@ -90,7 +90,8 @@ export const handleSend = async (
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
   abortControllerRef: React.MutableRefObject<AbortController | null>,
   activeFileContent: string,
-  isEditMode: boolean = false
+  isEditMode: boolean = false,
+  templateType: string
 ) => {
   // Return if input is empty and context is null
   if (input.trim() === "" && !context) return
@@ -141,6 +142,7 @@ export const handleSend = async (
           context: context || undefined,
           activeFileContent: activeFileContent,
           isEditMode: isEditMode,
+          templateType: templateType,
         }),
         signal: abortControllerRef.current.signal,
       }

frontend/components/editor/AIChat/types/index.ts

@@ -1,3 +1,4 @@
+import { TemplateConfig } from "@/lib/templates"
 import { TFile, TFolder } from "@/lib/types"
 import * as monaco from "monaco-editor"
 import { Socket } from "socket.io-client"
@@ -53,6 +54,8 @@ export interface AIChatProps {
     endLine: number
   } | null>
   files: (TFile | TFolder)[]
+  templateType: string
+  templateConfig?: TemplateConfig
 }
 
 // Chat input props interface

frontend/components/editor/index.tsx

@@ -1233,6 +1233,7 @@ export default function CodeEditor({
                   editorRef={{ current: editorRef }}
                   lastCopiedRangeRef={lastCopiedRangeRef}
                   files={files}
+                  templateType={sandboxData.type}
                 />
               </ResizablePanel>
             </>

frontend/components/editor/navbar/run.tsx

@@ -7,6 +7,7 @@ import { Sandbox } from "@/lib/types"
 import { Play, StopCircle } from "lucide-react"
 import { useEffect, useRef } from "react"
 import { toast } from "sonner"
+import { templateConfigs } from "@/lib/templates"
 
 export default function RunButtonModal({
   isRunning,
@@ -47,8 +48,7 @@ export default function RunButtonModal({
       setIsPreviewCollapsed(true)
       previewPanelRef.current?.collapse()
     } else if (!isRunning && terminals.length < 4) {
-      const command =
-        COMMANDS[sandboxData.type as keyof typeof COMMANDS] ?? COMMANDS.default
+      const command = templateConfigs[sandboxData.type]?.runCommand || "npm run dev"
 
       try {
         // Create a new terminal with the appropriate command