Feature Request - Message Actions on Long Press

[jlubeck]

Would be nice to get extra actions when long pressing a button. Most importantly to be able to reply to other messages, but other options are valid as well. The system could even be made extensible to allow devs to add their own actions

Example:

[demchenkoalex]

Hey @jlubeck we all use Telegram and other chats and we are aware of those features, no need to send a screenshot of every small detail because we will have hundreds of feature requests in one hour. We do this after work on weekends and we have our priorities in a pinned issue right now, later we plan to do milestones specifying every feature planned for a particular milestone. Step by step we will be there.

[jlubeck]

Hey @demchenkoalex I'm definitely not trying to spam. I thought I was helping with this so that whenever you DO make the milestones, you can just link this tickets to them, and whoever is interested in a specific issue can just follow the issue. This is by no means a way to pressure or rush you guys. I thought it would even help either me (or whoever else wants to make a PR) to have a ticket to link it to...

I also shared some code snippets on another ticket (#24 (comment)) just a few minutes ago. I'd love to help you guys build this. But if there are no tickets, there is no way to follow progress :D

[demchenkoalex]

Ok, makes sense @jlubeck. Then we probably need to use GitHub as our board since we will have all the features here, including milestones. We will try to arrange that this week.

[felixgabler]

I've built this functionality in my project but before adding a PR, I would like to know how much flexibility we need with it. My implementation is a bit of code and e.g. also uses keep_keyboard_popup_menu to prevent jumpiness. Not sure if this is worth adding to the library. What do you think?

[felixgabler]

Yes that is also my thought. Especially considering how much code we needed to get it to work nicely (with the keyboard open plugin and positioning).

Perhaps you could provide some designs for this and then we can see how to best implement it and whether to put it into example or library.

[demchenkoalex]

If only something like this https://api.flutter.dev/flutter/cupertino/CupertinoContextMenu-class.html was available on Android :D

[felixgabler]

If you provide me with some designs, I can try building it. At least a popup menu should be possible (e.g. using CompositedTransformFollower).

[demchenkoalex]

Maybe you want to create your own package for that? seems like a good idea for the separate thing :) you could make it customisable and we will be able to adjust it

[Justus-M]

@demchenkoalex
CupertinoContextMenu does work for android unless I'm missing something. Is the issue that it has an iOS style and you think it's not acceptable to show this on android phones?

But re. it being "available" I did just implement it and test it on a physical android device in the past few days.

[superwch1]

I have implemented a feature on long press action that user can choose to copy / share / delete message.
It gets the context height & width to determine the position of the long press widget.

The idea is that instead of getting the text or the original picture, it finds the rendered object (message bubble) from context and display on the screen. The IOS and android platform both seems to be working using this method.

In addition, it needs to modify the position of message bubble and action widget when it overflows in the edges of screen.

The example is as follow:

[demchenkoalex]

hey, looks sleek! is there any way you can share the code? I will want this feature in v2 :D

[superwch1]

Future LongPressAction(BuildContext messageBubbleContext, Message message, double chatScreenContext) async{

    FocusManager.instance.primaryFocus?.unfocus();

    //wait 300 milliseconds to close the keyboard before showing the option widget
    await Future.delayed(const Duration(milliseconds: 300),() async {

        var navigationBarHeight = MediaQuery.of(messageBubbleContext).size.height * 0.08; 

        var screenHeight = navigationBarHeight + (chatScreenContext.findRenderObject() as RenderBox).size.height;
        var screenWidth = MediaQuery.of(messageBubbleContext).size.width;


        //constant value of the gap between y-coordinate of message bubble and real position
        //gap have slightly variance across different devices 
        var messageVerticalGap = -50; 

        var messageTopPosition = messageVerticalGap + (messageBubbleContext.findRenderObject() as RenderBox).localToGlobal(Offset.zero).dy;
        var messageSize = (messageBubbleContext.findRenderObject() as RenderBox).size;


        //create a separate display and convert it into an object of Image Class
        var messageBubbleDisplay = messageBubbleContext.findAncestorRenderObjectOfType<RenderRepaintBoundary>()!;
        Image messageBubbleImage = await messageBubbleDisplay.toImage(pixelRatio: 2.0);


        //set the size of the option widget
        var widgetSize = const Size(120, 150);


        //top position of the message bubble higher than then navigation bar
        if (messageTopPosition < navigationBarHeight){
          messageTopPosition = navigationBarHeight;
        }


        //bottom position of the message bubble lower than the screen
        else if ((messageTopPosition + messageSize.height + widgetSize.height + 20) > screenHeight){
            messageTopPosition = screenHeight - messageSize.height - widgetSize.height - 20;
        }

        double messageLeftPosition;
        if (message.author.id != OtherUser.Id || OtherUser.Id == AppData.MyUser.Id){
        widgetLeftPosition = screenWidth - 16.5 - widgetSize.width;
    
        }
        else {
            widgetLeftPosition = 20;
        }


        //height of message bubble and option widget longer than the screen size
        //cut the exeecding size of the bubble image to fit into the screen
        if ((messageSize.height + widgetSize.height) > (screenHeight - navigationBarHeight)) {
            var ratio = (screenHeight - widgetSize.height - navigationBarHeight - 20) / messageSize.height;
            messageSize = Size(messageSize.width, messageSize.height * ratio);
            messageTopPosition = navigationBarHeight;
        }


        //give a little bit vibration for the response
        await HapticFeedback.lightImpact();


        //show dialog 
        if (messageBubbleContext.mounted){
            await ShowOptionWidget(screenHeight, messageTopPosition, messageSize, messageBubbleImage, 
            widgetSize, widgetLeftPosition, message, messageBubbleContext, CopyOption, DownloadOption, ShareOption, DeleteOption);
        }
    });
}




Future ShowOptionWidget(double screenHeight, double messageTopPosition, Size messageSize, 
    Image messageImage, Size widgetSize, double widgetLeftPosition, Message message, BuildContext messageBubbleContext, 

    //the message agrument is used to get the text or image and context showing dialog
    Future<void> Function(Message message, BuildContext context) copyOption,
    Future<void> Function(Message message, BuildContext context) downloadOption,
    Future<void> Function(Message message, BuildContext context) shareOption,
    Future<void> Function(Message message, BuildContext context) deleteOption,
) async {

    await showDialog(
        barrierColor: Colors.black54.withOpacity(0.9),
        context: messageBubbleContext, 
        builder: (context) {
            return GestureDetector(
                onTap: () => Navigator.pop(context),

                child: Stack(
                    children: [

                        Positioned(
                            top: messageTopPosition,
                            left: 0,
                            child: SizedBox(
                                height: messageSize.height,
                                child: RawImage(
                                    alignment: Alignment.topCenter,
                                    image: messageImage,
                                    width: messageSize.width,
                                    fit: BoxFit.fitWidth,
                                ),
                            )
                        ),

                        //specify the display of option widget such as langauge, colour and number of options
                        Positioned(
                            top: messageTopPosition + messageSize.height,
                            left: widgetLeftPosition,
                            child: ClipRRect(
                                borderRadius: const BorderRadius.all(Radius.circular(12)),
                                child: Container(
                                    decoration: BoxDecoration(
                                        color: appData.SelectedMode.ChatMessageOptionBackground(),
                                    ),

                                    width: widgetSize.width,
                                    height: messageTopPositionSize.height,
                                    child: ListView(
                                        physics: const NeverScrollableScrollPhysics(),
                                        children: <Widget>[                      
                                            Builder(builder:(context) {
                                                if(message is TextMessage){
                                                    return Option(widgetSize, "Copy", 3, Icons.copy_outlined, copyOption, message, Color.fromARGB(255, 249, 189, 96));
                                                }
                                                else {
                                                    return Option(widgetSize, "Download", 3, Icons.download, downloadOption, message, Color.fromARGB(255, 249, 189, 96));
                                                }
                                            }),
                                            Option(widgetSize, "Share", 3, Icons.share_outlined, shareOption, message, Color.fromARGB(255, 249, 189, 96)),
                                            Option(widgetSize, "Delete", 3, Icons.delete_outline, deleteOption, message, Color.fromARGB(255, 249, 189, 96))
                                        ]
                                    )
                                )
                            )
                        )
                    ],
                )
            );
        },
    );
}




class Option extends StatelessWidget {

    final Size DialogSize;
    final String Name;
    final int NumberOfOptions;
    final IconData IconPicture;
    final Message message;
    final Color FocusColor;
    final Future<void> Function(Message message, BuildContext context) OptionFunction;

    const Option(this.DialogSize, this.Name, this.NumberOfOptions, this.IconPicture, this.OptionFunction, this.message, this.FocusColor);

    @override
    Widget build(BuildContext context) {
        return SizedBox(
            height: DialogSize.height / NumberOfOptions,
            child: RawMaterialButton(
                padding: const EdgeInsets.all(15),
                highlightColor: FocusColor,
                onPressed: () async => await OptionFunction(message, context),
                child: Center(
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                            Text(Name, style: const TextStyle(fontSize: 16)),
                            Icon(IconPicture)
                        ],
                    )
                ),
            ),
        );
    }
}

[superwch1]

The constant value of the messageVerticalGap need to be adjusted in future, since the position of openDialog may not be aligned perfectly in some devices.