Construire une interface de chat avec Kendoreact – Partie 1

Du support client aux outils collaboratifs, les interfaces de chat sont essentielles à UX. Explorez comment le composant de chat Kendoreact simplifie l’ajout de chat aux applications React.

Les applications modernes présentent fréquemment des interfaces de chat pour améliorer la communication entre les utilisateurs – ou avec les bots. Des chatbots de support client aux outils collaboratifs et aux plateformes sociales, ces interfaces sont importantes pour offrir des expériences utilisateur engageantes et interactives.

Dans l’article d’aujourd’hui, nous explorerons le processus de création d’une interface de chat robuste à l’aide du Composant de chat React de progrès Kendoreact. Que vous soyez nouveau dans la construction d’interfaces de chat ou que vous cherchiez à mettre en œuvre des fonctionnalités plus avancées, cet article vous aidera à comprendre comment Kendoreact rend ce processus facile.

Le composant de chat Kendoreact

Le composant de chat Kendoreact simplifie la création de sessions de chat et fait partie du kendoreact Package d’interface utilisateur conversationnel. Il prend en charge les conversations en temps réel avec des fonctionnalités telles que des actions rapides, des pièces jointes et des messages personnalisables, permettant aux développeurs de fournir des expériences de chat riches et engageantes. Comme tous les composants de Kendoreact, il est construit avec l’accessibilité à l’esprit.

Le composant React Chat est distribué via le @ Progress / kendo-react-conversation-UI package et peut être importé directement:

import { Chat } from "@progress/kendo-react-conversational-ui";

Avec le composant de chat disponible, voici comment créer une interface de chat simple:

import React, { useState } from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";

const user = {
  id: 1,
  avatarUrl:
    "https://demos.telerik.com/kendo-react-ui/assets/dropdowns/contacts/RICSU.jpg",
  avatarAltText: "User Avatar",
};

const bot = { id: 0 };

const initialMessages = [
  {
    author: bot,
    text: "Hello! I'm your assistant bot. How can I help you today?",
    timestamp: new Date(),
  },
];

const App = () => {
  const [messages, setMessages] = useState(initialMessages);

  const addNewMessage = (event) => {
    const userMessage = event.message;
    const botResponse = {
      author: bot,
      text: `You said: "${userMessage.text}"`,
      timestamp: new Date(),
    };

    setMessages([...messages, userMessage]);
    setTimeout(() => setMessages((prev) => [...prev, botResponse]), 1000);
  };

  return (
    <Chat
      user={user}
      messages={messages}
      onMessageSend={addNewMessage}
      placeholder="Type your message..."
      width={400}
    />
  );
};

export default App;

L’exemple ci-dessus met en place une interface de chat simple à l’aide du composant de chat, où les messages sont gérés via l’état. Les entrées de l’utilisateur déclenchent une fonction pour afficher le message de l’utilisateur et une réponse BOT retardée. Lors de l’exécution de ce qui précède, nous verrons une interface de chat de base où le bot répond dynamiquement aux messages utilisateur. Messages que l’utilisateur envoie apparaît à droite, tandis que ceux du bot sont affichés à gauche.

Remarque: les réponses BOT ici sont statiques. Pour une expérience plus dynamique, nous pourrions intégrer des API externes pour fournir des réponses au contexte. Restez à l’écoute pour un prochain article sur l’amélioration de cette fonctionnalité de chatbot!

Alors que la configuration de base fonctionne bien pour des cas d’utilisation simples, le kendoreact UI conversationnel Le package offre des fonctionnalités supplémentaires pour améliorer la fonctionnalité et l’expérience utilisateur. Nous en discuterons ci-dessous.

Modèles de messages

Modèles de messages Permettez-nous de styliser les messages de manière unique, en ajoutant une marque ou une mise en forme spécifique. Cela peut être fait en personnalisant le messageTemplate propriété.

import React, { useState } from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";

const user = {
  id: 1,
  avatarUrl:
    "https://demos.telerik.com/kendo-react-ui/assets/dropdowns/contacts/RICSU.jpg",
  avatarAltText: "User Avatar",
};

const bot = { id: 0 };

const initialMessages = [
  {
    author: bot,
    text: "Hello! I'm your assistant bot. How can I help you today?",
    timestamp: new Date(),
  },
];

const App = () => {
  const [messages, setMessages] = useState(initialMessages);
  const addNewMessage = (event) => {
    
  };

  const CustomMessageTemplate = (props) => (
    <div className="k-chat-bubble">
      <strong>{props.item.author.id === user.id ? "You:" : "Bot:"}</strong>
      <p>{props.item.text}</p>
    </div>
  );

  return (
    <Chat
      user={user}
      messages={messages}
      onMessageSend={addNewMessage}
      messageTemplate={CustomMessageTemplate}
      placeholder="Type your message..."
      width={400}
    />
  );
};

export default App;

Avec l’exemple ci-dessus, le modèle de message nouvellement ajouté ajoute des étiquettes comme "You:" ou "Bot:" Avant les messages.

Ajouter des actions suggérées

Actions suggérées Simplifiez les interactions utilisateur en fournissant des options prédéfinies pour les réponses ou les actions. Nous pouvons ajouter ces actions suggérées en utilisant le suggestedActions champ d’un objet de message.

import React, { useState } from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";

const user = {
  id: 1,
  avatarUrl:
    "https://demos.telerik.com/kendo-react-ui/assets/dropdowns/contacts/RICSU.jpg",
  avatarAltText: "User Avatar",
};

const bot = { id: 0 };

const initialMessages = [
  {
    author: bot,
    text: "How can I assist you?",
    suggestedActions: [
      { type: "reply", value: "Tell me a joke" },
      { type: "reply", value: "What’s the weather?" },
    ],
  },
];

const App = () => {
  const [messages, setMessages] = useState(initialMessages);
  const addNewMessage = (event) => {
    
  };

  const onActionExecute = (event) => {
    const action = event.action.value;
    const botResponse = {
      author: bot,
      text: `You selected: "${action}"`,
      timestamp: new Date(),
    };
    setMessages([...messages, botResponse]);
  };

  return (
    <Chat
      user={user}
      messages={messages}
      onMessageSend={addNewMessage}
      onActionExecute={onActionExecute}
      placeholder="Type your message..."
      width={400}
    />
  );
};
export default App;

Avec le changement ci-dessus, les actions suggérées de «Dis-moi une blague» et «Quelle est la météo?» sont maintenant présentés à l’utilisateur juste après le message initial de «Comment puis-je vous aider?» Lorsque l’utilisateur clique sur l’une de ces actions, il devient un message de réponse.

Intégration des pièces jointes

Les pièces jointes améliorent le chat Les conversations en permettant au contenu multimédia, telles que des images, des vidéos ou un contexte supplémentaire, à inclure avec les messages. Par défaut, le composant de chat Kendoreact affiche les pièces jointes en tant que carrousel ou jeu de carte sous le message. En utilisant le attachmentLayout Propriété, nous pouvons également passer à une disposition de liste.

import * as React from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";

const user = {
  id: 1,
  name: "John",
};

const bot = {
  id: 0,
};

const attachments = [
  {
    content: "The Westin Copley Place, Boston",
    contentType: "hotel",
  },
  {
    content: "Boston Park Plaza",
    contentType: "hotel",
  },
  {
    content: "Sheraton Boston Hotel",
    contentType: "hotel",
  },
  {
    content: "InterContinental Boston",
    contentType: "hotel",
  },
];

const initialMessages = [
  {
    author: bot,
    text: "A message with attachments carousel",
    attachments: attachments,
  },
  {
    author: bot,
    text: "A message with attachments list",
    attachmentLayout: "list",
    attachments: attachments,
  },
];

const App = () => {
  const [messages] = React.useState(initialMessages);

  return (
    <div>
      <Chat
        user={user}
        messages={messages}
        width={400}
        placeholder={"Type a message..."}
      />
    </div>
  );
};

export default App;

Dans l’exemple ci-dessus, les dispositions de carrousel et de liste sont présentées l’une après l’autre.

Barre d’outils

Le barre d’outils du composant de chat Kendoreact nous permet d’ajouter des actions interactives en fournissant une zone où nous pouvons inclure des boutons ou d’autres éléments d’interface utilisateur. Vous trouverez ci-dessous un exemple d’implémentation d’une barre d’outils pour télécharger des pièces jointes comme des fichiers, des images ou des documents:

import * as React from "react";
import { Chat } from "@progress/kendo-react-conversational-ui";
import { Button } from "@progress/kendo-react-buttons";
import { imageAddIcon } from "@progress/kendo-svg-icons";

const AttachmentTemplate = (props) => {
  const attachment = props.item;
  return (
    <div className="k-card k-card-type-rich">
      <div className="k-card-body quoteCard">
        <img
          style={{ maxHeight: "120px" }}
          src={attachment.content}
          alt="attachment"
          draggable={false}
        />
      </div>
    </div>
  );
};

const user = {
  id: 1,
  avatarUrl:
    "https://demos.telerik.com/kendo-react-ui/assets/dropdowns/contacts/RICSU.jpg",
  avatarAltText: "KendoReact Conversational UI RICSU",
};

const App = () => {
  const fileUpload = React.createRef();
  const [showToolbar, setShowToolbar] = React.useState(false);
  const [messages, setMessages] = React.useState([]);

  const handleInputChange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onloadend = (event) => {
      const message = {
        author: user,
        text: "",
        attachments: [
          {
            content: event.target ? event.target.result : "",
            contentType: "image/",
          },
        ],
      };

      setShowToolbar(false);
      setMessages([...messages, message]);
    };

    reader.readAsDataURL(file);
  };

  const Toolbar = () => (
    <span>
      <input
        type="file"
        onChange={handleInputChange}
        style={{ display: "none" }}
        ref={fileUpload}
      />
      <Button
        themeColor="base"
        fillMode="flat"
        svgIcon={imageAddIcon}
        rounded="medium"
        onClick={() => fileUpload.current.click()}
      />
    </span>
  );

  const addNewMessage = (event) => {
    setMessages([...messages, event.message]);
  };

  return (
    <div>
      <Chat
        user={user}
        messages={messages}
        onMessageSend={addNewMessage}
        placeholder="Type a message..."
        width={400}
        attachmentTemplate={AttachmentTemplate}
        showToolbar={showToolbar}
        onToolbarActionExecute={() => setShowToolbar(!showToolbar)}
        toolbar={<Toolbar />}
      />
    </div>
  );
};

export default App;

Avec ce qui précède, un composant de barre d’outils personnalisé est créé, permettant aux utilisateurs de télécharger des pièces jointes. Le Composant du bouton de réaction Le composant de Kendoreact fournit l’interface utilisateur pour déclencher le téléchargement de fichiers. Lorsqu’un fichier est sélectionné, il est lu et ajouté au chat comme pièce jointe, rendu à l’aide du AttachmentTemplate composant.

Conclure

Le composant de chat Kendoreact rationalise le processus de création d’interfaces de chat, offrant des fonctionnalités telles que des réponses dynamiques, des modèles, des actions rapides, des pièces jointes et des barres d’outils pour améliorer les interactions utilisateur. Sa fonctionnalité simplifie considérablement la création d’expériences de chat engageantes et interactives.

Dans notre prochain article, nous examinerons comment l’IA peut être intégré pour fournir des réponses de bot plus intelligentes et plus interactives. Pour plus d’informations sur le Composant de chat Kendoreact, visitez la documentation officielle! Et si vous ne vous êtes pas déjà inscrit, commencez votre essai gratuit aujourd’hui!

Essayez Kendoreact