Delivery Confirmation that Message was read/seen by the reciepient

[Vassili]

Hi,

SfChat is a very nice widget, but unfortunately I couldn't find how I can show if a message has been read (delivered) or not.

Usually there is one check if message has been not seen and two checks otherwise.

Thanks, Vassili

[Pradeep Kumar Balakrishnan]

Hi Vassili, 

 

Thank you for contacting Syncfusion support. 

 

Currently, we don’t have support to indicate message is delivered or seen status in SfChat and we have considered and logged feature for this requirement. We will implement this feature in any of our upcoming releases.       

 

At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented. We appreciate your patience until then.     

You can also communicate with us regarding the open features any time using our Feature Report page.  

Feedback link: https://www.syncfusion.com/feedback/22346/provide-support-to-indicate-message-is-delivered-or-seen-status-in-sfchat 

 

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal. 

 

Regards, 

Pradeep Kumar B 

[Vassili]

Thanks for your answer Pradeep and adding this requirement into your queue of requests.

Question: meanwhile this has not been implemented, maybe one can distinguish between the messages as "read" or "not delivered" by setting a different background color for the messages depending on their status? E.g. would it be possible to have messages with different background color (or a different font) depending on their status? E.g., can I set one message with green background and italic font and another message with yellow background and bold font in the same chat message window?

Thanks, Vassili

[Pradeep Kumar Balakrishnan]

Hi Vassili, 

 

Thank you for the update. 

 

We have checked your query “How to change the message background color and text message font attribute based on the message status.” We cannot achieve this requirement directly we need property in IMessage interface to achieve this requirement. However, we are trying to achieve this requirement using Target Style for SfChat messages.  

 

We will prepare a sample for your current requirement and update the same in one business days by February 15, 2021. We appreciate your patience until then. 

 

Regards, 

Pradeep Kumar B 

[Pradeep Kumar Balakrishnan]

Hi Vassili, 

 

Thank you for your patience. 

 

We have prepared sample to differentiate the delivered message and not delivered message by adding image in TimeStamp view area and, Textmessage font attribute is changed. We have used Target style and defined user type message model to achieve this requirement. Refer to the following code snippet for reference. 

 

Code Snippet: 

<ContentPage.Resources> 

        <ResourceDictionary> 

            <local:MessageConverter x:Key="MessageConverter" /> 

            <local:TimestampFormatConverter x:Key="TimestampFormatConverter" /> 

            <local:TimestampVisibilityConverter x:Key="TimestampVisibilityConverter" /> 

            <local:AuthorNameVisibilityConverter x:Key="AuthorNameVisibilityConverter" /> 

            <local:MessageDeliverStatusConverter x:Key="MessageDeliverStatusConverter" /> 

            <local:MessageDeliverStatusBadgeIconConverter x:Key="MessageDeliverStatusBadgeIconConverter" /> 

 

            <Style TargetType="sfChat:OutgoingMessageAuthorView"> 

                <Setter Property="ControlTemplate"> 

                    <Setter.Value> 

                        <ControlTemplate> 

                            <Label x:Name="authorNameLabel" 

                   Text="{Binding Author.Name}" 

                   LineBreakMode="TailTruncation" 

                                   TextColor="#D0E8FF" 

                   VerticalTextAlignment="Center"  

                                   BindingContext="{TemplateBinding BindingContext}"/> 

                        </ControlTemplate> 

                    </Setter.Value> 

                </Setter> 

            </Style> 

 

            <Style TargetType="sfChat:OutgoingMessageTextView"> 

                <Setter Property="ControlTemplate"> 

                    <Setter.Value> 

                        <ControlTemplate> 

                            <Label x:Name="messageLabel" 

               Text="{Binding Text}" TextColor="#FFFFFF" 

               VerticalTextAlignment="Center" BindingContext="{TemplateBinding BindingContext}" 

                                   FontAttributes="{TemplateBinding BindingContext,Converter={StaticResource MessageDeliverStatusConverter}}" 

                                   /> 

                        </ControlTemplate> 

                    </Setter.Value> 

                </Setter> 

            </Style> 

 

            <Style TargetType="sfChat:OutgoingMessageTimestampView"> 

                <Setter Property="ControlTemplate"> 

                    <Setter.Value> 

                        <ControlTemplate> 

                            <Grid ColumnSpacing="0"> 

                                <Grid.ColumnDefinitions> 

                                    <ColumnDefinition Width="*"/> 

                                    <ColumnDefinition Width="10"/> 

                                </Grid.ColumnDefinitions> 

                                <Label Grid.Column="0" x:Name="timestampLabel" TextColor="#D0E8FF" 

               Text="{TemplateBinding BindingContext, Converter={StaticResource TimestampFormatConverter}}" /> 

                                <Image Grid.Column="1" HeightRequest="5" WidthRequest="5" Source="{TemplateBinding BindingContext, Converter={StaticResource MessageDeliverStatusBadgeIconConverter}}"/> 

                                 

                            </Grid> 

                        </ControlTemplate> 

                    </Setter.Value> 

                </Setter> 

            </Style> 

             

        </ResourceDictionary> 

 

</ContentPage.Resources> 

 

    <ContentPage.Content> 

        <sfChat:SfChat x:Name="sfChat"  

                           MessageShape="RoundedRectangle" 

                           ShowOutgoingMessageAvatar="True" 

                           ShowIncomingMessageAvatar="True" 

                              ItemsSource="{Binding MessageCollection}"   

                       ItemsSourceConverter="{StaticResource MessageConverter}" 

                           CurrentUser="{Binding CurrentUser}" 

                           IncomingMessageTimestampFormat="hh:mm tt" 

                           OutgoingMessageTimestampFormat="hh:mm tt" > 

        </sfChat:SfChat> 

    </ContentPage.Content> 

 

 

Message model. 

 

public class MessageModel : INotifyPropertyChanged 

    { 

        private bool isDeliveried; 

        private string text; 

 

        public Author User { get; set; } 

 

        public bool IsDeliveried 

        { 

            get => isDeliveried; 

            set 

            { 

                isDeliveried = value; 

                RaisePropertyChanged("IsDeliveried"); 

            } 

        } 

 

        public string Text 

        { 

            get => text;  

            set 

            { 

                text = value; 

                RaisePropertyChanged("Text"); 

            } 

        } 

} 

 

ViewModel collection generation. 

 

this.messageCollection.Add(new MessageModel() 

{ 

    User = CurrentUser, 

    IsDeliveried = true, 

    Text = "Hi guys, good morning! I'm very delighted to share with you the news that our team is going to launch a new mobile application.", 

}) ; 

 

this.messageCollection.Add(new MessageModel() 

{ 

    User = new Author() { Name = "Andrea", Avatar = "People_Circle7.png" }, 

    Text = "Oh! That's great.", 

}); 

 

this.messageCollection.Add(new MessageModel() 

{ 

    User = new Author() { Name = "Harrison", Avatar = "People_Circle5.png" }, 

    Text = "That is good news.", 

}); 

 

this.messageCollection.Add(new MessageModel() 

{ 

    User = CurrentUser, 

    Text = "Hello, Andrea and Harrison", 

}); 

 

 

Converter code. 

 

internal class MessageDeliverStatusConverter : IValueConverter 

{ 

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        if (value != null) 

        { 

            var message = value as ITextMessage; 

 

            var originalMessage = message.Data as MessageModel; 

 

            if(originalMessage.IsDeliveried) 

            { 

                return FontAttributes.Bold; 

            } 

        } 

 

        return FontAttributes.Italic; 

    } 

 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        return FontAttributes.None; 

    } 

} 

 

 

We have also attached sample for your reference in the following link. 

Sample link 

 

Let us know if you need any further assistance on this. 

 

Regards, 

Pradeep Kumar B 

[Vassili]

Hi Pradeep, thanks a lot for a very useful Sample!

Best regards, Vassili

[Pradeep Kumar Balakrishnan]

Hi Vassili, 

 

We are glad that the given sample is helpful to achieve your requirement. Please get in touch with us if you would require any further assistance in future. 

 

Regards, 

Pradeep Kumar B