21 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/Signup/style.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 | import { CometChatTheme, fontHelper } from "@cometchat/uikit-resources";
3 |
4 | export function formStyle() : CSSProperties {
5 | return {
6 | display: "flex",
7 | flexDirection: "column",
8 | rowGap: "16px"
9 | };
10 | }
11 |
12 | export function generateUidCheckboxStyle() : CSSProperties {
13 | return {
14 | width: "24px",
15 | height: "24px",
16 | cursor: "pointer"
17 | };
18 | }
19 |
20 | export function generateUidStyle() : CSSProperties {
21 | return {
22 | display: "flex",
23 | columnGap: "4px",
24 | alignItems: "center",
25 | marginBottom: "16px"
26 | };
27 | }
28 |
29 | export function checkboxTextStyle(theme : CometChatTheme) : CSSProperties {
30 | return {
31 | font: fontHelper(theme.typography.subtitle2),
32 | color: theme.palette.getAccent600("light")
33 | };
34 | }
35 |
36 | export function submitBtnStyle(theme : CometChatTheme) : CSSProperties {
37 | return {
38 | font: fontHelper(theme.typography.subtitle1),
39 | color: theme.palette.getAccent900("light"),
40 | backgroundColor: theme.palette.getPrimary(),
41 | padding: "8px 4px",
42 | borderRadius: "8px",
43 | border: `1px solid ${theme.palette.getAccent100("light")}`,
44 | cursor: "pointer"
45 | };
46 | }
47 |
48 | export function errorMessageStyle(theme : CometChatTheme) : CSSProperties {
49 | return {
50 | font: fontHelper(theme.typography.subtitle2),
51 | color: theme.palette.getError(),
52 | height: "48px",
53 | overflowY: "auto"
54 | };
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/Button/index.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties, useRef } from "react";
2 | import { useRefSync } from "../../custom-hooks";
3 | import { Effects } from "./effects";
4 |
5 | export type ButtonStyle = {
6 | buttonTextFont? : string,
7 | buttonTextColor? : string,
8 | buttonIconTint? : string
9 | } & CSSProperties;
10 |
11 | interface IButtonProps {
12 | text? : string,
13 | hoverText? : string,
14 | iconURL? : string,
15 | disabled? : boolean,
16 | buttonStyle? : ButtonStyle,
17 | onClick? : (customEvent : CustomEvent<{event : PointerEvent}>) => void
18 | };
19 |
20 | export function Button(props : IButtonProps) {
21 | const {
22 | text,
23 | hoverText,
24 | iconURL,
25 | disabled,
26 | buttonStyle,
27 | onClick
28 | } = props;
29 |
30 | const ref = useRef
29 | Shared
30 |
31 |
39 |
46 |
40 |
42 |
43 |
45 |
43 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/CreateGroupWrapper/index.tsx:
--------------------------------------------------------------------------------
1 | import { createGroupStyle, createGroupWrapperStyle } from "./style";
2 | import { useContext, useEffect, useRef } from "react";
3 |
4 | import { CometChatThemeContext } from "@cometchat/chat-uikit-react";
5 | import { useNavigate } from "react-router-dom";
6 |
7 | type CreateGroupWrapperProps = { isMobileView : boolean };
8 |
9 | export function CreateGroupWrapper({ isMobileView } : CreateGroupWrapperProps) {
10 | const createGroupRef = useRef
37 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/ResourcesCardList/index.tsx:
--------------------------------------------------------------------------------
1 | import { CardList } from "../CardList";
2 | import { CometChatThemeContext } from "@cometchat/chat-uikit-react";
3 | import { ICardProps } from "../Card";
4 | import Localize from "../../assets/localize.png";
5 | import SoundSmall from "../../assets/sound-small.png";
6 | import Theme from "../../assets/theme.png";
7 | import { fontHelper } from "@cometchat/uikit-resources";
8 | import { useContext } from "react";
9 |
10 | const cardDataList : Omit
40 | handleClick("Voice call button clicked")}
43 | onVideoCallClick = {() => handleClick("Video call button clicked")}
44 | callButtonsStyle = {callButtonsStyle()}
45 | {...otherProps}
46 | />
47 |
48 | );
49 | }
--------------------------------------------------------------------------------
/src/assets/call-log-history.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
14 | 
15 |
16 |
17 | ## Prerequisites
18 |
19 | - Ensure that you have Node.js and npm installed:
20 |
21 | ```sh
22 | npm install npm@latest -g
23 | ```
24 |
25 | - Sign up for a [CometChat](https://app.cometchat.com/) account to get your app credentials: _`App ID`_, _`Region`_, and _`Auth Key`_
26 |
27 |
28 | ## Installation
29 | 1. Clone the repository:
30 | ```sh
31 | git clone https://github.com/cometchat/cometchat-sample-app-react.git
32 | ```
33 | 2. Navigate to the cloned directory:
34 | ```sh
35 | cd cometchat-sample-app-react
36 | ```
37 | 3. Install dependencies:
38 | ```sh
39 | npm install
40 | ```
41 | 4. Enter your CometChat _`App ID`_, _`Region`_, and _`Auth Key`_ in the [src/AppConstants.ts](https://github.com/cometchat/cometchat-sample-app-react/blob/v4/src/AppConstants.ts) file:
42 | https://github.com/cometchat/cometchat-sample-app-react/blob/ce2a0d3460cabd9f0500f499c008ca930111f842/src/AppConstants.ts#L1-L7
43 | 5. Run the project locally to see all CometChat features in action:
44 | ```
45 | npm run start
46 | ```
47 |
48 |
49 |
50 | ## Help and Support
51 | For issues running the project or integrating with our UI Kits, consult our [documentation](https://www.cometchat.com/docs/react-uikit/integration) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](http://app.cometchat.com/).
52 |
--------------------------------------------------------------------------------
/src/components/CardList/Shared/Bubbles/AudioBubble/index.tsx:
--------------------------------------------------------------------------------
1 | import { componentDetailModalCloseIconStyle, componentDetailsModalCloseIconWrapperStyle, componentDetailsModalDescriptionStyle, componentDetailsModalHeaderStyle, componentDetailsModalStyle, componentDetailsModalTitleStyle, loadingComponentModalStyle } from "../../style";
2 |
3 | import CloseIcon from "../assets/close2x.png";
4 | import {CometChatThemeContext} from "@cometchat/chat-uikit-react"
5 | import SampleAudio from "./sample.mp3"
6 | import { useContext } from "react";
7 |
8 | const AudioBubble = (props:any) => {
9 | const {
10 | activeComponent,
11 | handleCloseComponentModal,
12 | showComponentModal,
13 | } = props;
14 | let showModal = false;
15 | const bubbleSlug = "audio-bubble"
16 | if(showComponentModal && activeComponent === bubbleSlug)
17 | showModal = true
18 | const { theme } = useContext(CometChatThemeContext);
19 | const themeMode = theme.palette.mode
20 | return (
21 |
22 |
15 |
25 |
)
40 |
41 | }
42 | export { AudioBubble };
--------------------------------------------------------------------------------
/src/components/MessagesCardList/index.tsx:
--------------------------------------------------------------------------------
1 | import { ICardProps } from "../Card";
2 | import Sidebar from "../../assets/sidebar.png";
3 | import ListWrapper from "../../assets/listwrapper.png";
4 | import List from "../../assets/list.png";
5 | import Composer from "../../assets/composer.png";
6 | import InfoIcon from "../../assets/info.svg"
7 | import { CardList } from "../CardList";
8 |
9 | const cardDataList : Omit
28 |
39 |
29 | 
31 |
32 | Audio Bubble
30 |
33 | CometChatAudioBubble displays a media message containing an audio" "To learn more about this component tap here.
34 |
35 |
36 |
38 |
27 |
)
42 |
43 | }
44 | export { ImageBubble };
--------------------------------------------------------------------------------
/src/components/CardList/Shared/Bubbles/VideoBubble/index.tsx:
--------------------------------------------------------------------------------
1 | import { componentDetailModalCloseIconStyle, componentDetailsModalCloseIconWrapperStyle, componentDetailsModalDescriptionStyle, componentDetailsModalHeaderStyle, componentDetailsModalStyle, componentDetailsModalTitleStyle, loadingComponentModalStyle } from "../../style";
2 |
3 | import CloseIcon from "../assets/close2x.png";
4 | import {CometChatThemeContext} from "@cometchat/chat-uikit-react"
5 | import SampleVideo from "./aurora.mp4"
6 | import { useContext } from "react";
7 |
8 | const VideoBubble = (props:any) => {
9 | const {
10 | activeComponent,
11 | handleCloseComponentModal,
12 | showComponentModal,
13 | } = props;
14 | let showModal = false;
15 | const bubbleSlug = "video-bubble"
16 | if(showComponentModal && activeComponent === bubbleSlug)
17 | showModal = true
18 | const videoStyle = {background: "#e4e1e1",borderRadius:"8px",margin: "auto", display: "block"}
19 | const { theme } = useContext(CometChatThemeContext);
20 | const themeMode = theme.palette.mode
21 | return (
22 |
23 |
30 |
41 |
31 |
33 |
34 | Image Bubble
32 |
35 | CometChatImageBubble displays a media message containing an image.
36 |
37 |
38 |
39 |
40 |
26 |
)
41 |
42 | }
43 | export { VideoBubble };
--------------------------------------------------------------------------------
/src/components/CardList/Shared/style.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 | export function loadingComponentModalStyle(showModal : boolean) : CSSProperties {
3 | return {
4 | height: "100%",
5 | width: "100%",
6 | background: "#a1a1a1e6",
7 | position: "absolute",
8 | top: "50%",
9 | left: "50%",
10 | transform: "translate(-50%, -50%)",
11 | display: showModal ? "flex" : "none",
12 | zIndex: 1
13 | };
14 | }
15 |
16 | export function componentDetailsModalStyle(themeMode: string) : CSSProperties {
17 | return {
18 | height: "auto",
19 | width: "100%",
20 | maxWidth: "300px",
21 | minHeight: "150px",
22 | transform: "translate(-50%, -50%)",
23 | left: "50%",
24 | top:"50%",
25 | position: "absolute",
26 | zIndex: "10",
27 | padding: "12px 16px",
28 | borderRadius: "12px",
29 | display: "flex",
30 | flexDirection: "column",
31 | justifyContent: "space-between",
32 | backgroundColor: themeMode === "dark" ? "black" : "white",
33 | color: themeMode === "dark" ? "white" : "black",
34 | boxShadow: "rgba(20, 20, 20, 0.33) 0px 0px 3px",
35 | maxHeight:"70%",
36 | overflow:"auto",
37 | WebkitScrollSnapType:"none"
38 | }
39 | };
40 |
41 | export const componentDetailsModalHeaderStyle = {
42 | textAlign: "left" as "left",
43 | fontWeight: "700",
44 | fontSize: "15px",
45 | display: "flex",
46 | width: '100%',
47 | justifyContent: 'space-between',
48 | color: "inherit"
49 | }
50 |
51 | export const componentDetailsModalTitleStyle = {
52 | display: "flex",
53 | alignItems: "center",
54 | justifyContent: "center"
55 | }
56 |
57 | export const componentDetailsModalCloseIconWrapperStyle = {
58 | height: "30px",
59 | width: "30px",
60 | cursor: "pointer",
61 | }
62 |
63 | export const componentDetailsModalDescriptionStyle = {
64 | marginTop: "10px",
65 | textAlign: "left" as "left",
66 | fontWeight: "400",
67 | fontSize: "13px",
68 | color: "#777777",
69 | lineHeight:"17px"
70 | }
71 |
72 | export const componentDetailModalCloseIconStyle = {
73 | width: "24px"
74 | }
75 |
76 | export const tabListStyle = {
77 | width: "24px"
78 | }
--------------------------------------------------------------------------------
/src/custom-hooks.ts:
--------------------------------------------------------------------------------
1 | import { CometChat } from "@cometchat/chat-sdk-javascript";
2 | import { useCallback, useRef, useState } from "react";
3 |
4 | /**
5 | * Sets the created ref to the `value` passed
6 | *
7 | * @remarks
8 | * After the initial call of this hook, the internal ref is set to the `value` passed to this hook after the component has rendered completely.
9 | * So the returned ref will not have the updated value while the component renders
10 | */
11 | export function useRefSync
29 |
40 |
30 |
32 |
33 | Video Bubble
31 |
34 | CometChatVideoBubble component displays a media message containing a video which is downloadable.
35 |
36 |
37 |
38 |
39 |
49 |
60 | );
61 | }
62 |
63 | function getArrow() {
64 | if (imageInfo) {
65 | return null;
66 | }
67 | return (
68 |
52 | {title}
53 |
54 |
57 | {description}
58 |
59 |
37 |
)
52 |
53 | }
54 | export { FileBubble };
--------------------------------------------------------------------------------
/src/components/CallsCardList/index.tsx:
--------------------------------------------------------------------------------
1 | import CallLogHistorySVG from "../../assets/call-log-history.svg";
2 | import CallLogParticipantsSVG from "../../assets/call-log-participants.svg";
3 | import CallLogRecordingsSVG from "../../assets/call-log-recordings.svg";
4 | import CallLogSVG from "../../assets/call-logs.svg";
5 | import { CardList } from "../CardList";
6 | import { ICardProps } from "../Card";
7 | import Sidebar from "../../assets/sidebar.png";
8 |
9 | const cardDataList : Omit
40 |
51 |
41 |
43 |
44 | File Bubble
42 |
45 | CometChatFileBubble displays a media message containing a file.
46 |
47 |
48 |
50 |
38 |
)
58 |
59 | }
60 | export { TextBubble };
--------------------------------------------------------------------------------
/src/components/LoginSignup/index.tsx:
--------------------------------------------------------------------------------
1 | import { cardStyle, chatHeaderTextStyle, contentContainerStyle, contentStyle, footerStyle, headerStyle, headerTitle, imageStyle, loginSignupStyle, mainContainerStyle, titleStyle, versionStyle } from "./style";
2 |
3 | import { CometChatThemeContext } from "@cometchat/chat-uikit-react";
4 | import Image from "../../assets/Image-518@1x.png";
5 | import { IsMobileViewContext } from "../../IsMobileViewContext";
6 | import { metaInfo } from "../../metaInfo";
7 | import { useContext } from "react";
8 |
9 | interface ILoginSignupProps {
10 | title : string,
11 | children : JSX.Element
12 | };
13 |
14 | export function LoginSignup(props : ILoginSignupProps) {
15 | const {
16 | title,
17 | children
18 | } = props;
19 |
20 | const { theme } = useContext(CometChatThemeContext);
21 | const isMobileView = useContext(IsMobileViewContext);
22 |
23 | function getHeader() {
24 | return (
25 |
41 |
57 |
42 |
44 |
45 | Text Bubble
43 |
46 | CometChatTextBubble component displays a text message.
47 |
48 |
49 |
56 |
50 |
52 |
53 |
55 |
28 |
44 | );
45 | }
46 |
47 | function getContent() {
48 | return (
49 |
31 | comet
32 |
35 | chat
36 |
37 |
38 |
41 | v{metaInfo.version}
42 |
43 |
52 | 
71 |
72 | );
73 | }
74 |
75 | function getFooter() {
76 | return (
77 |
55 |
66 |
58 | {title}
59 |
60 |
63 | {children}
64 |
65 |
80 | <>
81 |
82 | );
83 | }
84 |
85 | return (
86 |
89 |
97 | );
98 | }
99 |
--------------------------------------------------------------------------------
/src/components/LoginSignup/style.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 | import { CometChatTheme, fontHelper } from "@cometchat/uikit-resources";
3 |
4 | export function loginSignupStyle() : CSSProperties {
5 | return {
6 | height: "100%",
7 | display: "flex",
8 | justifyContent: "center"
9 | };
10 | }
11 |
12 | export function mainContainerStyle() : CSSProperties {
13 | return {
14 | width: "min(100%, 1400px)",
15 | height: "100%",
16 | display: "flex",
17 | flexDirection: "column",
18 | alignItems: "center",
19 | rowGap: "8px",
20 | boxSizing: "border-box",
21 | padding: "8px"
22 | };
23 | }
24 |
25 | export function headerStyle(theme : CometChatTheme) : CSSProperties {
26 | return {
27 | width: "100%",
28 | padding: "16px",
29 | display: "flex",
30 | justifyContent: "space-between",
31 | borderBottom: `1px solid ${theme.palette.getAccent100()}`
32 | };
33 | }
34 |
35 | export function contentContainerStyle() : CSSProperties {
36 | return {
37 | width: "100%",
38 | display: "flex",
39 | justifyContent: "center",
40 | alignItems: "center",
41 | columnGap: "8px"
42 | };
43 | }
44 |
45 | export function footerStyle(theme : CometChatTheme) : CSSProperties {
46 | return {
47 | padding: "16px",
48 | flexGrow: "1",
49 | font: fontHelper(theme.typography.subtitle2),
50 | color: theme.palette.getAccent500(),
51 | display: "flex",
52 | alignItems: "flex-end"
53 | };
54 | }
55 |
56 | export function chatHeaderTextStyle() : CSSProperties {
57 | return {
58 | fontWeight: "bold"
59 | };
60 | }
61 |
62 | export function contentStyle(isMobileView : boolean) : CSSProperties {
63 | return {
64 | display: "flex",
65 | flexDirection: "column",
66 | rowGap: "8px",
67 | width: isMobileView ? "80%" : "50%"
68 | };
69 | }
70 |
71 | export function titleStyle(theme : CometChatTheme) : CSSProperties {
72 | return {
73 | font: fontHelper(theme.typography.heading),
74 | color: theme.palette.getAccent()
75 | };
76 | }
77 |
78 | export function cardStyle() : CSSProperties {
79 | return {
80 | backgroundColor: "white",
81 | borderRadius: "8px",
82 | boxShadow: "0 0 8px rgb(20, 20, 20, 0.33)",
83 | padding: "16px"
84 | };
85 | }
86 |
87 | export function imageStyle(showImage : boolean) : CSSProperties {
88 | return {
89 | display: showImage ? "inline" : "none",
90 | width: "50%",
91 | backgroundSize: "contain"
92 | };
93 | }
94 |
95 | export function headerTitle(theme : CometChatTheme) : CSSProperties {
96 | return {
97 | font: fontHelper(theme.typography.name)
98 | };
99 | }
100 |
101 | export function versionStyle(theme : CometChatTheme) : CSSProperties {
102 | return {
103 | font: fontHelper(theme.typography.subtitle2),
104 | color: theme.palette.getAccent400()
105 | };
106 | }
107 |
--------------------------------------------------------------------------------
/src/components/CardList/index.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties, useContext, useState } from "react";
2 | import { Card, ICardProps } from "../Card";
3 | import { useLocation, useNavigate } from "react-router-dom";
4 |
5 | import { CometChatThemeContext } from "@cometchat/chat-uikit-react";
6 | import { Shared } from "./Shared";
7 | import { fontHelper } from "@cometchat/uikit-resources";
8 |
9 | interface ICardListProps {
10 | title : string,
11 | cardDataList : Omit
92 | {getHeader()}
93 | {getContent()}
94 | {getFooter()}
95 |
96 |
51 | {
89 | );
90 | }
91 |
--------------------------------------------------------------------------------
/src/components/CardList/Shared/Bubbles/Localize/index.tsx:
--------------------------------------------------------------------------------
1 | import { componentDetailModalCloseIconStyle, componentDetailsModalCloseIconWrapperStyle, componentDetailsModalDescriptionStyle, componentDetailsModalHeaderStyle, componentDetailsModalStyle, componentDetailsModalTitleStyle, loadingComponentModalStyle } from "../../style";
2 | import { useContext, useState } from "react";
3 |
4 | import CloseIcon from "../assets/close2x.png";
5 | import { CometChatLocalize } from "@cometchat/uikit-resources";
6 | import {CometChatThemeContext} from "@cometchat/chat-uikit-react"
7 | import Switch from "react-switch";
8 | import { useNavigate } from "react-router-dom";
9 |
10 | const Localize = (props:any) => {
11 | const [languageChoice, setLanguageChoice] = useState("english")
12 | const {
13 | activeComponent,
14 | handleCloseComponentModal,
15 | showComponentModal,
16 | } = props;
17 | let showModal = false;
18 | const bubbleSlug = "localize"
19 | if(showComponentModal && activeComponent === bubbleSlug)
20 | showModal = true
21 | const handleChange = (checked:boolean) => {
22 | setLanguageChoice(checked ? "english" : "hindi")
23 | CometChatLocalize.setLocale(checked ? "en" : "hi")
24 | }
25 | const navigate = useNavigate();
26 | const handleNavigateToConversations = () => {
27 | navigate("/home/chats-module/conversations-with-messages");
28 | }
29 | const { theme } = useContext(CometChatThemeContext);
30 | const themeMode = theme.palette.mode
31 | return (
32 |
33 |
60 | {title}
61 |
62 |
68 |
88 |
75 | {
76 | cardDataList.map(cardData => (
77 | handleClick(cardData)}
83 | />
84 | ))
85 | }
86 |
87 |
36 |
57 | )
58 |
59 | }
60 | export { Localize };
--------------------------------------------------------------------------------
/src/components/CreateGroupWrapper/style.ts:
--------------------------------------------------------------------------------
1 | import { CreateGroupStyle } from "@cometchat/uikit-elements";
2 | import { CSSProperties } from "react";
3 | import { CometChatTheme, fontHelper } from "@cometchat/uikit-resources";
4 |
5 | export function createGroupStyle(isMobileView : boolean, theme : CometChatTheme) : CreateGroupStyle {
6 | return {
7 | boxShadow: `${theme.palette.getAccent100()} 4px 16px 32px 4px`,
8 | groupTypeTextFont: fontHelper(theme.typography.subtitle2),
9 | groupTypeBorder: `1px solid ${theme.palette.getAccent600()}`,
10 | groupTypeBorderRadius: "0",
11 | groupTypeTextColor: theme.palette.getAccent(),
12 | groupTypeTextBackground: "transparent",
13 | groupTypeBackground: theme.palette.getAccent100(),
14 | activeGroupTypeTextFont: fontHelper(theme.typography.subtitle2),
15 | activeGroupTypeTextColor: theme.palette.getAccent(),
16 | activeGroupTypeBackground: theme.palette.getAccent900(),
17 | activeGroupTypeBoxShadow: `${theme.palette.getAccent200()} 0 3px 8px 0`,
18 | activeGroupTypeBorderRadius: "8px",
19 | activeGroupTypeBorder: "none",
20 | groupTypeTextBoxShadow: "none",
21 | groupTypeTextBorderRadius: "0",
22 | closeIconTint: theme.palette.getPrimary(),
23 | titleTextFont: fontHelper(theme.typography.title1),
24 | titleTextColor: theme.palette.getAccent(),
25 | errorTextFont: fontHelper(theme.typography.subtitle1),
26 | errorTextBackground: theme.palette.getError(),
27 | errorTextBorderRadius: "8px",
28 | errorTextBorder: "none",
29 | errorTextColor: theme.palette.getError(),
30 | nameInputPlaceholderTextFont: fontHelper(theme.typography.subtitle1),
31 | nameInputPlaceholderTextColor: theme.palette.getAccent600(),
32 | nameInputBackground: theme.palette.getAccent100(),
33 | nameInputTextFont: fontHelper(theme.typography.subtitle1),
34 | nameInputTextColor: theme.palette.getAccent(),
35 | nameInputBorder: "none",
36 | nameInputBorderRadius: "8px",
37 | nameInputBoxShadow: `${theme.palette.getAccent100()} 0 0 0 1px`,
38 | passwordInputPlaceholderTextFont: fontHelper(theme.typography.subtitle1),
39 | passwordInputPlaceholderTextColor: theme.palette.getAccent600(),
40 | passwordInputBackground: theme.palette.getAccent100(),
41 | passwordInputBorder: "none",
42 | passwordInputBorderRadius: "8px",
43 | passwordInputBoxShadow: `${theme.palette.getAccent100()} 0 0 0 1px`,
44 | passwordInputTextFont: fontHelper(theme.typography.subtitle1),
45 | passwordInputTextColor: theme.palette.getAccent(),
46 | createGroupButtonTextFont: fontHelper(theme.typography.text2),
47 | createGroupButtonTextColor: theme.palette.getAccent900(),
48 | createGroupButtonBackground: theme.palette.getPrimary(),
49 | createGroupButtonBorderRadius: "8px",
50 | createGroupButtonBorder: "none",
51 | height: "620px",
52 | width: isMobileView ? "290px" : "360px",
53 | borderRadius: "8px",
54 | background: theme.palette.getBackground(),
55 | border: `3px solid ${theme.palette.getAccent200()}`
56 | };
57 | }
58 |
59 | export function createGroupWrapperStyle(theme : CometChatTheme) : CSSProperties {
60 | return {
61 | background: theme.palette.getBackground(),
62 | display: "flex",
63 | justifyContent: "center",
64 | alignItems: "center",
65 | height: "100%"
66 | };
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/CardList/Shared/index.tsx:
--------------------------------------------------------------------------------
1 | import { AudioBubble } from "./Bubbles/AudioBubble";
2 | import { Avatar } from "./Bubbles/Avatar";
3 | import { Badge } from "./Bubbles/Badge";
4 | import { CardBubble } from "./Bubbles/CardBubble";
5 | import { FileBubble } from "./Bubbles/FileBubble";
6 | import { FormBubble } from "./Bubbles/FormBubble"
7 | import { SchedulerBubble } from "./Bubbles/SchedulerBubble";
8 | import { ImageBubble } from "./Bubbles/ImageBubble";
9 | import { ListItem } from "./Bubbles/ListItem";
10 | import { Localize } from "./Bubbles/Localize";
11 | import { Receipt } from "./Bubbles/Receipt";
12 | import { SoundManager } from "./Bubbles/SoundManager";
13 | import { StatusIndicator } from "./Bubbles/StatusIndicator";
14 | import { TextBubble } from "./Bubbles/TextBubble";
15 | import { Theme } from "./Bubbles/Theme";
16 | import { VideoBubble } from "./Bubbles/VideoBubble";
17 |
18 | const Shared = (props:any) => {
19 | const {
20 | activeComponent,
21 | handleCloseComponentModal,
22 | showComponentModal,
23 | } = props;
24 | return (
25 | <>
26 |
39 |
55 |
56 |
40 |
42 |
43 | Localize
41 |
44 | CometChatLocalize allows you to detect the language of your users based on their browser or device settings and set the language accordingly.
45 |
46 |
47 |
54 |
48 | Language
49 |
50 |
51 | हिन्दी
} checked={languageChoice === "english" ? true : false} checkedIcon={English
} />
53 |
32 |
62 | )
63 | }
64 | export { StatusIndicator };
--------------------------------------------------------------------------------
/src/components/CardList/Shared/Bubbles/Theme/index.tsx:
--------------------------------------------------------------------------------
1 | import { componentDetailModalCloseIconStyle, componentDetailsModalCloseIconWrapperStyle, componentDetailsModalDescriptionStyle, componentDetailsModalHeaderStyle, componentDetailsModalStyle, componentDetailsModalTitleStyle, loadingComponentModalStyle } from "../../style";
2 | import { useContext, useState } from "react";
3 |
4 | import CloseIcon from "../assets/close2x.png";
5 | import {CometChatThemeContext} from "@cometchat/chat-uikit-react"
6 | import Switch from "react-switch";
7 | import { useNavigate } from "react-router-dom";
8 |
9 | const Theme = (props:any) => {
10 |
11 | const [themeChoice, setThemeChoice] = useState("default")
12 | const {
13 | activeComponent,
14 | handleCloseComponentModal,
15 | showComponentModal,
16 | } = props;
17 | let showModal = false;
18 | const bubbleSlug = "theme"
19 | if(showComponentModal && activeComponent === bubbleSlug)
20 | showModal = true
21 | const handleModeChange = (checked:boolean) => {
22 | setThemeChoice(checked ? "default" : "custom")
23 | }
24 | const navigate = useNavigate();
25 | const handleNavigateToConversations = () => {
26 | if(themeChoice === "custom")
27 | {
28 | navigate("/home/chats-module/conversations-with-messages", {state: {changeThemeToCustom: true}});
29 | }
30 | else
31 | {
32 | navigate("/home/chats-module/conversations-with-messages", {state: {changeThemeToCustom: false}});
33 | }
34 | }
35 | const { theme } = useContext(CometChatThemeContext);
36 | const themeMode = theme.palette.mode
37 | return (
38 |
39 |
35 |
61 |
36 |
38 |
39 | StatusIndicator
37 |
40 | StatusIndicator component indicates whether a user is online or offline..
41 |
42 | {toggleState && (
43 |
)}
45 | {!toggleState && (
46 |
)}
48 |
49 |
50 |
60 |
51 | Status
52 |
53 |
54 | Offline
} checkedIcon={Online
} onChange={handleChange} checked={toggleState} />
59 |
42 |
63 | )
64 |
65 | }
66 | export { Theme };
--------------------------------------------------------------------------------
/src/components/CardList/Shared/Bubbles/SoundManager/index.tsx:
--------------------------------------------------------------------------------
1 | import { componentDetailModalCloseIconStyle, componentDetailsModalCloseIconWrapperStyle, componentDetailsModalDescriptionStyle, componentDetailsModalHeaderStyle, componentDetailsModalStyle, componentDetailsModalTitleStyle, loadingComponentModalStyle } from "../../style";
2 |
3 | import CloseIcon from "../assets/close2x.png";
4 | import { CometChatSoundManager } from '@cometchat/uikit-shared';
5 | import {CometChatThemeContext} from "@cometchat/chat-uikit-react"
6 | import { useContext } from "react";
7 |
8 | const SoundManager = (props:any) => {
9 | const {
10 | activeComponent,
11 | handleCloseComponentModal,
12 | showComponentModal,
13 | } = props;
14 | let showModal = false;
15 | const bubbleSlug = "sound-manager"
16 | if(showComponentModal && activeComponent === bubbleSlug)
17 | showModal = true
18 |
19 | const playIncoming = ()=>{
20 | CometChatSoundManager.play(CometChatSoundManager.Sound.incomingMessage)
21 | }
22 | const playOutgoing = ()=>{
23 | CometChatSoundManager.play(CometChatSoundManager.Sound.outgoingMessage)
24 | }
25 | const { theme } = useContext(CometChatThemeContext);
26 | const themeMode = theme.palette.mode
27 | return (
28 |
29 |
45 |
61 |
62 |
46 |
48 |
49 | Theme
47 |
50 | CometChatTheme is a style applied to every component and every view in the activity or component in the UI Kit.
51 |
52 |
53 |
60 |
54 | Theme
55 |
56 |
57 | Custom
} checked={themeChoice === "default" ? true : false} checkedIcon={Default
} />
59 |
32 |
)
54 |
55 | }
56 | export { SoundManager };
--------------------------------------------------------------------------------
/src/assets/group-member.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
71 |
--------------------------------------------------------------------------------
/src/components/CardList/Shared/Bubbles/Badge/index.tsx:
--------------------------------------------------------------------------------
1 | import {CometChatThemeContext, fontHelper} from "@cometchat/chat-uikit-react"
2 | import { badgeDemoStyle, colorButtonStyle, inputStyle } from "./style";
3 | import { componentDetailModalCloseIconStyle, componentDetailsModalCloseIconWrapperStyle, componentDetailsModalDescriptionStyle, componentDetailsModalHeaderStyle, componentDetailsModalStyle, componentDetailsModalTitleStyle, loadingComponentModalStyle } from "../../style";
4 | import { useContext, useState } from "react";
5 |
6 | import CloseIcon from "../assets/close2x.png";
7 |
8 | const Badge = (props:any) => {
9 | const {
10 | activeComponent,
11 | handleCloseComponentModal,
12 | showComponentModal,
13 | } = props;
14 | let showModal = false;
15 | const [badgeCountValue, setBadgeCountValue] = useState("10")
16 | const [badgeColor, setBadgeColor] = useState("#3399ff")
17 | const handleInputChange = (value:string) => {
18 | setBadgeCountValue(value)
19 | }
20 | const bubbleSlug = "badge"
21 | if(showComponentModal && activeComponent === bubbleSlug)
22 | showModal = true
23 |
24 | const { theme } = useContext(CometChatThemeContext);
25 | let badgeStyle = {
26 | textFont: fontHelper(theme.typography.subtitle2),
27 | textColor: theme.palette.getAccent("dark"),
28 | background:badgeColor,
29 | borderRadius:"16px",
30 | width:"fit-content",
31 | height:"16px",
32 | border: "none"
33 | }
34 | const handleColorChange = (color:string) => {
35 | setBadgeColor(color)
36 | }
37 | const themeMode = theme.palette.mode
38 | return (
39 |
40 |
35 |
53 |
36 |
38 |
39 | Sound Manager
37 |
40 | CometChatSoundManager allows you to play different types of audio which is required for incoming and outgoing events in UI Kit. for example, events like incoming and outgoing messages.
41 |
42 |
43 |
52 |
44 |
47 | Incoming Messages
45 |
46 |
48 |
51 | Outgoing Messages
49 |
50 |
43 |
)
72 |
73 | }
74 | export { Badge };
--------------------------------------------------------------------------------
/src/components/CardList/Shared/Bubbles/Avatar/index.tsx:
--------------------------------------------------------------------------------
1 | import {CometChatThemeContext, fontHelper} from "@cometchat/chat-uikit-react"
2 | import { avatarWrapperStyle, inputStyle } from "./style";
3 | import { componentDetailModalCloseIconStyle, componentDetailsModalCloseIconWrapperStyle, componentDetailsModalDescriptionStyle, componentDetailsModalHeaderStyle, componentDetailsModalStyle, componentDetailsModalTitleStyle, loadingComponentModalStyle } from "../../style";
4 | import { useContext, useState } from "react";
5 |
6 | import CloseIcon from "../assets/close2x.png";
7 | import Switch from "react-switch";
8 |
9 | const Avatar = (props:any) => {
10 | const {
11 | activeComponent,
12 | handleCloseComponentModal,
13 | showComponentModal,
14 | } = props;
15 | let showModal = false;
16 | const bubbleSlug = "avatar"
17 | if(showComponentModal && activeComponent === bubbleSlug)
18 | showModal = true
19 | const [avatarChoice, setAvatarChoice] = useState("image")
20 | const [avatarBorderRadius, setAvatarBorderRadius] = useState("28")
21 | const handleChange = (checked:boolean) => {
22 |
23 | setAvatarChoice(checked ? "image" : "name")
24 | }
25 | const handleInputChange = (value:string) => {
26 | setAvatarBorderRadius(value)
27 | }
28 | const { theme } = useContext(CometChatThemeContext);
29 | const themeMode = theme.palette.mode
30 | let avatarStyle = {
31 | borderRadius: `${avatarBorderRadius}px`,
32 | width: "36px",
33 | height: "36px",
34 | border: "1px solid #eee",
35 | backgroundColor: "transparent",
36 | backgroundSize: "cover",
37 | nameTextColor: theme.palette.getAccent900(),
38 | nameTextFont: fontHelper(theme.typography.subtitle1),
39 | outerViewBorder: "",
40 | outerViewBorderSpacing: "",
41 | }
42 | if(avatarChoice === "name")
43 | {
44 | avatarStyle.backgroundColor = "#6929ca"
45 | }
46 | return (
47 |
48 |
46 |
71 |
47 |
49 |
50 | Badge Count
48 |
51 | CometChatBadgeCount is a custom component which is used to display the unread message count. It can be used in places like ConversationListItem ,etc.
52 |
53 |
54 |
59 |
55 |
57 | handleInputChange(e.target.value)} />
58 |
60 |
70 |
61 | Background Color
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
51 |
76 | )
77 |
78 | }
79 | export { Avatar };
--------------------------------------------------------------------------------
/src/components/Login/style.ts:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from "react";
2 | import { CometChatTheme, fontHelper } from "@cometchat/uikit-resources";
3 |
4 | export function loginStyle() : CSSProperties {
5 | return {
6 | display: "flex",
7 | flexDirection: "column",
8 | rowGap: "48px"
9 | };
10 | }
11 |
12 | export function userBtnStyle(theme : CometChatTheme) : CSSProperties {
13 | return {
14 | flexBasis: "48%",
15 | padding: "8px",
16 | backgroundColor: theme.palette.getAccent100("light"),
17 | borderRadius: "8px",
18 | display: "flex",
19 | alignItems: "center",
20 | columnGap: "8px",
21 | cursor: "pointer",
22 | border: `1px solid ${theme.palette.getAccent100("light")}`,
23 | };
24 | }
25 |
26 | export function userAvatarStyle() : CSSProperties {
27 | return {
28 | width: "32px",
29 | height: "32px",
30 | backgroundColor: "white",
31 | borderRadius: "24px"
32 | };
33 | }
34 |
35 | export function defaultUserBtnsContainerStyle() : CSSProperties {
36 | return {
37 | display: "grid",
38 | gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
39 | gap: "8px"
40 | };
41 | }
42 |
43 | export function loginSampleUsersContainerStyle() : CSSProperties {
44 | return {
45 | display: "flex",
46 | flexDirection: "column",
47 | rowGap: "4px"
48 | }
49 | }
50 |
51 | export function loginBtnStyle(theme : CometChatTheme) : CSSProperties {
52 | return {
53 | backgroundColor: theme.palette.getPrimary(),
54 | font: fontHelper(theme.typography.subtitle1),
55 | color: theme.palette.getAccent900("light"),
56 | borderRadius: "8px",
57 | padding: "8px",
58 | border: `1px solid ${theme.palette.getAccent100("light")}`,
59 | width: "100%",
60 | cursor: "pointer"
61 | };
62 | }
63 |
64 | export function loginUidFormStyle() : CSSProperties {
65 | return {
66 | display: "flex",
67 | flexDirection: "column",
68 | rowGap: "8px"
69 | };
70 | }
71 |
72 | export function goToSignupContainerStyle() : CSSProperties {
73 | return {
74 | paddingTop: "16px",
75 | display: "flex",
76 | flexDirection: "column",
77 | rowGap: "16px",
78 | alignItems: "center",
79 | paddingBottom: "32px",
80 | textAlign: "center"
81 | };
82 | }
83 |
84 | export function goToSignupStyle(theme : CometChatTheme) : CSSProperties {
85 | return {
86 | font: fontHelper(theme.typography.title2),
87 | backgroundColor: "transparent",
88 | borderRadius: "4px",
89 | color: theme.palette.getAccent600("light"),
90 | textTransform: "capitalize",
91 | border: `1px solid ${theme.palette.getAccent100("light")}`,
92 | cursor: "pointer"
93 | };
94 | }
95 |
96 | export function usingSampleUsersTextStyle(theme : CometChatTheme) : CSSProperties {
97 | return {
98 | font: fontHelper(theme.typography.subtitle2),
99 | color: theme.palette.getAccent600("light")
100 | };
101 | }
102 |
103 | export function noAccountStyle(theme : CometChatTheme) : CSSProperties {
104 | return {
105 | font: fontHelper(theme.typography.subtitle1),
106 | color: theme.palette.getAccent600("light")
107 | };
108 | }
109 |
110 | export function userNameStyle(theme : CometChatTheme) : CSSProperties {
111 | return {
112 | textTransform: "capitalize",
113 | font: fontHelper(theme.typography.name),
114 | color: theme.palette.getAccent("light"),
115 | textAlign: "left"
116 | };
117 | }
118 |
119 | export function userUidStyle(theme : CometChatTheme) : CSSProperties {
120 | return {
121 | font: fontHelper(theme.typography.subtitle2),
122 | color: theme.palette.getAccent600("light")
123 | };
124 | }
125 |
126 | export function userNameAndUidContainerStyle() : CSSProperties {
127 | return {
128 | display: "flex",
129 | flexDirection: "column",
130 | rowGap: "2px",
131 | alignItems: "flex-start"
132 | };
133 | }
134 |
135 | export function errorMessageStyle(theme : CometChatTheme) : CSSProperties {
136 | return {
137 | font: fontHelper(theme.typography.subtitle2),
138 | color: theme.palette.getError()
139 | };
140 | }
141 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | When contributing to this repository, please first discuss the change you wish to make via issue,
4 | email, or any other method with the owners of this repository before making a change.
5 |
6 | Please note we have a code of conduct, please follow it in all your interactions with the project.
7 |
8 | ## Pull Request Process
9 |
10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a
11 | build.
12 | 2. Update the README.md with details of changes to the interface, this includes new environment
13 | variables, exposed ports, useful file locations and container parameters.
14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this
15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
17 | do not have permission to do that, you may request the second reviewer to merge it for you.
18 |
19 | ## Code of Conduct
20 |
21 | ### Our Pledge
22 |
23 | In the interest of fostering an open and welcoming environment, we as
24 | contributors and maintainers pledge to making participation in our project and
25 | our community a harassment-free experience for everyone, regardless of age, body
26 | size, disability, ethnicity, gender identity and expression, level of experience,
27 | nationality, personal appearance, race, religion, or sexual identity and
28 | orientation.
29 |
30 | ### Our Standards
31 |
32 | Examples of behavior that contributes to creating a positive environment
33 | include:
34 |
35 | * Using welcoming and inclusive language
36 | * Being respectful of differing viewpoints and experiences
37 | * Gracefully accepting constructive criticism
38 | * Focusing on what is best for the community
39 | * Showing empathy towards other community members
40 |
41 | Examples of unacceptable behavior by participants include:
42 |
43 | * The use of sexualized language or imagery and unwelcome sexual attention or
44 | advances
45 | * Trolling, insulting/derogatory comments, and personal or political attacks
46 | * Public or private harassment
47 | * Publishing others' private information, such as a physical or electronic
48 | address, without explicit permission
49 | * Other conduct which could reasonably be considered inappropriate in a
50 | professional setting
51 |
52 | ### Our Responsibilities
53 |
54 | Project maintainers are responsible for clarifying the standards of acceptable
55 | behavior and are expected to take appropriate and fair corrective action in
56 | response to any instances of unacceptable behavior.
57 |
58 | Project maintainers have the right and responsibility to remove, edit, or
59 | reject comments, commits, code, wiki edits, issues, and other contributions
60 | that are not aligned to this Code of Conduct, or to ban temporarily or
61 | permanently any contributor for other behaviors that they deem inappropriate,
62 | threatening, offensive, or harmful.
63 |
64 | ### Scope
65 |
66 | This Code of Conduct applies both within project spaces and in public spaces
67 | when an individual is representing the project or its community. Examples of
68 | representing a project or community include using an official project e-mail
69 | address, posting via an official social media account, or acting as an appointed
70 | representative at an online or offline event. Representation of a project may be
71 | further defined and clarified by project maintainers.
72 |
73 | ### Enforcement
74 |
75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
76 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
77 | complaints will be reviewed and investigated and will result in a response that
78 | is deemed necessary and appropriate to the circumstances. The project team is
79 | obligated to maintain confidentiality with regard to the reporter of an incident.
80 | Further details of specific enforcement policies may be posted separately.
81 |
82 | Project maintainers who do not follow or enforce the Code of Conduct in good
83 | faith may face temporary or permanent repercussions as determined by other
84 | members of the project's leadership.
85 |
86 | ### Attribution
87 |
88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
89 | available at [http://contributor-covenant.org/version/1/4][version]
90 |
91 | [homepage]: http://contributor-covenant.org
92 | [version]: http://contributor-covenant.org/version/1/4/
93 |
--------------------------------------------------------------------------------
/src/components/CardList/Shared/Bubbles/Receipt/index.tsx:
--------------------------------------------------------------------------------
1 | import {CometChatThemeContext, Receipts} from "@cometchat/chat-uikit-react"
2 | import { componentDetailModalCloseIconStyle, componentDetailsModalCloseIconWrapperStyle, componentDetailsModalDescriptionStyle, componentDetailsModalHeaderStyle, componentDetailsModalTitleStyle, loadingComponentModalStyle } from "../../style";
3 |
4 | import CloseIcon from "../assets/close2x.png";
5 | import {componentDetailsModalStyle} from "./style"
6 | import { useContext } from "react";
7 |
8 | export const Receipt = (props:any) => {
9 | const {
10 | activeComponent,
11 | handleCloseComponentModal,
12 | showComponentModal,
13 | } = props;
14 | let showModal = false;
15 | const bubbleSlug = "receipt"
16 | if(showComponentModal && activeComponent === bubbleSlug)
17 | showModal = true
18 | const receipt:typeof Receipts = Receipts
19 | const { theme } = useContext(CometChatThemeContext);
20 | const themeMode = theme.palette.mode
21 | const boxColor = themeMode === "dark" ? "#ccc" :"#464545"
22 | return (
23 |
24 |
54 |
75 |
55 |
57 |
58 | Avatar
56 |
59 | CometChatAvatar component displays an image or user/group avatar with fallback to the first two letters of the user name/group name.
60 |
61 |
62 | {avatarChoice === "image" && (
66 |
67 |
74 |
68 | Avatar type
69 |
70 |
71 | Name
} checked={avatarChoice === "image" ? true : false} checkedIcon={Image
} />
73 |
27 |
)
63 |
64 | }
--------------------------------------------------------------------------------
/src/components/MessageInformationWrapper/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | CometChatMessageBubble,
3 | CometChatMessageInformation,
4 | CometChatPalette,
5 | CometChatTheme,
6 | CometChatThemeContext,
7 | MessageBubbleAlignment,
8 | fontHelper,
9 | } from "@cometchat/chat-uikit-react";
10 | import { useContext, useMemo } from "react";
11 |
12 | import { CometChat } from "@cometchat/chat-sdk-javascript";
13 | import { useLocation } from "react-router-dom";
14 |
15 | export function MessageInformationWrapper() {
16 | const { state } = useLocation();
17 | const changeThemeToCustom = state?.changeThemeToCustom;
18 | const { theme } = useContext(CometChatThemeContext);
19 |
20 | const themeContext = useMemo(() => {
21 | let res = theme;
22 | if (changeThemeToCustom) {
23 | res = new CometChatTheme({
24 | palette: new CometChatPalette({
25 | mode: theme.palette.mode,
26 | primary: {
27 | light: "#D422C2",
28 | dark: "#D422C2",
29 | },
30 | accent: {
31 | light: "#07E676",
32 | dark: "#B6F0D3",
33 | },
34 | accent50: {
35 | light: "#39f",
36 | dark: "#141414",
37 | },
38 | accent900: {
39 | light: "white",
40 | dark: "black",
41 | },
42 | }),
43 | });
44 | }
45 | return { theme: res };
46 | }, [theme, changeThemeToCustom]);
47 | const getContentView = (message: CometChat.TextMessage) => {
48 | return (
49 |
30 |
62 |
31 |
33 |
34 | Message Receipt
32 |
35 | CometChatReceipt component renders the receipts such as sending, sent, delivered, read and error state indicator of a message..
36 |
37 |
38 |
51 |
39 |
42 | Progress Status
40 |
43 |
46 | Sent Receipt
44 |
47 |
50 | Delivered Receipt
48 |
52 |
61 |
53 |
56 | Read Receipt
54 |
57 |
60 | Error Status
58 |
69 |
87 | );
88 | };
89 | const messageObject: any = {
90 | getReceiver: () => {
91 | return {
92 | getAvatar: () =>
93 | "https://data-us.cometchat.io/assets/images/avatars/ironman.png",
94 | getBlockedByMe: () => false,
95 | getDeactivatedAt: () => 0,
96 | getHasBlockedMe: () => false,
97 | getLastActiveAt: () => 1693306209,
98 | getName: () => "Iron Man",
99 | getRole: () => "default",
100 | getStatus: () => "online",
101 | getUid: () => "superhero2",
102 | };
103 | },
104 | getSender: () => {
105 | return {
106 | getAvatar: () =>
107 | "https://data-us.cometchat.io/assets/images/avatars/ironman.png",
108 | getBlockedByMe: () => false,
109 | getDeactivatedAt: () => 0,
110 | getHasBlockedMe: () => false,
111 | getLastActiveAt: () => 1693306209,
112 | getName: () => "Iron Man",
113 | getRole: () => "default",
114 | getStatus: () => "online",
115 | getUid: () => "superhero1",
116 | };
117 | },
118 | getConversationId: () => "conversationId1234",
119 | getText: () => "Hello, how are you.",
120 | getSentAt: () => 1693322055785,
121 | getReadAt: () => 1693322055785,
122 | getDeliveredAt: () => 1693322055765,
123 | getReceiverType: () => "user",
124 | getReceiverId: () => "superhero2",
125 | getId: () => 1234,
126 | getType: () => "text",
127 | getCategory: () => "message",
128 | };
129 | return (
130 |