Announcing Experimental Stream Chat Support for Jaspr

At Stream, we've been big supporters of Flutter since the beginning of the project. We launched one of the first chat SDKs on Flutter, and we've been hard at work making it one of the best ways to add Chat, Feeds, and more recently Video, to all your Flutter apps.

While most of our SDKs already work on Flutter Web, we've been closely following the rise of Jaspr, a web framework built on Dart that allows you to build static sites that Flutter Web couldn't quite do well. Since the team at Google itself started using Jaspr, with dart.dev, flutter.dev and docs.flutter.dev all running on it now, we started wondering if we should also look into supporting it early, the way we did with Flutter.

Today, we're announcing experimental Stream Chat support for Jaspr with the launch of stream_chat_jaspr on pub.dev. It ships UI components for building a chat interface in Jaspr built above the Stream Chat Dart client, so a single import gets you both the components and the full low-level API.

You can check out the live demo if you want to try it out yourself.

It is important to note that the stream_chat_jaspr SDK is an experimental project to help us judge the level of interest in production applications with Jaspr. If there is sufficient usage, we intend to expand the SDK in scope and in the Stream products it supports.

Enough marketing talk, show me the code

Fair enough. Add the package:

1
dart pub add stream_chat_jaspr

Then two scopes and the components you want inside them:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import 'package:jaspr/dom.dart' hide Filter; // stream_chat also exports a Filter
import 'package:jaspr/jaspr.dart';
import 'package:stream_chat_jaspr/stream_chat_jaspr.dart';

final client = StreamChatClient('your-api-key');
await client.connectUser(User(id: 'jane'), tokenFromYourBackend);

StreamChat(
  client: client,
  theme: StreamChatTheme.dark(),
  child: StreamChannel(
    channel: client.channel('messaging', id: 'general'),
    child: Component.fragment([
      StreamChannelHeader(),
      StreamMessageListView(),
      StreamTypingIndicator(),
      StreamMessageInput(),
    ]),
  ),
);

If you've used the Stream Chat Flutter SDK, this should already be fairly familiar to you. StreamChat provides the client and theme to everything below it and injects the stylesheet.

A basic application built with the UI components in the SDK looks something like this:

What's in the box?

Most of the major UI components from Stream Chat Flutter are included, under the names you already know:

Threads live on the channel scope rather than on a route, which means the thread pane is a sibling of the conversation instead of a page you navigate to:

The example lays that out as three panes, collapsing to two below 1100 px and to one below 760 px, so a chat surface built this way is usable on a phone without a second implementation:

Some functionality is still missing, and the gaps are listed further down.

How do I add theming?

StreamChatTheme compiles to CSS custom properties, applied once to the root element. Every rule in the stylesheet resolves through those variables:

1
2
3
4
5
6
7
8
StreamChat(
  client: client,
  theme: StreamChatTheme.dark().copyWith(
    primary: const Color('#7c3aed'),
    borderRadius: '8px',
  ),
  child: myChatSurface,
);

Switching themes updates a single style attribute instead of rebuilding the component tree. StreamChatTheme.light() and .dark() both ship, and for anything the tokens don't cover, the sc- prefixed classes are yours to change.

What's not there yet

The low level client is the same as Stream Chat Flutter, so the basic functionality on the API side is similar. However, there are still a few things missing from the Jaspr SDK:

• Offline persistence
• Polls, drafts, reminders, location sharing
• Channel and user administration: member lists, user lists, invites, muting, archiving
• Voice recording, image editing, and camera capture
• Bundled locales. StreamChatTranslations is the extension point, but only English ships
• Any emoji picker beyond the six default reactions

Expect breaking changes while the SDK is at this stage.

Tell us if you want more

This is the part where we need you. The SDK exists to answer a question we can't answer on our own: do you want to build chat on the web in Dart?

If you do, the package is on pub.dev, the demo runs in your browser, and the source is open. You'll need a Stream app to point it at, and the free trial is enough to get one.

Open an issue and tell us what you're building and which line on that gap list is blocking you. Feature requests that name the Flutter SDK behaviour you want brought across are the ones we can act on fastest, since parity with stream_chat_flutter is the yardstick this port measures itself against. If there's enough of you, we'll grow the scope: more of the Chat surface first, and other Stream products after that.