Recipes overview

Each recipe is a complete, working example of one customization: the components, the CSS, and what happens when the code runs. Recipes apply the mechanisms the UI section explains, such as Overriding components, Actions and Workspace with ChatView, and link to them instead of explaining them again.

Choosing where to start

Make the smallest change that gets you there, in this order:

Restyle. Colors, spacing and shapes come from design tokens and CSS classes; see Theming. It's the change most likely to keep working when the SDK updates its components.
Replace one part. Most parts have a key in ComponentContext. Replace the smallest part that makes the change, such as one row of the channel list rather than the whole list.
Compose. Channel, Thread and the layout's slots render only the children you give them. Leave parts out, add your own, or change their order.
Change behaviour in the state layer. What a send does, what a list loads or what a search finds is configured on the state objects, not in components; see How the SDK is built.

A replaced part has to handle every case the default handles. Test it with the kinds of data your app has, and again after you update the SDK.

Channel list

Preview UI: a channel-list row of your own, with the avatar, title, time, unread badge and last message the SDK computes for it.
Members and online status: a list of the open channel's members that shows who is online and updates as they come and go.
Search customization: the search bar's settings, compact channel results, and search moved into a top bar.

Message

Custom message: a message UI built step by step, with avatars, formatted text, metadata, actions and reactions.
Pin indicator: the "Pinned by" line restyled with CSS, or replaced with one that shows the pin's date and an Unpin button.
System message: system messages with the event, its time and the user who triggered it.
Custom message actions: a menu item and a quick button added to the message actions, and default actions removed.

Composer

Custom composer: a composer with a layout of its own, built from the SDK's composer parts, so sending, uploads, suggestions and drafts keep working.
Attachment previews: the previews above the input, such as attachments with their upload progress and voice recordings, replaced one kind at a time.
Attachment actions: "Love" and "Loathe" buttons under every image a user sends, added by composer middleware and turned into reactions in the message list.
Custom suggestions: how the suggestion list and its rows look while the user types a mention, a command or an emoji, including rows for a trigger of your own.

Headers

Channel header: a channel header of your own, with the channel's title, image and who is typing.
Thread header: a compact thread header with a title and subtitle of your own.

App

Search menu: an app menu next to the search bar, with items such as the profile and signing out.
Collapsible sidebar: a channel-list sidebar the user can hide and show, with the toggle in the headers.
Hide history for new members: a dialog that sets how much of the channel's history a member sees when you add them.
System notification banner: a banner that shows while the client can't reach Stream, from the system notification Chat publishes.

Layout

Channel and thread side by side: the open channel with its thread in a column beside it, and the space given back when the thread closes.
⌘/ctrl-click opens beside: a ⌘-click or ctrl-click on a channel in the list opens it beside the open channel, while a plain click still replaces it.
Single-pane mobile with back button: on a phone, the channel list, a channel and a thread one at a time at full width, with the header's back button and the browser's back going back one step.
Saving and restoring the layout: a reload that puts the user back in the view and channel they had open, and the open channel kept in the URL.