[Payment due @mkhutornyi] Add ask Concierge screen

src/App.tsx

@@ -49,7 +49,7 @@ import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
 import HybridAppHandler from './HybridAppHandler';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import './libs/HybridApp';
-import {ConciergeSessionProvider} from './pages/inbox/ConciergeSessionContext';
+import {ConciergeChatHistoryProvider} from './pages/inbox/ConciergeChatHistoryContext';
 import './setup/backgroundLocationTrackingTask';
 import './setup/backgroundTask';
 import './setup/fraudProtection';
@@ -115,7 +115,7 @@ function App() {
                                         SafeArea,
                                         PopoverContextProvider,
                                         CurrentReportIDContextProvider,
-                                        ConciergeSessionProvider,
+                                        ConciergeChatHistoryProvider,
                                         ScrollOffsetContextProvider,
                                         PickerStateProvider,
                                         EnvironmentProvider,

src/CONST/index.ts

@@ -1454,7 +1454,6 @@ const CONST = {
         WISE_REIMBURSEMENTS: 'wiseReimbursements',
         DEFAULT_LETTER_AVATARS: 'defaultLetterAvatars',
         TRAVEL_CODING_SYNC: 'travelCodingSync',
-        CONCIERGE_RESPOND_IN_THREAD: 'conciergeRespondInThread',
         ARCHIVE_POLICIES: 'archivePolicies',
         MERGE_ATS: 'mergeATSConnections',
         REPORT_MERGE: 'reportMerge',
@@ -1745,7 +1744,6 @@ const CONST = {
     EXAMPLE_PHONE_NUMBER: '+15005550006',
     FORMATTED_EXAMPLE_PHONE_NUMBER: '+1-(201)-867-5309',
     CONCIERGE_CHAT_NAME: 'Concierge',
-    CONCIERGE_SESSION_EXPIRATION_MS: 2 * 3600 * 1000, // 2 hours
     CLOUDFRONT_URL,
     EMPTY_ARRAY,
     EMPTY_OBJECT,
@@ -3366,6 +3364,7 @@ const CONST = {
     ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source',
     ATTACHMENT_ID_ATTRIBUTE: 'data-attachment-id',
     ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE: 'data-optimistic-src',
+    ADDITIONAL_ATTACHMENT_FILE_KEY_REGEX: /^file_\d+$/,
     ATTACHMENT_PREVIEW_ATTRIBUTE: 'src',
     ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE: 'data-name',
     ATTACHMENT_LOCAL_URL_PREFIX: ['blob:', 'file:'],

src/components/Search/SearchRouter/useAskConcierge.tsx

@@ -2,12 +2,13 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import useDelegateAccountID from '@hooks/useDelegateAccountID';
 import useOnyx from '@hooks/useOnyx';
 import useOpenConciergeAnywhere from '@hooks/useOpenConciergeAnywhere';
-import usePermissions from '@hooks/usePermissions';
 import useSidePanelReportID from '@hooks/useSidePanelReportID';
 
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {generateReportID} from '@libs/ReportUtils';
 
+import {useConciergeChatHistoryActions} from '@pages/inbox/ConciergeChatHistoryContext';
+
 import {addAttachmentWithComment, addComment} from '@userActions/Report';
 import {createTaskFromMarkdown} from '@userActions/Task';
 
@@ -27,16 +28,19 @@ function useAskConcierge({forceConcierge = false}: {forceConcierge?: boolean} =
     const sidePanelReportID = useSidePanelReportID();
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
     const {openConciergeAnywhere, isInSidePanel} = useOpenConciergeAnywhere();
-    const targetReportID = !forceConcierge && isInSidePanel && sidePanelReportID ? sidePanelReportID : conciergeReportID;
+    const [sidePanelReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(sidePanelReportID)}`);
+
+    const isSidePanelOnConciergeThread = !!conciergeReportID && sidePanelReport?.parentReportID === conciergeReportID;
+    const targetReportID = !forceConcierge && isInSidePanel && sidePanelReportID && !isSidePanelOnConciergeThread ? sidePanelReportID : conciergeReportID;
     const [targetReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(targetReportID)}`);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const {timezone, accountID: currentUserAccountID} = currentUserPersonalDetails;
     const [quickAction] = useOnyx(ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE);
     const delegateAccountID = useDelegateAccountID();
-    const {isBetaEnabled} = usePermissions();
+    const {setShowFullHistory} = useConciergeChatHistoryActions();
     const shouldShowAskConcierge = !!targetReportID && !!targetReport;
 
-    const shouldRespondInThread = targetReportID === conciergeReportID && isBetaEnabled(CONST.BETAS.CONCIERGE_RESPOND_IN_THREAD);
+    const shouldRespondInThread = targetReportID === conciergeReportID;
 
     const askConcierge = (searchQuery: string) => {
         const trimmedQuery = searchQuery.trim();
@@ -45,6 +49,9 @@ function useAskConcierge({forceConcierge = false}: {forceConcierge?: boolean} =
         }
         const isTask = createTaskFromMarkdown({text: trimmedQuery, parentReport: targetReport, currentUserPersonalDetails, quickAction, delegateAccountID});
         if (isTask) {
+            if (shouldRespondInThread && !isInSidePanel) {
+                setShowFullHistory(true);
+            }
             openConciergeAnywhere({forceConcierge});
             return;
         }
@@ -73,8 +80,7 @@ function useAskConcierge({forceConcierge = false}: {forceConcierge?: boolean} =
             return;
         }
 
-        const willOpenThread = shouldRespondInThread && (!Array.isArray(attachments) || attachments.length === 1);
-        const conciergeThreadReportID = willOpenThread ? generateReportID() : undefined;
+        const conciergeThreadReportID = shouldRespondInThread ? generateReportID() : undefined;
         addAttachmentWithComment({
             report: targetReport,
             notifyReportID: targetReportID,

src/hooks/useConciergeAskState.ts

@@ -0,0 +1,71 @@
+import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
+
+import {useConciergeChatHistoryState} from '@pages/inbox/ConciergeChatHistoryContext';
+
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import type {Report} from '@src/types/onyx';
+import type {ReportActions} from '@src/types/onyx/ReportAction';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+
+import type {OnyxEntry} from 'react-native-onyx';
+
+import {useRoute} from '@react-navigation/native';
+
+import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
+import useIsAskConciergeChat from './useIsAskConciergeChat';
+import useOnyx from './useOnyx';
+import useResponsiveLayout from './useResponsiveLayout';
+
+type ConciergeAskState = {
+    /** Whether the earlier conversation of the Concierge chat in the Inbox is shown */
+    isHistoryExpanded: boolean;
+
+    /** Whether to show the `Ask me anything!` welcome screen in place of the messages */
+    shouldShowWelcome: boolean;
+
+    /** Whether the welcome screen and the composer are centered together on the screen */
+    shouldCenterWelcomeWithComposer: boolean;
+
+    /** Whether the Concierge chat has a message from someone else that the user hasn't read */
+    hasUnreadMessageFromOthers: boolean;
+};
+
+function useConciergeAskState(reportID: string | undefined): ConciergeAskState {
+    const isAskConciergeChat = useIsAskConciergeChat(reportID);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {showFullHistory, isHistoryCollapsedByUser} = useConciergeChatHistoryState();
+    const route = useRoute<PlatformStackRouteProp<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>>();
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+
+    const hasFailedSendSelector = (actions: OnyxEntry<ReportActions>) => {
+        if (!isAskConciergeChat || !actions) {
+            return false;
+        }
+
+        // A failed send stays on screen so the user can retry or dismiss it.
+        return Object.values(actions).some((action) => !isEmptyObject(action.errors));
+    };
+    const [hasFailedSend] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+        selector: hasFailedSendSelector,
+    });
+
+    const hasUnreadMessageFromOthersSelector = (report: OnyxEntry<Report>) =>
+        isAskConciergeChat && !!report?.lastReadTime && (report.lastVisibleActionCreated ?? '') > report.lastReadTime && report.lastActorAccountID !== currentUserAccountID;
+    const [hasUnreadMessageFromOthers = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
+        selector: hasUnreadMessageFromOthersSelector,
+    });
+
+    const isHistoryExpanded = isAskConciergeChat && (showFullHistory || !!route.params?.reportActionID);
+    const shouldShowWelcome = isAskConciergeChat && !isHistoryExpanded && (isHistoryCollapsedByUser || !hasFailedSend) && !hasUnreadMessageFromOthers;
+
+    return {
+        isHistoryExpanded,
+        shouldShowWelcome,
+        shouldCenterWelcomeWithComposer: shouldShowWelcome && !shouldUseNarrowLayout,
+        hasUnreadMessageFromOthers,
+    };
+}
+
+export default useConciergeAskState;

src/hooks/useConciergeSidePanelReportActions.ts

@@ -1,25 +1,12 @@
 import DateUtils from '@libs/DateUtils';
-import {isCreatedAction, isCurrentUserPendingAddAction, isDeletedParentAction} from '@libs/ReportActionsUtils';
+import {isCreatedAction, isCurrentUserPendingAddAction} from '@libs/ReportActionsUtils';
 import {buildConciergeGreetingReportAction} from '@libs/ReportUtils';
 
-import CONST from '@src/CONST';
 import type * as OnyxTypes from '@src/types/onyx';
 
 import type {OnyxEntry} from 'react-native-onyx';
 
-import {useLayoutEffect, useState} from 'react';
-
-/** An OPEN task assigned to the current user. Canceled tasks stay OPEN optimistically, so deleted parents are excluded. */
-
-function isOpenChildTaskAction(action: OnyxTypes.ReportAction, currentUserAccountID: number): boolean {
-    return (
-        action.childType === CONST.REPORT.TYPE.TASK &&
-        action.childManagerAccountID === currentUserAccountID &&
-        action.childStateNum === CONST.REPORT.STATE_NUM.OPEN &&
-        action.childStatusNum === CONST.REPORT.STATUS_NUM.OPEN &&
-        !isDeletedParentAction(action)
-    );
-}
+import {useState} from 'react';
 
 type UseConciergeSidePanelReportActionsParams = {
     report: OnyxEntry<OnyxTypes.Report>;
@@ -32,11 +19,6 @@ type UseConciergeSidePanelReportActionsParams = {
     currentUserAccountID: number;
     greetingText: string;
     loadOlderChats: (force?: boolean) => void;
-    isConciergeMainDM?: boolean;
-    showFullHistory?: boolean;
-    onSetShowFullHistory?: (show: boolean) => void;
-    hadMessagesAtSessionStart?: boolean;
-    onSetHadMessagesAtSessionStart?: (value: boolean) => void;
 };
 
 function useConciergeSidePanelReportActions({
@@ -50,38 +32,22 @@ function useConciergeSidePanelReportActions({
     currentUserAccountID,
     greetingText,
     loadOlderChats,
-    isConciergeMainDM,
-    showFullHistory: externalShowFullHistory,
-    onSetShowFullHistory,
-    hadMessagesAtSessionStart: externalHadMessagesAtSessionStart,
-    onSetHadMessagesAtSessionStart,
 }: UseConciergeSidePanelReportActionsParams) {
-    const [localShowFullHistory, setLocalShowFullHistory] = useState(false);
-    const [localHadMessagesAtSessionStart, setLocalHadMessagesAtSessionStart] = useState(
-        () =>
-            externalHadMessagesAtSessionStart ??
-            (!!isConciergeMainDM && !!sessionStartTime && visibleReportActions.some((action) => !isCreatedAction(action) && action.created >= sessionStartTime)),
-    );
+    const [showFullHistory, setShowFullHistory] = useState(false);
     const [prevSessionStartTime, setPrevSessionStartTime] = useState(sessionStartTime);
     const [prevHasUserSentMessage, setPrevHasUserSentMessage] = useState(hasUserSentMessage);
 
     // Actions sent this session, captured while pending. The server can re-stamp `created` below the boundary, so keep
     // them sticky rather than re-deriving visibility from the timestamp.
     const [sessionSentActionIDs, setSessionSentActionIDs] = useState<ReadonlySet<string>>(() => new Set());
 
-    const hadMessagesAtSessionStart = localHadMessagesAtSessionStart;
-    const showFullHistory = externalShowFullHistory ?? localShowFullHistory;
-    const setShowFullHistory = onSetShowFullHistory ?? setLocalShowFullHistory;
-
     if (prevSessionStartTime !== sessionStartTime) {
         setPrevSessionStartTime(sessionStartTime);
-        setLocalShowFullHistory(false);
-        const messagesExistAtStart = !!isConciergeMainDM && !!sessionStartTime && visibleReportActions.some((action) => !isCreatedAction(action) && action.created >= sessionStartTime);
-        setLocalHadMessagesAtSessionStart(messagesExistAtStart);
+        setShowFullHistory(false);
         setSessionSentActionIDs(new Set());
     } else if (prevHasUserSentMessage && !hasUserSentMessage) {
         setPrevHasUserSentMessage(hasUserSentMessage);
-        setLocalShowFullHistory(false);
+        setShowFullHistory(false);
     } else if (prevHasUserSentMessage !== hasUserSentMessage) {
         setPrevHasUserSentMessage(hasUserSentMessage);
     }
@@ -94,10 +60,6 @@ function useConciergeSidePanelReportActions({
         setSessionSentActionIDs((prev) => new Set([...prev, ...pendingSentActionIDs]));
     }
 
-    useLayoutEffect(() => {
-        onSetHadMessagesAtSessionStart?.(localHadMessagesAtSessionStart);
-    }, [localHadMessagesAtSessionStart, onSetHadMessagesAtSessionStart]);
-
     // Check if the user had sent any message BEFORE this session started.
     // Uses sessionStartTime as the boundary — any user message created before the
     // panel opened is a pre-session message, regardless of when it was loaded.
@@ -125,18 +87,10 @@ function useConciergeSidePanelReportActions({
         hasPreviousMessages = hasPreSessionActionInLoadedSet || hasOlderActions;
     }
 
-    // Main DM only: check if there are any messages (from any actor) after sessionStartTime.
-    // When true, we have unread content to display and should not enter welcome mode.
-    const hasMessagesInSession =
-        !(!isConciergeMainDM || !isConciergeHiddenHistory || !sessionStartTime) && visibleReportActions.some((action) => !isCreatedAction(action) && action.created >= sessionStartTime);
-
-    // Main DM only: the welcome state must stand down for a pinned task, or `filterActions` returns before it renders.
-    const hasOpenChildTask = !(!isConciergeMainDM || !isConciergeHiddenHistory) && visibleReportActions.some((action) => isOpenChildTaskAction(action, currentUserAccountID));
-
     // A re-stamp flips `hasUserSentMessage` too, so the sticky set is what keeps the welcome state from coming back.
     const hasSentInSession = hasUserSentMessage || sessionSentActionIDs.size > 0;
-    const showConciergeSidePanelWelcome = isConciergeHiddenHistory && hadUserMessageAtSessionStart && !hasSentInSession && !showFullHistory && !hasMessagesInSession && !hasOpenChildTask;
-    const showConciergeGreeting = isConciergeHiddenHistory && hadUserMessageAtSessionStart && !showFullHistory && (!isConciergeMainDM || !hadMessagesAtSessionStart);
+    const showConciergeSidePanelWelcome = isConciergeHiddenHistory && hadUserMessageAtSessionStart && !hasSentInSession && !showFullHistory;
+    const showConciergeGreeting = isConciergeHiddenHistory && hadUserMessageAtSessionStart && !showFullHistory;
 
     let conciergeGreetingAction;
     if (!showConciergeGreeting) {
@@ -154,7 +108,7 @@ function useConciergeSidePanelReportActions({
     // Used to filter actions so that only messages from the first user message
     // onwards are shown (upstream side panel behavior).
     const firstUserMessageCreated =
-        isConciergeMainDM || showConciergeSidePanelWelcome || !isConciergeHiddenHistory || !hasUserSentMessage || !sessionStartTime
+        showConciergeSidePanelWelcome || !isConciergeHiddenHistory || !hasUserSentMessage || !sessionStartTime
             ? undefined
             : reportActions.reduce<string | undefined>((earliest, action) => {
                   const isCurrentSessionUserMessage =
@@ -175,15 +129,6 @@ function useConciergeSidePanelReportActions({
         if (sessionSentActionIDs.has(action.reportActionID)) {
             return true;
         }
-        if (isConciergeMainDM) {
-            // Pin a still-open task so collapsing read history never buries something the user has to act on.
-            return (
-                isCreatedAction(action) ||
-                isCurrentUserPendingAddAction(action, currentUserAccountID) ||
-                isOpenChildTaskAction(action, currentUserAccountID) ||
-                action.created >= sessionStartTime
-            );
-        }
         if (!firstUserMessageCreated) {
             return false;
         }
@@ -217,7 +162,7 @@ function useConciergeSidePanelReportActions({
         if (filtered.length === 0) {
             // Side panel: nothing matched the current session yet (e.g. just after reopen, before the new
             // message propagates). Show the greeting instead of `actions` to avoid flashing stale history.
-            if (!isConciergeMainDM && conciergeGreetingAction) {
+            if (conciergeGreetingAction) {
                 const createdAction = actions.find(isCreatedAction);
                 return createdAction ? [conciergeGreetingAction, createdAction] : [conciergeGreetingAction];
             }

src/hooks/useIsAskConciergeChat.ts

@@ -0,0 +1,13 @@
+import ONYXKEYS from '@src/ONYXKEYS';
+
+import useIsInSidePanel from './useIsInSidePanel';
+import useOnyx from './useOnyx';
+
+/** Whether the report is the Concierge chat in the Inbox */
+function useIsAskConciergeChat(reportID: string | undefined): boolean {
+    const isInSidePanel = useIsInSidePanel();
+    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
+    return !!reportID && reportID === conciergeReportID && !isInSidePanel;
+}
+
+export default useIsAskConciergeChat;