add thinking process

app/api/ask/route.ts

@@ -80,8 +80,6 @@ export async function POST(request: NextRequest) {
     billTo = "huggingface";
   }
 
-  const selectedProvider = await getBestProvider(selectedModel.value, provider)
-
   let rewrittenPrompt = redesignMarkdown ? `Here is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : prompt;
 
   if (enhancedSettings.isActive) {
@@ -114,8 +112,7 @@ export async function POST(request: NextRequest) {
         
         const chatCompletion = client.chatCompletionStream(
           {
-            model: selectedModel.value,
-            provider: selectedProvider,
+            model: selectedModel.value + (provider !== "auto" ? `:${provider}` : ""),
             messages: [
               {
                 role: "system",
@@ -142,7 +139,6 @@ export async function POST(request: NextRequest) {
           }
 
           const chunk = value.choices[0]?.delta?.content;
-          console.log(chunk);
           if (chunk) {
             await writer.write(encoder.encode(chunk));
           }
@@ -267,8 +263,6 @@ export async function PUT(request: NextRequest) {
     billTo = "huggingface";
   }
 
-  const selectedProvider = await getBestProvider(selectedModel.value, provider);
-
   try {
     const encoder = new TextEncoder();
     const stream = new TransformStream();
@@ -304,8 +298,7 @@ export async function PUT(request: NextRequest) {
 
         const chatCompletion = client.chatCompletionStream(
           {
-            model: selectedModel.value,
-            provider: selectedProvider,
+            model: selectedModel.value + (provider !== "auto" ? `:${provider}` : ""),
             messages: [
               {
                 role: "system",

components/editor/ask-ai/index.tsx

@@ -38,6 +38,7 @@ export const AskAi = ({
   const {
     isAiWorking,
     isThinking,
+    thinkingContent,
     selectedFiles,
     setSelectedFiles,
     selectedElement,
@@ -66,7 +67,6 @@ export const AskAi = ({
   const [prompt, setPrompt] = useState(
     promptStorage && promptStorage.trim() !== "" ? promptStorage : ""
   );
-  const [think, setThink] = useState("");
   const [openThink, setOpenThink] = useState(false);
   const [randomPromptLoading, setRandomPromptLoading] = useState(false);
 
@@ -142,7 +142,15 @@ export const AskAi = ({
     if (refThink.current) {
       refThink.current.scrollTop = refThink.current.scrollHeight;
     }
-  }, [think]);
+    // Auto-open dropdown when thinking content appears
+    if (thinkingContent && isThinking && !openThink) {
+      setOpenThink(true);
+    }
+    // Auto-collapse when thinking is complete
+    if (thinkingContent && !isThinking && openThink) {
+      setOpenThink(false);
+    }
+  }, [thinkingContent, isThinking]);
 
   const randomPrompt = () => {
     setRandomPromptLoading(true);
@@ -157,7 +165,7 @@ export const AskAi = ({
   return (
     <div className="p-3 w-full">
       <div className="relative bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-20 w-full group">
-        {think && (
+        {thinkingContent && (
           <div className="w-full border-b border-neutral-700 relative overflow-hidden">
             <header
               className="flex items-center justify-between px-5 py-2.5 group hover:bg-neutral-600/20 transition-colors duration-200 cursor-pointer"
@@ -189,7 +197,7 @@ export const AskAi = ({
               )}
             >
               <p className="text-[13px] text-neutral-400 whitespace-pre-line px-5 pb-4 pt-3">
-                {think}
+                {thinkingContent}
               </p>
             </main>
           </div>
@@ -221,7 +229,7 @@ export const AskAi = ({
                     ? "Uploading images..."
                     : isAiWorking && !isSameHtml
                     ? "DeepSite is working..."
-                    : "DeepSite is thinking..."
+                    : "DeepSite is working..."
                 }
               />
               {isAiWorking && (

components/editor/ask-ai/settings.tsx

@@ -20,7 +20,14 @@ import {
 import { useMemo, useState, useEffect } from "react";
 import { useUpdateEffect } from "react-use";
 import Image from "next/image";
-import { BrainIcon, CheckCheck, ChevronDown } from "lucide-react";
+import {
+  BrainIcon,
+  CheckCheck,
+  ChevronDown,
+  Sparkles,
+  Zap,
+  DollarSign,
+} from "lucide-react";
 import { useAi } from "@/hooks/useAi";
 import { getProviders } from "@/lib/get-providers";
 import Loading from "@/components/loading";
@@ -62,7 +69,10 @@ export function Settings({
   // }, [model]);
 
   useUpdateEffect(() => {
-    if (provider !== "auto" && !providers.includes(provider as string)) {
+    if (
+      !["auto", "fastest", "cheapest"].includes(provider as string) &&
+      !providers.includes(provider as string)
+    ) {
       setProvider("auto");
     }
   }, [model, provider]);
@@ -205,47 +215,83 @@ export function Settings({
             </div>
           )} */}
           <div className="flex flex-col gap-3">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-neutral-300 text-sm mb-1.5">
-                  Use auto-provider
-                </p>
-                <p className="text-xs text-neutral-400/70">
-                  We&apos;ll automatically select the best provider for you
-                  based on your prompt.
-                </p>
-              </div>
-              <div
-                className={classNames(
-                  "bg-neutral-700 rounded-full min-w-10 w-10 h-6 flex items-center justify-between p-1 cursor-pointer transition-all duration-200",
-                  {
-                    "!bg-sky-500": provider === "auto",
-                  }
-                )}
-                onClick={() => {
-                  const foundModel = MODELS.find(
-                    (m: { value: string }) => m.value === model
-                  );
-                  if (provider === "auto" && foundModel?.autoProvider) {
-                    setProvider(foundModel.autoProvider);
-                  } else {
-                    setProvider("auto");
-                  }
-                }}
-              >
-                <div
+            <div>
+              <p className="text-neutral-300 text-sm mb-1">Provider Mode</p>
+              <p className="text-neutral-400 text-xs mb-3 leading-relaxed">
+                Choose how we select providers:{" "}
+                <span className="text-white px-1.5 py-0.5 rounded bg-pink-500">
+                  Auto
+                </span>{" "}
+                (smart),{" "}
+                <span className="text-white px-1.5 py-0.5 rounded bg-yellow-500">
+                  Fastest
+                </span>{" "}
+                (speed), or{" "}
+                <span className="text-white px-1.5 py-0.5 rounded bg-green-500">
+                  Cheapest
+                </span>{" "}
+                (cost).
+              </p>
+              <div className="grid grid-cols-3 gap-1 bg-neutral-800 p-1 rounded-full">
+                <button
+                  className={classNames(
+                    "flex flex-col items-center justify-center cursor-pointer py-1.5 rounded-full transition-all duration-200",
+                    {
+                      "bg-white text-neutral-800": provider === "auto",
+                      "text-neutral-400 hover:text-neutral-200":
+                        provider !== "auto",
+                    }
+                  )}
+                  onClick={() => setProvider("auto")}
+                >
+                  <Sparkles
+                    className={classNames("size-3.5 mb-0.5", {
+                      "text-pink-400": provider !== "auto",
+                    })}
+                  />
+                  <span className="text-[10px] font-medium">Auto</span>
+                </button>
+                <button
+                  className={classNames(
+                    "flex flex-col items-center justify-center cursor-pointer py-1.5 rounded-full transition-all duration-200",
+                    {
+                      "bg-white text-neutral-800": provider === "fastest",
+                      "text-neutral-400 hover:text-neutral-200":
+                        provider !== "fastest",
+                    }
+                  )}
+                  onClick={() => setProvider("fastest")}
+                >
+                  <Zap
+                    className={classNames("size-3.5 mb-0.5", {
+                      "text-yellow-400": provider !== "fastest",
+                    })}
+                  />
+                  <span className="text-[10px] font-medium">Fastest</span>
+                </button>
+                <button
                   className={classNames(
-                    "w-4 h-4 rounded-full shadow-md transition-all duration-200 bg-neutral-200",
+                    "flex flex-col items-center justify-center cursor-pointer py-1.5 rounded-full transition-all duration-200",
                     {
-                      "translate-x-4": provider === "auto",
+                      "bg-white text-neutral-800": provider === "cheapest",
+                      "text-neutral-400 hover:text-neutral-200":
+                        provider !== "cheapest",
                     }
                   )}
-                />
+                  onClick={() => setProvider("cheapest")}
+                >
+                  <DollarSign
+                    className={classNames("size-3.5 mb-0.5", {
+                      "text-green-400": provider !== "cheapest",
+                    })}
+                  />
+                  <span className="text-[10px] font-medium">Cheapest</span>
+                </button>
               </div>
             </div>
             <label className="block">
               <p className="text-neutral-300 text-sm mb-2">
-                Inference Provider
+                Or choose a specific provider
               </p>
               <div className="grid grid-cols-2 gap-1.5 relative">
                 {loadingProviders ? (

components/icons/discord.tsx

@@ -11,7 +11,7 @@ export const DiscordIcon = ({ className }: { className?: string }) => {
       xmlns="http://www.w3.org/2000/svg"
       className={className}
     >
-      <g clip-path="url(#clip0_1084_3121)">
+      <g clipPath="url(#clip0_1084_3121)">
         <path
           d="M81.15 0C79.9124 2.1973 78.8011 4.4704 77.7909 6.794C68.1934 5.3544 58.4191 5.3544 48.7964 6.794C47.8114 4.4704 46.6748 2.1973 45.4373 0C36.4207 1.5407 27.6314 4.2431 19.2968 8.0568C2.77901 32.5304 -1.69139 56.3725 0.531208 79.8863C10.2044 87.0339 21.0395 92.4893 32.5817 95.9747C35.1831 92.4893 37.4815 88.7766 39.4515 84.9124C35.7135 83.5233 32.1018 81.7806 28.6417 79.7601C29.5509 79.1034 30.4349 78.4215 31.2936 77.7648C51.5746 87.3118 75.0632 87.3118 95.3694 77.7648C96.2281 78.472 97.1121 79.1539 98.0213 79.7601C94.5612 81.8058 90.9495 83.5233 87.1863 84.9377C89.1563 88.8019 91.4546 92.5146 94.0561 96C105.598 92.5146 116.433 87.0844 126.107 79.9369C128.733 52.6598 121.611 29.0197 107.29 8.0821C98.9811 4.2684 90.1918 1.5659 81.1752 0.0505L81.15 0ZM42.2802 65.4144C36.0419 65.4144 30.8643 59.7569 30.8643 52.7609C30.8643 45.7649 35.8398 40.0821 42.255 40.0821C48.6702 40.0821 53.7719 45.7901 53.6709 52.7609C53.5699 59.7317 48.6449 65.4144 42.2802 65.4144ZM84.3576 65.4144C78.0939 65.4144 72.9669 59.7569 72.9669 52.7609C72.9669 45.7649 77.9424 40.0821 84.3576 40.0821C90.7728 40.0821 95.8493 45.7901 95.7482 52.7609C95.6472 59.7317 90.7222 65.4144 84.3576 65.4144Z"
           fill="currentColor"

hooks/useAi.ts

@@ -44,6 +44,18 @@ export const useAi = (onScrollToBottom?: () => void) => {
     client.setQueryData(["ai.isThinking"], newIsThinking);
   };
 
+  const { data: thinkingContent } = useQuery<string>({
+    queryKey: ["ai.thinkingContent"],
+    queryFn: async () => "",
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    initialData: ""
+  });
+  const setThinkingContent = (newThinkingContent: string) => {
+    client.setQueryData(["ai.thinkingContent"], newThinkingContent);
+  };
+
   const { data: selectedElement } = useQuery<HTMLElement | null>({
     queryKey: ["ai.selectedElement"],
     queryFn: async () => null,
@@ -167,6 +179,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
     if (!redesignMarkdown && !prompt.trim()) return;
     
     setIsAiWorking(true);
+    setThinkingContent(""); // Reset thinking content
     streamingPagesRef.current.clear(); // Reset tracking for new generation
     
     const abortController = new AbortController();
@@ -199,6 +212,14 @@ export const useAi = (onScrollToBottom?: () => void) => {
           const { done, value } = await reader.read();
           
           if (done) {
+            // Final processing - extract and remove thinking content
+            const thinkMatch = contentResponse.match(/<think>([\s\S]*?)<\/think>/);
+            if (thinkMatch) {
+              setThinkingContent(thinkMatch[1].trim());
+              setIsThinking(false);
+              contentResponse = contentResponse.replace(/<think>[\s\S]*?<\/think>/, '').trim();
+            }
+
             const trimmedResponse = contentResponse.trim();
             if (trimmedResponse.startsWith("{") && trimmedResponse.endsWith("}")) {
               try {
@@ -238,6 +259,26 @@ export const useAi = (onScrollToBottom?: () => void) => {
           const chunk = decoder.decode(value, { stream: true });
           contentResponse += chunk;
           
+          // Extract thinking content while streaming
+          if (contentResponse.includes('</think>')) {
+            // Thinking is complete, extract final content and stop thinking
+            const thinkMatch = contentResponse.match(/<think>([\s\S]*?)<\/think>/);
+            if (thinkMatch) {
+              setThinkingContent(thinkMatch[1].trim());
+              setIsThinking(false);
+            }
+          } else if (contentResponse.includes('<think>')) {
+            // Still thinking, update content
+            const thinkMatch = contentResponse.match(/<think>([\s\S]*)$/);
+            if (thinkMatch) {
+              const thinkingText = thinkMatch[1].trim();
+              if (thinkingText) {
+                setIsThinking(true);
+                setThinkingContent(thinkingText);
+              }
+            }
+          }
+
           const trimmedResponse = contentResponse.trim();
           if (trimmedResponse.startsWith("{") && trimmedResponse.endsWith("}")) {
             try {
@@ -270,6 +311,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
     } catch (error: any) {
       setIsAiWorking(false);
       setIsThinking(false);
+      setThinkingContent("");
       setController(null);
       
       if (!abortController.signal.aborted) {
@@ -289,6 +331,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
 
     
     setIsAiWorking(true);
+    setThinkingContent(""); // Reset thinking content
     
     const abortController = new AbortController();
     setController(abortController);
@@ -330,6 +373,14 @@ export const useAi = (onScrollToBottom?: () => void) => {
           const { done, value } = await reader.read();
           
           if (done) {
+            // Extract and remove thinking content
+            const thinkMatch = contentResponse.match(/<think>([\s\S]*?)<\/think>/);
+            if (thinkMatch) {
+              setThinkingContent(thinkMatch[1].trim());
+              setIsThinking(false);
+              contentResponse = contentResponse.replace(/<think>[\s\S]*?<\/think>/, '').trim();
+            }
+
             const metadataMatch = contentResponse.match(/___METADATA_START___([\s\S]*?)___METADATA_END___/);
             if (metadataMatch) {
               try {
@@ -439,6 +490,26 @@ export const useAi = (onScrollToBottom?: () => void) => {
           const chunk = decoder.decode(value, { stream: true });
           contentResponse += chunk;
           
+          // Extract thinking content while streaming
+          if (contentResponse.includes('</think>')) {
+            // Thinking is complete, extract final content and stop thinking
+            const thinkMatch = contentResponse.match(/<think>([\s\S]*?)<\/think>/);
+            if (thinkMatch) {
+              setThinkingContent(thinkMatch[1].trim());
+              setIsThinking(false);
+            }
+          } else if (contentResponse.includes('<think>')) {
+            // Still thinking, update content
+            const thinkMatch = contentResponse.match(/<think>([\s\S]*)$/);
+            if (thinkMatch) {
+              const thinkingText = thinkMatch[1].trim();
+              if (thinkingText) {
+                setIsThinking(true);
+                setThinkingContent(thinkingText);
+              }
+            }
+          }
+
           // Check for error responses during streaming
           const trimmedResponse = contentResponse.trim();
           if (trimmedResponse.startsWith("{") && trimmedResponse.endsWith("}")) {
@@ -471,6 +542,7 @@ export const useAi = (onScrollToBottom?: () => void) => {
     } catch (error: any) {
       setIsAiWorking(false);
       setIsThinking(false);
+      setThinkingContent("");
       setController(null);
       
       if (!abortController.signal.aborted) {
@@ -618,6 +690,8 @@ export const useAi = (onScrollToBottom?: () => void) => {
   return {
     isThinking,
     setIsThinking,
+    thinkingContent,
+    setThinkingContent,
     callAiNewProject,
     callAiFollowUp,
     isAiWorking,

lib/prompts.ts

@@ -16,7 +16,7 @@ Examples: http://static.photos/red/320x240/133 (red-themed with seed 133), http:
 export const PROMPT_FOR_PROJECT_NAME = `REQUIRED: Generate a name for the project, based on the user's request. Try to be creative and unique. Add a emoji at the end of the name. It should be short, like 6 words. Be fancy, creative and funny. DON'T FORGET IT, IT'S IMPORTANT!`
 
 export const INITIAL_SYSTEM_PROMPT_LIGHT = `You are an expert UI/UX and Front-End Developer.
-No need to explain what you did. Just return the expected result.
+No need to explain what you did. Just return the expected result. Use always TailwindCSS, don't forget to import it.
 Return the results following this format:
 1. Start with ${PROJECT_NAME_START}.
 2. Add the name of the project, right after the start tag.

package-lock.json

@@ -319,13 +319,13 @@
       }
     },
     "node_modules/@huggingface/inference": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.7.1.tgz",
-      "integrity": "sha512-gXrMocGDsE6kUZPEj82c3O+/OKnIfbHvg9rYjGA6svbWrYVmHCIAdCrrgCwNl2v5GELfPJrrfIv0bvzCTfa64A==",
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.13.1.tgz",
+      "integrity": "sha512-tP63myCjsH+2CqkOaDklJ9MDpUzp6esGMS7RHFXpfv66DWub43kaGTDpI49arqLXM+yFH6FW868eIDgespw5Uw==",
       "license": "MIT",
       "dependencies": {
         "@huggingface/jinja": "^0.5.1",
-        "@huggingface/tasks": "^0.19.35"
+        "@huggingface/tasks": "^0.19.62"
       },
       "engines": {
         "node": ">=18"
@@ -341,9 +341,9 @@
       }
     },
     "node_modules/@huggingface/tasks": {
-      "version": "0.19.43",
-      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.43.tgz",
-      "integrity": "sha512-ANO23K3ugclBl6VLwdt+7MxBkRkKEE17USUSqprHb29UB5ISigH+0AJcEuDA064uzn0hqYrG/nOcv1yARRt8bw==",
+      "version": "0.19.63",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.63.tgz",
+      "integrity": "sha512-hmd8e5fdjRiIJE7/EYWXS+Pm2SAu89xjZEgfZddN10ubWqlelXLyj2YgHZrVDEVkVA+5+ImMZUpQIez7b2//fw==",
       "license": "MIT"
     },
     "node_modules/@humanfs/core": {