Chat App
A messaging app with channel sidebar, message thread, and rich compose.
Alert Dialog
Avatar
Badge
Button
Button Group
Checkbox
Collapsible
Command
Dialog
Dropdown Menu
Empty
File Upload
Hover Card
Input
Input OTP
Item
Popover
Resizable
Rich Text Editor
Scroll Area
Separator
Sidebar
Skeleton
Switch
Tabs
Textarea
Toggle
Toggle Group
Tooltip
Preview
Open full demo
general
24 members
January 15, 2026
SC
Sarah Chen
9:32 AM
Good morning team! Just pushed the latest API changes to staging. Can everyone take a look when you get a chance?
MR
Marcus Rivera
9:45 AM
Looks great! I tested the authentication flow and everything works smoothly. The response times are much better now. 🚀
EW
Emma Wilson
10:02 AM
I've updated the design specs for the new dashboard. Here's the latest mockup:
dashboard-mockup.png
1.8 MB
JK
James Kim
10:15 AM
The design looks amazing, Emma! One small thing - can we increase the contrast on the sidebar text? It might be hard to read in light mode.
EW
Emma Wilson
10:22 AM
Good catch, James! I'll bump up the contrast ratio. Should have an updated version by this afternoon.
SC
Sarah Chen
10:30 AM
Quick update - the staging deploy is live now. I also fixed that edge case with the token refresh. @Marcus can you verify on your end?
MR
Marcus Rivera
10:48 AM
Just checked - token refresh is working perfectly now. No more 401s on long sessions. Nice work Sarah!
JK
James Kim
11:05 AM
Hey team, reminder that we have the sprint retro at 2pm today. Please add your items to the board before then.
Sprint 24 - Retro Board
FigJam
SC
Sarah Chen
11:12 AM
Thanks for the reminder! I've added my items already. Also, can someone review my PR #247? It's the new search feature.
MR
Marcus Rivera
11:30 AM
I'll take a look at that PR after lunch, Sarah. Also wanted to flag - we should probably add rate limiting to the new search endpoint before it goes live.
JK
James Kim
11:45 AM
Good point on rate limiting. I actually have a middleware for that we used on the analytics service - I can share the code.
// RateLimitMiddleware.cs
app.UseRateLimiter(options => {
options.GlobalLimiter = ...
});
app.UseRateLimiter(options => {
options.GlobalLimiter = ...
});
EW
Emma Wilson
12:10 PM
Updated the sidebar contrast - here's the before/after comparison. Let me know if this works better!
sidebar-contrast-comparison.png
2.4 MB
JK
James Kim
12:18 PM
That's so much better! The difference is really noticeable in light mode now. Ship it! 🎨
SC
Sarah Chen
1:05 PM
Back from lunch. @Marcus great idea on the rate limiting - let's add that to the sprint backlog. @James can you open a ticket for it?
MR
Marcus Rivera
1:15 PM
Reviewed PR #247 - left a few comments but overall looks solid. Just a couple of edge cases around empty query strings we should handle.
AL
Ava Li
1:30 PM
Hey everyone! Just joined the channel. I'm starting on the QA team next week. Looking forward to working with all of you! 👋
JK
James Kim
1:35 PM
Welcome aboard, Ava! 🙌 Ticket for rate limiting is created - SPRINT-892. I also linked James's middleware snippet in the description.
SC
Sarah Chen
1:50 PM
Welcome Ava! 🎉 Feel free to reach out if you need anything. Also - retro starts in 10 mins, everyone head over to the FigJam board!
Interactive Demo
This app demo is best experienced in full-screen mode on mobile devices. Tap below to open the interactive demo.
Code
<BbSidebarProvider HeightClass="h-dvh" CookieKey=@(null)>
@* Sidebar *@
<BbSidebar Collapsible="false">
<BbSidebarHeader>
<BbDropdownMenu>
<BbDropdownMenuTrigger AsChild="false" Class="w-full">
<div class="flex items-center justify-between px-3 h-12 cursor-pointer hover:bg-sidebar-accent/50 rounded-md transition-colors">
<div class="flex items-center gap-2">
<div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground">
<LucideIcon Name="message-circle" class="h-4 w-4" />
</div>
<span class="text-sm font-semibold">Acme Team</span>
</div>
<LucideIcon Name="chevron-down" class="h-3.5 w-3.5 text-muted-foreground" />
</div>
</BbDropdownMenuTrigger>
<BbDropdownMenuContent MatchTriggerWidth="true">
<BbDropdownMenuLabel>Workspaces</BbDropdownMenuLabel>
<BbDropdownMenuSeparator />
<BbDropdownMenuItem>
<LucideIcon Name="check" class="mr-2 h-4 w-4" />
Acme Team
</BbDropdownMenuItem>
<BbDropdownMenuItem>
<span class="mr-6"></span>
Personal
</BbDropdownMenuItem>
<BbDropdownMenuSeparator />
<BbDropdownMenuItem>
<LucideIcon Name="user-plus" class="mr-2 h-4 w-4" />
Invite People
</BbDropdownMenuItem>
<BbDropdownMenuItem>
<LucideIcon Name="settings" class="mr-2 h-4 w-4" />
Workspace Settings
</BbDropdownMenuItem>
<BbDropdownMenuItem>
<LucideIcon Name="plus" class="mr-2 h-4 w-4" />
Create Workspace
</BbDropdownMenuItem>
<BbDropdownMenuSeparator />
<BbDropdownMenuItem Class="text-destructive">
<LucideIcon Name="log-out" class="mr-2 h-4 w-4" />
Sign Out
</BbDropdownMenuItem>
</BbDropdownMenuContent>
</BbDropdownMenu>
</BbSidebarHeader>
<BbSidebarContent Class="flex-1 overflow-auto px-2">
<BbSidebarGroup>
<BbCollapsible DefaultOpen="true">
<BbCollapsibleTrigger AsChild="false" Class="w-full">
<BbSidebarGroupLabel Class="cursor-pointer hover:bg-sidebar-accent/50 rounded-md">
<LucideIcon Name="chevron-down" class="h-3.5 w-3.5 mr-1" />
Channels
</BbSidebarGroupLabel>
</BbCollapsibleTrigger>
<BbCollapsibleContent>
<BbSidebarMenu>
<BbSidebarMenuItem>
<BbSidebarMenuButton IsActive="true" Class="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<LucideIcon Name="hash" class="h-4 w-4" />
<span>general</span>
</BbSidebarMenuButton>
</BbSidebarMenuItem>
<BbSidebarMenuItem>
<BbSidebarMenuButton Class="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<LucideIcon Name="hash" class="h-4 w-4" />
<span>engineering</span>
<BbBadge Variant="BadgeVariant.Secondary" Class="ml-auto h-5 px-1.5 text-[10px]">5</BbBadge>
</BbSidebarMenuButton>
</BbSidebarMenuItem>
<BbSidebarMenuItem>
<BbSidebarMenuButton Class="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<LucideIcon Name="hash" class="h-4 w-4" />
<span>design</span>
<BbBadge Variant="BadgeVariant.Secondary" Class="ml-auto h-5 px-1.5 text-[10px]">2</BbBadge>
</BbSidebarMenuButton>
</BbSidebarMenuItem>
<BbSidebarMenuItem>
<BbSidebarMenuButton Class="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<LucideIcon Name="hash" class="h-4 w-4" />
<span>random</span>
</BbSidebarMenuButton>
</BbSidebarMenuItem>
</BbSidebarMenu>
</BbCollapsibleContent>
</BbCollapsible>
</BbSidebarGroup>
<BbSidebarGroup>
<BbCollapsible DefaultOpen="true">
<BbCollapsibleTrigger AsChild="false" Class="w-full">
<BbSidebarGroupLabel Class="cursor-pointer hover:bg-sidebar-accent/50 rounded-md">
<LucideIcon Name="chevron-down" class="h-3.5 w-3.5 mr-1" />
Direct Messages
</BbSidebarGroupLabel>
</BbCollapsibleTrigger>
<BbCollapsibleContent>
<BbSidebarMenu>
<BbSidebarMenuItem>
<BbSidebarMenuButton Class="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="relative">
<BbAvatar Size="AvatarSize.Small" Class="h-5 w-5">
<BbAvatarFallback Class="text-[8px] bg-blue-100 text-blue-700">SC</BbAvatarFallback>
</BbAvatar>
<span class="absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full bg-green-500 border border-sidebar"></span>
</div>
<span>Sarah Chen</span>
</BbSidebarMenuButton>
</BbSidebarMenuItem>
<BbSidebarMenuItem>
<BbSidebarMenuButton Class="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="relative">
<BbAvatar Size="AvatarSize.Small" Class="h-5 w-5">
<BbAvatarFallback Class="text-[8px] bg-green-100 text-green-700">MR</BbAvatarFallback>
</BbAvatar>
<span class="absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full bg-green-500 border border-sidebar"></span>
</div>
<span>Marcus Rivera</span>
</BbSidebarMenuButton>
</BbSidebarMenuItem>
<BbSidebarMenuItem>
<BbSidebarMenuButton Class="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="relative">
<BbAvatar Size="AvatarSize.Small" Class="h-5 w-5">
<BbAvatarFallback Class="text-[8px] bg-purple-100 text-purple-700">EW</BbAvatarFallback>
</BbAvatar>
<span class="absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full bg-gray-400 border border-sidebar"></span>
</div>
<span class="text-muted-foreground">Emma Wilson</span>
</BbSidebarMenuButton>
</BbSidebarMenuItem>
</BbSidebarMenu>
</BbCollapsibleContent>
</BbCollapsible>
</BbSidebarGroup>
</BbSidebarContent>
</BbSidebar>
@* Main Chat Area *@
<BbSidebarInset Class="flex flex-col bg-background min-w-0 min-h-0">
@* Channel Header *@
<header class="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
<div class="flex items-center gap-2">
<BbSidebarTrigger Class="h-8 w-8 md:hidden">
<LucideIcon Name="menu" class="h-4 w-4" />
</BbSidebarTrigger>
<LucideIcon Name="hash" class="h-4 w-4 text-muted-foreground" />
<span class="text-sm font-semibold">general</span>
<BbBadge Variant="BadgeVariant.Secondary" Class="text-[10px] h-4 px-1.5">24 members</BbBadge>
</div>
<div class="flex items-center gap-1">
<BbPopover>
<BbPopoverTrigger>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-8 w-8">
<LucideIcon Name="info" class="h-4 w-4" />
</BbButton>
</BbPopoverTrigger>
<BbPopoverContent Class="w-80" Align="PopoverAlign.End">
<div class="space-y-2">
<h4 class="text-sm font-semibold"># general</h4>
<p class="text-xs text-muted-foreground">Company-wide announcements and general discussion.</p>
<BbSeparator />
<div class="text-xs text-muted-foreground">
<span class="font-medium">Topic:</span> Welcome to the team chat!
</div>
</div>
</BbPopoverContent>
</BbPopover>
<BbTooltip>
<BbTooltipTrigger>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-8 w-8">
<LucideIcon Name="search" class="h-4 w-4" />
</BbButton>
</BbTooltipTrigger>
<BbTooltipContent>
<span>Search messages</span>
</BbTooltipContent>
</BbTooltip>
</div>
</header>
@* Message Area *@
<div id="chat-demo-messages" class="flex-1 min-h-0 overflow-y-auto px-4">
<div class="py-4 space-y-4">
@* Date Separator *@
<div class="relative py-4">
<div class="absolute inset-0 flex items-center">
<BbSeparator />
</div>
<div class="relative flex justify-center">
<span class="bg-background px-3 text-xs text-muted-foreground">January 15, 2026</span>
</div>
</div>
@* Message 1 *@
<div class="flex items-start gap-3 group">
<BbHoverCard>
<BbHoverCardTrigger>
<BbAvatar Class="cursor-pointer">
<BbAvatarFallback Class="bg-blue-100 text-blue-700">SC</BbAvatarFallback>
</BbAvatar>
</BbHoverCardTrigger>
<BbHoverCardContent Class="w-72">
<div class="flex items-start gap-3">
<BbAvatar>
<BbAvatarFallback Class="bg-blue-100 text-blue-700">SC</BbAvatarFallback>
</BbAvatar>
<div class="space-y-1">
<h4 class="text-sm font-semibold">Sarah Chen</h4>
<p class="text-xs text-muted-foreground">VP of Engineering</p>
<div class="flex items-center gap-1 text-xs text-muted-foreground">
<span class="h-2 w-2 rounded-full bg-green-500"></span>
Active now
</div>
</div>
</div>
</BbHoverCardContent>
</BbHoverCard>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Sarah Chen</span>
<span class="text-[10px] text-muted-foreground">9:32 AM</span>
</div>
<p class="text-sm mt-0.5">Good morning team! Just pushed the latest API changes to staging. Can everyone take a look when you get a chance?</p>
<div class="flex gap-1 mt-2">
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small" Class="h-6 text-xs px-2 gap-1">
👍 <span class="text-muted-foreground">3</span>
</BbButton>
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small" Class="h-6 text-xs px-2 gap-1">
🎉 <span class="text-muted-foreground">1</span>
</BbButton>
</div>
</div>
</div>
@* Message 2 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-green-100 text-green-700">MR</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Marcus Rivera</span>
<span class="text-[10px] text-muted-foreground">9:45 AM</span>
</div>
<p class="text-sm mt-0.5">Looks great! I tested the authentication flow and everything works smoothly. The response times are much better now. 🚀</p>
</div>
</div>
@* Message 3 - with file attachment *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-purple-100 text-purple-700">EW</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Emma Wilson</span>
<span class="text-[10px] text-muted-foreground">10:02 AM</span>
</div>
<p class="text-sm mt-0.5">I've updated the design specs for the new dashboard. Here's the latest mockup:</p>
<div class="mt-2 rounded-md border p-2 max-w-xs flex items-center gap-2 bg-muted/30">
<div class="flex h-8 w-8 items-center justify-center rounded bg-primary/10">
<LucideIcon Name="image" class="h-4 w-4 text-primary" />
</div>
<div class="flex-1 min-w-0">
<p class="text-xs font-medium truncate">dashboard-mockup.png</p>
<p class="text-[10px] text-muted-foreground">1.8 MB</p>
</div>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-6 w-6">
<LucideIcon Name="download" class="h-3.5 w-3.5" />
</BbButton>
</div>
</div>
</div>
@* Message 4 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-amber-100 text-amber-700">JK</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">James Kim</span>
<span class="text-[10px] text-muted-foreground">10:15 AM</span>
</div>
<p class="text-sm mt-0.5">The design looks amazing, Emma! One small thing - can we increase the contrast on the sidebar text? It might be hard to read in light mode.</p>
</div>
</div>
@* Message 5 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-purple-100 text-purple-700">EW</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Emma Wilson</span>
<span class="text-[10px] text-muted-foreground">10:22 AM</span>
</div>
<p class="text-sm mt-0.5">Good catch, James! I'll bump up the contrast ratio. Should have an updated version by this afternoon.</p>
</div>
</div>
@* Message 6 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-blue-100 text-blue-700">SC</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Sarah Chen</span>
<span class="text-[10px] text-muted-foreground">10:30 AM</span>
</div>
<p class="text-sm mt-0.5">Quick update - the staging deploy is live now. I also fixed that edge case with the token refresh. @@Marcus can you verify on your end?</p>
<div class="flex gap-1 mt-2">
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small" Class="h-6 text-xs px-2 gap-1">
👀 <span class="text-muted-foreground">2</span>
</BbButton>
</div>
</div>
</div>
@* Message 7 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-green-100 text-green-700">MR</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Marcus Rivera</span>
<span class="text-[10px] text-muted-foreground">10:48 AM</span>
</div>
<p class="text-sm mt-0.5">Just checked - token refresh is working perfectly now. No more 401s on long sessions. Nice work Sarah!</p>
</div>
</div>
@* Message 8 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-amber-100 text-amber-700">JK</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">James Kim</span>
<span class="text-[10px] text-muted-foreground">11:05 AM</span>
</div>
<p class="text-sm mt-0.5">Hey team, reminder that we have the sprint retro at 2pm today. Please add your items to the board before then.</p>
<div class="mt-2 rounded-md border p-2 max-w-xs flex items-center gap-2 bg-muted/30">
<div class="flex h-8 w-8 items-center justify-center rounded bg-primary/10">
<LucideIcon Name="file-text" class="h-4 w-4 text-primary" />
</div>
<div class="flex-1 min-w-0">
<p class="text-xs font-medium truncate">Sprint 24 - Retro Board</p>
<p class="text-[10px] text-muted-foreground">FigJam</p>
</div>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-6 w-6">
<LucideIcon Name="external-link" class="h-3.5 w-3.5" />
</BbButton>
</div>
</div>
</div>
@* Message 9 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-blue-100 text-blue-700">SC</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Sarah Chen</span>
<span class="text-[10px] text-muted-foreground">11:12 AM</span>
</div>
<p class="text-sm mt-0.5">Thanks for the reminder! I've added my items already. Also, can someone review my PR #247? It's the new search feature.</p>
<div class="flex gap-1 mt-2">
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small" Class="h-6 text-xs px-2 gap-1">
👍 <span class="text-muted-foreground">1</span>
</BbButton>
</div>
</div>
</div>
@* Message 10 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-green-100 text-green-700">MR</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Marcus Rivera</span>
<span class="text-[10px] text-muted-foreground">11:30 AM</span>
</div>
<p class="text-sm mt-0.5">I'll take a look at that PR after lunch, Sarah. Also wanted to flag - we should probably add rate limiting to the new search endpoint before it goes live.</p>
</div>
</div>
@* Message 11 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-amber-100 text-amber-700">JK</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">James Kim</span>
<span class="text-[10px] text-muted-foreground">11:45 AM</span>
</div>
<p class="text-sm mt-0.5">Good point on rate limiting. I actually have a middleware for that we used on the analytics service - I can share the code.</p>
<div class="mt-2 rounded-md border p-3 max-w-sm bg-muted/30 font-mono text-xs">
<span class="text-muted-foreground">// RateLimitMiddleware.cs</span><br />
app.UseRateLimiter(options => {<br />
options.GlobalLimiter = ...<br />
});
</div>
<div class="flex gap-1 mt-2">
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small" Class="h-6 text-xs px-2 gap-1">
🙏 <span class="text-muted-foreground">2</span>
</BbButton>
</div>
</div>
</div>
@* Message 12 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-purple-100 text-purple-700">EW</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Emma Wilson</span>
<span class="text-[10px] text-muted-foreground">12:10 PM</span>
</div>
<p class="text-sm mt-0.5">Updated the sidebar contrast - here's the before/after comparison. Let me know if this works better!</p>
<div class="mt-2 rounded-md border p-2 max-w-xs flex items-center gap-2 bg-muted/30">
<div class="flex h-8 w-8 items-center justify-center rounded bg-primary/10">
<LucideIcon Name="image" class="h-4 w-4 text-primary" />
</div>
<div class="flex-1 min-w-0">
<p class="text-xs font-medium truncate">sidebar-contrast-comparison.png</p>
<p class="text-[10px] text-muted-foreground">2.4 MB</p>
</div>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-6 w-6">
<LucideIcon Name="download" class="h-3.5 w-3.5" />
</BbButton>
</div>
</div>
</div>
@* Message 13 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-amber-100 text-amber-700">JK</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">James Kim</span>
<span class="text-[10px] text-muted-foreground">12:18 PM</span>
</div>
<p class="text-sm mt-0.5">That's so much better! The difference is really noticeable in light mode now. Ship it! 🎨</p>
<div class="flex gap-1 mt-2">
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small" Class="h-6 text-xs px-2 gap-1">
💯 <span class="text-muted-foreground">3</span>
</BbButton>
</div>
</div>
</div>
@* Message 14 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-blue-100 text-blue-700">SC</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Sarah Chen</span>
<span class="text-[10px] text-muted-foreground">1:05 PM</span>
</div>
<p class="text-sm mt-0.5">Back from lunch. @@Marcus great idea on the rate limiting - let's add that to the sprint backlog. @@James can you open a ticket for it?</p>
</div>
</div>
@* Message 15 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-green-100 text-green-700">MR</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Marcus Rivera</span>
<span class="text-[10px] text-muted-foreground">1:15 PM</span>
</div>
<p class="text-sm mt-0.5">Reviewed PR #247 - left a few comments but overall looks solid. Just a couple of edge cases around empty query strings we should handle.</p>
<div class="flex gap-1 mt-2">
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small" Class="h-6 text-xs px-2 gap-1">
👍 <span class="text-muted-foreground">1</span>
</BbButton>
</div>
</div>
</div>
@* Message 16 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-rose-100 text-rose-700">AL</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Ava Li</span>
<span class="text-[10px] text-muted-foreground">1:30 PM</span>
</div>
<p class="text-sm mt-0.5">Hey everyone! Just joined the channel. I'm starting on the QA team next week. Looking forward to working with all of you! 👋</p>
<div class="flex gap-1 mt-2">
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small" Class="h-6 text-xs px-2 gap-1">
👋 <span class="text-muted-foreground">4</span>
</BbButton>
<BbButton Variant="ButtonVariant.Outline" Size="ButtonSize.Small" Class="h-6 text-xs px-2 gap-1">
🎉 <span class="text-muted-foreground">3</span>
</BbButton>
</div>
</div>
</div>
@* Message 17 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-amber-100 text-amber-700">JK</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">James Kim</span>
<span class="text-[10px] text-muted-foreground">1:35 PM</span>
</div>
<p class="text-sm mt-0.5">Welcome aboard, Ava! 🙌 Ticket for rate limiting is created - SPRINT-892. I also linked James's middleware snippet in the description.</p>
</div>
</div>
@* Message 18 *@
<div class="flex items-start gap-3 group">
<BbAvatar>
<BbAvatarFallback Class="bg-blue-100 text-blue-700">SC</BbAvatarFallback>
</BbAvatar>
<div class="flex-1 min-w-0">
<div class="flex items-baseline gap-2">
<span class="text-sm font-semibold">Sarah Chen</span>
<span class="text-[10px] text-muted-foreground">1:50 PM</span>
</div>
<p class="text-sm mt-0.5">Welcome Ava! 🎉 Feel free to reach out if you need anything. Also - retro starts in 10 mins, everyone head over to the FigJam board!</p>
</div>
</div>
</div>
</div>
@* Compose Area *@
<div class="border-t p-3 shrink-0">
<div class="rounded-lg border bg-card">
@* Formatting Toolbar *@
<div class="flex items-center gap-1 px-2 py-2 border-b">
<BbToggleGroup TValue="string" Type="ToggleGroupType.Multiple" Class="gap-0.5">
<BbToggleGroupItem Value=@("bold") Class="h-9 w-9 p-0">
<LucideIcon Name="bold" class="h-[18px] w-[18px]" />
</BbToggleGroupItem>
<BbToggleGroupItem Value=@("italic") Class="h-9 w-9 p-0">
<LucideIcon Name="italic" class="h-[18px] w-[18px]" />
</BbToggleGroupItem>
<BbToggleGroupItem Value=@("strikethrough") Class="h-9 w-9 p-0">
<LucideIcon Name="strikethrough" class="h-[18px] w-[18px]" />
</BbToggleGroupItem>
</BbToggleGroup>
<BbSeparator Orientation="SeparatorOrientation.Vertical" Class="h-5 mx-1" />
<BbTooltip>
<BbTooltipTrigger>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-9 w-9">
<LucideIcon Name="link" class="h-[18px] w-[18px]" />
</BbButton>
</BbTooltipTrigger>
<BbTooltipContent>
<span>Add link</span>
</BbTooltipContent>
</BbTooltip>
<BbTooltip>
<BbTooltipTrigger>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-9 w-9">
<LucideIcon Name="list" class="h-[18px] w-[18px]" />
</BbButton>
</BbTooltipTrigger>
<BbTooltipContent>
<span>Bulleted list</span>
</BbTooltipContent>
</BbTooltip>
<BbTooltip>
<BbTooltipTrigger>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-9 w-9">
<LucideIcon Name="code" class="h-[18px] w-[18px]" />
</BbButton>
</BbTooltipTrigger>
<BbTooltipContent>
<span>Code block</span>
</BbTooltipContent>
</BbTooltip>
</div>
@* Message Input *@
<BbTextarea Placeholder="Message #general" Class="border-none shadow-none focus-visible:ring-0 resize-none min-h-[60px] h-[60px] text-sm" />
@* Bottom Actions *@
<div class="flex items-center justify-between px-2 py-1.5">
<div class="flex items-center gap-0.5">
<BbTooltip>
<BbTooltipTrigger>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-7 w-7">
<LucideIcon Name="paperclip" class="h-3.5 w-3.5" />
</BbButton>
</BbTooltipTrigger>
<BbTooltipContent>
<span>Attach file</span>
</BbTooltipContent>
</BbTooltip>
<BbTooltip>
<BbTooltipTrigger>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-7 w-7">
<LucideIcon Name="at-sign" class="h-3.5 w-3.5" />
</BbButton>
</BbTooltipTrigger>
<BbTooltipContent>
<span>Mention someone</span>
</BbTooltipContent>
</BbTooltip>
<BbTooltip>
<BbTooltipTrigger>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" Class="h-7 w-7">
<LucideIcon Name="smile" class="h-3.5 w-3.5" />
</BbButton>
</BbTooltipTrigger>
<BbTooltipContent>
<span>Add emoji</span>
</BbTooltipContent>
</BbTooltip>
</div>
<BbButtonGroup>
<BbButton Size="ButtonSize.Small" Class="h-7">
<LucideIcon Name="send" class="h-3.5 w-3.5 mr-1.5" />
Send
</BbButton>
</BbButtonGroup>
</div>
</div>
</div>
</BbSidebarInset>
</BbSidebarProvider>
@inject IJSRuntime JS
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("eval", "var el = document.getElementById('chat-demo-messages'); if (el) el.scrollTop = el.scrollHeight;");
}
}
}