Static emoji autosuggestion #14686

perunt · 2023-01-31T10:18:18Z

Details

Sets up an emojicode autosuggestion UI.

Fixed Issues

$ #12188

Tests

Verify that no errors appear in the JS console

Offline tests

QA Steps

Condition: You are in the chat screen and the text input is focused with the keyboard expanded

Mobile:

Enter :s in an empty text input.
Observe that there is no suggestion.
Add 'm' to the text input so it contains :sm.
Verify that the Emoji suggester appears above the text input.
Tap on any of the suggested emojis.
Verify that :sm is replaced with the selected emoji.
Enter some text in the text input.
Add a space or create a new line.
Expand the input
Enter a colon followed by two letters that correspond to the name of the desired emoji (e.g. smile -> :sm, flag -> :fl).
Verify that the Emoji suggester appears above the text input.
Tap on one of the suggested emojis.
Verify that the text (e.g. :sm, :fl, etc.) is replaced with the selected emoji.

WEB/Desktop:

Enter :s in an empty text input.
Observe that there is no suggestion.
Add 'm' to the text input so it contains :sm.
Verify that the Emoji suggester appears above the text input.
Use the arrow keys to switch between suggested emojis.
Select a suggested emoji by either tapping on it or pressing Enter if you are using the arrow keys.
Verify that :sm is replaced with the selected emoji.

Note: The suggestion will only appear if you enter a colon followed by two letters without any spaces in between. Before the colon, there should be either a space, a line break, or the input should be the first word in the text field. (So, the following values would not trigger the suggestion::s, : sm, :s m, sm:sm)
Emoji suggestions could contain up to 5 items. Is a screen small we show a height of 2.5 items and you can scroll this box.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Web

Jan-31-2023.22-22-38.mp4

Mobile Web - Chrome

Feb-12-2023.19-06-12.mp4

Mobile Web - Safari

Feb-12-2023.19-06-34.mp4

Desktop

Jan-31-2023.22-28-10.mp4

iOS

Jan-31-2023.22-02-45.mp4

Android

Jan-31-2023.22-13-56.mp4

github-actions · 2023-01-31T10:18:36Z

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

melvin-bot · 2023-02-03T13:52:47Z

@Beamanator Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

stitesExpensify · 2023-02-03T19:25:46Z

I'll review this first thing on Monday

src/components/EmojiSuggestions/index.js

src/pages/home/report/ReportActionCompose.js

perunt · 2023-02-06T14:18:35Z

I have read the CLA Document and I hereby sign the CLA

roryabraham · 2023-02-06T19:53:52Z

@perunt This PR will still be unmergable because it contains these older unsigned commits:

roryabraham · 2023-02-08T21:13:14Z

@perunt this commit will be a problem (gpg signature needs to be verified by GitHub):

src/components/EmojiSuggestions/index.js

src/pages/home/report/ReportActionCompose.js

roryabraham

Overall this is looking much better to me

roryabraham · 2023-02-09T17:52:55Z

src/pages/home/report/ReportActionCompose.js

        const newComment = this.comment.slice(0, this.state.selection.start)
-            + emoji + this.comment.slice(this.state.selection.end, this.comment.length);
+      + emojiWithSpace


It does not look like this change was made. Maybe you need to disable prettier?

src/pages/home/report/ReportActionCompose.js

roryabraham · 2023-02-09T17:58:34Z

@mananjadhav tagging you for review since you're the C+ on the linked issue: #12188

mananjadhav · 2023-04-27T09:46:35Z

I am tagging this PR to highlight an issue fixed here. All conditions in ternary expressions or left-hand operands on conditional renders, should be boolean. This PR is one of the PRs that uses conditional render with string operands, hence I am tagging it here for the contributors to check.

We've also updated the item in the checklist with this PR to avoid this issue in the future.

sobitneupane · 2023-04-28T04:16:23Z

Hello everyone, this PR introduced a bug #16730 where for newly created chat (being offline), auto-suggestion modal is transparent. This issue was fixed by this PR. It is an edge case and can be easily missed.

Santhosh-Sellavel · 2023-05-03T18:02:26Z

Hi Everyone we missed handling a case here which lead to this issue #16626. IMO we could have caught this if considered testing other possible scenarios.

Santhosh-Sellavel · 2023-05-03T20:35:00Z

Hi everyone, This PR accidentally revert changes made here #13875 which lead to cause this issue #15951 For more context here

rushatgabhane · 2023-05-05T09:59:53Z

src/components/EmojiSuggestions.js

+                    hovered,
+                    index,
+                )}
+                onMouseDown={e => e.preventDefault()}


Hi! I'm coming from #16485

onMouseDown={e => e.preventDefault()} prevents the focus from moving and the keyboard from closing. But unfortunately, when we long press the emoji element, the mousedown event is not fired on mWeb Android.

Causing the bug - #16485

The mWeb Android behavior is well demonstrated here.

sobitneupane · 2023-05-17T12:49:36Z

Hello everyone, Looks like we missed to handle this issue while implementing the feature.

Issue: #16977
Title: The Emoji suggestion is flickered when adding attachment
Steps To reproduce:

Open any chat
Enter :smi and observe the emoji suggestion appears
Click + button on the left of composer
Click on Add Attachment and observe that the emoji suggestion re-appear for a moment

Santhosh-Sellavel · 2023-05-18T17:46:12Z

Hello everyone this PR caused a console error. More details here

mollfpr · 2023-05-22T16:15:03Z

HIYA! Coming from #18793

This PR causes a crash upon searching the mention back to back; complete step here.

The root cause of the crash is that the LayoutAnimation is being called (here) after the state update is triggered (here). At the end of this function, we're doing another state update. These together cause the crash.

s77rt · 2023-06-01T18:57:01Z

src/pages/home/report/ReportActionCompose.js

+        const commentBeforeColon = this.state.value.slice(0, this.state.colonIndex);
+        const emojiObject = this.state.suggestedEmojis[highlightedEmojiIndex];
+        const emojiCode = emojiObject.types && emojiObject.types[this.props.preferredSkinTone] ? emojiObject.types[this.props.preferredSkinTone] : emojiObject.code;
+        const commentAfterColonWithEmojiNameRemoved = this.state.value.slice(this.state.selection.end).replace(CONST.REGEX.EMOJI_REPLACER, CONST.SPACE);


@perunt Is there a specific reason why we are replacing text after colon with a space? (Coming from #19289)

s77rt · 2023-06-06T22:03:02Z

src/CONST.js

@@ -1003,6 +1021,8 @@ const CONST = {
    CHAT_ATTACHMENT_TOKEN_KEY: 'X-Chat-Attachment-Token',

    USA_COUNTRY_NAME,
+    SPACE_LENGTH: 1,
+    SPACE: 1,


This caused a regression #19289. In our world SPACE is still and not 1 😅.

whoooops 😅

mollfpr · 2023-06-09T16:52:05Z

Coming from #18112

In the above issue, on Android scrolling on the emoji suggestion will scroll the report action list.

Instead of setting height directly on FlatList, apply height to the parent View component. Also set flex:1 to FlatList. This fixes the scroll issue with nested Flatlist and prevents the chat list from scrolling instead.

parasharrajat · 2023-07-18T18:48:14Z

src/pages/home/report/ReportActionCompose.js

+            nextState.shouldShowSuggestionMenu = !_.isEmpty(newSuggestedEmojis);
+        }
+
+        LayoutAnimation.configureNext(LayoutAnimation.create(50, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity));


Why did we add this LayoutAnimation @perunt?

It was added to show a suggestion box. I just checked the code and noticed we introduced an animatedValue to control it. So, I think we can just remove LayoutAnimation

allroundexperts · 2023-08-11T07:07:52Z

src/styles/styles.js

+    emojiSuggestionsText: {
+        fontFamily: fontFamily.EMOJI_TEXT_FONT,
+        fontSize: variables.fontSizeMedium,
+    },


This caused an issue when emoji text became too long. We should have allowed word breaking here.

thanks for let us know.

parasharrajat · 2023-12-11T18:26:14Z

src/pages/home/report/ReportActionCompose.js

@@ -582,6 +704,7 @@ class ReportActionCompose extends React.Component {
                                                        <TouchableOpacity
                                                            onPress={(e) => {
                                                                e.preventDefault();
+                                                                this.setShouldShowSuggestionMenuToFalse();


Why did we close the suggestions on Expand/Collapse cc: @mananjadhav @perunt?

Would love to hear your opinion @mananjadhav @perunt.

It's tough to remember all the details, but the first thing that comes to mind is that we adopted this feature from other messengers. We can definitely keep it displayed

situchan · 2024-01-08T17:25:55Z

src/libs/GetStyledTextArray.js

+    const prefixLocation = name.search(prefix);
+
+    if (prefixLocation === 0 && prefix.length === name.length) {
+        texts.push({text: prefix, isColored: true});


text should be name instead of prefix.
Later, this caused minor regression - #32749

stitesExpensify assigned perunt Jan 31, 2023

stitesExpensify self-requested a review January 31, 2023 15:26

perunt marked this pull request as ready for review February 3, 2023 13:52

perunt requested a review from a team as a code owner February 3, 2023 13:52

melvin-bot bot requested review from Beamanator and removed request for a team February 3, 2023 13:52

roryabraham reviewed Feb 4, 2023

View reviewed changes

roryabraham requested changes Feb 4, 2023

View reviewed changes

src/pages/home/report/ReportActionCompose.js Outdated Show resolved Hide resolved

src/pages/home/report/ReportActionCompose.js Outdated Show resolved Hide resolved

src/pages/home/report/ReportActionCompose.js Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

perunt requested review from roryabraham and removed request for stitesExpensify and Beamanator February 6, 2023 14:27

perunt force-pushed the feature/@perunt/emoji-autosuggestion-static branch from da3e291 to fc4b0c9 Compare February 7, 2023 11:45

roryabraham requested a review from stitesExpensify February 8, 2023 21:12

roryabraham requested changes Feb 8, 2023

View reviewed changes

perunt force-pushed the feature/@perunt/emoji-autosuggestion-static branch 6 times, most recently from ae3f1b7 to 69ec073 Compare February 9, 2023 17:27

roryabraham reviewed Feb 9, 2023

View reviewed changes

roryabraham requested a review from mananjadhav February 9, 2023 17:58

szebniok mentioned this pull request Apr 26, 2023

Add generic AutoCompleteSuggestions component #18024

Merged

56 tasks

sobitneupane mentioned this pull request Apr 28, 2023

[$1000] Offline: auto-suggestion modal is transparent when Offline so UI is being distorted #16730

Closed

6 tasks

Santhosh-Sellavel mentioned this pull request May 3, 2023

[HOLD for payment 2023-05-03] [$1000] Emoji suggestion doesn’t highlight the text in front of another emoji #16626

Closed

6 tasks

rushatgabhane reviewed May 5, 2023

View reviewed changes

rushatgabhane mentioned this pull request May 5, 2023

[HOLD for payment 2023-05-05] [$1000] Long pressing on emoji suggestions highlights the text/attachments behind the emoji list on mweb #16485

Closed

6 tasks

sobitneupane mentioned this pull request May 17, 2023

[HOLD for payment 2023-05-16] [$1000] The Emoji suggestion is flickered when adding attachment #16977

Closed

6 tasks

0xmiros mentioned this pull request May 18, 2023

[HOLD for payment 2023-05-25] [$1000] Auto-suggester throws console error when scrolling through less than 5 options #18744

Closed

mollfpr mentioned this pull request May 22, 2023

[HOLD for payment 2023-05-23] [HOLD for payment 2023-05-22] [$1000] Android - App crashes upon inputting @ with characters for specific accounts #18793

Closed

6 tasks

stitesExpensify mentioned this pull request May 29, 2023

[HOLD for payment 2024-07-24] Chat - Mentions popup doesn't appear when editing message #19643

Closed

6 tasks

s77rt reviewed Jun 1, 2023

View reviewed changes

This was referenced Jun 1, 2023

[HOLD for payment 2023-06-13] [$1000] Insert emoji before a colon text after is replaced by "1" string #19289

Closed

Fix: remove replace function when inserting emoji #20149

Merged

s77rt reviewed Jun 6, 2023

View reviewed changes

mollfpr mentioned this pull request Jun 9, 2023

[HOLD for payment 2023-06-08] [$2000] Scrolling on emoji suggestion scrolls the background on Android app but not on mWeb #18112

Closed

6 tasks

tienifr mentioned this pull request Jun 13, 2023

[$2000] Dev: IOS - Chat - Console error on dismiss keyboard without sending message #20552

Closed

6 tasks

parasharrajat reviewed Jul 18, 2023

View reviewed changes

allroundexperts reviewed Aug 11, 2023

View reviewed changes

allroundexperts mentioned this pull request Aug 11, 2023

[HOLD for payment 2023-08-10] [$1000] Long emoji names are not being truncated and icons displayed at the start #23519

Closed

6 tasks

bernhardoj mentioned this pull request Sep 5, 2023

[HOLD for payment 2023-10-09] [$500] Chat - User suggestion @ list not appearing on the second #26197

Closed

6 tasks

parasharrajat reviewed Dec 11, 2023

View reviewed changes

situchan reviewed Jan 8, 2024

View reviewed changes

situchan mentioned this pull request Jan 8, 2024

[HOLD for payment 2024-01-04] [$500] Mention - First letter of username becomes lowercase when entering full name after @ mention #32749

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Static emoji autosuggestion #14686

Static emoji autosuggestion #14686

perunt commented Jan 31, 2023 •

edited

Loading

github-actions bot commented Jan 31, 2023 •

edited

Loading

melvin-bot bot commented Feb 3, 2023

stitesExpensify commented Feb 3, 2023

This comment was marked as resolved.

perunt commented Feb 6, 2023

roryabraham commented Feb 6, 2023

roryabraham commented Feb 8, 2023 •

edited

Loading

roryabraham left a comment

roryabraham Feb 9, 2023

roryabraham commented Feb 9, 2023

mananjadhav commented Apr 27, 2023

sobitneupane commented Apr 28, 2023

Santhosh-Sellavel commented May 3, 2023

Santhosh-Sellavel commented May 3, 2023 •

edited

Loading

rushatgabhane May 5, 2023

sobitneupane commented May 17, 2023

Santhosh-Sellavel commented May 18, 2023

mollfpr commented May 22, 2023

s77rt Jun 1, 2023 •

edited

Loading

s77rt Jun 6, 2023

roryabraham Jun 6, 2023

perunt Jun 9, 2023

mollfpr commented Jun 9, 2023

parasharrajat Jul 18, 2023

perunt Jul 19, 2023

allroundexperts Aug 11, 2023

mananjadhav Aug 11, 2023

parasharrajat Dec 11, 2023 •

edited

Loading

parasharrajat Dec 15, 2023

perunt Dec 16, 2023

situchan Jan 8, 2024

Static emoji autosuggestion #14686

Static emoji autosuggestion #14686

Conversation

perunt commented Jan 31, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

github-actions bot commented Jan 31, 2023 • edited Loading

melvin-bot bot commented Feb 3, 2023

stitesExpensify commented Feb 3, 2023

This comment was marked as resolved.

perunt commented Feb 6, 2023

roryabraham commented Feb 6, 2023

roryabraham commented Feb 8, 2023 • edited Loading

roryabraham left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

roryabraham commented Feb 9, 2023

mananjadhav commented Apr 27, 2023

sobitneupane commented Apr 28, 2023

Santhosh-Sellavel commented May 3, 2023

Santhosh-Sellavel commented May 3, 2023 • edited Loading

Choose a reason for hiding this comment

sobitneupane commented May 17, 2023

Santhosh-Sellavel commented May 18, 2023

mollfpr commented May 22, 2023

s77rt Jun 1, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mollfpr commented Jun 9, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

parasharrajat Dec 11, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

perunt commented Jan 31, 2023 •

edited

Loading

github-actions bot commented Jan 31, 2023 •

edited

Loading

roryabraham commented Feb 8, 2023 •

edited

Loading

Santhosh-Sellavel commented May 3, 2023 •

edited

Loading

s77rt Jun 1, 2023 •

edited

Loading

parasharrajat Dec 11, 2023 •

edited

Loading