1. Home
  2. Forum
  3. Xamarin.Forms
  4. Controlling the TextMessage that is added to Messages list when Sending a Message

Controlling the TextMessage that is added to Messages list when Sending a Message

Problem:
When using SfChat with Twilio's programmable chat - following the example provided here:

It appears that sending a message shows the message twice in the messages list.

It does this because SfChat adds a new TextMessage to the chat and Twilio's MessageAdded listener also receives the sent message as a new message - however there is no simple way I have found to correlate both messages and prevent adding a duplicate. I can try to compare the text of messages but that does not seem reliable.

Any ideas on how to solve this?

What I tried:
I initially tried marking the SendMessageEventArgs.Handled property as true. This prevents the duplicate however has a bad UX - the message that was entered is not cleared from the editor and the editor is still focused.

What would be nice:
It would be nice to be able to control the type of TextMessage that is added to the list
eg

public class CustomTextMessage: TextMessage, IMessage
{
     public string CorrelationId { get; set; }
     public bool SupportsReaction { get; set; }
     public CustomTextMessage(TextMessage message)
     {
          ...custom copy code
          this.Text = message.Text;
     }
}

private void SfChat_SendMessage(object sender, SendMessageEventArgs e)
{
     var newMessage = new CustomTextMessage(e.Message); //custom constructor that copies values from e.Message to new CustomMessage;
     newMessage.CorrelationId = "my-unique-id for this message that I can check on receiving new message from Twilio";
     newMessage.SupportsReaction = true;
     e.Handled = false;
     e.Message = newMessage; // this is settable and simply requires a type basedon TextMessage and this is what is added to the Messages list
}

Any help you can provide is greatly appreciated.

13 Replies 1 reply marked as answer
SS Sivaraman Sivagurunathan Syncfusion Team August 28, 2020 07:06 AM UTC

Hi Philip, 

Thanks for using Syncfusion controls. 

We have checked your query. you can achieve your requirement. The newly added message can be canceled from sending, in the SendMessage event handler and SendMessageCommand by setting the Handled value as true in the provided SendMessageEventArgs. And you can clear the editor text by setting the string.Empty to sfChat.Editor.Text. we have prepared the sample based on your requirement and attached for your reference you can download the same from the below link. 


private async void sfChat_SendMessage(object sender, SendMessageEventArgs e)   
{   
    e.Handled = true;   
    await Task.Delay(100);   
    sfChat.Editor.Text = string.Empty;   
}   




Regards, 
Sivaraman S 


Marked as answer
PO Philip Ochu August 28, 2020 12:18 PM UTC

Thanks Sivaraman  - That worked. 

SS Sivaraman Sivagurunathan Syncfusion Team August 31, 2020 04:10 AM UTC

Hi Philip,  
 
We are happy to hear from you. Please get in touch with us if you would require any further assistance.     
    
Regards,     
Sivaraman S     


GV Georgi Velikov replied to Sivaraman Sivagurunathan October 19, 2020 11:26 AM UTC

Hi Philip, 

Thanks for using Syncfusion controls. 

We have checked your query. you can achieve your requirement. The newly added message can be canceled from sending, in the SendMessage event handler and SendMessageCommand by setting the Handled value as true in the provided SendMessageEventArgs. And you can clear the editor text by setting the string.Empty to sfChat.Editor.Text. we have prepared the sample based on your requirement and attached for your reference you can download the same from the below link. 


private async void sfChat_SendMessage(object sender, SendMessageEventArgs e)   
{   
    e.Handled = true;   
    await Task.Delay(100);   
    sfChat.Editor.Text = string.Empty;   
}   




Regards, 
Sivaraman S 


"await Task.Delay(100);"

Why is that even needed in first place?

SS Sivaraman Sivagurunathan Syncfusion Team October 20, 2020 09:48 AM UTC

Hi Georgi, 

Thanks for using Syncfusion controls. 

We have checked your query. In current implemention of SfChat, we cleared the editor text after the new message is added to the collection. So only the text is not clear until a new message is added to the conversation. If you want clear the text when e.handled set as true put delay as 100 milliseconds because we are maintaining the editor text after the SendMessage event completed in our source level. 

Regards, 
Sivaraman S 


TS Thomas Scott December 21, 2021 09:42 PM UTC

Are there any examples of how to do clear the editor text from a view model? We are driving the sending of messages through the `SendMessageCommand` and don't have direct access to the SfChat object.

Driving this through the code behind is not feasible as our send message handling includes some additional logic in the ViewModel.


SV Suja Venkatesan Syncfusion Team December 22, 2021 02:30 PM UTC

Hi Thomas, 

You can achieve requirement either by binding viewModel property to SfChat.Editor.Text or by Messaging center. 

Solution 1: Bind the ViewModel property to SfChat.Editor.Text and set the ViewModel property value as empty inside the Execute method SendMessageCommand. Please refer the following below code snippet. 

XAML code snippet: 
  <sfChat:SfChat x:Name="sfChat" 
                       Messages="{Binding Messages}" 
                       SendMessageCommand="{Binding SendMessageCommand}" 
                       CurrentUser="{Binding CurrentUser}"      
                       ShowOutgoingMessageAvatar="True" > 
            <sfChat:SfChat.Behaviors> 
                <local:ChatEditorBehavior viewModels="{x:Reference viewModel}"></local:ChatEditorBehavior> 
            </sfChat:SfChat.Behaviors> 
        </sfChat:SfChat>  
 
C# code snippet: 
ChatEditorBehavior class 
public class ChatEditorBehavior : Behavior<SfChat> 
    { 
        private GettingStartedViewModel viewModel; 
        public GettingStartedViewModel viewModels 
        { 
            get { return viewModel; } 
            set { viewModel = value; } 
        } 
        protected override void OnAttachedTo(SfChat bindable) 
        { 
 
            Binding editorbinding = new Binding("EditorText"); 
            editorbinding.Source = viewModel; 
            editorbinding.Mode = BindingMode.TwoWay; 
            bindable.Editor.SetBinding(Editor.TextProperty, editorbinding); 
           base.OnAttachedTo(bindable); 
        } 
    } 
SendMessageCommandExt class 
public  void Execute(object parameter) 
        { 
          (parameter as SendMessageEventArgs).Handled=true; 
            Device.BeginInvokeOnMainThread(() => 
            { 
                viewmodel.EditorText = ""; 
            });     
    } 
  

Solution 2: 
Call Messaging Center send inside the Execute method of sendmessage command with somemessage and subscribe the samemessage , inside the subscribe you can clear the chat editor. Please refer the following below code snippet 

C# code snippet: 
ChatEditorBehavior class 
public class ChatEditorBehavior : Behavior<SfChat> 
    { 
        private GettingStartedViewModel viewModel; 
        public GettingStartedViewModel viewModels 
        { 
            get { return viewModel; } 
            set { viewModel = value; } 
        } 
        protected override void OnAttachedTo(SfChat bindable) 
        { 
          MessagingCenter.Subscribe<GettingStartedViewModel>(this, "HandledSendMessage", (sender) => 
            { 
                Device.BeginInvokeOnMainThread(() => 
                { 
                    bindable.Editor.Text = ""; 
                }); 
            }); 
            base.OnAttachedTo(bindable); 
        } 
    } 
 
SendMessageCommandExt class 
public  void Execute(object parameter) 
        { 
          (parameter as SendMessageEventArgs).Handled=true; 
MessagingCenter.Send<GettingStartedViewModel>(viewmodel, "HandledSendMessage"); 
        } 
 
We have also attached a runnable sample with these 2 solution for your reference. Please let us know if you have any concern in it. 

Regards, 
Suja. 


TS Thomas Scott replied to Suja Venkatesan December 22, 2021 10:20 PM UTC

Hello  Suja,


Thank you for the timely response and solutions, I am unable to find any samples of the suggested solutions.


Thanks,

Thomas


SV Suja Venkatesan Syncfusion Team December 23, 2021 01:13 PM UTC

Hi Thomas, 

In the below sample link we have attached a runnable sample with solution as we recommended in our previous update.  


Please let us know if you need any other assistance. 

Regards, 
Suja 


AY Amr Yousef January 25, 2022 12:53 PM UTC

Isn't there any straightforward solution so far MVVM rather than the one provided above?



KK Karthikraja Kalaimani Syncfusion Team January 26, 2022 08:11 AM UTC

Hi Amr, 

By using the SendMessage event of SfChat, we can clear the editor text. Please refer to the below code snippet. 

Code snippet  : 
       
<sfChat:SfChat x:Name="sfChat"
                       Messages="{Binding Messages}"
                       SendMessage="sfChat_SendMessage"
                       CurrentUser="{Binding CurrentUser}"    
                       ShowOutgoingMessageAvatar="True" >
</sfChat:SfChat>
private async void sfChat_SendMessage(object sender, SendMessageEventArgs e)
        {
            e.Handled = true;
            await Task.Delay(100);
            sfChat.Editor.Text = string.Empty;
        }
 

Regards,
Karthik Raja


AY Amr Yousef replied to Karthikraja Kalaimani January 26, 2022 03:41 PM UTC

i was asking about the MVVM


SV Suja Venkatesan Syncfusion Team January 27, 2022 03:27 PM UTC

Hi Amr, 

We can achieve the requirement as mentioned in this comment .We were unable to obtain the SfChat instance when using the SendMessagecommand. Accessing UI elements in the viewmodel will also break the MVVM pattern. So we suggested the solution with behavior and we are afraid that this is the best possible solution to meet this requirement in MVVM. 

Regards, 
Suja 


Loader.
Up arrow icon