This is a migrated thread and some comments may be shown as answers.

Chat items not spanning chat area correctly.

2 Answers 106 Views
Chat
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 1
Jay asked on 21 Jun 2019, 06:29 PM

Good Afternoon,

I've run into a bit of a strange issue and I'm not entirely sure what the cause could be.

We want to use the Kendo Chat widget to power our in-app messaging service, but I've run into an issue that is causing me a bit of stress with the implementation.

When rendering messages, it does not correctly fill the chat area, causing the messages to be rather squished and the datestamps to be rendered partially outside of the container.  If I input a long message, this area will grow, but it will grow to the point where the avatar image is pushed out of the right side of the chat area, and the timestamp remains hidden to the left.  I have attached images of both of these behaviors.

This chat widget is being rendered inside of a KendoUI window and I have updated to the newest NPM release, if that makes any difference.  

We are using Aurelia w/ Typescript, but as this has not yet been added to the Aurelia-KendoUI bridge, the chat widget is being initialized programatically with JQuery.  Any insight as to why this is behaving this way would be appreciated.

The window initialization is as follows:

<div id.bind="'chatWindow' + cUser.Thread.ThreadID"
     ak-window="k-width: 300px; k-height:400px; k-title: Messenger; k-resizable.bind: false; k-visible.bind: false; k-actions.bind: actions; k-widget.bind: chatWindows[cUser.Thread.ThreadID]"
     k-on-close.delegate="onClose()">
  <chat-window chat-thread.bind="cUser.Thread"></chat-window>
</div>
openChat(threadID)
{
  this.chatWindows[threadID].center().open();
}

 

And the chat widget initialization is:

<div id.bind="'chat' + ChatThread.ThreadID" style="height:100%;width:100%"></div>
private createChat() {
    if (!App.myUser) {
      setTimeout(() => this.createChat(),500);
      return;
    }
 
    let companyUserID = App.myUser.CompanyUsers[0].CompanyUserID;
 
    let user = this.getUserByUserID(App.myUser.UserID);
 
    let chat = $("#chat" + this.ChatThread.ThreadID).kendoChat({
      // Each instance of the app will generate a unique username.
      // In this way, the SignalR Hub "knows" who is the user that sends the message
      // and who are the clients that have to receive that message.
      user: {
        name: user!= null ? user.Contact.FirstName + " " + user.Contact.LastName : null,
        iconUrl:user!= null ?  user.AvatarURL : null
      },
      // This will notify the SignallR Hub that the current client is typing.
      // The Hub, in turn, will notify all the other clients
      // that the user has started typing.
      typingStart: function () {
        //chatHub.invoke("sendTyping", chat.getUser());
      },
      // The post handler will send the user data and the typed text to the SignalR Hub.
      // The Hub will then forward that info to the other clients.
      post: function (args) {
        //chatHub.invoke("send", chat.getUser(), args.text);
      }
    }).data("kendoChat");
    for (let message of this.ChatThread.Messages)
    {
      if(message.CreatedByUserID == App.myUser.UserID)
      {
        let myUser = chat.getUser();
 
        chat.renderMessage({type:'text',text:message.Message,timestamp:message.Timestamp},myUser);
        continue;
      }
 
      let user = this.getUserByUserID(message.CreatedByUserID);
 
      chat.renderMessage({type:'text',text:message.Message,timestamp:message.Timestamp},{
        id: user.UserID,
        name: user != null ? (user.Contact.FirstName + " " + user.Contact.LastName) : null,
        iconUrl: user != null ? user.AvatarURL: null});
    }
  }

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 25 Jun 2019, 11:31 AM
Hello Jay,

I have tried to reproduce the described behavior by nesting the Chat widget inside a Window:


With the above sample I was not able to reproduce the described behavior where the Chat content goes outside of the widget content area. Could you test the Dojo and verify if you are able to reproduce the same issue with it?

Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jay
Top achievements
Rank 1
answered on 25 Jun 2019, 01:26 PM

Good Morning,

Thank you for your response - I was also unable to replicate the issue in dojo, but it sent me thinking about it in another direction.  It would seem that some new classes were added from the last time that we generated our theme files and this was breaking the UI of the chat widget.  Once I regenerated the theme files, this issue was resolved.

Tags
Chat
Asked by
Jay
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Jay
Top achievements
Rank 1
Share this question
or