|
| 1 | +# MessageField |
| 2 | + |
| 3 | +The message field is a UI component for sending messages. |
| 4 | + |
| 5 | +## How to send a new message |
| 6 | + |
| 7 | +When creating a `MessageField`, you can provide an action for how to handle a new `MessageStyle` information in the `onSend` parameter. `MessageStyle` can contain different types of messages, such as text, media (photo, video, document, contact), and voice. |
| 8 | + |
| 9 | +```swift |
| 10 | +MessageField { messageStyle in |
| 11 | + viewModel.sendMessage($0) |
| 12 | +} |
| 13 | +``` |
| 14 | + |
| 15 | +### Supported message styles |
| 16 | + |
| 17 | +- [x] text |
| 18 | +- [x] voice |
| 19 | +- [x] photo library |
| 20 | +- [x] giphy |
| 21 | +- [x] location |
| 22 | +- [ ] camera (*coming soon*) |
| 23 | +- [ ] document (*coming soon*) |
| 24 | +- [ ] contacts (*coming soon*) |
| 25 | + |
| 26 | +## Handling menu items |
| 27 | + |
| 28 | +```swift |
| 29 | +MessageField(isMenuItemPresented: $isMenuItemPresented) { ... } |
| 30 | + |
| 31 | +if isMenuItemPresented { |
| 32 | + MyMenuItemList() |
| 33 | +} |
| 34 | +``` |
| 35 | + |
| 36 | +## Sending location |
| 37 | + |
| 38 | +To send a location, you can use the `LocationSelector` component, which presents a UI for the user to select a location. When the user taps the send location button, the `onSend` action of the `MessageField` is called. |
| 39 | + |
| 40 | +> **NOTE:** |
| 41 | +> |
| 42 | +> If you want to use `sendMessagePublisher` instead `onSend`, please refer to [Sending a new message by using publisher](https://www.notion.so/ChatUI-ab3dddb98c44434d993c96ae9da6b929#d918e619224147958c840e678c93890a) |
| 43 | +
|
| 44 | +```swift |
| 45 | +@State private var showsLocationSelector: Bool = false |
| 46 | + |
| 47 | +var body: some View { |
| 48 | + LocationSelector(isPresented: $showsLocationSelector) |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +## Sending a new message by using publisher |
| 53 | + |
| 54 | +```swift |
| 55 | +public var sendMessagePublisher: PassthroughSubject<MessageStyle, Never> |
| 56 | +``` |
| 57 | + |
| 58 | +`sendMessagePublisher` is a Combine `Publisher` that passes `MessageStyle` object. |
| 59 | + |
| 60 | +### How to publish |
| 61 | + |
| 62 | +To publish a new message, you can create a new `MessageStyle` object and send it using `send(_:)`. |
| 63 | + |
| 64 | +```swift |
| 65 | +let _ = Empty<Void, Never>() |
| 66 | + .sink( |
| 67 | + receiveCompletion: { _ in |
| 68 | + // Create `MessageStyle` object |
| 69 | + let style = MessageStyle.text("{TEXT}") |
| 70 | + // Publish the created style object via `send(_:)` |
| 71 | + sendMessagePublisher.send(style) |
| 72 | + }, |
| 73 | + receiveValue: { _ in } |
| 74 | + ) |
| 75 | +``` |
| 76 | + |
| 77 | +### How to subscribe |
| 78 | + |
| 79 | +You can subscribe to `sendMessagePublisher` to handle new messages. |
| 80 | + |
| 81 | +```swift |
| 82 | +.onReceive(sendMessagePublisher) { messageStyle in |
| 83 | + // Handle `messageStyle` here (e.g., sending message with the style) |
| 84 | +} |
| 85 | +``` |
| 86 | + |
| 87 | +### Use cases |
| 88 | +- rating system |
| 89 | +- answering by defined message |
| 90 | + |
| 91 | +- - - |
0 commit comments