DevelopmentChat System
Usage
Usage
Quick start
Use the Chat component wherever you need a chat for a specific entity (case, customer, ticket, etc.). Configure it with the table and foreign key that link messages to the entity.
import { Chat } from "@suitsbooks/chat";
export default function CaseChatDemo({ caseId }: { caseId: string }) {
return (
<Chat
entityId={caseId}
table="sf_formations_case_messages"
foreignKeyColumn="sf_formations_case_id"
messageColumn="message"
authorUserIdColumn="author_user_id"
// chatIdColumn is optional; defaults to "chat_id"
containerHeight={650}
enableAttachments
/>
);
}
```typescript
### Demo page
A demo page is available at `/app/demo-chat`. You can supply the parameters via query string:
```typescript
/demo-chat?entityId=<id>&table=sf_formations_case_messages&fk=sf_formations_case_id&msg=message&author=author_user_id
```typescript
### Props
- `entityId`: The parent entity ID (e.g., case_id, customer_id)
- `table`: The messages table name
- `foreignKeyColumn`: Column in `table` linking to `entityId`
- `messageColumn`: Column storing the message text (default: `message`)
- `authorUserIdColumn`: Column storing the author user id (default: `author_user_id`)
- `chatIdColumn`: Optional column containing a chat id (default: `chat_id`)
- `containerHeight`: Virtualized scroller height (default: 650)
- `enableAttachments`: Toggle file upload UI and handling (default: true)
- `onUploadFilesOverride(files)`: Optional override for uploading; return an array of uploaded file URLs
- Mentions:
- By default `Chat` loads users and provides `@` suggestions (with avatars) as you type
- You can also pass your own list via `mentions` or full users via `mentionUsers` to customize suggestion rendering/filtering
### Data rules
- Fetching: `{APP_CONFIG.api.suitsbooks}/fetch/data` (POST) with headers:
- `X-Company-Id`, `X-Organization-Id`, `X-User-Id`
- optional: `Cache-Control: no-cache` if cache disabled
- Inserting: `{APP_CONFIG.api.suitsbooks}/data/insert` (PUT) with headers:
- `X-Company-Id`, `X-Organization-Id`, `X-User-Id`
- Realtime: Supabase Postgres channel `table_entityId` filtering by `foreignKeyColumn = entityId`