CarDoctor Call Chat

🚀 Tài liệu hướng dẫn sử dụng sdk

npm install cardoctor-comet-chat
# or
yarn add cardoctor-comet-chat

Thêm CSS

Thêm css vào Layout hoặc App.tsx để sử dụng toàn bộ css

import '@cometchat/chat-uikit-react/css-variables.css';
import 'cardoctor-comet-chat/dist/styles/CometChatApp.css'

I. Custom Hook

1. useCallChatInit

Usage

Sử dụng để khởi tạo cometChat. Dùng 1 lần duy nhất cho toàn bộ ứng dụng

const {user, loading} = useCallChatInit({
  appId: "",
  region: "",
  authToken: ""
})

Parameters

appId: string;
region: string;
language?: "vi" | "en-US";
authToken: string

Return

user: CometChat.User | null;
loading: boolean;

2. useGroupInfo

Usage

Sử dụng để lấy thông tin Group từ guid

const { loading,group} = useGroupInfo(guid)

Parameters

guid: string

Return

group: CometChat.Group | undefined;
loading: boolean;
error: CometChat.CometChatException | undefined

3. useCometChatNotificationList

Usage

Sử dụng để lấy tin nhắn chưa đọc dùng làm thông báo

const {conversation,fetchNext} = useCometChatNotificationList(30,true)

Parameters

limit?: number
unRead?: boolean

Return

conversation: CometChat.Conversation[] | undefined
hasMore: boolean
loading: boolean
readAll: () => void
fetchNext: () => Promise<void>
refresh: () => Promise<void>

4. useCometChatUser

Usage

Sử dụng để lấy user đang login và sự kiện logout

const {user,loading,error,logOutCometChat} = useCometChatUser()

Return

user: CometChat.User | undefined
loading: boolean
error: boolean
logOutCometChat: () => Promise<Object>

II. Real Time Hooks

1. useCometChatRealTimeMessage

Usage

Sử dụng để lấy real time các trạng thái tin nhắn

const {
  textMessageReceived,
  mediaMessageReceived,
  customMessageReceived,
  messageReceipt,
  messagesRead,
  typingIndicator,
  typingEnded,
  messageDeleted,
  messageEdited,
  interactiveMessageReceived,
  interactiveMessageCompleted,
  transientMessageReceived,
  messageReactionAdded,
  messageReactionRemoved
} = useCometChatRealTimeMessage("blo")

Parameters

uniqueId?: string

Return

textMessageReceived: CometChat.TextMessage | undefined
mediaMessageReceived: CometChat.MediaMessage | undefined
customMessageReceived: CometChat.CustomMessage | undefined
messageReceipt: CometChat.MessageReceipt | undefined
messagesRead: CometChat.MessageReceipt | undefined
typingIndicator: CometChat.TypingIndicator | undefined
typingEnded: CometChat.TypingIndicator | undefined
messageDeleted: CometChat.BaseMessage | undefined
messageEdited: CometChat.BaseMessage | undefined
interactiveMessageReceived: CometChat.InteractiveMessage | undefined
interactiveMessageCompleted: CometChat.InteractionReceipt | undefined
transientMessageReceived: CometChat.TransientMessage | undefined
messageReactionAdded: CometChat.ReactionEvent | undefined
messageReactionRemoved: CometChat.ReactionEvent | undefined

2. useCometChatRealTimeGroup

Usage

Sử dụng để lấy tin nhắn các trạng thái Real Time của Group

const {
  groupMemberJoined,
  groupMemberLeft,
  groupMemberKicked,
  groupMemberBanned,
  groupMemberUnbanned,
  groupMemberScopeChanged,
  memberAddedToGroup
} = useCometChatRealTimeGroup()

Parameters

uniqueId?: string

Return

groupMemberJoined: IOnGroupMemberJoined | undefined
groupMemberLeft: IGroupMemberLeft | undefined
groupMemberKicked: IGroupMemberKicked | undefined
groupMemberBanned: IGroupMemberBanned | undefined
groupMemberUnbanned: IGroupMemberUnbanned | undefined
groupMemberScopeChanged: IGroupMemberScopeChanged | undefined
memberAddedToGroup: IMemberAddedToGroup | undefined

III. Components

1. CometChatProvider

Usage

Là provider bọc toàn bộ cometchat

2. AppContextProvider

Usage

Là Context Provider bọc toàn bộ cometchat

<CometChatProvider>
	<AppContextProvider>
		{children}
	</AppContextProvider>
</CometChatProvider>

3. CometChatListGroup

Usage

Là Component lấy danh sách các group chat theo nhu cầu

<CometChatListGroup
	setGroup={setGroup}
	limit={30}
	tags={[""]}
	hideSearch={true}
	headerView={<h2>abc</h2>}
	showScrollBar={false}
/>

Parameters

setGroup: React.Dispatch<React.SetStateAction<Group | undefined>>;
limit?: number;
tags?: string[];
hideSearch?: boolean;
headerView?: React.JSX.Element
showScrollBar?: boolean

Default Value

limit = 30
tags = [""]
hideSearch=false
headerView=null
showScrollBar=false

4. CometChatHome

Usage

Là Component hiển thị khung chat

<CometChatHome
	defaultGroup={group}
	handleUpload={async (file: File) => {}}
	enableUploadContract={true}
	titleView={<span>title here</span>}
	showBackListGroupIcon={true}
	onBackListGroup={()=>console.log("handle event onClick back icon)}
  AudioCallButton={AudioCallButton}
  VideoCallButton={VideoCallButton}
/>

Parameters

defaultGroup: Group | undefined
handleUpload: ((file: File) => Promise<UploadFileContractResult>) | undefined
enableUploadContract: boolean | undefined
titleView?: React.JSX.Element;
showBackListGroupIcon?: boolean
onBackListGroup?: () => void;
loadingView?:React.JSX.Element
emptyView?:React.JSX.Element
errorView?:React.JSX.Element
AudioCallButton: React.ElementType
VideoCallButton: React.ElementType