Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-team-chat-channelUI Primitives(10 components)
npx shadcn@latest add avatar button dropdown-menu input popover scroll-area scroller separator skeleton tooltipUsage
import {
TeamChatChannel
} from "@docyrus/ui/components/team-chat-channel";
import type {
ChatUser,
ChatPost,
PostAttachment,
PostReaction,
LinkPreview,
LinkedEntity,
EntitySearchResult,
DataSourceOption,
CreatePostPayload,
TeamChatChannelProps,
PresetEmoji
} from "@docyrus/ui/components/team-chat-channel";
<TeamChatChannel />API Reference
| Prop | Type | Default |
|---|---|---|
className | string | — |
Components
| Component | Description |
|---|---|
TeamChatChannel | Public export |
EntityMentionInput | Internal — entity-mention-input.tsx |
PostActions | Internal — post-actions.tsx |
PostAttachments | Internal — post-attachments.tsx |
PostCard | Internal — post-card.tsx |
PostComposer | Internal — post-composer.tsx |
PostContent | Internal — post-content.tsx |
PostEmptyState | Internal — post-empty-state.tsx |
PostEntityLink | Internal — post-entity-link.tsx |
PostLinkPreview | Internal — post-link-preview.tsx |
PostReactions | Internal — post-reactions.tsx |
PostThread | Internal — post-thread.tsx |
TeamChatProvider | Internal — team-chat-context.tsx |
Type Exports
| Type | Description |
|---|---|
ChatUser | — |
ChatPost | — |
PostAttachment | — |
PostReaction | — |
LinkPreview | — |
LinkedEntity | — |
EntitySearchResult | — |
DataSourceOption | — |
CreatePostPayload | — |
TeamChatChannelProps | — |
PresetEmoji | — |
Type Reference
ChatUser
| Field | Type | Description |
|---|---|---|
id | string | — |
firstname | string | null | — |
lastname | string | null | — |
ChatPost
| Field | Type | Description |
|---|---|---|
id | string | — |
content | string | — |
attachments | Array<PostAttachment> | null | — |
reactions | Array<PostReaction> | — |
hashtags | Array<string> | — |
PostAttachment
| Field | Type | Description |
|---|---|---|
id | string | — |
PostReaction
| Field | Type | Description |
|---|---|---|
emoji | string | — |
count | number | — |
LinkPreview
| Field | Type | Description |
|---|---|---|
url | string | — |
title | string | — |
description | string | — |
LinkedEntity
| Field | Type | Description |
|---|---|---|
id | string | — |
icon | string | — |
EntitySearchResult
| Field | Type | Description |
|---|---|---|
icon | string | — |
DataSourceOption
| Field | Type | Description |
|---|---|---|
id | string | — |
name | string | — |
icon | string | — |
CreatePostPayload
| Field | Type | Description |
|---|---|---|
content | string | — |
attachments | Array<File> | — |
hashtags | Array<string> | — |
TeamChatChannelProps
| Field | Type | Description |
|---|---|---|
posts | Array<ChatPost> | — |
currentUser | ChatUser | — |
users | Array<ChatUser> | — |
channelName | string | — |
isLoading | boolean | — |
isCreatePending | boolean | — |
isDeletePending | boolean | — |
onCreatePost | (payload: CreatePostPayload) => void | Promise<void> | — |
onUpdatePost | (postId: string, content: string, options?: { removedAttachmentIds?: Array<string>; newFiles?: Array<File> }) => void | Promise<void> | — |
onDeletePost | (postId: string) => void | Promise<void> | — |
onToggleReaction | (postId: string, emoji: string) => void | Promise<void> | — |
onUploadFile | (file: File) => Promise<PostAttachment> | — |
onFetchLinkPreview | (url: string) => Promise<LinkPreview | null> | — |
dataSources | Array<DataSourceOption> | — |
onSearchEntity | (dataSourceId: string, query: string) => Promise<Array<EntitySearchResult>> | — |
onLoadReplies | (postId: string) => Promise<Array<ChatPost>> | — |
maxHeight | number | string | — |
className | string | — |
PresetEmoji
"\ud83d\udc4d" | "\u2764\ufe0f" | "\ud83d\ude02" | "\ud83d\ude2e" | "\ud83c\udf89" | "\ud83d\udd25" | "\ud83d\udc40" | "\ud83d\udca1"