There's no notification of newly received message(s) if you are reading historical messages in the back scroll

[parasharrajat]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

Break down in numbered steps

1. Open any chat between user A and user B on device A(User A).
2. Scroll into the chat history on the web on device A.
3. Send a message from User B to User A.

Expected Result:

Describe what you think should've happened

When reading scrollback in a given chat, show a X new message(s) indicator if new messages are received in that DM. This should serve as a method of notifying a user that they have unread chats. See mockup below:

• Button sizing is 28px tall, 11px font size and should be consistent with our split button pattern that we have on the IOU payment page.
• This notification button should persist until you either close it with the "X" or you scroll down to view the new messages.

Actual Result:

Describe what actually happened

Nothing happens which tells the user about the new message.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Just remain at bottom of the chat.

Platform:

Where is this issue occurring? All

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1..0.82.3
Logs: https://stackoverflow.com/c/expensify/questions/4856

no-indicator.mp4

Upwork job link: https://www.upwork.com/jobs/~01d1ea31874a29c2d1

View all open jobs on Upwork

Suggestion

Overall Idea is to show a different new marker from the new line indicator. This could be placed on the Center top of the Chat body Area(where you see a list of chat messages) or the right-top of the composer which is minimized to icon form on Mobile.

I vouch for the Top-center Position of the report Page. a marker as simple as new messages in green which when clicked scroll the chat list to the most recent(bottom).

Example

[MelvinBot]

Triggered auto assignment to @michaelhaxhiu (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[mananjadhav]

I agree with @parasharrajat. Ideally, I would want a separate nudge similar to Linkedin or slack which says "New Messages Received", which when clicked would probably scroll/take me to the start of the new chats.

[Santhosh-Sellavel]

@parasharrajat What do you propose here makes all the difference. If it's a different indicator like in slack I assume. Then it's a completely different issue & usecase.

What my solution does when you scroll back down after viewing history, it will show a new marker indicator above the oldest new message received.

[aman-atg]

I agree with @parasharrajat. Ideally, I would want a separate nudge similar to Linkedin or slack which says "New Messages Received", which when clicked would probably scroll/take me to the start of the new chats.

Yes, that would be a great solution for this issue. And I was just wondering if both the issues can be solved by a single solution.

[MelvinBot]

@michaelhaxhiu Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

Triggered auto assignment to @Beamanator (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[michaelhaxhiu]

@Beamanator Rather than self-assessing this GH and posting this to Upwork on my own accord, I'm using the Engineering label to get some input before I proceed. I'd love your 2 cents.

Do you agree that this GH and #4472 should remain separate? Or should these be combined into 1?

@parasharrajat can you or someone else define what a marker is? I'm trying to deduce it but not sure I understand it perfectly yet 😓 (that's probably my fault - new terminology).

[parasharrajat]

@michaelhaxhiu I added the Suggestion section in the issue's body. Feel free to generalize it. It's better if you pull in someone from the Design team as we would be needing their help as well. A design label is also good.

Also, not yet need to be external, first, a discussion is needed to be taken place, if we want to move forward with this. Opening a slack thread.

[michaelhaxhiu]

Are we saying marker to mean a "notification" of some kind? I see that there is no notification delivered when:

• User1 is reading the scrollback history from User2
• Meanwhile, User2 sends a new message to User1

Am I understanding what marker means here?

Also, not yet need to be external, first, a discussion is needed to be taken place, if we want to move forward with this. Opening a slack thread.

Yep agreed - this isn't ready for External until we hammer out the details together :)

[MelvinBot]

Triggered auto assignment to @sylveawong (Design), see these Stack Overflow questions for more details.

[michaelhaxhiu]

Spoke to @parasharrajat 1:1 and he clarified that by "marker", he means this sort of unread notification. He added this to the GH Body too ⭐ :

.

[Beamanator]

@Beamanator Rather than self-assessing this GH and posting this to Upwork on my own accord, I'm using the Engineering label to get some input before I proceed. I'd love your 2 cents.

That sounds great, thanks!

Do you agree that this GH and #4472 should remain separate? Or should these be combined into 1?

I agree these should remain separate and here's why: In slack, both indicators / markers are present (see this video - the one @parasharrajat mentioned in this issue and the one @Santhosh-Sellavel mentioned in his issue - #4472) and I think it would be amazing if we could add both to NewDot:

Screen.Recording.2021-08-11.at.9.35.08.AM.mov

However, before marking External myself, I'd also love the @Expensify/design team's input on what the new indicator / marker suggested here would look like 👍

[shawnborton]

I like this idea. In terms of the design, I am thinking something like this which is consistent with our small button sizes (28px tall, 11px font size) and also consistent with our split button pattern that we have on the IOU payment page:

[michaelhaxhiu]

Roger that, sounds good 👌

I think it'll work well since the marker is visually small, so even when it persists it's not obtrusive to reading scrollback

[michaelhaxhiu]

• Updated the Github body to include the Design mock + button behavior guidance.
• Posted job to Upwork, can you make the job proposal next @parasharrajat so I can hire you?
• Once that's done, I'll assign @parasharrajat to this GH and @Beamanator will be the eng to review the PR

🚀

[parasharrajat]

Here is the proposal @Beamanator

1. I will create a new component that shows the marker on the ReportBody.
2. We have to track the scroll position of the flat list using onScroll in ReportActionView.js

    onScroll={e => this.currentScrollOffset = -e.nativeEvent.contentOffset.y}

2. Now we add the Marker as a sibling component which takes the count from this.props.report.unreadActionCount

					<MarkerBadge
                    active={this.state.markerActive}
                    count={this.props.report.unreadActionCount}
                    onClick={scrollToBottom}
                    onClose={hide}
                />

3. As ReportActionView does not render when we scroll down we have to put a check in the onScroll so that whenever a fixed threshold is reached trigger hide action the Markerbadge by setting active false.
4. Markerbadge is set to active when this.currentScrollOffset < -200(threshold). It deactivate when this.currentScrollOffset >-200(threshold).

MarkerBadge will look like Obviously, I will the App Style Guide this is just to show how will it behave.

const MARKER_NOT_ACTIVE_TRANSLATE_Y = -30;
const MARKER_ACTIVE_TRANSLATE_Y = 10;

const Markerbadge = ({
    count,
    onClick,
    onClose,
    active,
}) => {
    const [translateY] = useState(new Animated.Value(MARKER_NOT_ACTIVE_TRANSLATE_Y));
    const show = () => {
        Animated.spring(translateY, {
            toValue: MARKER_ACTIVE_TRANSLATE_Y,
            duration: 80,
            useNativeDriver: true,
        }).start();
    };
    const hide = () => {
        Animated.spring(translateY, {
            toValue: MARKER_NOT_ACTIVE_TRANSLATE_Y,
            duration: 80,
            useNativeDriver: true,
        }).start();
    };

    useEffect(() => {
        if (active && count > 0) {
            show();
        } else {
            hide();
        }
    }, [count, active]);

    return (
        <View
            style={[
                {
                    position: 'absolute',
                    left: '50%',
                    top: 0,
                    zIndex: 100,
                    backfaceVisibility: 'hidden',
                    visibility: 'hidden',
                },
            ]}
        >
            <Animated.View style={[
                styles.flexRow,
                styles.justifyContentBetween,
                styles.alignItemsCenter,
                {
                    backfaceVisibility: 'visible',
                    visibility: 'visible',
                    left: '-50%',
                    transform: [
                        {translateY},
                    ],
                },
            ]}
            >
                <Button
                    success
                    small
                    onPress={onClick}
                    ContentComponent={() => (
                        <View style={[styles.flexRow]}>
                            <Icon small src={DownArrow} fill={themeColors.textReversed} />
                            <Text
                                selectable={false}
                                style={[
                                    styles.ml2,
                                    styles.buttonSmallText,
                                    styles.textWhite,
                                ]}
                            >
                                {count}
                                {' '}
                                new messages
                            </Text>
                        </View>
                    )}
                    shouldRemoveRightBorderRadius
                    style={[styles.flex1]}
                />
                <Button
                    success
                    small
                    style={[styles.buttonDropdown]}
                    onPress={onClose}
                    shouldRemoveLeftBorderRadius
                    ContentComponent={() => (
                        <Icon small src={Close} fill={themeColors.textReversed} />
                    )}
                />
            </Animated.View>
        </View>
    );
};

Glimpse

[Beamanator]

Thanks so much @parasharrajat for your proposal, that looks fantastic - I can't wait to see it live 💪 please submit a PR when you have a chance! And @michaelhaxhiu please hire Rajat when you have a chance too 👍

[michaelhaxhiu]

Hired, let's start this party.

[Beamanator]

Reopening, waiting 7 days for regressions 👍

[Beamanator]

Making weekly since PR was merged last week

[parasharrajat]

Any news for me on Upwork?

[michaelhaxhiu]

@parasharrajat just paid it out!