DevelopmentChat System
Attachments
Attachments
The chat package supports S3-compatible uploads (DigitalOcean Spaces) and renders image/video previews automatically.
Default behavior
- The
Chatcomponent includes an “Attach files” button (icon) in the input. - Files are uploaded to
/api/files/upload/upload-legacywith:company_idfromuseUserStoreprefix_pathset to/${table}/${entityId}/files
- The server returns
uploadedFiles: [{ file_url }]. A message is inserted per file URL.
This preserves existing platform behavior and storage conventions.
Override uploads
Provide onUploadFilesOverride to replace the default upload mechanism (must return an array of file URLs):
<Chat
entityId={entityId}
table="customer_messages"
foreignKeyColumn="customer_id"
onUploadFilesOverride={async (files) => {
// Example: custom presigned flow
const urls: string[] = [];
for (const file of Array.from(files)) {
const presigned = await fetch("/api/files/upload/presigned", {
method: "POST",
body: JSON.stringify({ name: file.name, type: file.type }),
headers: { "Content-Type": "application/json" },
}).then((r) => r.json());
await fetch(presigned.uploadUrl, { method: "PUT", body: file });
urls.push(presigned.publicUrl);
}
return urls;
}}
/>
```typescript
### Previews
- Image extensions: jpg, jpeg, png, gif, webp, svg
- Video extensions: mp4, webm, ogg, mov, m4v
- Other files: rendered as a download link with the file extension badge
### UI/UX conventions
- Action buttons use `variant="brand"`; icon-only action uses `variant="icon_v2"`, `size="icon_v2"`
- Icons (`lucide-react`) are sized `w-5 h-5`
- Text classes: primary text `text-primary`, secondary text `text-secondary`
- Rounding is `rounded-sm`