Chat - Missing start convo message and description room changes to a code

lanitochka17 commented 3 hours ago

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 9.0.44 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Issue reported by: Applause - Internal Team

Action Performed:

Create a new chat room
Send a message

Expected Result:

The start conversation message is displayed below the Welcome message and the description room remains unchanged when the user performs any activity in the room

Actual Result:

The start conversation message is not displayed below the Welcome message The description room changes to a code when the user sends a message

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

[ ] Android: Native
[x] Android: mWeb Chrome
[ ] iOS: Native
[ ] iOS: mWeb Safari
[x] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/d2d5a107-1e74-4b75-adf5-6917a5df8e8a

https://github.com/user-attachments/assets/75fe02e9-2f79-4f81-99cd-8041ade949f6

View all open jobs on GitHub

melvin-bot[bot] commented 3 hours ago

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

lanitochka17 commented 3 hours ago

@joekaufmanexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

nyomanjyotisa commented 3 hours ago

Proposal

Please re-state the problem that we are trying to solve in this issue.

Missing start convo message and description room changes to a code

What is the root cause of that problem?

Issue 1: Missing start convo message We do early return here if description exist so the 'welcomeMessage.phrase2' not populated https://github.com/Expensify/App/blob/dcfcb08143ce49e092d027d297b70be852a9f039/src/libs/SidebarUtils.ts#L584

And if welcomeMessage?.messageHtml exist we just show that without showing the start convo message https://github.com/Expensify/App/blob/dcfcb08143ce49e092d027d297b70be852a9f039/src/components/ReportWelcomeText.tsx#L117-L145

Issue 2: description room changes to a code The description value from the API response is like the following, and we don't format it

What changes do you think we should make in order to solve the problem?

For Issue 1, I think it is intentional to not showing the start convo message if the description is exist. But if we want to always show the start convo message we can remove this return and update this to the following

{isChatRoom && (
                    <>
                        <Text>
                            <Text>{welcomeMessage?.phrase1}</Text>
                            {welcomeMessage?.showReportName && (
                                <Text
                                    style={[styles.textStrong]}
                                    onPress={navigateToReport}
                                    suppressHighlighting
                                >
                                    {ReportUtils.getReportName(report)}
                                </Text>
                            )}
                            {welcomeMessage?.phrase2 !== undefined && <Text>{welcomeMessage.phrase2}</Text>}
                        </Text>
                        {welcomeMessage?.messageHtml && (
                            <PressableWithoutFeedback
                                onPress={() => {
                                    const activeRoute = Navigation.getReportRHPActiveRoute();
                                    if (ReportUtils.canEditReportDescription(report, policy)) {
                                        Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report?.reportID ?? '-1', activeRoute));
                                        return;
                                    }
                                    Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID ?? '-1', activeRoute));
                                }}
                                style={styles.renderHTML}
                                accessibilityLabel={translate('reportDescriptionPage.roomDescription')}
                            >
                                <RenderHTML html={welcomeMessage.messageHtml} />
                            </PressableWithoutFeedback>
                        )}
                    </>
                )}

For issue 2, I think we can fix it on BE. But if we want to fix on FE we can do it like the following

       try {
            const parsedDescription = JSON.parse(report.description);
            welcomeMessage.messageHtml = parsedDescription?.html ?? report.description;
        } catch (error) {
            welcomeMessage.messageHtml = report.description;
        }

and need to be fixed in other places where the room description is displayed as well

Expensify / App