Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/EnesKaraosman/SwiftyChat
SwiftUI Chat UI (Client) Framework & Documentation to get started!
https://github.com/EnesKaraosman/SwiftyChat
chat chat-application chat-bot chatbot chatbot-framework chatroom inputview ios message messaging swiftui
Last synced: 13 days ago
JSON representation
SwiftUI Chat UI (Client) Framework & Documentation to get started!
- Host: GitHub
- URL: https://github.com/EnesKaraosman/SwiftyChat
- Owner: EnesKaraosman
- License: apache-2.0
- Created: 2020-05-24T13:24:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-13T12:39:59.000Z (7 months ago)
- Last Synced: 2024-05-01T17:54:02.278Z (7 months ago)
- Topics: chat, chat-application, chat-bot, chatbot, chatbot-framework, chatroom, inputview, ios, message, messaging, swiftui
- Language: Swift
- Homepage:
- Size: 18.4 MB
- Stars: 250
- Watchers: 14
- Forks: 46
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# SwiftyChat
For Flutter version check [this link](https://github.com/EnesKaraosman/swifty_chat)
### Content
* [About](#about)
* [Features](#features)
* [Quick Preview](#quick-preview)
* [Installation](#installation)
* [Message Kinds](#message-kinds)
* [Usage](#usage)
* [Style & Customization](#style-and-customization)
### About
Simple Chat Interface to quick start with [built-in](#message-kinds) message cells.
### Features
- [x] Attributed string support that came with SwiftUI
- [x] Landscape orientation support (autoscales message cells with the given `cellWidth` property, if exists)
- [x] User Avatar (with different position options, optional usage)
- [x] Dismiss keyboard (on tapping outside).
- [x] Multiline Input Bar added (investigate [BasicInputView](../master/Sources/SwiftyChat/InputView/BasicInputView.swift))
- [x] Scroll to bottom.
- [x] "Picture in Picture" background mode video playing (to enable, visit >> Xcode "Sign in and Capabilities")
- [x] Round specific corner of text messages.
- [x] Implement custom message cells. See [CustomMessage.md](CustomMessage.md) for details.
- [ ] Swipe to dismiss keyboard.
### Quick Preview
Basic Example Preview
| Text (Light) | Text (Dark) |
:-------------------------:|:-------------------------:|
| 
Advanced Example Preview
| Contact, QuickReply, Text, Carousel | Map, Image | ContextMenu |
:-------------------------:|:-------------------------:|:-------------------------:
| 
| 
### Installation
SPM: https://github.com/EnesKaraosman/SwiftyChat.git
### Message Kinds
```swift
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)
}
```
### Usage
- `ChatView`
Here below is minimum code required to get started (see up & running)
For detail, visit example project [here](../master/SwiftyChatExample/Example)
```swift
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(
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.)
```swift
// 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
}
...
...
```
### Style and Customization
```swift
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](../master/Styles.md)
You can also use your own custom message cell, see [CustomMessage.md](CustomMessage.md) for details.
Please feel free to contribute.
* Create PR for a feature/bug you'd like to add/fix.
### Inspiration
* UIKit library [MessageKit](https://github.com/MessageKit/MessageKit).
* SwiftUI library [Nio](https://github.com/niochat/nio).