Update components/editor/ask-ai/index.tsx

components/editor/ask-ai/index.tsx

@@ -11,6 +11,7 @@ import ProModal from "@/components/pro-modal";
 import { Button } from "@/components/ui/button";
 import { MODELS } from "@/lib/providers";
 import { HtmlHistory, Page, Project } from "@/types";
+// import { InviteFriends } from "@/components/invite-friends";
 import { Settings } from "@/components/editor/ask-ai/settings";
 import { LoginModal } from "@/components/login-modal";
 import { ReImagine } from "@/components/editor/ask-ai/re-imagine";
@@ -34,7 +35,6 @@ export function AskAI({
   onScrollToBottom,
   isAiWorking,
   setisAiWorking,
-  setAiThinking, // Add this prop
   isEditableModeEnabled = false,
   pages,
   htmlHistory,
@@ -58,7 +58,6 @@ export function AskAI({
   onNewPrompt: (prompt: string) => void;
   htmlHistory?: HtmlHistory[];
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
-  setAiThinking: React.Dispatch<React.SetStateAction<string | null>>; // Add type for the prop
   isNew?: boolean;
   onSuccess: (page: Page[], p: string, n?: number[][]) => void;
   isEditableModeEnabled: boolean;
@@ -81,6 +80,7 @@ export function AskAI({
   const [openProModal, setOpenProModal] = useState(false);
   const [openThink, setOpenThink] = useState(false);
   const [isThinking, setIsThinking] = useState(true);
+  const [think, setThink] = useState("");
   const [isFollowUp, setIsFollowUp] = useState(true);
   const [isUploading, setIsUploading] = useState(false);
   const [files, setFiles] = useState<string[]>(images ?? []);
@@ -101,7 +101,6 @@ export function AskAI({
     pages,
     isAiWorking,
     setisAiWorking,
-    setAiThinking, // Pass setAiThinking to the hook
   });
 
   const selectedModel = useMemo(() => {
@@ -112,9 +111,8 @@ export function AskAI({
     if (isAiWorking) return;
     if (!redesignMarkdown && !prompt.trim()) return;
 
-    setAiThinking(""); // Reset thinking text on new request
-
     if (isFollowUp && !redesignMarkdown && !isSameHtml) {
+      // Use follow-up function for existing projects
       const selectedElementHtml = selectedElement
         ? selectedElement.outerHTML
         : "";
@@ -160,7 +158,11 @@ export function AskAI({
         prompt,
         model,
         provider,
-        redesignMarkdown
+        redesignMarkdown,
+        handleThink,
+        () => {
+          setIsThinking(false);
+        }
       );
 
       if (result?.error) {
@@ -177,6 +179,12 @@ export function AskAI({
     }
   };
 
+  const handleThink = (think: string) => {
+    setThink(think);
+    setIsThinking(true);
+    setOpenThink(true);
+  };
+
   const handleError = (error: string, message?: string) => {
     switch (error) {
       case "login_required":
@@ -200,6 +208,12 @@ export function AskAI({
     }
   };
 
+  useUpdateEffect(() => {
+    if (refThink.current) {
+      refThink.current.scrollTop = refThink.current.scrollHeight;
+    }
+  }, [think]);
+
   useUpdateEffect(() => {
     if (!isThinking) {
       setOpenThink(false);
@@ -213,6 +227,43 @@ export function AskAI({
   return (
     <div className="px-3">
       <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-10 w-full group">
+        {think && (
+          <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"
+              onClick={() => {
+                setOpenThink(!openThink);
+              }}
+            >
+              <p className="text-sm font-medium text-neutral-300 group-hover:text-neutral-200 transition-colors duration-200">
+                {isThinking ? "DeepSite is thinking..." : "DeepSite's plan"}
+              </p>
+              <ChevronDown
+                className={classNames(
+                  "size-4 text-neutral-400 group-hover:text-neutral-300 transition-all duration-200",
+                  {
+                    "rotate-180": openThink,
+                  }
+                )}
+              />
+            </header>
+            <main
+              ref={refThink}
+              className={classNames(
+                "overflow-y-auto transition-all duration-200 ease-in-out",
+                {
+                  "max-h-[0px]": !openThink,
+                  "min-h-[250px] max-h-[250px] border-t border-neutral-700":
+                    openThink,
+                }
+              )}
+            >
+              <p className="text-[13px] text-neutral-400 whitespace-pre-line px-5 pb-4 pt-3">
+                {think}
+              </p>
+            </main>
+          </div>
+        )}
         <SelectedFiles
           files={selectedFiles}
           isAiWorking={isAiWorking}
@@ -235,7 +286,68 @@ export function AskAI({
               <div className="flex items-center justify-start gap-2">
                 <Loading overlay={false} className="!size-4 opacity-50" />
                 <p className="text-neutral-400 text-sm">
-                  {isUploading ? "Uploading images..." : "AI is working..."}
+                  {isUploading ? (
+                    "Uploading images..."
+                  ) : isAiWorking && !isSameHtml ? (
+                    "AI is working..."
+                  ) : (
+                    <span className="inline-flex">
+                      {[
+                        "D",
+                        "e",
+                        "e",
+                        "p",
+                        "S",
+                        "i",
+                        "t",
+                        "e",
+                        " ",
+                        "i",
+                        "s",
+                        " ",
+                        "T",
+                        "h",
+                        "i",
+                        "n",
+                        "k",
+                        "i",
+                        "n",
+                        "g",
+                        ".",
+                        ".",
+                        ".",
+                        " ",
+                        "W",
+                        "a",
+                        "i",
+                        "t",
+                        " ",
+                        "a",
+                        " ",
+                        "m",
+                        "o",
+                        "m",
+                        "e",
+                        "n",
+                        "t",
+                        ".",
+                        ".",
+                        ".",
+                      ].map((char, index) => (
+                        <span
+                          key={index}
+                          className="bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse"
+                          style={{
+                            animationDelay: `${index * 0.1}s`,
+                            animationDuration: "1.3s",
+                            animationIterationCount: "infinite",
+                          }}
+                        >
+                          {char === " " ? "\u00A0" : char}
+                        </span>
+                      ))}
+                    </span>
+                  )}
                 </p>
               </div>
               {isAiWorking && (
@@ -253,20 +365,21 @@ export function AskAI({
             disabled={isAiWorking}
             className={classNames(
               "w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none",
-              { "!pt-2.5": selectedElement && !isAiWorking }
+              {
+                "!pt-2.5": selectedElement && !isAiWorking,
+              }
             )}
             placeholder={
               selectedElement
-                ? `Ask about ${selectedElement.tagName.toLowerCase()}...`
+                ? `Ask DeepSite about ${selectedElement.tagName.toLowerCase()}...`
                 : isFollowUp && (!isSameHtml || pages?.length > 1)
-                ? "Ask for edits..."
-                : "Ask anything..."
+                ? "Ask DeepSite for edits"
+                : "Ask DeepSite anything..."
             }
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
             onKeyDown={(e) => {
               if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
                 callAi();
               }
             }}
@@ -313,10 +426,12 @@ export function AskAI({
                   align="start"
                   className="bg-neutral-950 text-xs text-neutral-200 py-1 px-2 rounded-md -translate-y-0.5"
                 >
-                  Select an element to edit it directly.
+                  Select an element on the page to ask DeepSite edit it
+                  directly.
                 </TooltipContent>
               </Tooltip>
             )}
+            {/* <InviteFriends /> */}
           </div>
           <div className="flex items-center justify-end gap-2">
             <Settings
@@ -344,6 +459,16 @@ export function AskAI({
           open={openProModal}
           onClose={() => setOpenProModal(false)}
         />
+        {pages.length === 1 && (
+          <div className="border border-sky-500/20 bg-sky-500/40 hover:bg-sky-600 transition-all duration-200 text-sky-500 pl-2 pr-4 py-1.5 text-xs rounded-full absolute top-0 -translate-y-[calc(100%+8px)] left-0 max-w-max flex items-center justify-start gap-2">
+            <span className="rounded-full text-[10px] font-semibold bg-white text-neutral-900 px-1.5 py-0.5">
+              NEW
+            </span>
+            <p className="text-sm text-neutral-100">
+              DeepSite can now create multiple pages at once. Try it!
+            </p>
+          </div>
+        )}
         {!isSameHtml && (
           <div className="absolute top-0 right-0 -translate-y-[calc(100%+8px)] select-none text-xs text-neutral-400 flex items-center justify-center gap-2 bg-neutral-800 border border-neutral-700 rounded-md p-1 pr-2.5">
             <label
@@ -368,6 +493,7 @@ export function AskAI({
       </div>
       <audio ref={hookAudio} id="audio" className="hidden">
         <source src="/success.mp3" type="audio/mpeg" />
+        Your browser does not support the audio element.
       </audio>
     </div>
   );