switch to another model automatically if model is not available atm

app/api/ask/route.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { NextResponse } from "next/server";
 import { InferenceClient } from "@huggingface/inference";
 
@@ -48,96 +47,123 @@ export async function POST(request: Request) {
       },
     });
     (async () => {
-      try {
-        const chatCompletion = client.chatCompletionStream({
-          model: model + (provider !== "auto" ? `:${provider}` : ""),
-          messages: [
-            {
-              role: "system",
-              content:
-                files.length > 0
-                  ? FOLLOW_UP_SYSTEM_PROMPT
-                  : INITIAL_SYSTEM_PROMPT,
-            },
-            ...previousMessages.map((message: Message) => ({
-              role: message.role,
-              content: message.content,
-            })),
-            ...(files?.length > 0
-              ? [
-                  {
-                    role: "user",
-                    content: `Here are the files that the user has provider:${files
-                      .map(
-                        (file: File) =>
-                          `File: ${file.path}\nContent: ${file.content}`
-                      )
-                      .join("\n")}\n\n${prompt}`,
-                  },
-                ]
-              : []),
-            {
-              role: "user",
-              content: `${
-                redesignMd?.url &&
-                `Redesign the following website ${redesignMd.url}, try to use the same images and content, but you can still improve it if needed. Do the best version possibile. Here is the markdown:\n ${redesignMd.md} \n\n`
-              }${prompt} ${
-                medias && medias.length > 0
-                  ? `\nHere is the list of my media files: ${medias.join(
-                      ", "
-                    )}\n`
-                  : ""
-              }`,
-            },
-          ],
-          stream: true,
-          max_tokens: 16_000,
-        });
-        while (true) {
-          const { done, value } = await chatCompletion.next();
-          if (done) {
-            break;
-          }
+      let hasRetried = false;
+      let currentModel = model;
+      let currentProvider = provider;
+
+      const tryGeneration = async (): Promise<void> => {
+        try {
+          const chatCompletion = client.chatCompletionStream({
+            model: currentModel + (currentProvider !== "auto" ? `:${currentProvider}` : ""),
+            messages: [
+              {
+                role: "system",
+                content:
+                  files.length > 0
+                    ? FOLLOW_UP_SYSTEM_PROMPT
+                    : INITIAL_SYSTEM_PROMPT,
+              },
+              ...previousMessages.map((message: Message) => ({
+                role: message.role,
+                content: message.content,
+              })),
+              ...(files?.length > 0
+                ? [
+                    {
+                      role: "user",
+                      content: `Here are the files that the user has provider:${files
+                        .map(
+                          (file: File) =>
+                            `File: ${file.path}\nContent: ${file.content}`
+                        )
+                        .join("\n")}\n\n${prompt}`,
+                    },
+                  ]
+                : []),
+              {
+                role: "user",
+                content: `${
+                  redesignMd?.url &&
+                  `Redesign the following website ${redesignMd.url}, try to use the same images and content, but you can still improve it if needed. Do the best version possibile. Here is the markdown:\n ${redesignMd.md} \n\n`
+                }${prompt} ${
+                  medias && medias.length > 0
+                    ? `\nHere is the list of my media files: ${medias.join(
+                        ", "
+                      )}\n`
+                    : ""
+                }`,
+              },
+            ],
+            stream: true,
+            max_tokens: 16_000,
+          });
+          while (true) {
+            const { done, value } = await chatCompletion.next();
+            if (done) {
+              break;
+            }
 
-          const chunk = value.choices[0]?.delta?.content;
-          if (chunk) {
-            await writer.write(encoder.encode(chunk));
+            const chunk = value.choices[0]?.delta?.content;
+            if (chunk) {
+              await writer.write(encoder.encode(chunk));
+            }
           }
-        }
 
-        await writer.close();
-      } catch (error) {
-        try {
+          await writer.close();
+        } catch (error) {
           const errorMessage =
             error instanceof Error
               ? error.message
               : "An error occurred while processing your request";
-          let errorPayload = "";
+
           if (
-            errorMessage?.includes("exceeded your monthly included credits")
+            !hasRetried &&
+            errorMessage?.includes("Failed to perform inference: Model not found")
           ) {
-            errorPayload = JSON.stringify({
-              messageError: errorMessage,
-              showProMessage: true,
-              isError: true,
-            });
-          } else {
-            errorPayload = JSON.stringify({
-              messageError: errorMessage,
-              isError: true,
-            });
+            hasRetried = true;
+
+            const fallbackModel = MODELS.find((m) => m.value !== model);
+            if (fallbackModel) {
+              currentModel = fallbackModel.value;
+              currentProvider = fallbackModel.autoProvider ?? "auto";
+
+              const switchMessage = `\n\n_Note: The selected model was not available. Switched to \`${fallbackModel.value}\`._\n\n`;
+              await writer.write(encoder.encode(switchMessage));
+
+              return tryGeneration();
+            }
           }
-          await writer.write(encoder.encode(`\n\n__ERROR__:${errorPayload}`));
-          await writer.close();
-        } catch (closeError) {
-          console.error("Failed to send error message:", closeError);
+
           try {
-            await writer.abort(error);
-          } catch (abortError) {
-            console.error("Failed to abort writer:", abortError);
+            let errorPayload = "";
+            if (
+              errorMessage?.includes("exceeded your monthly included credits")
+            ) {
+              errorPayload = JSON.stringify({
+                messageError: errorMessage,
+                showProMessage: true,
+                isError: true,
+              });
+            } else {
+              errorPayload = JSON.stringify({
+                messageError: errorMessage,
+                isError: true,
+              });
+            }
+            await writer.write(encoder.encode(`\n\n__ERROR__:${errorPayload}`));
+            await writer.close();
+          } catch (closeError) {
+            console.error("Failed to send error message:", closeError);
+            try {
+              await writer.abort(error);
+            } catch (abortError) {
+              console.error("Failed to abort writer:", abortError);
+            }
           }
         }
-      }
+      };
+
+      await tryGeneration();
     })();
 
     return response;

components/ask-ai/ask-ai-landing.tsx

@@ -36,7 +36,7 @@ export function AskAiLanding({ className }: { className?: string }) {
         onKeyDown={(e) => {
           if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault();
-            router.push(`/new?prompt=${prompt}`);
+            router.push(`/deepsite/new?prompt=${prompt}`);
           }
         }}
       />
@@ -54,7 +54,7 @@ export function AskAiLanding({ className }: { className?: string }) {
             size="icon-sm"
             className="rounded-full!"
             onClick={() => {
-              router.push(`/new?prompt=${prompt}`);
+              router.push(`/deepsite/new?prompt=${prompt}`);
             }}
           >
             <ArrowUp />

components/ask-ai/ask-ai.tsx

@@ -69,13 +69,16 @@ export function AskAI({
     if (initialPrompt && initialPrompt.trim() !== "" && isNew) {
       setTimeout(() => {
         if (isHistoryView) return;
-        callAi({
-          prompt: initialPrompt,
-          model,
-          onComplete,
-          provider,
-        });
-        router.replace("/new");
+        callAi(
+          {
+            prompt: initialPrompt,
+            model,
+            onComplete,
+            provider,
+          },
+          setModel
+        );
+        router.replace("/deepsite/new");
       }, 200);
     }
   });
@@ -85,14 +88,17 @@ export function AskAI({
     if (contentEditableRef.current) {
       contentEditableRef.current.innerHTML = "";
     }
-    callAi({
-      prompt,
-      model,
-      onComplete,
-      provider,
-      redesignMd,
-      medias: selectedMedias ?? [],
-    });
+    callAi(
+      {
+        prompt,
+        model,
+        onComplete,
+        provider,
+        redesignMd,
+        medias: selectedMedias ?? [],
+      },
+      setModel
+    );
     if (selectedMedias.length > 0) setSelectedMedias([]);
     if (redesignMd) setRedesignMd(null);
   };

components/ask-ai/useGeneration.ts

@@ -18,7 +18,7 @@ export const useGeneration = (projectName: string) => {
   const audio = useRef<HTMLAudioElement>(null);
   const queryClient = useQueryClient();
   const abortController = useRef<AbortController | null>(null);
-  const [, setStoredMessages, clearStoredMessages] = useLocalStorage<Message[]>(
+  const [, setStoredMessages] = useLocalStorage<Message[]>(
     `messages-${projectName}`,
     []
   );
@@ -204,7 +204,7 @@ export const useGeneration = (projectName: string) => {
     medias?: string[] | null;
     onComplete: () => void;
     provider?: ProviderType;
-  }) => {
+  }, setModel: (model: string) => void) => {
     setIsLoading(true);
     const messages = getMessages();
     const files = getFiles();
@@ -361,6 +361,15 @@ export const useGeneration = (projectName: string) => {
             }
           }
         }
+        if (completeResponse.includes("_Note: The selected model was not available. Switched to")) {
+          const newModel = completeResponse.match(/The selected model was not available. Switched to (.+)/)?.[1].replace(/`/g, "").replace(" ", "").replace(/\.|_$/g, "");
+          if (newModel) {
+            setModel(newModel);
+            updateMessage(currentMessages[currentMessages.length - 1].id, {
+              model: newModel,
+            });
+          }
+        }
 
         const files = getFiles();
         const { messageContent, files: newFiles } = formatResponse(

components/not-authorized.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Image from "next/image";
 import { Button } from "./ui/button";
 import Link from "next/link";
@@ -114,11 +114,14 @@ export const NotAuthorizedDomain = () => {
           <p className="text-lg text-muted-foreground mb-6">
             Unfortunately, you don&apos;t have access to DeepSite from this
             domain:{" "}
-            <span className="font-mono font-semibold bg-indigo-500/10 border-2 border-indigo-500/10 text-indigo-500 text-base px-2 py-1 rounded-md">
-              {window.location.hostname}
-            </span>
+            {open && (
+              <span className="font-mono font-semibold bg-indigo-500/10 border-2 border-indigo-500/10 text-indigo-500 text-base px-2 py-1 rounded-md">
+                {window?.location?.hostname ?? "unknown domain"}
+              </span>
+            )}
             .
           </p>
+
           <Link href="https://huggingface.co/deepsite" target="_blank">
             <Button size="lg" className="text-base!">
               Go to DeepSite

components/user-menu/index.tsx

@@ -203,7 +203,7 @@ export function UserMenu() {
                   </Link>
                 )}
                 <Link
-                  href="/new"
+                  href="/deepsite/new"
                   className="text-xs text-muted-foreground hover:text-primary flex items-center justify-start gap-1"
                 >
                   New project