Chat items not spanning chat area correctly.

[Jay]

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});
    }
  }

[Dimitar]

Hello Jay,

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

• https://dojo.telerik.com/ejiFeCIp/2

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

[Jay]

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.