• Stars
    star
    833
  • Rank 54,737 (Top 2 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 2 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A SwiftUI Chat UI framework with fully customizable message cells and a built-in media picker

Chat

A SwiftUI Chat UI framework with fully customizable message cells and a built-in media picker


We are a development agency building phenomenal apps.

SPM Compatible Cocoapods Compatible Carthage Compatible License: MIT

Features

  • Displays your messages with pagination and allows you to create and "send" new messages (sending means calling a closure since user will be the one providing actual API calls)
  • Allows you to pass a custom view builder for messages and input views
  • Has a built-in photo and video library/camera picker for multiple media asset selection
  • Can display a fullscreen menu on long press a message cell (automatically shows scroll for big messages)
  • Supports "reply to message" via message menu. Remove and edit are coming soon
  • Supports voice recording, video/photo and text. More content types are coming soon

Usage

Create a chat view like this:

@State var messages: [Message] = []

var body: some View {
    ChatView(messages: messages) { draft in
        yourViewModel.send(draft: draft)
    }
}

where:
messages - list of messages to display
didSendMessage - a closure which is called when the user presses the send button

Message is a type that Chat uses for the internal implementation. In the code above it expects the user to provide a list of Message structs, and it returns a DraftMessage in the didSendMessage closure. You can map it both ways to your own Message model that your API expects.

Customization

You may customize message cells like this:

ChatView(messages: viewModel.messages) { draft in
    viewModel.send(draft: draft)
} messageBuilder: { message, positionInGroup, showAttachmentClosure in
    VStack {
        Text(message.text)
        if !message.attachments.isEmpty {
            ForEach(message.attachments, id: \.id) { at in
                AsyncImage(url: at.thumbnail)
            }
        }
    }
}

messageBuilder's parameters:

  • message - the message containing user info, attachments, etc.
  • positionInGroup - the position of the message in its continuous collection of messages from the same user
  • showAttachmentClosure - you can pass an attachment to this closure to use ChatView's fullscreen media viewer

You may customize the input view (a text field with buttons at the bottom) like this:

ChatView(messages: viewModel.messages) { draft in
    viewModel.send(draft: draft)
} inputViewBuilder: { textBinding, attachments, state, style, actionClosure in
    Group {
        switch style {
        case .message: // input view on chat screen
            VStack {
                HStack {
                    Button("Send") { actionClosure(.send) }
                    Button("Attach") { actionClosure(.photo) }
                }
                TextField("Write your message", text: textBinding)
            }
        case .signature: // input view on photo selection screen
            VStack {
                HStack {
                    Button("Send") { actionClosure(.send) }
                }
                TextField("Compose a signature for photo", text: textBinding)
                    .background(Color.green)
            }
        }
    }
}

inputViewBuilder's parameters:

  • textBinding to bind your own TextField
  • attachments is a struct containing photos, videos, recordings and a message you are replying to
  • state - the state of the input view that is controled by the library automatically if possible or through your calls of actionClosure
  • style - .message or .signature (the chat screen or the photo selection screen)
  • actionClosure is called on taps on your custom buttons. For example, call actionClosure(.send) if you want to send your message, then the library will reset the text and attachments and call the didSendMessage sending closure

Supported content types

This library allows to send the following content in messages in any combination:

  • Text with/without markdown
  • Photo/video
  • Audio recording

Coming soon:

  • User's location
  • Documents

Modifiers

If you are not using your own messageBuilder:
avatarSize - the default avatar is a circle, you can specify its diameter here
messageUseMarkdown - whether the default message cell uses markdown
assetsPickerLimit - the maximum media count that the user can select in the media picker
enableLoadMore(offset: Int, handler: @escaping ChatPaginationClosure) - when user scrolls to offset-th message from the end, call the handler function, so the user can load more messages
chatNavigation(title: String, status: String? = nil, cover: URL? = nil) - pass the info for the Chat's navigation bar

Example

To try out the Chat examples:

  • Clone the repo git clone [email protected]:exyte/Chat.git
  • Open terminal and run cd <ChatRepo>/Example
  • Wait for SPM to finish downloading packages
  • Run it!

Installation

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/exyte/Chat.git")
]

CocoaPods

pod 'ExyteChat'

Carthage

github "Exyte/Chat"

Requirements

  • iOS 16+
  • Xcode 14+

Our other open source SwiftUI libraries

PopupView - Toasts and popups library
Grid - The most powerful Grid container
ScalingHeaderScrollView - A scroll view with a sticky header which shrinks as you scroll
AnimatedTabBar - A tabbar with number of preset animations
MediaPicker - Customizable media picker
ConcentricOnboarding - Animated onboarding flow
FloatingButton - Floating button menu
ActivityIndicatorView - A number of animated loading indicators
ProgressIndicatorView - A number of animated progress indicators
SVGView - SVG parser
LiquidSwipe - Liquid navigation animation

More Repositories

1

Macaw

Powerful and easy-to-use vector graphics Swift library with SVG support
Swift
6,005
star
2

PopupView

Toasts and popups library written with SwiftUI
Swift
3,315
star
3

Grid

The most powerful Grid container missed in SwiftUI
Swift
1,738
star
4

ARTetris

Augmented Reality Tetris made with ARKit and SceneKit
Swift
1,532
star
5

ActivityIndicatorView

A number of preset loading indicators created with SwiftUI
Swift
1,391
star
6

ConcentricOnboarding

SwiftUI library for a walkthrough or onboarding flow with tap actions
Swift
1,350
star
7

FloatingButton

Easily customizable floating button menu created with SwiftUI
Swift
1,098
star
8

ScalingHeaderScrollView

A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI.
Swift
1,096
star
9

ReadabilityKit

Preview extractor for news, articles and full-texts in Swift
Swift
830
star
10

fan-menu

Menu with a circular layout based on Macaw
Swift
728
star
11

SVGView

SVG parser and renderer written in SwiftUI
Swift
614
star
12

LiquidSwipe

Example of using SwiftUI to create a beautiful Liquid Swipe control
Swift
523
star
13

AnimatedTabBar

A tabbar with a number of preset animations written in pure SwiftUI
Swift
374
star
14

Macaw-Examples

Various usages of the Macaw library
Swift
353
star
15

AndroidAnimatedNavigationBar

AnimatedNavigationBar is a navigation bar with a number of preset animations written in Jetpack Compose
Kotlin
320
star
16

MediaPicker

Customizable media picker written with SwiftUI
Swift
316
star
17

replicating

Kotlin
247
star
18

ProgressIndicatorView

An iOS progress indicator view library written in SwiftUI
Swift
247
star
19

ComposeMultiplatformDribbbleAudio

A repo for the Dribbble Replicating Compose Multiplatform article
Kotlin
78
star
20

android-waves-progressbar

A depth gauge progress bar, inspired by Apple Watch dive widget.
Kotlin
46
star
21

clean-swift-article

Swift
37
star
22

FlagAndCountryCode

A country code and flag icon provider library for iOS apps
Swift
37
star
23

AnimatedGradient

Swift
35
star
24

sweet.eclipse

Sweet Eclipse
HTML
33
star
25

OpenAI

Swift
32
star
26

gaster

Ethereum transactions stats for your smart contracts
JavaScript
29
star
27

ShapedBackgroundAndroid

Repo for the instagram-like shaped background on Android
Kotlin
25
star
28

android-replicating

Replicating complex UI using Jetpack Compose
Kotlin
23
star
29

wwdc2020-tutorials

Swift
21
star
30

core-haptics-example

Swift
15
star
31

homebrew-formulae

Ruby
1
star