Add ask Concierge screen

src/CONST/index.ts

@@ -1199,7 +1199,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',
@@ -3066,6 +3065,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/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.tsx

@@ -133,6 +133,7 @@ function AnchorRenderer({tnode, style, key}: AnchorRendererProps) {
     if (isAttachment && !isVideo) {
         return (
             <AnchorForAttachmentsOnly
+                style={styles.mv1}
                 source={tryResolveUrlFromApiRoot(attrHref)}
                 displayName={displayName}
                 isDeleted={isDeleted}

src/components/Search/SearchRouter/useAskConcierge.tsx

@@ -2,7 +2,6 @@ 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';
@@ -27,16 +26,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)}`);
+
+    // Each new question gets its own Concierge thread, so a side panel showing an earlier thread still targets Concierge.
+    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 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();
@@ -73,8 +75,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,104 @@
+import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {ReportsSplitNavigatorParamList} from '@libs/Navigation/types';
+import {isCreatedAction, isCurrentUserPendingAddAction} from '@libs/ReportActionsUtils';
+
+import {useConciergeSessionState} from '@pages/inbox/ConciergeSessionContext';
+
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import type {ReportActions} from '@src/types/onyx/ReportAction';
+
+import type {OnyxEntry} from 'react-native-onyx';
+
+import {useRoute} from '@react-navigation/native';
+
+import {isOpenChildTaskAction} from './useConciergeSidePanelReportActions';
+import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
+import useIsInSidePanel from './useIsInSidePanel';
+import useOnyx from './useOnyx';
+import useResponsiveLayout from './useResponsiveLayout';
+
+type ConciergeAskState = {
+    /** Whether this is the Concierge chat in the Inbox */
+    isAskConciergeChat: boolean;
+
+    /** Whether the messages from before this session are 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 to show `Ask a new question` above the composer */
+    shouldLabelComposerAsNewQuestion: boolean;
+};
+
+function useConciergeAskState(reportID: string | undefined): ConciergeAskState {
+    const isInSidePanel = useIsInSidePanel();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const route = useRoute<PlatformStackRouteProp<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>>();
+    const {sessionStartTime, showFullHistory} = useConciergeSessionState();
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
+
+    const hasSessionActivitySelector = (actions: OnyxEntry<ReportActions>) => {
+        if (!actions || !sessionStartTime) {
+            return false;
+        }
+        return Object.values(actions).some((action) => {
+            // The list pins a still-open task, so it stays on screen in every session.
+            if (isOpenChildTaskAction(action, currentUserAccountID)) {
+                return true;
+            }
+
+            // An action that opens its own report, like a question's thread or a task, keeps the welcome both while sending and once sent.
+            // Otherwise reconnecting would switch this chat to a partial view that `Hide chat history` can't return to.
+            if (action.actorAccountID === currentUserAccountID && !!action.childReportID) {
+                return false;
+            }
+            return isCurrentUserPendingAddAction(action, currentUserAccountID) || (!isCreatedAction(action) && action.created >= sessionStartTime);
+        });
+    };
+    const [hasSessionActivity] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+        selector: hasSessionActivitySelector,
+    });
+
+    // `View chat history` only appears once the user has messaged Concierge, so earlier messages without one stay on screen.
+    const hasHistoryWithoutUserMessageSelector = (actions: OnyxEntry<ReportActions>) => {
+        if (!actions || !sessionStartTime) {
+            return false;
+        }
+        const allActions = Object.values(actions);
+
+        // Until the chat's first action is loaded, the user's earlier messages may be on an older page.
+        if (!allActions.some((action) => isCreatedAction(action))) {
+            return false;
+        }
+        const previousActions = allActions.filter((action) => !isCreatedAction(action) && action.created < sessionStartTime);
+        return previousActions.length > 0 && !previousActions.some((action) => action.actorAccountID === currentUserAccountID);
+    };
+    const [hasHistoryWithoutUserMessage] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+        selector: hasHistoryWithoutUserMessageSelector,
+    });
+
+    const isAskConciergeChat = !!reportID && reportID === conciergeReportID && !isInSidePanel;
+
+    const hasSessionBoundary = isAskConciergeChat && !!sessionStartTime;
+
+    // A linked action opens the report at that message, so the earlier conversation is on screen either way.
+    const isHistoryExpanded = showFullHistory || !!route.params?.reportActionID;
+
+    const shouldShowWelcome = hasSessionBoundary && !isHistoryExpanded && !hasSessionActivity && !hasHistoryWithoutUserMessage;
+
+    return {
+        isAskConciergeChat,
+        isHistoryExpanded,
+        shouldShowWelcome,
+        shouldCenterWelcomeWithComposer: shouldShowWelcome && !shouldUseNarrowLayout,
+        shouldLabelComposerAsNewQuestion: hasSessionBoundary && showFullHistory && !hasSessionActivity,
+    };
+}
+
+export default useConciergeAskState;

src/hooks/useConciergeSidePanelReportActions.ts

@@ -116,14 +116,6 @@ function useConciergeSidePanelReportActions({
         return hasUserMessageInLoadedSet || hasOlderActions;
     }, [isConciergeHiddenHistory, visibleReportActions, currentUserAccountID, sessionStartTime, hasOlderActions]);
 
-    const hasPreviousMessages = useMemo(() => {
-        if (!isConciergeHiddenHistory || !hadUserMessageAtSessionStart || !sessionStartTime) {
-            return false;
-        }
-        const hasPreSessionActionInLoadedSet = visibleReportActions.some((action) => !isCreatedAction(action) && action.created < sessionStartTime);
-        return hasPreSessionActionInLoadedSet || hasOlderActions;
-    }, [isConciergeHiddenHistory, visibleReportActions, sessionStartTime, hadUserMessageAtSessionStart, 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 = useMemo(() => {
@@ -224,10 +216,10 @@ function useConciergeSidePanelReportActions({
                 return actions;
             }
             const filtered = actions.filter(isCurrentSessionAction);
-            if (filtered.length === 0) {
+            if (filtered.length === 0 && !isConciergeMainDM) {
                 // 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];
                 }
@@ -254,6 +246,13 @@ function useConciergeSidePanelReportActions({
     const filteredVisibleActions = useMemo(() => filterActions(visibleReportActions), [filterActions, visibleReportActions]);
     const filteredReportActions = useMemo(() => filterActions(reportActions), [filterActions, reportActions]);
 
+    const hasPreviousMessages = useMemo(() => {
+        if (!isConciergeHiddenHistory || !hadUserMessageAtSessionStart || !sessionStartTime) {
+            return false;
+        }
+        return visibleReportActions.some((action) => !isCurrentSessionAction(action)) || hasOlderActions;
+    }, [isConciergeHiddenHistory, hadUserMessageAtSessionStart, sessionStartTime, visibleReportActions, isCurrentSessionAction, hasOlderActions]);
+
     const handleShowPreviousMessages = useCallback(() => {
         setShowFullHistory(true);
         loadOlderChats(true);
@@ -270,3 +269,4 @@ function useConciergeSidePanelReportActions({
 }
 
 export default useConciergeSidePanelReportActions;
+export {isOpenChildTaskAction};

src/languages/de.ts

@@ -507,7 +507,32 @@ const translations: TranslationDeepObject<typeof en> = {
         quarter: 'Quartal',
         vacationDelegate: 'Urlaubsvertretung',
         expensifyLogo: 'Expensify-Logo',
-        concierge: {greeting: 'Hallo, wie kann ich helfen?', showHistory: 'Verlauf anzeigen'},
+        concierge: {
+            greeting: 'Hallo, wie kann ich helfen?',
+            showHistory: 'Verlauf anzeigen',
+            subtitle: 'Dein persönlicher KI-Assistent',
+            welcomeDescription: 'Concierge kann Fragen beantworten, Ausgaben aktualisieren und mehr.',
+            viewChatHistory: 'Chatverlauf anzeigen',
+            hideChatHistory: 'Chatverlauf ausblenden',
+            askNewQuestion: 'Neue Frage stellen',
+            newChat: 'Neuer Chat',
+            composerPlaceholders: {
+                spendLastMonth: 'Wie viel habe ich letzten Monat ausgegeben?',
+                topExpenses: 'Zeig mir meine größten Ausgaben in diesem Monat',
+                spendDrivers: 'Was hat meine Ausgaben im letzten Quartal getrieben?',
+                travelSpendChange: 'Wie haben sich meine Reisekosten seit letztem Monat verändert?',
+                topSpender: 'Wer hat diesen Monat am meisten ausgegeben?',
+                missingCategory: 'Welche Ausgaben haben keine Kategorie?',
+                awaitingApproval: 'Welche Berichte warten auf meine Genehmigung?',
+                notReimbursed: 'Was wurde mir noch nicht erstattet?',
+                unsubmitted: 'Welche meiner Ausgaben sind noch nicht eingereicht?',
+                leftToPay: 'Was ist diesen Monat noch zu zahlen?',
+                createExpense: 'Erstelle eine Ausgabe über 30 $ für ein Mittagessen',
+                combineExpenses: 'Fasse alle meine offenen Ausgaben in einem Bericht zusammen',
+                exportPdf: 'Exportiere meinen letzten Bericht als PDF',
+                exportCsv: 'Gib mir eine CSV meiner Ausgaben über 50 $',
+            },
+        },
         duplicateReport: 'Duplizierten Bericht',
         approver: 'Genehmiger',
         goToConcierge: 'Zu Concierge',

src/languages/el.ts

@@ -511,6 +511,28 @@ const translations: TranslationDeepObject<typeof en> = {
         concierge: {
             greeting: 'Γεια σας, πώς μπορώ να σας βοηθήσω;',
             showHistory: 'Εμφάνιση ιστορικού',
+            subtitle: 'Ο προσωπικός σας βοηθός AI',
+            welcomeDescription: 'Ο Concierge μπορεί να απαντήσει σε ερωτήσεις, να ενημερώσει δαπάνες και άλλα.',
+            viewChatHistory: 'Προβολή ιστορικού συνομιλιών',
+            hideChatHistory: 'Απόκρυψη ιστορικού συνομιλιών',
+            askNewQuestion: 'Κάντε μια νέα ερώτηση',
+            newChat: 'Νέα συνομιλία',
+            composerPlaceholders: {
+                spendLastMonth: 'Πόσα ξόδεψα τον προηγούμενο μήνα;',
+                topExpenses: 'Δείξε μου τις μεγαλύτερες δαπάνες μου αυτόν τον μήνα',
+                spendDrivers: 'Τι οδήγησε τις δαπάνες μου το προηγούμενο τρίμηνο;',
+                travelSpendChange: 'Πώς άλλαξαν οι δαπάνες ταξιδιού μου από τον προηγούμενο μήνα;',
+                topSpender: 'Ποιος ξόδεψε τα περισσότερα αυτόν τον μήνα;',
+                missingCategory: 'Ποιες δαπάνες δεν έχουν κατηγορία;',
+                awaitingApproval: 'Ποιες αναφορές περιμένουν την έγκρισή μου;',
+                notReimbursed: 'Τι δεν μου έχει αποζημιωθεί ακόμη;',
+                unsubmitted: 'Ποιες από τις δαπάνες μου δεν έχουν υποβληθεί ακόμη;',
+                leftToPay: 'Τι μένει να πληρωθεί αυτόν τον μήνα;',
+                createExpense: 'Δημιούργησε μια δαπάνη 30 $ για ένα γεύμα',
+                combineExpenses: 'Συνδύασε όλες τις ανοιχτές δαπάνες μου σε μία αναφορά',
+                exportPdf: 'Εξήγαγε την τελευταία μου αναφορά σε PDF',
+                exportCsv: 'Δώσε μου ένα CSV με τις δαπάνες μου άνω των 50 $',
+            },
         },
         vacationDelegate: 'Εκπρόσωπος διακοπών',
         expensifyLogo: 'Λογότυπο Expensify',

src/languages/en.ts

@@ -598,6 +598,28 @@ const translations = {
         concierge: {
             greeting: 'Hi there, how can I help?',
             showHistory: 'Show history',
+            subtitle: 'Your personal AI assistant',
+            welcomeDescription: 'Concierge can answer questions, update expenses, and more.',
+            viewChatHistory: 'View chat history',
+            hideChatHistory: 'Hide chat history',
+            askNewQuestion: 'Ask a new question',
+            newChat: 'New chat',
+            composerPlaceholders: {
+                spendLastMonth: 'How much did I spend last month?',
+                topExpenses: 'Show me my top expenses this month',
+                spendDrivers: 'What drove my spend last quarter?',
+                travelSpendChange: 'How did my travel spend change from last month?',
+                topSpender: 'Who spent the most this month?',
+                missingCategory: 'Which expenses are missing a category?',
+                awaitingApproval: 'Which reports are waiting on my approval?',
+                notReimbursed: "What haven't I been reimbursed for yet?",
+                unsubmitted: 'Which of my expenses are still unsubmitted?',
+                leftToPay: "What's left to pay this month?",
+                createExpense: 'Create an expense for a $30 lunch',
+                combineExpenses: 'Combine all my open expenses into one report',
+                exportPdf: 'Export my last report to PDF',
+                exportCsv: 'Give me a CSV of my expenses over $50',
+            },
         },
         vacationDelegate: 'Vacation delegate',
         expensifyLogo: 'Expensify logo',

src/languages/es.ts

@@ -502,6 +502,28 @@ const translations: TranslationDeepObject<typeof en> = {
         concierge: {
             greeting: 'Hola, ¿en qué puedo ayudarte?',
             showHistory: 'Mostrar historial',
+            subtitle: 'Tu asistente de IA personal',
+            welcomeDescription: 'Concierge puede responder preguntas, actualizar gastos y mucho más.',
+            viewChatHistory: 'Ver historial del chat',
+            hideChatHistory: 'Ocultar historial del chat',
+            askNewQuestion: 'Haz una nueva pregunta',
+            newChat: 'Nuevo chat',
+            composerPlaceholders: {
+                spendLastMonth: '¿Cuánto gasté el mes pasado?',
+                topExpenses: 'Muéstrame mis mayores gastos de este mes',
+                spendDrivers: '¿Qué impulsó mi gasto el trimestre pasado?',
+                travelSpendChange: '¿Cómo cambió mi gasto en viajes desde el mes pasado?',
+                topSpender: '¿Quién gastó más este mes?',
+                missingCategory: '¿Qué gastos no tienen categoría?',
+                awaitingApproval: '¿Qué informes están esperando mi aprobación?',
+                notReimbursed: '¿Qué no se me ha reembolsado todavía?',
+                unsubmitted: '¿Cuáles de mis gastos siguen sin enviarse?',
+                leftToPay: '¿Qué queda por pagar este mes?',
+                createExpense: 'Crea un gasto de $30 por un almuerzo',
+                combineExpenses: 'Combina todos mis gastos abiertos en un informe',
+                exportPdf: 'Exporta mi último informe a PDF',
+                exportCsv: 'Dame un CSV de mis gastos de más de $50',
+            },
         },
         vacationDelegate: 'Delegado de vacaciones',
         expensifyLogo: 'Logo de Expensify',