invite friends modal

package-lock.json

@@ -12,6 +12,7 @@
         "@huggingface/inference": "^3.6.1",
         "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-popover": "^1.1.14",
         "@radix-ui/react-select": "^2.2.5",
@@ -1278,6 +1279,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
+      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "@huggingface/inference": "^3.6.1",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",

src/components/ask-ai/ask-ai-new.tsx

@@ -3,7 +3,7 @@ import { useState, useRef } from "react";
 import classNames from "classnames";
 import { toast } from "sonner";
 import { useLocalStorage, useUpdateEffect } from "react-use";
-import { ArrowUp, ChevronDown, X } from "lucide-react";
+import { ArrowUp, ChevronDown } from "lucide-react";
 import { FaStopCircle } from "react-icons/fa";
 
 import Login from "../login/login";
@@ -16,6 +16,7 @@ import { Button } from "../ui/button";
 import { MODELS } from "../../../utils/providers";
 import Loading from "../loading/loading";
 import { HtmlHistory } from "../../../utils/types";
+import InviteFriends from "../invite-friends/invite-friends";
 
 function AskAI({
   html,
@@ -37,7 +38,6 @@ function AskAI({
   onSuccess: (h: string, p: string, n?: number[][]) => void;
 }) {
   const refThink = useRef<HTMLDivElement | null>(null);
-  // const uploadInputRef = useRef<HTMLInputElement | null>(null);
 
   const [open, setOpen] = useState(false);
   const [prompt, setPrompt] = useState("");
@@ -51,7 +51,6 @@ function AskAI({
   const [think, setThink] = useState<string | undefined>(undefined);
   const [openThink, setOpenThink] = useState(false);
   const [isThinking, setIsThinking] = useState(true);
-  const [files, setFiles] = useState<File[]>([]);
   const [controller, setController] = useState<AbortController | null>(null);
 
   const audio = new Audio(SuccessSound);
@@ -252,17 +251,6 @@ function AskAI({
     }
   };
 
-  // const handleUploadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
-  //   const filesList = event.target.files;
-  //   if (filesList && filesList.length > 0) {
-  //     // add files to the state to show them in the UI
-  //     const newFiles = Array.from(filesList);
-  //     setFiles((prevFiles) => [...prevFiles, ...newFiles]);
-  //     // clear the input value to allow re-uploading the same file
-  //     event.target.value = "";
-  //   }
-  // };
-
   useUpdateEffect(() => {
     if (refThink.current) {
       refThink.current.scrollTop = refThink.current.scrollHeight;
@@ -277,33 +265,6 @@ function AskAI({
 
   return (
     <div className="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 absolute bottom-3 left-3 w-[calc(100%-20px)] group">
-      {files.length > 0 && (
-        <div className="w-full absolute top-0 left-0 -translate-y-full pb-4 flex items-center justify-start gap-4">
-          {files.map((file, index) => (
-            <div
-              key={index}
-              className="flex items-center justify-between bg-neutral-700/50 rounded-lg w-20 aspect-square relative"
-              style={{
-                backgroundImage: `url(${URL.createObjectURL(file)})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-              }}
-            >
-              <Button
-                size="iconXss"
-                className="absolute -top-2 -right-2 ring-[3px] ring-neutral-900"
-                onClick={() => {
-                  setFiles((prevFiles) =>
-                    prevFiles.filter((f) => f.name !== file.name)
-                  );
-                }}
-              >
-                <X className="size-4" />
-              </Button>
-            </div>
-          ))}
-        </div>
-      )}
       {think && (
         <div className="w-full border-b border-neutral-700 relative overflow-hidden">
           <header
@@ -377,27 +338,7 @@ function AskAI({
       </div>
       <div className="flex items-center justify-between gap-2 px-4 pb-3">
         <div className="flex-1">
-          {/* <Button
-                size="iconXs"
-                variant="outline"
-                className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
-                onClick={() => {
-                  if (uploadInputRef.current) {
-                    uploadInputRef.current.click();
-                  }
-                }}
-              >
-                <ImagePlus className="size-4" />
-              </Button>
-          <input
-            ref={uploadInputRef}
-            type="file"
-            accept="image/*"
-            multiple
-            onChange={handleUploadFile}
-            className="hidden"
-            id="file-upload"
-          /> */}
+          <InviteFriends />
         </div>
         <div className="flex items-center justify-end gap-2">
           <Settings

src/components/invite-friends/invite-friends.tsx

@@ -0,0 +1,78 @@
+import { TiUserAdd } from "react-icons/ti";
+import { Link } from "lucide-react";
+import { FaXTwitter } from "react-icons/fa6";
+
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "../ui/dialog";
+import { useCopyToClipboard } from "react-use";
+import { toast } from "sonner";
+export default function InviteFriends() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <Dialog>
+      <form>
+        <DialogTrigger asChild>
+          <Button
+            size="iconXs"
+            variant="outline"
+            className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
+          >
+            <TiUserAdd className="size-4" />
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
+          <main>
+            <div className="flex items-center justify-start -space-x-4 mb-5">
+              <div className="size-11 rounded-full bg-pink-300 shadow-2xs flex items-center justify-center text-2xl">
+                😎
+              </div>
+              <div className="size-11 rounded-full bg-amber-300 shadow-2xs flex items-center justify-center text-2xl z-2">
+                😇
+              </div>
+              <div className="size-11 rounded-full bg-sky-300 shadow-2xs flex items-center justify-center text-2xl">
+                😜
+              </div>
+            </div>
+            <p className="text-xl font-semibold text-neutral-950 max-w-[200px]">
+              Invite your friends to join us!
+            </p>
+            <p className="text-sm text-neutral-500 mt-2 max-w-sm">
+              Support us and share the love and let them know about our awesome
+              platform.
+            </p>
+            <div className="mt-4 space-x-3.5">
+              <a
+                href="https://x.com/intent/post?url=https://enzostvs-deepsite.hf.space/&text=Checkout%20this%20awesome%20Ai%20Tool!%20Vibe%20coding%20has%20never%20been%20so%20easy✨"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button
+                  variant="ghostWhite"
+                  size="sm"
+                  className="!text-neutral-700"
+                >
+                  <FaXTwitter className="size-4" />
+                  Share on
+                </Button>
+              </a>
+              <Button
+                variant="ghostWhite"
+                size="sm"
+                className="!text-neutral-700"
+                onClick={() => {
+                  copyToClipboard("https://enzostvs-deepsite.hf.space/");
+                  toast.success("Invite link copied to clipboard!");
+                }}
+              >
+                <Link className="size-4" />
+                Copy Invite Link
+              </Button>
+            </div>
+          </main>
+        </DialogContent>
+      </form>
+    </Dialog>
+  );
+}

src/components/ui/button.tsx

@@ -21,6 +21,7 @@ const buttonVariants = cva(
         link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
         pink: "bg-sky-500 text-white hover:brightness-110",
         gray: "bg-neutral-900 text-neutral-300 hover:brightness-110",
+        ghostWhite: "bg-neutral-200/60 text-neutral-900 hover:bg-neutral-200",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",

src/components/ui/dialog.tsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "./../../lib/utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-neutral-200 p-6 shadow-lg duration-200 sm:max-w-lg dark:bg-neutral-950 dark:border-neutral-800",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-white focus:ring-neutral-950 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-neutral-500 text-sm dark:text-neutral-400",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};