Skip to content

feat!: message composer attachment manager integration and improve send flow #3093

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 136 commits into
base: V8
Choose a base branch
from

Conversation

khushal87
Copy link
Member

@khushal87 khushal87 commented May 20, 2025

The primary goal of the PR is to use the attachment manager from the new message composer in the LLC to manage the state of the files/image uploads and improve the overall sending flow of a message that respects the LocalMessage, Message and the sendOptions. The edit flow is also improved by relying on the LocalMessage in the PR. The LLC does the heavy lifting that we used to do in the SDK, so it's good to have a single source of truth in the SDK.

The following are the changes in the PR:

  • The attachment upload now relies on the attachmentManager.uploadFiles from the message composer to attach a file.
  • The preview of the upload is also handled through the attachments returned from the state of the attachment manager which means we can get rid of the imageUploads, fileUploads, setFileUploads, setimageUploads completely from the state and the context and the composer can be used for the same.
  • The maxNumberOfFiles is now directly set to the composer, and the uploads are respected by checking the availableUploadSlots in the state of the attachment manager directly.
  • The sendAsyncImage prop is removed, and the uploads of images through that medium are no longer supported within the SDK. This is in parity with all other SDKs, and we don't see customers using that as it was buggy, and we haven't received any bug reports for a long time. This has been decided upon based on internal discussion within the team.
  • The doDocUploadRequest and the doImageUploadRequest are now unified to a single function, doFileUploadRequest, that handles all types of attachment uploads. This respects the UploadRequestFn type from the SDK.
  • To handle different file upload attachment types UI, I have introduced different UI component props, including AudioAttachmentUploadPreview, FileAttachmentUploadPreview, ImageAttachmentUploadPreview, VideoAttachmentUploadPreview. This makes things a lot customizable and easier to customise. In the future, we can easily extend it to UnsuportedAttachmentPreview.
  • The UploadUnsupportedIndicator is renamed to AttachmentUnsupportedIndicator as it makes more sense.
  • The UploadProgressIndicator is renamed to AttachmentUploadProgressIndicator as it makes more sense.
  • The DismissUpload is renamed to DismissAttachmentUpload and pretty much unified to be used everywhere in the upload previews.
  • The close and reset logic of InputEditingStateHeader and InputReplyStateHeader now respects the message composer logic.
  • The async audio is now sent using the attachmentManager.uploadAttachment function.
  • The asyncIds, asyncUploads, imageUploads, fileUploads, setFileUploads, setimageUploads, isValidMessage, numberOfUploads, setNumberOfUploads, removeFile, removeImage, sendMessageAsync, setAsyncIds, setAsyncUploads, updateMessage, uploadNewImage, uploadFile, uploadImage are removed from the MessageInputContext henceforth. All of these can be handled using the message composer, and the flow is a lot simplified.
  • The autoCompleteSuggestionsLimit, initialValue, mentionAllAppUsersEnabled and the mentionAllAppUsersQuery have been removed in favour of customizability through the middleware.
  • The editMessage type is changed in the Channel component, and the MessageInputProvider calls the same with this signature:
editMessage: (params: {
    localMessage: LocalMessage;
    options?: UpdateMessageOptions;
  }) => ReturnType<StreamChat['updateMessage']>;

The sendMessage type is changed to:

sendMessage: (params: {
    localMessage: LocalMessage;
    message: StreamMessage;
    options?: SendMessageOptions;
  }) => Promise<void>;
  • The theme is refactored to incorporate the new UI changes.

isekovanic and others added 30 commits March 7, 2025 15:07
* feat: remove StreamChatGenerics and introduce interface merging

* fix: some of the outstanding todos

* chore: add default interfaces

* chore: remove SCG from sample app

* fix: remove redundant types

* fix: remove type module

* fix: change the way interface declaration is consumed

* fix: ignore ts complaints for interface declaration

* chore: migrate TypescriptMessagingApp away from SCG

* chore: migrate the Expo sample app away from SCG

* fix: commit missing files

* fix: revert mistaken change

* fix: add resolutions for symlinked libs
* feat: introduce support for expo-video

* fix: remove redundant test

* fix: add check for audio component
# Conflicts:
#	.github/workflows/sample-distribution.yml
#	package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts
#	package/src/components/ChannelPreview/hooks/useIsChannelMuted.ts
#	package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts
#	package/src/hooks/useTranslatedMessage.ts
# Conflicts:
#	examples/ExpoMessaging/yarn.lock
#	examples/SampleApp/ios/Podfile.lock
#	examples/SampleApp/yarn.lock
#	examples/TypeScriptMessaging/yarn.lock
#	package/expo-package/yarn.lock
#	package/native-package/yarn.lock
#	package/src/components/ChannelList/hooks/listeners/useUserPresence.ts
#	package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts
#	package/src/hooks/useSelectedChannelState.ts
# Conflicts:
#	package/expo-package/package.json
#	package/expo-package/yarn.lock
#	package/native-package/package.json
#	package/native-package/yarn.lock
#	package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx
#	package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx
#	package/src/components/Message/Message.tsx
#	package/src/components/Message/MessageSimple/MessageSimple.tsx
#	package/src/components/Message/MessageSimple/MessageStatus.tsx
#	package/src/components/Message/hooks/useMessageActionHandlers.ts
#	package/src/components/MessageMenu/MessageReactionPicker.tsx
#	package/src/contexts/messageInputContext/__tests__/pickFile.test.tsx
#	package/src/contexts/messagesContext/MessagesContext.tsx
@khushal87 khushal87 changed the title feat: message composer attachment manager integration and improve send flow feat!: message composer attachment manager integration and improve send flow May 23, 2025
@@ -67,6 +67,7 @@
},
"dependencies": {
"@gorhom/bottom-sheet": "^5.1.1",
"@ungap/structured-clone": "^1.3.0",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is added as a polyfill to the structuredClone function on the LLC inside the mergeWithDiff utility.

selected:
selectedImages.some((image) => image.uri === asset.uri) ||
selectedFiles.some((file) => file.uri === asset.uri),
selectedImages.some((image) => (image?.uri ? image.uri === asset.uri : false)) ||
Copy link
Member Author

@khushal87 khushal87 May 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is significantly improved in attachment-manager-integration...attachment-picker-context-optimizations.

Will raise a PR for the same once this one's merged.

@khushal87 khushal87 requested review from isekovanic and oliverlaz May 23, 2025 07:02
@khushal87 khushal87 marked this pull request as ready for review May 23, 2025 07:02
Base automatically changed from new-text-composer to V8 May 26, 2025 12:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants