Chat-NG Reactions #2498

gtalha07 · 2025-01-15T15:16:10Z

Description:

Brings out fresh new emoji selector row UX along with implementing reactions view on messages in Chat-NG.
Most of the backend logic is same, the only new changes are on the emoji-row UX side (frost/blurred effect) when long pressing the message. I have pointed that out in change-set.
With these new changes, also fixes chat react-emoji UX #2204 as a part of tracking issue [Tracking] Chat-NG #2137.
Moved Edited indicator in the message bubble body.

Preview/Screenshots:

Video showcasing reactions view (on long-press message):

Screen.Recording.2025-01-16.at.18.20.44.mov

Emoji Selector view on messages:

Reaction UI on messages:

Detailed reaction view (on long press reaction UI) Updated:

codecov · 2025-01-15T15:42:34Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 28.92%. Comparing base (0064430) to head (6354d3e).
Report is 46 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2498      +/-   ##
==========================================
- Coverage   29.48%   28.92%   -0.57%     
==========================================
  Files         680      687       +7     
  Lines       45488    45695     +207     
==========================================
- Hits        13413    13218     -195     
- Misses      32075    32477     +402

Flag	Coverage Δ
integration-test	`39.82% <ø> (ø)`
unittest	`19.98% <ø> (-0.73%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

gtalha07 · 2025-01-16T13:45:50Z

app/lib/features/chat_ng/widgets/chat_bubble.dart

@@ -113,19 +119,21 @@ class ChatBubble extends StatelessWidget {
                    const SizedBox(height: 10),
                  ],
                  child,
+                  if (isEdited) ...[


moved Edited indicator inside bubble for better UX.

gtalha07 · 2025-01-16T13:47:03Z

app/lib/features/chat_ng/widgets/reactions/reaction_chips_widget.dart

+    show ReactionRecord;
+import 'package:flutter/material.dart';
+
+class ReactionChipsWidget extends StatelessWidget {


This part is logically same and pasted from legacy but more linear and structured.

gtalha07 · 2025-01-16T13:47:46Z

app/lib/features/chat_ng/widgets/reactions/reaction_detail_sheet.dart

+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class ReactionDetailsSheet extends ConsumerStatefulWidget {


This is also same logic-wise but have been split because of its complexity.

gtalha07 · 2025-01-16T13:48:52Z

app/lib/features/chat_ng/widgets/reactions/reaction_selector_row.dart

+
+final _log = Logger('a3::chat::reactions_selector_row');
+
+class ReactionSelectorRow extends ConsumerWidget {


This is same as EmojiRow widget logic-wise but have been more degraded for simplicity and structured.

gnunicorn · 2025-01-16T14:24:52Z

Just from the UI I notice the following:

the user-counter is flickering when you click an emoji in the window. Do we know why? That seems like something we want to fix (if not this in this PR then at least record it so we do it later).
why not show display name & avatar for the users in the emoji overview dialog?

gtalha07 · 2025-01-17T12:15:07Z

Just from the UI I notice the following:

the user-counter is flickering when you click an emoji in the window. Do we know why? That seems like something we want to fix (if not this in this PR then at least record it so we do it later).

why not show display name & avatar for the users in the emoji overview dialog?

It was from memberIdsProvider .when:

 membersLoader.when(
              data: (members) => Text(
                lang.membersCount(members.length),
                style: Theme.of(context).textTheme.bodySmall,
              ),
              skipLoadingOnReload: true,  --> previous was false
              error: (e, s) {
                _log.severe('Failed to load active members', e, s);
                return Text(lang.errorLoadingMembersCount(e));
              },
              loading: () => Skeletonizer(
                child: Text(lang.membersCount(100)),
              ),
            ),

Emoji overview dialog inner UI is unchanged and been copied as it is from before. I can probably put that here now since we have more refined avatar providers.

kumarpalsinh25

Taking bit of time to review and understand the things. Added few comments related to suggestion/queries.

Here are some more UI Feedback.

Reaction on PDF file: Reaction on this file look off.
Reaction Details : I don't see which tab is selected. Also as @gnunicorn mentioned it will be good if we show User avatar and Display name here. And overall UI-UX can be improve for this dialog.
Reaction Chip Design : Chip design looks different for send and receiver messages. Also ReactionList overlaying/position and overall design can be improve by taking references of well-known social media app.

.changes/2498-chat-ng-reactions.md

app/lib/features/chat_ng/actions/reaction_selection_action.dart

app/lib/features/chat_ng/widgets/events/chat_event_item.dart

app/lib/features/chat_ng/widgets/reactions/reaction_selector.dart

app/lib/features/chat_ng/widgets/reactions/reaction_detail_sheet.dart

gnunicorn

Generally looks fine to me, but there's a few things to be addressed.

app/lib/features/chat_ng/widgets/events/chat_event_item.dart

app/lib/features/chat_ng/widgets/reactions/reaction_detail_sheet.dart

app/lib/features/chat_ng/widgets/reactions/reaction_selector.dart

gnunicorn · 2025-01-19T11:41:28Z

app/lib/features/chat_ng/widgets/reactions/reaction_chips_widget.dart

You nicely split the reactions up into their own subfolder ... but I wonder: are these chat specific? We do (later) want users to be able to react to all types of things (pins, comments, tasks and tasklists), doesn't it make sense to put these out into their own features folder already?

You nicely split the reactions up into their own subfolder ... but I wonder: are these chat specific? We do (later) want users to be able to react to all types of things (pins, comments, tasks and tasklists), doesn't it make sense to put these out into their own features folder already?

So, reaction toggling is operated through timelineStreamProvider which is from Convo object. Do we have support of reaction API on other room objects? If so, I can maybe change this action a bit and separate it neatly as singleton.

keep it for the future, @gtalha07 . leave it as is.

app/lib/features/chat_ng/widgets/reactions/reaction_selector.dart

gnunicorn · 2025-01-19T11:44:56Z

app/lib/features/chat_ng/providers/chat_room_messages_provider.dart

@@ -139,3 +141,18 @@ final repliedToMsgProvider = AsyncNotifierProvider.autoDispose
    .family<RepliedToMessageNotifier, RepliedToMsgState, RoomMsgId>(() {
  return RepliedToMessageNotifier();
 });
+
+final messageReactionsProvider = StateProvider.autoDispose


I wonder if that should be per item object or rather be bound to the roomId+eventId combination ... not sure yet.

add reaction UI to chat messages

ade7a14

gtalha07 added 3 commits January 16, 2025 16:31

make reactions appear larger for easier interaction

a730182

implement emoji row with redesigned UX

da166ed

fix emoji picker dismissal view

122f351

gtalha07 commented Jan 16, 2025

View reviewed changes

better renaming and documentation

53693f9

gtalha07 marked this pull request as ready for review January 16, 2025 13:57

gtalha07 requested review from gnunicorn and kumarpalsinh25 January 16, 2025 13:58

gtalha07 added 2 commits January 16, 2025 19:02

added changelogs

f0a5e9b

update changelogs

0f061ae

gtalha07 added 2 commits January 17, 2025 18:07

fix member count flickering UI when sending reactions

04d02f4

add avatar info to user reaction list

51cc247

kumarpalsinh25 reviewed Jan 17, 2025

View reviewed changes

gnunicorn approved these changes Jan 19, 2025

View reviewed changes

gtalha07 added 4 commits January 20, 2025 18:50

Feedback review (Kumar): code improvements

7c9b5e7

Feedback review (Kumar): update changelogs

f40a467

Feedback review (ben): code improvements and widget tests

a2f1934

add l10n string

6354d3e

gtalha07 enabled auto-merge January 21, 2025 16:40

gtalha07 merged commit 19af7d9 into acterglobal:main Jan 21, 2025
20 of 23 checks passed

gtalha07 deleted the chat_ng-reactions branch January 21, 2025 16:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chat-NG Reactions #2498

Chat-NG Reactions #2498

gtalha07 commented Jan 15, 2025 •

edited

Loading

codecov bot commented Jan 15, 2025 •

edited

Loading

gtalha07 Jan 16, 2025

gtalha07 Jan 16, 2025

gtalha07 Jan 16, 2025

gtalha07 Jan 16, 2025

gnunicorn commented Jan 16, 2025

gtalha07 commented Jan 17, 2025

kumarpalsinh25 left a comment

gnunicorn left a comment

gnunicorn Jan 19, 2025

gtalha07 Jan 21, 2025

gnunicorn Jan 21, 2025

gnunicorn Jan 19, 2025


		final _log = Logger('a3::chat::reactions_selector_row');

		class ReactionSelectorRow extends ConsumerWidget {

Chat-NG Reactions #2498

Chat-NG Reactions #2498

Conversation

gtalha07 commented Jan 15, 2025 • edited Loading

Description:

Preview/Screenshots:

Video showcasing reactions view (on long-press message):

Emoji Selector view on messages:

Reaction UI on messages:

Detailed reaction view (on long press reaction UI) Updated:

codecov bot commented Jan 15, 2025 • edited Loading

Codecov Report

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

gnunicorn commented Jan 16, 2025

gtalha07 commented Jan 17, 2025

kumarpalsinh25 left a comment

Choose a reason for hiding this comment

gnunicorn left a comment

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

Choose a reason for hiding this comment

gtalha07 commented Jan 15, 2025 •

edited

Loading

codecov bot commented Jan 15, 2025 •

edited

Loading