Documentation

Frontend integration

Displaying the chat

To display the chat, use the React component StreamtalkChat. You can pass it the following parameters:

chat - the current chat
onInit - chat initialization event handler
mimeTypes - MIME types of supported chat attachments
newMessageConfig - configuration for the message input field
messageListConfig - configuration for the message list

You must also import chat styles from @streamtalk/react/lib/index.css.

Code example:

tsx

import StreamtalkChat from "@streamtalk/react";
import { mimeTypes } from "./allowed-mimes.ts";

import "@streamtalk/react/lib/index.css";

export const MyChat = ({ chatId }: { chatId: string }) => {
    return (
        <StreamtalkChat
            onInit={(chat) => {
                console.info("chat", chat);
            }}
            chat={{
                id: chatId,
            }}
            mimeTypes={mimeTypes}
            newMessageConfig={{
                attach: {
                    filesMaxCount: 5,
                    fileMaxSize: 12,
                },
            }}
        />
    );
};

If the library has not yet been initialized using StreamtalkInitializer, the StreamtalkChat component will display a preloader, and the chat initialization will be performed immediately after the library is initialized.

Configuring allowed attachment types

StreamTalk supports restrictions on files attached to messages.

To configure restrictions, create an array listing all allowed attachment types using StreamtalkChatConstants.mimeTypes.

By default, attachment types are limited to .png, .jpg, and .jpeg files.

Code example:

typescript

import {
    StreamtalkAttachFilesMimeFormat,
    StreamtalkChatConstants,
} from "@streamtalk/react";

export const mimeTypes: StreamtalkAttachFilesMimeFormat[] = [
    StreamtalkChatConstants.mimeTypes.image.PNG,
    StreamtalkChatConstants.mimeTypes.image.JPEG,
    StreamtalkChatConstants.mimeTypes.image.JPG,
    StreamtalkChatConstants.mimeTypes.image.TIFF,
    StreamtalkChatConstants.mimeTypes.image.GIF,
    StreamtalkChatConstants.mimeTypes.application.DOC,
    StreamtalkChatConstants.mimeTypes.application.DOCX,
    StreamtalkChatConstants.mimeTypes.application.PDF,
    StreamtalkChatConstants.mimeTypes.application.RTF,
    StreamtalkChatConstants.mimeTypes.application.XLS,
    StreamtalkChatConstants.mimeTypes.application.XLSX,
];

Next, pass the resulting array to the mimeTypes property of the chat component:

tsx

import StreamtalkChat from "@streamtalk/react";
import { mimeTypes } from "./allowed-mimes.ts";

<StreamtalkChat mimeTypes={mimeTypes} />