Giter Club home page Giter Club logo

chatui's Introduction

Frame 1 (2)

ChatUI is an open-source Swift package that provides a simple and reliable solution for implementing chat interfaces using SwiftUI.

stability-beta

ChatUI-examples ChatUI-Figma-Community ChatUI-Canvas-Beta-Testing

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

Note To see Figma, the design resources, please see ChatUI - Figma Community

Note To see ChatUI Canvas app that allows to create view using ChatUI without any code, please see Discussion - ๐ŸŽ‰ ChatUI Canvas starts beta testing!

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 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 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
  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:

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

Design Resources

To see Figma, the design resources, please see ChatUI - Figma Community

Key Functions

Chat in Channels

Name Description Documentation
โ„น๏ธ Channel Info View This is a view that displays the following channel information See documentation
๐Ÿฅž Message List This is a view that lists message objects. See documentation
๐Ÿ’ฌ Message Row This is a view that is provided by default in ChatUI to display message information. See documentation
โŒจ๏ธ Message Field The message field is a UI component for sending messages See documentation

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
Colors The predefined colors used in the ChatUI. See documentation
Typography The predefined colors used in the ChatUI. See documentation
Images The predefined images used in the ChatUI as an extension of the SwiftUI.Image. See documentation
Image Scales The predefined image scales used in the ChatUI. See documentation

To do list

Features (๐Ÿš€ 1.0.0 Feature Plans)

If you have any feature you want, please let me know via Issue or Discussion

  • MessageList: Dimiss keyboard when tap outside
  • MessageList: Date view
  • MessageList: Publisher for retrieving more message while scrolling
  • MessageList: Message Menu
  • 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)

chatui's People

Contributors

fred-bowker avatar x-0o0 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

chatui's Issues

Scrolling gesture only works on the edge

I'm noticing that on chat interactions with a long chat post you can't scroll by swiping over chat bubbles. See screenshot from my app.

I've also reproduced this in the Quickstart example.

IMG_F50039FA06F4-1

IMO the expected behavior is that the entire chat canvas is supports the scrolling gesture.

I'm hitting the line limit

Hi, I'm hitting the line limit for results returned by open ai. I see that it's hard-coded to 10. Is there an easy way to make this configurable?

Background image for chat view

Discussed in #37

Originally posted by fred-bowker August 6, 2023
Hi, I'm having a problem getting a chat view with a background (similar to WhatsApp). The background displays ok, but it is squashed when the keyboard is displayed. Just wondering if you have ever got this working, if so it would be good to have a chat with background in the examples project.

See the attached images for an example of the squashed background.

Background displayed OK.

Cheers Fred :)
chat-background

Background displayed squashed.

chat-background-keyboard

[TODO] API Documentation in DocC

I've already been adding API descriptions to all new public-facing interfaces since the very first beta release.
However, there isn't an API documentation page available, which causes inconvenience when using ChatUI.
To resolve this inconvenience, I'm planning to deploy API Documentation using the DocC framework on GitHub Pages.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.