Skip to content

Commit 9f43fe1

Browse files
Bran18AndlerRL
Bran18
and
AndlerRL
authored
[masterbots.ai] feat: onboarding bot profile variants (#324)
* add chatbot-details and browse-details variants * feat: add bio generation * feat: chat profile bg * chore: update bot profile designs * chore: remove internal padding from cardHeader component * impr: iconography + border thickness * fix: numberShortener util fn --------- Co-authored-by: Roberto Lucas <andler.dev@gmail.com>
1 parent 6d813f1 commit 9f43fe1

15 files changed

+819
-254
lines changed

‎apps/masterbots.ai/app/b/[id]/page.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import type { Metadata } from 'next'
88
const PAGE_SIZE = 50
99

1010
export default async function BotThreadsPage({
11-
params,
11+
params
1212
}: {
1313
params: { id: string }
1414
}) {
@@ -17,24 +17,31 @@ export default async function BotThreadsPage({
1717
chatbot = await getChatbot({
1818
chatbotName: botNames.get(params.id),
1919
jwt: '',
20-
threads: true,
20+
threads: true
2121
})
2222
if (!chatbot) throw new Error(`Chatbot ${botNames.get(params.id)} not found`)
2323

2424
// session will always be defined
2525
threads = await getBrowseThreads({
2626
chatbotName: botNames.get(params.id),
27-
limit: PAGE_SIZE,
27+
limit: PAGE_SIZE
2828
})
2929

3030
return (
31-
<div className="w-full py-5">
32-
{chatbot ? <BrowseChatbotDetails chatbot={chatbot} /> : ''}
31+
<div className="w-full">
32+
{chatbot ? (
33+
<BrowseChatbotDetails
34+
chatbot={chatbot}
35+
variant={chatbot.name ? 'selected' : 'default'}
36+
/>
37+
) : (
38+
''
39+
)}
3340
<BrowseSpecificThreadList
3441
initialThreads={threads}
3542
PAGE_SIZE={PAGE_SIZE}
3643
query={{
37-
chatbotName: botNames.get(params.id),
44+
chatbotName: botNames.get(params.id)
3845
}}
3946
pageType="bot"
4047
/>
@@ -43,22 +50,22 @@ export default async function BotThreadsPage({
4350
}
4451

4552
export async function generateMetadata({
46-
params,
53+
params
4754
}: {
4855
params: { id: string }
4956
}): Promise<Metadata> {
5057
const chatbot = await getChatbot({
5158
chatbotName: botNames.get(params.id),
5259
jwt: '',
53-
threads: true,
60+
threads: true
5461
})
5562

5663
const seoData = {
5764
title: chatbot?.name || '',
5865
description: chatbot?.description || '',
5966
ogType: 'website',
6067
ogImageUrl: chatbot?.avatar || '',
61-
twitterCard: 'summary_large_image',
68+
twitterCard: 'summary_large_image'
6269
}
6370

6471
return generateMetadataFromSEO(seoData)

‎apps/masterbots.ai/app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,5 +303,5 @@
303303
}
304304

305305
.lucide {
306-
stroke-width: 1px;
306+
stroke-width: 1.25px;
307307
}

‎apps/masterbots.ai/components/routes/browse/browse-chat-messages.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,14 @@ export function BrowseChatMessages({
6060

6161
return (
6262
<div className="w-full">
63-
<BrowseChatbotDetails chatbot={chatbot} />
63+
{chatbot ? (
64+
<BrowseChatbotDetails
65+
chatbot={chatbot}
66+
variant={chatbot.name ? 'selected' : 'default'}
67+
/>
68+
) : (
69+
''
70+
)}
6471
<div className="flex flex-col max-w-screen-lg px-4 mx-auto mt-8 gap-y-4">
6572
<BrowseChatMessageList
6673
user={user}

‎apps/masterbots.ai/components/routes/browse/browse-chatbot-desktop-details.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import ShareLink from '@/components/routes/thread/thread-share-link'
2+
import { Button } from '@/components/ui/button'
3+
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
4+
import { cn, numberShortener } from '@/lib/utils'
5+
import type { BrowseChatbotLayoutProps } from '@/types/types'
6+
import { Bot, BotMessageSquareIcon, ChevronLeft, MessageSquarePlusIcon, Users } from 'lucide-react'
7+
import Image from 'next/image'
8+
import Link from 'next/link'
9+
10+
export function BrowseChatbotDesktopDetails({
11+
chatbot,
12+
variant,
13+
isWelcomeView,
14+
descriptionPoints,
15+
hasMultiplePoints,
16+
botUrl
17+
}: BrowseChatbotLayoutProps) {
18+
return (
19+
<div className="hidden md:block w-full relative bg-left-bottom bg-[url('/hero-bg.png')] bg-no-repeat py-6">
20+
<div className="absolute inset-0 z-0 bg-gradient-to-l from-mirage via-[#6A0D826E]/80 to-[#9412B5BF] dark:via-[#66B252BF]/80 dark:to-[#83E56A6B]/80" />
21+
<div className="relative z-10">
22+
<div className="max-w-[600px] mx-auto mb-4">
23+
<Link
24+
href="/"
25+
className="flex items-center leading-none gap-2 text-white/80 dark:text-[#09090BC3] hover:text-white dark:hover:text-[#09090B]"
26+
>
27+
<ChevronLeft className="size-4" />
28+
<span>Back to browse</span>
29+
</Link>
30+
</div>
31+
<Card className="relative max-w-[600px] dark:bg-[#09090B] bg-white mx-auto">
32+
<CardHeader>
33+
<div className="flex items-center gap-3">
34+
<h1 className="p-4 text-2xl font-bold text-zinc-950 dark:text-gray-300">
35+
{isWelcomeView ? 'Welcome to Masterbots!' : chatbot.name}
36+
</h1>
37+
<ShareLink
38+
variant={variant === 'selected' ? 'active' : 'default'}
39+
/>
40+
</div>
41+
</CardHeader>
42+
<CardContent className="p-0">
43+
<div className="flex items-center text-zinc-950 dark:text-gray-400" />
44+
<div className="flex items-center p-4">
45+
<Bot className="size-4" />
46+
<span className='px-1'>bio:</span>
47+
</div>
48+
49+
<div className="relative p-4 border-t-[3px] border-zinc-200 dark:border-gray-800">
50+
<div className="absolute right-0 flex flex-col items-center gap-4 px-4 -top-12">
51+
<div
52+
className={cn(
53+
'size-32 rounded-full overflow-hidden p-0 m-0',
54+
'bg-iron dark:bg-mirage',
55+
'ring-4 ring-[#be16e8] dark:ring-[#82e46a]'
56+
)}
57+
>
58+
<Image
59+
src={chatbot?.avatar || ''}
60+
alt={`${chatbot.name} avatar`}
61+
className="object-cover !relative w-full h-full"
62+
fill
63+
/>
64+
</div>
65+
66+
<Button
67+
asChild
68+
className={cn(
69+
'w-full flex items-center gap-2 px-4 py-2 rounded-md mt-4',
70+
'bg-[#be16e8] hover:bg-[#be16e8]/90',
71+
'dark:bg-[#82e46a] dark:hover:bg-[#82e46a]/90',
72+
'text-white dark:text-zinc-950'
73+
)}
74+
>
75+
<Link href={botUrl} className="flex items-center gap-2">
76+
<MessageSquarePlusIcon className="size-4" />
77+
<span>New Chat</span>
78+
</Link>
79+
</Button>
80+
</div>
81+
82+
<div className="max-w-[calc(100%-200px)]">
83+
{hasMultiplePoints ? (
84+
<>
85+
<p className="mb-2 text-zinc-500 dark:text-zinc-500">
86+
{descriptionPoints[0]}
87+
</p>
88+
<ul className="space-y-1 list-none">
89+
{descriptionPoints.slice(1).map((point, index) => (
90+
<li
91+
key={`point-${
92+
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
93+
index
94+
}`}
95+
className="text-gray-400"
96+
>
97+
• {point}
98+
</li>
99+
))}
100+
</ul>
101+
</>
102+
) : (
103+
<p className="text-gray-400">{chatbot.description}</p>
104+
)}
105+
</div>
106+
</div>
107+
</CardContent>
108+
109+
<CardFooter className="flex flex-col space-y-4">
110+
<div className="flex items-center w-full">
111+
<div className="flex items-center gap-2 text-zinc-950 dark:text-gray-300">
112+
<BotMessageSquareIcon className="size-4" />
113+
<span>
114+
Threads:{' '}
115+
<span className="text-gray-400">
116+
{numberShortener(chatbot.threads.length)}
117+
</span>
118+
</span>
119+
</div>
120+
</div>
121+
122+
<div className="flex items-center justify-between w-full">
123+
<div className="flex items-center gap-4">
124+
<div className="flex items-center gap-2 text-zinc-950 dark:text-gray-300">
125+
<Users className="size-4" />
126+
<span>
127+
Followers: <span className="text-gray-400">
128+
{numberShortener(3200)}
129+
</span>
130+
</span>
131+
</div>
132+
<Button
133+
variant="outline"
134+
size="sm"
135+
className={cn(
136+
'h-[21px] px-3 py-0.5 rounded-md shadow',
137+
'border border-zinc-100/50',
138+
'font-normal text-zinc-500 text-sm',
139+
'flex justify-center items-center gap-1'
140+
)}
141+
>
142+
Follow
143+
</Button>
144+
</div>
145+
</div>
146+
</CardFooter>
147+
</Card>
148+
</div>
149+
</div>
150+
)
151+
}

0 commit comments

Comments
 (0)