Custom message

1 Answer 78 Views
Chat (Conversational UI)
Rodrigo
Top achievements
Rank 1
Iron
Iron
Iron
Rodrigo asked on 06 Mar 2024, 06:55 PM

Hi!

Can I send a custom message in this format?

Regards,

Rodrigo.

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 07 Mar 2024, 09:04 AM

Hi Rodrigo,

Through the ItemTemplateSelector property of the Chat control you can define separate custom templates with any content you'd need and return the required template according to some custom logic.

Please take a look at the following example in our documentation: Chat: Custom Item Template Selector - in the sample use case there is an ImportantMessageTemplate which is returned when the message is marked as important ( custom property of the ChatItem class), in all other cases the default template according to the message type (incoming, outgoing) is returned.

Give this a try and let me know if you have any difficulties or questions related to the approach.

Regards,
Yana
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.

Rodrigo
Top achievements
Rank 1
Iron
Iron
Iron
commented on 07 Mar 2024, 01:03 PM

Hi Yana!

How do I do the "new SuggestedActionsItem()" be of type SimpleChat Item?
Do I need to create another class? Do you have any example? 

Regards,

Rodrigo.

Yana
Telerik team
commented on 07 Mar 2024, 09:49 PM

Hi Rodrigo,

In the example I referred to in my previous reply, the SimpleChatItem is a custom class which contains information on the chat messages, and through the SimpleChatItemConverter (of type IChatItemConverter) these custom messages are converted into the type the Chat can work with, in the concrete example they are converted to Telerik.Maui.Controls.Chat.TextMessage objects.

Telerik.Maui.Controls.Chat.SuggestedActionsItem is another ChatItem type the Chat control can work with, so according to your custom class (SimpleChatItem) in the converter you can create SuggestedActionsItem objects as well.

I do not have exactly such an example at hand, still, you just need to modify the SimpleChatItemConverter to return other types of Chat items as well.  Give this a try and if you have any difficulties, send me the current implementation you have, so I can take a look.

I hope this would help.  If you

Rodrigo
Top achievements
Rank 1
Iron
Iron
Iron
commented on 11 Mar 2024, 03:54 PM

Hi Yana!

I added the sample I'm using in the test.
Can you help me with the suggestion and the ImportantMessageTemplate item that is not working!

Regards,

Rodrigo.

Yana
Telerik team
commented on 12 Mar 2024, 11:38 AM

Hi Rodrigo,

 Thank you for sending the app.

First, you'd need to define the CustomChatItemTemplateSelector in the ContentPage.Resources in order to apply it to the ItemTemplateSelector property of the Chat control:

<local:CustomChatItemTemplateSelector x:Key="CustomChatItemTemplateSelector"
                                      ImportantMessageTemplate="{StaticResource ImportantMessageTemplate}" />

In addition, the controls inside the ImportantMessageTemplate should be rearranged, as these columns go one over the other due to the ColumnSpan setting.

As to the SuggestedActionsItem - if you stay with this approach, you'd need to add the information inside the custom SimpleChatItem class and convert it to SuggestedActionsItem in the SimpleChatItemConverter.

I'm going to suggest a simpler approach - instead of using custom class, go with the ChatItem class. TextMessage is a type of ChatItem and provides Data property which can be used to pass additional information. Through the Data property you can pass the MessageCategory.

In this way, you can directly add SuggestedActionItem to the Items collection as it inherits from the ChatItem as well.

I've attached the updated app, please download it and give it a try. Let me know how it goes.

Tags
Chat (Conversational UI)
Asked by
Rodrigo
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Yana
Telerik team
Share this question
or