radChat issue with selecting current author for multiple chat boxes

3 Answers 56 Views
Chat (Conversational UI)
Wesam
Top achievements
Rank 1
Wesam asked on 01 Aug 2021, 08:52 AM | edited on 01 Aug 2021, 08:53 AM

I am creating a little chat demo, by having two chat boxes next to each other (they communicate to each other). My issue is, when I load older messages from the database, I could not properly set a different "current author" for each chat box while maintaining MVVM structure (what I need is: in chatbox 1 user1 is the currentAuthor, in chatbox 2 user 2 is the currnetAuthor)

I am following an MVVM pattern. Code snippets are provided below (I tried to remove all lines irrelevant to the question):

1- my chat boxes

<telerik:RadChat x:Name="chat1" 
			 Width="400"
			 Height="550"
                         DataSource="{Binding Chat1Messages}"
                         CurrentAuthor="{Binding Chat1CurrentAuthor}">
</telerik:RadChat>

 <telerik:RadChat x:Name="chat2" 
			 Width="400"
			 Height="550"
                         DataSource="{Binding Chat2Messages}"
                         CurrentAuthor="{Binding Chat2CurrentAuthor}">

</telerik:RadChat>

2- My code in adding the messages from DB:

//some code to get data from DB//


this.chat1CurrentAuthor = this.FirstAuthor;
this.chat2CurrentAuthor = this.SecondAuthor;

//Iterator over data from DB
{
     //if message is written by first author:
     {
          this.Chat1Messages.Add(new TextMessageObject() { Text = row.MessageText, MsgAuthor = this.FirstAuthor, CreationDate = row.Time });
          this.Chat2Messages.Add(new TextMessageObject() { Text = row.MessageText, MsgAuthor = this.FirstAuthor, CreationDate = row.Time });
     }
     //if message is written by second author:
     {
          this.Chat1Messages.Add(new TextMessageObject() { Text = row.MessageText, MsgAuthor = this.SecondAuthor, CreationDate = row.Time });
          this.Chat2Messages.Add(new TextMessageObject() { Text = row.MessageText, MsgAuthor = this.SecondAuthor, CreationDate = row.Time });
     }
}


3- code to support MVVM:

public Author Chat1CurrentAuthor
{
            get { return this.chat1CurrentAuthor; }
            set
            {
                if (value != this.chat1CurrentAuthor)
                {
                    this.chat1CurrentAuthor = value;
                    OnPropertyChanged(() => this.chat1CurrentAuthor);
                }
            }
}
public Author Chat2CurrentAuthor
{
            get { return this.chat2CurrentAuthor; }
            set
            {
                if (value != this.chat2CurrentAuthor)
                {
                    this.chat2CurrentAuthor = value;
                    OnPropertyChanged(() => this.chat2CurrentAuthor);
                }
            }
}

 

With my current code, both authors are set up as current authors in both chatboxes (i.e in chatbox1, currentAuthor is both user1 and user2, in chatbox2 currentAuthor is both user1 and user2) which is not the desired behavior.

 

 

 

3 Answers, 1 is accepted

Sort by
1
Accepted
Dinko
Telerik team
answered on 12 Aug 2021, 11:27 AM

Hello Wesam,

Thank you for your patience.

After debugging the problem it turns out that using the same Authors in two different chats is not expected. This is more like a limitation in the control. Internally in code, we are setting the current authors. In this case, when the controls are loaded both authors are set as the current for the respected chat. We don't create a new instance of the authors because this will break the binding of the CurrentAuthor property. To make it work you will need to use different authors for the second chat. They could have a similar Name but needs to be new objects.

 public Author chat1CurrentAuthor{ get; set; }
        public Author chat2CurrentAuthor { get; set; }

        public MainViewModel()
        {
            this.Chat1Messages = new ObservableCollection<TextMessageObject>();
            this.Chat2Messages = new ObservableCollection<TextMessageObject>();

            this.FirstAuthor = new Author("user1");
            this.SecondAuthor = new Author("user2");

            this.chat1CurrentAuthor = new Author("user1");
            this.chat2CurrentAuthor = new Author("user2");

            this.Chat1Messages.Add(new TextMessageObject() { Text = "Hi", MsgAuthor = this.FirstAuthor, CreationDate = DateTime.Now });
            this.Chat2Messages.Add(new TextMessageObject() { Text = "Hi", MsgAuthor = this.chat1CurrentAuthor, CreationDate = DateTime.Now });

            this.Chat1Messages.Add(new TextMessageObject() { Text = "Hello", MsgAuthor = this.SecondAuthor, CreationDate = DateTime.Now });
            this.Chat2Messages.Add(new TextMessageObject() { Text = "Hello", MsgAuthor = this.chat2CurrentAuthor, CreationDate = DateTime.Now });

            this.Chat1Messages.Add(new TextMessageObject() { Text = "How are you?", MsgAuthor = this.FirstAuthor, CreationDate = DateTime.Now });
            this.Chat2Messages.Add(new TextMessageObject() { Text = "How are you?", MsgAuthor = this.chat1CurrentAuthor, CreationDate = DateTime.Now });

            this.Chat1Messages.Add(new TextMessageObject() { Text = "I'm Good, you?", MsgAuthor = this.SecondAuthor, CreationDate = DateTime.Now });
            this.Chat2Messages.Add(new TextMessageObject() { Text = "I'm Good, you?", MsgAuthor = this.chat2CurrentAuthor, CreationDate = DateTime.Now });

            this.Chat1Messages.Add(new TextMessageObject() { Text = "Not bad", MsgAuthor = this.FirstAuthor, CreationDate = DateTime.Now });
            this.Chat2Messages.Add(new TextMessageObject() { Text = "Not bad", MsgAuthor = this.chat1CurrentAuthor, CreationDate = DateTime.Now });
        }
 
<telerik:RadChat x:Name="chat2" Loaded="chat2_Loaded"
					Width="400"
					Height="550"
                    Grid.Column="1"
                    CurrentAuthor="{Binding chat2CurrentAuthor,Mode=TwoWay}"
                    DataSource="{Binding Chat2Messages}"
					AutoIncludeTimeBreaks="False"
					CanUserSelectMessage="False"
                    >
    <telerik:RadChat.MessageConverter>
        <local:MessageConverter />
    </telerik:RadChat.MessageConverter>
</telerik:RadChat>

Could this approach work for you? 

Regards,
Dinko
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Wesam
Top achievements
Rank 1
commented on 17 Aug 2021, 07:42 AM

Yes, I can work with that.

Thank you, Dinko!

 

0
Dinko
Telerik team
answered on 03 Aug 2021, 09:27 AM

Hello Wesam,

Thank you for the provided code snippets.

You can consider using a custom MessageConverter as demonstrated in Data Binding to Collection help article of the RadChat. Give this approach a try and let me know if it works in your application.

Regards,
Dinko
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Wesam
Top achievements
Rank 1
commented on 03 Aug 2021, 09:49 AM | edited

Hello Dinko,

Thank you for your answer. I am, in fact, using a message converter. My application works fine when sending messages (without specifying who the current author is). However, when loading messages from DB, if I do not set a CurrentAuthor, then all messages appear as sent by others. When I set different CurrentAuthors for each chat (since one has to be user1 and the other has to be user2) then the problem happens, where basically it sets both authors as CurrentAuthors in both chats, meaning:

For chat1: CurrentAuthor is user1 and user2

For chat2: CurrentAuthor is user1 and user2

However, the behavior I am looking for is:

For chat1: CurrentAuthor is user1

For chat2: CurrentAuthor is user2

 

Regards,

Wesam

Dinko
Telerik team
commented on 06 Aug 2021, 07:29 AM

I think I am missing something little here. Could it be possible to isolate this in a standalone project which mimics your implementation? This way I can take a closer look at this behavior. You can add messages as sample data from the DB. I am looking forward to your reply.
Wesam
Top achievements
Rank 1
commented on 09 Aug 2021, 05:51 AM

Thank you, Dinko

I created a very simplified version of the problem. Please take a look

0
Dinko
Telerik team
answered on 11 Aug 2021, 02:29 PM

Hello Wesam,

I was able to reproduce this behavior using your project. I can confirm that having 2 RadChat controls, messed up the authors of both controls. I will look for a possible solution. I will contact you again tomorrow with my findings.

Regards,
Dinko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Chat (Conversational UI)
Asked by
Wesam
Top achievements
Rank 1
Answers by
Dinko
Telerik team
Share this question
or