From c4adb084736fc0f61da7b3fc12f6c800a34f82bc Mon Sep 17 00:00:00 2001
From: ErkiKadhafi <erki.qaedhafi@gmail.com>
Date: Thu, 16 Jan 2025 08:51:30 +0700
Subject: [PATCH] fix all theming

---
 next.config.mjs                               |   4 +
 package-lock.json                             |  34 +-
 package.json                                  |   3 +-
 .../(main)/explore/_components/agent-card.tsx | 216 ++++--
 .../(main)/explore/_components/agent-list.tsx |   6 +-
 src/app/(main)/page.tsx                       |   1 +
 src/app/globals.css                           |  11 +-
 src/app/layout.tsx                            |   4 +-
 src/components/chat-floating-button.tsx       |  64 ++
 src/components/section.tsx                    |  30 +-
 src/components/sections/cta.tsx               |  19 +-
 src/components/sections/footer.tsx            |  15 +-
 src/components/sections/header.tsx            |   4 +-
 src/components/sections/hero.tsx              |  69 +-
 src/components/sections/problem.tsx           | 112 ++-
 src/components/ui/badge.tsx                   |   2 +-
 src/components/ui/button.tsx                  |   2 +-
 src/components/ui/chat-card.tsx               | 244 ++++++
 src/components/ui/number-ticker.tsx           |  58 ++
 src/lib/config.tsx                            |  20 +-
 src/lib/utils.ts                              |  34 +-
 src/providers/react-query-provider.tsx        |   2 +-
 src/utils/supabase/database.types.ts          | 715 +++++++++---------
 23 files changed, 1107 insertions(+), 562 deletions(-)
 create mode 100644 src/components/chat-floating-button.tsx
 create mode 100644 src/components/ui/chat-card.tsx
 create mode 100644 src/components/ui/number-ticker.tsx

diff --git a/next.config.mjs b/next.config.mjs
index c5a09b6..e5217dd 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -8,6 +8,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "supabasekong-mco40gw4sc0gs4ks40w4c4g4.dev3vds1.link",
       },
+      {
+        protocol: "https",
+        hostname: "minio-s3.dev3vds1.link",
+      },
     ],
   },
 };
diff --git a/package-lock.json b/package-lock.json
index ea665c2..05b0836 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,11 +20,12 @@
         "@tanstack/react-query": "^5.64.1",
         "@tanstack/react-query-devtools": "^5.64.1",
         "axios": "^1.7.9",
-        "class-variance-authority": "^0.7.0",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.1.7",
         "framer-motion": "^11.3.21",
         "lucide-react": "^0.417.0",
+        "motion": "^11.18.0",
         "next": "14.2.7",
         "next-themes": "^0.3.0",
         "nuqs": "^2.3.1",
@@ -3512,9 +3513,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.17.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.17.0.tgz",
-      "integrity": "sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==",
+      "version": "11.18.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.0.tgz",
+      "integrity": "sha512-Vmjl5Al7XqKHzDFnVqzi1H9hzn5w4eN/bdqXTymVpU2UuMQuz9w6UPdsL9dFBeH7loBlnu4qcEXME+nvbkcIOw==",
       "dependencies": {
         "motion-dom": "^11.16.4",
         "motion-utils": "^11.16.0",
@@ -5547,6 +5548,31 @@
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
+    "node_modules/motion": {
+      "version": "11.18.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.18.0.tgz",
+      "integrity": "sha512-uJ4zNXh/4K9C5wftxHKlXLHC0Rc9dHSHPyO1P6T9XE2bTn2z8C2lOZX/M8vAmFp0gtJTJ3aYkv44lTtJSfv6+A==",
+      "dependencies": {
+        "framer-motion": "^11.18.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/motion-dom": {
       "version": "11.16.4",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz",
diff --git a/package.json b/package.json
index c80160c..6a14d6d 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,12 @@
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-query-devtools": "^5.64.1",
     "axios": "^1.7.9",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.1.7",
     "framer-motion": "^11.3.21",
     "lucide-react": "^0.417.0",
+    "motion": "^11.18.0",
     "next": "14.2.7",
     "next-themes": "^0.3.0",
     "nuqs": "^2.3.1",
diff --git a/src/app/(main)/explore/_components/agent-card.tsx b/src/app/(main)/explore/_components/agent-card.tsx
index ecb0733..83d382e 100644
--- a/src/app/(main)/explore/_components/agent-card.tsx
+++ b/src/app/(main)/explore/_components/agent-card.tsx
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-import { Pencil } from "lucide-react";
+import { Play } from "lucide-react";
 
 import { formatDate } from "@/lib/utils";
 
@@ -41,12 +41,21 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import axios, { AxiosError } from "axios";
 import { toast } from "sonner";
+import { createClient } from "@/utils/supabase/client";
 
 type AgentCardProps = { data: Tables<"agents"> };
 
 export default function AgentCard(props: AgentCardProps) {
-  const { id, image_url, name, description, model_type, created_at } =
-    props.data;
+  const {
+    id,
+    image_url,
+    name,
+    description,
+    model_type,
+    created_at,
+    conversation,
+    last_conv,
+  } = props.data;
 
   const [openDialogUpdate, setOpenDialogUpdate] = React.useState(false);
 
@@ -72,6 +81,22 @@ export default function AgentCard(props: AgentCardProps) {
 
   const mutation = useMutation({
     mutationFn: async (values: z.infer<typeof formSchema>) => {
+      const supabase = createClient();
+
+      const { data: existingAgent } = await supabase
+        .from("agents")
+        .select("*")
+        .eq("id", id);
+
+      const { data, error } = await supabase
+        .from("agents")
+        .update({
+          conversation: existingAgent ? existingAgent[0].conversation + 1 : 0,
+          last_conv: new Date().toISOString(),
+        })
+        .eq("id", id)
+        .select();
+
       const url = encodeURI(
         `https://ai-endpoint-one.dev3vds1.link/deepinfra-ai/${name}/${model_type}/${description}/${values.question}`
       );
@@ -133,7 +158,7 @@ export default function AgentCard(props: AgentCardProps) {
   } = form;
 
   return (
-    <li className="bg-background flex flex-col rounded-lg p-4 border hover:shadow-sm transition-shadow duration-200">
+    <li className="flex flex-col rounded-lg p-4 border border-accent-foreground hover:shadow-sm transition-shadow duration-200">
       <figure className="overflow-hidden relative rounded-lg object-cover border mb-3 w-full h-[200px]">
         <Image
           className="w-full object-cover"
@@ -142,114 +167,139 @@ export default function AgentCard(props: AgentCardProps) {
           alt={name}
         />
         <div className="h-full w-full absolute top-0 left-0" />
-        <Badge className="absolute bottom-3 left-3">{model_type}</Badge>
       </figure>
-      <p className="mb-2">
-        <time dateTime={created_at} className="text-sm text-muted-foreground">
-          {formatDate(created_at)}
-        </time>
-      </p>
+      <div className="flex items-center justify-between">
+        <Badge className="mb-2" variant={"secondary"}>
+          {conversation} chats
+        </Badge>
+        <p className="mb-2 text-primary">
+          <time dateTime={created_at} className="text-xs">
+            Last Active:{" "}
+            <span className="font-bold">
+              {last_conv ? formatDate(last_conv) : "-"}
+            </span>
+          </time>
+        </p>
+      </div>
       <h3 className="text-xl font-semibold mb-2 truncate">{name}</h3>
-      <p className="text-sm text-foreground line-clamp-2 mb-4">{description}</p>
+      <p className="text-sm text-foreground line-clamp-3 mb-4">{description}</p>
       <div className="mt-auto grid">
         <Dialog
           open={openDialogUpdate}
           onOpenChange={(val) => {
-            // form.reset();
+            form.reset();
+            mutation.reset();
             setOpenDialogUpdate(val);
           }}
         >
           <DialogTrigger asChild>
             <Button size={"sm"} variant={"outline"}>
-              <Pencil className="h-4 w-4 mr-2" />
+              <Play className="h-4 w-4 mr-2" />
               <span>Try it</span>
             </Button>
           </DialogTrigger>
-          <DialogContent className="w-[90%] h-[90vh] max-w-xl rounded-md overflow-y-scroll">
+          <DialogContent className="w-[90%] max-h-[90vh] max-w-xl rounded-md overflow-y-scroll">
             <DialogHeader>
               <DialogTitle>Try Agent</DialogTitle>
               <DialogDescription>
                 Try to ask a question to our agent
               </DialogDescription>
             </DialogHeader>
-            <figure className="overflow-hidden relative rounded-lg object-cover border mb-3 w-full h-[200px]">
-              <Image
-                className="w-full object-cover"
-                src={image_url ? image_url : "/placeholder.png"}
-                fill={true}
-                alt={name}
-              />
-              <div className="h-full w-full absolute top-0 left-0" />
-              <Badge className="absolute bottom-3 left-3">{model_type}</Badge>
-            </figure>
-            <ul className="text-sm space-y-3">
-              <li>
-                <h3 className="font-bold">Name:</h3>
-                <p className="text-gray-500">{name}</p>
-              </li>
-              <li>
-                <h3 className="font-bold">Description:</h3>
-                <p className="text-gray-500">{description}</p>
-              </li>
-            </ul>
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-3"
-              >
-                <FormField
-                  control={form.control}
-                  name="question"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className="font-bold">Question:</FormLabel>
-                      <FormControl>
-                        <Textarea
-                          rows={4}
-                          placeholder="For answering daily questions."
-                          className={clsx(
-                            errors.question && "focus-visible:ring-destructive"
-                          )}
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+            <div>
+              <figure className="overflow-hidden relative rounded-lg object-cover border mb-3 w-full h-[200px]">
+                <Image
+                  className="w-full object-cover"
+                  src={image_url ? image_url : "/placeholder.png"}
+                  fill={true}
+                  alt={name}
                 />
-
-                {mutation.isSuccess && (
-                  <>
-                    <h3 className="text-sm font-bold">Answer:</h3>
-                    <blockquote className="border-l-2 pl-6 italic">
-                      {mutation.data.response}
-                    </blockquote>
-                  </>
-                )}
-
-                <DialogFooter className="mt-4 flex justify-end space-x-2">
-                  <DialogClose asChild>
+                <div className="h-full w-full absolute top-0 left-0" />
+              </figure>
+              <div className="flex items-center justify-between mb-3">
+                <Badge className="mb-2" variant={"secondary"}>
+                  {conversation} chats
+                </Badge>
+                <p className="mb-2 text-primary">
+                  <time dateTime={created_at} className="text-xs">
+                    Last Active:{" "}
+                    <span className="font-bold">
+                      {last_conv ? formatDate(last_conv) : "-"}
+                    </span>
+                  </time>
+                </p>
+              </div>
+              <ul className="text-sm space-y-3 mb-3">
+                <li>
+                  <h3 className="font-bold">Name:</h3>
+                  <p className="text-gray-500">{name}</p>
+                </li>
+                <li>
+                  <h3 className="font-bold">Description:</h3>
+                  <p className="text-gray-500">{description}</p>
+                </li>
+              </ul>
+              <Form {...form}>
+                <form
+                  onSubmit={form.handleSubmit(onSubmit)}
+                  className="space-y-3"
+                >
+                  <FormField
+                    control={form.control}
+                    name="question"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="font-bold">Question:</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            rows={4}
+                            placeholder="For answering daily questions."
+                            className={clsx(
+                              errors.question &&
+                                "focus-visible:ring-destructive"
+                            )}
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  {mutation.isSuccess && (
+                    <>
+                      <h3 className="text-sm font-bold">Answer:</h3>
+                      <blockquote className="border-l-2 pl-6 italic">
+                        {mutation.data.response}
+                      </blockquote>
+                    </>
+                  )}
+                  <DialogFooter className="mt-4 flex justify-end space-x-2">
+                    <DialogClose asChild>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        disabled={mutation.isPending}
+                        size="sm"
+                      >
+                        {mutation.isPending && (
+                          <Spinner className="mr-2 h-4 w-4 " />
+                        )}
+                        Cancel
+                      </Button>
+                    </DialogClose>
                     <Button
-                      type="button"
-                      variant="outline"
+                      type="submit"
                       disabled={mutation.isPending}
                       size="sm"
                     >
                       {mutation.isPending && (
                         <Spinner className="mr-2 h-4 w-4 " />
                       )}
-                      Cancel
+                      Submit
                     </Button>
-                  </DialogClose>
-                  <Button type="submit" disabled={mutation.isPending} size="sm">
-                    {mutation.isPending && (
-                      <Spinner className="mr-2 h-4 w-4 " />
-                    )}
-                    Submit
-                  </Button>
-                </DialogFooter>
-              </form>
-            </Form>
+                  </DialogFooter>
+                </form>
+              </Form>
+            </div>
           </DialogContent>
         </Dialog>
       </div>
diff --git a/src/app/(main)/explore/_components/agent-list.tsx b/src/app/(main)/explore/_components/agent-list.tsx
index 68ca35a..a79f928 100644
--- a/src/app/(main)/explore/_components/agent-list.tsx
+++ b/src/app/(main)/explore/_components/agent-list.tsx
@@ -19,6 +19,7 @@ import { Button } from "@/components/ui/button";
 
 import AgentCardSkeleton from "./agent-card-skeleton";
 import AgentCard from "./agent-card";
+import { ChatFloatingButton } from "@/components/chat-floating-button";
 
 const DATA_DISPLAY = 6;
 
@@ -66,7 +67,8 @@ export function AgentList() {
 
   return (
     <>
-      <section className="pt-8 pb-10 min-h-[50vh] bg-white/50 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur-lg">
+      <ChatFloatingButton />
+      <section className="group pt-8 pb-10 min-h-[50vh] ">
         <div className="layout">
           <h1 className="mb-4 text-3xl font-bold text-foreground sm:text-4xl">
             Agents
@@ -90,7 +92,7 @@ export function AgentList() {
               <Search className="absolute w-4 h-4 left-2 top-1/2 -translate-y-1/2 text-gray-300" />
             </div>
           </div>
-          <ul className="grid grid-cols-1 gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3">
+          <ul className="grid gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3">
             {isLoading &&
               [...Array(6)].map((_, idx) => (
                 <li key={idx}>
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index c1f2c53..244d3e4 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -1,3 +1,4 @@
+import { ChatFloatingButton } from "@/components/chat-floating-button";
 import Blog from "@/components/sections/blog";
 import CTA from "@/components/sections/cta";
 import FAQ from "@/components/sections/faq";
diff --git a/src/app/globals.css b/src/app/globals.css
index c23e774..d6f01ba 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -21,7 +21,7 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --input: 22 68% 91%;
     --ring: 9 60% 32%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
@@ -49,7 +49,7 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
     --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
+    --input: 9 60% 32%;
     --ring: 240 4.9% 83.9%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
@@ -100,3 +100,10 @@
   margin-right: auto;
   width: 90%;
 }
+
+.layout-2 {
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 90%;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index daceeae..2880b6c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -47,8 +47,8 @@ export default function RootLayout({
               enableSystem={false}
             >
               {children}
-              <ThemeToggle />
-              <TailwindIndicator />
+              {/* <ThemeToggle /> */}
+              {/* <TailwindIndicator /> */}
               <Toaster richColors />
             </ThemeProvider>
           </NuqsAdapter>
diff --git a/src/components/chat-floating-button.tsx b/src/components/chat-floating-button.tsx
new file mode 100644
index 0000000..86b934b
--- /dev/null
+++ b/src/components/chat-floating-button.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+
+import * as motion from "motion/react-client";
+import { AnimatePresence } from "motion/react";
+
+import { MessageSquare, X } from "lucide-react";
+
+import { ChatCard, Message } from "@/components/ui/chat-card";
+import { Button } from "@/components/ui/button";
+
+const CURRENT_USER = {
+  name: "You",
+  avatar: "/placeholder.png",
+};
+
+const INITIAL_MESSAGES: Message[] = [
+  {
+    content: "Hi! Got any questions? I'm here to help you.",
+    sender: {
+      name: "beactio.ai",
+      avatar: "/logo.png",
+      isOnline: true,
+    },
+    timestamp: "10:26 AM",
+  },
+];
+
+export function ChatFloatingButton() {
+  const [openAssistant, setOpenAssistant] = React.useState(false);
+
+  return (
+    <>
+      <Button
+        variant={"default"}
+        size={"icon"}
+        className="z-30 fixed right-4 bottom-4 rounded-full h-14 w-14"
+        onClick={() => setOpenAssistant((old) => !old)}
+      >
+        {openAssistant ? <X /> : <MessageSquare />}
+      </Button>
+      <AnimatePresence>
+        {openAssistant && (
+          <motion.div
+            key={"chatbox"}
+            className="z-20 fixed right-4 bottom-20 "
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 50 }}
+            transition={{
+              duration: 0.2,
+            }}
+          >
+            <ChatCard
+              chatName={"beactio.ai"}
+              initialMessages={INITIAL_MESSAGES}
+              currentUser={CURRENT_USER}
+              className={"border border-zinc-200"}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
diff --git a/src/components/section.tsx b/src/components/section.tsx
index e6b37a3..205326f 100644
--- a/src/components/section.tsx
+++ b/src/components/section.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { motion } from "framer-motion";
 interface SectionProps {
   id?: string;
   title?: string;
@@ -7,6 +10,8 @@ interface SectionProps {
   className?: string;
 }
 
+const ease = [0.16, 1, 0.3, 1];
+
 export default function Section({
   id,
   title,
@@ -22,14 +27,31 @@ export default function Section({
         <div className="relative container mx-auto px-4 py-16 max-w-7xl">
           <div className="text-center space-y-4 pb-6 mx-auto">
             {title && (
-              <h2 className="text-sm text-primary font-mono font-medium tracking-wider uppercase">
+              <motion.h2
+                initial={{ filter: "blur(10px)", opacity: 0, y: 50 }}
+                animate={{ filter: "blur(0px)", opacity: 1, y: 0 }}
+                transition={{
+                  duration: 1,
+                  ease,
+                }}
+                className="text-sm text-primary font-mono font-medium tracking-wider uppercase"
+              >
                 {title}
-              </h2>
+              </motion.h2>
             )}
             {subtitle && (
-              <h3 className="mx-auto mt-4 max-w-xs text-3xl font-semibold sm:max-w-none sm:text-4xl md:text-5xl">
+              <motion.h3
+                initial={{ filter: "blur(10px)", opacity: 0, y: 50 }}
+                animate={{ filter: "blur(0px)", opacity: 1, y: 0 }}
+                transition={{
+                  delay: 0.2,
+                  duration: 1,
+                  ease,
+                }}
+                className="mx-auto mt-4 max-w-xs text-3xl font-semibold sm:max-w-none sm:text-4xl md:text-5xl"
+              >
                 {subtitle}
-              </h3>
+              </motion.h3>
             )}
             {description && (
               <p className="mt-6 text-lg leading-8 text-slate-600 max-w-2xl mx-auto">
diff --git a/src/components/sections/cta.tsx b/src/components/sections/cta.tsx
index ad85460..e81578c 100644
--- a/src/components/sections/cta.tsx
+++ b/src/components/sections/cta.tsx
@@ -1,16 +1,19 @@
-import { Icons } from "@/components/icons";
-import Section from "@/components/section";
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
 import Link from "next/link";
 
+import { Rocket } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+import { buttonVariants } from "@/components/ui/button";
+import Section from "@/components/section";
+
 export default function CtaSection() {
   return (
     <Section
       id="cta"
-      title="Ready to get started?"
-      subtitle="Start your journey today."
-      className="bg-primary/10 rounded-xl py-16"
+      title="Ready to experience the future of autonomous AI?"
+      subtitle="Join us and try our agentic AI into your operations."
+      className="bg-primary/10 dark:bg-primary/70 rounded-xl py-16"
     >
       <div className="flex flex-col w-full sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4 pt-4">
         <Link
@@ -20,7 +23,7 @@ export default function CtaSection() {
             "w-full sm:w-auto text-background flex gap-2"
           )}
         >
-          <Icons.logo className="h-6 w-6" />
+          <Rocket className="h-6 w-6" />
           Get started
         </Link>
       </div>
diff --git a/src/components/sections/footer.tsx b/src/components/sections/footer.tsx
index ac8fa85..9da4213 100644
--- a/src/components/sections/footer.tsx
+++ b/src/components/sections/footer.tsx
@@ -1,13 +1,14 @@
-import { Icons } from "@/components/icons";
-import { siteConfig } from "@/lib/config";
-import { ChevronRight } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";
+import Image from "next/image";
+
+import { ChevronRight } from "lucide-react";
+
+import { siteConfig } from "@/lib/config";
 
 export default function Footer() {
   return (
     <footer>
-      <div className="max-w-6xl mx-auto py-16 sm:px-10 px-5 pb-0">
+      <div className="layout py-16 sm:px-10 px-5 pb-0">
         <a
           href="/"
           title={siteConfig.name}
@@ -15,8 +16,8 @@ export default function Footer() {
         >
           <Image
             src="/logo.png"
-            height={40}
-            width={40}
+            height={44}
+            width={44}
             alt="logo"
             className="rounded-md shadow"
           />
diff --git a/src/components/sections/header.tsx b/src/components/sections/header.tsx
index 5b10663..b231fd6 100644
--- a/src/components/sections/header.tsx
+++ b/src/components/sections/header.tsx
@@ -41,8 +41,8 @@ export default function Header() {
         >
           <Image
             src="/logo.png"
-            height={36}
-            width={36}
+            height={44}
+            width={44}
             alt="logo"
             className="rounded-md shadow"
           />
diff --git a/src/components/sections/hero.tsx b/src/components/sections/hero.tsx
index e18dff2..34731c8 100644
--- a/src/components/sections/hero.tsx
+++ b/src/components/sections/hero.tsx
@@ -1,45 +1,50 @@
 "use client";
 
+import Link from "next/link";
+
 import { motion } from "framer-motion";
 
-import { Icons } from "@/components/icons";
-import HeroVideoDialog from "@/components/magicui/hero-video";
-import { buttonVariants } from "@/components/ui/button";
+import { BadgePlus, Compass } from "lucide-react";
+
 import { cn } from "@/lib/utils";
-import Link from "next/link";
-import { Plus } from "lucide-react";
+
+import { buttonVariants } from "@/components/ui/button";
+import HeroVideoDialog from "@/components/magicui/hero-video";
 
 const ease = [0.16, 1, 0.3, 1];
 
 function HeroPill() {
   return (
-    <motion.a
-      href="/blog/introducing-acme-ai"
-      className="flex w-auto items-center space-x-2 rounded-full bg-primary/20 px-2 py-1 ring-1 ring-accent whitespace-pre"
+    <motion.div
       initial={{ opacity: 0, y: -20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.8, ease }}
     >
-      <div className="w-fit rounded-full bg-accent px-2 py-0.5 text-center text-xs font-medium text-primary sm:text-sm">
-        📣 Announcement
-      </div>
-      <p className="text-xs font-medium text-primary sm:text-sm">
-        Introducing beactio.ai
-      </p>
-      <svg
-        width="12"
-        height="12"
-        className="ml-1"
-        viewBox="0 0 12 12"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+      <Link
+        href={process.env.NEXT_PUBLIC_DASHBOARD_URL!}
+        className="flex w-auto items-center space-x-2 rounded-full bg-primary/20 px-2 py-1 ring-1 ring-accent whitespace-pre"
       >
-        <path
-          d="M8.78141 5.33312L5.20541 1.75712L6.14808 0.814453L11.3334 5.99979L6.14808 11.1851L5.20541 10.2425L8.78141 6.66645H0.666748V5.33312H8.78141Z"
-          fill="hsl(var(--primary))"
-        />
-      </svg>
-    </motion.a>
+        <div className="w-fit rounded-full bg-accent px-2 py-0.5 text-center text-xs font-medium text-primary sm:text-sm">
+          📣 Announcement
+        </div>
+        <p className="text-xs font-medium text-primary sm:text-sm">
+          Introducing beactio.ai
+        </p>
+        <svg
+          width="12"
+          height="12"
+          className="ml-1"
+          viewBox="0 0 12 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.78141 5.33312L5.20541 1.75712L6.14808 0.814453L11.3334 5.99979L6.14808 11.1851L5.20541 10.2425L8.78141 6.66645H0.666748V5.33312H8.78141Z"
+            fill="hsl(var(--primary))"
+          />
+        </svg>
+      </Link>
+    </motion.div>
   );
 }
 
@@ -56,7 +61,7 @@ function HeroTitles() {
           staggerChildren: 0.2,
         }}
       >
-        {["Deploy", "AI", "Agents", "with", "Ease"].map((text, index) => (
+        {["AI", "Meets", "Simplicity"].map((text, index) => (
           <motion.span
             key={index}
             className="inline-block px-1 md:px-2 text-balance font-semibold"
@@ -82,8 +87,8 @@ function HeroTitles() {
           ease,
         }}
       >
-        Create, manage, and scale your AI personalities effortlessly. Bring your
-        AI model with only single click.
+        Transform the future of artificial intelligence with truly autonomous
+        systems that think, plan, and act independently.
       </motion.p>
     </div>
   );
@@ -105,7 +110,7 @@ function HeroCTA() {
             "w-full sm:w-auto text-background flex gap-2"
           )}
         >
-          <Plus className="h-6 w-6" />
+          <BadgePlus className="h-6 w-6" />
           Create new Agent
         </Link>
         <Link
@@ -115,7 +120,7 @@ function HeroCTA() {
             "w-full sm:w-auto flex gap-2"
           )}
         >
-          <Icons.logo className="h-6 w-6" />
+          <Compass className="h-6 w-6" />
           Explore Agents
         </Link>
       </motion.div>
diff --git a/src/components/sections/problem.tsx b/src/components/sections/problem.tsx
index ce13ee9..5ef93b4 100644
--- a/src/components/sections/problem.tsx
+++ b/src/components/sections/problem.tsx
@@ -1,49 +1,99 @@
+import { BrainCog, Puzzle, Speech } from "lucide-react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import NumberTicker from "@/components/ui/number-ticker";
 import BlurFade from "@/components/magicui/blur-fade";
 import Section from "@/components/section";
-import { Card, CardContent } from "@/components/ui/card";
-import { Brain, Shield, Zap } from "lucide-react";
 
 const problems = [
   {
-    title: "Best Agent",
-    description: "Choose the ideal agent bot tailored to your specific needs.",
-    icon: Brain,
+    title: "Dynamic Goal Formation",
+    description:
+      "Unlike traditional AI systems that rely on predefined objectives, our agents can formulate and prioritize their own goals based on their understanding of the broader context and desired outcomes.",
+    icon: BrainCog,
   },
   {
-    title: "Fast Response",
+    title: "Contextual Understanding",
     description:
-      "Experience our quick-thinking chatbot, ready to answer all your questions.",
-    icon: Zap,
+      "Our agents don't operate in a vacuum. They grasp the nuances of their environment, understanding not just what's happening, but why it matters and how it affects their objectives.",
+    icon: Puzzle,
   },
   {
-    title: "Engage More",
+    title: "Human Values at Core",
     description:
-      "Transform your experience with a chatbot built for intelligent engagement.",
-    icon: Shield,
+      "We've built robust ethical considerations directly into our agents' decision-making processes, ensuring they operate not just effectively, but responsibly and in alignment with human values.",
+    icon: Speech,
+  },
+];
+
+const stats = [
+  {
+    title: "Decision Accuracy",
+    number: 99,
+    unit: "%",
+    description:
+      "Success rate in autonomous decision-making across all deployments",
+  },
+  {
+    title: "Processing Speed",
+    number: 65,
+    unit: "x",
+    description: "Faster than human operators in complex decision scenarios",
+  },
+  {
+    title: "Daily Decisions",
+    number: 100,
+    unit: "+",
+    description: "Autonomous conversations made by our systems every day",
   },
 ];
 
 export default function Component() {
   return (
-    <Section
-      title="Why Us?"
-      subtitle="Explore and try to create our various interactive agents."
-    >
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
-        {problems.map((problem, index) => (
-          <BlurFade key={index} delay={0.2 + index * 0.2} inView>
-            <Card className="bg-background border-none shadow-none">
-              <CardContent className="p-6 space-y-4">
-                <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
-                  <problem.icon className="w-6 h-6 text-primary" />
-                </div>
-                <h3 className="text-xl font-semibold">{problem.title}</h3>
-                <p className="text-muted-foreground">{problem.description}</p>
-              </CardContent>
-            </Card>
-          </BlurFade>
-        ))}
-      </div>
-    </Section>
+    <>
+      <Section title="Be Different" subtitle="Technology That Sets Us Apart">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
+          {problems.map((problem, index) => (
+            <BlurFade key={index} delay={0.2 + index * 0.2} inView>
+              <Card className="bg-background border-none shadow-none">
+                <CardContent className="p-6 space-y-4">
+                  <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
+                    <problem.icon className="w-6 h-6 text-primary" />
+                  </div>
+                  <h3 className="text-xl font-semibold">{problem.title}</h3>
+                  <p className="text-muted-foreground">{problem.description}</p>
+                </CardContent>
+              </Card>
+            </BlurFade>
+          ))}
+        </div>
+      </Section>
+      <Section title="Success stories" subtitle="Celebrate Our Success Stories">
+        <BlurFade>
+          <div className="border-primary/10 bg-accent-foreground py-8 rounded-lg shadow grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
+            {stats.map((stat, index) => (
+              <Card
+                key={index}
+                className="bg-transparent border-none shadow-none"
+              >
+                <CardContent className="p-6 space-y-4 flex flex-col items-center text-center">
+                  <div className="flex items-center text-4xl font-bold text-primary">
+                    <div className="w-32 h-32 bg-primary/10 rounded-full flex items-center justify-center">
+                      <NumberTicker
+                        value={stat.number}
+                        className="text-primary"
+                      />
+                      <span>{stat.unit}</span>
+                    </div>
+                  </div>
+                  <h3 className="text-xl font-bold">{stat.title}</h3>
+                  <p className="text-muted-foreground">{stat.description}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </BlurFade>
+      </Section>
+    </>
   );
 }
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index f000e3e..7dbc311 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -11,7 +11,7 @@ const badgeVariants = cva(
         default:
           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-accent-foreground text-primary",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 9dd106f..b6f52d9 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-primary",
+          "border border-accent-foreground bg-background text-primary hover:bg-accent hover:text-primary",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
diff --git a/src/components/ui/chat-card.tsx b/src/components/ui/chat-card.tsx
new file mode 100644
index 0000000..9dfccf5
--- /dev/null
+++ b/src/components/ui/chat-card.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+import React from "react";
+
+import Image from "next/image";
+
+import { useMutation } from "@tanstack/react-query";
+
+import axios, { AxiosError } from "axios";
+
+import { toast } from "sonner";
+
+import clsx from "clsx";
+
+import { Send } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import Spinner from "../spinner";
+
+export interface Message {
+  content: string;
+  sender: {
+    name: string;
+    avatar: string;
+    isOnline: boolean;
+    isCurrentUser?: boolean;
+  };
+  timestamp: string;
+}
+
+interface ChatCardProps {
+  chatName?: string;
+  initialMessages?: Message[];
+  currentUser?: {
+    name: string;
+    avatar: string;
+  };
+  className?: string;
+}
+
+export function ChatCard({
+  chatName,
+  initialMessages = [],
+  currentUser = {
+    name: "You",
+    avatar:
+      "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/avatar-03-n0x8HFv8EUetf9z6ht0wScJKoTHqf8.png",
+  },
+  className,
+}: ChatCardProps) {
+  const [messages, setMessages] = React.useState<Message[]>(initialMessages);
+  const [inputValue, setInputValue] = React.useState("");
+
+  const mutation = useMutation({
+    mutationFn: async (userInput: string) => {
+      const url = encodeURI(
+        `https://ai-endpoint-one.dev3vds1.link/chatbot/beactio/${userInput}`
+      );
+      const json = await axios.get(url);
+
+      return json.data;
+    },
+    onSuccess: (data: { response: string; system_prompt: string }) => {
+      const newMessage: Message = {
+        content: data.response,
+        sender: {
+          name: "beactio.ai",
+          avatar: "/logo.png",
+          isOnline: true,
+        },
+        timestamp: new Date().toLocaleTimeString([], {
+          hour: "numeric",
+          minute: "2-digit",
+          hour12: true,
+        }),
+      };
+      setMessages((old) => [...old, newMessage]);
+    },
+    onError: (error) => {
+      if (error instanceof AxiosError) {
+        if (error.response) {
+          const errResponse = error.response.data;
+          toast.error("There is something wrong");
+          console.log({ errResponse });
+        } else if (error.request) {
+          toast.error("No response from the server", {
+            description: "Failed to fetch the data, server returns null.",
+          });
+        } else {
+          toast.error("Failed to set up the request", {
+            description: "There is something wrong when setting up the request",
+          });
+        }
+      }
+    },
+  });
+
+  const handleSendMessage = () => {
+    if (!inputValue.trim()) return;
+
+    const newMessage: Message = {
+      content: inputValue,
+      sender: {
+        name: currentUser.name,
+        avatar: currentUser.avatar,
+        isOnline: true,
+        isCurrentUser: true,
+      },
+      timestamp: new Date().toLocaleTimeString([], {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+      }),
+    };
+
+    setMessages((prev) => [...prev, newMessage]);
+    setInputValue("");
+
+    mutation.mutate(inputValue);
+  };
+
+  return (
+    <div
+      className={cn(
+        "w-[360px] mx-auto rounded-2xl overflow-hidden",
+        "bg-white text-zinc-900 border border-zinc-200",
+        className
+      )}
+    >
+      <div className="flex flex-col h-[480px]">
+        {/* Header */}
+        <div
+          className={cn(
+            "px-4 py-3 flex items-center justify-between border-b border-zinc-200"
+          )}
+        >
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <div className="relative w-10 h-10 rounded-full flex items-center justify-center overflow-hidden">
+                <Image
+                  src="/logo.png"
+                  className="object-cover"
+                  fill={true}
+                  alt="logo"
+                />
+              </div>
+              <div
+                className={cn(
+                  "absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-emerald-500 ring-2 ring-white"
+                )}
+              />
+            </div>
+            <div>
+              <h3 className={cn("font-medium text-zinc-900")}>{chatName}</h3>
+            </div>
+          </div>
+        </div>
+
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+          {messages.map((message, idx) => (
+            <div key={idx} className={"flex items-start gap-3"}>
+              {!message.sender.isCurrentUser && (
+                <Image
+                  src={message.sender.avatar}
+                  alt={message.sender.name}
+                  width={36}
+                  height={36}
+                  className="rounded-full"
+                />
+              )}
+
+              <div
+                className={clsx(
+                  message.sender.isCurrentUser ? "ml-auto" : "mr-auto"
+                )}
+              >
+                <div className="text-sm flex items-center gap-2 mb-1">
+                  <span className={cn("font-medium text-zinc-900")}>
+                    {message.sender.name}
+                  </span>
+                </div>
+                <div
+                  className={clsx(
+                    "py-2 px-3 rounded-md",
+                    message.sender.isCurrentUser
+                      ? "bg-accent-foreground"
+                      : "bg-accent"
+                  )}
+                >
+                  <p
+                    className={cn(
+                      "text-sm break-words",
+                      message.sender.isCurrentUser
+                        ? "text-primary"
+                        : "text-zinc-700"
+                    )}
+                  >
+                    {message.content}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Input */}
+        <div className={cn("p-4 bg-white")}>
+          <div className="flex items-center gap-2">
+            <div className="relative flex-1">
+              <Input
+                disabled={mutation.isPending}
+                type="text"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSendMessage();
+                  }
+                }}
+                placeholder="Write a message..."
+              />
+            </div>
+            <Button
+              disabled={mutation.isPending}
+              onClick={handleSendMessage}
+              size={"icon"}
+            >
+              {mutation.isPending ? (
+                <Spinner className="w-5 h-5" />
+              ) : (
+                <Send className="w-5 h-5" />
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/number-ticker.tsx b/src/components/ui/number-ticker.tsx
new file mode 100644
index 0000000..f69d0bf
--- /dev/null
+++ b/src/components/ui/number-ticker.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useInView, useMotionValue, useSpring } from "motion/react";
+
+import { cn } from "@/lib/utils";
+
+export default function NumberTicker({
+  value,
+  direction = "up",
+  delay = 0,
+  className,
+  decimalPlaces = 0,
+}: {
+  value: number;
+  direction?: "up" | "down";
+  className?: string;
+  delay?: number; // delay in s
+  decimalPlaces?: number;
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const motionValue = useMotionValue(direction === "down" ? value : 0);
+  const springValue = useSpring(motionValue, {
+    damping: 60,
+    stiffness: 100,
+  });
+  const isInView = useInView(ref, { once: true, margin: "0px" });
+
+  useEffect(() => {
+    isInView &&
+      setTimeout(() => {
+        motionValue.set(direction === "down" ? 0 : value);
+      }, delay * 1000);
+  }, [motionValue, isInView, delay, value, direction]);
+
+  useEffect(
+    () =>
+      springValue.on("change", (latest) => {
+        if (ref.current) {
+          ref.current.textContent = Intl.NumberFormat("en-US", {
+            minimumFractionDigits: decimalPlaces,
+            maximumFractionDigits: decimalPlaces,
+          }).format(Number(latest.toFixed(decimalPlaces)));
+        }
+      }),
+    [springValue, decimalPlaces],
+  );
+
+  return (
+    <span
+      className={cn(
+        "inline-block tabular-nums tracking-wider text-black dark:text-white",
+        className,
+      )}
+      ref={ref}
+    />
+  );
+}
diff --git a/src/lib/config.tsx b/src/lib/config.tsx
index 3129d12..7a3cdcc 100644
--- a/src/lib/config.tsx
+++ b/src/lib/config.tsx
@@ -197,15 +197,15 @@ export const siteConfig = {
     },
   ],
   footer: [
-    {
-      title: "Product",
-      links: [
-        { href: "#", text: "Features", icon: null },
-        // { href: "#", text: "Pricing", icon: null },
-        { href: "#", text: "Documentation", icon: null },
-        { href: "#", text: "API", icon: null },
-      ],
-    },
+    // {
+    //   title: "Product",
+    //   links: [
+    //     { href: "#", text: "Features", icon: null },
+    //     // { href: "#", text: "Pricing", icon: null },
+    //     { href: "#", text: "Documentation", icon: null },
+    //     { href: "#", text: "API", icon: null },
+    //   ],
+    // },
     // {
     //   title: "Company",
     //   links: [
@@ -230,7 +230,7 @@ export const siteConfig = {
       links: [
         {
           href: "#",
-          text: "Twitter",
+          text: "X",
           icon: <FaTwitter />,
         },
         // {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 6b4d896..9b2072b 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -59,31 +59,31 @@ export function constructMetadata({
 
 export function formatDate(date: string) {
   let currentDate = new Date().getTime();
+
   if (!date.includes("T")) {
     date = `${date}T00:00:00`;
   }
+
   let targetDate = new Date(date).getTime();
-  let timeDifference = Math.abs(currentDate - targetDate);
-  let daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+  let timeDifference = currentDate - targetDate;
 
-  let fullDate = new Date(date).toLocaleString("en-us", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
+  const minutesAgo = Math.floor(timeDifference / (1000 * 60));
+  const hoursAgo = Math.floor(timeDifference / (1000 * 60 * 60));
+  const daysAgo = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+  const monthsAgo = Math.floor(daysAgo / 30);
+  const yearsAgo = Math.floor(daysAgo / 365);
 
-  if (daysAgo < 1) {
-    return "Today";
-  } else if (daysAgo < 7) {
-    return `${fullDate} (${daysAgo}d ago)`;
+  if (minutesAgo < 1) {
+    return "Just now";
+  } else if (minutesAgo < 60) {
+    return `${minutesAgo} minute${minutesAgo > 1 ? "s" : ""} ago`;
+  } else if (hoursAgo < 24) {
+    return `${hoursAgo} hour${hoursAgo > 1 ? "s" : ""} ago`;
   } else if (daysAgo < 30) {
-    const weeksAgo = Math.floor(daysAgo / 7);
-    return `${fullDate} (${weeksAgo}w ago)`;
+    return `${daysAgo} day${daysAgo > 1 ? "s" : ""} ago`;
   } else if (daysAgo < 365) {
-    const monthsAgo = Math.floor(daysAgo / 30);
-    return `${fullDate} (${monthsAgo}mo ago)`;
+    return `${monthsAgo} month${monthsAgo > 1 ? "s" : ""} ago`;
   } else {
-    const yearsAgo = Math.floor(daysAgo / 365);
-    return `${fullDate} (${yearsAgo}y ago)`;
+    return `${yearsAgo} year${yearsAgo > 1 ? "s" : ""} ago`;
   }
 }
diff --git a/src/providers/react-query-provider.tsx b/src/providers/react-query-provider.tsx
index bfda228..1116a0f 100644
--- a/src/providers/react-query-provider.tsx
+++ b/src/providers/react-query-provider.tsx
@@ -30,7 +30,7 @@ export default function ReactQueryProvider({
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
   );
 }
diff --git a/src/utils/supabase/database.types.ts b/src/utils/supabase/database.types.ts
index 20dd905..57de439 100644
--- a/src/utils/supabase/database.types.ts
+++ b/src/utils/supabase/database.types.ts
@@ -4,98 +4,104 @@ export type Json =
   | boolean
   | null
   | { [key: string]: Json | undefined }
-  | Json[]
+  | Json[];
 
 export type Database = {
   graphql_public: {
     Tables: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Views: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Functions: {
       graphql: {
         Args: {
-          operationName?: string
-          query?: string
-          variables?: Json
-          extensions?: Json
-        }
-        Returns: Json
-      }
-    }
+          operationName?: string;
+          query?: string;
+          variables?: Json;
+          extensions?: Json;
+        };
+        Returns: Json;
+      };
+    };
     Enums: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
+      [_ in never]: never;
+    };
+  };
   pgbouncer: {
     Tables: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Views: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Functions: {
       get_auth: {
         Args: {
-          p_usename: string
-        }
+          p_usename: string;
+        };
         Returns: {
-          username: string
-          password: string
-        }[]
-      }
-    }
+          username: string;
+          password: string;
+        }[];
+      };
+    };
     Enums: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
+      [_ in never]: never;
+    };
+  };
   public: {
     Tables: {
       agents: {
         Row: {
-          created_at: string
-          description: string
-          id: number
-          image_url: string | null
-          model_type: Database["public"]["Enums"]["modelType"]
-          name: string
-          user_id: string | null
-        }
+          conversation: number;
+          created_at: string;
+          description: string;
+          id: number;
+          image_url: string | null;
+          last_conv: string | null;
+          model_type: Database["public"]["Enums"]["modelType"];
+          name: string;
+          user_id: string | null;
+        };
         Insert: {
-          created_at?: string
-          description: string
-          id?: number
-          image_url?: string | null
-          model_type: Database["public"]["Enums"]["modelType"]
-          name: string
-          user_id?: string | null
-        }
+          conversation?: number;
+          created_at?: string;
+          description: string;
+          id?: number;
+          image_url?: string | null;
+          last_conv?: string | null;
+          model_type: Database["public"]["Enums"]["modelType"];
+          name: string;
+          user_id?: string | null;
+        };
         Update: {
-          created_at?: string
-          description?: string
-          id?: number
-          image_url?: string | null
-          model_type?: Database["public"]["Enums"]["modelType"]
-          name?: string
-          user_id?: string | null
-        }
-        Relationships: []
-      }
-    }
+          conversation?: number;
+          created_at?: string;
+          description?: string;
+          id?: number;
+          image_url?: string | null;
+          last_conv?: string | null;
+          model_type?: Database["public"]["Enums"]["modelType"];
+          name?: string;
+          user_id?: string | null;
+        };
+        Relationships: [];
+      };
+    };
     Views: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Functions: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Enums: {
       modelType:
         | "roleplay"
@@ -110,325 +116,326 @@ export type Database = {
         | "health"
         | "trivia"
         | "academia"
-    }
+        | "general";
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
+      [_ in never]: never;
+    };
+  };
   storage: {
     Tables: {
       buckets: {
         Row: {
-          allowed_mime_types: string[] | null
-          avif_autodetection: boolean | null
-          created_at: string | null
-          file_size_limit: number | null
-          id: string
-          name: string
-          owner: string | null
-          owner_id: string | null
-          public: boolean | null
-          updated_at: string | null
-        }
+          allowed_mime_types: string[] | null;
+          avif_autodetection: boolean | null;
+          created_at: string | null;
+          file_size_limit: number | null;
+          id: string;
+          name: string;
+          owner: string | null;
+          owner_id: string | null;
+          public: boolean | null;
+          updated_at: string | null;
+        };
         Insert: {
-          allowed_mime_types?: string[] | null
-          avif_autodetection?: boolean | null
-          created_at?: string | null
-          file_size_limit?: number | null
-          id: string
-          name: string
-          owner?: string | null
-          owner_id?: string | null
-          public?: boolean | null
-          updated_at?: string | null
-        }
+          allowed_mime_types?: string[] | null;
+          avif_autodetection?: boolean | null;
+          created_at?: string | null;
+          file_size_limit?: number | null;
+          id: string;
+          name: string;
+          owner?: string | null;
+          owner_id?: string | null;
+          public?: boolean | null;
+          updated_at?: string | null;
+        };
         Update: {
-          allowed_mime_types?: string[] | null
-          avif_autodetection?: boolean | null
-          created_at?: string | null
-          file_size_limit?: number | null
-          id?: string
-          name?: string
-          owner?: string | null
-          owner_id?: string | null
-          public?: boolean | null
-          updated_at?: string | null
-        }
-        Relationships: []
-      }
+          allowed_mime_types?: string[] | null;
+          avif_autodetection?: boolean | null;
+          created_at?: string | null;
+          file_size_limit?: number | null;
+          id?: string;
+          name?: string;
+          owner?: string | null;
+          owner_id?: string | null;
+          public?: boolean | null;
+          updated_at?: string | null;
+        };
+        Relationships: [];
+      };
       migrations: {
         Row: {
-          executed_at: string | null
-          hash: string
-          id: number
-          name: string
-        }
+          executed_at: string | null;
+          hash: string;
+          id: number;
+          name: string;
+        };
         Insert: {
-          executed_at?: string | null
-          hash: string
-          id: number
-          name: string
-        }
+          executed_at?: string | null;
+          hash: string;
+          id: number;
+          name: string;
+        };
         Update: {
-          executed_at?: string | null
-          hash?: string
-          id?: number
-          name?: string
-        }
-        Relationships: []
-      }
+          executed_at?: string | null;
+          hash?: string;
+          id?: number;
+          name?: string;
+        };
+        Relationships: [];
+      };
       objects: {
         Row: {
-          bucket_id: string | null
-          created_at: string | null
-          id: string
-          last_accessed_at: string | null
-          metadata: Json | null
-          name: string | null
-          owner: string | null
-          owner_id: string | null
-          path_tokens: string[] | null
-          updated_at: string | null
-          user_metadata: Json | null
-          version: string | null
-        }
+          bucket_id: string | null;
+          created_at: string | null;
+          id: string;
+          last_accessed_at: string | null;
+          metadata: Json | null;
+          name: string | null;
+          owner: string | null;
+          owner_id: string | null;
+          path_tokens: string[] | null;
+          updated_at: string | null;
+          user_metadata: Json | null;
+          version: string | null;
+        };
         Insert: {
-          bucket_id?: string | null
-          created_at?: string | null
-          id?: string
-          last_accessed_at?: string | null
-          metadata?: Json | null
-          name?: string | null
-          owner?: string | null
-          owner_id?: string | null
-          path_tokens?: string[] | null
-          updated_at?: string | null
-          user_metadata?: Json | null
-          version?: string | null
-        }
+          bucket_id?: string | null;
+          created_at?: string | null;
+          id?: string;
+          last_accessed_at?: string | null;
+          metadata?: Json | null;
+          name?: string | null;
+          owner?: string | null;
+          owner_id?: string | null;
+          path_tokens?: string[] | null;
+          updated_at?: string | null;
+          user_metadata?: Json | null;
+          version?: string | null;
+        };
         Update: {
-          bucket_id?: string | null
-          created_at?: string | null
-          id?: string
-          last_accessed_at?: string | null
-          metadata?: Json | null
-          name?: string | null
-          owner?: string | null
-          owner_id?: string | null
-          path_tokens?: string[] | null
-          updated_at?: string | null
-          user_metadata?: Json | null
-          version?: string | null
-        }
+          bucket_id?: string | null;
+          created_at?: string | null;
+          id?: string;
+          last_accessed_at?: string | null;
+          metadata?: Json | null;
+          name?: string | null;
+          owner?: string | null;
+          owner_id?: string | null;
+          path_tokens?: string[] | null;
+          updated_at?: string | null;
+          user_metadata?: Json | null;
+          version?: string | null;
+        };
         Relationships: [
           {
-            foreignKeyName: "objects_bucketId_fkey"
-            columns: ["bucket_id"]
-            referencedRelation: "buckets"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
+            foreignKeyName: "objects_bucketId_fkey";
+            columns: ["bucket_id"];
+            referencedRelation: "buckets";
+            referencedColumns: ["id"];
+          }
+        ];
+      };
       s3_multipart_uploads: {
         Row: {
-          bucket_id: string
-          created_at: string
-          id: string
-          in_progress_size: number
-          key: string
-          owner_id: string | null
-          upload_signature: string
-          user_metadata: Json | null
-          version: string
-        }
+          bucket_id: string;
+          created_at: string;
+          id: string;
+          in_progress_size: number;
+          key: string;
+          owner_id: string | null;
+          upload_signature: string;
+          user_metadata: Json | null;
+          version: string;
+        };
         Insert: {
-          bucket_id: string
-          created_at?: string
-          id: string
-          in_progress_size?: number
-          key: string
-          owner_id?: string | null
-          upload_signature: string
-          user_metadata?: Json | null
-          version: string
-        }
+          bucket_id: string;
+          created_at?: string;
+          id: string;
+          in_progress_size?: number;
+          key: string;
+          owner_id?: string | null;
+          upload_signature: string;
+          user_metadata?: Json | null;
+          version: string;
+        };
         Update: {
-          bucket_id?: string
-          created_at?: string
-          id?: string
-          in_progress_size?: number
-          key?: string
-          owner_id?: string | null
-          upload_signature?: string
-          user_metadata?: Json | null
-          version?: string
-        }
+          bucket_id?: string;
+          created_at?: string;
+          id?: string;
+          in_progress_size?: number;
+          key?: string;
+          owner_id?: string | null;
+          upload_signature?: string;
+          user_metadata?: Json | null;
+          version?: string;
+        };
         Relationships: [
           {
-            foreignKeyName: "s3_multipart_uploads_bucket_id_fkey"
-            columns: ["bucket_id"]
-            referencedRelation: "buckets"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
+            foreignKeyName: "s3_multipart_uploads_bucket_id_fkey";
+            columns: ["bucket_id"];
+            referencedRelation: "buckets";
+            referencedColumns: ["id"];
+          }
+        ];
+      };
       s3_multipart_uploads_parts: {
         Row: {
-          bucket_id: string
-          created_at: string
-          etag: string
-          id: string
-          key: string
-          owner_id: string | null
-          part_number: number
-          size: number
-          upload_id: string
-          version: string
-        }
+          bucket_id: string;
+          created_at: string;
+          etag: string;
+          id: string;
+          key: string;
+          owner_id: string | null;
+          part_number: number;
+          size: number;
+          upload_id: string;
+          version: string;
+        };
         Insert: {
-          bucket_id: string
-          created_at?: string
-          etag: string
-          id?: string
-          key: string
-          owner_id?: string | null
-          part_number: number
-          size?: number
-          upload_id: string
-          version: string
-        }
+          bucket_id: string;
+          created_at?: string;
+          etag: string;
+          id?: string;
+          key: string;
+          owner_id?: string | null;
+          part_number: number;
+          size?: number;
+          upload_id: string;
+          version: string;
+        };
         Update: {
-          bucket_id?: string
-          created_at?: string
-          etag?: string
-          id?: string
-          key?: string
-          owner_id?: string | null
-          part_number?: number
-          size?: number
-          upload_id?: string
-          version?: string
-        }
+          bucket_id?: string;
+          created_at?: string;
+          etag?: string;
+          id?: string;
+          key?: string;
+          owner_id?: string | null;
+          part_number?: number;
+          size?: number;
+          upload_id?: string;
+          version?: string;
+        };
         Relationships: [
           {
-            foreignKeyName: "s3_multipart_uploads_parts_bucket_id_fkey"
-            columns: ["bucket_id"]
-            referencedRelation: "buckets"
-            referencedColumns: ["id"]
+            foreignKeyName: "s3_multipart_uploads_parts_bucket_id_fkey";
+            columns: ["bucket_id"];
+            referencedRelation: "buckets";
+            referencedColumns: ["id"];
           },
           {
-            foreignKeyName: "s3_multipart_uploads_parts_upload_id_fkey"
-            columns: ["upload_id"]
-            referencedRelation: "s3_multipart_uploads"
-            referencedColumns: ["id"]
-          },
-        ]
-      }
-    }
+            foreignKeyName: "s3_multipart_uploads_parts_upload_id_fkey";
+            columns: ["upload_id"];
+            referencedRelation: "s3_multipart_uploads";
+            referencedColumns: ["id"];
+          }
+        ];
+      };
+    };
     Views: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     Functions: {
       can_insert_object: {
         Args: {
-          bucketid: string
-          name: string
-          owner: string
-          metadata: Json
-        }
-        Returns: undefined
-      }
+          bucketid: string;
+          name: string;
+          owner: string;
+          metadata: Json;
+        };
+        Returns: undefined;
+      };
       extension: {
         Args: {
-          name: string
-        }
-        Returns: string
-      }
+          name: string;
+        };
+        Returns: string;
+      };
       filename: {
         Args: {
-          name: string
-        }
-        Returns: string
-      }
+          name: string;
+        };
+        Returns: string;
+      };
       foldername: {
         Args: {
-          name: string
-        }
-        Returns: string[]
-      }
+          name: string;
+        };
+        Returns: string[];
+      };
       get_size_by_bucket: {
-        Args: Record<PropertyKey, never>
+        Args: Record<PropertyKey, never>;
         Returns: {
-          size: number
-          bucket_id: string
-        }[]
-      }
+          size: number;
+          bucket_id: string;
+        }[];
+      };
       list_multipart_uploads_with_delimiter: {
         Args: {
-          bucket_id: string
-          prefix_param: string
-          delimiter_param: string
-          max_keys?: number
-          next_key_token?: string
-          next_upload_token?: string
-        }
+          bucket_id: string;
+          prefix_param: string;
+          delimiter_param: string;
+          max_keys?: number;
+          next_key_token?: string;
+          next_upload_token?: string;
+        };
         Returns: {
-          key: string
-          id: string
-          created_at: string
-        }[]
-      }
+          key: string;
+          id: string;
+          created_at: string;
+        }[];
+      };
       list_objects_with_delimiter: {
         Args: {
-          bucket_id: string
-          prefix_param: string
-          delimiter_param: string
-          max_keys?: number
-          start_after?: string
-          next_token?: string
-        }
+          bucket_id: string;
+          prefix_param: string;
+          delimiter_param: string;
+          max_keys?: number;
+          start_after?: string;
+          next_token?: string;
+        };
         Returns: {
-          name: string
-          id: string
-          metadata: Json
-          updated_at: string
-        }[]
-      }
+          name: string;
+          id: string;
+          metadata: Json;
+          updated_at: string;
+        }[];
+      };
       operation: {
-        Args: Record<PropertyKey, never>
-        Returns: string
-      }
+        Args: Record<PropertyKey, never>;
+        Returns: string;
+      };
       search: {
         Args: {
-          prefix: string
-          bucketname: string
-          limits?: number
-          levels?: number
-          offsets?: number
-          search?: string
-          sortcolumn?: string
-          sortorder?: string
-        }
+          prefix: string;
+          bucketname: string;
+          limits?: number;
+          levels?: number;
+          offsets?: number;
+          search?: string;
+          sortcolumn?: string;
+          sortorder?: string;
+        };
         Returns: {
-          name: string
-          id: string
-          updated_at: string
-          created_at: string
-          last_accessed_at: string
-          metadata: Json
-        }[]
-      }
-    }
+          name: string;
+          id: string;
+          updated_at: string;
+          created_at: string;
+          last_accessed_at: string;
+          metadata: Json;
+        }[];
+      };
+    };
     Enums: {
-      [_ in never]: never
-    }
+      [_ in never]: never;
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
-}
+      [_ in never]: never;
+    };
+  };
+};
 
-type PublicSchema = Database[Extract<keyof Database, "public">]
+type PublicSchema = Database[Extract<keyof Database, "public">];
 
 export type Tables<
   PublicTableNameOrOptions extends
@@ -437,23 +444,23 @@ export type Tables<
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
     ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
         Database[PublicTableNameOrOptions["schema"]]["Views"])
-    : never = never,
+    : never = never
 > = PublicTableNameOrOptions extends { schema: keyof Database }
   ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
       Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
-      Row: infer R
+      Row: infer R;
     }
     ? R
     : never
   : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
-        PublicSchema["Views"])
-    ? (PublicSchema["Tables"] &
-        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
-        Row: infer R
-      }
-      ? R
-      : never
+      PublicSchema["Views"])
+  ? (PublicSchema["Tables"] &
+      PublicSchema["Views"])[PublicTableNameOrOptions] extends {
+      Row: infer R;
+    }
+    ? R
     : never
+  : never;
 
 export type TablesInsert<
   PublicTableNameOrOptions extends
@@ -461,20 +468,20 @@ export type TablesInsert<
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
     ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
-    : never = never,
+    : never = never
 > = PublicTableNameOrOptions extends { schema: keyof Database }
   ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Insert: infer I
+      Insert: infer I;
     }
     ? I
     : never
   : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Insert: infer I
-      }
-      ? I
-      : never
+  ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+      Insert: infer I;
+    }
+    ? I
     : never
+  : never;
 
 export type TablesUpdate<
   PublicTableNameOrOptions extends
@@ -482,20 +489,20 @@ export type TablesUpdate<
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
     ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
-    : never = never,
+    : never = never
 > = PublicTableNameOrOptions extends { schema: keyof Database }
   ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Update: infer U
+      Update: infer U;
     }
     ? U
     : never
   : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Update: infer U
-      }
-      ? U
-      : never
+  ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+      Update: infer U;
+    }
+    ? U
     : never
+  : never;
 
 export type Enums<
   PublicEnumNameOrOptions extends
@@ -503,9 +510,9 @@ export type Enums<
     | { schema: keyof Database },
   EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
     ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
-    : never = never,
+    : never = never
 > = PublicEnumNameOrOptions extends { schema: keyof Database }
   ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
   : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
-    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
-    : never
+  ? PublicSchema["Enums"][PublicEnumNameOrOptions]
+  : never;