Explorer le composant Blazor Chat

Besoin d’intégrer une fonctionnalité de chat dans une application basée sur Blazor ? L’interface utilisateur Telerik pour Blazor Chat est peut-être le composant qu’il vous faut !

À une époque où offrir la meilleure expérience Web grâce à une attention immédiate à l’aide de conversations de chat, que ce soit en utilisant des agents d’IA ou des technologies similaires, il devient indispensable de disposer de composants robustes et fiables permettant la création d’applications basées sur le chat. C’est l’objectif de l’interface utilisateur Progress Telerik pour Composant Blazor Chatque nous explorerons tout au long de cet article.

Premiers pas avec le composant Blazor Chat

Pour utiliser le composant Chat pour Blazor, vous devez suivre les guide d’installation et de configuration pour Telerik UI pour les composants Blazor de votre projet afin de l’utiliser sans aucun problème.

Ensuite, vous devez disposer d’un modèle qui représente un message de discussion dans votre application. Si vous n’avez pas encore de modèle de chat dans votre application, vous pouvez utiliser le modèle suivant comme base :

public class ChatMessage
{
    public string Id { get; set; }
    public string AuthorId { get; set; }
    public string AuthorName { get; set; }
    public string AuthorImageUrl { get; set; }
    public string Text { get; set; }
    public string MessageToReplyId { get; set; }
    public string Status { get; set; }
    public bool IsDeleted { get; set; }
    public bool IsPinned { get; set; }
    public DateTime Timestamp { get; set; }
    public List<string> SuggestedActions { get; set; }
    public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>();
}

Les noms des propriétés précédentes sont les valeurs par défaut pour le mappage aux paramètres du composant, ce qui signifie que si vous ne les modifiez pas, le composant liera automatiquement la valeur de chaque propriété à son paramètre correspondant.

Une fois le modèle de message de chat prêt, l’étape suivante consiste à définir le TelerikChat composant en affectant au minimum les paramètres suivants :

• Data: Liste des messages de chat qui permettront de suivre l’historique des messages
• AuthorId: L’ID de l’auteur actuel du chat
• OnSendMessage: Rappel déclenché lorsqu’un message est envoyé

Maintenant que vous savez ce qui précède, il est temps d’utiliser le TelerikChat composant, ce que nous ferons comme suit :

<TelerikChat Data="@Msgs" 
             OnSendMessage="@OnSend"             
             AuthorId="u1"/>

@code {
    private string Me = "u1";
    private List<ChatMessage> Msgs = new()
    {
        new() 
        { 
            Id="1",
            AuthorId = "bot",
            Content="Hi! How can I help you?",
            Timestamp=DateTime.Now 
        }        
    };

    private void OnSend(ChatSendMessageEventArgs e)
    {
        Msgs.Add(new ChatMessage 
            { 
                Id = Guid.NewGuid().ToString(),
                AuthorId = Me,
                Content = e.Message,
                Timestamp = DateTime.Now 
            });
    }
}

Dans le code ci-dessus, une liste générique de type ChatMessage est créé, auquel un message par défaut est ajouté pour représenter le message d’accueil initial. De plus, la méthode OnSend a été créé, qui sera déclenché à chaque fois qu’un message de discussion est envoyé, ajoutant ce message à la liste des messages de discussion, ce qui entraîne ce qui suit :

Maintenant, peut-être que dans votre application vous disposez déjà d’un modèle avec des propriétés similaires mais avec des noms différents de ceux par défaut ; par exemple, celui nommé Content qui représente le texte dans le message de discussion. Dans ce cas, il suffirait d’attribuer la valeur de votre propriété alternative au paramètre qui vous intéresse, comme le montre l’exemple suivant :

<TelerikChat Data="@Msgs" 
             OnSendMessage="@OnSend"
             TextField="Content"
             AuthorId="User1"/>

Ajout d’actions rapides

Ce qui peut être très utile pour les utilisateurs est de leur fournir des idées de messages avec lesquels ils peuvent démarrer ou poursuivre une conversation, en plus de les utiliser pour exécuter des tâches rapidement.

Ceci est facile à mettre en œuvre grâce à Suggestions paramètre, auquel vous pouvez lier une liste avec un générique string qui inclut les suggestions recommandées. De même, le composant a le OnSuggestionClick paramètre, qui permet de gérer lorsqu’un utilisateur sélectionne l’une des suggestions. Vous trouverez ci-dessous un exemple d’ajout de suggestions :

<TelerikChat Suggestions="@Suggestions"
             OnSuggestionClick="HandleSuggestionClick".../>

@code {    
    private List<string> Suggestions = new List<string>
    {
        "Show me a quick dinner recipe",
        "Suggest a vegetarian dish",
        "Give me baking tips",
        "Create a shopping list"
    };
    ...

    private void HandleSuggestionClick(ChatSuggestionClickEventArgs args)
    {
        var responses = new Dictionary<string, string>
        {
            { "Show me a quick dinner recipe", "Here’s a simple pasta recipe you can make in 20 minutes." },
            { "Suggest a vegetarian dish", "How about a chickpea curry with rice?" },
            { "Give me baking tips", "Always preheat your oven and measure ingredients carefully." },
            { "Create a shopping list", "I’ve added basic ingredients like eggs, milk, and flour to your list." }
        };


        if (responses.TryGetValue(args.Suggestion, out string responseMessage))
        {
            Msgs.Add(new ChatMessage
            {
                Id = Guid.NewGuid().ToString(),
                AuthorId = "bot",
                AuthorName = "Bot Doe",
                Text = responseMessage,
                Status = "Sent",
                Timestamp = DateTime.Now
            });
        }
    }
    ...
}

Dans le code précédent, j’ai créé la propriété Suggestionslié au paramètre du même nom dans le composant, en plus de la méthode HandleSuggestionClickqui est lié au OnSuggestionClick paramètre. Dans le gestionnaire, j’ai créé un dictionnaire qui a la suggestion comme clé et une réponse statique comme valeur, qui est utilisée pour créer un nouveau message dans l’historique des discussions.

Travailler avec des actions dans les messages de discussion

En plus de pouvoir ajouter des actions rapides au niveau de la conversation, il est également possible d’ajouter des actions rapides sur les messages de chat qui apparaissent lorsqu’un utilisateur fait un clic droit sur l’un d’eux. Par exemple, certaines actions courantes consistent à répondre à un message, à copier le message, etc.

Dans ces cas, nous pouvons utiliser le contenu enfant ChatMessageContextMenuActionsoù il faut définir l’ensemble des actions de type ChatMessageContextMenuAction qui nécessitent un Name, Text, Icon et événement OnClick. Vous trouverez ci-dessous un exemple de ce qui précède :

@page "https://www.telerik.com/"
@inject IJSRuntime JS

<TelerikChat ...>
        <ChatMessageContextMenuActions>            
            <ChatMessageContextMenuAction Name="Copy" Text="Copy" Icon="@SvgIcon.Copy" OnClick="@OnCopyClick" />            
        </ChatMessageContextMenuActions>
</TelerikChat>

@code {

    private async Task OnCopyClick(ChatMessageActionClickEventArgs args)
    {
        var message = Msgs.FirstOrDefault(m => m.Id == args.MessageId);
        if (message != null)
        {            
            await JS.InvokeVoidAsync("navigator.clipboard.writeText", message.Text);
        }
    }
    ...
}

Dans le code ci-dessus, j’ai créé une action contextuelle pour un message de discussion qui permet de copier son contenu. Le résultat est le suivant :

Un autre type d’action rapide que nous pouvons mettre en œuvre est celle qui apparaît lorsque l’utilisateur sélectionne ou survole un message. Ceci peut être réalisé grâce à l’utilisation de contenu enfant ChatMessageToolbarActions et avec un ensemble de ChatMessageToolbarAction à l’intérieur, en précisant le Name, Text, Icon et événement OnClick.

Voici un exemple de son utilisation :

<TelerikChat ...>        
        <ChatMessageToolbarActions>
        <ChatMessageToolbarAction Name="Pin" Text="Pin" Icon="@SvgIcon.Pin" OnClick="PinMessage" />
        </ChatMessageToolbarActions>
        ...
</TelerikChat>

@code {

    private void PinMessage(ChatMessageActionClickEventArgs args)
    {
        var message = Msgs.FirstOrDefault(m => m.Id == args.MessageId);
        if (message != null)
        {
            Msgs.ForEach(m => m.IsPinned = false);
            message.IsPinned = true;
        }
    }
}

Voici à quoi ressemble l’application avec le code ci-dessus implémenté :

Configuration du chat pour les téléchargements de fichiers

Le composant Telerik Chat pour Blazor permet également d’activer le téléchargement de fichiers en attribuant une valeur true au EnableFileUpload paramètre. D’autres paramètres configurables pour les fichiers téléchargés sont AllowedExtensions, MaxFileSize, Multipleet OnSelectqui doit être configuré à l’aide du ChatSettings balise et dans une autre balise de type ChatFileSelectSettings comme suit:

<TelerikChat EnableFileUpload="true"...>
    <ChatSettings>
        <ChatFileSelectSettings AllowedExtensions="@AllowedExtensions"
                                MaxFileSize="10485760"
                                Multiple="true" />
    </ChatSettings>
    ...
</TelerikChat>

@code {

    private List<string> AllowedExtensions = new List<string> { ".jpg", ".jpeg", ".png", ".pdf", ".docx", ".txt" };
}

Avec ce changement, vous remarquerez l’apparition d’un nouveau bouton permettant de joindre des documents à une conversation :

Ce que vous devez garder à l’esprit est que la démo a fonctionné sans problème car au début de cet article, je vous ai montré comment créer le modèle. ChatMessagequi contient la propriété Attachments c’est en fait une liste générique de types FileSelectFileInfodéfinissant des métadonnées telles que le nom, la taille, l’extension, etc.

De même, si vous souhaitez récupérer les documents joints lors de l’envoi de messages pour enregistrer leurs informations sur votre serveur ou quelque chose de similaire, vous pouvez le faire en accédant à la propriété Files du rappel OnSendMessage:

private void OnSend(ChatSendMessageEventArgs e)
{
    Msgs.Add(...);
    var attached = e.Files;
}

Utilisation de modèles LLM et mise à jour de l’interface

L’une des raisons pour lesquelles vous pouvez utiliser le composant Chat pour Blazor est d’intégrer un modèle d’IA sur votre site Web pour répondre aux requêtes courantes des utilisateurs sur vos services, se renseigner sur les produits sur votre portail, etc. Pour y parvenir, vous devez d’abord configurer votre projet pour interagir avec un LLM. Dans mon exemple, j’utiliserai Microsoft.Extensions.IA pour rendre les choses plus faciles.

Ensuite, sur la page où vous utilisez le composant de chat, vous devez gérer le rappel OnSendMessage en suivant ces étapes :

1. Ajoutez le message de l’utilisateur à la liste des messages.
2. Créez un nouveau message avec un AuthorId représentant la réponse du LLM et ajoutez-la à la liste des messages.
3. Créer un ChatMessage de la propriété Message.
4. Diffusez la réponse à la propriété content (par défaut Text).
5. Mettez à jour le composant Chat à mesure que de nouvelles informations sont reçues.

Vous pouvez voir les étapes précédentes implémentées dans le code suivant :

<TelerikChat @ref="@AIChat">
        ...
</TelerikChat>
@code {

    private TelerikChat<TelerikChatMessage>? AIChat;
    private async Task OnSend(ChatSendMessageEventArgs e)
    {
        Msgs.Add(new TelerikChatMessage 
            { 
                Id = Guid.NewGuid().ToString(),
                AuthorId = Me,
                Text = e.Message,
                Timestamp = DateTime.Now,
                Status = "Sent"
            });

        var response = new TelerikChatMessage()
        {
            Id = Guid.NewGuid().ToString(),
            AuthorId = "bot",
            AuthorName = "Bot Doe",
            AuthorImageUrl = "https://demos.telerik.com/blazor-ui/images/devcraft-ninja-small.svg",
            Timestamp = DateTime.Now,
            Status = "Sent"
        };

        Msgs.Add(response);

        var chatMessage = new Microsoft.Extensions.AI.ChatMessage(ChatRole.User, e.Message);

        var fullResponse = string.Empty;
        await foreach (var answer in ChatClient.GetStreamingResponseAsync(chatMessage))
        {
            fullResponse += answer.Text;
            response.Text = fullResponse;
            AIChat?.Refresh();
        }

    }
}

Il y a quelques choses que je voudrais souligner dans le code précédent.

Premièrement, la méthode Microsoft.Extensions.AI.ChatMessage vous permet de créer rapidement un message de discussion.

De plus, vous avez peut-être remarqué que j’ai ajouté une référence au composant Chat à utiliser à partir du code C#. J’ai fait cela car il y aura des moments où vous devrez mettre à jour le composant de discussion, ce que vous pouvez faire via la méthode Refresh. Si je ne l’utilisais pas dans cet exemple, l’interface ne serait pas mise à jour tant que la réponse complète du modèle d’IA n’aurait pas été reçue, même si nous effectuons une réponse en continu. Avec Refreshnous mettons à jour les modifications dès leur arrivée.

Conclusion

Tout au long de cet article, vous avez découvert le composant Telerik UI pour Blazor Chat, ainsi que ses principales fonctionnalités d’utilisation pour les développeurs.

Si vous envisagez d’intégrer une fonctionnalité de chat dans n’importe quelle application basée sur Blazor, c’est sans aucun doute le composant qu’il vous faut, car il est livré avec une grande variété de paramètres configurables, allant des propriétés communes dans les conversations de chat aux options d’action rapide faciles à configurer.

Nouveau sur l’interface utilisateur Telerik pour Blazor ? Essayez-le gratuitement pendant 30 jours !

Commencer