Session Android mention list incorrectly renders user profile avatar after inputing a user's name then backspacing to clear the input

[ghost]

Code of conduct

• I have read and agree to adhere to the Code of Conduct.

Describe the bug

Session Android mention candidate list incorrectly renders a user's profile using another user's avatar in both Community and Group.

To reproduce

Steps to reproduce the behavior:

1. Alice Android, Bob and Carol create a group and send some messages
2. Alice Android types "@", a mention candidate list shows up, which looks fine (Screenshot 1)
3. Alice Android inputs bob, now the input area is showing @bob with only Bob's profile in the mention list, this works as expected as well (Screenshot 2)
4. Alice Android backspaces bob, with only @ left, now both Carol and Bob's profiles come back to the mention candidate list, but Carol's profile is incorrectly rendered using Bob's avatar showing a capital BO logo (Screenshot 3). This is very wrong.

Screenshots or logs

If applicable, add screenshots or logs to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. Android Emulator Pixel 6]
• OS: [e.g. Android 13.0]
• Version of Session or latest commit hash: 1.16.5

Additional context

Add any other context about the problem here.

Some fun for QA:

Me:

Session is a messenger app, in the group conversation, there is an input box, where a user can type the symbol @, which actives an auto-completion list of group members. Please write a comprehensive testing plan for the auto-completion list feature

ChatGPT:

Testing plan for the auto-completion list feature:

Verify that the auto-completion list is triggered by typing the symbol @ in the input box.

Check if the list displays all the current members of the group conversation.

Test if the list is updated dynamically when new members join or leave the group conversation.

Verify that the list is sorted alphabetically or by last active time.

Test if the auto-completion list has a scroll bar when the list is longer than the visible area.

Check if the user can select a member from the list using the mouse, keyboard arrow keys and the enter key.

Verify that the selected member’s name is inserted into the input box when selected from the auto-completion list.

Test the list with a large number of members to ensure performance and responsiveness.

Check if the auto-completion list works correctly when multiple members have similar names.

Verify that the auto-completion list works correctly with special characters, such as accented letters, symbols, and emoticons in the member’s names.

Test the auto-completion list on various devices, including desktop, tablet, and mobile, to ensure compatibility.

Verify that the auto-completion list is disabled when the input box is empty or doesn't contain the @ symbol.

Test if the auto-completion list works correctly when the group conversation is private or public.

Verify that the auto-completion list is accessible to all users, including those with disabilities.

Me:

continue

ChatGPT:

Test if the auto-completion list works correctly with slow or unreliable network connections.

Verify that the auto-completion list behaves correctly when the user types quickly or changes their mind about the member they want to mention.

Test the limits of the list, such as the maximum number of members that can be displayed, and ensure that it is handled gracefully.

Verify that the list only shows members that are active and not banned from the group.

Test if the auto-completion list works correctly when the user switches between multiple group conversations.

Verify that the auto-completion list displays the correct status of each member, such as online, offline, or inactive.

Test the security of the auto-completion list, ensuring that sensitive information is not leaked or disclosed.

Finally, test the auto-completion list thoroughly in different languages and locales to ensure internationalization and localization.

This testing plan should cover all the critical functionality of the auto-completion list feature and help ensure a high-quality user experience.

Me:

please also add some test case related to backspace when using auto-completion

ChatGPT:

Sure, here are some test cases related to the backspace key when using the auto-completion list:

Verify that the user can use the backspace key to remove the selected member's name from the input box.

Test if the user can use the backspace key to remove the @ symbol and the auto-completion list disappears.

Verify that the user can use the backspace key to remove the @ symbol and the input text, and the auto-completion list does not reappear.

Test if the auto-completion list reappears when the user re-types the @ symbol after using the backspace key.

Verify that the auto-completion list updates correctly when the user uses the backspace key to remove part of the member's name.

Test if the auto-completion list behaves correctly when the user uses the backspace key to remove the whole member's name and then re-types the @ symbol.

Verify that the user can use the backspace key to remove the member's name and then select a different member from the auto-completion list.

These test cases should help ensure that the backspace functionality works correctly with the auto-completion list.

Me:

in the auto-completion list, there is a profile avatar for each user, please add more test case

ChatGPT:

Sure, here are some additional test cases related to the profile avatar in the auto-completion list:

Verify that each member in the auto-completion list has a profile avatar.

Test if the profile avatar is displayed correctly and matches the user's profile picture.

Verify that the profile avatar is updated dynamically when the user updates their profile picture.

Test if the profile avatar is displayed correctly on different devices and screen resolutions.

Verify that the profile avatar is displayed correctly for members who have not set a profile picture.

Test if the profile avatar is accessible to users with disabilities and follows accessibility guidelines.

Verify that the profile avatar is not used to disclose sensitive information.

Test if the profile avatar is displayed correctly when the user switches between multiple group conversations.

These test cases should help ensure that the profile avatar functionality works correctly and provides a consistent user experience.

Me:

please test some combinations of backspace key and profile avatar

ChatGPT:

Sure, here are some test cases that combine the backspace key and the profile avatar in the auto-completion list:

Verify that the user can use the backspace key to remove the selected member's name and the profile avatar disappears from the input box.

Test if the profile avatar reappears when the user re-selects the same member from the auto-completion list.

Verify that the profile avatar updates correctly when the user uses the backspace key to change the selected member in the input box.

Test if the profile avatar is displayed correctly for the new selected member when the user uses the backspace key to change the selection.

Verify that the profile avatar is not displayed in the input box if the user uses the backspace key to remove the selected member's name completely.

Test if the profile avatar disappears from the input box when the user uses the backspace key to remove the @ symbol.

These test cases should help ensure that the backspace key and the profile avatar work together correctly and provide a seamless user experience.

I had a pleasant conversation with ChatGPT.

ChatGPT was quite good at generating testing cases in natural language.

I was hoping for more, I hoped ChatGPT can generate the exact test case covering this bug without detailed hints, so I asked for more, and I told ChatGPT to continue.

The closest test case from ChatGPT was

Verify that the auto-completion list behaves correctly when the user types quickly or **changes their mind** about the member they want to mention.

Unfortunately, it doesn't mention profile avatars, not exactly what I wanted.

So I gave ChatGPT some hints to think about the profile avatar. ChatGPT created some test cases for profile avatars, however, they still didn't cover the exact case caused by backspace.

Finally, I had to give ChatGPT even more direct and clear hints, and eventually, ChatGPT gave me what I want:

Verify that the profile avatar updates correctly when the user uses the backspace key to change the selected member in the input box.

Update: Technically the above test case might still not be the one we want, ChatGPT seems not aware that we render an avatar in every candidate of the auto-completion list, it seems to think that there is only one avatar in the input area after selection. Maybe with more detailed hints, it can do a better job. The better we prompt the better result we get.

Conclusion: ChatGPT seems like doing a nice job of generating test cases, but it is still not powerful enough to exhaust all we need without detailed hints.

[burtonemily]

Wow that's a very comprehensive list, thank you I appreciate your input.

I'm currently automating the regression backlog for all three platforms, so I'm just taking care of the basic user workflow and then once that's finished, I'll start adding in a more comprehensive list of actions. I'll keep your list in mind for when the backlog is finished.

[burtonemily]

I also will take a look at the mentions profile mixup

Try https://chat.openai.com/ , it's fun and helpful! ^_^

--- a/app/src/main/java/org/thoughtcrime/securesms/components/ProfilePictureView.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/ProfilePictureView.kt
@@ -31,6 +31,7 @@ class ProfilePictureView @JvmOverloads constructor(
     var additionalDisplayName: String? = null
     var isLarge = false

+    private val imageViewPubkeyCache = mutableMapOf<String, String?>()
     private val profilePicturesCache = mutableMapOf<String, String?>()
     private val unknownRecipientDrawable = ResourceContactPhoto(R.drawable.ic_profile_default)
         .asDrawable(context, ContactColors.UNKNOWN_COLOR.toConversationColor(context), false)
@@ -103,8 +104,11 @@ class ProfilePictureView @JvmOverloads constructor(

     private fun setProfilePictureIfNeeded(imageView: ImageView, publicKey: String, displayName: String?, @DimenRes sizeResId: Int) {
         if (publicKey.isNotEmpty()) {
+            var imageViewId = imageView.hashCode().toString()
+            val pubKeyCached = (imageViewPubkeyCache.containsKey(imageViewId) && imageViewPubkeyCache[imageViewId] == publicKey)
             val recipient = Recipient.from(context, Address.fromSerialized(publicKey), false)
-            if (profilePicturesCache.containsKey(publicKey) && profilePicturesCache[publicKey] == recipient.profileAvatar) return
+            val avatarCached = (profilePicturesCache.containsKey(publicKey) && profilePicturesCache[publicKey] == recipient.profileAvatar)
+            if (pubKeyCached && avatarCached) return
             val signalProfilePicture = recipient.contactPhoto
             val avatar = (signalProfilePicture as? ProfileContactPhoto)?.avatarObject

@@ -129,6 +133,7 @@ class ProfilePictureView @JvmOverloads constructor(
                     .centerCrop()
                     .diskCacheStrategy(DiskCacheStrategy.NONE).circleCrop().into(imageView)
             }
+            imageViewPubkeyCache[imageViewId] = publicKey
             profilePicturesCache[publicKey] = recipient.profileAvatar
         } else {
             imageView.setImageDrawable(null)
@@ -136,6 +141,7 @@ class ProfilePictureView @JvmOverloads constructor(
     }

     fun recycle() {
+        imageViewPubkeyCache.clear()
         profilePicturesCache.clear()
     }
     // endregion

The original cache strategy doesn't work, when the auto-completion list changes, an imageView might map to different users.

Profile avatar is always correct now after applying the above hack. Unfortunately, this hack is also not perfect, it introduces performance issues, avatar refershing is lagging / flushing when updating the auto-completion list.

A better cache strategy might require some deeper refactoring of the code, I'll leave it to the dev team to invent a good cache strategy.

Maybe a proper solution is to replace the ListView to a RecyclerView, however I'm not an android developer, hopefully someone else will take a look.

I can reproduce this bug in https://github.com/oxen-io/session-android/releases/tag/1.16.8

Maybe it's a good time to have a look at this again?

@KeeJef

[KeeJef]

@fracting I don't think we made an attempt to solve this issue in the point release, but ill add this to the backlog

[bemusementpark]

Fix coming oxen-io/session-android#1269

Fix coming oxen-io/session-android#1269

Thanks, I retested with oxen-io/session-android#1269 and it seems working now. I'll keep this ticket open and retest when an official release is published.

commit 8390be0 (HEAD -> fix-pro, bemusementpark/fix-pro)
Author: andrew andrewgallasch@gmail.com
Date: Tue Jul 11 19:44:58 2023 +0930

Fix caching

When I was testing, at the first time a fresh installed account enter a Community thread, it seems the mention list does not load all possible contact candidates in the thread no matter what prefixes I entered after @. If I return to the main conversation list and enter the Community thread again, then all possible contacts are available in my @ mention list.