diff --git a/src/CONST/index.ts b/src/CONST/index.ts index c6f0692ea191..59aa2cc4bdfd 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -7974,6 +7974,7 @@ const CONST = { AUTOCOMPLETE_SUGGESTION: 'autocompleteSuggestion', SEARCH: 'searchItem', FIND_ITEM: 'findItem', + ASK_CONCIERGE: 'askConcierge', }, SEARCH_USER_FRIENDLY_KEYS: { TYPE: 'type', diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 6792cde84646..f308b2ab152f 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -597,6 +597,9 @@ const ONYXKEYS = { /** Company cards custom names */ NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES: 'nvp_expensify_ccCustomNames', + /** Whether to kick off the "Concierge is thinking" indicator when AgentZeroStatusGate mounts */ + CONCIERGE_THINKING_KICKOFF: 'conciergeThinkingKickoff', + /** The user's Concierge reportID */ CONCIERGE_REPORT_ID: 'conciergeReportID', @@ -1516,6 +1519,7 @@ type OnyxValuesMapping = { [ONYXKEYS.LAST_ROUTE]: string; [ONYXKEYS.IS_USING_IMPORTED_STATE]: boolean; [ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES]: Record; + [ONYXKEYS.CONCIERGE_THINKING_KICKOFF]: boolean; [ONYXKEYS.CONCIERGE_REPORT_ID]: string; [ONYXKEYS.SELF_DM_REPORT_ID]: string; [ONYXKEYS.SHARE_UNKNOWN_USER_DETAILS]: Participant; diff --git a/src/components/Search/SearchAutocompleteList.tsx b/src/components/Search/SearchAutocompleteList.tsx index 271b274043b7..19358db6171a 100644 --- a/src/components/Search/SearchAutocompleteList.tsx +++ b/src/components/Search/SearchAutocompleteList.tsx @@ -55,8 +55,8 @@ type SearchAutocompleteListProps = { /** Callback to trigger search action * */ handleSearch: (value: string) => void; - /** An optional item to always display on the top of the router list */ - searchQueryItem?: SearchQueryItem; + /** Optional items to always display at the top of the router list */ + searchQueryItems?: SearchQueryItem[]; /** Any extra sections that should be displayed in the router list. */ getAdditionalSections?: GetAdditionalSectionsCallback; @@ -131,7 +131,7 @@ function SearchRouterItem(props: UserListItemProps | Searc function SearchAutocompleteList({ autocompleteQueryValue, handleSearch, - searchQueryItem, + searchQueryItems, getAdditionalSections, onListItemPress, shouldSubscribeToArrowKeyEvents = true, @@ -402,8 +402,8 @@ function SearchAutocompleteList({ nextSuggestionsCount += section.data.filter((item) => item.keyForList !== CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.FIND_ITEM).length; }; - if (searchQueryItem) { - pushSection({data: [searchQueryItem as AutocompleteListItem], sectionIndex: sectionIndex++}); + if (searchQueryItems && searchQueryItems.length > 0) { + pushSection({data: searchQueryItems as AutocompleteListItem[], sectionIndex: sectionIndex++}); } const additionalSections = getAdditionalSections?.(searchOptions, sectionIndex); @@ -493,7 +493,7 @@ function SearchAutocompleteList({ recentReportsOptions, recentSearchesData, searchOptions, - searchQueryItem, + searchQueryItems, styles, translate, isLoadingOptions, diff --git a/src/components/Search/SearchList/ListItem/SearchQueryListItem.tsx b/src/components/Search/SearchList/ListItem/SearchQueryListItem.tsx index 642139a7a370..e9e27b845723 100644 --- a/src/components/Search/SearchList/ListItem/SearchQueryListItem.tsx +++ b/src/components/Search/SearchList/ListItem/SearchQueryListItem.tsx @@ -13,6 +13,8 @@ import type IconAsset from '@src/types/utils/IconAsset'; type SearchQueryItem = ListItem & { singleIcon?: IconAsset; + /** Whether to apply the theme fill color to the icon. Set to false for multi-colored icons like avatars. Defaults to true. */ + shouldIconApplyFill?: boolean; searchItemType?: ValueOf; searchQuery?: string; autocompleteID?: string; @@ -56,7 +58,7 @@ function SearchQueryListItem({item, isFocused, showTooltip, onSelectRow, onFocus {!!item.singleIcon && ( diff --git a/src/components/Search/SearchPageHeader/SearchPageInputNarrow.tsx b/src/components/Search/SearchPageHeader/SearchPageInputNarrow.tsx index a18c79424dde..a141048624e1 100644 --- a/src/components/Search/SearchPageHeader/SearchPageInputNarrow.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageInputNarrow.tsx @@ -25,7 +25,7 @@ function SearchPageInputNarrow({queryJSON, searchRouterListVisible, hideSearchRo const { autocompleteSubstitutions, autocompleteQueryValue, - searchQueryItem, + searchQueryItems, selection, textInputRef, textInputValue, @@ -80,7 +80,7 @@ function SearchPageInputNarrow({queryJSON, searchRouterListVisible, hideSearchRo !!nvp?.private_isArchived; @@ -72,7 +73,8 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla const personalDetails = usePersonalDetails(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const listRef = useRef(null); - const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass']); + const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass', 'ConciergeAvatar']); + const askConcierge = useAskConcierge(); // The actual input text that the user sees const [textInputValue, , setTextInputValue] = useDebouncedState('', 500); @@ -198,15 +200,26 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla ], ); - const searchQueryItem = textInputValue - ? { - text: textInputValue, - singleIcon: expensifyIcons.MagnifyingGlass, - searchQuery: textInputValue, - itemStyle: styles.activeComponentBG, - keyForList: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.FIND_ITEM, - searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.SEARCH, - } + const searchQueryItems = textInputValue + ? [ + { + text: textInputValue, + singleIcon: expensifyIcons.MagnifyingGlass, + searchQuery: textInputValue, + itemStyle: styles.activeComponentBG, + keyForList: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.FIND_ITEM, + searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.SEARCH, + }, + { + text: translate('search.askConcierge', textInputValue), + singleIcon: expensifyIcons.ConciergeAvatar, + shouldIconApplyFill: false, + searchQuery: textInputValue, + itemStyle: styles.activeComponentBG, + keyForList: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.ASK_CONCIERGE, + searchItemType: CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.ASK_CONCIERGE, + }, + ] : undefined; const shouldScrollRef = useRef(false); @@ -308,6 +321,12 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla setAutocompleteSubstitutions, }); setFocusAndScrollToRight(); + } else if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.ASK_CONCIERGE) { + const {searchQuery} = item; + backHistory(() => { + askConcierge(searchQuery); + }); + onRouterClose(); } else { submitSearch(item.searchQuery, item.keyForList !== CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.FIND_ITEM); } @@ -335,13 +354,14 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla betas, contextualPoliciesMap, contextualReportsMap, + askConcierge, ], ); useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => { onRouterClose(); }); - const updateAndScrollToFocusedIndex = useCallback(() => listRef.current?.updateAndScrollToFocusedIndex(1, true), []); + const updateAndScrollToFocusedIndex = useCallback(() => listRef.current?.updateAndScrollToFocusedIndex(searchQueryItems?.length ?? 1, true), [searchQueryItems?.length]); const modalWidth = shouldUseNarrowLayout ? styles.w100 : {width: variables.searchRouterPopoverWidth}; @@ -387,7 +407,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla { + openConciergeAnywhere(); + if (!targetReport || !targetReportID) { + return; + } + setConciergeThinkingKickoff(); + addComment({ + report: targetReport, + notifyReportID: targetReportID, + ancestors: [], + text: searchQuery, + timezoneParam: timezone ?? CONST.DEFAULT_TIME_ZONE, + currentUserAccountID, + shouldPlaySound: true, + isInSidePanel, + delegateAccountID, + }); + }; +} + +export default useAskConcierge; diff --git a/src/components/SidePanel/SidePanelContextProvider.tsx b/src/components/SidePanel/SidePanelContextProvider.tsx index 0d76f918f3f7..87fb63d098a4 100644 --- a/src/components/SidePanel/SidePanelContextProvider.tsx +++ b/src/components/SidePanel/SidePanelContextProvider.tsx @@ -93,7 +93,9 @@ function SidePanelContextProvider({children}: PropsWithChildren) { if (prevShouldHideSidePanel !== shouldHideSidePanel) { setPrevShouldHideSidePanel(shouldHideSidePanel); - if (!shouldHideSidePanel) { + if (shouldHideSidePanel) { + setSessionStartTime(null); + } else if (!sessionStartTime) { setSessionStartTime(DateUtils.getDBTime()); } } @@ -135,6 +137,11 @@ function SidePanelContextProvider({children}: PropsWithChildren) { focusComposerWithDelay(ReportActionComposeFocusManager.composerRef.current, CONST.SIDE_PANEL_ANIMATED_TRANSITION + CONST.COMPOSER_FOCUS_DELAY)(true); }; + const openSidePanel = () => { + setSessionStartTime(DateUtils.getDBTime()); + SidePanelActions.openSidePanel(!isExtraLargeScreenWidth); + }; + // Because of the React Compiler we don't need to memoize it manually // eslint-disable-next-line react/jsx-no-constructed-context-values const stateValue = { @@ -153,7 +160,7 @@ function SidePanelContextProvider({children}: PropsWithChildren) { // Because of the React Compiler we don't need to memoize it manually // eslint-disable-next-line react/jsx-no-constructed-context-values const actionsValue = { - openSidePanel: () => SidePanelActions.openSidePanel(!isExtraLargeScreenWidth), + openSidePanel, closeSidePanel, }; diff --git a/src/hooks/useOpenConciergeAnywhere/index.native.tsx b/src/hooks/useOpenConciergeAnywhere/index.native.tsx new file mode 100644 index 000000000000..c1a7b04f541f --- /dev/null +++ b/src/hooks/useOpenConciergeAnywhere/index.native.tsx @@ -0,0 +1,25 @@ +import {hasSeenTourSelector} from '@selectors/Onboarding'; +import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; +import useOnyx from '@hooks/useOnyx'; +import {navigateToConciergeChat} from '@userActions/Report'; +import ONYXKEYS from '@src/ONYXKEYS'; + +/** + * Returns a callback that navigates to the Concierge chat on native (opens the side panel on web instead), + * and a flag indicating that the concierge is not opened in the side panel. + */ +function useOpenConciergeAnywhere() { + const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID); + const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); + const [betas] = useOnyx(ONYXKEYS.BETAS); + const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector}); + const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails(); + + const openConciergeAnywhere = () => { + navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, isSelfTourViewed, betas); + }; + + return {openConciergeAnywhere, isInSidePanel: false}; +} + +export default useOpenConciergeAnywhere; diff --git a/src/hooks/useOpenConciergeAnywhere/index.tsx b/src/hooks/useOpenConciergeAnywhere/index.tsx new file mode 100644 index 000000000000..12b68c2a583a --- /dev/null +++ b/src/hooks/useOpenConciergeAnywhere/index.tsx @@ -0,0 +1,22 @@ +import useSidePanelActions from '@hooks/useSidePanelActions'; +import useSidePanelState from '@hooks/useSidePanelState'; + +/** + * Returns a callback that opens the Concierge side panel on web (opens the Concierge chat on native instead), + * and a flag indicating that the concierge is opened in the side panel. + */ +function useOpenConciergeAnywhere() { + const {shouldHideSidePanel} = useSidePanelState(); + const {openSidePanel} = useSidePanelActions(); + + const openConciergeAnywhere = () => { + if (!shouldHideSidePanel) { + return; + } + openSidePanel(); + }; + + return {openConciergeAnywhere, isInSidePanel: true}; +} + +export default useOpenConciergeAnywhere; diff --git a/src/languages/de.ts b/src/languages/de.ts index 5869ba86cb2b..8c50e0c07551 100644 --- a/src/languages/de.ts +++ b/src/languages/de.ts @@ -7786,6 +7786,7 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc recentSearches: 'Letzte Suchen', recentChats: 'Neueste Chats', searchIn: 'Suchen in', + askConcierge: (message: string) => `Frage Concierge „${message}“`, searchPlaceholder: 'Nach etwas suchen...', suggestions: 'Vorschläge', suggestionsAvailable: ( diff --git a/src/languages/en.ts b/src/languages/en.ts index f17682b4f6e7..0f33999594e3 100644 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -7793,6 +7793,7 @@ const translations = { recentSearches: 'Recent searches', recentChats: 'Recent chats', searchIn: 'Search in', + askConcierge: (message: string) => `Ask Concierge “${message}”`, searchPlaceholder: 'Search for something...', suggestions: 'Suggestions', suggestionsAvailable: ({count}: {count: number}, query = '') => ({ diff --git a/src/languages/es.ts b/src/languages/es.ts index c7783a046753..9a1b8cb59f5c 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -7638,6 +7638,7 @@ ${amount} para ${merchant} - ${date}`, recentSearches: 'Búsquedas recientes', recentChats: 'Chats recientes', searchIn: 'Buscar en', + askConcierge: (message: string) => `Pregunta a Concierge “${message}”`, searchPlaceholder: 'Busca algo...', suggestions: 'Sugerencias', suggestionsAvailable: ({count}: {count: number}, query = '') => ({ diff --git a/src/languages/fr.ts b/src/languages/fr.ts index d25a5aa6d2bd..7b09813c37b6 100644 --- a/src/languages/fr.ts +++ b/src/languages/fr.ts @@ -7808,6 +7808,7 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e recentSearches: 'Recherches récentes', recentChats: 'Discussions récentes', searchIn: 'Rechercher dans', + askConcierge: (message: string) => `Demander à Concierge « ${message} »`, searchPlaceholder: 'Rechercher quelque chose...', suggestions: 'Suggestions', suggestionsAvailable: ( diff --git a/src/languages/it.ts b/src/languages/it.ts index abccbb17424e..4781d638add3 100644 --- a/src/languages/it.ts +++ b/src/languages/it.ts @@ -7775,6 +7775,7 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`, recentSearches: 'Ricerche recenti', recentChats: 'Chat recenti', searchIn: 'Cerca in', + askConcierge: (message: string) => `Chiedi a Concierge “${message}”`, searchPlaceholder: 'Cerca qualcosa...', suggestions: 'Suggerimenti', suggestionsAvailable: ( diff --git a/src/languages/ja.ts b/src/languages/ja.ts index 51ae05979330..be6cba500d35 100644 --- a/src/languages/ja.ts +++ b/src/languages/ja.ts @@ -7678,6 +7678,7 @@ ${reportName} recentSearches: '最近の検索', recentChats: '最近のチャット', searchIn: '検索対象', + askConcierge: (message: string) => `Concierge に「${message}」と聞く`, searchPlaceholder: '何かを検索...', suggestions: '提案', suggestionsAvailable: ( diff --git a/src/languages/nl.ts b/src/languages/nl.ts index b43fcd96d7cc..25f2d4a073f8 100644 --- a/src/languages/nl.ts +++ b/src/languages/nl.ts @@ -7737,6 +7737,7 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`, recentSearches: 'Recente zoekopdrachten', recentChats: 'Recente chats', searchIn: 'Zoeken in', + askConcierge: (message: string) => `Vraag Concierge: “${message}”`, searchPlaceholder: 'Zoek iets...', suggestions: 'Suggesties', suggestionsAvailable: ( diff --git a/src/languages/pl.ts b/src/languages/pl.ts index 07bbc38d5499..950e2e577cfe 100644 --- a/src/languages/pl.ts +++ b/src/languages/pl.ts @@ -7740,6 +7740,7 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`, recentSearches: 'Ostatnie wyszukiwania', recentChats: 'Ostatnie czaty', searchIn: 'Szukaj w', + askConcierge: (message: string) => `Zapytaj Concierge: „${message}”`, searchPlaceholder: 'Wyszukaj coś...', suggestions: 'Sugestie', suggestionsAvailable: ( diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts index f5fef227eac1..bf29f179f479 100644 --- a/src/languages/pt-BR.ts +++ b/src/languages/pt-BR.ts @@ -7726,6 +7726,7 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`, recentSearches: 'Pesquisas recentes', recentChats: 'Chats recentes', searchIn: 'Pesquisar em', + askConcierge: (message: string) => `Perguntar ao Concierge “${message}”`, searchPlaceholder: 'Pesquisar algo...', suggestions: 'Sugestões', suggestionsAvailable: ( diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts index de77d70b93f9..640e5b330605 100644 --- a/src/languages/zh-hans.ts +++ b/src/languages/zh-hans.ts @@ -7542,6 +7542,7 @@ ${reportName} recentSearches: '最近搜索', recentChats: '最近聊天', searchIn: '搜索范围', + askConcierge: (message: string) => `询问 Concierge“${message}”`, searchPlaceholder: '搜索内容...', suggestions: '建议', suggestionsAvailable: ( diff --git a/src/libs/actions/Report/index.ts b/src/libs/actions/Report/index.ts index 865a0646bb76..81f514634934 100644 --- a/src/libs/actions/Report/index.ts +++ b/src/libs/actions/Report/index.ts @@ -7541,6 +7541,14 @@ function setOptimisticTransactionThread(reportID?: string, parentReportID?: stri }); } +function setConciergeThinkingKickoff() { + Onyx.set(ONYXKEYS.CONCIERGE_THINKING_KICKOFF, true); +} + +function clearConciergeThinkingKickoff() { + Onyx.set(ONYXKEYS.CONCIERGE_THINKING_KICKOFF, null); +} + export type {Video, GuidedSetupData, TaskForParameters, IntroSelected, OpenReportActionParams, ParticipantInfo}; export { @@ -7659,4 +7667,6 @@ export { prepareOnyxDataForCleanUpOptimisticParticipants, getGuidedSetupDataForOpenReport, getReportChannelName, + setConciergeThinkingKickoff, + clearConciergeThinkingKickoff, }; diff --git a/src/pages/inbox/AgentZeroStatusContext.tsx b/src/pages/inbox/AgentZeroStatusContext.tsx index 234f8ab877fe..a65d2432dbaf 100644 --- a/src/pages/inbox/AgentZeroStatusContext.tsx +++ b/src/pages/inbox/AgentZeroStatusContext.tsx @@ -4,7 +4,7 @@ import React, {createContext, useContext, useEffect, useRef, useState} from 'rea import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; -import {getReportChannelName} from '@libs/actions/Report'; +import {clearConciergeThinkingKickoff, getReportChannelName} from '@libs/actions/Report'; import Log from '@libs/Log'; import Pusher from '@libs/Pusher'; import CONST from '@src/CONST'; @@ -102,6 +102,17 @@ function AgentZeroStatusGate({reportID, children}: React.PropsWithChildren<{repo const lastUpdateTimeRef = useRef(0); const {isOffline} = useNetwork(); + // Auto-kickoff "thinking" indicator when opened from search (where kickoffWaitingIndicator isn't accessible) + const [shouldKickoff] = useOnyx(ONYXKEYS.CONCIERGE_THINKING_KICKOFF); + useEffect(() => { + if (!shouldKickoff) { + return; + } + clearConciergeThinkingKickoff(); + // eslint-disable-next-line react-hooks/set-state-in-effect -- one-shot kickoff from search; Onyx flag is cleared immediately so it cannot cascade + setOptimisticStartTime(Date.now()); + }, [shouldKickoff]); + // Tracks the current agentZeroRequestID so the Pusher callback can detect new requests const agentZeroRequestIDRef = useRef(''); diff --git a/src/pages/settings/HelpPage/HelpPage.tsx b/src/pages/settings/HelpPage/HelpPage.tsx index 1a272dd79724..bab8e0f743d8 100644 --- a/src/pages/settings/HelpPage/HelpPage.tsx +++ b/src/pages/settings/HelpPage/HelpPage.tsx @@ -10,13 +10,12 @@ import useIsPaidPolicyAdmin from '@hooks/useIsPaidPolicyAdmin'; import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; +import useOpenConciergeAnywhere from '@hooks/useOpenConciergeAnywhere'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useSidePanelActions from '@hooks/useSidePanelActions'; import useThemeStyles from '@hooks/useThemeStyles'; import {openHelpPage} from '@libs/actions/Help'; import {openExternalLink} from '@libs/actions/Link'; -import {navigateToAndOpenReportWithAccountIDs, navigateToConciergeChat} from '@libs/actions/Report'; -import getPlatform from '@libs/getPlatform'; +import {navigateToAndOpenReportWithAccountIDs} from '@libs/actions/Report'; import Navigation from '@libs/Navigation/Navigation'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import colors from '@styles/theme/colors'; @@ -24,8 +23,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {hasSeenTourSelector} from '@src/selectors/Onboarding'; -const isWeb = getPlatform() === CONST.PLATFORM.WEB; - function HelpPage() { const icons = useMemoizedLazyExpensifyIcons(['ConciergeAvatar', 'NewWindow', 'Monitor']); const illustrations = useMemoizedLazyIllustrations(['Chalkboard', 'LifeRing', 'TopiaryDollarSign']); @@ -38,12 +35,11 @@ function HelpPage() { const accountManagerDetails = account?.accountManagerAccountID ? personalDetails?.[account.accountManagerAccountID] : null; const partnerManagerDetails = account?.partnerManagerAccountID ? personalDetails?.[account.partnerManagerAccountID] : null; const guideDetails = account?.guideDetails?.email ? getPersonalDetailByEmail(account.guideDetails.email) : null; - const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID); const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED); const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector}); const [betas] = useOnyx(ONYXKEYS.BETAS); const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails(); - const {openSidePanel} = useSidePanelActions(); + const {openConciergeAnywhere} = useOpenConciergeAnywhere(); const menuItems = [ { @@ -52,7 +48,7 @@ function HelpPage() { description: translate('initialSettingsPage.helpPage.conciergeChatDescription'), icon: icons.ConciergeAvatar, iconType: CONST.ICON_TYPE_AVATAR, - onPress: () => (isWeb ? openSidePanel() : navigateToConciergeChat(conciergeReportID, introSelected, currentUserAccountID, isSelfTourViewed, betas)), + onPress: openConciergeAnywhere, shouldShowRightIcon: true, wrapperStyle: [styles.sectionMenuItemTopDescription], sentryLabel: CONST.SENTRY_LABEL.SETTINGS_HELP.CONCIERGE_CHAT,