For Flutter version check this link
Simple Chat Interface to quick start with built-in message cells.
- Attributed string support that came with SwiftUI
- Landscape orientation support (autoscales message cells with the given
cellWidthproperty, if exists) - User Avatar (with different position options, optional usage)
- Dismiss keyboard (on tapping outside).
- Multiline Input Bar added (investigate BasicInputView)
- Scroll to bottom.
- "Picture in Picture" background mode video playing (to enable, visit >> Xcode "Sign in and Capabilities")
- Round specific corner of text messages.
- Implement custom message cells. See CustomMessage.md for details.
- Swipe to dismiss keyboard.
Basic Example Preview
| Text (Light) | Text (Dark) |
|---|---|
 |
 |
Advanced Example Preview
| Contact, QuickReply, Text, Carousel | Map, Image | ContextMenu |
|---|---|---|
 |
 |
 |
SPM: https://github.com/EnesKaraosman/SwiftyChat.git
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
import SwiftyChat
import SwiftyChatMock
@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
.environmentObject(
// All parameters initialized by default,
// change as you want.
ChatMessageCellStyle()
)
.onReceive(
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 = ""
var inputBarView: some View {
BasicInputView(
message: $message, // Typed text.
placeholder: "Type something",
onCommit: { messageKind in
self.messages.append(
.init(user: MockMessages.sender, messageKind: messageKind, isSender: true)
)
}
)
.background(Color.primary.colorInvert())
// ▼ An extension that wraps view inside AnyView
.embedInAnyView()
}
// Pass in ChatView
ChatView(messages: $messages) {
inputBarView
}
...
...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.
- UIKit library MessageKit.
- SwiftUI library Nio.