Eine Tour durch das Sendbird UIKit für React: Die wichtigsten Komponenten und Module, die Sie kennen müssen

Das Erstellen eines In-App- Chats ist ein faszinierendes, aber komplexes Unterfangen. Unabhängig davon , ob Sie für Gaming , Einzelhandel , digitale Gesundheit oder On-Demand bauen , es ist notwendig, eine optimierte Chat-Benutzeroberfläche für Ihre Web- oder mobile App zu haben. Das Sendbird UIKit erleichtert die Implementierung einer intuitiven Chat-Benutzeroberfläche. Das Sendbird UIKit für React stellt die Ressourcen bereit, um ein funktionales und attraktives Chat-Erlebnis mit vorgefertigten UI-Komponenten aus dem Sendbird SDK zu erstellen. Das UIKit für React ist nützlich, weil es für Entwickler entscheidend ist, die Elemente auswählen zu können, die zum Erstellen eines funktionsreichen, optimierten Chats nach Ihren Vorstellungen erforderlich sind.

In diesem Blog erfahren wir mehr über die Komponenten des Sendbird UIKit für React sowie über jeden ihrer Anwendungsfälle. Am Ende dieses Blogs werden Sie verstehen, wie Sie diese Komponenten implementieren, um Ihre eigene benutzerdefinierte Integration zu erstellen.

Vielleicht finden Sie auch das folgende Video-Tutorial hilfreich.

UIKit für React: Einrichten der Umgebung

Erstellen Sie zunächst eine Anwendung im Sendbird-Dashboard . Hier können Sie auf alles zugreifen, was für Ihren Chat-Dienst erforderlich ist, einschließlich Ihrer Anwendungen, Benutzer, Nachrichten und Kanäle. Nachdem Sie eine Anwendung erstellt haben, benötigen Sie die App-ID, um das Chat-SDK zu initialisieren.

Erstellen Sie als Nächstes eine neue Projektumgebung mit create-react-app. Fügen Sie dann eine .env-Datei hinzu, um die App-ID, die Benutzer-ID und den Spitznamen zu speichern, die von Ihrem Sendbird-Dashboard generiert wurden. Installieren Sie jetzt Sendbird UIKit über npm oder Garn:

Sobald das UIKit für React installiert ist, möchten wir es mithilfe von Komponenten in der Anwendung implementieren. Die erste, die wir kennenlernen werden, ist die App-Komponente.

App-Komponente

Die App-Komponente ist eine Sammlung von UI-Komponenten, die eine funktionale Chat-Schnittstelle erstellen. App oder die App-Komponente rendert eine Ansicht, die eine Kanalliste, eine Kanalkonversation und Kanaleinstellungen in einer Komponente enthält.

To use this, import the UIKit component SendbirdApp and the UIKit stylesheet in the App.js file:

Die App-Komponente erfordert die Übergabe einer Anwendungs-ID und einer Benutzer-ID. Der folgende Code zeigt, wie Sie die App-Komponente verwenden würden:

Geben Sie dann die Höhe und Breite für die Chat-Oberfläche im Stylesheet an:

Achten Sie darauf, dieses Stylesheet in die App.js-Datei zu importieren.

An diesem Punkt haben wir eine erfolgreich laufende Chat-Anwendung, in der Sie einen neuen Kanal erstellen und Nachrichten senden können. Es sollte so aussehen:

Wenn Sie Ihr Chat-Erlebnis anpassen möchten, tun Sie dies, indem Sie die von UIKit bereitgestellten Kernkomponenten und Module verwenden. Lassen Sie uns zunächst in die Kernkomponenten eintauchen.

Kernkomponenten im UIKit für React

Die Kernkomponenten sind die Hauptbausteine ​​von UIKit. Zu den Kernkomponenten gehören SendbirdProvider, sendbirdSelectors, userSendbirdStateContext und withSenbird(). Jeder von ihnen speichert und verarbeitet alle Daten, die zum Ausführen einer Anwendung erforderlich sind.

Wie funktionieren die Kernkomponenten? Sie erhalten Daten von der Chat-SDK-Instanz, stellen eine Verbindung zum Sendbird-Server her, sprechen mit den Modulen über Ereignisse, die in der Ansicht auftreten, und konfigurieren Funktionen und Lokalisierung. Diese Komponenten arbeiten zum Erstellen und Ausführen von Ansichten; Sie stellen jedoch keine Benutzeroberfläche bereit oder zeigen sie an. Hier kommen die Module ins Spiel: Die Module bieten eine UI-Ansicht für die verwendete Kernkomponente.

Der SendbirdProvider ist die wichtigste Kernkomponente, da er Kontext bereitstellt und die Chat-SDK-Daten sowie den aktuellen Status an alle untergeordneten Komponenten weitergibt. Der SendbirdProvider muss sich auf der obersten Ebene befinden, damit die gesamte Anwendung Zugriff auf die Sendbird-Daten hat.

Mit SendbirdProvider können wir die Komponente useSendbirdStateContext() verwenden , um das Sendbird Chat SDK für Javascript in untergeordneten Komponenten von SendbirdProvider zu implementieren. Die useSendbirdStateContext-Komponente ermöglicht es uns, auf den Status von SendbirdProvider zuzugreifen, sich in SDK-Aktionen einzuklinken und kann mit sendbirdSelectors verwendet werden, um Funktionalitäten wie das Senden oder Aktualisieren einer Nachricht zu implementieren.

Vor UIKit v4 wurde die Komponente withSendbird() verwendet, um Daten zwischen dem Chat-SDK und den Modulen zu übertragen, aber mit dem UIKit-Update empfehlen wir, dass Sie stattdessen useSendbirdStateContext() verwenden.

Schließlich werden die sendbirdSelectors verwendet, um Datenoperationen durchzuführen und Ihnen Zugriff auf das SDK zu geben. Zu den Hauptselektorfunktionen gehören getSdk, getCreateOpenChannel und getDeleteMessage.

Handler

UIKit stellt verschiedene Ereignishandler bereit, um Aktivitäten und Ereignisse zu verwalten, die in der Client-App auftreten. Seit dem Upgrade von v3 auf v4 im Chat SDK hat UIKit Channel-Event-Handler implementiert , die importiert werden können, anstatt den Channel-Handler aus der sdkInstance aufzurufen. Zu den Kanalereignishandlern gehören ConnectionHandler, GroupChannelHandler, OpenChannelHandler und UserEventHandler. Als Nächstes verwendet das SDK Sitzungshandler , um ein Sitzungstoken zu erneuern. Ein Sitzungstoken wird verwendet, um einen Benutzer sicher zu authentifizieren, wenn das Chat-SDK den Benutzer mit dem Sendbird-Server verbindet, wo er Datenanfragen an ihn senden kann, bevor das Token abläuft.

Module im UIKit für React

Nachdem wir nun die Kernkomponenten von UIKit kennengelernt haben, ist es wichtig, etwas über Module zu lernen und wie jedes Modul in Verbindung mit Kernkomponenten funktioniert. Module fungieren als intelligente Komponenten, die eine anpassbare Benutzeroberfläche bereitstellen. Diese Module enthalten Anbieter und vorgefertigte UI-Komponenten, die eine funktionale Chat-Ansicht erstellen.

Die acht Module in UIKit sind:

1. Kanalliste
2. Erstellen Sie einen Kanal
3. Gruppenkanal
4. Kanaleinstellungen gruppieren
5. Offener Kanal
6. Kanaleinstellungen öffnen
7. Nachrichtensuche
8. Benutzerprofil bearbeiten

Jedes Modul verfügt über einen Kontextanbieter und eine Reihe von UI-Komponenten. Der Anbieter verwaltet die erforderlichen Daten aus dem Chat-SDK, während die UI-Komponenten die Schnittstellen rendern, um die Ansicht des Moduls anzuzeigen. Um Daten zwischen dem Anbieter und den UI-Komponenten zu übertragen, verwenden wir einen useContext-Hook. Die Kontext-Hooks müssen sich innerhalb des Anbieters befinden, damit jede UI-Komponente auf die Daten des Anbieters zugreifen kann. Während für jedes Modul ein Standardsatz von UI-Komponenten vorhanden ist, können alle UI-Komponenten angepasst werden, indem die Eingabe-Requisiten mit benutzerdefinierten Komponenten festgelegt werden.

Kanalliste

Die ChannelList zeigt eine Liste der Gruppen-Channels an, denen der aktuelle Benutzer angehört. Zu den Eigenschaften von ChannelList gehören unter anderem onBeforeCreateChannel, onChannelSelect und renderChannelPreview.

Mit den Eigenschaften onBeforeCreateChannel und onChannelSelect können Sie Aktionen ausführen, während der Benutzer mit der Benutzeroberfläche von UIKit interagiert. Mit der Eigenschaft renderChannelPreview können Sie die Standardbenutzeroberfläche der Kanalvorschau durch Ihre eigene angepasste Komponente ersetzen. Dies kann verwendet werden, um die Kanalvorschau so einzustellen, dass nur der Nickname des Benutzers in der Kanalliste angezeigt wird.

Der für dieses Modul verwendete Kontextanbieter ist ChannelListProvider . Dieser Anbieter verwaltet die Logik und Daten, die in der Kanallistenansicht verwendet werden. Wenn Ihre Anwendung also nur eine Kanalliste anzeigen muss, können Sie das ChannelList-Modul verwenden, um die Ansicht einer Kanalliste anzuzeigen, und dieses Modul in den ChannelListProvider packen, der alle erforderlichen Daten an die ChannelList weitergibt.

Sie können auch den Hook useChannelListContext verwenden , um Zugriff auf die Daten des Anbieters zu erhalten. Einige der Eigenschaften von useChannelListContext sind initialized, loading und currentChannel.

Die UI-Komponenten, aus denen die ChannelList-Ansicht besteht, sind ChannelListUI, ChannelListHeader und ChannelPreview. Die ChannelListUI zeigt den Basisbildschirm des Moduls, einschließlich der Kopfzeilen und der Kanalvorschau. Es enthält eine Liste der zu verwendenden Eigenschaften wie renderHeader, renderPlaceHolderError und renderPlaceHolderLoading. Der ChannelListHeader ist die Kopfzeile der ChannelListUI, die den Titel und eine Schaltfläche zum Erstellen eines neuen Kanals anzeigt. Drei Eigenschaften, die mit dieser Benutzeroberfläche verwendet werden können, sind renderHeader, renderIconButton und allowProfileEdit. Die ChannelPreview -UI-Komponente zeigt einen einzelnen Kanal in der Kanalliste an. Die Eigenschaften für ChannelPreview sind channel, onClick, renderChannelAction und isActive.

So können Sie die ChannelList mit ChannelListProvider und useChannelListContext implementieren:

Dies ist das Standarddesign der ChannelList-Komponente:

Kanal erstellen

Das CreateChannel -Modul wird verwendet, um einen neuen Gruppenkanal zu erstellen. CreateChannel erfordert, dass die Eigenschaft channelUrl übergeben wird. Weitere optionale Eigenschaften sind onBeforeCreateChannel, onCreateChannel und onCancel. Alle drei dieser Eigenschaften werden bei bestimmten Aktionen in der Benutzeroberfläche von UIKit ausgeführt, sodass Sie Ihre eigenen Operationen übergeben und ausführen können.

Beispielsweise können Sie onBeforeCreateChannel verwenden, um eine Funktion auszulösen, die aufgerufen wird, wenn der Benutzer klickt, um einen Gruppenkanal zu erstellen, und bevor ein neuer Kanal generiert wird. Die aufgerufene Funktion könnte beispielsweise das Bild der Gruppe für den zu erstellenden Kanal festlegen. Mit der onCreateChannel-Eigenschaft können Sie direkt nach der Kanalerstellung eine Aktion implementieren. Sie können dies verwenden, um eine Erfolgsmeldung auf dem Bildschirm anzuzeigen, sobald Ihr Kanal erstellt wurde. Wenn Sie ein Ereignis auslösen möchten, wenn auf die Schaltfläche „Abbrechen“ geklickt wird, können Sie die Eigenschaft onCancel verwenden. Sie können von hier aus Ihre eigene benutzerdefinierte Benutzeroberfläche implementieren und eine Funktion aufrufen, um eine Ansicht zu rendern, in der Sie gefragt werden, ob Sie das Erstellen des Kanals wirklich abbrechen möchten.

Die beiden Kontextobjekte, die verwendet werden können, um einen Gruppenkanal zu erstellen und Daten vom Anbieter an die UI-Komponenten zu übergeben, sind der Hook „ CreateChannelProvider“ und „useCreateChannel“ . CreateChannelProvider erfordert, dass die Eigenschaft channelUrl übergeben wird. Weitere optionale Eigenschaften sind children, onCreateChannel, onBeforeCreateChannel und querys.applicationUserListQuery.

Die UI-Komponenten, aus denen die CreateChannel-Ansicht besteht, sind CreateChannelUI, InviteMembers und SelectChannelType. CreateChannelUI und SelectChannelType werden zusammen verwendet, um den ersten Schritt des CreateChannel-Moduls anzuzeigen. InviteMembers zeigt den zweiten Schritt an, nachdem der Kanal erstellt wurde. CreateChannelUI hat die Eigenschaften onCancel und renderStepOne. SelectChannelType rendert die Ansicht, in der der aktuelle Benutzer auswählen kann, welche Art von Kanal erstellt werden soll. InviteUsers zeigt eine Ansicht an, in der der aktuelle Benutzer andere Benutzer einladen kann, dem Kanal beizutreten. Sowohl SelectChannelType als auch InviteMembers haben eine onCancel-Eigenschaft.

Der folgende Code zeigt, wie das CreateChannel-Modul mit dem CreateChannelProvider- und useCreateChannel-Hook verwendet wird:

Unten ist das Standardlayout des CreateChannel-Moduls:

Kanal

Das Kanalmodul zeigt eine Gruppenkanalkonversation an. Benutzer können nur dann auf einen Gruppenkanal zugreifen, wenn sie eingeladen wurden, Mitglied des Kanals zu sein. Für dieses Modul muss eine channelUrl-Eigenschaft festgelegt werden. Weitere optionale Eigenschaften sind isReactionEnabled, showSearchIcon und onBeforeSendUserMessage.

Die Eigenschaften isReactionEnabled und showSearchIcon steuern, ob die Funktion verwendet und angezeigt wird oder nicht. Die Eigenschaft onBeforeSendUserMessage kann verwendet werden, um benutzerdefinierte Logik im Hintergrund auszuführen, wenn der Benutzer zum Senden einer Nachricht klickt, aber die Vorgänge abschließt, bevor die Nachricht an den Kanal gesendet wird. Daher wird beim Klicken auf das Senden einer Nachricht die von Ihnen übergebene Funktion ausgelöst, um eine Aktion abzuschließen, und dann die Nachricht gesendet. Dies kann in einem Fall nützlich sein, in dem Sie den gesendeten Text der Nachricht überprüfen möchten, und wenn er ein bestimmtes Wort enthält, dann eine Animation auslösen soll, wenn die Nachricht dann gesendet wird.

Die beiden Kontextobjekte, die zum Speichern und Verwalten der zum Erstellen eines Gruppenkanals verwendeten Daten verwendet werden, sind der ChannelProvider- und der useChannelContext- Hook. Der ChannelProvider erfordert eine Eigenschaft „channelUrl“ und enthält zusätzliche Eigenschaften wie „isMessageGroupingEnabled“, „isReactionEnabled“ und „highlightedMessage“. Zu den optionalen Eigenschaften des Kontext-Hooks useChannelContext gehören channelUrl, startupPoint und onBeforeSendFileMessage.

Die UI-Komponenten im Channel-Modul sind ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator und UnreadCount. ChannelUI zeigt den Basisbildschirm des Moduls an und verfügt über eine Reihe von Eigenschaften wie renderPlaceholderLoader, renderMessageInput und renderTypingIndicator. ChannelHeader ist die Kopfzeile der ChannelUI-Komponente, die den Kanaltitel, ein Nachrichtensuchsymbol und ein Kanalinformationssymbol anzeigt. MessageInput ist die Komponente, in der Benutzer eine Nachricht eingeben oder eine Dateinachricht senden können.

MessageList zeigt eine Liste aller Nachrichten in einem Gruppenkanal an und hat drei Eigenschaften: renderMessage, renderPlaceholderEmpty und renderCustomSeperator. FileViewer zeigt alle Nachrichten an, die Bild- oder Videodateien enthalten, und hat zwei optionale Eigenschaften: onCancel und message. FrozenNotification ist eine Komponente, die ein Banner anzeigt, das Benutzer darauf hinweist, dass der aktuelle Kanal eingefroren ist. Message ist eine Komponente innerhalb der MessageList, die eine einzelne Nachricht im Kanal anzeigt. Es erfordert eine Nachrichteneigenschaft und verfügt über zusätzliche optionale Eigenschaften wie hasSeperator, chainTop und renderEditInput. RemoveMessageModalzeigt ein Modal an, das bestätigt, dass die ausgewählte Nachricht aus dem Kanal gelöscht wird, und hat zwei optionale Eigenschaften: onCancel und message. TypingIndicator zeigt an, welches Mitglied im Kanal aktiv eine Nachricht eingibt. Und schließlich zeigt UnreadCount an , wie viele ungelesene Nachrichten sich in einem Kanal befinden. Die Eigenschaften von UnreadCount sind count, time und onClick.

Der folgende Code zeigt, wie das Channel-Modul mithilfe von ChannelProvider und useChannelContext implementiert wird:

Dies ist das Standardlayout der Channel-Komponente:

Kanaleinstellungen

Das ChannelSettings -Modul zeigt ein Menü mit Gruppenkanalinformationen und Einstellungsoptionen an. Mitglieder können eine Mitgliederliste auschecken, einen Benutzer zum Kanal einladen und den Kanal verlassen. Wenn der Benutzer ein Kanalbetreiber ist, stehen ihm (in den Einstellungen) zusätzliche Optionen zur Verfügung, z. B. das Hinzufügen oder Entfernen von Betreibern, das Stummschalten oder Sperren von Mitgliedern, das Anzeigen einer Liste stummgeschalteter und gesperrter Benutzer und das Verlassen oder den Kanal einfrieren.

Die ChannelSettings erfordern eine Eigenschaft „channelUrl“ und verfügen über optionale Eigenschaften wie „onCloseClick“, „onChannelModified“ und „renderLeaveChannel“. Die Eigenschaften onCloseClick und onChannelModified werden durch ein Ereignis ausgelöst, das von der Benutzeroberfläche selbst ausgelöst wird, und führen die von Ihnen übergebene benutzerdefinierte Logik aus. Sie können onCloseClick verwenden, wenn ein Benutzer auf die Schaltfläche klickt, um die Einstellungsleiste zu schließen. Sie können ihm eine Funktion übergeben, bei der Sie die Benutzeroberfläche so ändern möchten, dass die Einstellungskomponente nicht angezeigt wird. Wenn Sie ein Ereignis auslösen möchten, nachdem die Einstellungen geändert wurden, können Sie eine Erfolgsmeldung auf dem Bildschirm anzeigen, indem Sie die Eigenschaft onChannelModified verwenden. Wenn Sie ChannelSettings verwenden, möchten Sie möglicherweise das Design der Schaltfläche „Kanal verlassen“ ändern. Sie können dies tun, indem Sie die renderLeaveChannel-Eigenschaft verwenden, mit der Sie Ihre eigene benutzerdefinierte Benutzeroberfläche an das Einstellungsmodul übergeben können.

Die beiden Kontextobjekte zum Erstellen eines Kanaleinstellungsmenüs für dieses Modul sind ChannelSettingsProvider und useChannelSettingsContext. Der ChannelSettingsProvider erfordert die Übergabe einer channelUrl. Einige andere Optionen für diesen Anbieter sind onCloseClick, onBeforeUpdateChannel und invalidChannel. Der Hook useChannelSettingsContext hat mehrere Eigenschaften, die verwendet werden können, wie z. B. onCloseClick, onChannelModified und onBeforeUpdateChannel.

Der ChannelSettings-Satz von UI-Komponenten, die die Gruppenkanal-Einstellungsansicht bilden, sind ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel und UserListItem. ChannelSettingsUI zeigt die Ansicht an, die die Kanalprofilansicht, die Moderationsmenüansicht und die Schaltfläche zum Verlassen des Kanals enthält. Die Komponente hat vier optionale Eigenschaften: renderPlaceHolderError, renderChannelProfile, renderModerationPanel und renderLeaveChannel. Das ModerationPanel erstellt die Einstellungsmenüansicht für Kanalbetreiber. Dazu gehören eine Liste mit Operatoren, Mitgliedern, stummgeschalteten und gesperrten Benutzern, eine Umschalttaste zum Einfrieren des Kanals und die Option, den Kanal zu verlassen. Das UserPanelDie Komponente erstellt die Einstellungsmenüansicht für Kanalmitglieder, die eine Liste der Mitglieder, eine Option zum Einladen anderer Benutzer in den Kanal und eine Option zum Verlassen des Kanals enthält. Die ChannelProfile -Komponente erstellt die Kanalprofilansicht einschließlich des Kanaltitels, des Bildes und der Bearbeitungsschaltfläche, mit der Benutzer die Kanalinformationen ändern können. EditDetailsModal zeigt ein Modal an, in dem Benutzer den Kanalnamen und das Profilbild bearbeiten können. Es hat zwei optionale Eigenschaften, die verwendet werden können: onSubmit und onCancel. Das LeaveChannel- Modal wird gerendert, wenn ein Benutzer klickt, um den Kanal im Einstellungsmenü zu verlassen, und den Benutzer auffordert, diese Aktion zu bestätigen. LeaveChannel hat eine onSubmit- und eine onCancel-Eigenschaft, die damit verwendet werden können. Das UserListItemzeigt einen einzelnen Benutzer innerhalb einer Benutzerliste an. Für diese Komponente muss eine Benutzereigenschaft festgelegt werden, und sie verfügt über drei optionale Eigenschaften: currentUser, className und action.

So implementieren Sie das ChannelSettings-Modul mit ChannelSettingsProvider und useChannelSettingsContext:

Dies ist die Standardbenutzeroberfläche von ChannelSetting für Nicht-Operatoren:

Dies sind die Kanaleinstellungen, die für Kanaloperatoren angezeigt werden:

OpenChannel

Ein offener Kanal ist ein öffentlicher Kanal, der eine große Anzahl von Benutzern bewältigen kann, die in einem Chat interagieren. Das OpenChannel -Modul erfordert eine Eigenschaft „channelUrl“ und verfügt über eine Reihe optionaler Eigenschaften wie „child“, „isMessageGroupingEnabled“, „messageLimit“ und „renderUserProfile“.

Die Eigenschaft children zeigt die untergeordneten Komponenten des OpenChannel, bei denen es sich um Daten handelt, die vom OpenChannelProvider bereitgestellt werden. Die Eigenschaft isMessageGroupingEnabled prüft, ob die Funktion aktiviert ist, damit sie weiß, wie die Benutzeroberfläche angezeigt wird. Wenn die Nachrichtengruppierung aktiviert ist, wird jede Nachricht, die innerhalb einer Minute gesendet wird, zu einer Nachricht gruppiert. Die MessageLimit-Eigenschaft stellt die maximale Anzahl von Nachrichten bereit, die in der OpenChannelMessageList-Komponente des Kanals gespeichert werden. Wenn Sie die Profilvorschau anpassen möchten, wenn Sie auf den Avatar eines Benutzers klicken, können Sie Ihre eigene UI-Komponente übergeben, indem Sie die Eigenschaft renderUserProfile verwenden, um das Standarddesign zu überschreiben.

Die Kontextobjekte, die für das OpenChannel-Modul zum Speichern und Verarbeiten von Daten verwendet werden können, sind der OpenChannelProvider- und der useOpenChannel-Hook. Für den OpenChannelProvider muss eine channelUrl-Eigenschaft festgelegt werden. Einige optionale Eigenschaften sind isMessageGroupingEnabled, messageLimit und onChatHeaderActionClick. Der Kontext-Hook useOpenChannelContext hat eine Reihe von Eigenschaften, die verwendet werden können, wie z. B. renderUserProfile, currentOpenChannel und allMessages.

Der Satz von UI-Komponenten, die das OpenChannel-Modul bilden, sind OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList und OpenChannelMessage. OpenChannelUI zeigt den Grundbildschirm des Moduls und die Ansicht des Headers, der Nachricht und der Nachrichtenliste in einem geöffneten Kanal an. OpenChannelUI hat eine Liste optionaler Eigenschaften wie renderMessage, renderHeader und renderInput. OpenChannelHeader rendert den Kanaltitel und das Informationssymbol. Über OpenChannelInput können Benutzer eine Nachricht oder Dateinachricht wie ein Bild, Video oder Dokument senden. Die OpenChannelMessageList zeigt eine Liste aller Nachrichten in einem offenen Kanal an. Sie hat zwei optionale Eigenschaften: renderMessage und renderPlaceHolderEmptyList.OpenChannelMessage zeigt die einzelne Nachricht im Kanal an. Diese Komponente erfordert eine Nachrichteneigenschaft und verfügt über eine Reihe optionaler Eigenschaften wie hasSeperator, chainTop und editDisabled.

Nachfolgend erfahren Sie, wie Sie das OpenChannel-Modul mit dem OpenChannelProvider und useOpenChannelContext verwenden:

So sieht das Standarddesign von OpenChannel aus:

OpenChannelEinstellungen

Das OpenChannelSettings -Modul zeigt ein Menü mit Einstellungen an, z. B. die Bereitstellung des Kanalnamens, des Bilds des Kanals, der Anwendungs-URL und einer Teilnehmerliste. Wenn der aktuelle Benutzer ein Operator ist, hat er zusätzliche Einstellungen wie das Hinzufügen oder Entfernen von Vorgängen, das Anzeigen einer Liste stummgeschalteter und gesperrter Benutzer, die Möglichkeit, Teilnehmer stummzuschalten oder zu sperren, und eine Option zum Löschen des Kanals.

OpenChannelSettings erfordert die Übergabe einer channelUrl-Eigenschaft. Einige weitere bereitgestellte Eigenschaften sind onChannelModified, onDeleteChannel und onCloseClick. Diese Eigenschaften führen eine Reihe von Vorgängen aus, wenn der Benutzer mit bestimmten Attributen in der Benutzeroberfläche interagiert. In den offenen Kanaleinstellungen können Sie mit onCloseClick den Zustand der Einstellungsleiste auf geschlossen setzen und die Einstellungskomponente aus der Chat-Ansicht entfernen. Die gleiche Idee gilt bei der Verwendung von onChannelModified und onDeleteChannel, wo, wenn der Benutzer klickt, um vorgenommene Änderungen zu speichern, oder wenn er auf die Schaltfläche klickt, um den Kanal zu löschen, Sie die Benutzeroberfläche in Ihrer Anwendung so ändern können, dass eine benutzerdefinierte Komponente auf der angezeigt wird Bildschirm.

Die beiden Kontextobjekte, die zum Erstellen eines funktionalen Kanaleinstellungsmenüs verwendet werden, sind der OpenChannelSettingsProvider- und der useOpenChannelSettingsContext-Hook. Der OpenChannelSettingsProvider erfordert die Übergabe einer channelUrl und enthält zusätzliche Eigenschaften wie onBeforeUpdateChannel, disableUserProfile und renderUserProfile. Der Hook useOpenChannelSettingsContext hat eine Liste von Eigenschaften wie onDeleteChannel, onChanelModified und setChannel.

Die UI-Komponenten , die das gesamte OpenChannelSetting-Modul bilden, sind OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile und EditDetailsModal. OpenChannelSettingsUI zeigt den Basisbildschirm des Moduls an, das OperatorUI und ParticipantUI enthält. Die zwei optionalen Eigenschaften für OpenChannelSettingsUI sind renderOperatorUI und renderParticipantList. OperatorUI zeigt das Einstellungsmenü für Kanaloperatoren und hat eine optionale Eigenschaft renderChannelProfile. ParticipantUI zeigt eine Liste der Teilnehmer im offenen Kanal an. OpenChannelProfile erstellt eine Kanalprofilansicht, die den Kanaltitel und das Bild anzeigt. EditDetailsModalwird angezeigt, wenn ein Benutzer den Kanalnamen und das Profilbild bearbeiten möchte. Es hat eine onCancel-Eigenschaft, die ausgelöst werden kann, wenn auf die Abbrechen-Schaltfläche geklickt wird.

Der folgende Code zeigt, wie das OpenChannelSettings-Modul mit OpenChannelSettingsProvider und useOpenChannelSettingsContext verwendet wird:

So werden die OpenChannelSettings angezeigt:

MessageSearch

Das MessageSearch -Modul ermöglicht es Benutzern, in den Kanälen, in denen sie Mitglied sind, nach Nachrichten zu suchen. Für MessageSearch muss eine Eigenschaft channelUrl festgelegt werden. Zusätzliche optionale Eigenschaften können verwendet werden, z. B. onResultLoaded, onResultClick und renderPlaceholderEmptyList.

Wenn Sie das MessageSearch-Modul verwenden, möchten Sie möglicherweise alle Ergebnisse einer Suche in einem separaten UI-Fenster anzeigen, das als Popup-Ebene über dem Chat angezeigt wird. Verwenden Sie dazu die Eigenschaft onResultLoaded, bei der eine Funktion aufgerufen wird, sobald die Ergebnisse empfangen wurden. Mit onResultClick können Sie benutzerdefinierte Logik ausführen, sobald ein Benutzer ein Suchergebnis auswählt. Mit der Eigenschaft renderPlaceholderEmptyList können Sie eine benutzerdefinierte Benutzeroberfläche für den Platzhalter erstellen, wenn die Suchliste keine Ergebnisse zurückgibt. Wenn also die Suchliste nichts aufzulisten hat, können Sie eine Benachrichtigung anzeigen lassen.

Für MessageSearch können Sie MessageSearchProvider und den Hook useMessageSearch verwenden, um Daten zu speichern und zu verwalten, die zum Erstellen einer Benutzeroberfläche für die Nachrichtensuche verwendet werden. MessageSearchProvider erfordert die Angabe einer channelUrl und verfügt über zusätzliche optionale Eigenschaften wie onResultClick, messageSearchQuery und onResultLoaded. Der Hook useMessageSearchContext hat eine Reihe optionaler Eigenschaften wie onResultLoaded, requestString und selectedMessageId.

Das MessageSearchUI ist die einzige UI-Komponente im MessageSearch-Modul und zeigt die Ansicht der Suchergebnisse an.

So implementieren Sie die MessageSearch mit dem MessageSearchProvider und useMessageSearchContext:

Die Standard-Benutzeroberfläche des MessageSearch-Moduls sieht folgendermaßen aus:

Benutzerprofil bearbeiten

Das EditUserProfile -Modul ermöglicht es dem aktuellen Benutzer, Änderungen an seinem Profil vorzunehmen. Durch Klicken auf den eigenen Avatar erscheint ein Popup-Fenster mit den Profilinformationen. Hier haben Benutzer die Möglichkeit, ihr Profilbild und ihren Spitznamen zu bearbeiten und das Design in den hellen oder dunklen Modus umzuschalten.

EditUserProfile hat 4 optionale Eigenschaften , darunter Kinder, onCancel, onThemeChange und onEditProfile. Die Eigenschaft children wird verwendet, um die untergeordneten Komponenten auf EditUserProfile anzuzeigen, die EditUserProfileProvider uns bereitstellt. onCancel wird verwendet, um einen Vorgang auszuführen, wenn die Benutzeroberfläche ausgelöst wird, indem der Benutzer klickt, um alle vorgenommenen Änderungen abzubrechen. Wenn Sie basierend darauf, ob sich der Chat im hellen oder im dunklen Modus befindet, zusätzliche Stile hinzufügen möchten, können Sie onThemeChange verwenden, um eine Funktion aufzurufen, die benutzerdefiniertes CSS implementiert, wenn ein Benutzer klickt, um das Design zu ändern. Schließlich können Sie mit onEditProfile eine Reihe von Aktionen implementieren, sobald der Benutzer sein Profil aktualisiert hat.

UIKit stellt die Hooks EditUserProfileProvider und useEditUserProfileProviderContext als Kontextobjekte für das Modul EditUserProfile bereit. Beide können dieselben optionalen Eigenschaften wie EditUserProfile verwenden: children, onCancel, onThemeChange und onEditProfile.

Die einzige UI-Komponente im Modul EditUserProfile ist EditUserProfileUI , die die Ansicht des Benutzerprofils rendert.

Das Standarddesign für EditUserProfile sieht folgendermaßen aus:

Fazit & nächste Schritte

Wir haben die Kernkomponenten und Module, die das Sendbird UIKit für React für uns bereitstellt, im Detail überprüft. Mit diesem starken Fundament können wir nun entscheiden, welche Komponenten und Module notwendig sind, um verschiedene Anwendungsfälle zu unterstützen. Sehen Sie sich als Beispiel unseren Blog an, wie Sie mit Sendbird UIKit für React einen WhatsApp-Messenger-Klon erstellen. In diesem Blog erfahren Sie, wie Sie mit den Kernkomponenten und Modulen, die wir in diesem Blogbeitrag besprochen haben, Ihr eigenes benutzerdefiniertes WhatsApp-ähnliches Chat-Erlebnis erstellen.

Weitere Informationen finden Sie in unseren Dokumenten oder erkunden Sie die zahlreichen UIKit-Tutorials in unserem Entwicklerportal . Wenn Sie Hilfe mit dem Sendbird UIKit benötigen, besuchen Sie die Community-Foren oder kontaktieren Sie uns . Unsere Experten sind immer bereit zu helfen!

Fröhliches Chat-Gebäude! ✨