This article will cover:
- Message text and attachment size & length limits
- Increasing character limit for the Stream Chat API
- Increasing character limit for the React SDK
We do consider the default 5000 character limit on text in a message to be sufficient for message text length for real-time messages.
At times there is some confusion here. A message can be 5kb in size, but that does not include attachments. Attachments on a message are simply a URL that points to an attachment that is hosted on an external CDN. Our Stream CDN for Chat will take a 20mb file no problem, and a customer is also welcome to use their own CDN.
// upload your attachment to a CDN (imgix used as an example)
const attachment = await imgixClient.buildURL('folder/image.jpg);
// send a message to Stream with an attachment
const messageAttachments = [type: 'image', asset_url: attachment.url];
const channel = await streamChatClient.channel('messaging', 'conversation').create();
const message = await channel.sendMessage({ text, messageAttachments });
You can also “increase” beyond the character limit by sending the text as an attachment (much like above)
Increasing the character limit for a channel type is a common requests.
By default, we have set the character limit to 5000 for these channel types -
messaging, team, and commerce
For Livestream, by default, this character limit is set at 280. This can be changed from the dashboard and here is the procedure -
From the dashboard, go to the App -> Chat -> Overview -> Channel Types -> Livestream -> Max Message Length -> Character Count -> Your desired values
Please note - max_message_length must be less than 65,536
With the Stream React UI Components SDKs and API you can change the maximum message length allowed. This can be useful to stop users from sending messages that are too large or may appear as spam.
To limit the message length on the MessageInput component -
<MessageInput additionalTextareaProps={{ maxlength: 280 }} />
Anything fed into additionalTextareaProps
at the MessageInput level will eventually trickle down and be spread into the text-area HTML component.
<Textarea
{...this._cleanUpProps()}
ref={(ref) => {
this.props.innerRef && this.props.innerRef(ref);
this.textareaRef = ref;
}}
maxRows={maxRows}
className={`rta__textarea ${className || ''}`}
onChange={this._changeHandler}
onSelect={this._selectHandler}
onScroll={this._onScrollHandler}
onClick={
// The textarea itself is outside the autoselect dropdown.
this._onClickAndBlurHandler
}
onBlur={this._onClickAndBlurHandler}
onFocus={this.props.onFocus}
value={value}
style={style}
{...this.props.additionalTextareaProps}
/>
To update max_message_length:
const update = await client.updateChannelType("messaging", {
max_message_length: 10000
});
Comments
0 comments
Please sign in to leave a comment.