https://github.com/x-0o0/chatui
The UIKit for Chat features in SwiftUI
https://github.com/x-0o0/chatui
chat chatui swift-package-manager swiftui uikit
Last synced: 3 months ago
JSON representation
The UIKit for Chat features in SwiftUI
- Host: GitHub
- URL: https://github.com/x-0o0/chatui
- Owner: x-0o0
- License: mit
- Created: 2023-02-08T17:23:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-10T09:28:04.000Z (about 2 years ago)
- Last Synced: 2025-06-07T13:07:20.105Z (4 months ago)
- Topics: chat, chatui, swift-package-manager, swiftui, uikit
- Language: Swift
- Homepage: https://j-sung-0o0.notion.site/ChatUI-ab3dddb98c44434d993c96ae9da6b929
- Size: 156 KB
- Stars: 97
- Watchers: 2
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
ChatUI is an open-source Swift package that provides a simple and reliable solution for implementing chat interfaces using SwiftUI.
[](https://github.com/mkenney/software-guides/blob/master/STABILITY-BADGES.md#beta)
[](https://github.com/jaesung-0o0/ChatUI-examples)
[](https://www.figma.com/community/file/1211259538649728876)
[](https://testflight.apple.com/join/AKiViqEk)
## **Overview**
*written by ChatGPT*
There are many companies that provide Chat SDK, such as Firebase, Sendbird, GetStream, and Zendesk. This means that the interface we use to implement chat functionality depends on our choice of SDK. While Apple's UI framework, SwiftUI, allows for incredibly flexible and fast UI design, there is a lack of available information on how to implement chat functionality, particularly when it comes to managing scrolling in message lists. To solve this problem, some Chat SDK companies offer their own Chat UI kits. However, since one UIKit only supports one SDK, there is no guarantee that a given UIKit will support the Chat SDK we are using, and switching to a different Chat SDK can create significant UI issues.
Nevertheless, you know that different Chat SDKs essentially have the same meaning and essence despite different interface names and forms. If you conform to the protocols provided by ChatUI for the channels, messages, and users that we want to implement UI for, ChatUI can draw a SwiftUI-based chat UI based on this information.
Although ChatUI currently offers very limited features, Iām confident that it can provide best practices for implementing chat interfaces using SwiftUI. Additionally, since ChatUI is an open source project, you can expand its capabilities and create a more impressive ChatUI together through contributions. I appreciate your interest.
> **Note**
> To see **Quickstart** or **Real use cases examples** projects, please go to [ChatUI-examples](https://github.com/jaesung-0o0/ChatUI-examples)
> **Note**
> To see **Figma**, the design resources, please see [ChatUI - Figma Community](https://www.figma.com/community/file/1211259538649728876)
> **Note**
> To see **ChatUI Canvas** app that allows to create view using ChatUI *without any code*, please see [Discussion - š ChatUI Canvas starts beta testing!](https://github.com/jaesung-0o0/ChatUI/discussions/5)
## **Contribution**
I welcome and appreciate contributions from the community. If you find a bug, have a feature request, or want to contribute code, please submit an issue or a pull request on our GitHub repository freely.
Please see [šŖ How to Contribute](https://github.com/jaesung-0o0/ChatUI/discussions/1) in Discussion tab.
> **Important**
>
> When you contribute code via pull request, please add the executable previews that conforms to `PreviewProvider`.
## **License**
ChatUI is released under the MIT license. See **[LICENSE](https://github.com/jaesung-0o0/ChatUI/blob/main/LICENSE)** for details.
## **Installation**
To use ChatUI in your project, follow these steps:
1. In Xcode, select **File** > **Swift Packages** > **Add Package Dependency**.
2. In the search bar, paste the ChatUI URL: **[https://github.com/jaesung-0o0/ChatUI](https://github.com/jaesung-0o0/ChatUI)**
3. Select the branch as **main** to install.
4. Click **Next**, and then click **Finish**.
## **Usage**
To use ChatUI in your project, add the following import statement at the top of your file:
```swift
import ChatUI
```
You can then use ChatUI to implement chat interfaces in your SwiftUI views. Follow the guidelines in the ChatUI documentation to learn how to use the package.
### Real Use-cases Examples
To see **Quickstart** or **Real use cases examples** projects, please go to [ChatUI-examples](https://github.com/jaesung-0o0/ChatUI-examples)
### Design Resources
To see **Figma**, the design resources, please see [ChatUI - Figma Community](https://www.figma.com/community/file/1211259538649728876)
## Key Functions
### Chat in Channels
| Name | Description | Documentation |
| --- | --- | --- |
| ā¹ļø Channel Info View | This is a view that displays the following channel information | [See documentation](/Documentation/Chat_in_Channel/ChannelInfoView.md) |
| š„ Message List | This is a view that lists message objects. | [See documentation](/Documentation/Chat_in_Channel/MessageList.md) |
| š¬ Message Row | This is a view that is provided by default in ChatUI to display message information. | [See documentation](/Documentation/Chat_in_Channel/MessageRow.md) |
| āØļø Message Field | The message field is a UI component for sending messages | [See documentation](/Documentation/Chat_in_Channel/MessageField.md) |
### List Channels
*Coming soon*
### Appearances
| Name | Description | Documentation |
| --- | --- | --- |
| Appearance | The `Appearance` struct represents a set of predefined appearances used in the app's user interface such as colors and typography. | [See documentation](/Documentation/Appearance/Appearance.md) |
| Colors | The predefined colors used in the ChatUI. | [See documentation](/Documentation/Appearance/Colors.md) |
| Typography | The predefined colors used in the ChatUI. | [See documentation](/Documentation/Appearance/Typography.md) |
| Images | The predefined images used in the ChatUI as an extension of the `SwiftUI.Image`. | [See documentation](/Documentation/Appearance/Images.md) |
| Image Scales | The predefined image scales used in the ChatUI. | [See documentation](/Documentation/Appearance/ImageScales.md) |
## To do list
### Features (š 1.0.0 Feature Plans)
If you have any feature you want, please let me know via *Issue* or *Discussion*
- [x] MessageList: Dimiss keyboard when tap outside
- [x] MessageList: Date view
- [ ] MessageList: Publisher for retrieving more message while scrolling
- [x] MessageList: Message Menu
- [x] MessageList: Message reaction publisher
- [ ] MessageRow: placement (e.g., Both, leftOnly, rightOnly)
- [ ] MessageField: CameraCapturer
- [ ] Giphy: Resize body with GIF frame size
- [ ] MapView: The view to shows map when the `.media(.location)` style message was tapped.
- [ ] MediaView: The view to display / play media in message
- [ ] MessageSearch: The feature that searches messages.
### Next Key functions
- [ ] List Chanels: ChannelList, ChannelGrid, ChannelRow, ChannelColumn
- [ ] Thread in Message: CommentList, CommentRow, etc,... (Add comment to the message)
- [ ] Feed: FeedStack (Add message to the feed)
- [ ] List Notifications: NotificationList, NotificationRow
### Documentations
- [ ] Code Style Convention
- [ ] Issues Convention
- [ ] Branch Convention (name, commit)
- [ ] Pull Requests Convention (how to PR, review process)