Update app/(main)/page.tsx

app/(main)/page.tsx

@@ -41,9 +41,7 @@ export default function Home() {
     model: "",
   });
   let [ref, scrollTo] = useScrollTo();
-  let [messages, setMessages] = useState<{ role: string; content: string }[]>(
-    [],
-  );
+  let [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
 
   let loading = status === "creating" || status === "updating";
 
@@ -57,41 +55,44 @@ export default function Home() {
     setStatus("creating");
     setGeneratedCode("");
 
-    let res = await fetch("/api/generateCode", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        model,
-        messages: [{ role: "user", content: prompt }],
-      }),
-    });
-
-    if (!res.ok) {
-      throw new Error(res.statusText);
-    }
+    try {
+      let res = await fetch("/api/generateCode", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          model,
+          messages: [{ role: "user", content: prompt }],
+        }),
+      });
+
+      if (!res.ok) {
+        throw new Error(res.statusText || `HTTP error: ${res.status}`);
+      }
 
-    if (!res.body) {
-      throw new Error("No response body");
-    }
+      if (!res.body) {
+        throw new Error("No response body");
+      }
 
-    const reader = res.body.getReader();
-    let receivedData = "";
+      const reader = res.body.getReader();
+      let receivedData = "";
 
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) {
-        break;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        receivedData += new TextDecoder().decode(value);
+        const cleanedData = removeCodeFormatting(receivedData);
+        setGeneratedCode(cleanedData);
       }
-      receivedData += new TextDecoder().decode(value);
-      const cleanedData = removeCodeFormatting(receivedData);
-      setGeneratedCode(cleanedData);
-    }
 
-    setMessages([{ role: "user", content: prompt }]);
-    setInitialAppConfig({ model });
-    setStatus("created");
+      setMessages([{ role: "user", content: prompt }]);
+      setInitialAppConfig({ model });
+      setStatus("created");
+    } catch (error) {
+      console.error("Error al generar la aplicación:", error);
+      setStatus("initial");
+    }
   }
 
   useEffect(() => {
@@ -147,54 +148,9 @@ export default function Home() {
               </button>
             </div>
           </div>
-          <div className="mt-6 flex flex-col justify-center gap-4 sm:flex-row sm:items-center sm:gap-8">
-            <div className="flex items-center justify-between gap-3 sm:justify-center">
-              <p className="text-gray-500 dark:text-gray-400 sm:text-xs">Model:</p>
-              <Select.Root
-                name="model"
-                disabled={loading}
-                value={model}
-                onValueChange={(value) => setModel(value)}
-              >
-                <Select.Trigger className="group flex w-60 max-w-xs items-center rounded-2xl border-[6px] border-gray-300 dark:border-gray-700 bg-white dark:bg-[#1E293B] px-4 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500">
-                  <Select.Value />
-                  <Select.Icon className="ml-auto">
-                    <ChevronDownIcon className="size-6 text-gray-300 group-focus-visible:text-gray-500 group-enabled:group-hover:text-gray-500 dark:text-gray-600 dark:group-focus-visible:text-gray-400 dark:group-enabled:group-hover:text-gray-400" />
-                  </Select.Icon>
-                </Select.Trigger>
-                <Select.Portal>
-                  <Select.Content className="overflow-hidden rounded-md bg-white dark:bg-[#1E293B] shadow-lg">
-                    <Select.Viewport className="p-2">
-                      {models.map((model) => (
-                        <Select.Item
-                          key={model.value}
-                          value={model.value}
-                          className="flex cursor-pointer items-center rounded-md px-3 py-2 text-sm data-[highlighted]:bg-gray-100 dark:data-[highlighted]:bg-gray-800 data-[highlighted]:outline-none"
-                        >
-                          <Select.ItemText asChild>
-                            <span className="inline-flex items-center gap-2 text-gray-500 dark:text-gray-400">
-                              <div className="size-2 rounded-full bg-green-500" />
-                              {model.label}
-                            </span>
-                          </Select.ItemText>
-                          <Select.ItemIndicator className="ml-auto">
-                            <CheckIcon className="size-5 text-blue-600" />
-                          </Select.ItemIndicator>
-                        </Select.Item>
-                      ))}
-                    </Select.Viewport>
-                    <Select.ScrollDownButton />
-                    <Select.Arrow />
-                  </Select.Content>
-                </Select.Portal>
-              </Select.Root>
-            </div>
-          </div>
         </fieldset>
       </form>
 
-      <hr className="border-1 mb-20 h-px bg-gray-700 dark:bg-gray-700/30" />
-
       {status !== "initial" && (
         <motion.div
           initial={{ height: 0 }}
@@ -212,29 +168,6 @@ export default function Home() {
             <div className="isolate">
               <CodeViewer code={generatedCode} showEditor />
             </div>
-
-            <AnimatePresence>
-              {loading && (
-                <motion.div
-                  initial={status === "updating" ? { x: "100%" } : undefined}
-                  animate={status === "updating" ? { x: "0%" } : undefined}
-                  exit={{ x: "100%" }}
-                  transition={{
-                    type: "spring",
-                    bounce: 0,
-                    duration: 0.85,
-                    delay: 0.5,
-                  }}
-                  className="absolute inset-x-0 bottom-0 top-1/2 flex items-center justify-center rounded-r border border-gray-400 dark:border-gray-700 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-[#1E293B] dark:to-gray-800 md:inset-y-0 md:left-1/2 md:right-0"
-                >
-                  <p className="animate-pulse text-3xl font-bold dark:text-gray-100">
-                    {status === "creating"
-                      ? "Building your app..."
-                      : "Updating your app..."}
-                  </p>
-                </motion.div>
-              )}
-            </AnimatePresence>
           </div>
         </motion.div>
       )}