From 72ad3c65c149b10bc47bbb3bcbf15eaff5ef1101 Mon Sep 17 00:00:00 2001 From: Bhupendra Negi Date: Wed, 3 Jul 2024 16:53:08 +0530 Subject: [PATCH 1/8] add delay to login --- template/src/SDKAppWrapper.tsx | 8 +-- template/src/components/EventsConfigure.tsx | 1 + template/src/components/SdkApiContext.tsx | 5 +- .../src/components/chat/chatConfigure.tsx | 56 +++++++++++++------ .../src/components/room-info/useRoomInfo.tsx | 1 + template/src/rtm-events-api/LocalEvents.ts | 1 + template/src/rtm-events/constants.ts | 2 + template/src/utils/SdkMethodEvents.ts | 2 +- template/src/utils/useCreateRoom.ts | 11 +++- template/src/utils/useJoinRoom.ts | 9 ++- template/src/utils/useSidePanel.tsx | 22 ++++++++ 11 files changed, 93 insertions(+), 25 deletions(-) diff --git a/template/src/SDKAppWrapper.tsx b/template/src/SDKAppWrapper.tsx index 5caf375ef..e7028d7f2 100644 --- a/template/src/SDKAppWrapper.tsx +++ b/template/src/SDKAppWrapper.tsx @@ -21,13 +21,13 @@ export interface AppBuilderSdkApiInterface { joinRoom: ( roomDetails: string | meetingData, userName?: string, - preference?: {disableShareTile: boolean}, + preference?: {disableShareTile?: boolean; preventChatAutoLogin?: boolean}, ) => Promise; joinPrecall: ( roomDetails: string | meetingData, userName?: string, skipPrecall?: boolean, - preference?: {disableShareTile: boolean}, + preference?: {disableShareTile?: boolean; preventChatAutoLogin?: boolean}, ) => Promise< [ meetingData, @@ -73,7 +73,7 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = { logger.log(LogSource.SDK, 'Event', 'emiting event for joinRoom - join', { room: roomDetails, userName: userName, - preference: preference + preference: preference, }); return await SDKMethodEventsManager.emit( 'join', @@ -87,7 +87,7 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = { logger.log(LogSource.SDK, 'Event', 'emiting event for joinPrecall - join', { room: roomDetails, userName: userName, - preference: preference + preference: preference, }); if (!$config.PRECALL) { logger.error( diff --git a/template/src/components/EventsConfigure.tsx b/template/src/components/EventsConfigure.tsx index ae0de9b5d..9efbcaaa3 100644 --- a/template/src/components/EventsConfigure.tsx +++ b/template/src/components/EventsConfigure.tsx @@ -786,6 +786,7 @@ const EventsConfigure: React.FC = props => { events.off(EventNames.BOARD_COLOR_CHANGED); events.off(EventNames.STT_ACTIVE); events.off(EventNames.STT_LANGUAGE); + events.off(EventNames.ENABLE_CHAT_LOGIN); }; }, []); diff --git a/template/src/components/SdkApiContext.tsx b/template/src/components/SdkApiContext.tsx index 8ee3918f2..f4aa487a6 100644 --- a/template/src/components/SdkApiContext.tsx +++ b/template/src/components/SdkApiContext.tsx @@ -27,7 +27,10 @@ type SdkApiContextInterface = { meetingDetails?: Partial; userName: string; skipPrecall: boolean; - preference: {disableShareTile: boolean}; + preference: { + disableShareTile?: boolean; + preventChatAutoLogin?: boolean; + }; promise: extractPromises<_InternalSDKMethodEventsMap['join']>; } | { diff --git a/template/src/components/chat/chatConfigure.tsx b/template/src/components/chat/chatConfigure.tsx index 2da799616..9919019de 100644 --- a/template/src/components/chat/chatConfigure.tsx +++ b/template/src/components/chat/chatConfigure.tsx @@ -2,6 +2,8 @@ import {createHook} from 'customization-implementation'; import React, {createContext, useState, useEffect} from 'react'; import AgoraChat from 'agora-chat'; import {useRoomInfo} from '../room-info/useRoomInfo'; +import events from '../../rtm-events-api'; +import {EventNames} from '../../rtm-events'; import {UidType, useContent} from 'customization-api'; import { @@ -18,6 +20,9 @@ import { useChatUIControls, } from '../../components/chat-ui/useChatUIControls'; import {logger, LogSource} from '../../logger/AppBuilderLogger'; +import LocalEventEmitter, { + LocalEventsEnum, +} from '../../rtm-events-api/LocalEvents'; export interface FileObj { url: string; @@ -53,12 +58,20 @@ export const chatConfigureContext = const ChatConfigure = ({children}) => { const [open, setOpen] = useState(false); - const {data} = useRoomInfo(); + const {data, roomPreference} = useRoomInfo(); + const [allowChatLogin, setAllowChatLogin] = useState( + () => !roomPreference.preventChatAutoLogin, + ); + + // exponse onClick Chat so that this can be set truel + //const allowChatLogin = !roomPreference?.preventChatAutoLogin; + logger.debug(LogSource.Internals, 'CHAT', `Allow Chat Login`, allowChatLogin); + const connRef = React.useRef(null); - const {defaultContent} = useContent(); + const {privateChatUser, setUploadStatus, setUploadedFiles, uploadedFiles} = useChatUIControls(); - const defaultContentRef = React.useRef(defaultContent); + const { addMessageToPrivateStore, showMessageNotification, @@ -68,13 +81,18 @@ const ChatConfigure = ({children}) => { } = useChatMessages(); const {store} = React.useContext(StorageContext); - React.useEffect(() => { - defaultContentRef.current = defaultContent; - }, [defaultContent]); - let newConn = null; + const enableChatCallback = () => { + logger.debug(LogSource.Internals, 'CHAT', `enable chat login callback`); + setAllowChatLogin(true); + }; + useEffect(() => { + LocalEventEmitter.on(LocalEventsEnum.ENABLE_CHAT_LOGIN, enableChatCallback); + events.on(EventNames.ENABLE_CHAT_LOGIN, () => { + enableChatCallback(); + }); const initializeChatSDK = async () => { try { // disable Chat SDK logs @@ -307,16 +325,22 @@ const ChatConfigure = ({children}) => { }; // initializing chat sdk - initializeChatSDK(); + if (allowChatLogin) { + initializeChatSDK(); + } else { + logger.debug(LogSource.Internals, 'CHAT', `delay chat login`); + } return () => { - newConn.close(); - logger.log( - LogSource.Internals, - 'CHAT', - `Logging out User ${data.uid} from Agora Chat Server`, - ); + if (newConn) { + newConn.close(); + logger.log( + LogSource.Internals, + 'CHAT', + `Logging out User ${data.uid} from Agora Chat Server`, + ); + } }; - }, []); + }, [allowChatLogin]); const sendChatSDKMessage = ( option: ChatOption, @@ -327,7 +351,7 @@ const ChatConfigure = ({children}) => { const localFileUrl = option?.ext?.file_url || ''; //add channel name so to prevent cross channel message mixup when same user joins two diff channels // this is filtered on msgRecived event - option.ext = {...option?.ext, channel: data?.channel}; + option.ext = {...option?.ext}; //@ts-ignore const msg = AgoraChat.message.create(option); connRef.current diff --git a/template/src/components/room-info/useRoomInfo.tsx b/template/src/components/room-info/useRoomInfo.tsx index f174af73e..25dd66dd7 100644 --- a/template/src/components/room-info/useRoomInfo.tsx +++ b/template/src/components/room-info/useRoomInfo.tsx @@ -116,6 +116,7 @@ export const RoomInfoDefaultValue: RoomInfoContextInterface = { }, roomPreference: { disableShareTile: false, + preventChatAutoLogin: true, }, }; diff --git a/template/src/rtm-events-api/LocalEvents.ts b/template/src/rtm-events-api/LocalEvents.ts index 209e3db2d..7846fdbd8 100644 --- a/template/src/rtm-events-api/LocalEvents.ts +++ b/template/src/rtm-events-api/LocalEvents.ts @@ -9,6 +9,7 @@ export enum LocalEventsEnum { WHITEBOARD_OFF = 'WHITEBOARD_OFF', MIC_CHANGED = 'MIC_CHANGED', CLEAR_WHITEBOARD = 'CLEAR_WHITEBOARD', + ENABLE_CHAT_LOGIN = 'ENABLE_CHAT_LOGIN', } const LocalEventEmitter = new EventEmitter(); export default LocalEventEmitter; diff --git a/template/src/rtm-events/constants.ts b/template/src/rtm-events/constants.ts index 8e9f1344f..bee087144 100644 --- a/template/src/rtm-events/constants.ts +++ b/template/src/rtm-events/constants.ts @@ -38,6 +38,7 @@ const WAITING_ROOM_STATUS_UPDATE = 'WAITING_ROOM_STATUS_UPDATE'; const WHITEBOARD_ACTIVE = 'WHITEBOARD_ACTIVE'; const BOARD_COLOR_CHANGED = 'BOARD_COLOR_CHANGED'; const WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION = 'WHITEBOARD_L_I_U_P'; +const ENABLE_CHAT_LOGIN = 'ENABLE_CHAT_LOGIN'; const EventNames = { RECORDING_STATE_ATTRIBUTE, @@ -58,6 +59,7 @@ const EventNames = { WHITEBOARD_ACTIVE, BOARD_COLOR_CHANGED, WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION, + ENABLE_CHAT_LOGIN, }; /** ***** EVENT NAMES ENDS ***** */ diff --git a/template/src/utils/SdkMethodEvents.ts b/template/src/utils/SdkMethodEvents.ts index f9d95fd4a..2ec8d1ce9 100644 --- a/template/src/utils/SdkMethodEvents.ts +++ b/template/src/utils/SdkMethodEvents.ts @@ -11,7 +11,7 @@ export interface SdkMethodEvents { roomid: string | Partial, skipPrecall?: boolean, username?: string, - preference?: {disableShareTile: boolean}, + preference?: {disableShareTile?: boolean; preventChatAutoLogin?: boolean}, ): RoomInfoContextInterface['data']; microphoneDevice: (deviceId: deviceId) => void; speakerDevice: (deviceId: deviceId) => void; diff --git a/template/src/utils/useCreateRoom.ts b/template/src/utils/useCreateRoom.ts index c14077b7e..cac27a119 100644 --- a/template/src/utils/useCreateRoom.ts +++ b/template/src/utils/useCreateRoom.ts @@ -1,5 +1,8 @@ import {gql, useMutation} from '@apollo/client'; -import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo'; +import { + RoomInfoContextInterface, + RoomInfoDefaultValue, +} from '../components/room-info/useRoomInfo'; import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo'; import SDKEvents from '../utils/SdkEvents'; import isSDK from './isSDK'; @@ -105,6 +108,12 @@ export default function useCreateRoom(): createRoomFun { roomId: roomInfo?.roomId, pstn: roomInfo?.pstn, }, + roomPreference: { + disableShareTile: + RoomInfoDefaultValue.roomPreference.disableShareTile, + preventChatAutoLogin: + RoomInfoDefaultValue.roomPreference.preventChatAutoLogin, + }, }); SDKEvents.emit( 'create', diff --git a/template/src/utils/useJoinRoom.ts b/template/src/utils/useJoinRoom.ts index 62447eafd..84950e927 100644 --- a/template/src/utils/useJoinRoom.ts +++ b/template/src/utils/useJoinRoom.ts @@ -79,7 +79,8 @@ const JOIN_CHANNEL_PHRASE = gql` */ export interface joinRoomPreference { - disableShareTile: boolean; + disableShareTile?: boolean; + preventChatAutoLogin?: boolean; } export default function useJoinRoom() { @@ -245,11 +246,15 @@ export default function useJoinRoom() { ...prevState.data, ...roomInfo, }; + const validPreference = + preference && Object.keys(preference).length > 0; return { ...prevState, isJoinDataFetched: true, data: compiledMeetingInfo, - roomPreference: {...preference}, + roomPreference: validPreference + ? {...preference} + : prevState.roomPreference, }; }); return roomInfo; diff --git a/template/src/utils/useSidePanel.tsx b/template/src/utils/useSidePanel.tsx index 80540f4b4..ee1a7af8c 100644 --- a/template/src/utils/useSidePanel.tsx +++ b/template/src/utils/useSidePanel.tsx @@ -14,6 +14,12 @@ import React, {useState, SetStateAction, useEffect} from 'react'; import {SidePanelType} from '../subComponents/SidePanelEnum'; import {createHook} from 'customization-implementation'; import {LogSource, logger} from '../logger/AppBuilderLogger'; +import {useRoomInfo} from '../components/room-info/useRoomInfo'; +import LocalEventEmitter, { + LocalEventsEnum, +} from '../rtm-events-api/LocalEvents'; +import {EventNames} from '../rtm-events'; +import events, {PersistanceLevel} from '../rtm-events-api'; export interface SidePanelContextInterface { sidePanel: SidePanelType; @@ -30,6 +36,9 @@ interface SidePanelProviderProps { } const SidePanelProvider = (props: SidePanelProviderProps) => { const [sidePanel, setSidePanel] = useState(SidePanelType.None); + const { + roomPreference: {preventChatAutoLogin}, + } = useRoomInfo(); useEffect(() => { logger.log( @@ -37,6 +46,19 @@ const SidePanelProvider = (props: SidePanelProviderProps) => { 'CONTROLS', `Side panel changed to -> ${SidePanelType[sidePanel]}`, ); + if (sidePanel === SidePanelType.Chat) { + if (preventChatAutoLogin) { + logger.log(LogSource.Internals, 'CONTROLS', `enable chat login`); + // chat not signed in yet + // send local event for current user and RTM (L3) event to others in call + LocalEventEmitter.emit(LocalEventsEnum.ENABLE_CHAT_LOGIN); + events.send( + EventNames.ENABLE_CHAT_LOGIN, + null, + PersistanceLevel.Session, + ); + } + } }, [sidePanel]); const value = {sidePanel, setSidePanel}; From ca1c7836a021282c4c72da736d2d4e454d240764 Mon Sep 17 00:00:00 2001 From: Bhupendra Negi Date: Wed, 3 Jul 2024 17:13:59 +0530 Subject: [PATCH 2/8] undo channel change --- template/src/components/chat-messages/useChatMessages.tsx | 1 + template/src/components/chat/chatConfigure.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/template/src/components/chat-messages/useChatMessages.tsx b/template/src/components/chat-messages/useChatMessages.tsx index 3f3cdec8c..556cf8c2c 100644 --- a/template/src/components/chat-messages/useChatMessages.tsx +++ b/template/src/components/chat-messages/useChatMessages.tsx @@ -116,6 +116,7 @@ export interface ChatOption { file_name: string; file_url: string; from_platform?: string; + channel?: string; }; url?: string; } diff --git a/template/src/components/chat/chatConfigure.tsx b/template/src/components/chat/chatConfigure.tsx index 9919019de..e6553fe21 100644 --- a/template/src/components/chat/chatConfigure.tsx +++ b/template/src/components/chat/chatConfigure.tsx @@ -351,7 +351,7 @@ const ChatConfigure = ({children}) => { const localFileUrl = option?.ext?.file_url || ''; //add channel name so to prevent cross channel message mixup when same user joins two diff channels // this is filtered on msgRecived event - option.ext = {...option?.ext}; + option.ext = {...option?.ext, channel: data?.channel}; //@ts-ignore const msg = AgoraChat.message.create(option); connRef.current From ce73f9dc078fa165df71626f27510aa8ac97b4fc Mon Sep 17 00:00:00 2001 From: Bhupendra Negi Date: Wed, 3 Jul 2024 21:01:13 +0530 Subject: [PATCH 3/8] delay login for native --- .../components/chat/chatConfigure.native.tsx | 36 ++++++++++++++----- .../src/components/chat/chatConfigure.tsx | 1 + 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/template/src/components/chat/chatConfigure.native.tsx b/template/src/components/chat/chatConfigure.native.tsx index 24cb101b5..d94ac626c 100644 --- a/template/src/components/chat/chatConfigure.native.tsx +++ b/template/src/components/chat/chatConfigure.native.tsx @@ -23,6 +23,11 @@ import {timeNow} from '../../rtm/utils'; import Share from 'react-native-share'; import RNFetchBlob from 'rn-fetch-blob'; import {logger, LogSource} from '../../logger/AppBuilderLogger'; +import LocalEventEmitter, { + LocalEventsEnum, +} from '../../rtm-events-api/LocalEvents'; +import events from '../../rtm-events-api'; +import {EventNames} from '../../rtm-events'; interface ChatMessageAttributes { file_ext?: string; @@ -59,16 +64,19 @@ export const chatConfigureContext = const ChatConfigure = ({children}) => { const [open, setOpen] = useState(false); - const {data} = useRoomInfo(); + const {data, roomPreference} = useRoomInfo(); const connRef = React.useRef(null); - const {defaultContent} = useContent(); - const defaultContentRef = React.useRef(defaultContent); + const chatClient = ChatClient.getInstance(); const chatManager = chatClient.chatManager; const localUid = data?.uid?.toString(); const agoraToken = data?.chat?.user_token; const {store} = React.useContext(StorageContext); + const [allowChatLogin, setAllowChatLogin] = useState( + () => !roomPreference.preventChatAutoLogin, + ); + const { addMessageToPrivateStore, showMessageNotification, @@ -77,14 +85,20 @@ const ChatConfigure = ({children}) => { removeMessageFromPrivateStore, } = useChatMessages(); - React.useEffect(() => { - defaultContentRef.current = defaultContent; - }, [defaultContent]); + const enableChatCallback = () => { + console.warn('allow chat login callback', allowChatLogin); + setAllowChatLogin(true); + }; useEffect(() => { + // Handle Chat login for self and other users + LocalEventEmitter.on(LocalEventsEnum.ENABLE_CHAT_LOGIN, enableChatCallback); + events.on(EventNames.ENABLE_CHAT_LOGIN, () => { + enableChatCallback(); + }); const logout = async () => { try { - await chatClient.logout(); + await chatClient?.logout(); console.warn('logout success'); logger.log( LogSource.Internals, @@ -322,12 +336,16 @@ const ChatConfigure = ({children}) => { console.warn('chat sdk: init error', error); } }; + if (allowChatLogin) { + initializeChatSDK(); + } else { + console.warn('delay chat login'); + } - initializeChatSDK(); return () => { logout(); }; - }, []); + }, [allowChatLogin]); const sendChatSDKMessage = ( option: ChatOption, diff --git a/template/src/components/chat/chatConfigure.tsx b/template/src/components/chat/chatConfigure.tsx index e6553fe21..c92a908ab 100644 --- a/template/src/components/chat/chatConfigure.tsx +++ b/template/src/components/chat/chatConfigure.tsx @@ -89,6 +89,7 @@ const ChatConfigure = ({children}) => { }; useEffect(() => { + // Handle Chat login for self and other users LocalEventEmitter.on(LocalEventsEnum.ENABLE_CHAT_LOGIN, enableChatCallback); events.on(EventNames.ENABLE_CHAT_LOGIN, () => { enableChatCallback(); From 149c987a4af1ef7bf281cef6cab1e9196103af3c Mon Sep 17 00:00:00 2001 From: Bhupendra Negi Date: Thu, 4 Jul 2024 15:55:59 +0530 Subject: [PATCH 4/8] if chat auto login off then show disabled state untill chat logins --- .../components/chat/chatConfigure.native.tsx | 3 ++ .../src/components/chat/chatConfigure.tsx | 3 ++ .../src/components/room-info/useRoomInfo.tsx | 2 +- .../default-labels/videoCallScreenLabels.ts | 4 +- template/src/subComponents/ChatContainer.tsx | 7 ++++ .../src/subComponents/ChatInput.native.tsx | 3 +- template/src/subComponents/ChatInput.tsx | 4 +- .../chat/ChatAttachment.native.tsx | 3 +- .../src/subComponents/chat/ChatAttachment.tsx | 8 +++- .../subComponents/chat/ChatEmoji.native.tsx | 3 ++ template/src/subComponents/chat/ChatEmoji.tsx | 3 ++ .../src/subComponents/chat/ChatSendButton.tsx | 3 +- template/src/utils/useChatLogin.ts | 42 +++++++++++++++++++ template/src/utils/useSidePanel.tsx | 17 +++----- 14 files changed, 86 insertions(+), 19 deletions(-) create mode 100644 template/src/utils/useChatLogin.ts diff --git a/template/src/components/chat/chatConfigure.native.tsx b/template/src/components/chat/chatConfigure.native.tsx index d94ac626c..b1660dce1 100644 --- a/template/src/components/chat/chatConfigure.native.tsx +++ b/template/src/components/chat/chatConfigure.native.tsx @@ -39,6 +39,7 @@ interface ChatMessageAttributes { interface chatConfigureContextInterface { open: boolean; setOpen: React.Dispatch>; + allowChatLogin: boolean; sendChatSDKMessage: ( option: ChatOption, callback: ChatMessageStatusCallback, @@ -56,6 +57,7 @@ export const chatConfigureContext = createContext({ open: false, setOpen: () => {}, + allowChatLogin: false, sendChatSDKMessage: () => {}, deleteChatUser: () => {}, downloadAttachment: () => {}, @@ -507,6 +509,7 @@ const ChatConfigure = ({children}) => { value={{ open, setOpen, + allowChatLogin, deleteChatUser, sendChatSDKMessage, downloadAttachment, diff --git a/template/src/components/chat/chatConfigure.tsx b/template/src/components/chat/chatConfigure.tsx index c92a908ab..e490ecb56 100644 --- a/template/src/components/chat/chatConfigure.tsx +++ b/template/src/components/chat/chatConfigure.tsx @@ -34,6 +34,7 @@ export interface FileObj { interface chatConfigureContextInterface { open: boolean; setOpen: React.Dispatch>; + allowChatLogin: boolean; sendChatSDKMessage: (option: ChatOption, messageStatusCallback?: any) => void; deleteChatUser: () => void; downloadAttachment: (fileName: string, fileUrl: string) => void; @@ -49,6 +50,7 @@ export const chatConfigureContext = createContext({ open: false, setOpen: () => {}, + allowChatLogin: false, sendChatSDKMessage: () => {}, deleteChatUser: () => {}, downloadAttachment: () => {}, @@ -517,6 +519,7 @@ const ChatConfigure = ({children}) => { value={{ open, setOpen, + allowChatLogin, sendChatSDKMessage, deleteChatUser, downloadAttachment, diff --git a/template/src/components/room-info/useRoomInfo.tsx b/template/src/components/room-info/useRoomInfo.tsx index 25dd66dd7..969521299 100644 --- a/template/src/components/room-info/useRoomInfo.tsx +++ b/template/src/components/room-info/useRoomInfo.tsx @@ -116,7 +116,7 @@ export const RoomInfoDefaultValue: RoomInfoContextInterface = { }, roomPreference: { disableShareTile: false, - preventChatAutoLogin: true, + preventChatAutoLogin: false, }, }; diff --git a/template/src/language/default-labels/videoCallScreenLabels.ts b/template/src/language/default-labels/videoCallScreenLabels.ts index 2d09c09e8..790ad8d54 100644 --- a/template/src/language/default-labels/videoCallScreenLabels.ts +++ b/template/src/language/default-labels/videoCallScreenLabels.ts @@ -202,6 +202,7 @@ export const chatPanelGroupTabText = 'chatPanelGroupTabText'; export const chatPanelPrivateTabText = 'chatPanelPrivateTabText'; export const groupChatWelcomeContent = 'groupChatWelcomeContent'; +export const chatUserNotLoggedIn = 'chatUserNotLogged'; export const peoplePanelHeaderText = 'peoplePanelHeaderText'; @@ -624,7 +625,7 @@ export interface I18nVideoCallScreenLabelsInterface { [chatPanelGroupTabText]?: I18nBaseType; [chatPanelPrivateTabText]?: I18nBaseType; - + [chatUserNotLoggedIn]?: I18nBaseType; [groupChatWelcomeContent]?: I18nConditionalType; [groupChatLiveInputPlaceHolderText]?: I18nBaseType; @@ -1011,6 +1012,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = { [chatPanelGroupTabText]: 'Public', [chatPanelPrivateTabText]: 'Private', + [chatUserNotLoggedIn]: 'User is currently not logged in Agora Chat', [groupChatWelcomeContent]: noMessage => noMessage diff --git a/template/src/subComponents/ChatContainer.tsx b/template/src/subComponents/ChatContainer.tsx index 1d1396216..1bfa2a925 100644 --- a/template/src/subComponents/ChatContainer.tsx +++ b/template/src/subComponents/ChatContainer.tsx @@ -52,7 +52,9 @@ import { chatPanelUnreadMessageText, chatPanelUserOfflineText, groupChatWelcomeContent, + chatUserNotLoggedIn, } from '../language/default-labels/videoCallScreenLabels'; +import {useChatConfigure} from '../components/chat/chatConfigure'; /** * Chat container is the component which renders all the chat messages @@ -63,6 +65,7 @@ const ChatContainer = (props?: { chatBubble?: React.ComponentType; }) => { const info1 = useString(groupChatWelcomeContent); + const userLoginInfo = useString(chatUserNotLoggedIn); const [scrollToEnd, setScrollToEnd] = useState(false); const {dispatch} = useContext(DispatchContext); const [grpUnreadCount, setGrpUnreadCount] = useState(0); @@ -76,6 +79,7 @@ const ChatContainer = (props?: { const privateMessageStoreRef = useRef( privateMessageStore[privateChatUser]?.length, ); + const {allowChatLogin} = useChatConfigure(); const { setUnreadGroupMessageCount, unreadGroupMessageCount, @@ -207,6 +211,9 @@ const ChatContainer = (props?: { {info1(messageStore?.length ? false : true)} + {!allowChatLogin && ( + {userLoginInfo()} + )} {messageStore.map((message: any, index) => ( <> diff --git a/template/src/subComponents/ChatInput.native.tsx b/template/src/subComponents/ChatInput.native.tsx index e3a1d43dc..e28c20888 100644 --- a/template/src/subComponents/ChatInput.native.tsx +++ b/template/src/subComponents/ChatInput.native.tsx @@ -90,7 +90,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => { } = useChatUIControls(); const {defaultContent} = useContent(); - const {sendChatSDKMessage} = useChatConfigure(); + const {sendChatSDKMessage, allowChatLogin} = useChatConfigure(); const {data} = useRoomInfo(); const [name] = useUserName(); const groupChatInputPlaceHolder = $config.EVENT_MODE @@ -177,6 +177,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => { onChangeText={onChangeText} multiline={true} textAlignVertical="top" + editable={allowChatLogin} style={{ color: $config.FONT_COLOR, textAlign: 'left', diff --git a/template/src/subComponents/ChatInput.tsx b/template/src/subComponents/ChatInput.tsx index a9ee25856..9fee3f1dd 100644 --- a/template/src/subComponents/ChatInput.tsx +++ b/template/src/subComponents/ChatInput.tsx @@ -88,7 +88,8 @@ export const ChatTextInput = (props: ChatTextInputProps) => { setInputHeight, } = useChatUIControls(); const {defaultContent} = useContent(); - const {sendChatSDKMessage, uploadAttachment} = useChatConfigure(); + const {sendChatSDKMessage, uploadAttachment, allowChatLogin} = + useChatConfigure(); React.useEffect(() => { if (message.length === 0) { @@ -252,6 +253,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => { onChangeText={onChangeText} textAlignVertical="top" scrollEnabled={true} + editable={allowChatLogin} style={{ color: $config.FONT_COLOR, textAlign: 'left', diff --git a/template/src/subComponents/chat/ChatAttachment.native.tsx b/template/src/subComponents/chat/ChatAttachment.native.tsx index 74f633dbf..0727e92c3 100644 --- a/template/src/subComponents/chat/ChatAttachment.native.tsx +++ b/template/src/subComponents/chat/ChatAttachment.native.tsx @@ -48,7 +48,7 @@ interface ExtendedChatMessage extends ChatMessage { export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => { const {privateChatUser, setUploadStatus} = useChatUIControls(); - const {sendChatSDKMessage} = useChatConfigure(); + const {sendChatSDKMessage, allowChatLogin} = useChatConfigure(); const {data} = useRoomInfo(); const {addMessageToPrivateStore, addMessageToStore} = useChatMessages(); @@ -219,6 +219,7 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => { backgroundColor: $config.ICON_BG_COLOR, borderRadius: 24, }} + disabled={!allowChatLogin} iconProps={{ iconType: 'plain', iconContainerStyle: { diff --git a/template/src/subComponents/chat/ChatAttachment.tsx b/template/src/subComponents/chat/ChatAttachment.tsx index c3d8dfb9d..1c3e15201 100644 --- a/template/src/subComponents/chat/ChatAttachment.tsx +++ b/template/src/subComponents/chat/ChatAttachment.tsx @@ -29,7 +29,7 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => { const {data} = useRoomInfo(); const {privateChatUser, setUploadStatus, setUploadedFiles, uploadStatus} = useChatUIControls(); - const {uploadAttachment} = useChatConfigure(); + const {uploadAttachment, allowChatLogin} = useChatConfigure(); const toastHeadingType = useString(chatUploadErrorToastHeading)(); const toastHeadingSize = useString(chatUploadErrorFileSizeToastHeading)(); const errorSubHeadingSize = useString(chatUploadErrorFileSizeToastSubHeading); @@ -127,7 +127,11 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => { backgroundColor: $config.ICON_BG_COLOR, borderRadius: 24, }} - disabled={uploadStatus === UploadStatus.IN_PROGRESS ? true : false} + disabled={ + uploadStatus === UploadStatus.IN_PROGRESS || !allowChatLogin + ? true + : false + } iconProps={{ iconType: 'plain', iconContainerStyle: { diff --git a/template/src/subComponents/chat/ChatEmoji.native.tsx b/template/src/subComponents/chat/ChatEmoji.native.tsx index fb7cc6bda..c68e52d9b 100644 --- a/template/src/subComponents/chat/ChatEmoji.native.tsx +++ b/template/src/subComponents/chat/ChatEmoji.native.tsx @@ -4,6 +4,7 @@ import {useChatUIControls} from '../../components/chat-ui/useChatUIControls'; import IconButton from '../../../src/atoms/IconButton'; //import data from 'emoji-mart-native/data/google.json'; import {Picker} from 'emoji-mart-native'; +import {useChatConfigure} from '../../../src/components/chat/chatConfigure'; export interface ChatEmojiButtonProps { render?: (onPress: () => void) => JSX.Element; @@ -11,6 +12,7 @@ export interface ChatEmojiButtonProps { export const ChatEmojiButton = (props: ChatEmojiButtonProps) => { const {setShowEmojiPicker} = useChatUIControls(); + const {allowChatLogin} = useChatConfigure(); const onPress = () => { setShowEmojiPicker(prev => !prev); @@ -21,6 +23,7 @@ export const ChatEmojiButton = (props: ChatEmojiButtonProps) => { { const {setShowEmojiPicker} = useChatUIControls(); + const {allowChatLogin} = useChatConfigure(); const onPress = () => { setShowEmojiPicker(prev => !prev); }; @@ -138,6 +140,7 @@ export const ChatEmojiButton = (props: ChatEmojiButtonProps) => { ) : ( { - const {sendChatSDKMessage} = useChatConfigure(); + const {sendChatSDKMessage, allowChatLogin} = useChatConfigure(); const {setShowEmojiPicker} = useChatUIControls(); const { privateChatUser: selectedUserId, @@ -109,6 +109,7 @@ const ChatSendButton = (props: ChatSendButtonProps) => { toolTipMessage={ isMobileUA() ? null : useString(chatSendMessageBtnText)() } + disabled={!allowChatLogin} iconProps={{ iconType: 'plain', iconContainerStyle: { diff --git a/template/src/utils/useChatLogin.ts b/template/src/utils/useChatLogin.ts new file mode 100644 index 000000000..628a10f04 --- /dev/null +++ b/template/src/utils/useChatLogin.ts @@ -0,0 +1,42 @@ +/* +******************************************** + Copyright © 2021 Agora Lab, Inc., all rights reserved. + AppBuilder and all associated components, source code, APIs, services, and documentation + (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be + accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc. + Use without a license or in violation of any license terms and conditions (including use for + any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more + information visit https://appbuilder.agora.io. +********************************************* +*/ + +import {useRoomInfo} from '../components/room-info/useRoomInfo'; +import LocalEventEmitter, { + LocalEventsEnum, +} from '../rtm-events-api/LocalEvents'; +import {EventNames} from '../rtm-events'; +import {LogSource, logger} from '../logger/AppBuilderLogger'; +import events, {PersistanceLevel} from '../rtm-events-api'; + +/** + * Returns a function that enables users to login to agora-chat + * @returns function + */ +function useChatLogin() { + const { + roomPreference: {preventChatAutoLogin}, + } = useRoomInfo(); + + const enableChatLogin = () => { + if (preventChatAutoLogin) { + logger.debug(LogSource.Internals, 'CONTROLS', `enable chat login`); + // chat not signed in yet + // send local event for current user and RTM (L3) event to others in call + LocalEventEmitter.emit(LocalEventsEnum.ENABLE_CHAT_LOGIN); + events.send(EventNames.ENABLE_CHAT_LOGIN, null, PersistanceLevel.Session); + } + }; + return {enableChatLogin}; +} + +export default useChatLogin; diff --git a/template/src/utils/useSidePanel.tsx b/template/src/utils/useSidePanel.tsx index ee1a7af8c..fc08c17e6 100644 --- a/template/src/utils/useSidePanel.tsx +++ b/template/src/utils/useSidePanel.tsx @@ -20,6 +20,7 @@ import LocalEventEmitter, { } from '../rtm-events-api/LocalEvents'; import {EventNames} from '../rtm-events'; import events, {PersistanceLevel} from '../rtm-events-api'; +import useChatLogin from './useChatLogin'; export interface SidePanelContextInterface { sidePanel: SidePanelType; @@ -40,24 +41,18 @@ const SidePanelProvider = (props: SidePanelProviderProps) => { roomPreference: {preventChatAutoLogin}, } = useRoomInfo(); + const {enableChatLogin} = useChatLogin(); + useEffect(() => { logger.log( LogSource.Internals, 'CONTROLS', `Side panel changed to -> ${SidePanelType[sidePanel]}`, ); + if (sidePanel === SidePanelType.Chat) { - if (preventChatAutoLogin) { - logger.log(LogSource.Internals, 'CONTROLS', `enable chat login`); - // chat not signed in yet - // send local event for current user and RTM (L3) event to others in call - LocalEventEmitter.emit(LocalEventsEnum.ENABLE_CHAT_LOGIN); - events.send( - EventNames.ENABLE_CHAT_LOGIN, - null, - PersistanceLevel.Session, - ); - } + // use below fn if preventChatLogin is true + //enableChatLogin(); } }, [sidePanel]); From 1e53dad877ba3646fae8de81c083c4cba700f85a Mon Sep 17 00:00:00 2001 From: Bhupendra Negi Date: Thu, 4 Jul 2024 15:56:28 +0530 Subject: [PATCH 5/8] add chat login customization api --- template/customization-api/utils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/template/customization-api/utils.ts b/template/customization-api/utils.ts index 5f0cd3eab..68ac9227e 100644 --- a/template/customization-api/utils.ts +++ b/template/customization-api/utils.ts @@ -35,3 +35,4 @@ export {default as useLocalAudio} from '../src/utils/useLocalAudio'; export {default as useLocalVideo} from '../src/utils/useLocalVideo'; export type {LanguageType} from '../src/subComponents/caption/utils'; export {default as useSpeechToText} from '../src/utils/useSpeechToText'; +export {default as useChatLogin} from '../src/utils/useChatLogin'; From 231b69865c5df7b9812e2ea83794f9f4e4b54825 Mon Sep 17 00:00:00 2001 From: Bhupendra Negi Date: Mon, 8 Jul 2024 13:55:13 +0530 Subject: [PATCH 6/8] enable chat logout web & native --- template/src/components/EventsConfigure.tsx | 1 - .../components/chat/chatConfigure.native.tsx | 71 +++++++++++++------ .../src/components/chat/chatConfigure.tsx | 38 ++++++++-- template/src/rtm-events-api/LocalEvents.ts | 1 + template/src/rtm-events/constants.ts | 2 + template/src/utils/useChatLogin.ts | 18 ++++- 6 files changed, 103 insertions(+), 28 deletions(-) diff --git a/template/src/components/EventsConfigure.tsx b/template/src/components/EventsConfigure.tsx index 9efbcaaa3..ae0de9b5d 100644 --- a/template/src/components/EventsConfigure.tsx +++ b/template/src/components/EventsConfigure.tsx @@ -786,7 +786,6 @@ const EventsConfigure: React.FC = props => { events.off(EventNames.BOARD_COLOR_CHANGED); events.off(EventNames.STT_ACTIVE); events.off(EventNames.STT_LANGUAGE); - events.off(EventNames.ENABLE_CHAT_LOGIN); }; }, []); diff --git a/template/src/components/chat/chatConfigure.native.tsx b/template/src/components/chat/chatConfigure.native.tsx index b1660dce1..0bd1def81 100644 --- a/template/src/components/chat/chatConfigure.native.tsx +++ b/template/src/components/chat/chatConfigure.native.tsx @@ -87,35 +87,54 @@ const ChatConfigure = ({children}) => { removeMessageFromPrivateStore, } = useChatMessages(); - const enableChatCallback = () => { + const enableChatLoginCallback = () => { console.warn('allow chat login callback', allowChatLogin); setAllowChatLogin(true); }; + const logout = async () => { + try { + await chatClient?.logout(); + console.warn('chat logout success'); + logger.log( + LogSource.Internals, + 'CHAT', + `Logged out User ${localUid} from Agora Chat Server`, + ); + } catch (error) { + console.warn('logout failed'); + logger.log( + LogSource.Internals, + 'CHAT', + `Failed Logging out User ${localUid} from Agora Chat Server`, + ); + } + }; + + const enableChatLogoutCallback = async () => { + console.warn('allow chat logout callback', allowChatLogin); + setAllowChatLogin(false); + await logout(); + }; + useEffect(() => { // Handle Chat login for self and other users - LocalEventEmitter.on(LocalEventsEnum.ENABLE_CHAT_LOGIN, enableChatCallback); + LocalEventEmitter.on( + LocalEventsEnum.ENABLE_CHAT_LOGIN, + enableChatLoginCallback, + ); events.on(EventNames.ENABLE_CHAT_LOGIN, () => { - enableChatCallback(); + enableChatLoginCallback(); }); - const logout = async () => { - try { - await chatClient?.logout(); - console.warn('logout success'); - logger.log( - LogSource.Internals, - 'CHAT', - `Logged out User ${localUid} from Agora Chat Server`, - ); - } catch (error) { - console.warn('logout failed'); - logger.log( - LogSource.Internals, - 'CHAT', - `Failed Logging out User ${localUid} from Agora Chat Server`, - ); - } - }; + + LocalEventEmitter.on( + LocalEventsEnum.ENABLE_CHAT_LOGOUT, + enableChatLogoutCallback, + ); + events.on(EventNames.ENABLE_CHAT_LOGOUT, () => { + enableChatLogoutCallback(); + }); + const setupMessageListener = () => { const msgListerner: ChatMessageEventListener = { onMessagesRecalled: (messages: ChatMessage[]) => { @@ -346,6 +365,16 @@ const ChatConfigure = ({children}) => { return () => { logout(); + LocalEventEmitter.off( + LocalEventsEnum.ENABLE_CHAT_LOGIN, + enableChatLoginCallback, + ); + events.off(EventNames.ENABLE_CHAT_LOGIN, enableChatLoginCallback); + LocalEventEmitter.off( + LocalEventsEnum.ENABLE_CHAT_LOGOUT, + enableChatLogoutCallback, + ); + events.off(EventNames.ENABLE_CHAT_LOGOUT, enableChatLogoutCallback); }; }, [allowChatLogin]); diff --git a/template/src/components/chat/chatConfigure.tsx b/template/src/components/chat/chatConfigure.tsx index e490ecb56..28955a2ee 100644 --- a/template/src/components/chat/chatConfigure.tsx +++ b/template/src/components/chat/chatConfigure.tsx @@ -85,17 +85,37 @@ const ChatConfigure = ({children}) => { let newConn = null; - const enableChatCallback = () => { + const enableChatLoginCallback = () => { logger.debug(LogSource.Internals, 'CHAT', `enable chat login callback`); setAllowChatLogin(true); }; + const enableChatLogoutCallback = () => { + logger.debug(LogSource.Internals, 'CHAT', `enable chat logout callback`); + setAllowChatLogin(false); + if (connRef.current) { + connRef.current.close(); + } + }; + useEffect(() => { // Handle Chat login for self and other users - LocalEventEmitter.on(LocalEventsEnum.ENABLE_CHAT_LOGIN, enableChatCallback); + LocalEventEmitter.on( + LocalEventsEnum.ENABLE_CHAT_LOGIN, + enableChatLoginCallback, + ); events.on(EventNames.ENABLE_CHAT_LOGIN, () => { - enableChatCallback(); + enableChatLoginCallback(); }); + + LocalEventEmitter.on( + LocalEventsEnum.ENABLE_CHAT_LOGOUT, + enableChatLogoutCallback, + ); + events.on(EventNames.ENABLE_CHAT_LOGOUT, () => { + enableChatLogoutCallback(); + }); + const initializeChatSDK = async () => { try { // disable Chat SDK logs @@ -330,8 +350,6 @@ const ChatConfigure = ({children}) => { // initializing chat sdk if (allowChatLogin) { initializeChatSDK(); - } else { - logger.debug(LogSource.Internals, 'CHAT', `delay chat login`); } return () => { if (newConn) { @@ -342,6 +360,16 @@ const ChatConfigure = ({children}) => { `Logging out User ${data.uid} from Agora Chat Server`, ); } + LocalEventEmitter.off( + LocalEventsEnum.ENABLE_CHAT_LOGIN, + enableChatLoginCallback, + ); + events.off(EventNames.ENABLE_CHAT_LOGIN, enableChatLoginCallback); + LocalEventEmitter.off( + LocalEventsEnum.ENABLE_CHAT_LOGOUT, + enableChatLogoutCallback, + ); + events.off(EventNames.ENABLE_CHAT_LOGOUT, enableChatLogoutCallback); }; }, [allowChatLogin]); diff --git a/template/src/rtm-events-api/LocalEvents.ts b/template/src/rtm-events-api/LocalEvents.ts index 7846fdbd8..008183075 100644 --- a/template/src/rtm-events-api/LocalEvents.ts +++ b/template/src/rtm-events-api/LocalEvents.ts @@ -10,6 +10,7 @@ export enum LocalEventsEnum { MIC_CHANGED = 'MIC_CHANGED', CLEAR_WHITEBOARD = 'CLEAR_WHITEBOARD', ENABLE_CHAT_LOGIN = 'ENABLE_CHAT_LOGIN', + ENABLE_CHAT_LOGOUT = 'ENABLE_CHAT_LOGOUT', } const LocalEventEmitter = new EventEmitter(); export default LocalEventEmitter; diff --git a/template/src/rtm-events/constants.ts b/template/src/rtm-events/constants.ts index bee087144..16205ce88 100644 --- a/template/src/rtm-events/constants.ts +++ b/template/src/rtm-events/constants.ts @@ -39,6 +39,7 @@ const WHITEBOARD_ACTIVE = 'WHITEBOARD_ACTIVE'; const BOARD_COLOR_CHANGED = 'BOARD_COLOR_CHANGED'; const WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION = 'WHITEBOARD_L_I_U_P'; const ENABLE_CHAT_LOGIN = 'ENABLE_CHAT_LOGIN'; +const ENABLE_CHAT_LOGOUT = 'ENABLE_CHAT_LOGOUT'; const EventNames = { RECORDING_STATE_ATTRIBUTE, @@ -60,6 +61,7 @@ const EventNames = { BOARD_COLOR_CHANGED, WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION, ENABLE_CHAT_LOGIN, + ENABLE_CHAT_LOGOUT, }; /** ***** EVENT NAMES ENDS ***** */ diff --git a/template/src/utils/useChatLogin.ts b/template/src/utils/useChatLogin.ts index 628a10f04..24def4b52 100644 --- a/template/src/utils/useChatLogin.ts +++ b/template/src/utils/useChatLogin.ts @@ -17,6 +17,7 @@ import LocalEventEmitter, { import {EventNames} from '../rtm-events'; import {LogSource, logger} from '../logger/AppBuilderLogger'; import events, {PersistanceLevel} from '../rtm-events-api'; +import {useChatConfigure} from '../components/chat/chatConfigure'; /** * Returns a function that enables users to login to agora-chat @@ -26,6 +27,7 @@ function useChatLogin() { const { roomPreference: {preventChatAutoLogin}, } = useRoomInfo(); + const {allowChatLogin} = useChatConfigure(); const enableChatLogin = () => { if (preventChatAutoLogin) { @@ -36,7 +38,21 @@ function useChatLogin() { events.send(EventNames.ENABLE_CHAT_LOGIN, null, PersistanceLevel.Session); } }; - return {enableChatLogin}; + + const enableChatLogout = () => { + if (preventChatAutoLogin) { + logger.debug(LogSource.Internals, 'CONTROLS', `enable chat logout`); + // chat not signed in yet + // send local event for current user and RTM (L3) event to others in call + LocalEventEmitter.emit(LocalEventsEnum.ENABLE_CHAT_LOGOUT); + events.send( + EventNames.ENABLE_CHAT_LOGOUT, + null, + PersistanceLevel.Session, + ); + } + }; + return {allowChatLogin, enableChatLogin, enableChatLogout}; } export default useChatLogin; From ed74cf001e6453a9968292178c024f57a3ba046c Mon Sep 17 00:00:00 2001 From: Bhupendra Negi Date: Tue, 9 Jul 2024 11:03:47 +0530 Subject: [PATCH 7/8] updated labels --- template/src/language/default-labels/videoCallScreenLabels.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/template/src/language/default-labels/videoCallScreenLabels.ts b/template/src/language/default-labels/videoCallScreenLabels.ts index 790ad8d54..34c915ef4 100644 --- a/template/src/language/default-labels/videoCallScreenLabels.ts +++ b/template/src/language/default-labels/videoCallScreenLabels.ts @@ -1012,7 +1012,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = { [chatPanelGroupTabText]: 'Public', [chatPanelPrivateTabText]: 'Private', - [chatUserNotLoggedIn]: 'User is currently not logged in Agora Chat', + [chatUserNotLoggedIn]: 'You are currently not logged in Agora Chat', [groupChatWelcomeContent]: noMessage => noMessage From 28336e0ccefc724191d8195ea2b15760c278544b Mon Sep 17 00:00:00 2001 From: Bhupendra Negi Date: Tue, 9 Jul 2024 13:30:49 +0530 Subject: [PATCH 8/8] hover state for chat controls ,when user is not logged in --- .../src/subComponents/chat/ChatAttachment.native.tsx | 6 ++++-- template/src/subComponents/chat/ChatAttachment.tsx | 4 ++-- template/src/subComponents/chat/ChatEmoji.tsx | 10 ++++++---- template/src/subComponents/chat/ChatSendButton.tsx | 6 ++++-- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/template/src/subComponents/chat/ChatAttachment.native.tsx b/template/src/subComponents/chat/ChatAttachment.native.tsx index 0727e92c3..b578d0387 100644 --- a/template/src/subComponents/chat/ChatAttachment.native.tsx +++ b/template/src/subComponents/chat/ChatAttachment.native.tsx @@ -214,7 +214,7 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => { ) : ( { }, iconSize: 24, name: 'chat_attachment', - tintColor: $config.SECONDARY_ACTION_COLOR, + tintColor: !allowChatLogin + ? $config.SEMANTIC_NEUTRAL + : $config.SECONDARY_ACTION_COLOR, }} onPress={onPress} /> diff --git a/template/src/subComponents/chat/ChatAttachment.tsx b/template/src/subComponents/chat/ChatAttachment.tsx index 1c3e15201..e4a0b404e 100644 --- a/template/src/subComponents/chat/ChatAttachment.tsx +++ b/template/src/subComponents/chat/ChatAttachment.tsx @@ -122,7 +122,7 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => { ref={fileInputRef} /> { iconSize: 24, name: 'chat_attachment', tintColor: - uploadStatus === UploadStatus.IN_PROGRESS + uploadStatus === UploadStatus.IN_PROGRESS || !allowChatLogin ? $config.SEMANTIC_NEUTRAL : $config.SECONDARY_ACTION_COLOR, }} diff --git a/template/src/subComponents/chat/ChatEmoji.tsx b/template/src/subComponents/chat/ChatEmoji.tsx index 756172efc..6d8399a77 100644 --- a/template/src/subComponents/chat/ChatEmoji.tsx +++ b/template/src/subComponents/chat/ChatEmoji.tsx @@ -139,7 +139,7 @@ export const ChatEmojiButton = (props: ChatEmojiButtonProps) => { props.render(onPress) ) : ( { iconProps={{ iconType: 'plain', base64: false, - hoverBase64: true, + hoverBase64: allowChatLogin ? true : false, iconContainerStyle: { padding: 4, }, iconSize: 24, name: 'chat_emoji', - hoverIconName: 'chat_emoji_fill', - tintColor: $config.SECONDARY_ACTION_COLOR, + hoverIconName: !allowChatLogin ? 'chat_emoji' : 'chat_emoji_fill', + tintColor: !allowChatLogin + ? $config.SEMANTIC_NEUTRAL + : $config.SECONDARY_ACTION_COLOR, }} onPress={onPress} /> diff --git a/template/src/subComponents/chat/ChatSendButton.tsx b/template/src/subComponents/chat/ChatSendButton.tsx index efa48cc02..69e030cda 100644 --- a/template/src/subComponents/chat/ChatSendButton.tsx +++ b/template/src/subComponents/chat/ChatSendButton.tsx @@ -101,13 +101,15 @@ const ChatSendButton = (props: ChatSendButtonProps) => { ) : (