make user set the stack when importing code

backend/prompts.py

@@ -124,9 +124,20 @@ Generate code for a web page that looks exactly like this.
 
 
 def assemble_imported_code_prompt(
-    code: str, result_image_data_url: Union[str, None] = None
+    code: str, stack: str, result_image_data_url: Union[str, None] = None
 ) -> List[ChatCompletionMessageParam]:
     system_content = IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT
+    if stack == "html_tailwind":
+        system_content = IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT
+    elif stack == "react_tailwind":
+        system_content = REACT_TAILWIND_SYSTEM_PROMPT
+    elif stack == "bootstrap":
+        system_content = BOOTSTRAP_SYSTEM_PROMPT
+    elif stack == "ionic_tailwind":
+        system_content = IONIC_TAILWIND_SYSTEM_PROMPT
+    else:
+        raise Exception("Code config is not one of available options")
+
     return [
         {
             "role": "system",

backend/routes/generate_code.py

@@ -130,7 +130,9 @@ async def stream_code(websocket: WebSocket):
     # If this generation started off with imported code, we need to assemble the prompt differently
     if params.get("isImportedFromCode") and params["isImportedFromCode"]:
         original_imported_code = params["history"][0]
-        prompt_messages = assemble_imported_code_prompt(original_imported_code)
+        prompt_messages = assemble_imported_code_prompt(
+            original_imported_code, generated_code_config
+        )
         for index, text in enumerate(params["history"][1:]):
             if index % 2 == 0:
                 message: ChatCompletionMessageParam = {
@@ -182,6 +184,8 @@ async def stream_code(websocket: WebSocket):
 
             image_cache = create_alt_url_mapping(params["history"][-2])
 
+    pprint_prompt(prompt_messages)
+
     if SHOULD_MOCK_AI_RESPONSE:
         completion = await mock_completion(process_chunk)
     else:

frontend/src/App.tsx

@@ -262,9 +262,20 @@ function App() {
     }));
   };
 
-  function importFromCode(code: string) {
+  // TODO: Rename everything to "stack" instead of "config"
-    setAppState(AppState.CODE_READY);
+  function setStack(stack: GeneratedCodeConfig) {
+    setSettings((prev) => ({
+      ...prev,
+      generatedCodeConfig: stack,
+    }));
+  }
+
+  function importFromCode(code: string, stack: GeneratedCodeConfig) {
+    setIsImportedFromCode(true);
+
+    // Set up this project
     setGeneratedCode(code);
+    setStack(stack);
     setAppHistory([
       {
         type: "code_create",
@@ -274,7 +285,8 @@ function App() {
       },
     ]);
     setCurrentVersion(0);
-    setIsImportedFromCode(true);
+
+    setAppState(AppState.CODE_READY);
   }
 
   return (
@@ -295,12 +307,7 @@ function App() {
 
           <OutputSettingsSection
             generatedCodeConfig={settings.generatedCodeConfig}
-            setGeneratedCodeConfig={(config: GeneratedCodeConfig) =>
+            setGeneratedCodeConfig={(config) => setStack(config)}
-              setSettings((prev) => ({
-                ...prev,
-                generatedCodeConfig: config,
-              }))
-            }
             shouldDisableUpdates={
               appState === AppState.CODING || appState === AppState.CODE_READY
             }

frontend/src/components/ImportCodeSection.tsx

@@ -10,13 +10,33 @@ import {
   DialogTrigger,
 } from "./ui/dialog";
 import { Textarea } from "./ui/textarea";
+import OutputSettingsSection from "./OutputSettingsSection";
+import { GeneratedCodeConfig } from "../types";
+import toast from "react-hot-toast";
 
 interface Props {
-  importFromCode: (code: string) => void;
+  importFromCode: (code: string, stack: GeneratedCodeConfig) => void;
 }
 
 function ImportCodeSection({ importFromCode }: Props) {
   const [code, setCode] = useState("");
+  const [stack, setStack] = useState<GeneratedCodeConfig | undefined>(
+    undefined
+  );
+
+  const doImport = () => {
+    if (code === "") {
+      toast.error("Please paste in some code");
+      return;
+    }
+
+    if (stack === undefined) {
+      toast.error("Please select your stack");
+      return;
+    }
+
+    importFromCode(code, stack);
+  };
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -36,8 +56,17 @@ function ImportCodeSection({ importFromCode }: Props) {
           className="w-full h-64"
         />
 
+        <OutputSettingsSection
+          generatedCodeConfig={stack}
+          setGeneratedCodeConfig={(config: GeneratedCodeConfig) =>
+            setStack(config)
+          }
+          label="Stack:"
+          shouldDisableUpdates={false}
+        />
+
         <DialogFooter>
-          <Button type="submit" onClick={() => importFromCode(code)}>
+          <Button type="submit" onClick={doImport}>
             Import
           </Button>
         </DialogFooter>

frontend/src/components/OutputSettingsSection.tsx

@@ -43,20 +43,22 @@ function generateDisplayComponent(config: GeneratedCodeConfig) {
 }
 
 interface Props {
-  generatedCodeConfig: GeneratedCodeConfig;
+  generatedCodeConfig: GeneratedCodeConfig | undefined;
   setGeneratedCodeConfig: (config: GeneratedCodeConfig) => void;
+  label?: string;
   shouldDisableUpdates?: boolean;
 }
 
 function OutputSettingsSection({
   generatedCodeConfig,
   setGeneratedCodeConfig,
+  label = "Generating:",
   shouldDisableUpdates = false,
 }: Props) {
   return (
     <div className="flex flex-col gap-y-2 justify-between text-sm">
       <div className="grid grid-cols-3 items-center gap-4">
-        <span>Generating:</span>
+        <span>{label}</span>
         <Select
           value={generatedCodeConfig}
           onValueChange={(value: string) =>
@@ -65,7 +67,9 @@ function OutputSettingsSection({
           disabled={shouldDisableUpdates}
         >
           <SelectTrigger className="col-span-2" id="output-settings-js">
-            {generateDisplayComponent(generatedCodeConfig)}
+            {generatedCodeConfig
+              ? generateDisplayComponent(generatedCodeConfig)
+              : "Select a stack"}
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>