add typing indicator

[gtalha07]

What does it do?

This PR implements the typing indicator which is missing from the package. The current change allow Chat widget to add optional typing indicator. It takes List<types.User> as a parameter which by default is empty. When empty, it also doesn't show any indicator. When we have more than 2 users in list, it shows small count bubble, otherwise it'll show two users avatars actively typing and indicator. The indicator widget has support of customization in the form of bubbleBorder, bubbleColor, animatedCircleColor, ForwardAnimationDuration and ReverseAnimationDuration to control animation duration of indicator circles. A lot of has been commented as per your pattern in the code.

Why is it needed?

This is most useful for people who want to show typing indicator in their chat implementations. I believe it'll help to make package even better.

How to test it?

From the example code. We can add users list as a parameter for showTypingIndicator(). By default its disabled and takes empty list.

Related issues/PRs

This PR relates to #269.

[demchenkoalex]

Thanks a lot! Will check this out ASAP.

[gtalha07]

[gtalha07]

[demchenkoalex]

Hey! Thanks again for the big contribution! I hope you don't mind a couple of requests:

1. I asked @dariakhimych our designer to ASAP prepare the design for this feature, I don't think that the typing indicator itself will change much, but after our brief conversation we were on the same page about the multiple users typing thing, that it will be text.
2. To make this library more contribution friendly, together with @felixgabler we decided to minimise amount of props we pass to the Chat itself by using 2 things: Theme and Options. Now Theme will be similar to the Flutter's ThemeData - you can find tons of other components themes inside ThemeData, like CheckboxThemeData, DrawerThemeData, SnackBarThemeData etc. In our case, ChatTheme should include TypingIndicatorTheme, that will contain all theme customisation for the typing indicator only like colours, borders etc. We don't have an example yet, but I think you can create TypingIndicatorTheme class in the same file as the component itself, and make it similar to the InputOptions class you can find in the input.dart. The other thing, Options (might not be applicable to your case) is anything else that is not theme, and not so important to have on the Chat itself. See InputOptions mentioned above for the example. showTypingIndicator should be on the Chat cause it will be widely used, so that is OK.

[gtalha07]

Added TypingIndicatorTheme in ChatTheme which will allow us to set custom theme for typing indicator. Removed count bubble for multiple users text as per according to your request. Will look forward for that feature design. Animations for dots is set to 800ms as it doesn't really comply with theme itself and is not important.

[demchenkoalex]

Flyer Chat - Typing.pdf

this is what @dariakhimych prepared. Neutral 1 color is - you can add it to the chat_theme.dart

const neutral1 = Color(0xff615e6e);

Also feel free to not localise anything, I will add it myself with all the languages. Also pdf includes a link to the example animation our designer is expecting, similar to what you have, maybe different speeds/easings/sequence.

[gtalha07]

Flyer Chat - Typing.pdf

this is what @dariakhimych prepared. Neutral 1 color is - you can add it to the chat_theme.dart

const neutral1 = Color(0xff615e6e);

Also feel free to not localise anything, I will add it myself with all the languages. Also pdf includes a link to the example animation our designer is expecting, similar to what you have, maybe different speeds/easings/sequence.

One thing I want to add, think of it as suggestion. Since the typing indicator takes TextStyle for multiple users. Why not we allow to have Chat to take boolean allowTypingAvatars to toggle showing avatars instead of text. Just thinking of more accessibility?

[demchenkoalex]

Hey @gtalha07 what will you say if our designer will make an alternative solution with avatars, cause I don't think it will be easy to just give widget and lay out both text or avatars, since text just says "N others" and avatar like you suggested will have +4 or something. You think this is feasible? We will do like a mode "Text" / "Avatar"?

[gtalha07]

Hey @gtalha07 what will you say if our designer will make an alternative solution with avatars, cause I don't think it will be easy to just give widget and lay out both text or avatars, since text just says "N others" and avatar like you suggested will have +4 or something. You think this is feasible? We will do like a mode "Text" / "Avatar"?

Hi @demchenkoalex, I think the possibility is there to make typing indicator toggle between text and avatars. This is just a demo of what we can do for avatars.

[YassineChe]

Hello. Can you please be more specific about this feature implementation, cuz i couldn't find showTypingIndicator() attribute. Or please, show us a snippet, Thanks!

[demchenkoalex]

@YassineChe this is a pull request, where we discuss and finalise code before merging. Then, after a release, you will be able to use it.

[demchenkoalex]

Hey @gtalha07, sorry for the delay, here is what our designer made. I can see here 3 modes actually: only text, only avatar or both.

[gtalha07]

@demchenkoalex Thanks for this, I will get it ready ASAP.

[gtalha07]

@demchenkoalex I'm also looking here the support of indicatorBuilder which can allow to set up custom typing indicator widget. What do you think?

[demchenkoalex]

Yes, @gtalha07 agree!

[gtalha07]

Yes, @gtalha07 agree!

@demchenkoalex @felixgabler Please review it. I think its looking good now and cool package needs update. 😄

[gtalha07]

@felixgabler Have a look at new code. Many changes have been done. It looks nice thanks to you!

• [x] Extracted widgets where possible.
• [x] Refactor methods into reusable one.
• [x] Added typingIndicatorOptions. This now takes author(s) list by same mechanisam. Removed showTypingIndicator.
• [x] Proposed changes as per review.

[gtalha07]

@felixgabler However with some new changes in commit, the typing indicator area seems to be fixed on screen like input widget. It doesn't scroll along with messages like before. Do I need scroll controller here? You can test through example.

[felixgabler]

@gtalha07 I checked out your PR at different commits and this behaviour was already there before the commit you mentioned. To get the desired behavior, the typing indicator would need to be a sliver in the CustomScrollView in chat_list.dart. Is this something we want in the design?

[gtalha07]

@gtalha07 I checked out your PR at different commits and this behaviour was already there before the commit you mentioned. To get the desired behavior, the typing indicator would need to be a sliver in the CustomScrollView in chat_list.dart. Is this something we want in the design?

It seems like it got changed upon adding code. @demchenkoalex didn't mentioned specifically anything about this but it's expected the widget should be before latest message.

[felixgabler]

Then it will have to be moved somewhere else. It can't scroll with the messages if it's not part of the chat list. Right now, it's directly next to the Input and as such also behaves like that, i.e. is fixed

[demchenkoalex]

First of all, thanks @gtalha07 so much for your work and thanks @felixgabler for reviewing this.

Regarding the position of the indicator among other widgets - on videos attached before, indicator correctly appeared and animated all messages to accommodate space for itself. We could observe a similar behaviour in Signal or Messenger. However, if the user scrolls chat even for like 10 pixels (i.e. we are not in the beginning of the scroll list), indicator will not push messages up, so it would behave like it never appeared, but then if you scroll back to the start of the list, it will be visible. So there are 2 cases:

1. List is not scrolled. Indicator appears and animates messages up.
2. List is scrolled for at least 1 pixel, indicator appears in the list, but does not scroll content up, user needs to scroll down to see it.

Does this makes sense? Will it be hard to do?

Another thing I noticed while looking at the videos above, that when indicator is removed there is no animation, it just disappears - will it be possible to keep it alive for a duration of the delete animation and then remove the instance?

[gtalha07]

The intentional animation is as follows: However I can't seem to call _appearanceController.reverse() before typing indicator dispose() method. Because on dispose, it just removes widget without animation even if we call reverse animation there. Any ideas of how to achieve this ? @demchenkoalex @felixgabler.

[felixgabler]

The intentional animation is as follows: However I can't seem to call _appearanceController.reverse() before typing indicator dispose() method. Because on dispose, it just removes widget without animation even if we call reverse animation there. Any ideas of how to achieve this ? @demchenkoalex @felixgabler.

Either you make sure it does not get disposed until the animation finishes or we keep the typing indicator always alive. The former would be more efficient but probably have worse code because we need to either have callbacks or set two booleans (typing indicator showing and removed) when the typingUser array changes that control it's visibility with removed being delayed until animation finishes.

I'd be okay with always showing it but maybe add a feature flag then for people who are never going to use the typing indicator anyways. Then, they can prevent the minor overhead.

[gtalha07]

@demchenkoalex Are you referring to this behavior on scrolling content and typing indicator status?
https://user-images.githubusercontent.com/68579938/185659347-e406cc4f-b608-49b0-960c-708db9876f0b.mp4

[demchenkoalex]

will resolve this ASAP. I want to merge this and if I will see that something is not right I will try to fix it myself. Sorry for the waiting and thanks for the huge amount of work included here!

[elhe26]

will resolve this ASAP. I want to merge this and if I will see that something is not right I will try to fix it myself. Sorry for the waiting and thanks for the huge amount of work included here!

Thanks, @demchenkoalex . Is there any roadmap to follow?

[demchenkoalex]

Hey @elhe26, the roadmap is straightforward - finish swipe to reply and then all highly requested features - reactions, audio, video messages, time inside bubbles. Everything else is a bonus :)

[ramy9109]

any update coming soon for typing Indicator?

[demchenkoalex]

yes, I cleaned up tons of issues and MRs last week, so I can do this and replies now.