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 (with different position options, optional usage)
- Dismiss keyboard (on tapping outside).
- Multiline Input Bar added (investigate BasicInputView)
- Scroll to bottom for iOS14 (use proper init).
- Scroll to bottom for iOS13.
- Swipe to dismiss keyboard.
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
@State 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> {
// InputView here, continue reading..
}
// โผ Required
.environmentObject(
// All parameters initialized by default,
// change as you want.
ChatMessageCellStyle()
)
...
...
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 {
BasicInputView(
message: $message, // Typed text.
isEditing: $isEditing,
placeholder: "Type something",
onCommit: { messageKind in
self.messages.append(
.init(user: MockMessages.sender, messageKind: messageKind, isSender: true)
)
}
)
.padding(8)
.padding(.bottom, isEditing ? 0 : 8)
.accentColor(.chatBlue)
.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
Please feel free to contribute.
* Create PR for a feature/bug you'd like to add/fix.
- Kingfisher : Image downloading library.
- VideoPlayer : VideoPlayer library.
- UIKit library MessageKit.
- SwiftUI library Nio.