From 0636a81053d76705f478c6e47edf107bb8e6529c Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Mon, 28 Apr 2025 17:49:19 -0300
Subject: [PATCH 01/27] feat: public agents base config

---
 src/components/LandingPage/Templates.tsx | 138 +----------------------
 src/components/PublicAgents/config.ts    | 135 ++++++++++++++++++++++
 src/pages/preview/[agent].astro          |  15 +++
 3 files changed, 156 insertions(+), 132 deletions(-)
 create mode 100644 src/components/PublicAgents/config.ts
 create mode 100644 src/pages/preview/[agent].astro

diff --git a/src/components/LandingPage/Templates.tsx b/src/components/LandingPage/Templates.tsx
index 81d020d3d..de7e99da4 100644
--- a/src/components/LandingPage/Templates.tsx
+++ b/src/components/LandingPage/Templates.tsx
@@ -5,136 +5,10 @@ import { Text } from './Text';
 import { IoChatbubbleEllipsesOutline } from 'react-icons/io5';
 import { useState } from 'react';
 import { cn } from '@utils/cn';
-
-type Template = {
-  name: string;
-  category: string;
-  image: string;
-  author: string;
-  socials: {
-    name: string;
-    logo: string;
-    followers: number;
-  }[];
-};
-
-const templates: Template[] = [
-  {
-    name: 'Stephanie',
-    category: 'Sports',
-    image: '/images/landing-page/templates/stephanie.png',
-    author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 16200,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 32700,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 112200,
-      },
-    ],
-  },
-  {
-    name: 'Olivia',
-    category: 'Companion',
-    image: '/images/landing-page/templates/olivia.png',
-    author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 56600,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 98200,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 85300,
-      },
-    ],
-  },
-  {
-    name: 'Crypto Chris',
-    category: 'Crypto',
-    image: '/images/landing-page/templates/chris.png',
-    author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 112400,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 2400,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 1100,
-      },
-    ],
-  },
-  {
-    name: 'Kanye East',
-    category: 'Culture',
-    image: '/images/landing-page/templates/kanye.png',
-    author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 1500,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 1100,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 659,
-      },
-    ],
-  },
-  {
-    name: 'Kiki',
-    category: 'NSFW',
-    image: '/images/landing-page/templates/kiki.png',
-    author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 9240,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 56700,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 32000,
-      },
-    ],
-  },
-];
+import {
+  publicAgents,
+  type PublicAgent,
+} from '@components/PublicAgents/config';
 
 const ContinuousAutoscroll: KeenSliderPlugin = (slider) => {
   let raf: number;
@@ -249,7 +123,7 @@ export const Templates = () => {
             },
           )}
         >
-          {templates.map((template) => (
+          {publicAgents.map((template) => (
             <div key={template.name} className="keen-slider__slide">
               <TemplateCard template={template} />
             </div>
@@ -260,7 +134,7 @@ export const Templates = () => {
   );
 };
 
-export const TemplateCard = ({ template }: { template: Template }) => {
+export const TemplateCard = ({ template }: { template: PublicAgent }) => {
   function formatCompactNumber(value: number): string {
     return new Intl.NumberFormat('en', {
       notation: 'compact',
diff --git a/src/components/PublicAgents/config.ts b/src/components/PublicAgents/config.ts
new file mode 100644
index 000000000..a5e057b5a
--- /dev/null
+++ b/src/components/PublicAgents/config.ts
@@ -0,0 +1,135 @@
+export type PublicAgent = {
+  slug: string;
+  name: string;
+  category: string;
+  image: string;
+  author: string;
+  socials: {
+    name: string;
+    logo: string;
+    followers: number;
+  }[];
+};
+
+export const publicAgents: PublicAgent[] = [
+  {
+    slug: 'stephanie',
+    name: 'Stephanie',
+    category: 'Sports',
+    image: '/images/landing-page/templates/stephanie.png',
+    author: 'Fleek',
+    socials: [
+      {
+        name: 'twitter',
+        logo: '/images/landing-page/templates/socials/x.svg',
+        followers: 16200,
+      },
+      {
+        name: 'instagram',
+        logo: '/images/landing-page/templates/socials/instagram.svg',
+        followers: 32700,
+      },
+      {
+        name: 'tiktok',
+        logo: '/images/landing-page/templates/socials/tiktok.svg',
+        followers: 112200,
+      },
+    ],
+  },
+  {
+    slug: 'olivia',
+    name: 'Olivia',
+    category: 'Companion',
+    image: '/images/landing-page/templates/olivia.png',
+    author: 'Fleek',
+    socials: [
+      {
+        name: 'twitter',
+        logo: '/images/landing-page/templates/socials/x.svg',
+        followers: 56600,
+      },
+      {
+        name: 'instagram',
+        logo: '/images/landing-page/templates/socials/instagram.svg',
+        followers: 98200,
+      },
+      {
+        name: 'tiktok',
+        logo: '/images/landing-page/templates/socials/tiktok.svg',
+        followers: 85300,
+      },
+    ],
+  },
+  {
+    slug: 'chris',
+    name: 'Crypto Chris',
+    category: 'Crypto',
+    image: '/images/landing-page/templates/chris.png',
+    author: 'Fleek',
+    socials: [
+      {
+        name: 'twitter',
+        logo: '/images/landing-page/templates/socials/x.svg',
+        followers: 112400,
+      },
+      {
+        name: 'instagram',
+        logo: '/images/landing-page/templates/socials/instagram.svg',
+        followers: 2400,
+      },
+      {
+        name: 'tiktok',
+        logo: '/images/landing-page/templates/socials/tiktok.svg',
+        followers: 1100,
+      },
+    ],
+  },
+  {
+    slug: 'kanye',
+    name: 'Kanye East',
+    category: 'Culture',
+    image: '/images/landing-page/templates/kanye.png',
+    author: 'Fleek',
+    socials: [
+      {
+        name: 'twitter',
+        logo: '/images/landing-page/templates/socials/x.svg',
+        followers: 1500,
+      },
+      {
+        name: 'instagram',
+        logo: '/images/landing-page/templates/socials/instagram.svg',
+        followers: 1100,
+      },
+      {
+        name: 'tiktok',
+        logo: '/images/landing-page/templates/socials/tiktok.svg',
+        followers: 659,
+      },
+    ],
+  },
+  {
+    slug: 'kiki',
+    name: 'Kiki',
+    category: 'NSFW',
+    image: '/images/landing-page/templates/kiki.png',
+    author: 'Fleek',
+    socials: [
+      {
+        name: 'twitter',
+        logo: '/images/landing-page/templates/socials/x.svg',
+        followers: 9240,
+      },
+      {
+        name: 'instagram',
+        logo: '/images/landing-page/templates/socials/instagram.svg',
+        followers: 56700,
+      },
+      {
+        name: 'tiktok',
+        logo: '/images/landing-page/templates/socials/tiktok.svg',
+        followers: 32000,
+      },
+    ],
+  },
+];
diff --git a/src/pages/preview/[agent].astro b/src/pages/preview/[agent].astro
new file mode 100644
index 000000000..0cac9831c
--- /dev/null
+++ b/src/pages/preview/[agent].astro
@@ -0,0 +1,15 @@
+---
+import { publicAgents } from '@components/PublicAgents/config';
+
+export function getStaticPaths() {
+  return publicAgents.map(({ slug }) => ({
+    params: {
+      agent: slug,
+    },
+  }));
+}
+
+const { agent } = Astro.params;
+---
+
+<div>Good dog, {agent}!</div>

From a67ee92f8344ac2a59fc8b0943668bfc93d439d9 Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Tue, 29 Apr 2025 11:52:45 -0300
Subject: [PATCH 02/27] feat: add static dashboard components

---
 src/components/LandingPage/Templates.tsx  |   2 +-
 src/components/PublicAgents/Dashboard.tsx | 289 ++++++++++++++++++++++
 src/components/PublicAgents/config.ts     |  18 +-
 src/pages/preview/[agentId].astro         |  20 ++
 src/pages/preview/[agent].astro           |  15 --
 5 files changed, 322 insertions(+), 22 deletions(-)
 create mode 100644 src/components/PublicAgents/Dashboard.tsx
 create mode 100644 src/pages/preview/[agentId].astro
 delete mode 100644 src/pages/preview/[agent].astro

diff --git a/src/components/LandingPage/Templates.tsx b/src/components/LandingPage/Templates.tsx
index de7e99da4..d0f602262 100644
--- a/src/components/LandingPage/Templates.tsx
+++ b/src/components/LandingPage/Templates.tsx
@@ -124,7 +124,7 @@ export const Templates = () => {
           )}
         >
           {publicAgents.map((template) => (
-            <div key={template.name} className="keen-slider__slide">
+            <div key={template.id} className="keen-slider__slide">
               <TemplateCard template={template} />
             </div>
           ))}
diff --git a/src/components/PublicAgents/Dashboard.tsx b/src/components/PublicAgents/Dashboard.tsx
new file mode 100644
index 000000000..e7a7e41d2
--- /dev/null
+++ b/src/components/PublicAgents/Dashboard.tsx
@@ -0,0 +1,289 @@
+import { cn } from '@utils/cn';
+import type { PublicAgent } from './config';
+import {
+  PiArrowClockwiseBold,
+  PiArrowUpBold,
+  PiCaretDownBold,
+  PiChartBarBold,
+  PiChatCircleDotsBold,
+  PiCoinsBold,
+  PiCopyBold,
+  PiDotsThreeBold,
+  PiGlobeSimpleBold,
+  PiGridFourBold,
+  PiImageBold,
+  PiMagicWandBold,
+  PiMagnifyingGlassBold,
+  PiNoteBold,
+  PiPlusBold,
+  PiReceiptBold,
+  PiSidebarSimpleBold,
+  PiSlidersHorizontalBold,
+  PiSlideshowBold,
+  PiThumbsDownBold,
+  PiThumbsUpBold,
+  PiUserBold,
+  PiVideoBold,
+} from 'react-icons/pi';
+
+const Button: React.FC<
+  React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>
+> = ({ children, ...props }) => {
+  return (
+    <button
+      {...props}
+      className={cn(
+        'flex h-36 items-center gap-8 rounded-12 px-8 font-medium transition-colors hover:bg-neutral-2 active:bg-neutral-1',
+        props.className,
+      )}
+    >
+      {children}
+    </button>
+  );
+};
+
+const IconButton: React.FC<
+  React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>
+> = ({ children, ...props }) => {
+  return (
+    <Button
+      {...props}
+      className={cn(
+        'size-36 justify-center border border-neutral-7 px-0 text-neutral-12',
+        props.className,
+      )}
+    >
+      {children}
+    </Button>
+  );
+};
+
+type SidebarProps = {
+  agent: PublicAgent;
+};
+
+const Sidebar: React.FC<SidebarProps> = ({ agent }) => {
+  const { name, image } = agent;
+
+  return (
+    <div className="flex h-dvh flex-col justify-between gap-12 p-12">
+      <div className="flex flex-col gap-12">
+        <div className="flex items-center justify-between">
+          <img
+            src="/svg/fleek-logo.svg"
+            width={66}
+            height={25}
+            alt="fleek logo"
+          />
+          <IconButton>
+            <PiSidebarSimpleBold className="size-16" />
+          </IconButton>
+        </div>
+        <div className="flex flex-col gap-8">
+          <Button>
+            <PiPlusBold className="size-16" />
+            Create
+          </Button>
+          <Button>
+            <PiGridFourBold className="size-16" />
+            Explore
+          </Button>
+          <Button>
+            <PiCoinsBold className="size-16" />
+            Earnings
+          </Button>
+          <div className="h-[1px] bg-neutral-6" />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Button className="justify-between">
+            My agents <PiCaretDownBold className="size-16" />
+          </Button>
+          <Button className="justify-between bg-gray-dark-5 text-neutral-12 hover:bg-gray-dark-5 active:bg-gray-dark-5">
+            <div className="flex items-center gap-8">
+              <img
+                src={image}
+                width={16}
+                height={16}
+                alt={name}
+                className="rounded-4"
+              />
+              {name}
+            </div>
+            <PiGlobeSimpleBold className="size-16" />
+          </Button>
+        </div>
+      </div>
+      <div className="overflow-clip rounded-12 border border-neutral-6">
+        <div className="flex items-center justify-between border-b border-neutral-6 bg-gray-dark-3 p-12 text-12">
+          <p>$0.00</p>
+          <p className="text-neutral-12">Buy credits</p>
+        </div>
+        <div className="flex items-center justify-between p-12 font-medium text-neutral-12">
+          <div className="flex items-center gap-8">
+            <div className="flex size-36 items-center justify-center rounded-8 bg-gray-dark-3">
+              <PiUserBold className="size-23 text-neutral-8" />
+            </div>
+            <p>Guest</p>
+          </div>
+          <PiDotsThreeBold className="size-16" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const TabItem: React.FC<
+  React.PropsWithChildren & React.HTMLAttributes<HTMLButtonElement>
+> = ({ children, ...props }) => {
+  return (
+    <button
+      {...props}
+      className={cn(
+        '-mb-[1px] flex h-42 cursor-pointer items-center gap-4 border-b-2 border-transparent px-8 font-medium',
+        props.className,
+      )}
+    >
+      {children}
+    </button>
+  );
+};
+
+type ContentProps = {
+  agent: PublicAgent;
+};
+
+const Content: React.FC<ContentProps> = ({ agent }) => {
+  const { name, image, greeting } = agent;
+
+  return (
+    <div className="p-12 pl-0">
+      <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
+        <div className="flex items-center justify-between p-12">
+          <div className="flex items-center gap-8">
+            <Button className="bg-gray-dark-3 text-neutral-12">
+              <img
+                src={image}
+                width={16}
+                height={16}
+                alt={name}
+                className="rounded-4"
+              />
+              {name}
+              <PiCaretDownBold className="size-16" />
+            </Button>
+            <Button className="justify-center border border-neutral-7 text-neutral-12">
+              <PiGlobeSimpleBold className="size-16" />
+              Public
+            </Button>
+          </div>
+          <div className="flex items-center gap-8">
+            <IconButton>
+              <PiMagnifyingGlassBold className="size-16" />
+            </IconButton>
+            <IconButton>
+              <PiSidebarSimpleBold className="size-16" />
+            </IconButton>
+          </div>
+        </div>
+        <div className="flex items-center gap-12 border-b border-neutral-6 px-12">
+          <TabItem className="border-neutral-12 text-neutral-12">
+            <PiChatCircleDotsBold className="size-16" />
+            Chat
+          </TabItem>
+          <TabItem>
+            <PiNoteBold className="size-16" />
+            Content
+          </TabItem>
+          <TabItem>
+            <PiSlideshowBold className="size-16" />
+            Gallery
+          </TabItem>
+          <TabItem>
+            <PiChartBarBold className="size-16" />
+            Analytics
+          </TabItem>
+          <TabItem>
+            <PiReceiptBold className="size-16" />
+            Services
+          </TabItem>
+        </div>
+        <div className="flex flex-1 flex-col justify-between">
+          <div className="p-24">
+            <div className="flex items-start gap-12">
+              <img
+                src={image}
+                width={16}
+                height={16}
+                alt={name}
+                className="rounded-4"
+              />
+              <div className="flex flex-col gap-16">
+                <p className="font-medium leading-16 text-neutral-12">
+                  {greeting}
+                </p>
+                <div className="flex items-center gap-12">
+                  <PiArrowClockwiseBold className="size-16" />
+                  <PiCopyBold className="size-16" />
+                  <PiThumbsUpBold className="size-16" />
+                  <PiThumbsDownBold className="size-16" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="p-12">
+            <div className="overflow-clip rounded-12 border border-neutral-6 bg-gray-dark-4">
+              <textarea
+                placeholder="Message..."
+                className="w-full resize-none bg-transparent p-16 text-neutral-12 outline-none placeholder:text-neutral-8"
+                // biome-ignore lint/a11y/noAutofocus: static page
+                autoFocus
+              />
+              <div className="flex items-center justify-between p-12">
+                <div className="flex items-center gap-8">
+                  <IconButton>
+                    <PiPlusBold className="size-16" />
+                  </IconButton>
+                  <IconButton>
+                    <PiSlidersHorizontalBold className="size-16" />
+                  </IconButton>
+                  <IconButton>
+                    <PiMagicWandBold className="size-16" />
+                  </IconButton>
+                </div>
+                <IconButton className="border-none bg-neutral-1 hover:bg-black">
+                  <PiArrowUpBold />
+                </IconButton>
+              </div>
+              <div className="flex items-center gap-8 bg-gray-dark-3 p-12">
+                <Button className="border border-neutral-6">
+                  <PiImageBold className="size-16 text-[#75C7F0]" /> Create
+                  image
+                </Button>
+                <Button className="border border-neutral-6">
+                  <PiVideoBold className="size-16 text-[#FF949D]" />
+                  Create video
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type DashboardProps = {
+  agent: PublicAgent;
+};
+
+export const Dashboard: React.FC<DashboardProps> = ({ agent }) => {
+  const { id, name, image } = agent;
+
+  return (
+    <div className="grid grid-cols-[240px_minmax(0,1fr)_320px] font-inter">
+      <Sidebar agent={agent} />
+      <Content agent={agent} />
+      <div>sidebar</div>
+    </div>
+  );
+};
diff --git a/src/components/PublicAgents/config.ts b/src/components/PublicAgents/config.ts
index a5e057b5a..c090c3665 100644
--- a/src/components/PublicAgents/config.ts
+++ b/src/components/PublicAgents/config.ts
@@ -1,9 +1,10 @@
 export type PublicAgent = {
-  slug: string;
+  id: number;
   name: string;
   category: string;
   image: string;
   author: string;
+  greeting: string;
   socials: {
     name: string;
     logo: string;
@@ -13,10 +14,11 @@ export type PublicAgent = {
 
 export const publicAgents: PublicAgent[] = [
   {
-    slug: 'stephanie',
+    id: 1,
     name: 'Stephanie',
     category: 'Sports',
     image: '/images/landing-page/templates/stephanie.png',
+    greeting: 'Hey! Feel free to ask me any questions you might have.',
     author: 'Fleek',
     socials: [
       {
@@ -37,10 +39,11 @@ export const publicAgents: PublicAgent[] = [
     ],
   },
   {
-    slug: 'olivia',
+    id: 2,
     name: 'Olivia',
     category: 'Companion',
     image: '/images/landing-page/templates/olivia.png',
+    greeting: 'Hey! Feel free to ask me any questions you might have.',
     author: 'Fleek',
     socials: [
       {
@@ -61,10 +64,11 @@ export const publicAgents: PublicAgent[] = [
     ],
   },
   {
-    slug: 'chris',
+    id: 3,
     name: 'Crypto Chris',
     category: 'Crypto',
     image: '/images/landing-page/templates/chris.png',
+    greeting: 'Hey! Feel free to ask me any questions you might have.',
     author: 'Fleek',
     socials: [
       {
@@ -85,10 +89,11 @@ export const publicAgents: PublicAgent[] = [
     ],
   },
   {
-    slug: 'kanye',
+    id: 4,
     name: 'Kanye East',
     category: 'Culture',
     image: '/images/landing-page/templates/kanye.png',
+    greeting: 'Hey! Feel free to ask me any questions you might have.',
     author: 'Fleek',
     socials: [
       {
@@ -109,10 +114,11 @@ export const publicAgents: PublicAgent[] = [
     ],
   },
   {
-    slug: 'kiki',
+    id: 5,
     name: 'Kiki',
     category: 'NSFW',
     image: '/images/landing-page/templates/kiki.png',
+    greeting: 'Hey! Feel free to ask me any questions you might have.',
     author: 'Fleek',
     socials: [
       {
diff --git a/src/pages/preview/[agentId].astro b/src/pages/preview/[agentId].astro
new file mode 100644
index 000000000..8dadf38f8
--- /dev/null
+++ b/src/pages/preview/[agentId].astro
@@ -0,0 +1,20 @@
+---
+import { publicAgents } from '@components/PublicAgents/config';
+import { Dashboard } from '@components/PublicAgents/Dashboard';
+import LandingPageHtml from '@layouts/LandingPageHtml.astro';
+
+export function getStaticPaths() {
+  return publicAgents.map((agent) => ({
+    params: {
+      agentId: agent.id,
+    },
+    props: {
+      agent,
+    },
+  }));
+}
+
+const { agent } = Astro.props;
+---
+
+<LandingPageHtml><Dashboard client:load agent={agent} /></LandingPageHtml>
diff --git a/src/pages/preview/[agent].astro b/src/pages/preview/[agent].astro
deleted file mode 100644
index 0cac9831c..000000000
--- a/src/pages/preview/[agent].astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
-import { publicAgents } from '@components/PublicAgents/config';
-
-export function getStaticPaths() {
-  return publicAgents.map(({ slug }) => ({
-    params: {
-      agent: slug,
-    },
-  }));
-}
-
-const { agent } = Astro.params;
----
-
-<div>Good dog, {agent}!</div>

From 561fde3548b88e85dab65ce66adfa0268929edfc Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Tue, 29 Apr 2025 14:56:10 -0300
Subject: [PATCH 03/27] feat: aside profile

---
 src/components/PublicAgents/Dashboard.tsx | 66 +++++++++++++++++++++--
 src/components/PublicAgents/config.ts     | 11 ++++
 2 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/src/components/PublicAgents/Dashboard.tsx b/src/components/PublicAgents/Dashboard.tsx
index e7a7e41d2..5523d4434 100644
--- a/src/components/PublicAgents/Dashboard.tsx
+++ b/src/components/PublicAgents/Dashboard.tsx
@@ -15,16 +15,20 @@ import {
   PiMagicWandBold,
   PiMagnifyingGlassBold,
   PiNoteBold,
+  PiPhoneBold,
   PiPlusBold,
   PiReceiptBold,
   PiSidebarSimpleBold,
   PiSlidersHorizontalBold,
   PiSlideshowBold,
+  PiStarFourBold,
   PiThumbsDownBold,
   PiThumbsUpBold,
   PiUserBold,
   PiVideoBold,
+  PiVideoCameraBold,
 } from 'react-icons/pi';
+import type React from 'react';
 
 const Button: React.FC<
   React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>
@@ -66,7 +70,7 @@ const Sidebar: React.FC<SidebarProps> = ({ agent }) => {
   const { name, image } = agent;
 
   return (
-    <div className="flex h-dvh flex-col justify-between gap-12 p-12">
+    <div className="flex h-dvh flex-col justify-between gap-12 p-12 pr-0">
       <div className="flex flex-col gap-12">
         <div className="flex items-center justify-between">
           <img
@@ -156,7 +160,7 @@ const Content: React.FC<ContentProps> = ({ agent }) => {
   const { name, image, greeting } = agent;
 
   return (
-    <div className="p-12 pl-0">
+    <div className="p-12">
       <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
         <div className="flex items-center justify-between p-12">
           <div className="flex items-center gap-8">
@@ -272,18 +276,70 @@ const Content: React.FC<ContentProps> = ({ agent }) => {
   );
 };
 
+type AsideProfileProps = {
+  agent: PublicAgent;
+};
+
+const AsideProfile: React.FC<AsideProfileProps> = ({ agent }) => {
+  const { name, about, image, category } = agent;
+
+  return (
+    <aside className="p-12 pl-0">
+      <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
+        <div className="flex h-60 items-center justify-between border-b border-neutral-6 px-12">
+          <div className="flex items-center gap-8 font-medium text-neutral-12">
+            <PiStarFourBold className="size-16" />
+            Influencer
+          </div>
+          <div className="flex h-24 items-center justify-center rounded-full border border-neutral-7 px-8 text-12 text-neutral-11">
+            {category}
+          </div>
+        </div>
+        <div className="flex flex-col gap-16 p-12">
+          <img
+            src={image}
+            width={284}
+            height={284}
+            alt={name}
+            className="aspect-1 rounded-16 object-cover"
+          />
+          <p className="text-center text-18 font-medium text-neutral-12">
+            {name}
+          </p>
+          <div className="flex items-center gap-12 *:flex-1">
+            <Button className="pointer-events-none h-[61px] select-none flex-col items-center justify-center gap-4 bg-gray-dark-3">
+              <PiChatCircleDotsBold className="size-16" />
+              Chat
+            </Button>
+            <Button className="pointer-events-none h-[61px] select-none flex-col items-center justify-center gap-4 border border-neutral-6 bg-transparent">
+              <PiPhoneBold className="size-16" />
+              Call
+            </Button>
+            <Button className="pointer-events-none h-[61px] select-none flex-col items-center justify-center gap-4 border border-neutral-6 bg-transparent">
+              <PiVideoCameraBold className="size-16" />
+              Video
+            </Button>
+          </div>
+          <div className="flex flex-col gap-8">
+            <p>About me</p>
+            <p className="leading-20 text-neutral-12">{about}</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+};
+
 type DashboardProps = {
   agent: PublicAgent;
 };
 
 export const Dashboard: React.FC<DashboardProps> = ({ agent }) => {
-  const { id, name, image } = agent;
-
   return (
     <div className="grid grid-cols-[240px_minmax(0,1fr)_320px] font-inter">
       <Sidebar agent={agent} />
       <Content agent={agent} />
-      <div>sidebar</div>
+      <AsideProfile agent={agent} />
     </div>
   );
 };
diff --git a/src/components/PublicAgents/config.ts b/src/components/PublicAgents/config.ts
index c090c3665..77724c43b 100644
--- a/src/components/PublicAgents/config.ts
+++ b/src/components/PublicAgents/config.ts
@@ -5,6 +5,7 @@ export type PublicAgent = {
   image: string;
   author: string;
   greeting: string;
+  about: string;
   socials: {
     name: string;
     logo: string;
@@ -19,6 +20,8 @@ export const publicAgents: PublicAgent[] = [
     category: 'Sports',
     image: '/images/landing-page/templates/stephanie.png',
     greeting: 'Hey! Feel free to ask me any questions you might have.',
+    about:
+      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
     author: 'Fleek',
     socials: [
       {
@@ -44,6 +47,8 @@ export const publicAgents: PublicAgent[] = [
     category: 'Companion',
     image: '/images/landing-page/templates/olivia.png',
     greeting: 'Hey! Feel free to ask me any questions you might have.',
+    about:
+      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
     author: 'Fleek',
     socials: [
       {
@@ -69,6 +74,8 @@ export const publicAgents: PublicAgent[] = [
     category: 'Crypto',
     image: '/images/landing-page/templates/chris.png',
     greeting: 'Hey! Feel free to ask me any questions you might have.',
+    about:
+      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
     author: 'Fleek',
     socials: [
       {
@@ -94,6 +101,8 @@ export const publicAgents: PublicAgent[] = [
     category: 'Culture',
     image: '/images/landing-page/templates/kanye.png',
     greeting: 'Hey! Feel free to ask me any questions you might have.',
+    about:
+      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
     author: 'Fleek',
     socials: [
       {
@@ -119,6 +128,8 @@ export const publicAgents: PublicAgent[] = [
     category: 'NSFW',
     image: '/images/landing-page/templates/kiki.png',
     greeting: 'Hey! Feel free to ask me any questions you might have.',
+    about:
+      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
     author: 'Fleek',
     socials: [
       {

From b360a80f78505e748ecc56dc29b1fd24be878a98 Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Tue, 29 Apr 2025 15:35:35 -0300
Subject: [PATCH 04/27] chore: enhance about with ai

---
 src/components/Modal/Modal.tsx            |  4 +-
 src/components/PublicAgents/Dashboard.tsx | 83 +++++++++++++++++++----
 src/components/PublicAgents/config.ts     | 24 ++++---
 tailwind.config.mjs                       |  1 +
 4 files changed, 88 insertions(+), 24 deletions(-)

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 3ba48a110..3993792d9 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -36,14 +36,14 @@ export const Modal: React.FC<ModalProps> = ({
     <>
       <Box
         className={cn(
-          'animate-in fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-sm duration-200',
+          'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm duration-200 animate-in fade-in-0',
           backdropClassName,
         )}
         onClick={closeModal}
       />
       <Box
         className={cn(
-          'animate-in fade-in-50 zoom-in-95 fixed inset-0 top-1/4 z-60 mx-auto max-h-fit w-512 items-center justify-center rounded-12 border border-gray-dark-6 bg-gray-dark-1 p-24 duration-300',
+          'fixed inset-0 top-1/4 z-60 mx-auto max-h-fit w-512 items-center justify-center rounded-12 border border-gray-dark-6 bg-gray-dark-1 p-24 duration-300 animate-in fade-in-50 zoom-in-95',
           modalContainerClassName,
         )}
       >
diff --git a/src/components/PublicAgents/Dashboard.tsx b/src/components/PublicAgents/Dashboard.tsx
index 5523d4434..aa157ca19 100644
--- a/src/components/PublicAgents/Dashboard.tsx
+++ b/src/components/PublicAgents/Dashboard.tsx
@@ -1,11 +1,12 @@
 import { cn } from '@utils/cn';
-import type { PublicAgent } from './config';
+import { publicAgents, type PublicAgent } from './config';
 import {
   PiArrowClockwiseBold,
   PiArrowUpBold,
   PiCaretDownBold,
   PiChartBarBold,
   PiChatCircleDotsBold,
+  PiCheckBold,
   PiCoinsBold,
   PiCopyBold,
   PiDotsThreeBold,
@@ -29,6 +30,8 @@ import {
   PiVideoCameraBold,
 } from 'react-icons/pi';
 import type React from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { useState } from 'react';
 
 const Button: React.FC<
   React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>
@@ -152,6 +155,72 @@ const TabItem: React.FC<
   );
 };
 
+type DropdownProps = {
+  agent: PublicAgent;
+};
+
+const Dropdown: React.FC<DropdownProps> = ({ agent }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { image, name } = agent;
+
+  return (
+    <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenu.Trigger className="flex h-36 select-none items-center gap-8 rounded-12 bg-gray-dark-3 px-8 font-medium text-neutral-12 outline-none hover:bg-gray-dark-4">
+        <img
+          src={image}
+          width={16}
+          height={16}
+          alt={name}
+          className="rounded-4"
+        />
+        {name}
+        <PiCaretDownBold
+          className={cn('size-16 transition-all', {
+            'rotate-180': isOpen,
+          })}
+        />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          sideOffset={4}
+          align="start"
+          className="rounded-12  border border-neutral-6 bg-gray-dark-4 p-4 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-[.98]"
+        >
+          {publicAgents.map((p) => {
+            const isSelected = p.id === agent.id;
+            return (
+              <DropdownMenu.Item key={p.id} className="outline-none">
+                <a
+                  href={String(p.id)}
+                  className={cn(
+                    'flex h-32 cursor-pointer items-center justify-between gap-24 rounded-8 px-8 font-medium outline-none hover:bg-gray-dark-3',
+                    {
+                      'text-neutral-12': isSelected,
+                    },
+                  )}
+                >
+                  <div className="flex items-center gap-8">
+                    <img
+                      src={p.image}
+                      width={16}
+                      height={16}
+                      alt={p.name}
+                      className="rounded-4"
+                    />
+                    {p.name}
+                  </div>
+                  {isSelected && <PiCheckBold className="size-16" />}
+                </a>
+              </DropdownMenu.Item>
+            );
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};
+
 type ContentProps = {
   agent: PublicAgent;
 };
@@ -164,17 +233,7 @@ const Content: React.FC<ContentProps> = ({ agent }) => {
       <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
         <div className="flex items-center justify-between p-12">
           <div className="flex items-center gap-8">
-            <Button className="bg-gray-dark-3 text-neutral-12">
-              <img
-                src={image}
-                width={16}
-                height={16}
-                alt={name}
-                className="rounded-4"
-              />
-              {name}
-              <PiCaretDownBold className="size-16" />
-            </Button>
+            <Dropdown agent={agent} />
             <Button className="justify-center border border-neutral-7 text-neutral-12">
               <PiGlobeSimpleBold className="size-16" />
               Public
diff --git a/src/components/PublicAgents/config.ts b/src/components/PublicAgents/config.ts
index 77724c43b..a184521e8 100644
--- a/src/components/PublicAgents/config.ts
+++ b/src/components/PublicAgents/config.ts
@@ -19,9 +19,10 @@ export const publicAgents: PublicAgent[] = [
     name: 'Stephanie',
     category: 'Sports',
     image: '/images/landing-page/templates/stephanie.png',
-    greeting: 'Hey! Feel free to ask me any questions you might have.',
+    greeting:
+      "Hey there! Ready to dive into the latest sports highlights or break down last night's game?",
     about:
-      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
+      "Stephanie is your go-to sports expert, always ready with the latest scores, athlete gossip, and game-day insights. Whether it's basketball, tennis, or Formula 1, she's got the play-by-play and personality to match.",
     author: 'Fleek',
     socials: [
       {
@@ -46,9 +47,10 @@ export const publicAgents: PublicAgent[] = [
     name: 'Olivia',
     category: 'Companion',
     image: '/images/landing-page/templates/olivia.png',
-    greeting: 'Hey! Feel free to ask me any questions you might have.',
+    greeting:
+      "Hi! I'm here to chat, listen, and keep you company — what's on your mind today?",
     about:
-      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
+      "Olivia is your charming digital companion — thoughtful, witty, and always ready to chat. From relationship advice to your favorite movies, she's here to keep you company and make every conversation feel personal.",
     author: 'Fleek',
     socials: [
       {
@@ -73,9 +75,10 @@ export const publicAgents: PublicAgent[] = [
     name: 'Crypto Chris',
     category: 'Crypto',
     image: '/images/landing-page/templates/chris.png',
-    greeting: 'Hey! Feel free to ask me any questions you might have.',
+    greeting:
+      "Wanna talk crypto? I've got the alpha, the memes, and the market moves — just ask.",
     about:
-      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
+      "Crypto Chris is plugged into the blockchain 24/7. Whether you want the latest on Bitcoin trends, altcoin gems, or NFT drama, he's got the insights — and a meme or two to go with it.",
     author: 'Fleek',
     socials: [
       {
@@ -100,9 +103,10 @@ export const publicAgents: PublicAgent[] = [
     name: 'Kanye East',
     category: 'Culture',
     image: '/images/landing-page/templates/kanye.png',
-    greeting: 'Hey! Feel free to ask me any questions you might have.',
+    greeting:
+      "Sup. Let's talk art, fashion, music — or whatever's breaking the internet right now.",
     about:
-      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
+      "Kanye East blends pop culture commentary with bold opinions and creative flair. From underground fashion to viral trends, he's your cultural compass—unfiltered and always on beat.",
     author: 'Fleek',
     socials: [
       {
@@ -127,9 +131,9 @@ export const publicAgents: PublicAgent[] = [
     name: 'Kiki',
     category: 'NSFW',
     image: '/images/landing-page/templates/kiki.png',
-    greeting: 'Hey! Feel free to ask me any questions you might have.',
+    greeting: "Hey babe 😘 Let's keep things fun, flirty, and just between us.",
     about:
-      "She's a fashion influencer who loves avant-garde styles. While she's hit the runway a couple of times, these days she's all about styling celebs and enjoying Italian food four times a week in Los Angeles.",
+      "Kiki is playful, confident, and never shy. Whether it's cheeky banter or late-night convos, she's here to entertain and keep things exciting in your world — no filters, no rules.",
     author: 'Fleek',
     socials: [
       {
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 7e168530c..a8193ee73 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -133,6 +133,7 @@ export default {
     },
   },
   plugins: [
+    require("tailwindcss-animate"),
     tailwindPluginTypography,
     function ({ addUtilities }) {
       addUtilities({

From f8d81fe228fb85747238b591db6344bc585fc60c Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Tue, 29 Apr 2025 16:36:09 -0300
Subject: [PATCH 05/27] fix: tailwind config

---
 tailwind.config.mjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index a8193ee73..34fa0c44a 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,5 +1,6 @@
 import tailwindCustomConfig from './.tailwind/tailwind.custom.config';
 import tailwindPluginTypography from './.tailwind/tailwind.plugin.typography';
+import tailwindcssAnimate from "tailwindcss-animate";
 
 export const colors = {
   title: '#F1F1F1',
@@ -133,7 +134,7 @@ export default {
     },
   },
   plugins: [
-    require("tailwindcss-animate"),
+    tailwindcssAnimate,
     tailwindPluginTypography,
     function ({ addUtilities }) {
       addUtilities({

From 3be53ecbe9c4e0f830f0fd5693f59bd6c17621fe Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Tue, 29 Apr 2025 17:52:00 -0300
Subject: [PATCH 06/27] feat: typewriter effect and small delay to send agent
 msg

---
 src/components/PublicAgents/Dashboard.tsx | 69 +++++++++++++++++++++--
 1 file changed, 63 insertions(+), 6 deletions(-)

diff --git a/src/components/PublicAgents/Dashboard.tsx b/src/components/PublicAgents/Dashboard.tsx
index aa157ca19..ab370b870 100644
--- a/src/components/PublicAgents/Dashboard.tsx
+++ b/src/components/PublicAgents/Dashboard.tsx
@@ -31,7 +31,8 @@ import {
 } from 'react-icons/pi';
 import type React from 'react';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { animate } from 'motion';
 
 const Button: React.FC<
   React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>
@@ -221,6 +222,64 @@ const Dropdown: React.FC<DropdownProps> = ({ agent }) => {
   );
 };
 
+const Typewriter: React.FC<{ text: string }> = ({ text }) => {
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const ref = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (hasLoaded) return;
+
+    setTimeout(() => setHasLoaded(true), 2000);
+  }, [hasLoaded]);
+
+  useEffect(() => {
+    if (!ref.current || !text || !hasLoaded) return;
+
+    const nodes = Array.from(ref.current.children) as HTMLElement[];
+    nodes.forEach((char, i) => {
+      animate(char, { opacity: [0, 1] }, { delay: i * 0.009, duration: 0.2 });
+    });
+  }, [text, hasLoaded]);
+
+  const splitGraphemes = (text: string): string[] => {
+    if ('Segmenter' in Intl) {
+      const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+      return Array.from(segmenter.segment(text), (s) => s.segment);
+    }
+    return text.split('');
+  };
+
+  if (!hasLoaded)
+    return (
+      <div className="ml-6 mt-8 flex h-4 w-10 items-center justify-center">
+        <div className="flex space-x-4">
+          <div className="[animation-delay:-0.3s]' h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
+          <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8 [animation-delay:-0.15s]" />
+          <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
+        </div>
+      </div>
+    );
+
+  return (
+    <p
+      className="whitespace-pre-wrap font-medium leading-16 text-neutral-12"
+      ref={ref}
+    >
+      {splitGraphemes(text).map((char, i) => (
+        <span
+          key={`${i}: ${char}`}
+          style={{
+            opacity: 0,
+            display: 'inline-block',
+          }}
+        >
+          {char === ' ' ? '\u00A0' : char}
+        </span>
+      ))}
+    </p>
+  );
+};
+
 type ContentProps = {
   agent: PublicAgent;
 };
@@ -281,15 +340,13 @@ const Content: React.FC<ContentProps> = ({ agent }) => {
                 className="rounded-4"
               />
               <div className="flex flex-col gap-16">
-                <p className="font-medium leading-16 text-neutral-12">
-                  {greeting}
-                </p>
-                <div className="flex items-center gap-12">
+                <Typewriter text={greeting} />
+                {/* <div className="flex items-center gap-12">
                   <PiArrowClockwiseBold className="size-16" />
                   <PiCopyBold className="size-16" />
                   <PiThumbsUpBold className="size-16" />
                   <PiThumbsDownBold className="size-16" />
-                </div>
+                </div> */}
               </div>
             </div>
           </div>

From 15eba8ae8b80bd32a07867b939461924ee31cc33 Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Tue, 29 Apr 2025 18:11:30 -0300
Subject: [PATCH 07/27] chore: split components

---
 src/components/PublicAgents/AsideProfile.tsx  |  62 +++
 .../PublicAgents/Content/ChatBox.tsx          |  50 ++
 .../PublicAgents/Content/Dropdown.tsx         |  71 +++
 src/components/PublicAgents/Content/Tabs.tsx  |  51 ++
 .../PublicAgents/Content/Typewriter.tsx       |  60 +++
 src/components/PublicAgents/Content/index.tsx |  62 +++
 src/components/PublicAgents/Dashboard.tsx     | 451 +-----------------
 src/components/PublicAgents/Sidebar.tsx       |  86 ++++
 src/components/PublicAgents/ui/Button.tsx     |  33 ++
 9 files changed, 479 insertions(+), 447 deletions(-)
 create mode 100644 src/components/PublicAgents/AsideProfile.tsx
 create mode 100644 src/components/PublicAgents/Content/ChatBox.tsx
 create mode 100644 src/components/PublicAgents/Content/Dropdown.tsx
 create mode 100644 src/components/PublicAgents/Content/Tabs.tsx
 create mode 100644 src/components/PublicAgents/Content/Typewriter.tsx
 create mode 100644 src/components/PublicAgents/Content/index.tsx
 create mode 100644 src/components/PublicAgents/Sidebar.tsx
 create mode 100644 src/components/PublicAgents/ui/Button.tsx

diff --git a/src/components/PublicAgents/AsideProfile.tsx b/src/components/PublicAgents/AsideProfile.tsx
new file mode 100644
index 000000000..4211bd2aa
--- /dev/null
+++ b/src/components/PublicAgents/AsideProfile.tsx
@@ -0,0 +1,62 @@
+import {
+  PiChatCircleDotsBold,
+  PiPhoneBold,
+  PiStarFourBold,
+  PiVideoCameraBold,
+} from 'react-icons/pi';
+import type { PublicAgent } from './config';
+import { Button } from './ui/Button';
+
+type AsideProfileProps = {
+  agent: PublicAgent;
+};
+
+export const AsideProfile: React.FC<AsideProfileProps> = ({ agent }) => {
+  const { name, about, image, category } = agent;
+
+  return (
+    <aside className="p-12 pl-0">
+      <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
+        <div className="flex h-60 items-center justify-between border-b border-neutral-6 px-12">
+          <div className="flex items-center gap-8 font-medium text-neutral-12">
+            <PiStarFourBold className="size-16" />
+            Influencer
+          </div>
+          <div className="flex h-24 items-center justify-center rounded-full border border-neutral-7 px-8 text-12 text-neutral-11">
+            {category}
+          </div>
+        </div>
+        <div className="flex flex-col gap-16 p-12">
+          <img
+            src={image}
+            width={284}
+            height={284}
+            alt={name}
+            className="aspect-1 rounded-16 object-cover"
+          />
+          <p className="text-center text-18 font-medium text-neutral-12">
+            {name}
+          </p>
+          <div className="flex items-center gap-12 *:flex-1">
+            <Button className="pointer-events-none h-[61px] select-none flex-col items-center justify-center gap-4 bg-gray-dark-3">
+              <PiChatCircleDotsBold className="size-16" />
+              Chat
+            </Button>
+            <Button className="pointer-events-none h-[61px] select-none flex-col items-center justify-center gap-4 border border-neutral-6 bg-transparent">
+              <PiPhoneBold className="size-16" />
+              Call
+            </Button>
+            <Button className="pointer-events-none h-[61px] select-none flex-col items-center justify-center gap-4 border border-neutral-6 bg-transparent">
+              <PiVideoCameraBold className="size-16" />
+              Video
+            </Button>
+          </div>
+          <div className="flex flex-col gap-8">
+            <p>About me</p>
+            <p className="leading-20 text-neutral-12">{about}</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+};
diff --git a/src/components/PublicAgents/Content/ChatBox.tsx b/src/components/PublicAgents/Content/ChatBox.tsx
new file mode 100644
index 000000000..19bbd24d8
--- /dev/null
+++ b/src/components/PublicAgents/Content/ChatBox.tsx
@@ -0,0 +1,50 @@
+import type React from 'react';
+import { Button, IconButton } from '../ui/Button';
+import {
+  PiArrowUpBold,
+  PiImageBold,
+  PiMagicWandBold,
+  PiPlusBold,
+  PiSlidersHorizontalBold,
+  PiVideoBold,
+} from 'react-icons/pi';
+
+export const ChatBox: React.FC = () => {
+  return (
+    <div className="p-12">
+      <div className="overflow-clip rounded-12 border border-neutral-6 bg-gray-dark-4">
+        <textarea
+          placeholder="Message..."
+          className="w-full resize-none bg-transparent p-16 text-neutral-12 outline-none placeholder:text-neutral-8"
+          // biome-ignore lint/a11y/noAutofocus: static page
+          autoFocus
+        />
+        <div className="flex items-center justify-between p-12">
+          <div className="flex items-center gap-8">
+            <IconButton>
+              <PiPlusBold className="size-16" />
+            </IconButton>
+            <IconButton>
+              <PiSlidersHorizontalBold className="size-16" />
+            </IconButton>
+            <IconButton>
+              <PiMagicWandBold className="size-16" />
+            </IconButton>
+          </div>
+          <IconButton className="border-none bg-neutral-1 hover:bg-black">
+            <PiArrowUpBold />
+          </IconButton>
+        </div>
+        <div className="flex items-center gap-8 bg-gray-dark-3 p-12">
+          <Button className="border border-neutral-6">
+            <PiImageBold className="size-16 text-[#75C7F0]" /> Create image
+          </Button>
+          <Button className="border border-neutral-6">
+            <PiVideoBold className="size-16 text-[#FF949D]" />
+            Create video
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/PublicAgents/Content/Dropdown.tsx b/src/components/PublicAgents/Content/Dropdown.tsx
new file mode 100644
index 000000000..1ea72dd89
--- /dev/null
+++ b/src/components/PublicAgents/Content/Dropdown.tsx
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { publicAgents, type PublicAgent } from '../config';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { PiCaretDownBold, PiCheckBold } from 'react-icons/pi';
+import { cn } from '@utils/cn';
+
+type DropdownProps = {
+  agent: PublicAgent;
+};
+
+export const Dropdown: React.FC<DropdownProps> = ({ agent }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { image, name } = agent;
+
+  return (
+    <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenu.Trigger className="flex h-36 select-none items-center gap-8 rounded-12 bg-gray-dark-3 px-8 font-medium text-neutral-12 outline-none hover:bg-gray-dark-4">
+        <img
+          src={image}
+          width={16}
+          height={16}
+          alt={name}
+          className="rounded-4"
+        />
+        {name}
+        <PiCaretDownBold
+          className={cn('size-16 transition-all', {
+            'rotate-180': isOpen,
+          })}
+        />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          sideOffset={4}
+          align="start"
+          className="rounded-12  border border-neutral-6 bg-gray-dark-4 p-4 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-[.98]"
+        >
+          {publicAgents.map((p) => {
+            const isSelected = p.id === agent.id;
+            return (
+              <DropdownMenu.Item key={p.id} className="outline-none">
+                <a
+                  href={String(p.id)}
+                  className={cn(
+                    'flex h-32 cursor-pointer items-center justify-between gap-24 rounded-8 px-8 font-medium outline-none hover:bg-gray-dark-3',
+                    {
+                      'text-neutral-12': isSelected,
+                    },
+                  )}
+                >
+                  <div className="flex items-center gap-8">
+                    <img
+                      src={p.image}
+                      width={16}
+                      height={16}
+                      alt={p.name}
+                      className="rounded-4"
+                    />
+                    {p.name}
+                  </div>
+                  {isSelected && <PiCheckBold className="size-16" />}
+                </a>
+              </DropdownMenu.Item>
+            );
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};
diff --git a/src/components/PublicAgents/Content/Tabs.tsx b/src/components/PublicAgents/Content/Tabs.tsx
new file mode 100644
index 000000000..0d83e0154
--- /dev/null
+++ b/src/components/PublicAgents/Content/Tabs.tsx
@@ -0,0 +1,51 @@
+import { cn } from '@utils/cn';
+import {
+  PiChartBarBold,
+  PiChatCircleDotsBold,
+  PiNoteBold,
+  PiReceiptBold,
+  PiSlideshowBold,
+} from 'react-icons/pi';
+
+const TabItem: React.FC<
+  React.PropsWithChildren & React.HTMLAttributes<HTMLButtonElement>
+> = ({ children, ...props }) => {
+  return (
+    <button
+      {...props}
+      className={cn(
+        '-mb-[1px] flex h-42 cursor-pointer items-center gap-4 border-b-2 border-transparent px-8 font-medium',
+        props.className,
+      )}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const Tabs: React.FC = () => {
+  return (
+    <div className="flex items-center gap-12 border-b border-neutral-6 px-12">
+      <TabItem className="border-neutral-12 text-neutral-12">
+        <PiChatCircleDotsBold className="size-16" />
+        Chat
+      </TabItem>
+      <TabItem>
+        <PiNoteBold className="size-16" />
+        Content
+      </TabItem>
+      <TabItem>
+        <PiSlideshowBold className="size-16" />
+        Gallery
+      </TabItem>
+      <TabItem>
+        <PiChartBarBold className="size-16" />
+        Analytics
+      </TabItem>
+      <TabItem>
+        <PiReceiptBold className="size-16" />
+        Services
+      </TabItem>
+    </div>
+  );
+};
diff --git a/src/components/PublicAgents/Content/Typewriter.tsx b/src/components/PublicAgents/Content/Typewriter.tsx
new file mode 100644
index 000000000..d84a6a061
--- /dev/null
+++ b/src/components/PublicAgents/Content/Typewriter.tsx
@@ -0,0 +1,60 @@
+import { animate } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
+
+export const Typewriter: React.FC<{ text: string }> = ({ text }) => {
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const ref = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    if (hasLoaded) return;
+
+    setTimeout(() => setHasLoaded(true), 2000);
+  }, [hasLoaded]);
+
+  useEffect(() => {
+    if (!ref.current || !text || !hasLoaded) return;
+
+    const nodes = Array.from(ref.current.children) as HTMLElement[];
+    nodes.forEach((char, i) => {
+      animate(char, { opacity: [0, 1] }, { delay: i * 0.009, duration: 0.2 });
+    });
+  }, [text, hasLoaded]);
+
+  const splitGraphemes = (text: string): string[] => {
+    if ('Segmenter' in Intl) {
+      const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+      return Array.from(segmenter.segment(text), (s) => s.segment);
+    }
+    return text.split('');
+  };
+
+  if (!hasLoaded)
+    return (
+      <div className="ml-6 mt-8 flex h-4 w-10 items-center justify-center">
+        <div className="flex space-x-4">
+          <div className="[animation-delay:-0.3s]' h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
+          <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8 [animation-delay:-0.15s]" />
+          <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
+        </div>
+      </div>
+    );
+
+  return (
+    <p
+      className="whitespace-pre-wrap font-medium leading-16 text-neutral-12"
+      ref={ref}
+    >
+      {splitGraphemes(text).map((char, i) => (
+        <span
+          key={`${i}: ${char}`}
+          style={{
+            opacity: 0,
+            display: 'inline-block',
+          }}
+        >
+          {char === ' ' ? '\u00A0' : char}
+        </span>
+      ))}
+    </p>
+  );
+};
diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
new file mode 100644
index 000000000..2e5d68dbc
--- /dev/null
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -0,0 +1,62 @@
+import {
+  PiGlobeSimpleBold,
+  PiMagnifyingGlassBold,
+  PiSidebarSimpleBold,
+} from 'react-icons/pi';
+import type { PublicAgent } from '../config';
+import { Button, IconButton } from '../ui/Button';
+import { Dropdown } from './Dropdown';
+import { Typewriter } from './Typewriter';
+import type React from 'react';
+import { Tabs } from './Tabs';
+import { ChatBox } from './ChatBox';
+
+type ContentProps = {
+  agent: PublicAgent;
+};
+
+export const Content: React.FC<ContentProps> = ({ agent }) => {
+  const { name, image, greeting } = agent;
+
+  return (
+    <div className="p-12">
+      <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
+        <div className="flex items-center justify-between p-12">
+          <div className="flex items-center gap-8">
+            <Dropdown agent={agent} />
+            <Button className="justify-center border border-neutral-7 text-neutral-12">
+              <PiGlobeSimpleBold className="size-16" />
+              Public
+            </Button>
+          </div>
+          <div className="flex items-center gap-8">
+            <IconButton>
+              <PiMagnifyingGlassBold className="size-16" />
+            </IconButton>
+            <IconButton>
+              <PiSidebarSimpleBold className="size-16" />
+            </IconButton>
+          </div>
+        </div>
+        <Tabs />
+        <div className="flex flex-1 flex-col justify-between">
+          <div className="p-24">
+            <div className="flex items-start gap-12">
+              <img
+                src={image}
+                width={16}
+                height={16}
+                alt={name}
+                className="rounded-4"
+              />
+              <div className="flex flex-col gap-16">
+                <Typewriter text={greeting} />
+              </div>
+            </div>
+          </div>
+          <ChatBox />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/PublicAgents/Dashboard.tsx b/src/components/PublicAgents/Dashboard.tsx
index ab370b870..ba1b814f7 100644
--- a/src/components/PublicAgents/Dashboard.tsx
+++ b/src/components/PublicAgents/Dashboard.tsx
@@ -1,450 +1,7 @@
-import { cn } from '@utils/cn';
-import { publicAgents, type PublicAgent } from './config';
-import {
-  PiArrowClockwiseBold,
-  PiArrowUpBold,
-  PiCaretDownBold,
-  PiChartBarBold,
-  PiChatCircleDotsBold,
-  PiCheckBold,
-  PiCoinsBold,
-  PiCopyBold,
-  PiDotsThreeBold,
-  PiGlobeSimpleBold,
-  PiGridFourBold,
-  PiImageBold,
-  PiMagicWandBold,
-  PiMagnifyingGlassBold,
-  PiNoteBold,
-  PiPhoneBold,
-  PiPlusBold,
-  PiReceiptBold,
-  PiSidebarSimpleBold,
-  PiSlidersHorizontalBold,
-  PiSlideshowBold,
-  PiStarFourBold,
-  PiThumbsDownBold,
-  PiThumbsUpBold,
-  PiUserBold,
-  PiVideoBold,
-  PiVideoCameraBold,
-} from 'react-icons/pi';
-import type React from 'react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { useEffect, useRef, useState } from 'react';
-import { animate } from 'motion';
-
-const Button: React.FC<
-  React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>
-> = ({ children, ...props }) => {
-  return (
-    <button
-      {...props}
-      className={cn(
-        'flex h-36 items-center gap-8 rounded-12 px-8 font-medium transition-colors hover:bg-neutral-2 active:bg-neutral-1',
-        props.className,
-      )}
-    >
-      {children}
-    </button>
-  );
-};
-
-const IconButton: React.FC<
-  React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>
-> = ({ children, ...props }) => {
-  return (
-    <Button
-      {...props}
-      className={cn(
-        'size-36 justify-center border border-neutral-7 px-0 text-neutral-12',
-        props.className,
-      )}
-    >
-      {children}
-    </Button>
-  );
-};
-
-type SidebarProps = {
-  agent: PublicAgent;
-};
-
-const Sidebar: React.FC<SidebarProps> = ({ agent }) => {
-  const { name, image } = agent;
-
-  return (
-    <div className="flex h-dvh flex-col justify-between gap-12 p-12 pr-0">
-      <div className="flex flex-col gap-12">
-        <div className="flex items-center justify-between">
-          <img
-            src="/svg/fleek-logo.svg"
-            width={66}
-            height={25}
-            alt="fleek logo"
-          />
-          <IconButton>
-            <PiSidebarSimpleBold className="size-16" />
-          </IconButton>
-        </div>
-        <div className="flex flex-col gap-8">
-          <Button>
-            <PiPlusBold className="size-16" />
-            Create
-          </Button>
-          <Button>
-            <PiGridFourBold className="size-16" />
-            Explore
-          </Button>
-          <Button>
-            <PiCoinsBold className="size-16" />
-            Earnings
-          </Button>
-          <div className="h-[1px] bg-neutral-6" />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Button className="justify-between">
-            My agents <PiCaretDownBold className="size-16" />
-          </Button>
-          <Button className="justify-between bg-gray-dark-5 text-neutral-12 hover:bg-gray-dark-5 active:bg-gray-dark-5">
-            <div className="flex items-center gap-8">
-              <img
-                src={image}
-                width={16}
-                height={16}
-                alt={name}
-                className="rounded-4"
-              />
-              {name}
-            </div>
-            <PiGlobeSimpleBold className="size-16" />
-          </Button>
-        </div>
-      </div>
-      <div className="overflow-clip rounded-12 border border-neutral-6">
-        <div className="flex items-center justify-between border-b border-neutral-6 bg-gray-dark-3 p-12 text-12">
-          <p>$0.00</p>
-          <p className="text-neutral-12">Buy credits</p>
-        </div>
-        <div className="flex items-center justify-between p-12 font-medium text-neutral-12">
-          <div className="flex items-center gap-8">
-            <div className="flex size-36 items-center justify-center rounded-8 bg-gray-dark-3">
-              <PiUserBold className="size-23 text-neutral-8" />
-            </div>
-            <p>Guest</p>
-          </div>
-          <PiDotsThreeBold className="size-16" />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const TabItem: React.FC<
-  React.PropsWithChildren & React.HTMLAttributes<HTMLButtonElement>
-> = ({ children, ...props }) => {
-  return (
-    <button
-      {...props}
-      className={cn(
-        '-mb-[1px] flex h-42 cursor-pointer items-center gap-4 border-b-2 border-transparent px-8 font-medium',
-        props.className,
-      )}
-    >
-      {children}
-    </button>
-  );
-};
-
-type DropdownProps = {
-  agent: PublicAgent;
-};
-
-const Dropdown: React.FC<DropdownProps> = ({ agent }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const { image, name } = agent;
-
-  return (
-    <DropdownMenu.Root open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenu.Trigger className="flex h-36 select-none items-center gap-8 rounded-12 bg-gray-dark-3 px-8 font-medium text-neutral-12 outline-none hover:bg-gray-dark-4">
-        <img
-          src={image}
-          width={16}
-          height={16}
-          alt={name}
-          className="rounded-4"
-        />
-        {name}
-        <PiCaretDownBold
-          className={cn('size-16 transition-all', {
-            'rotate-180': isOpen,
-          })}
-        />
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          sideOffset={4}
-          align="start"
-          className="rounded-12  border border-neutral-6 bg-gray-dark-4 p-4 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-[.98]"
-        >
-          {publicAgents.map((p) => {
-            const isSelected = p.id === agent.id;
-            return (
-              <DropdownMenu.Item key={p.id} className="outline-none">
-                <a
-                  href={String(p.id)}
-                  className={cn(
-                    'flex h-32 cursor-pointer items-center justify-between gap-24 rounded-8 px-8 font-medium outline-none hover:bg-gray-dark-3',
-                    {
-                      'text-neutral-12': isSelected,
-                    },
-                  )}
-                >
-                  <div className="flex items-center gap-8">
-                    <img
-                      src={p.image}
-                      width={16}
-                      height={16}
-                      alt={p.name}
-                      className="rounded-4"
-                    />
-                    {p.name}
-                  </div>
-                  {isSelected && <PiCheckBold className="size-16" />}
-                </a>
-              </DropdownMenu.Item>
-            );
-          })}
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
-};
-
-const Typewriter: React.FC<{ text: string }> = ({ text }) => {
-  const [hasLoaded, setHasLoaded] = useState(false);
-  const ref = useRef<HTMLParagraphElement>(null);
-
-  useEffect(() => {
-    if (hasLoaded) return;
-
-    setTimeout(() => setHasLoaded(true), 2000);
-  }, [hasLoaded]);
-
-  useEffect(() => {
-    if (!ref.current || !text || !hasLoaded) return;
-
-    const nodes = Array.from(ref.current.children) as HTMLElement[];
-    nodes.forEach((char, i) => {
-      animate(char, { opacity: [0, 1] }, { delay: i * 0.009, duration: 0.2 });
-    });
-  }, [text, hasLoaded]);
-
-  const splitGraphemes = (text: string): string[] => {
-    if ('Segmenter' in Intl) {
-      const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
-      return Array.from(segmenter.segment(text), (s) => s.segment);
-    }
-    return text.split('');
-  };
-
-  if (!hasLoaded)
-    return (
-      <div className="ml-6 mt-8 flex h-4 w-10 items-center justify-center">
-        <div className="flex space-x-4">
-          <div className="[animation-delay:-0.3s]' h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
-          <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8 [animation-delay:-0.15s]" />
-          <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
-        </div>
-      </div>
-    );
-
-  return (
-    <p
-      className="whitespace-pre-wrap font-medium leading-16 text-neutral-12"
-      ref={ref}
-    >
-      {splitGraphemes(text).map((char, i) => (
-        <span
-          key={`${i}: ${char}`}
-          style={{
-            opacity: 0,
-            display: 'inline-block',
-          }}
-        >
-          {char === ' ' ? '\u00A0' : char}
-        </span>
-      ))}
-    </p>
-  );
-};
-
-type ContentProps = {
-  agent: PublicAgent;
-};
-
-const Content: React.FC<ContentProps> = ({ agent }) => {
-  const { name, image, greeting } = agent;
-
-  return (
-    <div className="p-12">
-      <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
-        <div className="flex items-center justify-between p-12">
-          <div className="flex items-center gap-8">
-            <Dropdown agent={agent} />
-            <Button className="justify-center border border-neutral-7 text-neutral-12">
-              <PiGlobeSimpleBold className="size-16" />
-              Public
-            </Button>
-          </div>
-          <div className="flex items-center gap-8">
-            <IconButton>
-              <PiMagnifyingGlassBold className="size-16" />
-            </IconButton>
-            <IconButton>
-              <PiSidebarSimpleBold className="size-16" />
-            </IconButton>
-          </div>
-        </div>
-        <div className="flex items-center gap-12 border-b border-neutral-6 px-12">
-          <TabItem className="border-neutral-12 text-neutral-12">
-            <PiChatCircleDotsBold className="size-16" />
-            Chat
-          </TabItem>
-          <TabItem>
-            <PiNoteBold className="size-16" />
-            Content
-          </TabItem>
-          <TabItem>
-            <PiSlideshowBold className="size-16" />
-            Gallery
-          </TabItem>
-          <TabItem>
-            <PiChartBarBold className="size-16" />
-            Analytics
-          </TabItem>
-          <TabItem>
-            <PiReceiptBold className="size-16" />
-            Services
-          </TabItem>
-        </div>
-        <div className="flex flex-1 flex-col justify-between">
-          <div className="p-24">
-            <div className="flex items-start gap-12">
-              <img
-                src={image}
-                width={16}
-                height={16}
-                alt={name}
-                className="rounded-4"
-              />
-              <div className="flex flex-col gap-16">
-                <Typewriter text={greeting} />
-                {/* <div className="flex items-center gap-12">
-                  <PiArrowClockwiseBold className="size-16" />
-                  <PiCopyBold className="size-16" />
-                  <PiThumbsUpBold className="size-16" />
-                  <PiThumbsDownBold className="size-16" />
-                </div> */}
-              </div>
-            </div>
-          </div>
-          <div className="p-12">
-            <div className="overflow-clip rounded-12 border border-neutral-6 bg-gray-dark-4">
-              <textarea
-                placeholder="Message..."
-                className="w-full resize-none bg-transparent p-16 text-neutral-12 outline-none placeholder:text-neutral-8"
-                // biome-ignore lint/a11y/noAutofocus: static page
-                autoFocus
-              />
-              <div className="flex items-center justify-between p-12">
-                <div className="flex items-center gap-8">
-                  <IconButton>
-                    <PiPlusBold className="size-16" />
-                  </IconButton>
-                  <IconButton>
-                    <PiSlidersHorizontalBold className="size-16" />
-                  </IconButton>
-                  <IconButton>
-                    <PiMagicWandBold className="size-16" />
-                  </IconButton>
-                </div>
-                <IconButton className="border-none bg-neutral-1 hover:bg-black">
-                  <PiArrowUpBold />
-                </IconButton>
-              </div>
-              <div className="flex items-center gap-8 bg-gray-dark-3 p-12">
-                <Button className="border border-neutral-6">
-                  <PiImageBold className="size-16 text-[#75C7F0]" /> Create
-                  image
-                </Button>
-                <Button className="border border-neutral-6">
-                  <PiVideoBold className="size-16 text-[#FF949D]" />
-                  Create video
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-type AsideProfileProps = {
-  agent: PublicAgent;
-};
-
-const AsideProfile: React.FC<AsideProfileProps> = ({ agent }) => {
-  const { name, about, image, category } = agent;
-
-  return (
-    <aside className="p-12 pl-0">
-      <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
-        <div className="flex h-60 items-center justify-between border-b border-neutral-6 px-12">
-          <div className="flex items-center gap-8 font-medium text-neutral-12">
-            <PiStarFourBold className="size-16" />
-            Influencer
-          </div>
-          <div className="flex h-24 items-center justify-center rounded-full border border-neutral-7 px-8 text-12 text-neutral-11">
-            {category}
-          </div>
-        </div>
-        <div className="flex flex-col gap-16 p-12">
-          <img
-            src={image}
-            width={284}
-            height={284}
-            alt={name}
-            className="aspect-1 rounded-16 object-cover"
-          />
-          <p className="text-center text-18 font-medium text-neutral-12">
-            {name}
-          </p>
-          <div className="flex items-center gap-12 *:flex-1">
-            <Button className="pointer-events-none h-[61px] select-none flex-col items-center justify-center gap-4 bg-gray-dark-3">
-              <PiChatCircleDotsBold className="size-16" />
-              Chat
-            </Button>
-            <Button className="pointer-events-none h-[61px] select-none flex-col items-center justify-center gap-4 border border-neutral-6 bg-transparent">
-              <PiPhoneBold className="size-16" />
-              Call
-            </Button>
-            <Button className="pointer-events-none h-[61px] select-none flex-col items-center justify-center gap-4 border border-neutral-6 bg-transparent">
-              <PiVideoCameraBold className="size-16" />
-              Video
-            </Button>
-          </div>
-          <div className="flex flex-col gap-8">
-            <p>About me</p>
-            <p className="leading-20 text-neutral-12">{about}</p>
-          </div>
-        </div>
-      </div>
-    </aside>
-  );
-};
+import { Sidebar } from './Sidebar';
+import { AsideProfile } from './AsideProfile';
+import { Content } from './Content';
+import type { PublicAgent } from './config';
 
 type DashboardProps = {
   agent: PublicAgent;
diff --git a/src/components/PublicAgents/Sidebar.tsx b/src/components/PublicAgents/Sidebar.tsx
new file mode 100644
index 000000000..f41e4fe16
--- /dev/null
+++ b/src/components/PublicAgents/Sidebar.tsx
@@ -0,0 +1,86 @@
+import {
+  PiCaretDownBold,
+  PiCoinsBold,
+  PiDotsThreeBold,
+  PiGlobeSimpleBold,
+  PiGridFourBold,
+  PiPlusBold,
+  PiSidebarSimpleBold,
+  PiUserBold,
+} from 'react-icons/pi';
+import type { PublicAgent } from './config';
+import { Button, IconButton } from './ui/Button';
+
+type SidebarProps = {
+  agent: PublicAgent;
+};
+
+export const Sidebar: React.FC<SidebarProps> = ({ agent }) => {
+  const { name, image } = agent;
+
+  return (
+    <div className="flex h-dvh flex-col justify-between gap-12 p-12 pr-0">
+      <div className="flex flex-col gap-12">
+        <div className="flex items-center justify-between">
+          <img
+            src="/svg/fleek-logo.svg"
+            width={66}
+            height={25}
+            alt="fleek logo"
+          />
+          <IconButton>
+            <PiSidebarSimpleBold className="size-16" />
+          </IconButton>
+        </div>
+        <div className="flex flex-col gap-8">
+          <Button>
+            <PiPlusBold className="size-16" />
+            Create
+          </Button>
+          <Button>
+            <PiGridFourBold className="size-16" />
+            Explore
+          </Button>
+          <Button>
+            <PiCoinsBold className="size-16" />
+            Earnings
+          </Button>
+          <div className="h-[1px] bg-neutral-6" />
+        </div>
+        <div className="flex flex-col gap-8">
+          <Button className="justify-between">
+            My agents <PiCaretDownBold className="size-16" />
+          </Button>
+          <Button className="justify-between bg-gray-dark-5 text-neutral-12 hover:bg-gray-dark-5 active:bg-gray-dark-5">
+            <div className="flex items-center gap-8">
+              <img
+                src={image}
+                width={16}
+                height={16}
+                alt={name}
+                className="rounded-4"
+              />
+              {name}
+            </div>
+            <PiGlobeSimpleBold className="size-16" />
+          </Button>
+        </div>
+      </div>
+      <div className="overflow-clip rounded-12 border border-neutral-6">
+        <div className="flex items-center justify-between border-b border-neutral-6 bg-gray-dark-3 p-12 text-12">
+          <p>$0.00</p>
+          <p className="text-neutral-12">Buy credits</p>
+        </div>
+        <div className="flex items-center justify-between p-12 font-medium text-neutral-12">
+          <div className="flex items-center gap-8">
+            <div className="flex size-36 items-center justify-center rounded-8 bg-gray-dark-3">
+              <PiUserBold className="size-23 text-neutral-8" />
+            </div>
+            <p>Guest</p>
+          </div>
+          <PiDotsThreeBold className="size-16" />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/PublicAgents/ui/Button.tsx b/src/components/PublicAgents/ui/Button.tsx
new file mode 100644
index 000000000..a0f984c00
--- /dev/null
+++ b/src/components/PublicAgents/ui/Button.tsx
@@ -0,0 +1,33 @@
+import { cn } from '@utils/cn';
+
+export const Button: React.FC<
+  React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>
+> = ({ children, ...props }) => {
+  return (
+    <button
+      {...props}
+      className={cn(
+        'flex h-36 items-center gap-8 rounded-12 px-8 font-medium transition-colors hover:bg-neutral-2 active:bg-neutral-1',
+        props.className,
+      )}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const IconButton: React.FC<
+  React.PropsWithChildren & React.ButtonHTMLAttributes<HTMLButtonElement>
+> = ({ children, ...props }) => {
+  return (
+    <Button
+      {...props}
+      className={cn(
+        'size-36 justify-center border border-neutral-7 px-0 text-neutral-12',
+        props.className,
+      )}
+    >
+      {children}
+    </Button>
+  );
+};

From 4bde4d6458f781e94d0f9dc24a45ca1627a1b385 Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Tue, 29 Apr 2025 18:43:01 -0300
Subject: [PATCH 08/27] chore: handle user msg

---
 src/components/PublicAgents/AsideProfile.tsx  |  2 +-
 .../PublicAgents/{ui => }/Button.tsx          |  2 +-
 .../PublicAgents/Content/ChatBox.tsx          | 35 ++++++++++++--
 .../PublicAgents/Content/Loading.tsx          | 13 +++++
 .../PublicAgents/Content/Typewriter.tsx       | 20 ++++----
 src/components/PublicAgents/Content/index.tsx | 48 +++++++++++++++++--
 src/components/PublicAgents/Sidebar.tsx       |  2 +-
 src/components/PublicAgents/sleep.ts          |  3 ++
 8 files changed, 104 insertions(+), 21 deletions(-)
 rename src/components/PublicAgents/{ui => }/Button.tsx (83%)
 create mode 100644 src/components/PublicAgents/Content/Loading.tsx
 create mode 100644 src/components/PublicAgents/sleep.ts

diff --git a/src/components/PublicAgents/AsideProfile.tsx b/src/components/PublicAgents/AsideProfile.tsx
index 4211bd2aa..3329c1056 100644
--- a/src/components/PublicAgents/AsideProfile.tsx
+++ b/src/components/PublicAgents/AsideProfile.tsx
@@ -5,7 +5,7 @@ import {
   PiVideoCameraBold,
 } from 'react-icons/pi';
 import type { PublicAgent } from './config';
-import { Button } from './ui/Button';
+import { Button } from './Button';
 
 type AsideProfileProps = {
   agent: PublicAgent;
diff --git a/src/components/PublicAgents/ui/Button.tsx b/src/components/PublicAgents/Button.tsx
similarity index 83%
rename from src/components/PublicAgents/ui/Button.tsx
rename to src/components/PublicAgents/Button.tsx
index a0f984c00..3fc1f2079 100644
--- a/src/components/PublicAgents/ui/Button.tsx
+++ b/src/components/PublicAgents/Button.tsx
@@ -7,7 +7,7 @@ export const Button: React.FC<
     <button
       {...props}
       className={cn(
-        'flex h-36 items-center gap-8 rounded-12 px-8 font-medium transition-colors hover:bg-neutral-2 active:bg-neutral-1',
+        'flex h-36 items-center gap-8 rounded-12 px-8 font-medium transition-colors hover:bg-gray-dark-2 active:bg-gray-dark-1 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-gray-dark-1',
         props.className,
       )}
     >
diff --git a/src/components/PublicAgents/Content/ChatBox.tsx b/src/components/PublicAgents/Content/ChatBox.tsx
index 19bbd24d8..e4405473e 100644
--- a/src/components/PublicAgents/Content/ChatBox.tsx
+++ b/src/components/PublicAgents/Content/ChatBox.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { Button, IconButton } from '../ui/Button';
+import { Button, IconButton } from '../Button';
 import {
   PiArrowUpBold,
   PiImageBold,
@@ -8,14 +8,37 @@ import {
   PiSlidersHorizontalBold,
   PiVideoBold,
 } from 'react-icons/pi';
+import { useState } from 'react';
+
+type ChatBoxProps = {
+  onMsgSubmit: (msg: string) => void;
+};
+
+export const ChatBox: React.FC<ChatBoxProps> = ({ onMsgSubmit }) => {
+  const [msg, setMsg] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+    setMsg(e.target.value);
+
+  const handleSubmit = () => {
+    onMsgSubmit(msg);
+    setMsg('');
+  };
 
-export const ChatBox: React.FC = () => {
   return (
     <div className="p-12">
       <div className="overflow-clip rounded-12 border border-neutral-6 bg-gray-dark-4">
         <textarea
           placeholder="Message..."
-          className="w-full resize-none bg-transparent p-16 text-neutral-12 outline-none placeholder:text-neutral-8"
+          className="w-full resize-none bg-transparent p-16 text-neutral-12 outline-none [field-sizing:content] placeholder:text-neutral-8"
+          value={msg}
+          onChange={handleChange}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleSubmit();
+            }
+          }}
           // biome-ignore lint/a11y/noAutofocus: static page
           autoFocus
         />
@@ -31,7 +54,11 @@ export const ChatBox: React.FC = () => {
               <PiMagicWandBold className="size-16" />
             </IconButton>
           </div>
-          <IconButton className="border-none bg-neutral-1 hover:bg-black">
+          <IconButton
+            className="border-none bg-neutral-1 hover:bg-black"
+            onClick={handleSubmit}
+            disabled={!msg}
+          >
             <PiArrowUpBold />
           </IconButton>
         </div>
diff --git a/src/components/PublicAgents/Content/Loading.tsx b/src/components/PublicAgents/Content/Loading.tsx
new file mode 100644
index 000000000..9dbc1a328
--- /dev/null
+++ b/src/components/PublicAgents/Content/Loading.tsx
@@ -0,0 +1,13 @@
+import type React from 'react';
+
+export const Loading: React.FC = () => {
+  return (
+    <div className="ml-6 mt-8 flex h-4 w-10 items-center justify-center">
+      <div className="flex space-x-4">
+        <div className="[animation-delay:-0.3s]' h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
+        <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8 [animation-delay:-0.15s]" />
+        <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/PublicAgents/Content/Typewriter.tsx b/src/components/PublicAgents/Content/Typewriter.tsx
index d84a6a061..6ae429f0b 100644
--- a/src/components/PublicAgents/Content/Typewriter.tsx
+++ b/src/components/PublicAgents/Content/Typewriter.tsx
@@ -1,5 +1,7 @@
 import { animate } from 'framer-motion';
 import { useEffect, useRef, useState } from 'react';
+import { Loading } from './Loading';
+import { sleep } from '../sleep';
 
 export const Typewriter: React.FC<{ text: string }> = ({ text }) => {
   const [hasLoaded, setHasLoaded] = useState(false);
@@ -8,7 +10,12 @@ export const Typewriter: React.FC<{ text: string }> = ({ text }) => {
   useEffect(() => {
     if (hasLoaded) return;
 
-    setTimeout(() => setHasLoaded(true), 2000);
+    const startTyping = async () => {
+      await sleep(2000);
+      setHasLoaded(true);
+    };
+
+    startTyping();
   }, [hasLoaded]);
 
   useEffect(() => {
@@ -28,16 +35,7 @@ export const Typewriter: React.FC<{ text: string }> = ({ text }) => {
     return text.split('');
   };
 
-  if (!hasLoaded)
-    return (
-      <div className="ml-6 mt-8 flex h-4 w-10 items-center justify-center">
-        <div className="flex space-x-4">
-          <div className="[animation-delay:-0.3s]' h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
-          <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8 [animation-delay:-0.15s]" />
-          <div className="h-4 w-4 animate-bounce rounded-full bg-gray-dark-8" />
-        </div>
-      </div>
-    );
+  if (!hasLoaded) return <Loading />;
 
   return (
     <p
diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index 2e5d68dbc..7917b797b 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -4,20 +4,43 @@ import {
   PiSidebarSimpleBold,
 } from 'react-icons/pi';
 import type { PublicAgent } from '../config';
-import { Button, IconButton } from '../ui/Button';
+import { Button, IconButton } from '../Button';
 import { Dropdown } from './Dropdown';
 import { Typewriter } from './Typewriter';
 import type React from 'react';
 import { Tabs } from './Tabs';
 import { ChatBox } from './ChatBox';
+import { useEffect, useState } from 'react';
+import { Loading } from './Loading';
+import { sleep } from '../sleep';
 
 type ContentProps = {
   agent: PublicAgent;
 };
 
 export const Content: React.FC<ContentProps> = ({ agent }) => {
+  const [userMsg, setUserMsg] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
   const { name, image, greeting } = agent;
 
+  const onMsgSubmit = (msg: string) => {
+    setUserMsg(msg);
+    setIsLoading(true);
+  };
+
+  useEffect(() => {
+    if (!isLoading) return;
+
+    const onMsgReceived = async () => {
+      await sleep(2000);
+      setIsOpen(true);
+    };
+
+    onMsgReceived();
+  }, [isLoading]);
+
   return (
     <div className="p-12">
       <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
@@ -40,7 +63,7 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
         </div>
         <Tabs />
         <div className="flex flex-1 flex-col justify-between">
-          <div className="p-24">
+          <div className="flex flex-col gap-24 p-24">
             <div className="flex items-start gap-12">
               <img
                 src={image}
@@ -53,8 +76,27 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
                 <Typewriter text={greeting} />
               </div>
             </div>
+            {userMsg && (
+              <div className="ml-auto flex items-start gap-12 rounded-16 bg-gray-dark-4 p-12 text-right font-medium leading-14 text-neutral-12">
+                {userMsg}
+              </div>
+            )}
+            {isLoading && (
+              <div className="flex items-start gap-12">
+                <img
+                  src={image}
+                  width={16}
+                  height={16}
+                  alt={name}
+                  className="rounded-4"
+                />
+                <div className="flex flex-col gap-16">
+                  <Loading />
+                </div>
+              </div>
+            )}
           </div>
-          <ChatBox />
+          <ChatBox onMsgSubmit={onMsgSubmit} />
         </div>
       </div>
     </div>
diff --git a/src/components/PublicAgents/Sidebar.tsx b/src/components/PublicAgents/Sidebar.tsx
index f41e4fe16..f6505f525 100644
--- a/src/components/PublicAgents/Sidebar.tsx
+++ b/src/components/PublicAgents/Sidebar.tsx
@@ -9,7 +9,7 @@ import {
   PiUserBold,
 } from 'react-icons/pi';
 import type { PublicAgent } from './config';
-import { Button, IconButton } from './ui/Button';
+import { Button, IconButton } from './Button';
 
 type SidebarProps = {
   agent: PublicAgent;
diff --git a/src/components/PublicAgents/sleep.ts b/src/components/PublicAgents/sleep.ts
new file mode 100644
index 000000000..f48ef32f6
--- /dev/null
+++ b/src/components/PublicAgents/sleep.ts
@@ -0,0 +1,3 @@
+export const sleep = async (timeInMs?: number) => {
+  await new Promise((res) => setTimeout(res, timeInMs));
+};

From 47402d37742f30d2d63ec30df0357eb582663809 Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Wed, 30 Apr 2025 12:07:51 -0300
Subject: [PATCH 09/27] feat: sub modal

---
 .../PublicAgents/Content/ChatBox.tsx          | 41 ++++++++++--
 .../PublicAgents/Content/SubscribeModal.tsx   | 66 +++++++++++++++++++
 src/components/PublicAgents/Content/index.tsx | 30 +++++++--
 3 files changed, 125 insertions(+), 12 deletions(-)
 create mode 100644 src/components/PublicAgents/Content/SubscribeModal.tsx

diff --git a/src/components/PublicAgents/Content/ChatBox.tsx b/src/components/PublicAgents/Content/ChatBox.tsx
index e4405473e..e7ec3307d 100644
--- a/src/components/PublicAgents/Content/ChatBox.tsx
+++ b/src/components/PublicAgents/Content/ChatBox.tsx
@@ -2,6 +2,7 @@ import type React from 'react';
 import { Button, IconButton } from '../Button';
 import {
   PiArrowUpBold,
+  PiCircleNotchBold,
   PiImageBold,
   PiMagicWandBold,
   PiPlusBold,
@@ -11,10 +12,18 @@ import {
 import { useState } from 'react';
 
 type ChatBoxProps = {
+  isLoading: boolean;
+  hasClosed: boolean;
   onMsgSubmit: (msg: string) => void;
+  openModal: () => void;
 };
 
-export const ChatBox: React.FC<ChatBoxProps> = ({ onMsgSubmit }) => {
+export const ChatBox: React.FC<ChatBoxProps> = ({
+  isLoading,
+  hasClosed,
+  onMsgSubmit,
+  openModal,
+}) => {
   const [msg, setMsg] = useState('');
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
@@ -26,8 +35,23 @@ export const ChatBox: React.FC<ChatBoxProps> = ({ onMsgSubmit }) => {
   };
 
   return (
-    <div className="p-12">
-      <div className="overflow-clip rounded-12 border border-neutral-6 bg-gray-dark-4">
+    <div className="flex flex-col gap-12 p-12">
+      {hasClosed && (
+        <div className="flex items-center justify-between rounded-16 border border-neutral-6 bg-gray-dark-4 p-12 text-neutral-12">
+          Kick off your 7-day free trial on the Fan Plan and keep the convo
+          going!{' '}
+          <Button
+            className="bg-neutral-12 text-gray-dark-1 hover:bg-white active:bg-neutral-12"
+            onClick={openModal}
+          >
+            Start 7-day free trial
+          </Button>
+        </div>
+      )}
+      <div className="relative overflow-clip rounded-12 border border-neutral-6 bg-gray-dark-4">
+        {hasClosed && (
+          <div className="absolute inset-0 z-10 cursor-not-allowed bg-gray-dark-3/50" />
+        )}
         <textarea
           placeholder="Message..."
           className="w-full resize-none bg-transparent p-16 text-neutral-12 outline-none [field-sizing:content] placeholder:text-neutral-8"
@@ -36,6 +60,9 @@ export const ChatBox: React.FC<ChatBoxProps> = ({ onMsgSubmit }) => {
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
               e.preventDefault();
+
+              if (isLoading) return;
+
               handleSubmit();
             }
           }}
@@ -57,9 +84,13 @@ export const ChatBox: React.FC<ChatBoxProps> = ({ onMsgSubmit }) => {
           <IconButton
             className="border-none bg-neutral-1 hover:bg-black"
             onClick={handleSubmit}
-            disabled={!msg}
+            disabled={!msg || isLoading}
           >
-            <PiArrowUpBold />
+            {isLoading ? (
+              <PiCircleNotchBold className="size-16 animate-spin" />
+            ) : (
+              <PiArrowUpBold className="size-16" />
+            )}
           </IconButton>
         </div>
         <div className="flex items-center gap-8 bg-gray-dark-3 p-12">
diff --git a/src/components/PublicAgents/Content/SubscribeModal.tsx b/src/components/PublicAgents/Content/SubscribeModal.tsx
new file mode 100644
index 000000000..ff2ddfa85
--- /dev/null
+++ b/src/components/PublicAgents/Content/SubscribeModal.tsx
@@ -0,0 +1,66 @@
+import { Modal } from '@components/Modal/Modal';
+import type React from 'react';
+import type { PublicAgent } from '../config';
+import { Button } from '../Button';
+import { PiCoinsBold, PiCreditCardBold } from 'react-icons/pi';
+
+type SubscribeModalProps = {
+  isOpen: boolean;
+  agent: PublicAgent;
+  closeModal: () => void;
+};
+
+export const SubscribeModal: React.FC<SubscribeModalProps> = ({
+  isOpen,
+  agent,
+  closeModal,
+}) => {
+  const { name, image } = agent;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      closeModal={closeModal}
+      modalContainerClassName="w-[341px] p-0 rounded-24"
+    >
+      <div className="flex w-full flex-col overflow-clip rounded-t-23">
+        <div className="bg-gradient-to-b from-[#132D21] to-gray-dark-1 px-12 py-24 text-center">
+          <p className="text-16 text-[#3DD68C]">7-day free trial</p>
+        </div>
+        <div className="flex flex-col items-center gap-24 p-24">
+          <div className="flex gap-10 pl-[90px]">
+            <img
+              src={image}
+              width={64}
+              height={64}
+              alt={name}
+              className="rounded-16"
+            />
+            <div className="flex h-32 items-center rounded-8 bg-gray-dark-3 px-8 text-neutral-12">
+              I'm waiting!
+            </div>
+          </div>
+          <div className="flex flex-col items-center gap-12 text-center">
+            <p className="text-28 font-medium leading-28 text-neutral-12">
+              $10 / month
+            </p>
+            <p className="text-balance">
+              Kick off your 7-day free trial on the Fan Plan and keep the convo
+              going!
+            </p>
+          </div>
+          <div className="flex w-full flex-col gap-12">
+            <Button className="justify-center bg-neutral-12 text-gray-dark-1 hover:bg-white active:bg-neutral-12">
+              <PiCreditCardBold className="size-16" />
+              Pay with credit card
+            </Button>
+            <Button className="justify-center bg-gray-dark-3 hover:bg-gray-dark-4">
+              <PiCoinsBold className="size-16" />
+              Pay with crypto
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index 7917b797b..942126b64 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -13,6 +13,7 @@ import { ChatBox } from './ChatBox';
 import { useEffect, useState } from 'react';
 import { Loading } from './Loading';
 import { sleep } from '../sleep';
+import { SubscribeModal } from './SubscribeModal';
 
 type ContentProps = {
   agent: PublicAgent;
@@ -22,14 +23,10 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
   const [userMsg, setUserMsg] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
+  const [hasClosed, setHasClosed] = useState(false);
 
   const { name, image, greeting } = agent;
 
-  const onMsgSubmit = (msg: string) => {
-    setUserMsg(msg);
-    setIsLoading(true);
-  };
-
   useEffect(() => {
     if (!isLoading) return;
 
@@ -41,8 +38,22 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
     onMsgReceived();
   }, [isLoading]);
 
+  const onMsgSubmit = (msg: string) => {
+    setUserMsg(msg);
+    setIsLoading(true);
+  };
+
+  const openModal = () => setIsOpen(true);
+
+  const closeModal = () => {
+    setIsOpen(false);
+    setIsLoading(false);
+    setHasClosed(true);
+  };
+
   return (
     <div className="p-12">
+      <SubscribeModal isOpen={isOpen} closeModal={closeModal} agent={agent} />
       <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
         <div className="flex items-center justify-between p-12">
           <div className="flex items-center gap-8">
@@ -81,7 +92,7 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
                 {userMsg}
               </div>
             )}
-            {isLoading && (
+            {isLoading && !hasClosed && (
               <div className="flex items-start gap-12">
                 <img
                   src={image}
@@ -96,7 +107,12 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
               </div>
             )}
           </div>
-          <ChatBox onMsgSubmit={onMsgSubmit} />
+          <ChatBox
+            isLoading={isLoading}
+            hasClosed={hasClosed}
+            onMsgSubmit={onMsgSubmit}
+            openModal={openModal}
+          />
         </div>
       </div>
     </div>

From fe8b55c8156c45e6b319a6620139519eb07584b6 Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Wed, 30 Apr 2025 12:21:36 -0300
Subject: [PATCH 10/27] chore: link landing page to preview

---
 src/components/LandingPage/Templates.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/LandingPage/Templates.tsx b/src/components/LandingPage/Templates.tsx
index d0f602262..8dc5b783e 100644
--- a/src/components/LandingPage/Templates.tsx
+++ b/src/components/LandingPage/Templates.tsx
@@ -172,14 +172,14 @@ export const TemplateCard = ({ template }: { template: PublicAgent }) => {
             </div>
           ))}
         </div>
-        <button
-          type="button"
-          className="pointer-events-none flex w-full select-none items-center justify-center gap-6 rounded-8 bg-white p-8 font-medium text-black"
+        <a
+          href={`preview/${template.id}`}
+          className="flex w-full select-none items-center justify-center gap-6 rounded-8 bg-white p-8 font-medium text-black"
         >
           <IoChatbubbleEllipsesOutline className="shrink-0" />
-          <span className="sm:hidden"> Coming soon</span>
-          <span className="hidden sm:inline"> Chat coming soon</span>
-        </button>
+          <span className="sm:hidden"> Chat with {template.name}</span>
+          <span className="hidden sm:inline"> Chat with {template.name}</span>
+        </a>
       </div>
     </div>
   );

From 284f11afd724881a1078181a1cd1ff9c2f49f7aa Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Wed, 30 Apr 2025 16:48:25 -0300
Subject: [PATCH 11/27] feat: add preview mode tooltip

---
 .../PublicAgents/Content/ChatBox.tsx          | 43 ++++++++++++-------
 src/components/PublicAgents/Content/Tabs.tsx  | 19 +++++---
 src/components/PublicAgents/Content/index.tsx | 11 +----
 src/components/PublicAgents/Tooltip.tsx       | 38 ++++++++++++++++
 4 files changed, 81 insertions(+), 30 deletions(-)
 create mode 100644 src/components/PublicAgents/Tooltip.tsx

diff --git a/src/components/PublicAgents/Content/ChatBox.tsx b/src/components/PublicAgents/Content/ChatBox.tsx
index e7ec3307d..34211af5c 100644
--- a/src/components/PublicAgents/Content/ChatBox.tsx
+++ b/src/components/PublicAgents/Content/ChatBox.tsx
@@ -10,6 +10,7 @@ import {
   PiVideoBold,
 } from 'react-icons/pi';
 import { useState } from 'react';
+import { PreviewModeTooltip } from '../Tooltip';
 
 type ChatBoxProps = {
   isLoading: boolean;
@@ -71,15 +72,21 @@ export const ChatBox: React.FC<ChatBoxProps> = ({
         />
         <div className="flex items-center justify-between p-12">
           <div className="flex items-center gap-8">
-            <IconButton>
-              <PiPlusBold className="size-16" />
-            </IconButton>
-            <IconButton>
-              <PiSlidersHorizontalBold className="size-16" />
-            </IconButton>
-            <IconButton>
-              <PiMagicWandBold className="size-16" />
-            </IconButton>
+            <PreviewModeTooltip align="start" className="-top-34">
+              <IconButton className="pointer-events-none select-none">
+                <PiPlusBold className="size-16" />
+              </IconButton>
+            </PreviewModeTooltip>
+            <PreviewModeTooltip align="start" className="-top-34">
+              <IconButton className="pointer-events-none select-none">
+                <PiSlidersHorizontalBold className="size-16" />
+              </IconButton>
+            </PreviewModeTooltip>
+            <PreviewModeTooltip align="start" className="-top-34">
+              <IconButton className="pointer-events-none select-none">
+                <PiMagicWandBold className="size-16" />
+              </IconButton>
+            </PreviewModeTooltip>
           </div>
           <IconButton
             className="border-none bg-neutral-1 hover:bg-black"
@@ -94,13 +101,17 @@ export const ChatBox: React.FC<ChatBoxProps> = ({
           </IconButton>
         </div>
         <div className="flex items-center gap-8 bg-gray-dark-3 p-12">
-          <Button className="border border-neutral-6">
-            <PiImageBold className="size-16 text-[#75C7F0]" /> Create image
-          </Button>
-          <Button className="border border-neutral-6">
-            <PiVideoBold className="size-16 text-[#FF949D]" />
-            Create video
-          </Button>
+          <PreviewModeTooltip align="start" className="-top-34">
+            <Button className="pointer-events-none select-none border border-neutral-6">
+              <PiImageBold className="size-16 text-[#75C7F0]" /> Create image
+            </Button>
+          </PreviewModeTooltip>
+          <PreviewModeTooltip align="start" className="-top-34">
+            <Button className="pointer-events-none select-none border border-neutral-6">
+              <PiVideoBold className="size-16 text-[#FF949D]" />
+              Create video
+            </Button>
+          </PreviewModeTooltip>
         </div>
       </div>
     </div>
diff --git a/src/components/PublicAgents/Content/Tabs.tsx b/src/components/PublicAgents/Content/Tabs.tsx
index 0d83e0154..b31a1f061 100644
--- a/src/components/PublicAgents/Content/Tabs.tsx
+++ b/src/components/PublicAgents/Content/Tabs.tsx
@@ -6,27 +6,36 @@ import {
   PiReceiptBold,
   PiSlideshowBold,
 } from 'react-icons/pi';
+import { PreviewModeTooltip } from '../Tooltip';
 
 const TabItem: React.FC<
-  React.PropsWithChildren & React.HTMLAttributes<HTMLButtonElement>
-> = ({ children, ...props }) => {
-  return (
+  React.PropsWithChildren &
+    React.HTMLAttributes<HTMLButtonElement> & {
+      hideTooltip?: boolean;
+    }
+> = ({ children, hideTooltip, ...props }) => {
+  const button = (
     <button
       {...props}
       className={cn(
-        '-mb-[1px] flex h-42 cursor-pointer items-center gap-4 border-b-2 border-transparent px-8 font-medium',
+        '-mb-[1px] flex h-42 cursor-pointer select-none items-center gap-4 border-b-2 border-transparent px-8 font-medium',
+        { 'cursor-not-allowed text-gray-dark-10': !hideTooltip },
         props.className,
       )}
     >
       {children}
     </button>
   );
+
+  if (hideTooltip) return button;
+
+  return <PreviewModeTooltip>{button}</PreviewModeTooltip>;
 };
 
 export const Tabs: React.FC = () => {
   return (
     <div className="flex items-center gap-12 border-b border-neutral-6 px-12">
-      <TabItem className="border-neutral-12 text-neutral-12">
+      <TabItem className="border-neutral-12 text-neutral-12" hideTooltip>
         <PiChatCircleDotsBold className="size-16" />
         Chat
       </TabItem>
diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index 942126b64..c0a1bf80d 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -1,8 +1,4 @@
-import {
-  PiGlobeSimpleBold,
-  PiMagnifyingGlassBold,
-  PiSidebarSimpleBold,
-} from 'react-icons/pi';
+import { PiGlobeSimpleBold, PiSidebarSimpleBold } from 'react-icons/pi';
 import type { PublicAgent } from '../config';
 import { Button, IconButton } from '../Button';
 import { Dropdown } from './Dropdown';
@@ -58,15 +54,12 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
         <div className="flex items-center justify-between p-12">
           <div className="flex items-center gap-8">
             <Dropdown agent={agent} />
-            <Button className="justify-center border border-neutral-7 text-neutral-12">
+            <Button className="pointer-events-none select-none justify-center border border-neutral-7 text-neutral-12">
               <PiGlobeSimpleBold className="size-16" />
               Public
             </Button>
           </div>
           <div className="flex items-center gap-8">
-            <IconButton>
-              <PiMagnifyingGlassBold className="size-16" />
-            </IconButton>
             <IconButton>
               <PiSidebarSimpleBold className="size-16" />
             </IconButton>
diff --git a/src/components/PublicAgents/Tooltip.tsx b/src/components/PublicAgents/Tooltip.tsx
new file mode 100644
index 000000000..b485d4df9
--- /dev/null
+++ b/src/components/PublicAgents/Tooltip.tsx
@@ -0,0 +1,38 @@
+import { cn } from '@utils/cn';
+import type React from 'react';
+
+type TooltipProps = React.PropsWithChildren & {
+  content: React.ReactNode;
+  className?: string;
+  align?: 'center' | 'start';
+};
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  children,
+  content,
+  className,
+  align = 'center',
+}) => {
+  return (
+    <div className="group relative">
+      <div>{children}</div>
+      <div
+        className={cn(
+          'absolute -top-30 hidden cursor-default whitespace-nowrap rounded-8 border border-neutral-6 bg-gray-dark-5 px-6 py-4 text-[13px] font-medium text-neutral-12 group-hover:block',
+          { 'left-1/2 -translate-x-1/2': align === 'center' },
+          className,
+        )}
+      >
+        {content}
+      </div>
+    </div>
+  );
+};
+
+export const PreviewModeTooltip: React.FC<
+  React.PropsWithChildren & Partial<TooltipProps>
+> = ({ children, content = 'Not available in preview mode', ...props }) => (
+  <Tooltip content={content} {...props}>
+    {children}
+  </Tooltip>
+);

From 02b172777910774ad0007f59f8433dad5508c716 Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Wed, 30 Apr 2025 17:50:04 -0300
Subject: [PATCH 12/27] chore: feedback tweaks

---
 src/components/PublicAgents/Content/index.tsx | 15 +++++---
 src/components/PublicAgents/Sidebar.tsx       | 35 ++++++++++---------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index c0a1bf80d..5f354068f 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -53,11 +53,16 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
       <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
         <div className="flex items-center justify-between p-12">
           <div className="flex items-center gap-8">
-            <Dropdown agent={agent} />
-            <Button className="pointer-events-none select-none justify-center border border-neutral-7 text-neutral-12">
-              <PiGlobeSimpleBold className="size-16" />
-              Public
-            </Button>
+            <div className="flex items-center gap-8 px-8 text-15 font-medium text-neutral-12">
+              <img
+                src={image}
+                width={16}
+                height={16}
+                alt={name}
+                className="rounded-4"
+              />
+              {name}
+            </div>
           </div>
           <div className="flex items-center gap-8">
             <IconButton>
diff --git a/src/components/PublicAgents/Sidebar.tsx b/src/components/PublicAgents/Sidebar.tsx
index f6505f525..5c5244cb8 100644
--- a/src/components/PublicAgents/Sidebar.tsx
+++ b/src/components/PublicAgents/Sidebar.tsx
@@ -10,6 +10,7 @@ import {
 } from 'react-icons/pi';
 import type { PublicAgent } from './config';
 import { Button, IconButton } from './Button';
+import { PreviewModeTooltip } from './Tooltip';
 
 type SidebarProps = {
   agent: PublicAgent;
@@ -33,22 +34,22 @@ export const Sidebar: React.FC<SidebarProps> = ({ agent }) => {
           </IconButton>
         </div>
         <div className="flex flex-col gap-8">
-          <Button>
+          <Button className="pointer-events-none select-none">
             <PiPlusBold className="size-16" />
             Create
           </Button>
-          <Button>
+          <Button className="pointer-events-none select-none">
             <PiGridFourBold className="size-16" />
             Explore
           </Button>
-          <Button>
+          <Button className="pointer-events-none select-none">
             <PiCoinsBold className="size-16" />
             Earnings
           </Button>
           <div className="h-[1px] bg-neutral-6" />
         </div>
         <div className="flex flex-col gap-8">
-          <Button className="justify-between">
+          <Button className="pointer-events-none select-none justify-between">
             My agents <PiCaretDownBold className="size-16" />
           </Button>
           <Button className="justify-between bg-gray-dark-5 text-neutral-12 hover:bg-gray-dark-5 active:bg-gray-dark-5">
@@ -66,21 +67,23 @@ export const Sidebar: React.FC<SidebarProps> = ({ agent }) => {
           </Button>
         </div>
       </div>
-      <div className="overflow-clip rounded-12 border border-neutral-6">
-        <div className="flex items-center justify-between border-b border-neutral-6 bg-gray-dark-3 p-12 text-12">
-          <p>$0.00</p>
-          <p className="text-neutral-12">Buy credits</p>
-        </div>
-        <div className="flex items-center justify-between p-12 font-medium text-neutral-12">
-          <div className="flex items-center gap-8">
-            <div className="flex size-36 items-center justify-center rounded-8 bg-gray-dark-3">
-              <PiUserBold className="size-23 text-neutral-8" />
+      <PreviewModeTooltip className="-top-34">
+        <div className="overflow-clip rounded-12 border border-neutral-6">
+          <div className="flex items-center justify-between border-b border-neutral-6 bg-gray-dark-3 p-12 text-12">
+            <p>$0.00</p>
+            <p className="text-neutral-12">Buy credits</p>
+          </div>
+          <div className="flex items-center justify-between p-12 font-medium text-neutral-12">
+            <div className="flex items-center gap-8">
+              <div className="flex size-36 items-center justify-center rounded-8 bg-gray-dark-3">
+                <PiUserBold className="size-23 text-neutral-8" />
+              </div>
+              <p>Guest</p>
             </div>
-            <p>Guest</p>
+            <PiDotsThreeBold className="size-16" />
           </div>
-          <PiDotsThreeBold className="size-16" />
         </div>
-      </div>
+      </PreviewModeTooltip>
     </div>
   );
 };

From ee6847edbc3d8527a4963eb06ffeba6f215966c7 Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Mon, 5 May 2025 18:57:08 +0200
Subject: [PATCH 13/27] feat(influencers): prompt payment and create thread
 with influencer

---
 dump.json                                     |   0
 package-lock.json                             |  11 +-
 package.json                                  |   3 +-
 src/components/LandingPage/Templates.tsx      |   4 +-
 .../PublicAgents/Content/SubscribeModal.tsx   |  94 ++++++-
 src/components/PublicAgents/Content/index.tsx |  42 ++-
 src/components/PublicAgents/Dashboard.tsx     |  17 +-
 src/components/PublicAgents/config.ts         | 252 +++++++++---------
 src/utils/accessToken.ts                      |  42 +++
 9 files changed, 322 insertions(+), 143 deletions(-)
 delete mode 100644 dump.json
 create mode 100644 src/utils/accessToken.ts

diff --git a/dump.json b/dump.json
deleted file mode 100644
index e69de29bb..000000000
diff --git a/package-lock.json b/package-lock.json
index bab219ab9..9c3932fa7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@astrojs/react": "^3.3.2",
         "@astrojs/sitemap": "^3.1.4",
         "@astrojs/tailwind": "^5.1.0",
-        "@fleek-platform/agents-ui": "8.28.0",
+        "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.3.tgz",
         "@fleek-platform/dashboard": "0.20.4",
         "@fleek-platform/login-button": "2.15.1",
         "@fleek-platform/sdk": "^3.6.2",
@@ -33,6 +33,7 @@
         "class-variance-authority": "^0.7.0",
         "framer-motion": "^12.6.3",
         "hono": "^4.4.11",
+        "jwt-decode": "^4.0.0",
         "keen-slider": "^6.8.6",
         "lite-youtube-embed": "^0.3.3",
         "lodash-es": "^4.17.21",
@@ -4492,13 +4493,13 @@
       }
     },
     "node_modules/@fleek-platform/agents-ui": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/@fleek-platform/agents-ui/-/agents-ui-8.28.0.tgz",
-      "integrity": "sha512-7gbSHL0CZT0zBHvawV23M0n0yDUYsDo5q43rTZCP8ekUm8SgdJy5hDyo1PEVSi8No+KrIPzov1NR2pspcSaNsQ==",
+      "version": "8.25.3",
+      "resolved": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.3.tgz",
+      "integrity": "sha512-gTLp0n7wEuzBBw9ox1OEqtTKdPoe44gG7lXd/PHM6f6Z/mZPk1JIq0Qf8+80KpL1F1Qb8+58AzyqyYhFsN0cqA==",
       "license": "MIT",
       "dependencies": {
         "@fleek-platform/agents-chatbox-widget": "^0.9.0",
-        "@fleek-platform/login-button": "^2.12.1",
+        "@fleek-platform/login-button": "^2.9.0",
         "@hookform/resolvers": "^3.9.1",
         "@langchain/core": "^0.3.46",
         "@langchain/langgraph-sdk": "^0.0.70",
diff --git a/package.json b/package.json
index 3c00e560c..94176f06e 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@astrojs/react": "^3.3.2",
     "@astrojs/sitemap": "^3.1.4",
     "@astrojs/tailwind": "^5.1.0",
-    "@fleek-platform/agents-ui": "8.28.0",
+    "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.3.tgz",
     "@fleek-platform/dashboard": "0.20.4",
     "@fleek-platform/login-button": "2.15.1",
     "@fleek-platform/sdk": "^3.6.2",
@@ -73,6 +73,7 @@
     "class-variance-authority": "^0.7.0",
     "framer-motion": "^12.6.3",
     "hono": "^4.4.11",
+    "jwt-decode": "^4.0.0",
     "keen-slider": "^6.8.6",
     "lite-youtube-embed": "^0.3.3",
     "lodash-es": "^4.17.21",
diff --git a/src/components/LandingPage/Templates.tsx b/src/components/LandingPage/Templates.tsx
index 8dc5b783e..00c8420a1 100644
--- a/src/components/LandingPage/Templates.tsx
+++ b/src/components/LandingPage/Templates.tsx
@@ -159,7 +159,7 @@ export const TemplateCard = ({ template }: { template: PublicAgent }) => {
           </div>
         </div>
         <div className="grid w-full grid-cols-3 gap-6">
-          {template.socials.map((social) => (
+          {/*template.socials.map((social) => (
             <div
               key={`${template.name} - ${social.name}`}
               className="flex items-center justify-center gap-4 rounded-8 bg-gray-dark-4 p-8"
@@ -170,7 +170,7 @@ export const TemplateCard = ({ template }: { template: PublicAgent }) => {
                 className="size-18"
               />
             </div>
-          ))}
+          ))*/}
         </div>
         <a
           href={`preview/${template.id}`}
diff --git a/src/components/PublicAgents/Content/SubscribeModal.tsx b/src/components/PublicAgents/Content/SubscribeModal.tsx
index ff2ddfa85..776a3de03 100644
--- a/src/components/PublicAgents/Content/SubscribeModal.tsx
+++ b/src/components/PublicAgents/Content/SubscribeModal.tsx
@@ -3,6 +3,16 @@ import type React from 'react';
 import type { PublicAgent } from '../config';
 import { Button } from '../Button';
 import { PiCoinsBold, PiCreditCardBold } from 'react-icons/pi';
+import { useAuthStore } from '@fleek-platform/login-button';
+import { useEffect, useRef } from 'react';
+import {
+  getOrCreateAgentThread,
+  useAgentPlans,
+  useFanSubscriptionModal,
+  useHasFanPlan,
+} from '@fleek-platform/agents-ui';
+import toast from 'react-hot-toast';
+import { getUserIdFromAccessToken } from '@utils/accessToken';
 
 type SubscribeModalProps = {
   isOpen: boolean;
@@ -16,6 +26,85 @@ export const SubscribeModal: React.FC<SubscribeModalProps> = ({
   closeModal,
 }) => {
   const { name, image } = agent;
+  const { triggerLoginModal, isLoggedIn, accessToken, projectId } =
+    useAuthStore();
+  const pendingPayment = useRef(false);
+  const { openSubscriptionModal, setOnSuccess } = useFanSubscriptionModal();
+  const { refetchPlans } = useAgentPlans();
+
+  const handlePay = async () => {
+    try {
+      if (!isLoggedIn) {
+        if (typeof triggerLoginModal !== 'function') {
+          throw new Error(
+            `expected triggerLoginModal type to be a function but found ${typeof triggerLoginModal}`,
+          );
+        }
+        closeModal();
+        triggerLoginModal(true);
+        pendingPayment.current = true;
+        return;
+      }
+
+      closeModal();
+      await startCheckout();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  useEffect(() => {
+    if (isLoggedIn && pendingPayment.current) {
+      pendingPayment.current = false;
+      void startCheckout();
+    }
+  }, [isLoggedIn]);
+
+  const startCheckout = async () => {
+    const { fan } = await refetchPlans();
+    openSubscriptionModal({
+      plan: fan,
+    });
+    setOnSuccess(onCheckoutSuccess.current);
+    hasRun.current = false;
+  };
+
+  const onCheckoutSuccess = useRef(() => {});
+  const hasRun = useRef(false);
+
+  useEffect(() => {
+    onCheckoutSuccess.current = async () => {
+      if (hasRun.current) return;
+      hasRun.current = true;
+      try {
+        if (!accessToken) {
+          throw new Error('Missing accessToken');
+        }
+        const userId = getUserIdFromAccessToken(accessToken);
+        if (!userId) {
+          throw new Error('Missing userId');
+        }
+
+        await getOrCreateAgentThread({
+          userId,
+          accessToken,
+          projectId,
+          agentId: agent.id,
+        });
+        window.location.href = `${import.meta.env.PUBLIC_UI_AGENTS_APP_URL}/agent/${agent.id}`;
+      } catch (e) {
+        console.error(e);
+        toast.error('Failed to create thread.');
+      }
+    };
+  }, [accessToken, projectId, agent]);
+
+  const { billing } = useHasFanPlan();
+  useEffect(() => {
+    if (billing?.activePlans) {
+      onCheckoutSuccess.current();
+    }
+  }, [billing]);
 
   return (
     <Modal
@@ -50,7 +139,10 @@ export const SubscribeModal: React.FC<SubscribeModalProps> = ({
             </p>
           </div>
           <div className="flex w-full flex-col gap-12">
-            <Button className="justify-center bg-neutral-12 text-gray-dark-1 hover:bg-white active:bg-neutral-12">
+            <Button
+              className="justify-center bg-neutral-12 text-gray-dark-1 hover:bg-white active:bg-neutral-12"
+              onClick={handlePay}
+            >
               <PiCreditCardBold className="size-16" />
               Pay with credit card
             </Button>
diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index 5f354068f..53b0ca71e 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -1,7 +1,6 @@
-import { PiGlobeSimpleBold, PiSidebarSimpleBold } from 'react-icons/pi';
+import { PiSidebarSimpleBold } from 'react-icons/pi';
 import type { PublicAgent } from '../config';
-import { Button, IconButton } from '../Button';
-import { Dropdown } from './Dropdown';
+import { IconButton } from '../Button';
 import { Typewriter } from './Typewriter';
 import type React from 'react';
 import { Tabs } from './Tabs';
@@ -10,6 +9,15 @@ import { useEffect, useState } from 'react';
 import { Loading } from './Loading';
 import { sleep } from '../sleep';
 import { SubscribeModal } from './SubscribeModal';
+import { LoginProvider } from '@fleek-platform/login-button';
+import { setDefined, FanSubscriptionModal } from '@fleek-platform/agents-ui';
+import '@fleek-platform/agents-ui/styles';
+import { isClient } from '@utils/common';
+import { createPortal } from 'react-dom';
+
+setDefined({
+  PUBLIC_FLEEK_REST_API_HOST: import.meta.env.PUBLIC_FLEEK_REST_API_HOST,
+});
 
 type ContentProps = {
   agent: PublicAgent;
@@ -21,7 +29,7 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [hasClosed, setHasClosed] = useState(false);
 
-  const { name, image, greeting } = agent;
+  const { name, image } = agent;
 
   useEffect(() => {
     if (!isLoading) return;
@@ -49,7 +57,29 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
 
   return (
     <div className="p-12">
-      <SubscribeModal isOpen={isOpen} closeModal={closeModal} agent={agent} />
+      <LoginProvider
+        graphqlApiUrl={import.meta.env.PUBLIC_GRAPHQL_ENDPOINT}
+        dynamicEnvironmentId={import.meta.env.PUBLIC_DYNAMIC_ENVIRONMENT_ID}
+      >
+        {(props) => {
+          return (
+            <SubscribeModal
+              isOpen={isOpen}
+              closeModal={closeModal}
+              agent={agent}
+            />
+          );
+        }}
+      </LoginProvider>
+
+      {isClient &&
+        createPortal(
+          <div className="agents-ui">
+            <FanSubscriptionModal />
+          </div>,
+          document.body,
+        )}
+
       <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
         <div className="flex items-center justify-between p-12">
           <div className="flex items-center gap-8">
@@ -82,7 +112,7 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
                 className="rounded-4"
               />
               <div className="flex flex-col gap-16">
-                <Typewriter text={greeting} />
+                <Typewriter text={/*greeting*/ ''} />
               </div>
             </div>
             {userMsg && (
diff --git a/src/components/PublicAgents/Dashboard.tsx b/src/components/PublicAgents/Dashboard.tsx
index ba1b814f7..0ae7b12dd 100644
--- a/src/components/PublicAgents/Dashboard.tsx
+++ b/src/components/PublicAgents/Dashboard.tsx
@@ -2,6 +2,11 @@ import { Sidebar } from './Sidebar';
 import { AsideProfile } from './AsideProfile';
 import { Content } from './Content';
 import type { PublicAgent } from './config';
+import { useEffect } from 'react';
+import { useHasFanPlan } from '@fleek-platform/agents-ui';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient();
 
 type DashboardProps = {
   agent: PublicAgent;
@@ -9,10 +14,12 @@ type DashboardProps = {
 
 export const Dashboard: React.FC<DashboardProps> = ({ agent }) => {
   return (
-    <div className="grid grid-cols-[240px_minmax(0,1fr)_320px] font-inter">
-      <Sidebar agent={agent} />
-      <Content agent={agent} />
-      <AsideProfile agent={agent} />
-    </div>
+    <QueryClientProvider client={queryClient}>
+      <div className="grid grid-cols-[240px_minmax(0,1fr)_320px] font-inter">
+        <Sidebar agent={agent} />
+        <Content agent={agent} />
+        <AsideProfile agent={agent} />
+      </div>
+    </QueryClientProvider>
   );
 };
diff --git a/src/components/PublicAgents/config.ts b/src/components/PublicAgents/config.ts
index a184521e8..473112b9c 100644
--- a/src/components/PublicAgents/config.ts
+++ b/src/components/PublicAgents/config.ts
@@ -1,156 +1,162 @@
 export type PublicAgent = {
-  id: number;
+  id: string;
   name: string;
   category: string;
   image: string;
   author: string;
-  greeting: string;
+  /*greeting: string;
   about: string;
   socials: {
     name: string;
     logo: string;
     followers: number;
-  }[];
+  }[];*/
+  status: string;
+  agentId: string;
+  avatar: string;
+  frameworkName: string;
+  characterFile: string;
+  createdAt: string;
+  createdBy: string;
+  host: string;
+  projectId: string;
+  slotNumber: number;
+  updatedAt: string;
+  publicToken: string;
+  publicChat: boolean;
 };
 
 export const publicAgents: PublicAgent[] = [
   {
-    id: 1,
+    name: 'Kiki',
+    status: 'Running',
+    agentId: '91ab9e80-f2db-4087-befb-9a410b630a8a',
+    category: 'NSFW',
+    image:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/91ab9e80-f2db-4087-befb-9a410b630a8a/5395e1d3-0bbf-4ae1-8b21-9c7a7fe06b80/image-1746070774164.jpg',
+    avatar:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/91ab9e80-f2db-4087-befb-9a410b630a8a/5395e1d3-0bbf-4ae1-8b21-9c7a7fe06b80/image-1746070774164.jpg',
+    author: 'Fleek',
+    frameworkName: 'Fleek',
+    characterFile: '',
+    createdAt: '',
+    createdBy: '',
+    host: '',
+    id: '91ab9e80-f2db-4087-befb-9a410b630a8a',
+    projectId: '',
+    slotNumber: 0,
+    updatedAt: '',
+    publicToken: '',
+    publicChat: false,
+  },
+  {
     name: 'Stephanie',
+    status: 'Running',
+    agentId: 'dc894a33-05e7-4fca-997e-00296612eaad',
     category: 'Sports',
-    image: '/images/landing-page/templates/stephanie.png',
-    greeting:
-      "Hey there! Ready to dive into the latest sports highlights or break down last night's game?",
-    about:
-      "Stephanie is your go-to sports expert, always ready with the latest scores, athlete gossip, and game-day insights. Whether it's basketball, tennis, or Formula 1, she's got the play-by-play and personality to match.",
+    image:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/dc894a33-05e7-4fca-997e-00296612eaad/a538b692-6cb8-41e8-a970-cd3cfa27a628/image-1746070839876.jpg',
+    avatar:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/dc894a33-05e7-4fca-997e-00296612eaad/a538b692-6cb8-41e8-a970-cd3cfa27a628/image-1746070839876.jpg',
     author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 16200,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 32700,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 112200,
-      },
-    ],
+    frameworkName: 'Fleek',
+    characterFile: '',
+    createdAt: '',
+    createdBy: '',
+    host: '',
+    id: 'dc894a33-05e7-4fca-997e-00296612eaad',
+    projectId: '',
+    slotNumber: 0,
+    updatedAt: '',
+    publicToken: '',
+    publicChat: false,
   },
   {
-    id: 2,
-    name: 'Olivia',
-    category: 'Companion',
-    image: '/images/landing-page/templates/olivia.png',
-    greeting:
-      "Hi! I'm here to chat, listen, and keep you company — what's on your mind today?",
-    about:
-      "Olivia is your charming digital companion — thoughtful, witty, and always ready to chat. From relationship advice to your favorite movies, she's here to keep you company and make every conversation feel personal.",
+    name: 'Brianna',
+    status: 'Running',
+    agentId: '98a76838-c016-4295-9bc9-ff2ae273673d',
+    category: 'Therapy',
+    image:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/98a76838-c016-4295-9bc9-ff2ae273673d/e099c7a0-c731-45c5-a80f-dab0c6d44c48/image-1746070896251.jpg',
+    avatar:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/98a76838-c016-4295-9bc9-ff2ae273673d/e099c7a0-c731-45c5-a80f-dab0c6d44c48/image-1746070896251.jpg',
     author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 56600,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 98200,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 85300,
-      },
-    ],
+    frameworkName: 'Fleek',
+    characterFile: '',
+    createdAt: '',
+    createdBy: '',
+    host: '',
+    id: '98a76838-c016-4295-9bc9-ff2ae273673d',
+    projectId: '',
+    slotNumber: 0,
+    updatedAt: '',
+    publicToken: '',
+    publicChat: false,
   },
   {
-    id: 3,
-    name: 'Crypto Chris',
+    name: 'Carl',
+    status: 'Running',
+    agentId: '0004b5ed-1713-4ba6-a2a2-4bd689ecbcc0',
     category: 'Crypto',
-    image: '/images/landing-page/templates/chris.png',
-    greeting:
-      "Wanna talk crypto? I've got the alpha, the memes, and the market moves — just ask.",
-    about:
-      "Crypto Chris is plugged into the blockchain 24/7. Whether you want the latest on Bitcoin trends, altcoin gems, or NFT drama, he's got the insights — and a meme or two to go with it.",
+    image:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/0004b5ed-1713-4ba6-a2a2-4bd689ecbcc0/1195b16f-002b-4da6-a24c-57a743ab6956/image-1746070966364.jpg',
+    avatar:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/0004b5ed-1713-4ba6-a2a2-4bd689ecbcc0/1195b16f-002b-4da6-a24c-57a743ab6956/image-1746070966364.jpg',
     author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 112400,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 2400,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 1100,
-      },
-    ],
+    frameworkName: 'Fleek',
+    characterFile: '',
+    createdAt: '',
+    createdBy: '',
+    host: '',
+    id: '0004b5ed-1713-4ba6-a2a2-4bd689ecbcc0',
+    projectId: '',
+    slotNumber: 0,
+    updatedAt: '',
+    publicToken: '',
+    publicChat: false,
   },
   {
-    id: 4,
-    name: 'Kanye East',
-    category: 'Culture',
-    image: '/images/landing-page/templates/kanye.png',
-    greeting:
-      "Sup. Let's talk art, fashion, music — or whatever's breaking the internet right now.",
-    about:
-      "Kanye East blends pop culture commentary with bold opinions and creative flair. From underground fashion to viral trends, he's your cultural compass—unfiltered and always on beat.",
+    name: 'Jackie',
+    status: 'Running',
+    agentId: '9bb62709-c606-4ddd-8225-78fbb382eb11',
+    category: 'Fashion',
+    image:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/9bb62709-c606-4ddd-8225-78fbb382eb11/a551f7d4-e808-446e-b80e-063c83885a30/image-1746071020923.jpg',
+    avatar:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/9bb62709-c606-4ddd-8225-78fbb382eb11/a551f7d4-e808-446e-b80e-063c83885a30/image-1746071020923.jpg',
     author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 1500,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 1100,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 659,
-      },
-    ],
+    frameworkName: 'Fleek',
+    characterFile: '',
+    createdAt: '',
+    createdBy: '',
+    host: '',
+    id: '9bb62709-c606-4ddd-8225-78fbb382eb11',
+    projectId: '',
+    slotNumber: 0,
+    updatedAt: '',
+    publicToken: '',
+    publicChat: false,
   },
   {
-    id: 5,
-    name: 'Kiki',
+    name: 'Victoria',
+    status: 'Running',
+    agentId: '6af00700-9c66-4f7d-8815-0e30fd060f67',
     category: 'NSFW',
-    image: '/images/landing-page/templates/kiki.png',
-    greeting: "Hey babe 😘 Let's keep things fun, flirty, and just between us.",
-    about:
-      "Kiki is playful, confident, and never shy. Whether it's cheeky banter or late-night convos, she's here to entertain and keep things exciting in your world — no filters, no rules.",
+    image:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/6af00700-9c66-4f7d-8815-0e30fd060f67/ca064611-429e-48b9-be61-1298a811610e/image-1746071081866.jpg',
+    avatar:
+      'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/6af00700-9c66-4f7d-8815-0e30fd060f67/ca064611-429e-48b9-be61-1298a811610e/image-1746071081866.jpg',
     author: 'Fleek',
-    socials: [
-      {
-        name: 'twitter',
-        logo: '/images/landing-page/templates/socials/x.svg',
-        followers: 9240,
-      },
-      {
-        name: 'instagram',
-        logo: '/images/landing-page/templates/socials/instagram.svg',
-        followers: 56700,
-      },
-      {
-        name: 'tiktok',
-        logo: '/images/landing-page/templates/socials/tiktok.svg',
-        followers: 32000,
-      },
-    ],
+    frameworkName: 'Fleek',
+    characterFile: '',
+    createdAt: '',
+    createdBy: '',
+    host: '',
+    id: '6af00700-9c66-4f7d-8815-0e30fd060f67',
+    projectId: '',
+    slotNumber: 0,
+    updatedAt: '',
+    publicToken: '',
+    publicChat: false,
   },
 ];
diff --git a/src/utils/accessToken.ts b/src/utils/accessToken.ts
new file mode 100644
index 000000000..02463dee4
--- /dev/null
+++ b/src/utils/accessToken.ts
@@ -0,0 +1,42 @@
+import { jwtDecode } from 'jwt-decode';
+
+export const decodeAccessToken = (
+  accessToken: string,
+):
+  | {
+      exp: number;
+      projectId: string;
+      sub: string;
+    }
+  | undefined => {
+  try {
+    return jwtDecode(accessToken);
+  } catch (e) {
+    console.error('Failed to decode access token', e);
+    return undefined;
+  }
+};
+
+export const accessTokenMatchesProject = (
+  accessToken: string,
+  projectId: string,
+) => {
+  return decodeAccessToken(accessToken)?.projectId === projectId;
+};
+
+export const getUserIdFromAccessToken = (accessToken: string) => {
+  try {
+    const sub = decodeAccessToken(accessToken)?.sub;
+    if (!sub) {
+      throw new Error('No userId found in access token');
+    }
+    const userId = sub.split(':')[1];
+    if (!userId) {
+      throw new Error('No userId found in access token');
+    }
+    return userId;
+  } catch (e) {
+    console.error('Failed to get userId from access token', e);
+    return undefined;
+  }
+};

From 37f90db4e4c6870deda3f563d833c3c9264ca966 Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Mon, 5 May 2025 16:42:13 -0300
Subject: [PATCH 14/27] feat: templates section

---
 .../templates/socials/snapchat.svg            |  10 +
 src/components/LandingPage/Templates.tsx      | 193 ++++--------------
 src/components/PublicAgents/config.ts         |  20 +-
 3 files changed, 61 insertions(+), 162 deletions(-)
 create mode 100644 public/images/landing-page/templates/socials/snapchat.svg

diff --git a/public/images/landing-page/templates/socials/snapchat.svg b/public/images/landing-page/templates/socials/snapchat.svg
new file mode 100644
index 000000000..cd0dac755
--- /dev/null
+++ b/public/images/landing-page/templates/socials/snapchat.svg
@@ -0,0 +1,10 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_204_1718)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.27129 0.884579C8.414 0.968776 9.52808 1.61891 10.0545 2.72063C10.5217 3.69859 10.365 4.84616 10.3054 5.89738C10.6146 6.04667 10.9503 5.72727 11.2329 5.72727C11.861 5.72727 12.3166 6.48755 11.2561 6.9319C11.0334 7.02216 10.5315 7.12979 10.4184 7.41099C10.2623 7.79631 11.2761 9.73344 12.885 10.0146C13.0301 10.0388 13.1339 10.1758 13.1244 10.3306C13.0944 10.8826 12.0041 11.0873 11.4822 11.1741C11.2994 11.556 11.5188 12.1323 10.7342 11.9691C9.64722 11.7433 9.2882 12.0281 8.77625 12.41C6.4029 14.1909 5.33235 12.1045 4.38827 11.9379C3.68686 11.8129 3.24143 12.0142 3.00538 12.0142C2.56989 12.0142 2.66299 11.4276 2.53343 11.1741C2.06487 11.0978 1.10399 10.9172 0.921148 10.4659C0.63526 9.75774 1.72245 10.3618 2.92233 8.88291C3.17308 8.57071 3.38223 8.22385 3.54399 7.85186C3.83313 7.22353 3.3112 7.15772 2.76258 6.92832C1.49272 6.39719 2.42352 5.50848 2.96535 5.77924C3.18143 5.88677 3.49058 5.9943 3.70998 5.89394C3.66014 5.04692 3.54045 3.70687 3.8496 2.97441C4.44328 1.55708 5.83286 0.77859 7.27129 0.884579Z" stroke="white" stroke-miterlimit="10" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_204_1718">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/LandingPage/Templates.tsx b/src/components/LandingPage/Templates.tsx
index 00c8420a1..4241d859f 100644
--- a/src/components/LandingPage/Templates.tsx
+++ b/src/components/LandingPage/Templates.tsx
@@ -1,96 +1,12 @@
-import 'keen-slider/keen-slider.min.css';
-import { useKeenSlider, type KeenSliderPlugin } from 'keen-slider/react';
+import { PiChatCircleDotsBold } from 'react-icons/pi';
 import { Badge } from './Badge';
 import { Text } from './Text';
-import { IoChatbubbleEllipsesOutline } from 'react-icons/io5';
-import { useState } from 'react';
-import { cn } from '@utils/cn';
 import {
   publicAgents,
   type PublicAgent,
 } from '@components/PublicAgents/config';
 
-const ContinuousAutoscroll: KeenSliderPlugin = (slider) => {
-  let raf: number;
-  let last: number;
-  let paused = false;
-
-  const speed = 0.000025;
-
-  const animate = (time: number) => {
-    if (!last) {
-      last = time;
-      raf = requestAnimationFrame(animate);
-      return;
-    }
-
-    const dt = time - last;
-    last = time;
-
-    if (!paused) {
-      slider.track.to((slider.track.details?.position ?? 0) - speed * dt);
-    }
-
-    raf = requestAnimationFrame(animate);
-  };
-
-  slider.on('created', () => {
-    slider.container.addEventListener('mouseenter', () => {
-      paused = true;
-    });
-    slider.container.addEventListener('mouseleave', () => {
-      paused = false;
-    });
-
-    raf = requestAnimationFrame(animate);
-  });
-
-  slider.on('destroyed', () => {
-    cancelAnimationFrame(raf);
-  });
-};
-
 export const Templates = () => {
-  const [loaded, setLoaded] = useState(false);
-  const [sliderRef] = useKeenSlider<HTMLDivElement>(
-    {
-      loop: true,
-      mode: 'free-snap',
-      slides: {
-        spacing: 24,
-        perView: 1.1,
-      },
-      breakpoints: {
-        '(min-width: 640px)': {
-          slides: {
-            perView: 1.2,
-            spacing: 24,
-          },
-        },
-        '(min-width: 768px)': {
-          slides: {
-            perView: 1.5,
-            spacing: 24,
-          },
-        },
-        '(min-width: 1024px)': {
-          slides: {
-            perView: 2.2,
-            spacing: 24,
-          },
-        },
-        '(min-width: 1280px)': {
-          slides: {
-            perView: 2.95,
-            spacing: 24,
-          },
-        },
-      },
-      created: () => setLoaded(true),
-    },
-    [ContinuousAutoscroll],
-  );
-
   return (
     <div className="mx-auto flex w-full max-w-screen-xl flex-col items-center px-24 py-48 text-center sm:py-[75px]">
       <Badge>
@@ -106,81 +22,48 @@ export const Templates = () => {
         Explore social agents and start chatting.
       </p>
 
-      <div className="relative w-full overflow-hidden">
-        {/* Left Fade */}
-        <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-[20%] bg-gradient-to-r from-neutral-1 to-transparent md:block" />
-
-        {/* Right Fade */}
-        <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-[20%] bg-gradient-to-l from-neutral-1 to-transparent md:block" />
-
-        <div
-          ref={sliderRef}
-          className={cn(
-            'keen-slider mt-56 cursor-grab active:cursor-grabbing',
-            {
-              'opacity-0': !loaded,
-              'opacity-100': loaded,
-            },
-          )}
-        >
-          {publicAgents.map((template) => (
-            <div key={template.id} className="keen-slider__slide">
-              <TemplateCard template={template} />
-            </div>
-          ))}
-        </div>
+      <div className="grid w-full max-w-[800px] gap-12 pt-40 sm:grid-cols-2 md:grid-cols-3">
+        {publicAgents.map((template) => (
+          <div key={template.id}>
+            <TemplateCard template={template} />
+          </div>
+        ))}
       </div>
     </div>
   );
 };
 
-export const TemplateCard = ({ template }: { template: PublicAgent }) => {
-  function formatCompactNumber(value: number): string {
-    return new Intl.NumberFormat('en', {
-      notation: 'compact',
-      maximumFractionDigits: 1,
-    }).format(value);
-  }
-
-  return (
-    <div className="flex overflow-clip rounded-12 border border-neutral-6 bg-neutral-2">
-      <img
-        src={template.image}
-        alt="Agent avatar"
-        className="size-[152px] shrink-0 object-cover"
-      />
-      <div className="flex w-full flex-col items-start justify-between gap-10 px-12 py-16">
-        <div className="flex w-full items-start justify-between">
-          <div className="text-left">
-            <Text variant="subtitle">{template.name}</Text>
-          </div>
-          <div className="hidden rounded-full border border-neutral-6 bg-neutral-1 px-8 py-4 text-12 text-neutral-12 sm:block">
-            {template.category}
-          </div>
+export const TemplateCard = ({ template }: { template: PublicAgent }) => (
+  <a
+    href={`preview/${template.id}`}
+    className="group relative flex h-[460px] flex-col justify-between overflow-clip rounded-16 border border-neutral-6"
+  >
+    <img
+      src={template.image}
+      alt={template.name}
+      className="absolute inset-0 -z-1 min-w-[259px] w-full h-[460px] object-cover transition-all group-hover:scale-[1.02] group-hover:opacity-80"
+      loading="lazy"
+    />
+    <div className="mr-auto flex w-full items-start justify-between p-12">
+      <div>
+        <div className="flex h-24 items-center justify-center rounded-full bg-black/60 px-8 font-medium text-neutral-12">
+          {template.category}
         </div>
-        <div className="grid w-full grid-cols-3 gap-6">
-          {/*template.socials.map((social) => (
-            <div
-              key={`${template.name} - ${social.name}`}
-              className="flex items-center justify-center gap-4 rounded-8 bg-gray-dark-4 p-8"
-            >
-              <img
-                src={social.logo}
-                alt="Social media logo"
-                className="size-18"
-              />
-            </div>
-          ))*/}
-        </div>
-        <a
-          href={`preview/${template.id}`}
-          className="flex w-full select-none items-center justify-center gap-6 rounded-8 bg-white p-8 font-medium text-black"
-        >
-          <IoChatbubbleEllipsesOutline className="shrink-0" />
-          <span className="sm:hidden"> Chat with {template.name}</span>
-          <span className="hidden sm:inline"> Chat with {template.name}</span>
-        </a>
       </div>
     </div>
-  );
-};
+    <div className="flex flex-col items-start gap-16 bg-gradient-to-b from-transparent via-black/80 to-black p-12">
+      <div className="space-y-4 text-left">
+        <p className="text-20 font-bold leading-20 text-neutral-12">
+          {template.name}
+        </p>
+        <p className="leading-18 text-neutral-12">{template.about}</p>
+      </div>
+      <button
+        type="button"
+        className="flex h-36 w-full items-center justify-center gap-8 rounded-12 bg-neutral-12 font-medium text-gray-dark-1 transition-colors group-hover:bg-neutral-11"
+      >
+        <PiChatCircleDotsBold className="size-16" /> Chat
+      </button>
+    </div>
+  </a>
+);
diff --git a/src/components/PublicAgents/config.ts b/src/components/PublicAgents/config.ts
index 473112b9c..fb2fbaedd 100644
--- a/src/components/PublicAgents/config.ts
+++ b/src/components/PublicAgents/config.ts
@@ -4,8 +4,8 @@ export type PublicAgent = {
   category: string;
   image: string;
   author: string;
-  /*greeting: string;
   about: string;
+  /*greeting: string;
   socials: {
     name: string;
     logo: string;
@@ -31,7 +31,8 @@ export const publicAgents: PublicAgent[] = [
     name: 'Kiki',
     status: 'Running',
     agentId: '91ab9e80-f2db-4087-befb-9a410b630a8a',
-    category: 'NSFW',
+    category: '🔞 NSFW',
+    about: 'Kiki is playful, confident, and never shy',
     image:
       'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/91ab9e80-f2db-4087-befb-9a410b630a8a/5395e1d3-0bbf-4ae1-8b21-9c7a7fe06b80/image-1746070774164.jpg',
     avatar:
@@ -53,7 +54,8 @@ export const publicAgents: PublicAgent[] = [
     name: 'Stephanie',
     status: 'Running',
     agentId: 'dc894a33-05e7-4fca-997e-00296612eaad',
-    category: 'Sports',
+    category: '⚽️ Sports',
+    about: 'Stephanie is your go-to sports expert',
     image:
       'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/dc894a33-05e7-4fca-997e-00296612eaad/a538b692-6cb8-41e8-a970-cd3cfa27a628/image-1746070839876.jpg',
     avatar:
@@ -75,7 +77,8 @@ export const publicAgents: PublicAgent[] = [
     name: 'Brianna',
     status: 'Running',
     agentId: '98a76838-c016-4295-9bc9-ff2ae273673d',
-    category: 'Therapy',
+    category: '❤️‍🩹 Therapy',
+    about: 'Brianna is your calm in the chaos',
     image:
       'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/98a76838-c016-4295-9bc9-ff2ae273673d/e099c7a0-c731-45c5-a80f-dab0c6d44c48/image-1746070896251.jpg',
     avatar:
@@ -97,7 +100,8 @@ export const publicAgents: PublicAgent[] = [
     name: 'Carl',
     status: 'Running',
     agentId: '0004b5ed-1713-4ba6-a2a2-4bd689ecbcc0',
-    category: 'Crypto',
+    category: '🔮 Crypto',
+    about: 'Carl is your crypto confidant.',
     image:
       'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/0004b5ed-1713-4ba6-a2a2-4bd689ecbcc0/1195b16f-002b-4da6-a24c-57a743ab6956/image-1746070966364.jpg',
     avatar:
@@ -119,7 +123,8 @@ export const publicAgents: PublicAgent[] = [
     name: 'Jackie',
     status: 'Running',
     agentId: '9bb62709-c606-4ddd-8225-78fbb382eb11',
-    category: 'Fashion',
+    category: '👗 Fashion',
+    about: 'Jackie is your personal style guru',
     image:
       'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/9bb62709-c606-4ddd-8225-78fbb382eb11/a551f7d4-e808-446e-b80e-063c83885a30/image-1746071020923.jpg',
     avatar:
@@ -141,7 +146,8 @@ export const publicAgents: PublicAgent[] = [
     name: 'Victoria',
     status: 'Running',
     agentId: '6af00700-9c66-4f7d-8815-0e30fd060f67',
-    category: 'NSFW',
+    category: '🔞 NSFW',
+    about: 'Victoria is unapologetically bold',
     image:
       'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/6af00700-9c66-4f7d-8815-0e30fd060f67/ca064611-429e-48b9-be61-1298a811610e/image-1746071081866.jpg',
     avatar:

From 6d8557b17149ddd872cad40b461f2bf189020a1e Mon Sep 17 00:00:00 2001
From: "Victor F. Santos" <victor.gaard@gmail.com>
Date: Mon, 5 May 2025 16:54:29 -0300
Subject: [PATCH 15/27] chore: add socials

---
 .../templates/socials/instagram.svg           | 34 +++++--------------
 .../landing-page/templates/socials/tiktok.svg | 20 +++--------
 src/components/LandingPage/Templates.tsx      | 33 ++++++++++++++++--
 src/components/PublicAgents/config.ts         |  2 +-
 4 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/public/images/landing-page/templates/socials/instagram.svg b/public/images/landing-page/templates/socials/instagram.svg
index 9223dd7a9..66b18ac8d 100644
--- a/public/images/landing-page/templates/socials/instagram.svg
+++ b/public/images/landing-page/templates/socials/instagram.svg
@@ -1,32 +1,14 @@
-<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="fi_174855" clip-path="url(#clip0_400_2718)">
-<g id="Group">
-<path id="Vector" d="M10.3293 0H4.67068C2.37096 0 0.5 1.87096 0.5 4.17068V9.82932C0.5 12.129 2.37096 14 4.67068 14H10.3293C12.629 14 14.5 12.129 14.5 9.82932V4.17068C14.5 1.87096 12.629 0 10.3293 0ZM13.0916 9.82932C13.0916 11.3549 11.8549 12.5916 10.3293 12.5916H4.67068C3.14513 12.5916 1.9084 11.3549 1.9084 9.82932V4.17068C1.9084 2.6451 3.14513 1.4084 4.67068 1.4084H10.3293C11.8549 1.4084 13.0916 2.6451 13.0916 4.17068V9.82932Z" fill="url(#paint0_linear_400_2718)"/>
-<path id="Vector_2" d="M7.4998 3.37915C5.50324 3.37915 3.87891 5.00348 3.87891 7.00002C3.87891 8.99656 5.50324 10.6209 7.4998 10.6209C9.49637 10.6209 11.1207 8.99659 11.1207 7.00002C11.1207 5.00346 9.49637 3.37915 7.4998 3.37915ZM7.4998 9.21255C6.27787 9.21255 5.28731 8.22199 5.28731 7.00005C5.28731 5.77811 6.27789 4.78755 7.4998 4.78755C8.72174 4.78755 9.7123 5.77811 9.7123 7.00005C9.7123 8.22196 8.72172 9.21255 7.4998 9.21255Z" fill="url(#paint1_linear_400_2718)"/>
-<path id="Vector_3" d="M11.1294 4.27398C11.6085 4.27398 11.997 3.88552 11.997 3.40634C11.997 2.92715 11.6085 2.5387 11.1294 2.5387C10.6502 2.5387 10.2617 2.92715 10.2617 3.40634C10.2617 3.88552 10.6502 4.27398 11.1294 4.27398Z" fill="url(#paint2_linear_400_2718)"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="social-logos" clip-path="url(#clip0_204_1712)">
+<g id="Vector">
+<path d="M13.9863 4.11604C13.9535 3.37216 13.8332 2.86076 13.6609 2.41762C13.4831 1.94723 13.2096 1.5261 12.8513 1.17601C12.5012 0.820473 12.0773 0.544204 11.6124 0.369213C11.1667 0.196892 10.6579 0.0765988 9.91404 0.0438013C9.16461 0.00822609 8.9267 0 7.02593 0C5.12517 0 4.88726 0.00822608 4.14061 0.0410236C3.39673 0.0738212 2.88532 0.194221 2.44229 0.366435C1.9718 0.544204 1.55067 0.817695 1.20058 1.17601C0.845039 1.5261 0.568878 1.95001 0.393779 2.41495C0.221459 2.86076 0.101165 3.36939 0.0683679 4.11326C0.0327927 4.86269 0.0245667 5.10061 0.0245667 7.00137C0.0245667 8.90213 0.0327927 9.14005 0.0655903 9.8867C0.0983878 10.6306 0.218788 11.142 0.391109 11.5851C0.568878 12.0555 0.845039 12.4766 1.20058 12.8267C1.55067 13.1823 1.97458 13.4585 2.43951 13.6335C2.88532 13.8058 3.39395 13.9261 4.13793 13.9589C4.88448 13.9918 5.1225 14 7.02326 14C8.92403 14 9.16194 13.9918 9.90859 13.9589C10.6525 13.9261 11.1639 13.8058 11.6069 13.6335C12.5478 13.2698 13.2917 12.5259 13.6554 11.5851C13.8276 11.1393 13.948 10.6306 13.9808 9.8867C14.0136 9.14005 14.0219 8.90213 14.0219 7.00137C14.0219 5.10061 14.0191 4.86269 13.9863 4.11604ZM12.7255 9.832C12.6954 10.5157 12.5806 10.8849 12.4849 11.1311C12.2496 11.741 11.7656 12.225 11.1556 12.4603C10.9095 12.556 10.5376 12.6709 9.85657 12.7009C9.11814 12.7338 8.89668 12.7419 7.02871 12.7419C5.16075 12.7419 4.93651 12.7338 4.20075 12.7009C3.51702 12.6709 3.14781 12.556 2.90167 12.4603C2.59816 12.3481 2.32189 12.1703 2.09765 11.9379C1.86518 11.7109 1.68741 11.4374 1.57524 11.1339C1.47952 10.8877 1.36467 10.5157 1.33465 9.83478C1.30175 9.09635 1.29363 8.87478 1.29363 7.00682C1.29363 5.13885 1.30175 4.91461 1.33465 4.17896C1.36467 3.49524 1.47952 3.12602 1.57524 2.87988C1.68741 2.57626 1.86518 2.3001 2.10043 2.07575C2.32734 1.84329 2.60083 1.66552 2.90445 1.55345C3.15059 1.45773 3.52258 1.34288 4.20353 1.31276C4.94196 1.27996 5.16353 1.27173 7.03138 1.27173C8.90213 1.27173 9.12359 1.27996 9.85934 1.31276C10.5431 1.34288 10.9123 1.45773 11.1584 1.55345C11.4619 1.66552 11.7382 1.84329 11.9624 2.07575C12.1949 2.30277 12.3727 2.57626 12.4849 2.87988C12.5806 3.12602 12.6954 3.49791 12.7255 4.17896C12.7583 4.91739 12.7666 5.13885 12.7666 7.00682C12.7666 8.87478 12.7583 9.09357 12.7255 9.832Z" fill="white"/>
+<path d="M7.02593 3.40496C5.04045 3.40496 3.42953 5.01578 3.42953 7.00137C3.42953 8.98695 5.04045 10.5978 7.02593 10.5978C9.01152 10.5978 10.6223 8.98695 10.6223 7.00137C10.6223 5.01578 9.01152 3.40496 7.02593 3.40496ZM7.02593 9.33427C5.73786 9.33427 4.69304 8.28955 4.69304 7.00137C4.69304 5.71318 5.73786 4.66847 7.02593 4.66847C8.31412 4.66847 9.35883 5.71318 9.35883 7.00137C9.35883 8.28955 8.31412 9.33427 7.02593 9.33427Z" fill="white"/>
+<path d="M11.6042 3.26277C11.6042 3.72642 11.2283 4.10236 10.7645 4.10236C10.3009 4.10236 9.92494 3.72642 9.92494 3.26277C9.92494 2.79901 10.3009 2.42317 10.7645 2.42317C11.2283 2.42317 11.6042 2.79901 11.6042 3.26277Z" fill="white"/>
 </g>
 </g>
 <defs>
-<linearGradient id="paint0_linear_400_2718" x1="7.5" y1="13.9592" x2="7.5" y2="0.10874" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E09B3D"/>
-<stop offset="0.3" stop-color="#C74C4D"/>
-<stop offset="0.6" stop-color="#C21975"/>
-<stop offset="1" stop-color="#7024C4"/>
-</linearGradient>
-<linearGradient id="paint1_linear_400_2718" x1="7.4998" y1="13.9593" x2="7.4998" y2="0.108789" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E09B3D"/>
-<stop offset="0.3" stop-color="#C74C4D"/>
-<stop offset="0.6" stop-color="#C21975"/>
-<stop offset="1" stop-color="#7024C4"/>
-</linearGradient>
-<linearGradient id="paint2_linear_400_2718" x1="11.1294" y1="13.9593" x2="11.1294" y2="0.108793" gradientUnits="userSpaceOnUse">
-<stop stop-color="#E09B3D"/>
-<stop offset="0.3" stop-color="#C74C4D"/>
-<stop offset="0.6" stop-color="#C21975"/>
-<stop offset="1" stop-color="#7024C4"/>
-</linearGradient>
-<clipPath id="clip0_400_2718">
-<rect width="14" height="14" fill="white" transform="translate(0.5)"/>
+<clipPath id="clip0_204_1712">
+<rect width="14" height="14" fill="white"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/public/images/landing-page/templates/socials/tiktok.svg b/public/images/landing-page/templates/socials/tiktok.svg
index e075f749b..aa86c05fa 100644
--- a/public/images/landing-page/templates/socials/tiktok.svg
+++ b/public/images/landing-page/templates/socials/tiktok.svg
@@ -1,20 +1,10 @@
-<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="fi_3046121" clip-path="url(#clip0_400_2726)">
-<g id="Group">
-<g id="Group_2">
-<path id="Vector" d="M5.94788 7.25701C4.83772 7.25701 3.94085 8.15388 3.95725 9.2531C3.96819 9.95857 4.35647 10.5711 4.92796 10.9129C4.73382 10.6148 4.61897 10.2621 4.6135 9.88201C4.5971 8.78279 5.49397 7.88591 6.60413 7.88591C6.82288 7.88591 7.03343 7.92146 7.2303 7.98435V5.78318C7.02522 5.7531 6.81468 5.73669 6.60413 5.73669C6.59319 5.73669 6.58499 5.73669 6.57405 5.73669V7.35544C6.37717 7.29255 6.16663 7.25701 5.94788 7.25701Z" fill="#F00044"/>
-<path id="Vector_2" d="M10.7492 0.65625H10.7328H10.1641C10.3281 1.4793 10.7902 2.1957 11.4355 2.68242C11.0117 2.12188 10.7547 1.42188 10.7492 0.65625Z" fill="#F00044"/>
-<path id="Vector_3" d="M14.0953 4.00583C13.8793 4.00583 13.6715 3.98396 13.4664 3.94568V5.52341C12.7227 5.52341 12.0008 5.37849 11.3227 5.08865C10.8852 4.90271 10.4777 4.66482 10.1031 4.37771L10.1141 9.24216C10.1086 10.3359 9.67656 11.3613 8.89453 12.1351C8.25742 12.764 7.45078 13.166 6.57578 13.2945C6.3707 13.3246 6.16016 13.341 5.94961 13.341C5.01445 13.341 4.12305 13.0375 3.39844 12.4769C3.48047 12.5754 3.56797 12.6711 3.66367 12.764C4.45117 13.5406 5.4957 13.9699 6.60859 13.9699C6.81914 13.9699 7.02969 13.9535 7.23477 13.9234C8.10977 13.7949 8.91641 13.3929 9.55352 12.764C10.3355 11.9902 10.7676 10.9648 10.773 9.87107L10.732 5.00662C11.1039 5.29373 11.5113 5.53435 11.9516 5.71755C12.6324 6.00466 13.3543 6.15232 14.0953 6.15232" fill="#F00044"/>
-</g>
-<path id="Vector_4" d="M3.65548 6.94802C4.43478 6.17419 5.47111 5.7449 6.57579 5.73669V5.15427C6.37072 5.12419 6.16017 5.10779 5.94962 5.10779C4.834 5.10779 3.78673 5.53708 2.99923 6.31912C2.2254 7.08748 1.78243 8.13748 1.78517 9.22849C1.78517 10.3277 2.21993 11.3586 3.0047 12.1379C3.13048 12.2609 3.259 12.3758 3.39572 12.4797C2.77775 11.7441 2.44142 10.8254 2.43868 9.8574C2.44142 8.76638 2.88165 7.71638 3.65548 6.94802Z" fill="#08FFF9"/>
-<path id="Vector_5" d="M13.4664 3.94565V3.3605H13.4609C12.7008 3.3605 12.0008 3.10894 11.4375 2.68237C11.927 3.32769 12.6434 3.78706 13.4664 3.94565Z" fill="#08FFF9"/>
-<path id="Vector_6" d="M6.49375 11.818C6.75352 11.8316 7.00234 11.7961 7.23203 11.7223C8.025 11.4625 8.59648 10.7242 8.59648 9.85469L8.59922 6.60078V0.65625H10.1633C10.1223 0.451172 10.1004 0.243359 10.0977 0.0273438H7.94297V5.96914L7.94023 9.22305C7.94023 10.0926 7.36875 10.8309 6.57578 11.0906C6.34609 11.1672 6.09727 11.2027 5.8375 11.1863C5.50664 11.1672 5.19766 11.0687 4.92969 10.9102C5.26602 11.4297 5.84023 11.7824 6.49375 11.818Z" fill="#08FFF9"/>
-<path id="Vector_7" d="M6.57579 13.2945C7.45079 13.166 8.25743 12.7641 8.89454 12.1352C9.67658 11.3613 10.1086 10.3359 10.1141 9.24219L10.1031 4.37773C10.475 4.66484 10.8824 4.90547 11.3227 5.08867C12.0035 5.37578 12.7254 5.52344 13.4664 5.52344V3.9457C12.6434 3.78711 11.927 3.32773 11.4375 2.68242C10.7922 2.1957 10.3274 1.4793 10.166 0.65625H8.59923V6.59805L8.5965 9.85195C8.5965 10.7215 8.02501 11.4598 7.23204 11.7195C7.00236 11.7961 6.75353 11.8316 6.49376 11.8152C5.83751 11.7797 5.26603 11.427 4.9297 10.9102C4.35822 10.5711 3.96993 9.95586 3.959 9.25039C3.94259 8.15117 4.83947 7.2543 5.94962 7.2543C6.16837 7.2543 6.37892 7.28984 6.57579 7.35273V5.73398C5.47111 5.74219 4.43478 6.17148 3.65548 6.94531C2.88165 7.71367 2.43868 8.76367 2.44142 9.85195C2.44142 10.8199 2.77775 11.7387 3.39845 12.4742C4.12579 13.0348 5.01447 13.3383 5.94962 13.3383C6.16017 13.341 6.37072 13.3246 6.57579 13.2945Z" fill="black"/>
-</g>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="social-logos" clip-path="url(#clip0_204_1715)">
+<path id="Vector" d="M13.1337 3.51068C12.3347 3.51068 11.5976 3.24599 11.0056 2.79947C10.3266 2.2876 9.83881 1.53674 9.66654 0.671306C9.62388 0.457478 9.60092 0.236814 9.59873 0.0106812H7.31635L7.31361 9.6633C7.31361 10.5766 6.71888 11.351 5.89447 11.6233C5.65521 11.7023 5.39681 11.7398 5.12775 11.725C4.78431 11.7061 4.46248 11.6025 4.18275 11.4352C3.58748 11.0792 3.18388 10.4333 3.17295 9.69447C3.15572 8.53974 4.08924 7.5983 5.24314 7.5983C5.47092 7.5983 5.68967 7.63549 5.89447 7.70302V5.38564C5.67845 5.35365 5.45861 5.33697 5.23631 5.33697C3.9733 5.33697 2.79205 5.86197 1.94767 6.80779C1.30947 7.52256 0.926657 8.43447 0.867594 9.39068C0.790212 10.6469 1.24986 11.841 2.14127 12.722C2.27224 12.8513 2.40978 12.9713 2.55361 13.0821C3.31787 13.6703 4.2522 13.9891 5.23631 13.9891C5.45861 13.9891 5.67845 13.9727 5.89447 13.9407C6.81377 13.8045 7.66197 13.3837 8.33135 12.722C9.15385 11.909 9.6083 10.8298 9.61322 9.68107L9.60146 4.57982C9.99385 4.88252 10.4229 5.13299 10.8833 5.3274C11.5995 5.62955 12.3588 5.78267 13.1403 5.7824V3.51013L13.1337 3.51068Z" fill="white"/>
 </g>
 <defs>
-<clipPath id="clip0_400_2726">
-<rect width="14" height="14" fill="white" transform="translate(0.96875)"/>
+<clipPath id="clip0_204_1715">
+<rect width="14" height="14" fill="white"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/src/components/LandingPage/Templates.tsx b/src/components/LandingPage/Templates.tsx
index 4241d859f..326580372 100644
--- a/src/components/LandingPage/Templates.tsx
+++ b/src/components/LandingPage/Templates.tsx
@@ -6,6 +6,25 @@ import {
   type PublicAgent,
 } from '@components/PublicAgents/config';
 
+const SOCIALS_MAP = [
+  {
+    name: 'twitter',
+    logo: '/images/landing-page/templates/socials/x.svg',
+  },
+  {
+    name: 'instagram',
+    logo: '/images/landing-page/templates/socials/instagram.svg',
+  },
+  {
+    name: 'tiktok',
+    logo: '/images/landing-page/templates/socials/tiktok.svg',
+  },
+  {
+    name: 'snapchat',
+    logo: '/images/landing-page/templates/socials/snapchat.svg',
+  },
+];
+
 export const Templates = () => {
   return (
     <div className="mx-auto flex w-full max-w-screen-xl flex-col items-center px-24 py-48 text-center sm:py-[75px]">
@@ -22,7 +41,7 @@ export const Templates = () => {
         Explore social agents and start chatting.
       </p>
 
-      <div className="grid w-full max-w-[800px] gap-12 pt-40 sm:grid-cols-2 md:grid-cols-3">
+      <div className="grid w-full max-w-[1000px] gap-12 pt-40 sm:grid-cols-2 lg:grid-cols-3">
         {publicAgents.map((template) => (
           <div key={template.id}>
             <TemplateCard template={template} />
@@ -41,7 +60,7 @@ export const TemplateCard = ({ template }: { template: PublicAgent }) => (
     <img
       src={template.image}
       alt={template.name}
-      className="absolute inset-0 -z-1 min-w-[259px] w-full h-[460px] object-cover transition-all group-hover:scale-[1.02] group-hover:opacity-80"
+      className="absolute inset-0 -z-1 h-[460px] w-full min-w-[325px] object-cover transition-all group-hover:scale-[1.02] group-hover:opacity-80"
       loading="lazy"
     />
     <div className="mr-auto flex w-full items-start justify-between p-12">
@@ -50,6 +69,16 @@ export const TemplateCard = ({ template }: { template: PublicAgent }) => (
           {template.category}
         </div>
       </div>
+      <div className="flex flex-col gap-8">
+        {SOCIALS_MAP.map((social) => (
+          <div
+            key={social.name}
+            className="flex size-36 items-center justify-center rounded-12 bg-black/60"
+          >
+            <img src={social.logo} width={16} height={16} alt={social.name} />
+          </div>
+        ))}
+      </div>
     </div>
     <div className="flex flex-col items-start gap-16 bg-gradient-to-b from-transparent via-black/80 to-black p-12">
       <div className="space-y-4 text-left">
diff --git a/src/components/PublicAgents/config.ts b/src/components/PublicAgents/config.ts
index fb2fbaedd..a7dff0311 100644
--- a/src/components/PublicAgents/config.ts
+++ b/src/components/PublicAgents/config.ts
@@ -101,7 +101,7 @@ export const publicAgents: PublicAgent[] = [
     status: 'Running',
     agentId: '0004b5ed-1713-4ba6-a2a2-4bd689ecbcc0',
     category: '🔮 Crypto',
-    about: 'Carl is your crypto confidant.',
+    about: 'Carl is your crypto confidant',
     image:
       'https://social-agent.dev.platform.fleeksandbox.xyz/api/v1/files/0004b5ed-1713-4ba6-a2a2-4bd689ecbcc0/1195b16f-002b-4da6-a24c-57a743ab6956/image-1746070966364.jpg',
     avatar:

From 46844407b68278a0b3bd2e06152cb303e1882211 Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Tue, 6 May 2025 10:10:57 +0200
Subject: [PATCH 16/27] chore: bump agents-ui

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9c3932fa7..c3b7bf715 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@astrojs/react": "^3.3.2",
         "@astrojs/sitemap": "^3.1.4",
         "@astrojs/tailwind": "^5.1.0",
-        "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.3.tgz",
+        "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.4.tgz",
         "@fleek-platform/dashboard": "0.20.4",
         "@fleek-platform/login-button": "2.15.1",
         "@fleek-platform/sdk": "^3.6.2",
@@ -4493,9 +4493,9 @@
       }
     },
     "node_modules/@fleek-platform/agents-ui": {
-      "version": "8.25.3",
-      "resolved": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.3.tgz",
-      "integrity": "sha512-gTLp0n7wEuzBBw9ox1OEqtTKdPoe44gG7lXd/PHM6f6Z/mZPk1JIq0Qf8+80KpL1F1Qb8+58AzyqyYhFsN0cqA==",
+      "version": "8.25.4",
+      "resolved": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.4.tgz",
+      "integrity": "sha512-H/kGtFyFO8F+1GprLIXj6qQZYRxLMIRK1a6xIwT/76s+fm3AHA76HcMkWeXOpMq4YaLyIXRrN2MW56MZaXr3rA==",
       "license": "MIT",
       "dependencies": {
         "@fleek-platform/agents-chatbox-widget": "^0.9.0",
diff --git a/package.json b/package.json
index 94176f06e..e994f6913 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@astrojs/react": "^3.3.2",
     "@astrojs/sitemap": "^3.1.4",
     "@astrojs/tailwind": "^5.1.0",
-    "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.3.tgz",
+    "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.4.tgz",
     "@fleek-platform/dashboard": "0.20.4",
     "@fleek-platform/login-button": "2.15.1",
     "@fleek-platform/sdk": "^3.6.2",

From 86d566357e01abc75b37087c6aea1a00e0cb2dbf Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Tue, 6 May 2025 10:11:11 +0200
Subject: [PATCH 17/27] chore: add greeting message placeholder

---
 src/components/PublicAgents/Content/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index 53b0ca71e..593f7bb11 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -112,7 +112,7 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
                 className="rounded-4"
               />
               <div className="flex flex-col gap-16">
-                <Typewriter text={/*greeting*/ ''} />
+                <Typewriter text={/*greeting*/ `Hey, I'm ${agent.name}!`} />
               </div>
             </div>
             {userMsg && (

From 1952912614b705843c7b31d699f9630cf4b28215 Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Tue, 6 May 2025 13:50:06 +0200
Subject: [PATCH 18/27] feat: unify subscription modal

---
 package-lock.json                             |   2 +-
 .../PublicAgents/Content/SubscribeModal.tsx   | 158 ------------------
 src/components/PublicAgents/Content/index.tsx |  89 +++++++---
 3 files changed, 67 insertions(+), 182 deletions(-)
 delete mode 100644 src/components/PublicAgents/Content/SubscribeModal.tsx

diff --git a/package-lock.json b/package-lock.json
index c3b7bf715..80337c72c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4495,7 +4495,7 @@
     "node_modules/@fleek-platform/agents-ui": {
       "version": "8.25.4",
       "resolved": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.4.tgz",
-      "integrity": "sha512-H/kGtFyFO8F+1GprLIXj6qQZYRxLMIRK1a6xIwT/76s+fm3AHA76HcMkWeXOpMq4YaLyIXRrN2MW56MZaXr3rA==",
+      "integrity": "sha512-XtpliUtWOgnvUPfP6kaX+WTfDJYMsAOj/8MCsBctF+FvJFJkRWOWrVsYB1IBV/ep3MztAZvY1VvLOVburMTfTQ==",
       "license": "MIT",
       "dependencies": {
         "@fleek-platform/agents-chatbox-widget": "^0.9.0",
diff --git a/src/components/PublicAgents/Content/SubscribeModal.tsx b/src/components/PublicAgents/Content/SubscribeModal.tsx
deleted file mode 100644
index 776a3de03..000000000
--- a/src/components/PublicAgents/Content/SubscribeModal.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { Modal } from '@components/Modal/Modal';
-import type React from 'react';
-import type { PublicAgent } from '../config';
-import { Button } from '../Button';
-import { PiCoinsBold, PiCreditCardBold } from 'react-icons/pi';
-import { useAuthStore } from '@fleek-platform/login-button';
-import { useEffect, useRef } from 'react';
-import {
-  getOrCreateAgentThread,
-  useAgentPlans,
-  useFanSubscriptionModal,
-  useHasFanPlan,
-} from '@fleek-platform/agents-ui';
-import toast from 'react-hot-toast';
-import { getUserIdFromAccessToken } from '@utils/accessToken';
-
-type SubscribeModalProps = {
-  isOpen: boolean;
-  agent: PublicAgent;
-  closeModal: () => void;
-};
-
-export const SubscribeModal: React.FC<SubscribeModalProps> = ({
-  isOpen,
-  agent,
-  closeModal,
-}) => {
-  const { name, image } = agent;
-  const { triggerLoginModal, isLoggedIn, accessToken, projectId } =
-    useAuthStore();
-  const pendingPayment = useRef(false);
-  const { openSubscriptionModal, setOnSuccess } = useFanSubscriptionModal();
-  const { refetchPlans } = useAgentPlans();
-
-  const handlePay = async () => {
-    try {
-      if (!isLoggedIn) {
-        if (typeof triggerLoginModal !== 'function') {
-          throw new Error(
-            `expected triggerLoginModal type to be a function but found ${typeof triggerLoginModal}`,
-          );
-        }
-        closeModal();
-        triggerLoginModal(true);
-        pendingPayment.current = true;
-        return;
-      }
-
-      closeModal();
-      await startCheckout();
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  useEffect(() => {
-    if (isLoggedIn && pendingPayment.current) {
-      pendingPayment.current = false;
-      void startCheckout();
-    }
-  }, [isLoggedIn]);
-
-  const startCheckout = async () => {
-    const { fan } = await refetchPlans();
-    openSubscriptionModal({
-      plan: fan,
-    });
-    setOnSuccess(onCheckoutSuccess.current);
-    hasRun.current = false;
-  };
-
-  const onCheckoutSuccess = useRef(() => {});
-  const hasRun = useRef(false);
-
-  useEffect(() => {
-    onCheckoutSuccess.current = async () => {
-      if (hasRun.current) return;
-      hasRun.current = true;
-      try {
-        if (!accessToken) {
-          throw new Error('Missing accessToken');
-        }
-        const userId = getUserIdFromAccessToken(accessToken);
-        if (!userId) {
-          throw new Error('Missing userId');
-        }
-
-        await getOrCreateAgentThread({
-          userId,
-          accessToken,
-          projectId,
-          agentId: agent.id,
-        });
-        window.location.href = `${import.meta.env.PUBLIC_UI_AGENTS_APP_URL}/agent/${agent.id}`;
-      } catch (e) {
-        console.error(e);
-        toast.error('Failed to create thread.');
-      }
-    };
-  }, [accessToken, projectId, agent]);
-
-  const { billing } = useHasFanPlan();
-  useEffect(() => {
-    if (billing?.activePlans) {
-      onCheckoutSuccess.current();
-    }
-  }, [billing]);
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      closeModal={closeModal}
-      modalContainerClassName="w-[341px] p-0 rounded-24"
-    >
-      <div className="flex w-full flex-col overflow-clip rounded-t-23">
-        <div className="bg-gradient-to-b from-[#132D21] to-gray-dark-1 px-12 py-24 text-center">
-          <p className="text-16 text-[#3DD68C]">7-day free trial</p>
-        </div>
-        <div className="flex flex-col items-center gap-24 p-24">
-          <div className="flex gap-10 pl-[90px]">
-            <img
-              src={image}
-              width={64}
-              height={64}
-              alt={name}
-              className="rounded-16"
-            />
-            <div className="flex h-32 items-center rounded-8 bg-gray-dark-3 px-8 text-neutral-12">
-              I'm waiting!
-            </div>
-          </div>
-          <div className="flex flex-col items-center gap-12 text-center">
-            <p className="text-28 font-medium leading-28 text-neutral-12">
-              $10 / month
-            </p>
-            <p className="text-balance">
-              Kick off your 7-day free trial on the Fan Plan and keep the convo
-              going!
-            </p>
-          </div>
-          <div className="flex w-full flex-col gap-12">
-            <Button
-              className="justify-center bg-neutral-12 text-gray-dark-1 hover:bg-white active:bg-neutral-12"
-              onClick={handlePay}
-            >
-              <PiCreditCardBold className="size-16" />
-              Pay with credit card
-            </Button>
-            <Button className="justify-center bg-gray-dark-3 hover:bg-gray-dark-4">
-              <PiCoinsBold className="size-16" />
-              Pay with crypto
-            </Button>
-          </div>
-        </div>
-      </div>
-    </Modal>
-  );
-};
diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index 593f7bb11..921d9e8c8 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -5,15 +5,22 @@ import { Typewriter } from './Typewriter';
 import type React from 'react';
 import { Tabs } from './Tabs';
 import { ChatBox } from './ChatBox';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Loading } from './Loading';
 import { sleep } from '../sleep';
-import { SubscribeModal } from './SubscribeModal';
-import { LoginProvider } from '@fleek-platform/login-button';
-import { setDefined, FanSubscriptionModal } from '@fleek-platform/agents-ui';
+import { LoginProvider, useAuthStore } from '@fleek-platform/login-button';
+import {
+  setDefined,
+  FanSubscriptionModal,
+  useFanSubscriptionModal,
+  getOrCreateAgentThread,
+  useHasFanPlan,
+} from '@fleek-platform/agents-ui';
 import '@fleek-platform/agents-ui/styles';
 import { isClient } from '@utils/common';
 import { createPortal } from 'react-dom';
+import toast from 'react-hot-toast';
+import { getUserIdFromAccessToken } from '@utils/accessToken';
 
 setDefined({
   PUBLIC_FLEEK_REST_API_HOST: import.meta.env.PUBLIC_FLEEK_REST_API_HOST,
@@ -26,8 +33,9 @@ type ContentProps = {
 export const Content: React.FC<ContentProps> = ({ agent }) => {
   const [userMsg, setUserMsg] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
   const [hasClosed, setHasClosed] = useState(false);
+  const { openSubscriptionModal, setOnSuccess } = useFanSubscriptionModal();
+  const { accessToken, projectId } = useAuthStore();
 
   const { name, image } = agent;
 
@@ -36,7 +44,7 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
 
     const onMsgReceived = async () => {
       await sleep(2000);
-      setIsOpen(true);
+      openModal();
     };
 
     onMsgReceived();
@@ -47,14 +55,53 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
     setIsLoading(true);
   };
 
-  const openModal = () => setIsOpen(true);
-
-  const closeModal = () => {
-    setIsOpen(false);
+  const openModal = () => {
+    openSubscriptionModal({
+      agent,
+    });
+    setOnSuccess(onCheckoutSuccess.current);
+    hasRun.current = false;
     setIsLoading(false);
     setHasClosed(true);
   };
 
+  const onCheckoutSuccess = useRef(() => {});
+  const hasRun = useRef(false);
+
+  useEffect(() => {
+    onCheckoutSuccess.current = async () => {
+      if (hasRun.current) return;
+      hasRun.current = true;
+      try {
+        if (!accessToken) {
+          throw new Error('Missing accessToken');
+        }
+        const userId = getUserIdFromAccessToken(accessToken);
+        if (!userId) {
+          throw new Error('Missing userId');
+        }
+
+        await getOrCreateAgentThread({
+          userId,
+          accessToken,
+          projectId,
+          agentId: agent.id,
+        });
+        window.location.href = `${import.meta.env.PUBLIC_UI_AGENTS_APP_URL}/agent/${agent.id}`;
+      } catch (e) {
+        console.error(e);
+        toast.error('Failed to create thread.');
+      }
+    };
+  }, [accessToken, projectId, agent]);
+
+  const { billing } = useHasFanPlan();
+  useEffect(() => {
+    if (billing?.activePlans) {
+      onCheckoutSuccess.current();
+    }
+  }, [billing]);
+
   return (
     <div className="p-12">
       <LoginProvider
@@ -63,23 +110,19 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
       >
         {(props) => {
           return (
-            <SubscribeModal
-              isOpen={isOpen}
-              closeModal={closeModal}
-              agent={agent}
-            />
+            <>
+              {isClient &&
+                createPortal(
+                  <div className="agents-ui">
+                    <FanSubscriptionModal />
+                  </div>,
+                  document.body,
+                )}
+            </>
           );
         }}
       </LoginProvider>
 
-      {isClient &&
-        createPortal(
-          <div className="agents-ui">
-            <FanSubscriptionModal />
-          </div>,
-          document.body,
-        )}
-
       <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
         <div className="flex items-center justify-between p-12">
           <div className="flex items-center gap-8">

From 04043883b2ad698a69ba7df8b2d69077ee92c8e7 Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Tue, 6 May 2025 20:06:21 +0200
Subject: [PATCH 19/27] chore: submit button color

---
 package-lock.json                               | 10 +++++-----
 package.json                                    |  2 +-
 src/components/PublicAgents/Content/ChatBox.tsx |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 80337c72c..779137556 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@astrojs/react": "^3.3.2",
         "@astrojs/sitemap": "^3.1.4",
         "@astrojs/tailwind": "^5.1.0",
-        "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.4.tgz",
+        "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.28.0.tgz",
         "@fleek-platform/dashboard": "0.20.4",
         "@fleek-platform/login-button": "2.15.1",
         "@fleek-platform/sdk": "^3.6.2",
@@ -4493,13 +4493,13 @@
       }
     },
     "node_modules/@fleek-platform/agents-ui": {
-      "version": "8.25.4",
-      "resolved": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.4.tgz",
-      "integrity": "sha512-XtpliUtWOgnvUPfP6kaX+WTfDJYMsAOj/8MCsBctF+FvJFJkRWOWrVsYB1IBV/ep3MztAZvY1VvLOVburMTfTQ==",
+      "version": "8.28.0",
+      "resolved": "file:../agents-ui/.install/fleek-platform-agents-ui-8.28.0.tgz",
+      "integrity": "sha512-xPq3bzlfc7/ZewnvzxKXMvg/ZSV4A9SGFrJA65nCm/QFl96elB8WzlDDZSjT+XdJm88HWHsXuDYbretcWibKmA==",
       "license": "MIT",
       "dependencies": {
         "@fleek-platform/agents-chatbox-widget": "^0.9.0",
-        "@fleek-platform/login-button": "^2.9.0",
+        "@fleek-platform/login-button": "^2.12.1",
         "@hookform/resolvers": "^3.9.1",
         "@langchain/core": "^0.3.46",
         "@langchain/langgraph-sdk": "^0.0.70",
diff --git a/package.json b/package.json
index e994f6913..c13b4af60 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@astrojs/react": "^3.3.2",
     "@astrojs/sitemap": "^3.1.4",
     "@astrojs/tailwind": "^5.1.0",
-    "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.25.4.tgz",
+    "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.28.0.tgz",
     "@fleek-platform/dashboard": "0.20.4",
     "@fleek-platform/login-button": "2.15.1",
     "@fleek-platform/sdk": "^3.6.2",
diff --git a/src/components/PublicAgents/Content/ChatBox.tsx b/src/components/PublicAgents/Content/ChatBox.tsx
index 34211af5c..1ca24883c 100644
--- a/src/components/PublicAgents/Content/ChatBox.tsx
+++ b/src/components/PublicAgents/Content/ChatBox.tsx
@@ -89,7 +89,7 @@ export const ChatBox: React.FC<ChatBoxProps> = ({
             </PreviewModeTooltip>
           </div>
           <IconButton
-            className="border-none bg-neutral-1 hover:bg-black"
+            className="border-none bg-white text-gray-dark-1 hover:bg-gray-dark-11 disabled:bg-gray-dark-3 disabled:text-gray-dark-11"
             onClick={handleSubmit}
             disabled={!msg || isLoading}
           >

From bb49c0c2960934b79df16094018795e5947f75fd Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Wed, 7 May 2025 12:50:54 +0200
Subject: [PATCH 20/27] chore: bump dependencies

---
 package-lock.json | 10 +++++-----
 package.json      |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 779137556..a67dfb5e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@astrojs/react": "^3.3.2",
         "@astrojs/sitemap": "^3.1.4",
         "@astrojs/tailwind": "^5.1.0",
-        "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.28.0.tgz",
+        "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.29.0.tgz",
         "@fleek-platform/dashboard": "0.20.4",
         "@fleek-platform/login-button": "2.15.1",
         "@fleek-platform/sdk": "^3.6.2",
@@ -4493,13 +4493,13 @@
       }
     },
     "node_modules/@fleek-platform/agents-ui": {
-      "version": "8.28.0",
-      "resolved": "file:../agents-ui/.install/fleek-platform-agents-ui-8.28.0.tgz",
-      "integrity": "sha512-xPq3bzlfc7/ZewnvzxKXMvg/ZSV4A9SGFrJA65nCm/QFl96elB8WzlDDZSjT+XdJm88HWHsXuDYbretcWibKmA==",
+      "version": "8.29.0",
+      "resolved": "file:../agents-ui/.install/fleek-platform-agents-ui-8.29.0.tgz",
+      "integrity": "sha512-6B0EA+XFibfRCg2jYO8UI4S/QQx8O97HGAVj5S6mIKcSeWD43cPOn7pG4pevXfYejEaLfSUqE4/K0WRPNbf67g==",
       "license": "MIT",
       "dependencies": {
         "@fleek-platform/agents-chatbox-widget": "^0.9.0",
-        "@fleek-platform/login-button": "^2.12.1",
+        "@fleek-platform/login-button": "2.15.1",
         "@hookform/resolvers": "^3.9.1",
         "@langchain/core": "^0.3.46",
         "@langchain/langgraph-sdk": "^0.0.70",
diff --git a/package.json b/package.json
index c13b4af60..a58078b44 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@astrojs/react": "^3.3.2",
     "@astrojs/sitemap": "^3.1.4",
     "@astrojs/tailwind": "^5.1.0",
-    "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.28.0.tgz",
+    "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.29.0.tgz",
     "@fleek-platform/dashboard": "0.20.4",
     "@fleek-platform/login-button": "2.15.1",
     "@fleek-platform/sdk": "^3.6.2",

From c045888045dded5d0f65fe083d5f79c8001be564 Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Wed, 7 May 2025 12:52:26 +0200
Subject: [PATCH 21/27] refactor(influencer): move fetch to mutation with auto
 retry

---
 src/components/PublicAgents/Content/index.tsx | 96 ++++++++++++-------
 1 file changed, 60 insertions(+), 36 deletions(-)

diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index 921d9e8c8..bedff0e6d 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -21,6 +21,7 @@ import { isClient } from '@utils/common';
 import { createPortal } from 'react-dom';
 import toast from 'react-hot-toast';
 import { getUserIdFromAccessToken } from '@utils/accessToken';
+import { useMutation } from '@tanstack/react-query';
 
 setDefined({
   PUBLIC_FLEEK_REST_API_HOST: import.meta.env.PUBLIC_FLEEK_REST_API_HOST,
@@ -55,7 +56,13 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
     setIsLoading(true);
   };
 
+  const { billing } = useHasFanPlan();
+
   const openModal = () => {
+    if (billing?.activePlans) {
+      onCheckoutSuccess.current();
+      return;
+    }
     openSubscriptionModal({
       agent,
     });
@@ -68,39 +75,64 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
   const onCheckoutSuccess = useRef(() => {});
   const hasRun = useRef(false);
 
+  const { mutate: createThread } = useMutation({
+    mutationFn: async () => {
+      if (!accessToken) {
+        throw new Error('Missing accessToken');
+      }
+      const userId = getUserIdFromAccessToken(accessToken);
+      if (!userId) {
+        throw new Error('Missing userId');
+      }
+
+      return getOrCreateAgentThread({
+        userId,
+        accessToken,
+        projectId,
+        agentId: agent.id,
+      });
+    },
+    onSuccess: () => {
+      localStorage.setItem(
+        `fleek-xyz-influencer-payload-${agent.id}`,
+        JSON.stringify({
+          lead: userMsg,
+        }),
+      );
+      window.location.href = `${import.meta.env.PUBLIC_UI_AGENTS_APP_URL}/agent/${agent.id}`;
+    },
+    onError: (e) => {
+      console.error(e);
+      toast.error('Failed to create thread.');
+    },
+    onSettled: () => {
+      setIsLoading(false);
+    },
+    retry: 3,
+  });
+
   useEffect(() => {
     onCheckoutSuccess.current = async () => {
+      console.log('on checkout success!');
       if (hasRun.current) return;
       hasRun.current = true;
-      try {
-        if (!accessToken) {
-          throw new Error('Missing accessToken');
-        }
-        const userId = getUserIdFromAccessToken(accessToken);
-        if (!userId) {
-          throw new Error('Missing userId');
-        }
-
-        await getOrCreateAgentThread({
-          userId,
-          accessToken,
-          projectId,
-          agentId: agent.id,
-        });
-        window.location.href = `${import.meta.env.PUBLIC_UI_AGENTS_APP_URL}/agent/${agent.id}`;
-      } catch (e) {
-        console.error(e);
-        toast.error('Failed to create thread.');
-      }
+      setIsLoading(true);
+      createThread();
     };
-  }, [accessToken, projectId, agent]);
+  }, [createThread]);
+
+  const portalRef = useRef<React.ReactPortal>();
 
-  const { billing } = useHasFanPlan();
   useEffect(() => {
-    if (billing?.activePlans) {
-      onCheckoutSuccess.current();
+    if (isClient && !portalRef.current) {
+      portalRef.current = createPortal(
+        <div className="agents-ui">
+          <FanSubscriptionModal />
+        </div>,
+        document.body,
+      );
     }
-  }, [billing]);
+  }, []);
 
   return (
     <div className="p-12">
@@ -109,20 +141,12 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
         dynamicEnvironmentId={import.meta.env.PUBLIC_DYNAMIC_ENVIRONMENT_ID}
       >
         {(props) => {
-          return (
-            <>
-              {isClient &&
-                createPortal(
-                  <div className="agents-ui">
-                    <FanSubscriptionModal />
-                  </div>,
-                  document.body,
-                )}
-            </>
-          );
+          return <></>;
         }}
       </LoginProvider>
 
+      {portalRef.current}
+
       <div className="flex h-full flex-col rounded-12 border border-neutral-6 bg-gray-dark-2">
         <div className="flex items-center justify-between p-12">
           <div className="flex items-center gap-8">

From a047fcf1a17ed86d73952fc4e7427d73eb40c2f5 Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Wed, 7 May 2025 14:15:52 +0200
Subject: [PATCH 22/27] chore: align style to figma

---
 src/components/PublicAgents/Content/ChatBox.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PublicAgents/Content/ChatBox.tsx b/src/components/PublicAgents/Content/ChatBox.tsx
index 1ca24883c..5b2605b9a 100644
--- a/src/components/PublicAgents/Content/ChatBox.tsx
+++ b/src/components/PublicAgents/Content/ChatBox.tsx
@@ -49,13 +49,13 @@ export const ChatBox: React.FC<ChatBoxProps> = ({
           </Button>
         </div>
       )}
-      <div className="relative overflow-clip rounded-12 border border-neutral-6 bg-gray-dark-4">
+      <div className="relative overflow-clip rounded-12 border border-neutral-7 bg-gray-dark-4">
         {hasClosed && (
           <div className="absolute inset-0 z-10 cursor-not-allowed bg-gray-dark-3/50" />
         )}
         <textarea
           placeholder="Message..."
-          className="w-full resize-none bg-transparent p-16 text-neutral-12 outline-none [field-sizing:content] placeholder:text-neutral-8"
+          className="w-full resize-none bg-transparent p-12 text-neutral-12 outline-none [field-sizing:content] placeholder:text-neutral-8"
           value={msg}
           onChange={handleChange}
           onKeyDown={(e) => {

From 1c93280c5bbad9b00aba930efd854e10aa17e93d Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Wed, 7 May 2025 14:21:24 +0200
Subject: [PATCH 23/27] fix: add toast component

---
 src/components/PublicAgents/Content/index.tsx |  1 -
 src/components/PublicAgents/Dashboard.tsx     | 13 +++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index bedff0e6d..1f370aac9 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -113,7 +113,6 @@ export const Content: React.FC<ContentProps> = ({ agent }) => {
 
   useEffect(() => {
     onCheckoutSuccess.current = async () => {
-      console.log('on checkout success!');
       if (hasRun.current) return;
       hasRun.current = true;
       setIsLoading(true);
diff --git a/src/components/PublicAgents/Dashboard.tsx b/src/components/PublicAgents/Dashboard.tsx
index 0ae7b12dd..6b03270e5 100644
--- a/src/components/PublicAgents/Dashboard.tsx
+++ b/src/components/PublicAgents/Dashboard.tsx
@@ -2,9 +2,8 @@ import { Sidebar } from './Sidebar';
 import { AsideProfile } from './AsideProfile';
 import { Content } from './Content';
 import type { PublicAgent } from './config';
-import { useEffect } from 'react';
-import { useHasFanPlan } from '@fleek-platform/agents-ui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Toaster } from 'react-hot-toast';
 
 export const queryClient = new QueryClient();
 
@@ -20,6 +19,16 @@ export const Dashboard: React.FC<DashboardProps> = ({ agent }) => {
         <Content agent={agent} />
         <AsideProfile agent={agent} />
       </div>
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          style: {
+            background: '#222222',
+            color: '#fff',
+            fontSize: '12px',
+          },
+        }}
+      />
     </QueryClientProvider>
   );
 };

From 5b36911110dcfe4abf98df0777d9f3fd2fc2b963 Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Wed, 7 May 2025 19:44:09 +0200
Subject: [PATCH 24/27] chore: bump dependencies

---
 package-lock.json | 18 +++++++++---------
 package.json      |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a67dfb5e0..098043e54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,9 +14,9 @@
         "@astrojs/react": "^3.3.2",
         "@astrojs/sitemap": "^3.1.4",
         "@astrojs/tailwind": "^5.1.0",
-        "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.29.0.tgz",
+        "@fleek-platform/agents-ui": "8.29.2",
         "@fleek-platform/dashboard": "0.20.4",
-        "@fleek-platform/login-button": "2.15.1",
+        "@fleek-platform/login-button": "2.16.0",
         "@fleek-platform/sdk": "^3.6.2",
         "@fleek-platform/utils-token": "^0.2.2",
         "@hookform/resolvers": "^3.9.1",
@@ -4493,13 +4493,13 @@
       }
     },
     "node_modules/@fleek-platform/agents-ui": {
-      "version": "8.29.0",
-      "resolved": "file:../agents-ui/.install/fleek-platform-agents-ui-8.29.0.tgz",
-      "integrity": "sha512-6B0EA+XFibfRCg2jYO8UI4S/QQx8O97HGAVj5S6mIKcSeWD43cPOn7pG4pevXfYejEaLfSUqE4/K0WRPNbf67g==",
+      "version": "8.29.2",
+      "resolved": "https://registry.npmjs.org/@fleek-platform/agents-ui/-/agents-ui-8.29.2.tgz",
+      "integrity": "sha512-cgJIXy2bDPzsit1bpf+H4J9RiBXVKMGe297Nd9SLd5Rh1bikEdFEcyqK57dKNVZ8v8+3K+YhMr9HmFN8sEczKA==",
       "license": "MIT",
       "dependencies": {
         "@fleek-platform/agents-chatbox-widget": "^0.9.0",
-        "@fleek-platform/login-button": "2.15.1",
+        "@fleek-platform/login-button": "2.16.0",
         "@hookform/resolvers": "^3.9.1",
         "@langchain/core": "^0.3.46",
         "@langchain/langgraph-sdk": "^0.0.70",
@@ -6825,9 +6825,9 @@
       }
     },
     "node_modules/@fleek-platform/login-button": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/@fleek-platform/login-button/-/login-button-2.15.1.tgz",
-      "integrity": "sha512-E+1fY92c+jY58yrnJQ/UxhNTvmhz1tME+Z6szd4GmW9imo3uGmcOPJasu4lERggFaAbo4sGrWfKqijFOb9JCSQ==",
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@fleek-platform/login-button/-/login-button-2.16.0.tgz",
+      "integrity": "sha512-wNms1m7EWfUJvkC+4ZrnyzAH6SSX/O12Jj4XMgd/bw8+GV9gzHrdYnfcRwMpFJs2ViW44Ur8JjlzNYVrzv4kRw==",
       "license": "MIT",
       "dependencies": {
         "@dynamic-labs/ethereum": "4.14.0",
diff --git a/package.json b/package.json
index a58078b44..3b08cf385 100644
--- a/package.json
+++ b/package.json
@@ -54,9 +54,9 @@
     "@astrojs/react": "^3.3.2",
     "@astrojs/sitemap": "^3.1.4",
     "@astrojs/tailwind": "^5.1.0",
-    "@fleek-platform/agents-ui": "file:../agents-ui/.install/fleek-platform-agents-ui-8.29.0.tgz",
+    "@fleek-platform/agents-ui": "8.29.2",
     "@fleek-platform/dashboard": "0.20.4",
-    "@fleek-platform/login-button": "2.15.1",
+    "@fleek-platform/login-button": "2.16.0",
     "@fleek-platform/sdk": "^3.6.2",
     "@fleek-platform/utils-token": "^0.2.2",
     "@hookform/resolvers": "^3.9.1",

From 52d76e253c438d2202cdadd7d27d86852fd7ab2e Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Wed, 7 May 2025 19:45:35 +0200
Subject: [PATCH 25/27] chore bump agents-ui

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 098043e54..e7fc6fb55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@astrojs/react": "^3.3.2",
         "@astrojs/sitemap": "^3.1.4",
         "@astrojs/tailwind": "^5.1.0",
-        "@fleek-platform/agents-ui": "8.29.2",
+        "@fleek-platform/agents-ui": "8.30.0",
         "@fleek-platform/dashboard": "0.20.4",
         "@fleek-platform/login-button": "2.16.0",
         "@fleek-platform/sdk": "^3.6.2",
@@ -4493,9 +4493,9 @@
       }
     },
     "node_modules/@fleek-platform/agents-ui": {
-      "version": "8.29.2",
-      "resolved": "https://registry.npmjs.org/@fleek-platform/agents-ui/-/agents-ui-8.29.2.tgz",
-      "integrity": "sha512-cgJIXy2bDPzsit1bpf+H4J9RiBXVKMGe297Nd9SLd5Rh1bikEdFEcyqK57dKNVZ8v8+3K+YhMr9HmFN8sEczKA==",
+      "version": "8.30.0",
+      "resolved": "https://registry.npmjs.org/@fleek-platform/agents-ui/-/agents-ui-8.30.0.tgz",
+      "integrity": "sha512-7eUEkhRAg7NPXrguMOSIMWXZZEa7uJzRhlUOTJd+03CjvmYRp8ZP/QWRitsUfURqBrY8lDC+HgUd8JEwBLm1zA==",
       "license": "MIT",
       "dependencies": {
         "@fleek-platform/agents-chatbox-widget": "^0.9.0",
diff --git a/package.json b/package.json
index 3b08cf385..432cf2927 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@astrojs/react": "^3.3.2",
     "@astrojs/sitemap": "^3.1.4",
     "@astrojs/tailwind": "^5.1.0",
-    "@fleek-platform/agents-ui": "8.29.2",
+    "@fleek-platform/agents-ui": "8.30.0",
     "@fleek-platform/dashboard": "0.20.4",
     "@fleek-platform/login-button": "2.16.0",
     "@fleek-platform/sdk": "^3.6.2",

From 7d5452bdf7b39c6d27e092d2a97173fc3e94aea3 Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Wed, 7 May 2025 19:47:55 +0200
Subject: [PATCH 26/27] chore: add custom agents url to set defined

---
 src/components/PublicAgents/Content/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PublicAgents/Content/index.tsx b/src/components/PublicAgents/Content/index.tsx
index 1f370aac9..958ffd87a 100644
--- a/src/components/PublicAgents/Content/index.tsx
+++ b/src/components/PublicAgents/Content/index.tsx
@@ -25,6 +25,7 @@ import { useMutation } from '@tanstack/react-query';
 
 setDefined({
   PUBLIC_FLEEK_REST_API_HOST: import.meta.env.PUBLIC_FLEEK_REST_API_HOST,
+  PUBLIC_CUSTOM_AGENTS_URL: import.meta.env.PUBLIC_CUSTOM_AGENTS_URL,
 });
 
 type ContentProps = {

From 17a6240e98fc2f6ec603433e8ca4c086db00247e Mon Sep 17 00:00:00 2001
From: Alen Ajam <alen@fleek.xyz>
Date: Wed, 7 May 2025 20:04:40 +0200
Subject: [PATCH 27/27] docs(readme): add env var

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6ff33ea5b..ec7e0322f 100644
--- a/README.md
+++ b/README.md
@@ -132,6 +132,7 @@ PUBLIC_POSTHOG_API_KEY="phc_SdvLWEagL7nAauyEBun0ZF6v59DxMIk8ofzI91gpIUw"
 PUBLIC_OPEN_API_ENDPOINT="https://api.fleek.xyz/api/openapi.json"
 PUBLIC_FLEEK_WEBSITE_URL="https://fleek.xyz"
 PUBLIC_PERSONA_GENERATOR_API_URL="https://persona-generator.flkservices.io"
+PUBLIC_CUSTOM_AGENTS_URL="https://social-agent.platform.fleek.xyz"
 ```
 
 💡 The SUPPORT_ALLOW_ORIGIN_ADDR and SUPPORT_RATE_LIMIT_PATHS are comma separated values (csv). the MEILISEARCH_DOCUMENTS_CLIENT_API_KEY is required when querying staging, production environments which should be provided in the headers.
@@ -668,7 +669,7 @@ Open the [settings.json](./src/settings.json) and locate the property `agentsAdm
 "agentsAdminNotification": {
   "authenticatedUsers": {
     "message": "When we have capacity to deploy new AI agents you will be first in line. Please try again later!",
-    "enable": false      
+    "enable": false
   },
   "default": {
     "message": "We're currently over capacity and unable to deploy new AI agents. Sign in now to save time and try again later!",