# Team Chat Channel
URL: /docs/web/components/team-chat-channel

Team Chat Channel component.

**Demo:**

```tsx
'use client';

import { TeamChatChannel } from '@docyrus/ui/components/team-chat-channel';
import { TooltipProvider } from '@docyrus/ui/primitives/ui/tooltip';

import { useTeamChatChannelData } from '@/data/team-chat-channel-data';

export function TeamChatChannelDemo() {
  const {
    posts,
    currentUser,
    users,
    dataSources,
    onCreatePost,
    onDeletePost,
    onToggleReaction,
    onLoadReplies,
    onFetchLinkPreview,
    onSearchEntity
  } = useTeamChatChannelData();

  return (
    <div className="h-150 w-full max-w-2xl">
      
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-team-chat-channel
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
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";

```

## 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"`