> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gainable.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Collaboration features

> Add chat, files, comments, and messaging to your apps

## Overview

Gainable apps can include collaboration features powered by Weavy. These components are self-contained and work out of the box.

## Available components

### Chat

Real-time group messaging for teams or contexts.

```text theme={null}
"Add a team chat"
"Include chat for each project"
"Add a discussion area"
```

**Best for:**

* Team discussions
* Project-specific conversations
* Context-based chat (per deal, per task, etc.)

**Features included:**

* Real-time messages
* Message history
* Typing indicators
* Read receipts
* Emoji reactions
* File sharing in chat

### Messenger

Private direct messaging between users.

```text theme={null}
"Add direct messaging"
"Let users send private messages"
"Include a messenger"
```

**Best for:**

* One-on-one conversations
* Private discussions
* User-to-user communication

**Features included:**

* Conversation list
* Direct messages
* Unread counts
* User presence (online/offline)
* Search conversations

<Note>
  **Chat vs Messenger:**

  * Use **Chat** for group/contextual conversations (project chat, team chat)
  * Use **Messenger** for private user-to-user messaging (like Slack DMs)
</Note>

### Files

Document upload and sharing.

```text theme={null}
"Add file sharing"
"Let users upload documents"
"Include file attachments"
```

**Best for:**

* Document collaboration
* Sharing attachments
* File organization

**Features included:**

* Drag-and-drop upload
* File previews
* Download links
* File type icons
* Version history

### Comments

Threaded discussions on specific items.

```text theme={null}
"Add comments to tasks"
"Let users comment on deals"
"Include discussion threads"
```

**Best for:**

* Item-specific discussions
* Feedback and reviews
* Activity logs

**Features included:**

* Threaded replies
* @mentions
* Timestamps
* Edit and delete
* Reactions

### Posts / Activity Feed

Social-style updates and announcements.

```text theme={null}
"Add an activity feed"
"Include a news feed"
"Add team announcements"
```

**Best for:**

* Team updates
* Announcements
* Activity streams

**Features included:**

* Create posts
* Comments on posts
* Reactions
* Rich text formatting
* File attachments

### Notifications

Notification center for all collaboration activity.

```text theme={null}
"Add notifications"
"Show unread message count"
"Include notification bell"
```

**Features included:**

* Unread counts
* Notification list
* Mark as read
* Click to navigate

## Placement patterns

### Page-level

Everyone on the page sees the same component:

```text theme={null}
"Add a team chat to the dashboard"
```

### Item-level

Each item has its own instance:

```text theme={null}
"Add chat to each project"
"Add files to each deal"
"Add comments to each task"
```

### Global

Accessible from anywhere:

```text theme={null}
"Add a messenger accessible from all pages"
"Add notification bell in the header"
```

## Examples

### Project workspace

```text theme={null}
Build a project manager with:
- Projects (name, status, description)
- Tasks for each project

On the project detail page, add:
- Team chat for project discussions
- File sharing for project documents
- Activity feed for updates
```

### CRM with collaboration

```text theme={null}
Build a CRM with:
- Companies and contacts
- Deals linked to companies

On each deal page, add:
- Comments for internal notes
- Files for proposals and contracts
```

### Team dashboard

```text theme={null}
Build a team dashboard with:
- Announcements feed
- Team chat
- Shared files area
- Notification bell in header
```

## Combining components

You can use multiple collaboration features together:

```text theme={null}
"On the project page:
- Chat tab for discussions
- Files tab for documents
- Activity tab for updates
- Comments on individual tasks"
```

## Real-time behavior

All collaboration components are real-time:

* Messages appear instantly
* Files show immediately after upload
* Comments update live
* Notifications push automatically

## Notifications

Gainable handles notifications automatically:

* **Toast notifications** appear for new messages
* **Badge counts** show unread items
* **Notification center** collects all activity

Users receive notifications for:

* New messages in their chats
* @mentions in comments
* Replies to their posts
* File shares

## Best practices

<AccordionGroup>
  <Accordion title="Match component to use case">
    * **Chat**: Ongoing discussions
    * **Comments**: Item-specific feedback
    * **Files**: Document sharing
    * **Messenger**: Private conversations
  </Accordion>

  <Accordion title="Place contextually">
    Put chat on project pages for project discussions, not floating randomly.
  </Accordion>

  <Accordion title="Consider scope">
    * Global chat can get noisy
    * Item-level chat stays focused
    * Choose based on your team size and use case
  </Accordion>

  <Accordion title="Don't overload pages">
    Pick the collaboration features that make sense. Not every page needs chat, files, and comments.
  </Accordion>
</AccordionGroup>

## Layout options

### Inline

Component appears directly on the page:

```text theme={null}
"Show the chat in the main content area"
```

### Drawer

Component slides out from the side:

```text theme={null}
"Open chat in a slide-out drawer"
"Show files in a right panel"
```

### Modal

Component appears in an overlay:

```text theme={null}
"Open messenger in a modal"
```

### Tab

Component is one tab among several:

```text theme={null}
"Tabs: Overview, Chat, Files, Comments"
```

## Learn more

<CardGroup cols={2}>
  <Card title="Real-time updates" icon="bolt" href="/building/real-time">
    How real-time works
  </Card>

  <Card title="Building collaboration" icon="users" href="/building/collaboration">
    Integration patterns
  </Card>
</CardGroup>