Skip to main content

Stream messages

Chat UI supports stream messages for continuous message delivery from the server.

Limitations​

The stream message feature has the following current limitations:

  • Maximum message content length is 10,000 characters
  • Only available for direct channels and group channels

Content display​

Stream messages support Markdown, Text, and HTML types. For field values, see stream messages.

For HTML type messages, note the following considerations (not required for Markdown or Text types):

Content security​

Chat UI SDK uses the native WKWebView component to load HTML-type stream messages but does not process the message content. Developers must ensure content security.

You can embed CSP tags in HTML to improve security.

tip

CSP must be processed by your application server before sending to the Chat service. You can use AI model formatting and system prompts to include specific content.

Example code

html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Security-Policy"  content="default-src 'self'; script-src 'self'; img-src 'self';">
    <!-- Other content -->
</head>
<body>
    <!-- Page content -->
</body>
</html>

Dark mode​

Chat UI SDK uses the CSS prefers-color-scheme rule to adapt WKWebView themes, but this has system version requirements and depends on app theme settings:

  • iOS 13+: Chat UI supports dark mode. If HTML content includes prefers-color-scheme, Chat UI and WKWebView will automatically follow light/dark themes
  • Below iOS 13: Not supported
tip

prefers-color-scheme must be processed by your application server before sending to the Chat service. You can use AI model formatting and system prompts to include specific content.

Example code

css
@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}
Last updated on