Questions on Kendo UI for jQuery Forum

1 answer

75 views

Chat Suggested Items only returning the Value

Hello,

How can I get the text and the value of the button pressed? Right now it only appears to return the value which is not what I want the user to see. Like in this example it should say option 1 when you click on option 1 and not show value 1 but pass it back for use in the code.

https://dojo.telerik.com/OkoCIxIT

How can I get this to work properly?

Thanks -Tim

Chat

answered on 14 May 2021

5 answers

536 views

chat datasource?

Hello

Is there any way to keeping all the messages in chat ui, is there a workaround so that I store the historical messages on user return then show the historical messages?

Thank you

Chat

answered on 26 Mar 2021

3 answers

190 views

Expand to 100% Width

Hello,

How can I expand the conversational UI to 100% width of the window ?

Thanks,
Stephane.

Chat

answered on 08 Oct 2019

2 answers

264 views

Chat items not spanning chat area correctly.

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

}

Chat

answered on 25 Jun 2019

1 answer

118 views

telerik kendo chart not binding to string

I am new to telerik kendo chart I have created a string that is being returned from an ashx page. I want the x Axis to be the date has in the month and year and for each date there will be two box going up to the number.

ASHX.CS Page

string JSON = sb.ToString(); context.Response.ContentType = "text/json"; context.Response.Write(JSON);

Returns

[{"Date":"2/2018""Images":"199956""ImagesDownloads":"540903"},{"Date":"3/2018""Images":"226606""ImagesDownloads":"635068"}]

JS Page

Chat

answered on 25 Feb 2019

4 answers

129 views

Render Attachments

Hello,
I'm searching a way to render attachment on a defined timestamp: in renderMessage you can specify the timestamp of the message, so will be rendered in the correct cronological history, but in renderAttachments method I cannot find the same way.

Any suggestions?
Greetings,
Mattia Thiella

Chat

answered on 22 Oct 2018

1 answer

149 views

evaluating Kendo

Hi..

How to set multiline in a text message?

I have some texts as below:

Hello this is 1st message.
Hello this is 2nd message.
Hello this is 3rd message.

it shows on fulfillmentMessages like below:

Hello this is 1st message. Hello this is 2nd message. Hello this is 3rd message.

2. How to show youtube channel in a carousel?

3. openUrl type in suggestionActions not working, below is the json format:

          "suggestedActions": [
            [
              {
                "type": "openUrl",
                "title": "Human Resource",
                "value": "https://youtu.be/FAioXDmZ99E"
              },
              {
                "type": "openUrl",
                "title": "Tour & Travel",
                "value": "https://youtu.be/K1BFaw99vkc"
              },
3. For multiple messages, we expect the chatbot's image on the first of message (see enclosed image, expecting location is on green cicle).
4. how to show typing indicator?

please help ..

thanks a lot

Win

Chat

answered on 06 Sep 2018

2 answers

83 views

Problem with AttachmentLayout

Hi, I'm working with DialogFlow and Kendo UI for JQuery and ASP.NET to build a chatbot. I have an issue with the RenderAttachment method. No matter what value (carousel or list or anything else) I give to the AttachmentLayout parameter, the messages are displayed with a list format (Vertical aligned). Is it normal? If not, please can ou help me?

encl: my code

Chat

answered on 21 Aug 2018

1 answer

185 views

Hero card

Hi,

I tried the examples from your site, just by replacing the directlinekey for the microsoft chatbot with my own key.

At first sight, everything seems to work just fine.

But the Kendo chat script throws exceptions when my bot sends it Thumbnail or Video cards.

ReferenceError: timestamp is not defined Stack trace: anonymous@https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js line 25 > Function:3:66 _renderTemplate@https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js:38:8446 renderAttachments@https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js:38:7085 renderAttachments@https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js:38:13896 renderAttachments@https://runner.telerik.io/result:80:7 onResponse@https://runner.telerik.io/result:67:7 d@https://code.jquery.com/jquery-1.12.4.min.js:2:3854 h</e.prototype.__tryOrUnsub@https://unpkg.com/botframework-directlinejs/directLine.js:1:5125 h</e.prototype.next@https://unpkg.com/botframework-directlinejs/directLine.js:1:4400 a</e.prototype._next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3442 a</e.prototype.next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3125 a</e.prototype._next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3442 a</e.prototype.next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3125 p</e.prototype.next@https://unpkg.com/botframework-directlinejs/directLine.js:1:9074 a</e.prototype._next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3442 a</e.prototype.next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3125 u</e.prototype.notifyNext@https://unpkg.com/botframework-directlinejs/directLine.js:2:23811 i</e.prototype._next@https://unpkg.com/botframework-directlinejs/directLine.js:1:29450 a</e.prototype.next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3125 n@https://unpkg.com/botframework-directlinejs/directLine.js:1:11531 u</e.prototype._innerSub@https://unpkg.com/botframework-directlinejs/directLine.js:2:23554 u</e.prototype._tryNext@https://unpkg.com/botframework-directlinejs/directLine.js:2:23484 u</e.prototype._next@https://unpkg.com/botframework-directlinejs/directLine.js:2:23307 a</e.prototype.next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3125 u</e.prototype.notifyNext@https://unpkg.com/botframework-directlinejs/directLine.js:2:23811 i</e.prototype._next@https://unpkg.com/botframework-directlinejs/directLine.js:1:29450 a</e.prototype.next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3125 a</e.prototype._next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3442 a</e.prototype.next@https://unpkg.com/botframework-directlinejs/directLine.js:1:3125 d</t.prototype.observableWebSocket/</n.onmessage@https://unpkg.com/botframework-directlinejs/directLine.js:1:27613

Does this mean only Hero cards are supported?

Chat

answered on 29 May 2018

3 answers

228 views

Bot typing enhancement

Hello,

First of all thank you for implementing this control!

I'm doing some tests to see how it works, etc. and I'm facing the next issue. I think right now the control is lacking some kind of natural behavior. Maybe not everyone may want this, but I think some of us would like to have the feeling that we're talking somehow to a person instead of a bot.

I've modified your code in the demos for the function renderMessages to give it a more natural feeling:

renderMessages: function (messages) {

var that = this;

var msg = messages;

function renderWithDelay() {

var message = msg[0];

switch (message.type) {

case 0:

that.chat.renderMessage({ type: "text", text: message.speech, timestamp: that._timestamp }, that.userInfo);

break;

case 2:

that.renderSuggestedActions(message.replies.map(function (reply) { return { title: reply, value: reply }; }));

break;

default:

}

msg.splice(0, 1);

if (msg.length > 0) {

var newMessage = msg[0];

if (message.type == 0) setTimeout(renderWithDelay, newMessage.speech.length * 12);

else renderWithDelay();

}

renderWithDelay();

}

However to really achieve this natural feeling when talking to the bot, I think it would be really useful to have an option, that could accept a boolean or JSON object, that would work as follows:

a) If it is a boolean and it is true, on the delay it will show a bubble saying that "Bot name is typing..."

b) If it is a JSON object, would work as if true, and let the user enter the message to appear in the bubble

Thank you!

Chat