Skip to content

fix: ui redesign bugs #3507

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

Merged
isekovanic merged 4 commits into from
Mar 23, 2026
Merged

fix: ui redesign bugs #3507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ba2bde1
perf: make autosend faster
isekovanic Mar 23, 2026
bfe7ce3
fix: stop autoplaying audio when seeking
isekovanic Mar 23, 2026
81a9a5a
fix: show timestamp
isekovanic Mar 23, 2026
b0bbdd4
fix: add drafts to thread list item
isekovanic Mar 23, 2026
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
1 change: 0 additions & 1 deletion package/src/components/Attachment/Audio/AudioAttachment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,6 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
const dragEnd = async (currentProgress: number) => {
const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
await audioPlayer.seek(positionInSeconds);
audioPlayer.play();
};

const onSpeedChangeHandler = async () => {
Expand Down
12 changes: 9 additions & 3 deletions package/src/components/Message/MessageItemView/MessageFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ type MessageFooterPropsWithContext = Pick<
| 'lastGroupMessage'
| 'isMessageAIGenerated'
> &
Pick<MessagesContextValue, 'MessageStatus'> &
Pick<MessagesContextValue, 'MessageStatus' | 'MessageTimestamp'> &
MessageFooterComponentProps;

const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
Expand All @@ -50,6 +50,7 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
members,
message,
MessageStatus,
MessageTimestamp,
showMessageStatus,
} = props;
const styles = useStyles();
Expand Down Expand Up @@ -77,9 +78,12 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
return (
<View style={[styles.container, container]} testID='message-status-time'>
{Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
<Text style={[styles.name, name]}>{message.user.name}</Text>
<Text numberOfLines={1} ellipsizeMode='tail' style={[styles.name, name]}>
{message.user.name}
</Text>
) : null}
{showMessageStatus && <MessageStatus formattedDate={formattedDate} timestamp={date} />}
{showMessageStatus ? <MessageStatus /> : null}
<MessageTimestamp formattedDate={formattedDate} timestamp={date} />
{isEdited ? <Text style={[styles.editedText, editedText]}>{t('Edited')}</Text> : null}
</View>
);
Expand Down Expand Up @@ -201,13 +205,15 @@ const useStyles = () => {
return useMemo(() => {
return StyleSheet.create({
container: {
maxWidth: '100%',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
paddingVertical: primitives.spacingXxs,
gap: primitives.spacingXs,
},
name: {
flexShrink: 1,
color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextUsername,
fontSize: primitives.typographyFontSizeXs,
fontWeight: primitives.typographyFontWeightSemiBold,
Expand Down
41 changes: 4 additions & 37 deletions package/src/components/Message/MessageItemView/MessageStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ import {
MessageContextValue,
useMessageContext,
} from '../../../contexts/messageContext/MessageContext';
import {
MessagesContextValue,
useMessagesContext,
} from '../../../contexts/messagesContext/MessagesContext';
import { useTheme } from '../../../contexts/themeContext/ThemeContext';
import { Check } from '../../../icons/Check';
import { CheckAll } from '../../../icons/CheckAll';
Expand All @@ -21,14 +17,10 @@ import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
export type MessageStatusPropsWithContext = Pick<
MessageContextValue,
'deliveredToCount' | 'message' | 'readBy'
> &
Pick<MessagesContextValue, 'MessageTimestamp'> & {
formattedDate?: string | Date;
timestamp?: string | Date;
};
>;

const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
const { deliveredToCount, formattedDate, message, readBy, timestamp, MessageTimestamp } = props;
const { deliveredToCount, message, readBy } = props;

const styles = useStyles();

Expand Down Expand Up @@ -92,7 +84,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
{...checkIcon}
/>
) : null}
<MessageTimestamp formattedDate={formattedDate} timestamp={timestamp} />
</View>
);
};
Expand All @@ -101,20 +92,8 @@ const areEqual = (
prevProps: MessageStatusPropsWithContext,
nextProps: MessageStatusPropsWithContext,
) => {
const {
deliveredToCount: prevDeliveredBy,
message: prevMessage,
readBy: prevReadBy,
formattedDate: prevFormattedDate,
timestamp: prevTimestamp,
} = prevProps;
const {
deliveredToCount: nextDeliveredBy,
message: nextMessage,
readBy: nextReadBy,
formattedDate: nextFormattedDate,
timestamp: nextTimestamp,
} = nextProps;
const { deliveredToCount: prevDeliveredBy, message: prevMessage, readBy: prevReadBy } = prevProps;
const { deliveredToCount: nextDeliveredBy, message: nextMessage, readBy: nextReadBy } = nextProps;

const deliveredByEqual = prevDeliveredBy === nextDeliveredBy;
if (!deliveredByEqual) {
Expand All @@ -132,16 +111,6 @@ const areEqual = (
return false;
}

const timestampEqual = prevTimestamp === nextTimestamp;
if (!timestampEqual) {
return false;
}

const formattedDateEqual = prevFormattedDate === nextFormattedDate;
if (!formattedDateEqual) {
return false;
}

return true;
};

Expand All @@ -155,7 +124,6 @@ export type MessageStatusProps = Partial<MessageStatusPropsWithContext>;
export const MessageStatus = (props: MessageStatusProps) => {
const { channel } = useChannelContext();
const { deliveredToCount, message, readBy } = useMessageContext();
const { MessageTimestamp } = useMessagesContext();

const channelMembersCount = Object.keys(channel?.state.members).length;

Expand All @@ -167,7 +135,6 @@ export const MessageStatus = (props: MessageStatusProps) => {
deliveredToCount,
message,
readBy,
MessageTimestamp,
}}
{...props}
/>
Expand Down
1 change: 0 additions & 1 deletion package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ export const AudioRecordingPreview = () => {
const dragEnd = useStableCallback(async (currentProgress: number) => {
const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
await audioPlayer.seek(positionInSeconds);
audioPlayer.play();
});

return (
Expand Down
18 changes: 4 additions & 14 deletions package/src/components/MessageInput/hooks/useAudioRecorder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect } from 'react';

import { LocalVoiceRecordingAttachment } from 'stream-chat';

Expand All @@ -12,14 +12,11 @@ import { resampleWaveformData } from '../utils/audioSampling';

/**
* The hook that controls all the async audio core features including start/stop or recording, player, upload/delete of the recorded audio.
*
* FIXME: Change the name to `useAudioRecorder` in the next major version as the hook will only be used for audio recording.
*/
export const useAudioRecorder = ({
audioRecorderManager,
sendMessage,
}: Pick<MessageInputContextValue, 'audioRecorderManager' | 'sendMessage'>) => {
const [isScheduledForSubmit, setIsScheduleForSubmit] = useState(false);
const { attachmentManager } = useMessageComposer();

/**
Expand All @@ -43,13 +40,6 @@ export const useAudioRecorder = ({
[stopVoiceRecording],
);

useEffect(() => {
if (isScheduledForSubmit) {
sendMessage();
setIsScheduleForSubmit(false);
}
}, [isScheduledForSubmit, sendMessage]);

/**
* Function to start voice recording. Will return whether access is granted
* with regards to the microphone permission as that's how the underlying
Expand Down Expand Up @@ -113,16 +103,16 @@ export const useAudioRecorder = ({
audioRecorderManager.reset();

if (sendOnComplete) {
await attachmentManager.uploadAttachment(audioFile);
setIsScheduleForSubmit(true);
attachmentManager.upsertAttachments([audioFile]);
sendMessage();
} else {
await attachmentManager.uploadAttachment(audioFile);
}
} catch (error) {
console.log('Error uploading voice recording: ', error);
}
},
[audioRecorderManager, attachmentManager, stopVoiceRecording],
[audioRecorderManager, attachmentManager, sendMessage, stopVoiceRecording],
);

return {
Expand Down
52 changes: 52 additions & 0 deletions package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,13 +620,26 @@ exports[`Thread should match thread snapshot 1`] = `
"flexDirection": "row",
"gap": 8,
"justifyContent": "center",
"maxWidth": "100%",
"paddingVertical": 4,
},
{},
]
}
testID="message-status-time"
>
<Text
style={
{
"color": "#687385",
"fontSize": 13,
"fontWeight": 400,
"lineHeight": 16,
}
}
>
2:50 PM
</Text>
<Text
style={
[
Expand Down Expand Up @@ -944,13 +957,26 @@ exports[`Thread should match thread snapshot 1`] = `
"flexDirection": "row",
"gap": 8,
"justifyContent": "center",
"maxWidth": "100%",
"paddingVertical": 4,
},
{},
]
}
testID="message-status-time"
>
<Text
style={
{
"color": "#687385",
"fontSize": 13,
"fontWeight": 400,
"lineHeight": 16,
}
}
>
2:50 PM
</Text>
<Text
style={
[
Expand Down Expand Up @@ -1301,13 +1327,26 @@ exports[`Thread should match thread snapshot 1`] = `
"flexDirection": "row",
"gap": 8,
"justifyContent": "center",
"maxWidth": "100%",
"paddingVertical": 4,
},
{},
]
}
testID="message-status-time"
>
<Text
style={
{
"color": "#687385",
"fontSize": 13,
"fontWeight": 400,
"lineHeight": 16,
}
}
>
2:50 PM
</Text>
<Text
style={
[
Expand Down Expand Up @@ -1616,13 +1655,26 @@ exports[`Thread should match thread snapshot 1`] = `
"flexDirection": "row",
"gap": 8,
"justifyContent": "center",
"maxWidth": "100%",
"paddingVertical": 4,
},
{},
]
}
testID="message-status-time"
>
<Text
style={
{
"color": "#687385",
"fontSize": 13,
"fontWeight": 400,
"lineHeight": 16,
}
}
>
2:50 PM
</Text>
<Text
style={
[
Expand Down
Loading
Loading