Swiftpack.co - EnesKaraosman/SwiftyChat as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by EnesKaraosman.
EnesKaraosman/SwiftyChat video-cell
SwiftUI Chat UI (Client) Framework & Documentation to get started!
⭐️ 213
🕓 3 weeks ago
iOS macOS
.package(url: "https://github.com/EnesKaraosman/SwiftyChat.git", from: "video-cell")

Version Swift 5.3


For Flutter version check this link



Simple Chat Interface to quick start with built-in message cells.
Fully written in pure SwiftUI.


  • ☑ HTML String support like <li>, <a> (not like h1 or font based tag)
  • ☑ Attributed string support that contains address, date, phoneNumber, url (text is automatically scanned)
  • ☑ Landscape orientation support (autoscales message cells with the given cellWidth property, if exists)
  • ☑ User Avatar src="https://raw.github.com/EnesKaraosman/SwiftyChat/master/ different position options, optional usage)
  • ☑ Dismiss keyboard (on tapping outside).
  • ☑ Multiline Input Bar added (investigate BasicInputView)
  • ☑ Scroll to bottom.
  • ☑ Round specific corsrc="https://raw.github.com/EnesKaraosman/SwiftyChat/master/f text messages.
  • ☑ Implement custom message cells. See [CustomMessage.src="https://raw.github.com/EnesKaraosman/SwiftyChat/master/ttps://raw.github.com/EnesKaraosman/SwiftyChat/master/CustomMessage.md) for details.
  • ☐ Swipe to dismiss keyboard.

Quick Preview

Basic Example Preview
Text (Light) src="https://raw.github.com/EnesKaraosman/SwiftyChat/master/(Dark)
<img style="max-width:100%;" src="../master/Sources/Swiftsrc="https://raw.github.com/EnesKaraosman/SwiftyChat/master//Demo/Preview/basic-1.png" width="240"/> <img style="max-width:100%;" src="../master/Sources/SwiftyCsrc="https://raw.github.com/EnesKaraosman/SwiftyChat/master/emo/Preview/basic-2.png" width="240"/>
Advanced Example Preview
Contact, QuickReply, Text, Carousel Map, Image ContextMenu


SPM: https://github.com/EnesKaraosman/SwiftyChat.git

Message Kinds

public enum ChatMessageKind {
    /// A text message,
    /// supports emoji 👍🏻 (auto scales if text is all about emojis)
    case text(String)
    /// An image message, from local(UIImage) or remote(URL).
    case image(ImageLoadingKind)
    /// A location message, pins given location & presents on MapKit.
    case location(LocationItem)
    /// A contact message, generally for sharing purpose.
    case contact(ContactItem)
    /// Multiple options, disables itself after selection.
    case quickReply([QuickReplyItem])
    /// `CarouselItem`s that contains title, subtitle, image & button in a scrollable view
    case carousel([CarouselItem])
    /// A video message, opens the given URL.
    case video(VideoItem)


  • ChatView

Here below is minimum code required to get started (see up & running)
For detail, visit example project here

@State private var scrollToBottom = false
@State private var messages: [MockMessages.ChatMessageItem] = [] // for quick test assign MockMessages.generatedMessages()

// ChatMessageItem & ChatUserItem is a sample objects/structs 
// that conforms `ChatMessage` & `ChatUser` protocols.
ChatView<MockMessages.ChatMessageItem, MockMessages.ChatUserItem>(
    messages: $messages,
    scrollToBottom: $scrollToBottom
) {
    // InputView here, continue reading..
// ▼ Required
    // All parameters initialized by default, 
    // change as you want.
    messages.debounce(for: .milliseconds(650), scheduler: RunLoop.main),
    perform: { _ in
        scrollToBottom = true
  • InputView

You can investigate existing BasicInputView in project.
You can use it if it suits your need, or create a new one.
Recommended way is just clone this BasicInputView and modify (ex. add camera icon etc.)

// InputBarView variables
@State private var message = ""
@State private var isEditing = false

var inputBarView: some View {
        message: $message, // Typed text.
        isEditing: $isEditing,
        placeholder: "Type something",
        onCommit: { messageKind in
                .init(user: MockMessages.sender, messageKind: messageKind, isSender: true)
    .padding(.bottom, isEditing ? 0 : 8)
    // ▼ An extension that wraps view inside AnyView

// Pass in ChatView
ChatView(messages: $messages) {

Style and Customization

public class ChatMessageCellStyle: ObservableObject {
    let incomingTextStyle: TextCellStyle
    let outgoingTextStyle: TextCellStyle
    let incomingCellEdgeInsets: EdgeInsets
    let outgoingCellEdgeInsets: EdgeInsets
    let contactCellStyle: ContactCellStyle
    let imageCellStyle: ImageCellStyle
    let quickReplyCellStyle: QuickReplyCellStyle
    let carouselCellStyle: CarouselCellStyle
    let locationCellStyle: LocationCellStyle
    let incomingAvatarStyle: AvatarStyle
    let outgoingAvatarStyle: AvatarStyle

You must initiate this class to build a proper style & inject it as environmentObject,
All styles has default initializer;

For detail documentation, visit Styles.md

You can also use your own custom message cell, see CustomMessage.md for details.

Please feel free to contribute.
* Create PR for a feature/bug you'd like to add/fix.




Stars: 213
Last commit: 7 hours ago
jonrohan Something's broken? Yell at me @ptrpavlik. Praise and feedback (and money) is also welcome.

Release Notes

11 weeks ago

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics