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.

Sign up for GitHub

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 11 commits into
base: new-text-composer
Choose a base branch
from
+1,638 −2,999
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9fdc606
feat: add integration for attachment manager
khushal87 May 20, 2025
d7206e8
fix: yarn.lock update
khushal87 May 20, 2025
5be9ded
fix: improve upload preview components
khushal87 May 21, 2025
21589ea
fix: improve upload preview components
khushal87 May 21, 2025
7c1bba3
fix: audio attachment issues
khushal87 May 22, 2025
7c6013b
chore: resolve conflicts
khushal87 May 22, 2025
4a6b7f9
chore: resolve conflicts
khushal87 May 22, 2025
7b9d7fa
fix: comment
khushal87 May 22, 2025
3ac8e8b
Merge branch 'new-text-composer' of github.com:GetStream/stream-chat-…
khushal87 May 23, 2025
9ba3644
fix: cleanup for the attachment manager
khushal87 May 23, 2025
05629c0
fix: input button hasText bug
khushal87 May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/SampleApp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"react-native-fast-image": "^8.6.3",
"react-native-gesture-handler": "^2.24.0",
"react-native-haptic-feedback": "^2.3.3",
"react-native-image-picker": "^8.2.0",
"react-native-image-picker": "^8.2.1",
"react-native-reanimated": "^3.17.1",
"react-native-safe-area-context": "^5.2.0",
"react-native-screens": "^4.9.1",
Expand Down
41 changes: 6 additions & 35 deletions examples/TypeScriptMessaging/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2334,6 +2334,11 @@
"@typescript-eslint/types" "8.24.1"
eslint-visitor-keys "^4.2.0"

"@ungap/structured-clone@^1.3.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==

abort-controller@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
Expand Down Expand Up @@ -3361,7 +3366,7 @@ emittery@^0.13.1:
resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==

emoji-regex@^10.3.0, emoji-regex@^10.4.0:
emoji-regex@^10.4.0:
version "10.4.0"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
Expand Down Expand Up @@ -6926,25 +6931,6 @@ statuses@~1.5.0:
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==

[email protected]:
version "7.0.0"
resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.0.0.tgz#ba5439c9a446713356105a40c7d2f90c3ccbf4a3"
integrity sha512-qjjukVUXl13/cQDCovTAUHMUXgweg6fhh0we2t+C3RI3gN0AaiXMpzejA6RSuArBtezV4AB/mv9BoT7BRTzqeA==
dependencies:
"@gorhom/bottom-sheet" "^5.1.1"
dayjs "1.10.5"
emoji-regex "^10.3.0"
i18next "^21.6.14"
intl-pluralrules "^2.0.1"
linkifyjs "^4.1.1"
lodash-es "4.17.21"
mime-types "^2.1.34"
path "0.12.7"
react-native-markdown-package "1.8.2"
react-native-url-polyfill "^1.3.0"
stream-chat "^9.0.0"
use-sync-external-store "^1.4.0"

"stream-chat-react-native-core@link:../../package":
version "0.0.0"
uid ""
Expand All @@ -6968,21 +6954,6 @@ stream-chat@^9.0.0:
linkifyjs "^4.2.0"
ws "^8.18.1"

stream-chat@^8.57.6:
version "8.60.0"
resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.60.0.tgz#b67d4fbb185da53fb8ac5fc5759986d6ad7e19a3"
integrity sha512-7FpO7Wno++r+n+x9aFuXtGYtNO06CIMd2Bxe3doYZLhMfS0nuaXloeFlGcMT0r4U/6bnguz1qQdDJUPNQAS8bQ==
dependencies:
"@babel/runtime" "^7.27.0"
"@types/jsonwebtoken" "~9.0.0"
"@types/ws" "^7.4.0"
axios "^1.6.0"
base64-js "^1.5.1"
form-data "^4.0.0"
isomorphic-ws "^4.0.1"
jsonwebtoken "~9.0.0"
ws "^7.5.10"

strict-uri-encode@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
Expand Down
2 changes: 1 addition & 1 deletion package/expo-package/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"types": "types/index.d.ts",
"dependencies": {
"mime": "^4.0.7",
"stream-chat-react-native-core": "7.0.0"
"stream-chat-react-native-core": "link:../"
},
"peerDependencies": {
"expo": ">=51.0.0",
Expand Down
34 changes: 12 additions & 22 deletions package/expo-package/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1827,6 +1827,11 @@
dependencies:
"@types/node" "*"

"@ungap/structured-clone@^1.3.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==

"@urql/core@^5.0.6", "@urql/core@^5.1.1":
version "5.1.1"
resolved "https://registry.yarnpkg.com/@urql/core/-/core-5.1.1.tgz#d83c405451806a5936dabbd3f10a22967199e2f5"
Expand Down Expand Up @@ -2598,10 +2603,10 @@ electron-to-chromium@^1.5.73:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.112.tgz#8d3d95d4d5653836327890282c8eda5c6f26626d"
integrity sha512-oen93kVyqSb3l+ziUgzIOlWt/oOuy4zRmpwestMn4rhFWAoFJeFuCVte9F2fASjeZZo7l/Cif9TiyrdW4CwEMA==

emoji-regex@^10.3.0:
version "10.3.0"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
emoji-regex@^10.4.0:
version "10.4.0"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==

emoji-regex@^8.0.0:
version "8.0.0"
Expand Down Expand Up @@ -4778,24 +4783,9 @@ [email protected], stream-buffers@~2.2.0:
resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==

[email protected]:
version "7.0.0"
resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.0.0.tgz#ba5439c9a446713356105a40c7d2f90c3ccbf4a3"
integrity sha512-qjjukVUXl13/cQDCovTAUHMUXgweg6fhh0we2t+C3RI3gN0AaiXMpzejA6RSuArBtezV4AB/mv9BoT7BRTzqeA==
dependencies:
"@gorhom/bottom-sheet" "^5.1.1"
dayjs "1.10.5"
emoji-regex "^10.3.0"
i18next "^21.6.14"
intl-pluralrules "^2.0.1"
linkifyjs "^4.1.1"
lodash-es "4.17.21"
mime-types "^2.1.34"
path "0.12.7"
react-native-markdown-package "1.8.2"
react-native-url-polyfill "^1.3.0"
stream-chat "^9.0.0"
use-sync-external-store "^1.4.0"
"stream-chat-react-native-core@link:..":
version "0.0.0"
uid ""

stream-chat@^9.0.0:
version "9.0.0"
Expand Down
26 changes: 8 additions & 18 deletions package/native-package/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1301,6 +1301,11 @@
dependencies:
"@types/yargs-parser" "*"

"@ungap/structured-clone@^1.3.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==

abort-controller@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
Expand Down Expand Up @@ -3450,24 +3455,9 @@ statuses@~1.5.0:
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==

[email protected]:
version "7.0.0"
resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.0.0.tgz#ba5439c9a446713356105a40c7d2f90c3ccbf4a3"
integrity sha512-qjjukVUXl13/cQDCovTAUHMUXgweg6fhh0we2t+C3RI3gN0AaiXMpzejA6RSuArBtezV4AB/mv9BoT7BRTzqeA==
dependencies:
"@gorhom/bottom-sheet" "^5.1.1"
dayjs "1.10.5"
emoji-regex "^10.3.0"
i18next "^21.6.14"
intl-pluralrules "^2.0.1"
linkifyjs "^4.1.1"
lodash-es "4.17.21"
mime-types "^2.1.34"
path "0.12.7"
react-native-markdown-package "1.8.2"
react-native-url-polyfill "^1.3.0"
stream-chat "^9.0.0"
use-sync-external-store "^1.4.0"
"stream-chat-react-native-core@link:..":
version "0.0.0"
uid ""

stream-chat@^9.0.0:
version "9.0.0"
Expand Down
2 changes: 2 additions & 0 deletions package/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

"dayjs": "1.10.5",
"emoji-regex": "^10.4.0",
"i18next": "^21.6.14",
Expand Down Expand Up @@ -127,6 +128,7 @@
"@types/mime-types": "2.1.4",
"@types/react": "^19.0.0",
"@types/react-test-renderer": "19.0.0",
"@types/ungap__structured-clone": "^1.2.0",
"@types/use-sync-external-store": "^0.0.6",
"@types/uuid": "^10.0.0",
"babel-eslint": "10.1.0",
Expand Down
30 changes: 21 additions & 9 deletions package/src/components/Attachment/AudioAttachment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';

import { AudioAttachment as StreamAudioAttachment } from 'stream-chat';

import { useTheme } from '../../contexts';
import { useAudioPlayer } from '../../hooks/useAudioPlayer';
import { Audio, Pause, Play } from '../../icons';
Expand All @@ -15,18 +17,25 @@ import {
VideoProgressData,
VideoSeekResponse,
} from '../../native';
import { AudioUpload, FileTypes } from '../../types/types';
import { AudioConfig, FileTypes } from '../../types/types';
import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
import { ProgressControl } from '../ProgressControl/ProgressControl';
import { WaveProgressBar } from '../ProgressControl/WaveProgressBar';

dayjs.extend(duration);

export type AudioAttachmentType = AudioConfig &
Pick<StreamAudioAttachment, 'waveform_data' | 'asset_url' | 'title'> & {
id: string;
type: 'audio' | 'voiceRecording';
};

export type AudioAttachmentProps = {
item: Omit<AudioUpload, 'state'>;
item: AudioAttachmentType;
onLoad: (index: string, duration: number) => void;
onPlayPause: (index: string, pausedStatus?: boolean) => void;
onProgress: (index: string, progress: number) => void;
titleMaxLength?: number;
hideProgressBar?: boolean;
showSpeedSettings?: boolean;
testID?: string;
Expand All @@ -48,6 +57,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
onProgress,
showSpeedSettings = false,
testID,
titleMaxLength,
} = props;
const { changeAudioSpeed, pauseAudio, playAudio, seekAudio } = useAudioPlayer({ soundRef });
const isExpoCLI = NativeHandlers.SDK === 'stream-chat-expo';
Expand Down Expand Up @@ -180,9 +190,9 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
useEffect(() => {
if (isExpoCLI) {
const initiateSound = async () => {
if (item && item.file && item.file.uri && NativeHandlers.Sound?.initializeSound) {
if (item && item.asset_url && NativeHandlers.Sound?.initializeSound) {
soundRef.current = await NativeHandlers.Sound.initializeSound(
{ uri: item.file.uri },
{ uri: item.asset_url },
{
pitchCorrectionQuality: 'high',
progressUpdateIntervalMillis: 100,
Expand Down Expand Up @@ -255,7 +265,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
},
colors: { accent_blue, black, grey_dark, grey_whisper, static_black, static_white, white },
messageInput: {
fileUploadPreview: { filenameText },
fileAttachmentUploadPreview: { filenameText },
},
},
} = useTheme();
Expand Down Expand Up @@ -318,22 +328,24 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
filenameText,
]}
>
{getTrimmedAttachmentTitle(item.file.name)}
{item.type === FileTypes.VoiceRecording
? 'Recording'
: getTrimmedAttachmentTitle(item.title, titleMaxLength)}
</Text>
<View style={styles.audioInfo}>
<Text style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>
{progressDuration}
</Text>
{!hideProgressBar && (
<View style={[styles.progressControlContainer, progressControlContainer]}>
{item.file.waveform_data ? (
{item.waveform_data ? (
<WaveProgressBar
amplitudesCount={30}
onEndDrag={dragEnd}
onProgressDrag={dragProgress}
onStartDrag={dragStart}
progress={item.progress as number}
waveformData={item.file.waveform_data}
waveformData={item.waveform_data}
/>
) : (
<ProgressControl
Expand All @@ -359,7 +371,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
rate={currentSpeed}
soundRef={soundRef as RefObject<SoundReturnType>}
testID='sound-player'
uri={item.file.uri}
uri={item.asset_url}
/>
)}
</View>
Expand Down
11 changes: 1 addition & 10 deletions package/src/components/Attachment/FileAttachmentGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,17 +113,8 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
isSoundPackageAvailable() ? (
<AudioAttachment
item={{
duration: file.duration,
file: {
name: file.title as string,
size: file.file_size || 0,
type: file.mime_type || '',
uri: file.asset_url || '',
waveform_data: file.waveform_data,
},
...file,
id: index.toString(),
paused: file.paused,
progress: file.progress,
type: file.type,
}}
onLoad={onLoad}
Expand Down
5 changes: 2 additions & 3 deletions package/src/components/AttachmentPicker/AttachmentPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,10 +243,9 @@ export const AttachmentPicker = React.forwardRef(
maxNumberOfFiles,
numberOfAttachmentPickerImageColumns,
numberOfUploads: selectedFiles.length + selectedImages.length,
// `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
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

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

selectedFiles.some((file) => (file?.uri ? file.uri === asset.uri : false)),
selectedFiles,
selectedImages,
setSelectedFiles,
Expand Down
21 changes: 4 additions & 17 deletions package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export const AttachmentPickerSelectionBar = () => {
hasCameraPicker,
hasFilePicker,
hasImagePicker,
imageUploads,
openPollCreationDialog,
pickFile,
sendMessage,
Expand Down Expand Up @@ -82,10 +81,7 @@ export const AttachmentPickerSelectionBar = () => {
testID='upload-photo-touchable'
>
<View style={[styles.icon, icon]}>
<ImageSelectorIcon
numberOfImageUploads={imageUploads.length}
selectedPicker={selectedPicker}
/>
<ImageSelectorIcon selectedPicker={selectedPicker} />
</View>
</TouchableOpacity>
) : null}
Expand All @@ -96,10 +92,7 @@ export const AttachmentPickerSelectionBar = () => {
testID='upload-file-touchable'
>
<View style={[styles.icon, icon]}>
<FileSelectorIcon
numberOfImageUploads={imageUploads.length}
selectedPicker={selectedPicker}
/>
<FileSelectorIcon selectedPicker={selectedPicker} />
</View>
</TouchableOpacity>
) : null}
Expand All @@ -112,10 +105,7 @@ export const AttachmentPickerSelectionBar = () => {
testID='take-photo-touchable'
>
<View style={[styles.icon, icon]}>
<CameraSelectorIcon
numberOfImageUploads={imageUploads.length}
selectedPicker={selectedPicker}
/>
<CameraSelectorIcon selectedPicker={selectedPicker} />
</View>
</TouchableOpacity>
) : null}
Expand All @@ -128,10 +118,7 @@ export const AttachmentPickerSelectionBar = () => {
testID='take-photo-touchable'
>
<View style={[styles.icon, { marginTop: 4 }, icon]}>
<VideoRecorderSelectorIcon
numberOfImageUploads={imageUploads.length}
selectedPicker={selectedPicker}
/>
<VideoRecorderSelectorIcon selectedPicker={selectedPicker} />
</View>
</TouchableOpacity>
) : null}
Expand Down
Loading