React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTimport StreamChat
import StreamChatSwiftUI
import SwiftUI
class DemoAppFactory: ViewFactory {
@Injected(\.chatClient) public var chatClient
func makeChannelListHeaderViewModifier(title: String) -> some ChannelListHeaderViewModifier {
CustomChannelModifier(title: title)
}
}Creating Channels Flow
Different apps have different UI for starting a chat with other users. For example, there can be a way to search through the available users, or show a button to invoke a chat with a user from their profile.
In this cookbook, we will build a UI that will allow creation of channels by searching the users on the platform.
Custom Channel List Header
The screen will be invoked from the channel list’s header, which will contain a new button on the trailing navigation bar area.
To modify the header of the channel list, we need to provide our own version of the view factory method makeChannelListHeaderViewModifier.
To do this, create a new file called DemoAppFactory and add the following contents.
Next, let’s implement the CustomChannelModifier. Create a new file with the same name, and add the following contents.
import StreamChat
import StreamChatSwiftUI
import SwiftUI
struct CustomChannelModifier: ChannelListHeaderViewModifier {
@Injected(\.chatClient) var chatClient
var title: String
@State var isNewChatShown = false
func body(content: Content) -> some View {
ZStack {
content.toolbar {
CustomChannelHeader(
title: title,
currentUserController: chatClient.currentUserController(),
isNewChatShown: $isNewChatShown
)
}
NavigationLink(isActive: $isNewChatShown) {
NewChatView(isNewChatShown: $isNewChatShown)
} label: {
EmptyView()
}
.isDetailLink(UIDevice.current.userInterfaceIdiom == .pad)
}
}
}The code above contains a toolbar modifier that attaches a CustomChannelHeader, as well as a navigation link that will open the new chat. The visibility of the new chat view is controlled by the state variable isNewChatShown.
Here is how the CustomChannelHeader looks like.
import StreamChat
import StreamChatSwiftUI
import SwiftUI
public struct CustomChannelHeader: ToolbarContent {
@Injected(\.fonts) var fonts
@Injected(\.images) var images
@Injected(\.colors) var colors
var title: String
var currentUserController: CurrentChatUserController
@Binding var isNewChatShown: Bool
@MainActor
public var body: some ToolbarContent {
ToolbarItem(placement: .principal) {
Text(title)
.font(fonts.bodyBold)
}
ToolbarItem(placement: .navigationBarTrailing) {
Button {
isNewChatShown = true
} label: {
Image(uiImage: images.messageActionEdit)
.resizable()
.scaledToFit()
.foregroundColor(Color.white)
.padding(.all, 8)
.background(colors.tintColor)
.clipShape(Circle())
}
}
ToolbarItem(placement: .navigationBarLeading) {
StreamLazyImage(url: currentUserController.currentUser?.imageURL)
}
}
}It’s an implementation of the ToolbarContent protocol for creating navigation bar layouts. Our implementation consists of a title, a leading view showing the user’s profile image, as well as a trailing view that contains our button for starting the flow for adding a new chat. The button sets the isNewChatShown binding to true.
View for adding chats
Now that we have our header setup, let’s implement the view that is displayed when the button is tapped.
To do this, create a new file called NewChatView and add the following content.
import StreamChat
import StreamChatSwiftUI
import SwiftUI
struct NewChatView: View, KeyboardReadable {
@Injected(\.fonts) var fonts
@Injected(\.colors) var colors
@StateObject var viewModel = NewChatViewModel()
@Binding var isNewChatShown: Bool
@State private var keyboardShown = false
let columns = [GridItem(.adaptive(minimum: 120), spacing: 2)]
var body: some View {
VStack(spacing: 0) {
HStack {
Text("TO:")
.font(fonts.footnote)
.foregroundColor(Color(colors.textLowEmphasis))
VStack {
if !viewModel.selectedUsers.isEmpty {
LazyVGrid(columns: columns, alignment: .leading) {
ForEach(viewModel.selectedUsers) { user in
SelectedUserView(user: user)
.onTapGesture(
perform: {
withAnimation {
viewModel.userTapped(user)
}
}
)
}
}
}
SearchUsersView(viewModel: viewModel)
}
}
.padding()
if viewModel.state == .loading {
VerticallyCenteredView {
ProgressView()
}
} else if viewModel.state == .loaded {
List(viewModel.chatUsers) { user in
Button {
withAnimation {
viewModel.userTapped(user)
}
} label: {
ChatUserView(
user: user,
onlineText: viewModel.onlineInfo(for: user),
isSelected: viewModel.isSelected(user: user)
)
.onAppear {
viewModel.onChatUserAppear(user)
}
}
}
.listStyle(.plain)
} else if viewModel.state == .noUsers {
VerticallyCenteredView {
Text("No user matches these keywords")
.font(.title2)
.foregroundColor(Color(colors.textLowEmphasis))
}
} else if viewModel.state == .error {
VerticallyCenteredView {
Text("Error loading the users")
.font(.title2)
.foregroundColor(Color(colors.textLowEmphasis))
}
} else if viewModel.state == .channel, let controller = viewModel.channelController {
Divider()
ChatChannelView(
viewFactory: DemoAppFactory.shared,
channelController: controller
)
} else {
Spacer()
}
}
.navigationTitle("New Chat")
.onReceive(keyboardWillChangePublisher) { visible in
keyboardShown = visible
}
.modifier(HideKeyboardOnTapGesture(shouldAdd: keyboardShown))
}
}The code above builds the UI for adding new channels. It consists of a text input view, where you can search for users available on the platform. When you select a user, it creates a channel view to start sending messages and shows the added users above the text input.
In the trailing part of the text input, there’s a button to add additional users to the chat.
Below the text input view, there is a list that shows the available users to add to a chat.
In the code above, we are also using some helper views, that help us achieve the desired user interface.
struct SelectedUserView: View {
@Injected(\.colors) var colors
var user: ChatUser
var body: some View {
HStack {
MessageAvatarView(
avatarURL: user.imageURL,
size: CGSize(width: 20, height: 20)
)
Text(user.name ?? user.id)
.lineLimit(1)
.padding(.vertical, 2)
.padding(.trailing)
}
.background(Color(colors.background1))
.cornerRadius(16)
}
}
struct SearchUsersView: View {
@StateObject var viewModel: NewChatViewModel
var body: some View {
HStack {
TextField("Type a name", text: $viewModel.searchText)
Button {
if viewModel.state == .channel {
withAnimation {
viewModel.state = .loaded
}
}
} label: {
Image(systemName: "person.badge.plus")
}
}
}
}
struct VerticallyCenteredView<Content: View>: View {
var content: () -> Content
var body: some View {
VStack {
Spacer()
content()
Spacer()
}
}
}
struct ChatUserView: View {
@Injected(\.colors) var colors
@Injected(\.fonts) var fonts
var user: ChatUser
var onlineText: String
var isSelected: Bool
var body: some View {
HStack {
LazyView(
MessageAvatarView(avatarURL: user.imageURL)
)
VStack(alignment: .leading, spacing: 4) {
Text(user.name ?? user.id)
.lineLimit(1)
.font(fonts.bodyBold)
Text(onlineText)
.font(fonts.footnote)
.foregroundColor(Color(colors.textLowEmphasis))
}
Spacer()
if isSelected {
Image(systemName: "checkmark")
.renderingMode(.template)
.foregroundColor(colors.tintColor)
}
}
}
}
struct UsersHeaderView: View {
@Injected(\.colors) var colors
@Injected(\.fonts) var fonts
var title = "On the platform"
var body: some View {
HStack {
Text(title)
.padding(.horizontal)
.padding(.vertical, 2)
.font(fonts.body)
.foregroundColor(Color(colors.textLowEmphasis))
Spacer()
}
.background(Color(colors.background1))
}
}
New Chat View Model
Next, let’s see the view model that provides the state and logic for this view.
The view model should provide us with the list of users, as well as the actions we perform, such as searching and creating new channels.
Let’s see its implementation.
import StreamChat
import StreamChatSwiftUI
import SwiftUI
class NewChatViewModel: ObservableObject, ChatUserSearchControllerDelegate {
@Injected(\.chatClient) var chatClient
@Published var searchText: String = "" {
didSet {
searchUsers(with: searchText)
}
}
@Published var messageText: String = ""
@Published var chatUsers = [ChatUser]()
@Published var state: NewChatState = .initial
@Published var selectedUsers = [ChatUser]() {
didSet {
if !updatingSelectedUsers {
updatingSelectedUsers = true
if !selectedUsers.isEmpty {
do {
try makeChannelController()
} catch {
state = .error
updatingSelectedUsers = false
}
} else {
withAnimation {
state = .loaded
updatingSelectedUsers = false
}
}
}
}
}
private var loadingNextUsers: Bool = false
private var updatingSelectedUsers: Bool = false
var channelController: ChatChannelController?
private lazy var searchController: ChatUserSearchController = chatClient.userSearchController()
private let lastSeenDateFormatter = DateUtils.timeAgo
init() {
chatUsers = searchController.userArray
searchController.delegate = self
// Empty initial search to get all users
searchUsers(with: nil)
}
func userTapped(_ user: ChatUser) {
if updatingSelectedUsers {
return
}
if selectedUsers.contains(user) {
selectedUsers.removeAll { selected in
selected == user
}
} else {
selectedUsers.append(user)
}
}
func onlineInfo(for user: ChatUser) -> String {
if user.isOnline {
return "Online"
} else if let lastActiveAt = user.lastActiveAt,
let timeAgo = lastSeenDateFormatter(lastActiveAt) {
return timeAgo
} else {
return "Offline"
}
}
func isSelected(user: ChatUser) -> Bool {
selectedUsers.contains(user)
}
func onChatUserAppear(_ user: ChatUser) {
guard let index = chatUsers.firstIndex(where: { element in
user.id == element.id
}) else {
return
}
if index < chatUsers.count - 10 {
return
}
if !loadingNextUsers {
loadingNextUsers = true
searchController.loadNextUsers(limit: 50) { [weak self] _ in
guard let self = self else { return }
self.chatUsers = self.searchController.userArray
self.loadingNextUsers = false
}
}
}
// MARK: - ChatUserSearchControllerDelegate
func controller(
_ controller: ChatUserSearchController,
didChangeUsers changes: [ListChange<ChatUser>]
) {
chatUsers = controller.userArray
}
// MARK: - private
private func searchUsers(with term: String?) {
state = .loading
searchController.search(term: term) { [weak self] error in
if error != nil {
self?.state = .error
} else {
self?.state = .loaded
}
}
}
private func makeChannelController() throws {
let selectedUserIds = Set(selectedUsers.map(\.id))
channelController = try chatClient.channelController(
createDirectMessageChannelWith: selectedUserIds,
name: nil,
imageURL: nil,
extraData: [:]
)
channelController?.synchronize { [weak self] error in
if error != nil {
self?.state = .error
self?.updatingSelectedUsers = false
} else {
withAnimation {
self?.state = .channel
self?.updatingSelectedUsers = false
}
}
}
}
}
enum NewChatState {
case initial
case loading
case noUsers
case error
case loaded
case channel
}The most important bits here are the searching of users and the creation of new channels.
To perform the searching part, we listen to changes of the searchText. When that happens, we call the method searchUsers, which uses the searchController’s method search(term:), and provides its results via the ChatUserSearchControllerDelegate’s method didChangeUsers.
For the creation of the channel, we use the chatClient’s method createDirectMessageChannelWith. In this method, we provide the IDs of the users that were selected by the user.
With that, we have completed the functionality for our new chat users view.
If you now run the app, you should see a UI similar to the one below.
Summary
In this cookbook, you learnt how to implement a view that allows you to create direct messaging channels with particular users easily.
You can find more ways how to create channels in our docs here.
As a next step, you can also explore other parts of our cookbook, where we build many interesting customizations. Furthermore, for a complete social experience, we recommend looking into our Video SDK.