Screen

Team chat

Beta

Slack-style workspace with channels, unread badges, presence, reactions, and a side thread for replies.

#support

Customer conversations that need a second pair of eyes

Wednesday, September 30

Maya Chen4:02 PM

Acme reports that triage keeps tagging their billing questions as bugs. Anyone free to look before their 5pm sync?

4:03 PM

Screenshots are in the ticket.

Thursday, October 1

Damien Schneider9:12 AM

Morning! I'm rethinking triage to be more predictive. Draft of the new rules goes out before lunch.

9:13 AM

Reply here if your team has edge cases I should cover.

(edited)

Inès Diallo9:40 AM

Refund requests that mention a bug. Those land in the wrong queue every week.

Léo Martin is typing…

Composition

Channel with a side thread

<TeamChatBlock>
- <SidebarProvider>
  - sidebar prop
    - <Sidebar>
      - <SidebarMenuItem>
        <SidebarMenuButton>
        <AvatarBadge />
        </SidebarMenuButton>
        <SidebarMenuBadge />
        <SidebarMenuAction />
        </SidebarMenuItem>
      </Sidebar>
  - <SidebarInset>
    - children prop
      - <ChatLayout>
        <ChatLayoutHeader>
        <ChatLayoutTitle />
        <ChatLayoutDescription />
        <ChatLayoutActions />
        </ChatLayoutHeader>
        <ChatThread>
        <TranscriptDivider />
        <ChatMessage>
        flat layout
        <ChatMessageReactions />
        <ChatMessageReplySummary />
        <ChatMessageActions />
        </ChatMessage>
        <ChatTypingIndicator />
        composer prop
        <ChatComposer />
        </ChatThread>
        </ChatLayout>
    - thread prop
      - <ChatLayout />
    </SidebarInset>
  </SidebarProvider>
</TeamChatBlock>

Installation

Registry command

npx shadcn@latest add https://control-ui.dev/r/team-chat-block.json

See registry manifest

Usage

"use client";

import { useState } from "react";

import { TeamChatBlock } from "@/components/control-ui/blocks/team-chat";

import {

ChatComposer,

ChatComposerShell,

ChatComposerSubmit,

ChatComposerTextarea,

ChatComposerToolbar,

} from "@/components/control-ui/chat-composer";

import { ChatLayout, ChatLayoutDescription, ChatLayoutHeader, ChatLayoutTitle, ChatThread } from "@/components/control-ui/chat-layout";

import {

ChatMessage,

ChatMessageAuthor,

ChatMessageAvatar,

ChatMessageBody,

ChatMessageContent,

ChatMessageHeader,

ChatMessageRow,

ChatMessageTime,

} from "@/components/control-ui/chat-message";

import {

Sidebar,

SidebarContent,

SidebarGroup,

SidebarGroupLabel,

SidebarMenu,

SidebarMenuBadge,

SidebarMenuButton,

SidebarMenuItem,

} from "@/components/control-ui/ui/sidebar";

type Message = { id: string; author: string; sentAt: string; text: string };

export default function TeamChatPage({ messages, onSend }: { messages: Message[]; onSend: (text: string) => Promise<void> }) {

const [draft, setDraft] = useState("");

return (

<TeamChatBlock

className="h-svh"

sidebar={

<Sidebar>

<SidebarContent>

<SidebarGroup>

<SidebarGroupLabel>Channels</SidebarGroupLabel>

<SidebarMenu>

<SidebarMenuItem>

<SidebarMenuButton isActive>#support</SidebarMenuButton>

<SidebarMenuBadge>3</SidebarMenuBadge>

</SidebarMenuItem>

</SidebarMenu>

</SidebarGroup>

</SidebarContent>

</Sidebar>

}

>

<ChatLayout chrome="embedded" className="h-full">

<ChatLayoutHeader>

<ChatLayoutTitle render={(props) => <h1 {...props} />}>#support</ChatLayoutTitle>

<ChatLayoutDescription>Customer conversations</ChatLayoutDescription>

</ChatLayoutHeader>

<ChatThread

composer={

<ChatComposer

value={draft}

onValueChange={setDraft}

onSubmit={async ({ value, clear }) => {

await onSend(value);

clear();

}}

>

<ChatComposerShell>

<ChatComposerTextarea placeholder="Message #support" />

<ChatComposerToolbar>

<ChatComposerSubmit>Send</ChatComposerSubmit>

</ChatComposerToolbar>

</ChatComposerShell>

</ChatComposer>

}

>

{messages.map((message) => (

<ChatMessage key={message.id} from="participant" layout="flat" authorLabel={message.author}>

<ChatMessageRow>

<ChatMessageAvatar>{message.author.slice(0, 1)}</ChatMessageAvatar>

<ChatMessageBody>

<ChatMessageHeader>

<ChatMessageAuthor>{message.author}</ChatMessageAuthor>

                    <ChatMessageTime dateTime={message.sentAt}>{new Date(message.sentAt).toLocaleTimeString()}</ChatMessageTime>

</ChatMessageHeader>

<ChatMessageContent>{message.text}</ChatMessageContent>

</ChatMessageBody>

</ChatMessageRow>

</ChatMessage>

))}

</ChatThread>

</ChatLayout>

</TeamChatBlock>

);

}

Library dependencies

SidebarsidebarComponent

Owned source

This template’s recipe and private support files. Public dependencies stay linked above.

Block recipesrc/registry/blocks/control-ui/team-chat.tsx

src/registry/blocks/control-ui/team-chat.tsx

"use client";

import type { ComponentProps, ReactNode } from "react";

import { cn } from "@/components/control-ui/lib/cn";

import { SidebarInset, SidebarProvider } from "@/components/control-ui/ui/sidebar";

export type TeamChatBlockProps = Omit<ComponentProps<typeof SidebarProvider>, "children"> & {

sidebar: ReactNode;

children: ReactNode;

thread?: ReactNode;

threadLabel?: string;

};

export function TeamChatBlock({ sidebar, children, thread, threadLabel = "Thread", className, ...props }: TeamChatBlockProps) {

const threadIsOpen = thread !== undefined && thread !== null;

return (

<SidebarProvider className={cn("bg-background text-foreground", className)} {...props}>

{sidebar}

<SidebarInset className="@container/team-chat flex h-full min-h-0 min-w-0 flex-row">

        <div className={cn("flex min-h-0 min-w-0 flex-1 flex-col", threadIsOpen && "@max-3xl/team-chat:hidden")}>{children}</div>

{threadIsOpen ? (

<aside

aria-label={threadLabel}

            className="flex min-h-0 w-full min-w-0 flex-col border-border @3xl/team-chat:w-[min(26rem,45%)] @3xl/team-chat:shrink-0 @3xl/team-chat:border-s"

>

{thread}

</aside>

) : null}

</SidebarInset>

</SidebarProvider>

);

}