Merge branch 'main' into r

.env.example

@@ -8,8 +8,8 @@ CONVEX_DEPLOYMENT=dev:perfect-panther-605
 NEXT_PUBLIC_CONVEX_URL=https://perfect-panther-605.convex.cloud
 NEXT_PUBLIC_GEMINI_API_KEY_DOC=your-gemini-api-key
 NEXT_PUBLIC_GEMINI_API_KEY_FLOWCHART=your-gemini-api-key
-NEXT_PUBLIC_FORMSPREE_ID='your_id'
-NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=
-NEXT_PUBLIC_EMAILJS_API_KEY=
-NEXT_PUBLIC_EMAILJS_SERVICE_ID=
+NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_id
+NEXT_PUBLIC_EMAILJS_API_KEY=your_id
+NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_id
+RESEND_API_KEY=your_api_key
 #use these variables only ;)

package.json

@@ -26,6 +26,7 @@
     "@kinde-oss/kinde-auth-nextjs": "^2.2.6",
     "@langchain/google-genai": "^0.0.16",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -47,6 +48,7 @@
     "cors": "^2.8.5",
     "editorjs-button": "^3.0.3",
     "emailjs": "^4.0.3",
+    "emailjs-com": "^3.2.0",
     "embla-carousel-autoplay": "^8.0.4",
     "embla-carousel-react": "^8.0.4",
     "express": "^4.19.2",
@@ -65,6 +67,7 @@
     "react-spring": "^9.7.3",
     "remark": "^15.0.1",
     "remark-parse": "^11.0.0",
+    "resend": "^3.3.0",
     "sharp": "^0.33.3",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",

src/app/aboutus/Typewriter.tsx

@@ -0,0 +1,55 @@
+// components/Typewriter.tsx
+"use client";
+import React, { useEffect, useState } from 'react';
+
+const Typewriter: React.FC<{ text: string }> = ({ text }) => {
+    const [displayedText, setDisplayedText] = useState(text[0] || '');
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [pause, setPause] = useState(false);
+
+    const typingSpeed = 150; // Speed for typing (milliseconds)
+    const deletingSpeed = 100; // Speed for deleting (milliseconds)
+    const pauseDuration = 500; // Pause duration (milliseconds)
+
+    useEffect(() => {
+        if (pause) {
+            return;
+        }
+
+        const handleTyping = () => {
+            const firstLetter = text[0];
+            const remainingText = text.slice(1);
+            const currentDisplayedText = displayedText.slice(1);
+
+            if (isDeleting) {
+                if (currentDisplayedText.length > 0) {
+                    setDisplayedText(firstLetter + currentDisplayedText.slice(0, -1));
+                } else {
+                    setIsDeleting(false);
+                    setPause(true);
+                    setTimeout(() => setPause(false), pauseDuration);
+                }
+            } else {
+                if (currentDisplayedText.length < remainingText.length) {
+                    setDisplayedText(firstLetter + remainingText.slice(0, currentDisplayedText.length + 1));
+                } else {
+                    setIsDeleting(true);
+                    setPause(true);
+                    setTimeout(() => setPause(false), pauseDuration);
+                }
+            }
+        };
+
+        const interval = setInterval(handleTyping, isDeleting ? deletingSpeed : typingSpeed);
+
+        return () => clearInterval(interval);
+    }, [displayedText, isDeleting, pause, text]);
+
+    return (
+        <h1 className="text-5xl md:text-9xl font-bold mt-1 leading-none bg-gradient-to-b from-neutral-900 via-zinc-900 to-stone-400 dark:from-neutral-50 dark:via-stone-400 dark:to-zinc-950 text-transparent bg-clip-text">
+            {displayedText}
+        </h1>
+    );
+};
+
+export default Typewriter;

src/app/features/page.tsx → src/app/aboutus/features/page.tsx

@@ -96,7 +96,7 @@ interface Feature {
 const FeatureSection = () => {
   return (
     <>
-      <Header />
+      {/* <Header /> */}
       <section className="dark:text-neutral-50 dark:border-gray-800 dark:border-opacity-20 py-16">
         <div className="container mx-auto px-6">
           <h2 className="text-5xl font-bold text-gray-800 dark:text-white text-center mb-12">

src/app/aboutus/page.tsx

@@ -0,0 +1,99 @@
+import Footer from "@/components/shared/Footer";
+import Header from "@/components/shared/Header";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import type { Metadata } from "next";
+import Link from "next/link";
+import FeatureSection from "./features/page";
+import Typewriter from "./Typewriter";
+
+export const metadata: Metadata = {
+  title: "Blox AI | About",
+  description: "About Blox AI.",
+};
+
+const page = () => {
+  return (
+    <>
+      <Header />
+      <section className="md:px-20 pt-32 pb-10 px-8 py-16 justify-center items-center relative">
+        <div className="text-center relative">
+          <Typewriter text="Let's know" />
+          <h1 className="text-4xl font-bold mt-2">
+            <Button asChild className="mt-4 relative font-bold text-xl">
+              <Link href="/dashboard">Blox AI</Link>
+            </Button>
+          </h1>
+          <p className="text-lg mt-3">
+            Effortlessly create diagrams, and collaborate with your team, all
+            with AI-driven analysis.
+            <br className="hidden md:block" />
+            All in one secure and easy-to-use platform.
+          </p>
+        </div>
+        <div className="absolute inset-0 z-0 opacity-30 dark:opacity-50 pointer-events-none">
+          <Image
+            src={"/doodle.png"}
+            alt="Overlay"
+            layout="fill"
+            objectFit="cover"
+            // This will invert the image colors for dark mode
+          />
+        </div>
+        <div
+          className="absolute arrow-container"
+          style={{
+            top: "90%",
+            left: "50%",
+            transform: "translate(-50%, -50%) rotate(45deg)",
+          }}
+        ></div>
+      </section>
+      <section>
+        <div className="mx-auto my-20 max-w-screen-xl px-6 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
+          <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-16">
+            <div className="relative h-64 overflow-hidden rounded-lg sm:h-80 lg:order-first lg:h-full">
+              <Image
+                alt=""
+                src="/about-pic.png"
+                width={550}
+                height={550}
+                className="absolute inset-0 h-full w-full object-cover rounded shadow"
+              />
+            </div>
+
+            <div className="lg:py-24 space-y-2">
+              <h2 className="text-3xl font-bold sm:text-4xl">
+                What is Blox AI?
+              </h2>
+
+              <p className="mt-5 text-muted-foreground">
+                Blox AI is an innovative platform designed to make creating
+                flowcharts, diagrams, and rich documentation effortless.
+                Leveraging intuitive tools and the advanced capabilities of the
+                Google Gemini AI model, Blox AI enhances your ability to
+                visualize complex processes and ideas. It provides seamless
+                collaboration features, secure workspaces, and AI-driven
+                insights, making it the go-to solution for individuals and teams
+                aiming to turn their concepts into clear, visual
+                representations.
+              </p>
+
+              <Button asChild>
+                <Link href="/dashboard">Start Now</Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section className="md:mx-20 my-20 px-8 py-16 text-center">
+        <div className="mt-20 flex items-center justify-center">
+          <FeatureSection />
+        </div>
+      </section>
+      <Footer />
+    </>
+  );
+};
+
+export default page;

src/app/api/mail/route.ts

@@ -0,0 +1,23 @@
+// app/api/send-email.ts
+import { NextRequest, NextResponse } from 'next/server';
+import { Resend } from 'resend';
+
+const resend = new Resend(process.env.RESEND_API_KEY || '');
+
+export async function POST(req: NextRequest) {
+  const { to, text } = await req.json();
+  const subject = 'Welcome to Resend!';
+  try {
+    const response = await resend.emails.send({
+      from: 'Acme <[email protected]>',
+      to,
+      subject,
+      text,
+    });
+
+    return NextResponse.json({ success: true, data: response });
+  } catch (error: any) {
+    console.error('Error sending email:', error);
+    return NextResponse.json({ success: false, error: error.message }, { status: 500 });
+  }
+}

src/app/contributors/ContributorsData.ts

@@ -120,10 +120,25 @@ export const ContributorsData = [
     github: "https://github.com/thevijayshankersharma",
     imageUrl: "https://avatars.githubusercontent.com/u/109781385?v=4"
   },
+  {
+    name: "Mukilan .T",
+    github: "https://github.com/mukilan2815",
+    imageUrl: "https://avatars.githubusercontent.com/u/66477893?v=4",
+  },
   {
     name: "Vaibhav Gangurde",
     github: "https://github.com/Vaibhavsg17",
-    imageUrl: "https://avatars.githubusercontent.com/u/66477893?v=4",
+    imageUrl: "https://avatars.githubusercontent.com/u/71129858?v=4",
+  },
+  {
+    name: "Ayushmaan Agarwal",
+    github: "https://github.com/Ayushmaanagarwal1211",
+    imageUrl: "https://avatars.githubusercontent.com/u/118350936?v=4",
+  },
+  {
+    name: "Ramakrushna Biswal",
+    github: "https://github.com/RamakrushnaBiswal",
+    imageUrl: "https://avatars.githubusercontent.com/u/125277258?v=4",
   },
   {
     name: "Akhila Sunesh",

src/app/dashboard/_components/FileList.tsx

@@ -13,7 +13,7 @@ import {
 import moment from "moment";
 import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
-import { useMutation } from "convex/react";
+import { useConvex, useMutation } from "convex/react";
 import { api } from "../../../../convex/_generated/api";
 import { Id } from "../../../../convex/_generated/dataModel";
 import { Button } from "@/components/ui/button";
@@ -30,10 +30,11 @@ import {
 } from "@/components/ui/alert-dialog";
 import { toast } from "sonner";
 import RenameFileModal from "@/components/shared/RenameFileModal";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 export interface FILE {
   archive: boolean;
-  createdBt: string;
+  createdBy: string;
   document: string;
   fileName: string;
   teamId: string;
@@ -117,6 +118,7 @@ const FileRow = ({
   router,
   index,
   isSubmitted,
+  authorData,
 }: {
   file: FILE;
   picture: string;
@@ -127,6 +129,7 @@ const FileRow = ({
   router: ReturnType<typeof useRouter>;
   index: number;
   isSubmitted: boolean;
+  authorData: any[];
 }) => (
   <tr key={file._id} className="odd:bg-muted/50 cursor-pointer">
     <td
@@ -151,13 +154,18 @@ const FileRow = ({
       className="whitespace-nowrap px-4 py-2 text-muted-foreground"
       onClick={() => router.push("/workspace/" + file._id)}
     >
-      <Image
-        src={picture}
-        alt="user"
-        width={30}
-        height={30}
-        className="rounded-full"
-      />
+      {authorData.map((author,index) =>
+        author.email === file.createdBy ? (
+          <Avatar key={index} className="w-[40px] h-[40px]">
+            <AvatarImage src={""} />
+            <AvatarFallback className=" text-xs">
+              {author.name.charAt(0)}
+            </AvatarFallback>
+          </Avatar>
+        ) : (
+          ""
+        )
+      )}
     </td>
     <td className="flex gap-2 whitespace-nowrap px-4 py-2 text-muted-foreground">
       <RenameFileModal id={file._id} />
@@ -203,15 +211,36 @@ function FileList({
   picture: string;
 }) {
   const router = useRouter();
+  const convex = useConvex();
   const [sortConfig, setSortConfig] = useState<{
     key: keyof FILE;
     direction: string;
   } | null>(null);
   const [isSmallScreen, setIsSmallScreen] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
+  const [authorData, setAuthorData] = useState<any[]>([]);
   const safeFileList = Array.isArray(fileList) ? fileList : [];
   const pathname = usePathname();
 
+  useEffect(() => {
+    const getData = async () => {
+      let listOfCreators: string[] = [];
+
+      fileList?.forEach(async (file) => {
+        if (!listOfCreators.includes(file.createdBy)) {
+          listOfCreators.push(file.createdBy);
+          const result = await convex.query(api.user.getUser, {
+            email: file.createdBy,
+          });
+          setAuthorData([...authorData, result[0]]);
+        }
+      });
+    };
+    if (fileList) {
+      getData();
+    }
+  }, [fileList]);
+
   const sortedFiles = [...safeFileList];
   if (sortConfig !== null) {
     sortedFiles.sort((a, b) => {
@@ -326,6 +355,7 @@ function FileList({
                     onDelete={deleteFunc}
                     router={router}
                     index={index}
+                    authorData={authorData}
                   />
                 )
               )}