show error for free limits

app/api/ask/route.ts

@@ -107,16 +107,26 @@ export async function POST(request: Request) {
 
         await writer.close();
       } catch (error) {
-        console.error(error);
         try {
           const errorMessage =
             error instanceof Error
               ? error.message
               : "An error occurred while processing your request";
-          const errorPayload = JSON.stringify({
-            messageError: errorMessage,
-            isError: true,
-          });
+          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) {

components/ask-ai/useGeneration.ts

@@ -326,11 +326,6 @@ export const useGeneration = (projectName: string) => {
           setIsLoading(false);
           return;
         }
-        // if (abortController.current?.signal.aborted) {
-        //   toast.error("Generation aborted");
-        //   setIsLoading(false);
-        //   return;
-        // }
         const chunk = decoder.decode(value, { stream: true });
         completeResponse += chunk;
 
@@ -339,13 +334,25 @@ export const useGeneration = (projectName: string) => {
           if (errorMatch) {
             try {
               const errorData = JSON.parse(errorMatch[1]);
+              console.log("Parsed error data:", errorData);
               if (errorData.isError) {
                 const lastMessageId =
                   currentMessages[currentMessages.length - 1].id;
                 updateMessage(lastMessageId, {
                   isThinking: false,
                   isAborted: true,
-                  content: `Error: ${errorData.messageError}`,
+                  content: errorData?.showProMessage
+                    ? `You have exceeded your monthly included credits with Hugging Face inference provider. Please consider upgrading to a pro plan.`
+                    : `Error: ${errorData.messageError}`,
+                  actions: errorData?.showProMessage
+                    ? [
+                        {
+                          label: "Upgrade to Pro",
+                          variant: "pro",
+                          type: MessageActionType.UPGRADE_TO_PRO,
+                        },
+                      ]
+                    : [],
                 });
                 setIsLoading(false);
                 return;

components/chat/index.tsx

@@ -2,7 +2,8 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useSession } from "next-auth/react";
 import { cn } from "@/lib/utils";
 import { ChevronRight, ExternalLink } from "lucide-react";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
 import Markdown from "react-markdown";
 import { useQueryClient } from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
@@ -11,12 +12,14 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 import { useChat } from "./useChat";
-import { AiLoading } from "../ask-ai/loading";
-import Loading from "../loading";
-import { useGeneration } from "../ask-ai/useGeneration";
+import { AiLoading } from "@/components/ask-ai/loading";
+import Loading from "@/components/loading";
+import { useGeneration } from "@/components/ask-ai/useGeneration";
 import { MessageAction, MessageActionType, File } from "@/lib/type";
-import { Button } from "../ui/button";
-import { getFileIcon } from "../ask-ai/input-mentions";
+import { Button } from "@/components/ui/button";
+import { getFileIcon } from "@/components/ask-ai/input-mentions";
+import ProIcon from "@/assets/pro.svg";
+import ProModal from "../pro-modal";
 
 export function AppEditorChat({
   isNew,
@@ -33,6 +36,7 @@ export function AppEditorChat({
   const chatProjectName = isNew ? "new" : projectName ?? "new";
   const { messages } = useChat(chatProjectName);
   const { isLoading, createProject } = useGeneration(chatProjectName);
+  const [openProModal, setOpenProModal] = useState(false);
 
   const project = queryClient.getQueryData<SpaceEntry>(["project"]);
   const files = queryClient.getQueryData<File[]>(["files"]) ?? [];
@@ -49,6 +53,7 @@ export function AppEditorChat({
     if (!action) return;
     switch (action.type) {
       case MessageActionType.PUBLISH_PROJECT:
+        const files = queryClient.getQueryData<File[]>(["files"]) ?? [];
         return createProject(
           files ?? [],
           action.projectTitle ?? "",
@@ -60,6 +65,8 @@ export function AppEditorChat({
           `https://huggingface.co/spaces/${project?.name}`,
           "_blank"
         );
+      case MessageActionType.UPGRADE_TO_PRO:
+        return setOpenProModal(true);
     }
   };
 
@@ -295,6 +302,13 @@ export function AppEditorChat({
                             overlay={false}
                           />
                         )}
+                        {action.type === MessageActionType.UPGRADE_TO_PRO && (
+                          <Image
+                            src={ProIcon}
+                            alt="Pro Icon"
+                            className="size-3.5"
+                          />
+                        )}
                         {action.label}
                       </Button>
                     ))}
@@ -304,6 +318,7 @@ export function AppEditorChat({
           </div>
         ))}
       </div>
+      <ProModal open={openProModal} onClose={setOpenProModal} />
     </div>
   );
 }

components/pro-modal/index.tsx

@@ -0,0 +1,100 @@
+import { useLocalStorage } from "react-use";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { CheckCheck } from "lucide-react";
+
+export const ProModal = ({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const handleProClick = () => {
+    window.open("https://huggingface.co/subscribe/pro?from=DeepSite", "_blank");
+    onClose(false);
+  };
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent
+        showCloseButton={false}
+        className="sm:max-w-[425px] rounded-3xl! p-0! overflow-hidden"
+      >
+        <DialogTitle className="hidden" />
+        <header className="bg-linear-to-b from-indigo-500/25 dark:from-indigo-500/40 to-background px-6 pt-6">
+          <div className="flex items-center justify-start -space-x-4 mb-5">
+            <div className="size-14 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
+              🚀
+            </div>
+            <div className="size-16 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-4xl z-2">
+              🤩
+            </div>
+            <div className="size-14 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-3xl opacity-50">
+              🥳
+            </div>
+          </div>
+          <h2 className="text-2xl font-bold text-primary">
+            Only $9 to enhance your possibilities
+          </h2>
+          <p className="text-muted-foreground text-base mt-2 max-w-sm">
+            It seems like you have reached the monthly free limit of DeepSite.
+          </p>
+        </header>
+        <main className="flex flex-col items-start text-left relative px-6 pb-6">
+          <div className="w-1/2 h-px bg-accent/70 my-4"></div>
+          <p className="text-lg mt-3 text-primary font-semibold">
+            Upgrade to a <ProTag className="mx-1" /> Account, and unlock your
+            DeepSite high quota access ⚡
+          </p>
+          <ul className="mt-3 space-y-1 text-muted-foreground">
+            <li className="text-sm text-muted-foreground space-x-2 flex items-center justify-start gap-2 mb-3">
+              You&apos;ll also unlock some Hugging Face PRO features, like:
+            </li>
+            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
+              <CheckCheck className="text-emerald-500 size-4" />
+              Get acces to thousands of AI app (ZeroGPU) with high quota
+            </li>
+            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
+              <CheckCheck className="text-emerald-500 size-4" />
+              Get exclusive early access to new features and updates
+            </li>
+            <li className="text-sm space-x-2 flex items-center justify-start gap-2">
+              <CheckCheck className="text-emerald-500 size-4" />
+              Get free credits across all Inference Providers
+            </li>
+            <li className="text-sm text-muted-foreground space-x-2 flex items-center justify-start gap-2 mt-3">
+              ... and lots more!
+            </li>
+          </ul>
+          <Button
+            variant="default"
+            size="lg"
+            tabIndex={-1}
+            className="w-full mt-8"
+            onClick={handleProClick}
+          >
+            Subscribe to PRO ($9/month)
+          </Button>
+        </main>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const ProTag = ({
+  className,
+  ...props
+}: {
+  className?: string;
+  onClick?: () => void;
+}) => (
+  <span
+    className={`${className} ${
+      props.onClick ? "cursor-pointer" : ""
+    } bg-linear-to-br shadow-green-500/10 dark:shadow-green-500/20 inline-block -skew-x-12 from-pink-500 via-green-400 to-yellow-400 text-xs font-bold text-black shadow-lg rounded-md px-2.5 py-[3px]`}
+    {...props}
+  >
+    PRO
+  </span>
+);
+export default ProModal;

components/ui/button.tsx

@@ -27,6 +27,7 @@ const buttonVariants = cva(
           "border border-indigo-500 bg-indigo-500 text-white hover:bg-indigo-600 dark:border-indigo-500/30 dark:bg-indigo-500/20 dark:text-indigo-400 dark:hover:bg-indigo-500/30",
         "ghost-bordered":
           "border bg-primary-foreground hover:bg-background hover:text-accent-foreground dark:hover:bg-accent/50",
+        pro: "bg-linear-to-br from-pink-500 dark:from-pink-500/50 via-green-500 dark:via-green-500/50 to-amber-500 dark:to-amber-500/50 text-white hover:brightness-120 font-semibold! [&_img]:grayscale [&_img]:brightness-1 [&_img]:invert dark:[&_img]:invert-0 dark:[&_img]:grayscale-0 dark:[&_img]:brightness-100",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",

lib/type.ts

@@ -9,6 +9,7 @@ export type ProviderType = "auto" | "cheapest" | "fastest" | string;
 export enum MessageActionType {
   PUBLISH_PROJECT = "PUBLISH_PROJECT",
   SEE_LIVE_PREVIEW = "SEE_LIVE_PREVIEW",
+  UPGRADE_TO_PRO = "UPGRADE_TO_PRO",
 }
 export type MessageAction = {
   label: string;
@@ -20,7 +21,7 @@ export type MessageAction = {
   projectTitle?: string;
   prompt?: string;
   messageReferrer?: number;
-}
+};
 export type Message = {
   id: string;
   role: MessageRole;
@@ -35,11 +36,11 @@ export type Message = {
 };
 export type File = {
   path: string;
-  content?: string
+  content?: string;
 };
 export interface Commit {
   title: string;
   oid: string;
   date: Date;
 }
-export type MessageRole = "user" | "assistant";
+export type MessageRole = "user" | "assistant";