StreamChat SwiftUI SDK

repository·develop·Indexed 19 days ago

https://github.com/getstream/stream-chat-swiftui

A declarative, high-performance UI framework for iOS built on top of the StreamChat core framework. It provides ready-to-use, customizable chat components including channel lists, message lists, and message composers. The SDK offers three tiers of components: high-level Screens, stateful components with built-in view models, and low-level stateless components for fully custom chat experiences.

Tokens
3.8K
Snippets
8
Records
17
Agent score
67%

What's inside StreamChat SwiftUI SDK

  1. Overview of Channel List features

    develop

    The Channel List component allows users to browse and interact with channels. Key features include:

    • Filtering channels via provided queries.
    • Displaying channel names and avatars (based on members or custom data).
    • Unread message indicators and last message previews.
    • Online status indicators for avatars.
    • Ability to create new channels immediately.
    • Customizable channel actions via swipe gestures.
    • Support for typing and read indicators.
  2. Overview of Message List features

    develop

    The Message List component is a high-performance list designed to render various message types. Key features include:

    • Support for Photo, Giphy, Video, File, and Custom attachments.
    • Link previews.
    • Message reactions.
    • Message grouping based on send time.
    • Threading and inline replies.
    • Typing and read indicators.
    • Async voice messages.
    • Polls support.
  3. Overview of Message Composer features

    develop

    The Message Composer is a powerful, customizable input area. Key features include:

    • Multiline text support that expands/shrinks dynamically.
    • Image, video, and file attachments.
    • Camera integration.
    • Recording async voice messages.
    • Creation of polls.
    • Mentions and Instant commands (e.g., giphy).
    • Support for custom commands and custom attachments.
  4. How the SwiftUI SDK components work together

    develop

    The SwiftUI SDK provides three tiers of components depending on the level of control and customization you require:

    1. Screens: The fastest way to integrate. These are high-level components that are easy to implement but offer limited customization (primarily branding and text changes).
    2. Stateful components: A middle ground offering more customization and the ability to inject custom views. These components include built-in view models to manage state, making them simple to integrate if their extension points match your needs.
    3. Stateless components: The fundamental building blocks. These require you to provide the state and data manually. Use these only if you are building a completely custom chat experience from scratch.
  5. Understand the SwiftUI StreamChat SDK architecture

    develop

    The SwiftUI SDK provides two distinct types of components to balance ease of use with customization:

    1. Stateful components: These are high-level components that come with built-in view models. They are easy to integrate and offer various extension points for injecting custom views, making them ideal for most chat use cases.
    2. Stateless components: These are the low-level building blocks used to construct the stateful components. They do not manage state themselves; you must provide the data and state manually. Use these when you want to implement a completely custom chat experience from the ground up.

    The SDK is built on top of the StreamChat framework and follows declarative SwiftUI patterns.

  6. Generate documentation for the SwiftUI StreamChat SDK

    develop

    You can generate and open the local documentation archive using xcodebuild. This will build the .doccarchive and open it automatically in Xcode.

    xcodebuild docbuild -skipMacroValidation -skipPackagePluginValidation -derivedDataPath .derivedData -scheme StreamChatSwiftUI -destination generic/platform=iOS | xcpretty
    open .derivedData/Build/Products/Debug-iphoneos/StreamChatSwiftUI.doccarchive
  7. Install StreamChatSwiftUI via Swift Package Manager

    develop

    To integrate Stream Chat into your iOS app using SwiftUI, add the SDK as a Swift Package dependency in Xcode:

    1. Open your .xcodeproj.
    2. Go to File > Swift Packages and select Add Package Dependency.
    3. Paste the following URL: https://github.com/getstream/stream-chat-swift.
    4. Xcode will resolve the repository. Select the latest version.
    5. When prompted to select targets, choose StreamChatSwiftUI to use the SwiftUI-based UI components. If you only need the low-level client without UI, select StreamChat.

    Note: The minimal Swift version requirement for this installation method is 5.3 because the SDK must be distributed with resources.

    https://github.com/getstream/stream-chat-swift
  8. How InstantCommandsHandler manages command lifecycle

    develop

    The InstantCommandsHandler follows a delegation pattern to manage commands:

    1. Detection: canHandleCommand(in:caretLocation:) iterates through its child commands to see if any can handle the current text. If no child handles it, it checks if the text matches the symbol (e.g., /) to trigger a typing suggestion.
    2. Suggestion: showSuggestions(for:) returns a Future containing SuggestionInfo. If a child handler is identified, it delegates the suggestion request to that handler; otherwise, it returns the list of child commands as suggestions.
    3. Execution: handleCommand(...) and executeOnMessageSent(...) delegate the actual logic of transforming text or performing actions to the specific child CommandHandler responsible for that command.
    4. Validation: canBeExecuted(...) checks if a command is valid for execution by delegating to the appropriate child handler.
  9. Initialize InstantCommandsHandler

    develop

    The InstantCommandsHandler is used to manage instant commands (triggered by a symbol like /) within the chat composer. It acts as a container for multiple CommandHandler instances, delegating command detection, suggestion display, and execution to them.

    To use it, provide an array of CommandHandler objects and an optional symbol (defaults to /).

    let myCommands: [CommandHandler] = [
        // Your custom command handlers here
    ]
    
    let instantHandler = InstantCommandsHandler(
        commands: myCommands,
        symbol: "/",
        id: "instantCommands"
    )
  10. Display command suggestions in the Chat Composer

    develop

    The CommandSuggestionsView is a UI component used to display a list of available commands (e.g., slash commands) when a user is typing in the chat composer. It renders a header and a scrollable list of command rows.

    To use this view, you need to provide:

    1. instantCommands: An array of CommandHandler objects representing the available commands.
    2. commandSelected: A closure that is executed when a user taps a command. This closure receives a ComposerCommand object.

    When a command is selected, the view constructs a ComposerCommand using the handler's id, displayInfo, and replacesMessageSent property.

    CommandSuggestionsView(
        instantCommands: myCommandHandlers,
        commandSelected: { composerCommand in
            // Handle the selected command
            print("Selected command: \(composerCommand.id)")
        }
    )
  11. Implement a mute command with MuteCommandHandler

    develop

    The MuteCommandHandler is a specialized command handler used within the Chat Composer to process mute requests. It implements the TwoStepMentionCommand protocol, which implies a two-step interaction flow (likely selecting a user and then confirming the action).

    When executed, the handler uses the ChatClient to call the mute method on the userController for the specifically selected user.

    Key characteristics:

    • Command ID: Defaults to /mute.
    • Workflow: It is a two-step command where a user is selected before the executeOnMessageSent method triggers the actual mute action via the chatClient.
    • Integration: It relies on a ChatChannelController and a commandSymbol for initialization.
    // Example of how the handler is initialized within the SDK context
    let handler = MuteCommandHandler(
        channelController: channelController,
        commandSymbol: "/mute"
    )