Reply to a Message Functionality

[Vassili]

Hi, is there a possibility to have a Reply to a message functionality like there is in other popular messengers? Please see attachment.

Namely, there are two features, first pic is when you select a message to reply, with the possibility to detach the message from replying, and second pic is after replying, when the message that you replied to, is now a part of your message.

If it's not there, is there any workaround that you could suggest?

Thanks!

Attachment: Archive_e80c4e03.zip

[Karthikraja Kalaimani]

Hi Vassili,

We regret to tell that currently, we don't have a support for your requirement " To reply a chat messages like WhatsApp" but you can achieve your requirement by the following way. 

i) load SfChat and Custom editor (which contains reply message like whats app inside of StackLayout.
ii) By default set IsVisible as false for your Custom editor.  
iii) load reply button in LeftSwipeTemplate 
iv) Trigger SwipeEnded event.
v) In Swipe ended event set IsVisible as false for SfChat footerView (which contains editor, attachments and send button) and set IsVisible as true for your CustomEditor. Please refer to the below code snippets to set IsVisible as false for SfChat's FooterView. 

 private void sfChat_SwipeEnded(object sender, MessageSwipeEndedEventArgs e)

        {

            (sfChat.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name == "FooterView").GetValue(this.sfChat) as Grid).IsVisible = false;

        }

vi) In Swipe Ended event you can see the selected message from arguments. 
vii) Create custom message template for to show a replied message in SfChat conversation. 

Regards,
Karthik Raja

[Vassili]

Hi Karthik,

Thanks a lot for the quick reply!

Do you have a sample project for a Custom Editor with SfChat?

Thanks, Vassili

[Karthikraja Kalaimani]

Hi Vassili, 

We have prepared sample for your requirement "Custom Editor". Please refer to the codes snippets and attached sample. 

Code snippets : 

  <StackLayout Orientation="Vertical">

            <sfChat:SfChat x:Name="sfChat" AllowSwiping="True"

                           Grid.Row="0" SwipeEnded="sfChat_SwipeEnded"

                           AllowMultilineInput="True"

                           ShowTypingIndicator="False"

                           Messages="{Binding Messages}"

                           ShowIncomingMessageAuthorName="True"

                           ShowOutgoingMessageAuthorName="True"

                           CurrentUser="{Binding CurrentUser}">

            </sfChat:SfChat>

            <Frame CornerRadius="5" Padding="0">

                <Grid>

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"></RowDefinition>

                        <RowDefinition Height="Auto"></RowDefinition>

                    </Grid.RowDefinitions>

                    <StackLayout Grid.Row="0" x:Name="ReplyBox" HorizontalOptions="FillAndExpand" IsVisible="False" Orientation="Horizontal">

                        <Frame CornerRadius="5" Padding="0" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand">

                            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">

                                <BoxView WidthRequest="5" BackgroundColor="Orange">

                                </BoxView>

                                <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">

                                    <Label x:Name="CustomerName" FontSize="Subtitle" HorizontalOptions="FillAndExpand"></Label>

                                    <Label x:Name="Reply" HorizontalOptions="FillAndExpand"></Label>

                                </StackLayout>

                                <Button Text="X" BackgroundColor="Transparent" WidthRequest="35" VerticalOptions="Start" Clicked="Button_Clicked_1"></Button>

                            </StackLayout>

                        </Frame>

                    </StackLayout>

                    <StackLayout Grid.Row="1" Orientation="Horizontal">

                        <Image Source="sticker_icon.png" WidthRequest="30" HeightRequest="30" VerticalOptions="Center" HorizontalOptions="Center"></Image>

                        <Editor x:Name="Editor" AutoSize="TextChanges" FontSize="Small" Placeholder="Type a Message..." HorizontalOptions="FillAndExpand"></Editor>

                        <Image WidthRequest="30" VerticalOptions="Center" HeightRequest="30" Source="Send_icon.png">

                            <Image.GestureRecognizers>

                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped">

                                </TapGestureRecognizer>

                            </Image.GestureRecognizers>

                        </Image>

                    </StackLayout>

                </Grid>

            </Frame>

        </StackLayout>
....
  {

            InitializeComponent();

            sfChat.LeftSwipeViewTemplate = new DataTemplate(() =>

            {

                StackLayout stackLayout = new StackLayout();

                stackLayout.HorizontalOptions = LayoutOptions.FillAndExpand;

                stackLayout.Orientation = StackOrientation.Horizontal;

                Label label = new Label();

                label.Text = "Reply";

                label.HorizontalOptions = LayoutOptions.Center;

                label.VerticalOptions = LayoutOptions.Center;

                stackLayout.Children.Add(label);

                return stackLayout;

            });

            (sfChat.GetType().GetRuntimeProperties().FirstOrDefault(x => x.Name == "FooterView").GetValue(this.sfChat) as Grid).IsVisible = false;

        }

        private void sfChat_SwipeEnded(object sender, MessageSwipeEndedEventArgs e)

        {

            this.ReplyBox.IsVisible = true;

            this.Reply.Text = (e.Message as TextMessage).Text;

            this.CustomerName.Text = "Replying to " + (e.Message as TextMessage).Author.Name;

            this.Editor.Focus();

        }

        private void Button_Clicked_1(object sender, EventArgs e)

        {

            this.ReplyBox.IsVisible = false;

        }

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)

        {

            this.viewModel.Messages.Add(new TextMessage() { Text = this.Editor.Text, Author = this.viewModel.CurrentUser });

            this.Editor.Text = "";

            this.ReplyBox.IsVisible = false;

        }

    }
....

Sample link :  https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted-808853217.zip

Regards,
Karthik Raja

[Vassili]

Hi, thanks a lot for excellent support!

Best, Vassili

[Karthikraja Kalaimani]

Hi Vassili, 

We are pleased to hear that the sample provided in the previous update meets your needs. Please let us know if you require any additional assistance.

Regards,
Karthik Raja

[Alfonso]

Great response, looks like there is a small part missing

---- ( vii) Create custom message template for to show a replied message in SfChat conversation.  )

Do you have a sample code to show the reply (box/message) in the TL (conversation).? 

Many thanks!

Alfonso

[Suja Venkatesan]

Hi Alfonso,

Thank for the update

We regret to let you know that SfChat control didn’t have direct support for custom message template to show a replied message in SfChat conversation. Currently, We are checking the possibilities to achieve this requirements. We Will update you further details on or before October 28 , 2021. We appreciate your patience until then.

Regards,

Suja.

[Suja Venkatesan]

Hi Alfonso, 

Thanks for the update. 

We have prepared a simple sample with custom template to show a replied message in SfChat conversation and attached it in the following link for your reference. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted1345798143.zip 

Please have a look at this sample and let us know if you have any concern in this. 

Regards, 

Suja. 

[Alfonso]

Great!.. Many thanks Suja!

The solution works perfectly.

Regards,

Alfonso

[Suja Venkatesan]

Hi Alfonso, 

Thanks for the update. 

We are glad to know that the provided solution worked at your end. Please let us know if you need any other assistance.  

Regards, 

Suja.