XYLEX Group
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`


On this page