feat: add full stack mode to chat mode selector and update system prompts

Author: SFARPak

src/components/ChatModeSelector.tsx

@@ -52,6 +52,41 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
       }
     }
 
+    // If switching to fullstack mode and we have an app ID, check if frontend and backend folders exist
+    if (newMode === "fullstack" && appId) {
+      try {
+        setIsCreatingFolder(true);
+        // Get the app to check its structure
+        const app = await IpcClient.getInstance().getApp(appId);
+        const frontendFiles = app.files.filter((file: string) => file.startsWith("frontend/"));
+        const backendFiles = app.files.filter((file: string) => file.startsWith("backend/"));
+
+        // If no frontend files exist, create the frontend folder
+        if (frontendFiles.length === 0) {
+          await IpcClient.getInstance().createMissingFolder({
+            appId,
+            folderType: "frontend",
+            templateId: settings?.selectedTemplateId,
+          });
+        }
+
+        // If no backend files exist, create the backend folder
+        if (backendFiles.length === 0) {
+          await IpcClient.getInstance().createMissingFolder({
+            appId,
+            folderType: "backend",
+            backendFramework: settings?.selectedBackendFramework,
+          });
+        }
+      } catch (error) {
+        console.error("Error creating fullstack folders:", error);
+        showError(error);
+        return; // Don't change the mode if folder creation failed
+      } finally {
+        setIsCreatingFolder(false);
+      }
+    }
+
     // Update the chat mode
     updateSettings({ selectedChatMode: newMode });
   };
@@ -64,6 +99,8 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
         return "Ask";
       case "backend":
         return "Backend";
+      case "fullstack":
+        return "Full Stack";
       default:
         return "Build";
     }
@@ -122,6 +159,14 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
             </span>
           </div>
         </SelectItem>
+        <SelectItem value="fullstack">
+          <div className="flex flex-col items-start">
+            <span className="font-medium">Full Stack</span>
+            <span className="text-xs text-muted-foreground">
+              Full stack development (frontend + backend)
+            </span>
+          </div>
+        </SelectItem>
       </SelectContent>
     </Select>
   );

src/prompts/system_prompt.ts

@@ -258,7 +258,7 @@ export const constructSystemPrompt = ({
   chatMode = "build",
 }: {
   aiRules: string | undefined;
-  chatMode?: "build" | "ask" | "backend";
+  chatMode?: "build" | "ask" | "backend" | "fullstack";
 }) => {
   let systemPrompt;
   let rules = aiRules ?? DEFAULT_AI_RULES;
@@ -268,6 +268,10 @@ export const constructSystemPrompt = ({
   } else if (chatMode === "backend") {
     systemPrompt = BACKEND_BUILD_SYSTEM_PROMPT;
     rules = aiRules ?? BACKEND_AI_RULES; // Use backend rules for backend mode
+  } else if (chatMode === "fullstack") {
+    systemPrompt = BUILD_SYSTEM_PROMPT; // Use build mode for fullstack, but could customize later
+    // For fullstack, we might want to combine both frontend and backend rules
+    rules = aiRules ?? DEFAULT_AI_RULES;
   } else {
     systemPrompt = BUILD_SYSTEM_PROMPT;
   }