Fermer

novembre 18, 2024

Créez un chat multi-conversation avec l’interface utilisateur et les signaux Kendo

Créez un chat multi-conversation avec l’interface utilisateur et les signaux Kendo


Lorsque nous devons créer une discussion, la gestion manuelle de plusieurs discussions peut s’avérer fastidieuse, notamment l’ajout de fonctionnalités telles que l’édition, la suppression et la mise en favoris. Découvrez comment procéder en utilisant Kendo UI pour Angular avec des signaux angulaires.

De nos jours, avec la course à l’IA, les entreprises souhaitent construire un chatbot comme Gemini ou ChatGPT. Et les utilisateurs ne veulent pas seulement discuter : ils veulent aussi conserver leurs conversations, les organiser, les hiérarchiser et revenir aux conversations précédentes.

En tant que développeurs, nous devons livrer rapidement pour être compétitifs sur le marché, mais lorsque l’équipe marketing souhaite créer un MVP couvrant ces fonctionnalités, ce n’est pas toujours facile. Nous devons créer des composants comme le chat, des listes qui permettent l’édition, déclenchent des actions, le tout en un rien de temps. Après m’être senti dépassé par la quantité de travail, j’ai une bonne nouvelle pour vous. Progrès Interface utilisateur Kendo pour angulaire propose un ensemble de composants qui peuvent vous aider à réaliser votre projet plus rapidement et avec une excellente interface utilisateur.

Aujourd’hui, nous allons apprendre à créer facilement un chat multi-conversations avec Interface utilisateur Kendo pour interface utilisateur conversationnelle angulaire + Vue de liste angulaire. En les combinant avec la puissance de Signaux angulairesnous pouvons créer une discussion avec plusieurs conversations et permettre aux utilisateurs de sélectionner, modifier, supprimer, marquer comme favori, démarrer de nouvelles discussions et conserver l’historique de nos conversations en un rien de temps.

Commençons !

Mise en place du projet

J’utiliserai la dernière version d’Angular. Le moyen le plus simple de configurer le projet consiste à exécuter la commande suivante dans le terminal. Répondez aux questions par défaut :

npx -p @angular/cli ng new conversation-chat
? Which stylesheet format would you like to use? CSS
Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? no

Après cela, nous ajouterons Conversational UI et ListView pour Angular dans notre projet.

Déplacer vers le dossier du projet cd conversation-chat et installez le Kendo UI pour l’interface utilisateur conversationnelle angulaire en utilisant des schémas en exécutant :

ng add @progress/kendo-angular-conversational-ui
 Searching for compatible package version
  › Found compatible package version: @progress/kendo-angular-conversational-ui@16.10.0.
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
UPDATE package.json (1666 bytes)
UPDATE angular.json (2865 bytes)
✔ Packages installed successfully.
UPDATE src/main.ts (295 bytes)
UPDATE tsconfig.app.json (455 bytes)
UPDATE tsconfig.spec.json (461 bytes)
UPDATE angular.json (2945 bytes)

Après avoir terminé, installez le Vue de liste angulaire en utilisant des schémas avec une commande similaire :

ng add @progress/kendo-angular-listview
✔ Determining Package Manager
  › Using package manager: npm
✔ Searching for compatible package version
  › Found compatible package version: @progress/kendo-angular-listview@16.10.0.
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
            @progress/kendo-theme-default already installed, skipping styles registration.
UPDATE package.json (1911 bytes)
✔ Packages installed successfully.

Si vous n’êtes pas déjà client de Kendo UI pour Angular, vous pouvez obtenir un licence d’essai gratuit pendant 30 jours.

Maintenant que nous avons nos composants Kendo UI, nous devons créer un ensemble d’interfaces et de données fictives. Allons-y!

Créer des entités de conversation et des données simulées

Tout d’abord, nous devons définir la structure de nos conversations et initialiser des données fictives. Chaque conversation aura un identifiant, un nom, un statut favori et un ensemble de messages, mais nous n’avons pas besoin de tout construire à partir de zéro. Nous pouvons profiter de Kendo UI, qui nous propose un ensemble de types pour nous faciliter la vie.

Créer le src/entities/chat-entities.ts déposer. Dans celui-ci, définissez le type de nos conversations : id, name et fav. Pour le Message et Usernous ne créerons pas de nouveau type ; Conversational UI fournit le Message et User types, ce qui nous fait gagner du temps.

Ouvrez le src/entities/chat-entities.tsimportez le message et l’utilisateur depuis @progress/kendo-angular-conversational-ui et créez le type ChatConversation:

import { Message, User } from '@progress/kendo-angular-conversational-ui';

export type ChatConversation = {
  id: string;
  name: string;
  fav: boolean;
  active: boolean;
  messages: Array<Message>;
};

Dans notre projet, nous devons créer le initialConversation pour nos discussions.

export const initialConversation: ChatConversation = {
  id: crypto.randomUUID(),
  name: 'Initial conversation',
  messages: [],
  active: false,
  fav: false,
};

Nous allons créer deux variables, la defaultUser et AIBotavec le User interface:

export const defaultUser: User = {
  id: crypto.randomUUID(),
  name: 'Dany',
};

export const AIBot: User = {
  id: crypto.randomUUID(),
  name: 'Mandy AI',
};

Enfin, nous avons besoin d’une nouvelle conversation vide, mais sans nom ni identifiant, car nous allons créer une nouvelle conversation en utilisant Omit<ChatConversation, 'name' | 'id'>.

En savoir plus sur Types d’utilitaires Typescript.

export const firstAIInteraction: Omit<ChatConversation, 'name' | 'id'> = {
  active: true,
  messages: [
    {
      author: AIBot,
      text: 'Welcome to Kendo AI',
    },
  ],
  fav: false,
};

Le code final dans chat-entities.ts:

import { Message, User } from '@progress/kendo-angular-conversational-ui';

export type ChatConversation = {
  id: string;
  name: string;
  fav: boolean;
  active: boolean;
  messages: Array<Message>;
};

export const defaultUser: User = {
  id: crypto.randomUUID(),
  name: 'Dany',
};

export const AIBot: User = {
  id: crypto.randomUUID(),
  name: 'Mandy AI',
};

export const initialConversation: ChatConversation = {
  id: crypto.randomUUID(),
  name: 'Initial conversation',
  messages: [],
  active: false,
  fav: false,
};

export const firstAIInteraction: Omit<ChatConversation, 'name' | 'id'> = {
  active: true,
  messages: [
    {
      author: AIBot,
      text: 'Welcome to Kendo AI',
    },
  ],
  fav: false,
};

Gérer les états de conversation avec des signaux angulaires

Nous avons maintenant défini nos entités à utiliser dans notre application de chat. Passons maintenant à certains des éléments réactifs qui rassembleront les fonctionnalités.

Tout d’abord, ouvrez le app.component.ts. Là, déclarez un signal variable currentConversation de type ChatConversationet un signal tableau de ChatConversations pour représenter la liste des conversations et defaultUser.

  • defaultUser : l’utilisateur de nos chats, à utiliser dans le composant kendo-chat.
  • currentConversation : représente la conversation active.
  • Conversations : stocke toutes nos conversations avec nos messages.
  defaultUser = defaultUser;
  currentConversation = signal<ChatConversation>(initialConversation);
  conversations = signal<ChatConversation[]>([]);

Le code final ressemble à ceci dans app.component.ts déposer:

import { Component, signal } from '@angular/core';
import { ChatConversation } from '../entities/chat-entities';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  readonly defaultUser = defaultUser;
  currentConversation = signal<ChatConversation>(initialConversation);
  conversations = signal<ChatConversation[]>([]);
}

Dans le app.component.tsnous gérerons les actions qu’un utilisateur peut entreprendre : createNewConversation, updateConversation, delete et updateMessages.

Premièrement, la méthode createNewConversation(). Cela crée un newConversation objet. Pour gagner du temps, nous utilisons l’opérateur spread dans le firstAIInteractionmais en ajoutant les deux propriétés manquantes, le nom et l’identifiant, l’identifiant est généré par crypto.randomUUID.

createNewConversation() {
    const newConversation: ChatConversation = {
      ...firstAIInteraction,
      name: `New Chat ${this.conversations().length + 1}`,
      id: crypto.randomUUID(),
    };
}

Ensuite, mettez à jour le tableau de signaux de la conversation, ajoutez la nouvelle conversation et définissez-la comme conversation en cours.

this.conversations.update((currentItems) => [
      ...currentItems,
      newConversation,
    ]);

    this.currentConversation.set(newConversation);

Le code final ressemble à :

import { ChatConversation, defaultUser, firstAIInteraction, initialConversation } from '../entities/chat-entities';

…

 createNewConversation() {
    const newConversation: ChatConversation = {
      ...firstAIInteraction,
      name: `New Chat ${this.conversations().length + 1}`,
      id: crypto.randomUUID(),
    };

    this.conversations.update((currentItems) => [
      ...currentItems,
      newConversation,
    ]);

    this.currentConversation.set(newConversation);
  }

Ensuite, nous devons mettre à jour les signaux du tableau de conversation lorsque l’utilisateur y apporte des modifications. Créer une nouvelle méthode updateConversation:

updateConversation(conversation: ChatConversation) {
    this.conversations.update((currentItems) =>
      currentItems.map((p) => (p.id === conversation.id ? conversation : p)),
    );
  }

Appelons notre méthode de mise à jour de conversation et utilisons map pour parcourir les conversations, trouver celle que vous souhaitez mettre à jour et remplacer l’ancien objet par la conversation que vous avez transmise. Dans ce cas, je fais référence à notre ancienne conversation comme p.

Ensuite, lorsque l’utilisateur supprime une conversation, nous devons la supprimer du tableau de signaux de la conversation et réinitialiser la conversation actuelle à l’initiale, si elles sont identiques.

  deleteConversation(id: string) {
    this.conversations.update((conversations) =>
      conversations.filter((p) => p.id !== id),
    );

    if (id === this.currentConversation().id) {
      this.currentConversation.set(initialConversation);
    }
  }

Enfin, nous souhaitons écouter le nouveau message dans une conversation. Nous devons donc mettre à jour la conversation actuelle avec le message diffusé par le chat kendo et mettre à jour la conversation actuelle et le tableau des conversations.

import { SendMessageEvent } from '@progress/kendo-angular-conversational-ui';
…

  updateMessage($event: SendMessageEvent) {
    this.currentConversation.update((c) => ({
      ...c,
      messages: [...c.messages, $event.message],
    }));

    this.updateConversation(this.currentConversation());
  }

Nous avons l’état des conversations en cours et les méthodes pour gérer les actions de l’utilisateur, il est donc temps d’afficher la liste des conversations et de permettre à l’utilisateur d’y effectuer des actions. Pour ce faire, nous allons créer le ConversationList composant. Faisons-le.

La liste des conversations

Le ConversationListComponent pour gérer l’affichage de la liste des conversations qu’il modifie, supprime, épingle/désépingle et démarre de nouvelles conversations.

Créez d’abord le conversation-list composant utilisant la commande Angular/CLI :

ng g c components/conversation-list

Ouvrir conversation-list.component.ts. Ici, nous devons faire quelques choses et utiliser la magie de ListViewComponent.

Le ListViewComponent nous aide à afficher facilement une liste d’éléments. Et, en plus de cela, il fournit également un moyen simple de modifier des données, en combinant avec des formulaires angulaires (pilotés par des modèles et réactifs). Dans mon cas, je choisirai l’option basée sur un modèle, n’ayant besoin que d’écrire quelques lignes de code pour gérer les événements.

En savoir plus sur Vue de liste angulaire.

Modèle de signal

Tout d’abord, nous allons créer deux propriétés de modèle pour réagir automatiquement aux modifications lorsque conversations et conversationSelected changement et deux signaux de sortie, conversationUpdated et conversationDeleted.

conversations = model.required<ChatConversation[]>();
conversationSelected = model.required<ChatConversation>();
conversationUpdated = output<ChatConversation>();
conversationDeleted = output<string>();

En savoir plus sur Entrées du modèle de signaux.

Ensuite, déclarez deux variables pour l’état dans le conversation-list:

public editedConversation: ChatConversation | null = null;
public editedIndex: number | null = null;

Nous avons le premier élément, mais son événement et son état doivent être gérés dans notre code. Il est donc temps de gérer les événements.

En savoir plus sur Mode d’édition ListView.

Gérer les événements

Le KendoListView facilite la gestion de la conversation en fournissant kendoListViewEditTemplate, kendoListViewRemoveCommand et kendoListViewEditCommand directives pour gérer/modifier les modèles et supprimer des actions. Mais avant de connecter le Kendo ListView, nous devons d’abord écrire un peu de code.

  • editHandler: Lorsque l’utilisateur clique sur le bouton « Modifier » dans une conversation
  • gestionnaire de sauvegarde: Lorsque l’utilisateur clique sur « Enregistrer », nous émettons la conversation mise à jour vers le app.component et fermez l’éditeur.
  • gestionnaire d’annulation: Si l’utilisateur annule, nous annulons les modifications et fermons l’éditeur.
  • SupprimerGestionnaire: Lorsque l’utilisateur clique sur Supprimer, il émet l’ID de la conversation supprimée au app.component.ts.

Tout d’abord, nous créons deux actions clés, resetEdit pour restaurer le editedConversation et editedIndex lorsqu’un utilisateur effectue des actions, et cancelEdit avec cancelHandler.

private resetEdit() {
    this.editedConversation = null;
    this.editedIndex = null;
  }

 private closeEditor(sender: any, itemIndex = this.editedIndex) {
    sender.closeItem(itemIndex);
    this.resetEdit();
  }


editHandler({ sender, itemIndex, dataItem }: EditEvent) {
    this.closeEditor(sender);

    this.editedConversation = { ...dataItem };
    this.editedIndex = itemIndex;

    sender.editItem(itemIndex);
  }

cancelHandler({ sender, itemIndex }: CancelEvent) {
    this.closeEditor(sender, itemIndex);
  }

Il nous reste quatre actions utilisateur pour lesquelles nous devons utiliser nos signaux de sortie : enregistrer, supprimer, basculer et sélectionner.

Ajoutez deux gestionnaires pour saveHandler et onTogglePin et utiliser conversationUpdated.emit pour propager les changements.

saveHandler({ sender, itemIndex, dataItem }: SaveEvent) {
    sender.closeItem(itemIndex);
    this.resetEdit();
    this.conversationUpdated.emit(dataItem);
  }

  onTogglePin(dataItem: ChatConversation) {
    dataItem.fav = !dataItem.fav;
    this.conversationUpdated.emit(dataItem);
  }

Ajoutez enfin le removeHandle pour déclencher le conversationDeleted et mettre à jour le signal conversationSelected dans le onConversationSelected méthode.

 removeHandler({ dataItem }: RemoveEvent) {
    this.conversationDeleted.emit(dataItem.id);
  }

  onConversationSelect(dataItem: ChatConversation) {
    dataItem.active = true;
    this.conversationSelected.set(dataItem);
  }

Parfait! Nous avons toutes les méthodes prêtes à utiliser KendoListView dans le conversation-list.component.html. Mais avant de commencer, il faut importer des directives et des composants pour simplifier l’intégration.

Dans le conversations-list.component.tsallez dans la section importations. Ajouter ListViewComponent, ItemTemplateDirective, EditCommandDirective, FormsModule et ButtonComponent.

La version finale de conversation-list.component.ts ça ressemble à :

import { Component, model, output } from '@angular/core';
import { ChatConversation } from '../../../entities/chat-entities';
import {
  CancelEvent,
  EditCommandDirective,
  EditEvent,
  ItemTemplateDirective,
  KENDO_LISTVIEW,
  ListViewComponent,
  RemoveEvent,
  SaveEvent,
} from '@progress/kendo-angular-listview';
import { FormsModule } from '@angular/forms';
import { ButtonComponent } from '@progress/kendo-angular-buttons';

@Component({
  imports: [
    ListViewComponent,
    ItemTemplateDirective,
    EditCommandDirective,
    KENDO_LISTVIEW,
    FormsModule,
    ButtonComponent,
  ],
  selector: 'app-conversations-list',
  standalone: true,
  templateUrl: './conversation-list.component.html',
})
export class ConversationsListComponent {
  conversations = model.required<ChatConversation[]>();
  conversationSelected = model.required<ChatConversation>();
  conversationUpdated = output<ChatConversation>();
  conversationDeleted = output<string>();

  public editedConversation: ChatConversation | null = null;
  public editedIndex: number | null = null;

  editHandler({ sender, itemIndex, dataItem }: EditEvent) {
    this.closeEditor(sender);

    this.editedConversation = { ...dataItem };
    this.editedIndex = itemIndex;

    sender.editItem(itemIndex);
  }

  cancelHandler({ sender, itemIndex }: CancelEvent) {
    this.closeEditor(sender, itemIndex);
  }

  private resetEdit() {
    this.editedConversation = null;
    this.editedIndex = null;
  }

  private closeEditor(sender: any, itemIndex = this.editedIndex) {
    sender.closeItem(itemIndex);
    this.resetEdit();
  }

  saveHandler({ sender, itemIndex, dataItem }: SaveEvent) {
    sender.closeItem(itemIndex);
    this.resetEdit();
    this.conversationUpdated.emit(dataItem);
  }

  onTogglePin(dataItem: ChatConversation) {
    dataItem.fav = !dataItem.fav;
    this.conversationUpdated.emit(dataItem);
  }

  removeHandler({ dataItem }: RemoveEvent) {
    this.conversationDeleted.emit(dataItem.id);
  }

  onConversationSelect(dataItem: ChatConversation) {
    dataItem.active = true;
    this.conversationSelected.set(dataItem);
  }
}

Nous avons les événements, il est donc temps de les connecter avec KendoListView.

Utiliser KendoListView

Ouvrir conversation-list.component.htmloù nous utiliserons le composant Kendo UI ListView pour afficher la liste des conversations. Nous ajouterons également des boutons pour modifier, supprimer et basculer l’état du code PIN. Lorsque le bouton Modifier est activé, un formulaire permettra aux utilisateurs de modifier le titre de la conversation.

La magie de Kendo ListView travaille avec nos événements. Il suffit de raconter les événements et de définir le modèle, et KendoListView se charge de simplifier, d’afficher la liste des éléments et de basculer entre les modes d’affichage et d’édition.

La vue kendo-listview a le data propriété pour lier la liste des conversations et kendoListViewItemTemplate directive pour définir le modèle d’affichage de chaque élément de conversation. Vous pouvez entièrement personnaliser la façon dont chaque conversation apparaît dans la liste.

Pour déclencher des actions, nous avons kendoListViewEditCommand pour déclencher le mode édition pour un élément de conversation, permettant aux utilisateurs de modifier les détails de la conversation et kendoListViewRemoveCommand pour gérer la suppression d’une conversation de la liste.

Je recommande de lire davantage dans le Documentation de Kendo UI ListView.

Nous devons lier les poignées dans chacun kendo-listview événement en passant l’événement.

<kendo-listview
  [data]="conversations()"
  (edit)="editHandler($event)"
  (cancel)="cancelHandler($event)"
  (save)="saveHandler($event)"
  (remove)="removeHandler($event)"
>

</kendo-listview>

Ensuite, nous ajoutons un ng-template avec le kendoListViewItemTemplate directif. Il affiche le nom de la conversation. Si dataItem.fav est true puis nous montrons le ❤️.

Nous ajoutons trois boutons pour déclencher nos actions. Pin se lie en cliquant sur le onTogglePin fonction et transmet le dataItem. Le Edit et Remove les boutons fonctionnent avec kendoListViewEditCommand et kendoListViewRemoveCommand. Kendo UI prend la responsabilité de passer automatiquement du mode édition au mode lecture et déclenche les actions qui y sont liées.

 <ng-template kendoListViewItemTemplate let-dataItem="dataItem">
    <div class="k-d-flex k-justify-content-around k-cursor-pointer">

      @if (dataItem.fav) {
        <span class="pinned-label">❤️</span>
      }
      <p (click)="onConversationSelect(dataItem)">{{ dataItem.name }} </p>
      <div class="chat-actions">
        <button kendoButton (click)="onTogglePin(dataItem)">Pin</button>
        <button kendoListViewEditCommand >Edit</button>
        <button kendoListViewRemoveCommand >Remove</button>
      </div>
    </div>
  </ng-template>

Le formulaire est affiché en utilisant un autre ng-template avec le kendoListViewEditTemplate directive, ainsi que l’entrée et ngModel. Au lieu d’utiliser clicknous utilisons le kendoListViewSaveCommand pour déclencher la sauvegarde et kendoListViewCancel pour ignorer les modifications.

  <ng-template kendoListViewEditTemplate let-dataItem="dataItem">
    <input [(ngModel)]="dataItem.name" name="name"  required/>
    <div class="edit-buttons">
      <button kendoListViewSaveCommand>Save</button>
      <button kendoListViewCancelCommand>Cancel</button>
    </div>
  </ng-template>

La finale conversations-list.component.html le code ressemble à :

<kendo-listview
  [data]="conversations()"
  (edit)="editHandler($event)"
  (cancel)="cancelHandler($event)"
  (save)="saveHandler($event)"
  (remove)="removeHandler($event)"
>
  <ng-template kendoListViewItemTemplate let-dataItem="dataItem">
    <div class="k-d-flex k-justify-content-around k-cursor-pointer">

      @if (dataItem.fav) {
        <span class="pinned-label">❤️</span>
      }
      <p (click)="onConversationSelect(dataItem)">{{ dataItem.name }} </p>
      <div class="chat-actions">
        <button kendoButton (click)="onTogglePin(dataItem)">Pin</button>
        <button kendoListViewEditCommand>Edit</button>
        <button kendoListViewRemoveCommand>Remove</button>
      </div>
    </div>
  </ng-template>

  <ng-template kendoListViewEditTemplate let-dataItem="dataItem">
    <input [(ngModel)]="dataItem.name" name="name" class="k-textbox" required/>
    <div class="edit-buttons">
      <button kendoListViewSaveCommand>Save</button>
      <button kendoListViewCancelCommand>Cancel</button>
    </div>
  </ng-template>
</kendo-listview>

Parfait! Nous avons déjà fini de configurer le kendo-listview et l’a connecté aux événements, il est donc maintenant temps de lier les propriétés d’entrée et d’écouter les événements de app.component.ts.

Liste des conversations et chat Kendo

Avant de commencer, importez le KENDO_CHAT, ConversationsListComponent et ButtonComponent dans le app.component.ts:

import { Component, signal } from '@angular/core';

import {
  ChatConversation,
  defaultUser,
  firstAIInteraction,
  initialConversation,
} from '../entities/chat-entities';
import { ConversationsListComponent } from './components/conversation-list/conversation-list.component';
import {
  KENDO_CHAT,
  SendMessageEvent,
} from '@progress/kendo-angular-conversational-ui';
import { ButtonComponent } from '@progress/kendo-angular-buttons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ConversationsListComponent, KENDO_CHAT, ButtonComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {

Ajoutez d’abord un bouton pour créer une nouvelle conversation avec le kendoButton directive et lier le createNewConversation méthode.

 <button kendoButton (click)="createNewConversation()" class="new-conversation-btn">
      New Conversation
    </button>

Ensuite, nous devons transmettre les entrées à conversation-list et écoutez les événements, liez les conversations et conversationSelected à l’aide d’une liaison bidirectionnelle [()] et liez la conversationUpdated et la conversationDeleted.

 <app-conversations-list
      (conversationUpdated)="updateConversation($event)"
      (conversationDeleted)="deleteConversation($event)"
      [(conversationSelected)]="currentConversation"
      [(conversations)]="conversations"
    ></app-conversations-list>

Avant de continuer, utilisons un div wrapper avec la classe k-d-flex et aussi un aside taguer avec classe k-w-2/6.

<div class="k-d-flex">
  <aside class="k-w-2/6">
    <button kendoButton (click)="createNewConversation()" class="new-conversation-btn">
      New Conversation
    </button>
    <app-conversations-list
      (conversationUpdated)="updateConversation($event)"
      (conversationDeleted)="deleteConversation($event)"
      [(conversationSelected)]="currentConversation"
      [(conversations)]="conversations"
    ></app-conversations-list>
  </aside>
</div>

ATTENDEZ UNE SECONDE !

Êtes-vous curieux de savoir où se trouve le k-d-flex et k-justify-content-around les cours viennent d’où ? Ils font partie des utilitaires CSS Telerik et Kendo UI. Ces utilitaires facilitent la conception d’interfaces sans écrire votre propre CSS. Ils vous proposent des styles prêts à l’emploi, ce qui vous permet d’économiser du temps et des efforts lors de la création de vos mises en page. Je recommande de consulter la documentation pour apprendre et créer facilement de belles interfaces !
👉🏽 https://www.telerik.com/design-system/docs/utils/get-started/introduction/.

Enfin, nous ajoutons le kendo-chat composant pour ajouter une interface de discussion personnalisable prête à l’emploi.

Le kendo-chat provide est livré avec les propriétés clés suivantes pour nous faciliter la tâche :

  • [messages]: lie le tableau de messages de la conversation en cours au composant de discussion.
  • [user]: Définit l’utilisateur actuel qui interagit avec le chat. Ceci est important pour différencier les messages envoyés par l’utilisateur et les autres.
  • (sendMessage): Événement émis lorsque l’utilisateur envoie un message. Nous le lions au sendMessage méthode dans notre composant.

En savoir plus sur Bavarder.

Nous utilisons @if pour montrer le currentConversation seulement s’il est actif, alors liez l’utilisateur avec defaultUsermessage avec currentConversation().messages et écoutez le (sendMessage) avec updateMessage méthode.

 @if (currentConversation().active) {
    <div class="k-flex-1">
      <h2>{{ currentConversation().name }}</h2>
      <kendo-chat
        [user]="defaultUser"
        [messages]="currentConversation().messages"
        (sendMessage)="updateMessage($event)"
        width="450px"
      >
      </kendo-chat>
    </div>
  }

Enregistrez les modifications, exécutez ng serve et accédez à http://localhost:4200. Et voilà, votre chat prend désormais en charge plusieurs conversations !

N’hésitez pas à jouer avec en créant de nouvelles conversations ou plusieurs. Vous pouvez renommer, épingler ou supprimer des conversations. Si vous envoyez un message, passez à une autre conversation et revenez, votre message sera toujours là, tel que vous l’avez laissé.

Conclusion

Nous avons appris à créer un chat prenant en charge plusieurs conversations à l’aide des composants de l’interface utilisateur Kendo et des signaux angulaires. Lorsque nous devons créer un chat, gérer plusieurs chats manuellement peut être difficile et prendre beaucoup de temps, surtout lors de l’ajout de fonctionnalités telles que l’édition, la suppression et le marquage des conversations comme favoris.

Mais lorsque nous avons choisi Kendo UI pour les composants angulaires, comme Conversational UI et ListView, nous avons facilité notre travail en fournissant des fonctions intégrées qui facilitent des tâches telles que la gestion des messages et l’affichage des éléments de discussion. Cela nous permet de nous développer plus rapidement et de nous concentrer sur l’offre aux utilisateurs d’une meilleure expérience en un rien de temps.

Et n’oubliez pas d’essayer Kendo UI for Angular (gratuitement) si vous ne l’avez pas déjà fait !

Essayez maintenant

Le meilleur outil 2023 pour ta croissance Instagram !



Source link