Applozic UI Components

Installation

$ npm i @applozic/ui-components

Views

These are a full fleged implementations of the @applozic/core package with best practices of. Both light and dark themes are supported depending on the colorMode prop provided to the view.

Views have the following features implemented.

1. Login
2. Feature Tabs
   1. Recent Chats
   2. Contacts
   3. Groups
3. User details
   1. Update details
   2. Logout
4. Sidebar with search and tab specific chat/user entities
5. Chat window
   1. Send Message
      1. Send Attachment
      2. Send Audio message
   2. Chat content
      1. Pagination.
      2. Delete chat.
      3. Update chat status.
   3. User Presence
      1. User Online
      2. User Last Seen timestamp
6. Chat details
   1. Contact
      1. View details
      2. Clear Chat
      3. View all media
   2. Group
      1. View Details
      2. Edit Details
      3. Clear Chat
      4. View all media
      5. Add new members
      6. Delete group {for admins}
      7. Leave group

FullView

This is a full page version of the applozic chat. You can test out the live version with the interactive storybook

Example

import { FullView } from '@applozic/ui-components';

function App() {
  return (
    <FullView
      colorMode={'light'}
      useSystemColorMode={false}
      environment={'production'}
      applicationId={'YOUR-APPLOZIC-APP-ID'}
      giphyApiKey={'YOUR-GIPHY-API-KEY'}
      gMapsApiKey={'YOUR-GOOGLE-MAPS-API-KEY'}
      loginPage={{
        topHeader: 'Brand Name',
        topSubHeader: 'Welcome Message'
      }}
    />
  );
}

Customization

Property	Type	Description
colorMode	light, dark	Set the default theme of the UI components
useSystemColorMode	boolean	Use the users system level theme to decide if the UI components should be lightor dark
environment	development, production	The envrionment in which to initialize the UI, hides the react query devtools in production mode
applicationId	string	The Applozic Application ID as provided after onboarding
giphyApiKey	string	GIPHY API Key to enable sending GIFs
gMapsApiKey	string	Google Maps API Key to enable sending Geo Location

PluginView

This is a popover version of the chat that can be added contextually to any page in your own website. You can test out the live version with the interactive storybook

Components

FeatureTabs

The component to handle the side/bottom tabs and control the active sidebar component. This also gives the developer control over which features should be accessible to the logged in user.

Usage

The below enum will be needed to initialize and maintain your own implementation of FeatureTabs.

enum FeatureTab

These are the currently available options for the feature tabs. This will be useful to define the Sidebar component.

Feature Name	Description
FeatureTab.USER	The logged in user's details and other options
FeatureTab.RECENT_CHATS	The most recent chats of the logged in user with users or groups
FeatureTab.GROUPS	All the groups the logged in user is a part of or has created
FeatureTab.CONTACTS	All the users with which the logged in user is in contact with

Example

import { useState } from 'react';
import { FeatureTabs, FeatureTab } from '@applozic/ui-components';

function App() {
   const [activeTab, setActiveTab] = useState<FeatureTab>()
   // the value `activeTab` can be used to initialize the `Sidebar` component or handle other custom logic
   const ActiveFeatures = [
    FeatureTab.USER,
    FeatureTab.RECENT_CHATS,
    FeatureTab.CONTACTS,
    FeatureTab.GROUPS
   ];
   return (
      <FeatureTabs
         featureTabs={ActiveFeatures}
         onChange={index => setActiveTab(ActiveFeatures[index])}
         userName={'John Doe'}
         userImageUrl={'https://link_to_image.com'| undefined}
      />
   );
}

Customization

You can test out the live version of the component and refer to details on customisation in the interactive storybook

Sidebar

Build your custom implementation of the sidebar UI as shown in the interactive storybook

Usage

The below interface(s) and enum will be needed to initialize and maintain your own implementation of the Sidebar.

enum ChatType

The type of chats available

Chat Type	Description
ChatType.USER	Chat with a user contact
ChatType.GROUP	Chat with a group

interface RecentChat

Defines an item in the sidebar

Variable	Type	Description
contactId	string	The unique identifier for the contact user.userId for ChatType.USER and group.clientGroupId for ChatType.GROUP
chatType	ChatType	The enum value defining the type of chat
imageUrl	optional string	The image URL for the specific chat
lastMessageKey	string	The unique identifier for the last message in this chat
lastMessageTime	number	The numeric timestamp of the last message in this chat

interface User

Can be imported from to the @applozic/core-sdk

interface Group

Can be imported from to the @applozic/core-sdk

Example

import { useState } from 'react';
import { Sidebar, RecentChat, ChatType } from '@applozic/ui-components';
import { User, Group } from '@applozic/core';

function App() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(false);
   const [searchQuery, setSearchQuery] = useState<string>();
   return(
      <Sidebar
         selectedFeatureTab={activeTab}
         isCollapsed={sidebarCollapsed}
         recentChats={recentChats}
         users={users}
         search={{
            searchValue: searchQuery,
            setSearchValue: setSearchQuery,
            setCollapsed: setSidebarCollapsed,
            isCollapsed: sidebarCollapsed
         }}
         isFetchingNextRecentChatsPage={'true|false'}
         fetchNextRecentChats={() =>
         // fetch next page of `RecentChat`
         }
         selfDetails={{
            name: "John Doe",
            imageUrl: "https://link-to-image.com",
            onCloseClicked: () => {
               // handle self detail panel close
            },
            onLogOutClicked: () =>{
               // handle user logout
            },
            onUpdateValue: (key, value) => {
               // handle user update
            }
         }}
         handleItemClick={(type, contactId) => {
            // Set the active chat and other logic
         }}
         onCreateGroup={async (newGroup: INewGroup) => {
            // handle create group promise
         }}
         onClearConversation={(chatType, contactId) => {
            // handle create group promise
         }}
    />)
}

Customization

SidebarProps

You can test out the live version of the component and refer to details on customisation in the interactive storybook

SearchProps : search

Property	Type	Description
searchValue	string, undefined	Search query to filter the sidebar items
setSearchValue	(query: string) => void	Callback to update the search query
isCollapsed	boolean	The current collapsed state of the sidebar
setCollapsed	(state: boolean) => void	Callback to toggle the collapsed or expanded state of the sidebar

SelfDetailProps : selfDetails

Property	Type	Description
name	string	name of logged in user
imageUrl	string, undefined	image url of the logged in user
metaProps	{ items:[{header: string, text:string}] }, undefined	a list of ChatDetail metadata like email, phone number
onCloseClicked	() => void \ Promise<void>	Callback to handle the close action
onLogOutClicked	() => void \ Promise<void>	Callback to handle the logout action
onUpdateValue	`(key: string, value: string \ undefined ) => void	Promise`

ChatPanel

Build your custom implementation of the ChatPanel UI. This component includes:

1. User Presence Component
2. Chat Messages Window
   1. Message information and status
   2. Pagination
   3. Group chat meta data
   4. Hover actions
      1. Delete chat
3. Send Message
   1. Attachments
   2. GIFs
   3. Geo-Location
   4. Audio Recording

Usage

The below interface(s) and enum will be needed to initialize and maintain your own implementation of the Sidebar.

interface Message

Property	Type	Description
key	string	An unique identifier for the message
messageText	string	The text content of the message
messageText	string	The text content of the message
isReply	boolean	Is this message sent by the logged in user?
timeStamp	Date	The sent timestamp of the message
fromUserId	string	The userId of the sender
status	MessageStatus	The status of the particular message
reactions	UNUSED	UNUSED
file	FileMeta	The metadata of an attached file refer to FileMeta
contentType	MessageContentType	The contentType of a message which defines the overall behaviour

interface ActiveChat

Example

const function App(){
   return(
      <ChatPanel
         self={self}
         messages={messages}
         activeChat={activeChat}
         handleTyping={typing => {
            // handle the typing action in the message box
         }}
         clearUnreadNotifications={() => {
            // handle clearing all unread notification on window mount
         }}
         onSendLocation={position => {
               // handle sending a location message
         }}
         onFileSelected={()=>
            // `File` object for upload/other actions after selection
         }
         fetchNextPage={() => {
         // handle fetching the next page when the last message reaches the top of the screen.
         }}
         isFetchingNextPage={'true|false'}
         hasNextPage={'true|false'}
         handleSendFile={async file => {
         // handle sending only file.
         }}
         onMessageDelete={(message, deleteForAll) => {
         // handle deletion of message on selection from the hover dropdown
         }}
         handleSendFileAndText={(text, fileMeta) => {
            // handle sending file and text from the message box
         }}
    />)
}

Customization

You can test out the live version of the component and refer to details on customisation in the interactive storybook