Ask Concierge screen

src/components/Icon/chunks/expensify-icons.chunk.ts

@@ -44,6 +44,7 @@ import CarWithKey from '@assets/images/car-with-key.svg';
 import Car from '@assets/images/car.svg';
 import CaretUpDown from '@assets/images/caret-up-down.svg';
 import Cash from '@assets/images/cash.svg';
+import ChartPie from '@assets/images/chart-pie.svg';
 import ChatBubbleCounter from '@assets/images/chatbubble-counter.svg';
 import ChatBubbleReply from '@assets/images/chatbubble-reply.svg';
 import ChatBubbleUnread from '@assets/images/chatbubble-unread.svg';
@@ -334,6 +335,7 @@ const Expensicons = {
     CarPlus,
     Cash,
     CertiniaSquare,
+    ChartPie,
     ChatBubble,
     ChatBubbles,
     Checkbox,

src/hooks/useConciergeAskState.ts

@@ -0,0 +1,57 @@
+import {isCreatedAction, isCurrentUserPendingAddAction} from '@libs/ReportActionsUtils';
+
+import {useConciergeSessionState} from '@pages/inbox/ConciergeSessionContext';
+
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {ReportActions} from '@src/types/onyx/ReportAction';
+
+import type {OnyxEntry} from 'react-native-onyx';
+
+import useCurrentUserPersonalDetails from './useCurrentUserPersonalDetails';
+import useIsInSidePanel from './useIsInSidePanel';
+import useOnyx from './useOnyx';
+import usePermissions from './usePermissions';
+
+type ConciergeAskState = {
+    /** Whether to show the welcome empty state and the quick actions that go with it */
+    shouldShowWelcome: boolean;
+
+    /** Whether to label the composer as the start of a new question, which it is once earlier history is expanded */
+    shouldLabelComposerAsNewQuestion: boolean;
+};
+
+/**
+ * Drives the Ask Concierge screen in the main Concierge DM. The empty state lives in the report actions
+ * list and the composer label and quick actions live in the report footer, and those are siblings, so
+ * both derive their state here rather than one passing it to the other.
+ */
+function useConciergeAskState(reportID: string | undefined): ConciergeAskState {
+    const {isBetaEnabled} = usePermissions();
+    const isInSidePanel = useIsInSidePanel();
+    const {sessionStartTime, showFullHistory} = useConciergeSessionState();
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
+    const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
+
+    // Derive the boolean inside the Onyx selector so the screen re-renders only when session activity
+    // flips, not on every report-action change in the Concierge chat.
+    const hasSessionActivitySelector = (actions: OnyxEntry<ReportActions>) => {
+        if (!actions || !sessionStartTime) {
+            return false;
+        }
+        return Object.values(actions).some((action) => isCurrentUserPendingAddAction(action, currentUserAccountID) || (!isCreatedAction(action) && action.created >= sessionStartTime));
+    };
+    const [hasSessionActivity] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+        selector: hasSessionActivitySelector,
+    });
+
+    // Waiting for the session boundary keeps an existing conversation from flashing the welcome screen on open.
+    const isAskConciergeChat = !!reportID && reportID === conciergeReportID && !isInSidePanel && !!sessionStartTime && isBetaEnabled(CONST.BETAS.CONCIERGE_RESPOND_IN_THREAD);
+
+    return {
+        shouldShowWelcome: isAskConciergeChat && !showFullHistory && !hasSessionActivity,
+        shouldLabelComposerAsNewQuestion: isAskConciergeChat && showFullHistory && !hasSessionActivity,
+    };
+}
+
+export default useConciergeAskState;

src/languages/de.ts

@@ -488,7 +488,26 @@ 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?',
+            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',
+            composerPlaceholder: 'Wie viel habe ich letzten Monat ausgegeben?',
+            quickActions: {
+                createExpense: 'Ausgabe erstellen',
+                createExpensePrompt: 'Erstelle eine Ausgabe',
+                analyzeSpend: 'Ausgaben analysieren',
+                analyzeSpendPrompt: 'Wie viel habe ich letzten Monat ausgegeben?',
+                configureWorkspace: 'Arbeitsbereich einrichten',
+                configureWorkspacePrompt: 'Hilf mir, meinen Arbeitsbereich einzurichten',
+                getSupport: 'Support erhalten',
+                getSupportPrompt: 'Ich brauche bei etwas Hilfe',
+            },
+        },
         duplicateReport: 'Duplizierten Bericht',
         approver: 'Genehmiger',
         goToConcierge: 'Zu Concierge',

src/languages/el.ts

@@ -492,7 +492,23 @@ const translations: TranslationDeepObject<typeof en> = {
         tagGLCode: 'Ετικέτα κωδικού GL',
         concierge: {
             greeting: 'Γεια σας, πώς μπορώ να σας βοηθήσω;',
-            showHistory: 'Εμφάνιση ιστορικού',
+            subtitle: 'Ο προσωπικός σας βοηθός AI',
+            welcomeDescription: 'Ο Concierge μπορεί να απαντήσει σε ερωτήσεις, να ενημερώσει δαπάνες και άλλα.',
+            viewChatHistory: 'Προβολή ιστορικού συνομιλιών',
+            hideChatHistory: 'Απόκρυψη ιστορικού συνομιλιών',
+            askNewQuestion: 'Κάντε μια νέα ερώτηση',
+            newChat: 'Νέα συνομιλία',
+            composerPlaceholder: 'Πόσα ξόδεψα τον προηγούμενο μήνα;',
+            quickActions: {
+                createExpense: 'Δημιουργία δαπάνης',
+                createExpensePrompt: 'Δημιούργησε μια δαπάνη',
+                analyzeSpend: 'Ανάλυση δαπανών',
+                analyzeSpendPrompt: 'Πόσα ξόδεψα τον προηγούμενο μήνα;',
+                configureWorkspace: 'Ρύθμιση χώρου εργασίας',
+                configureWorkspacePrompt: 'Βοήθησέ με να ρυθμίσω τον χώρο εργασίας μου',
+                getSupport: 'Λήψη υποστήριξης',
+                getSupportPrompt: 'Χρειάζομαι βοήθεια με κάτι',
+            },
         },
         vacationDelegate: 'Εκπρόσωπος διακοπών',
         expensifyLogo: 'Λογότυπο Expensify',

src/languages/en.ts

@@ -538,7 +538,23 @@ const translations = {
         tagGLCode: 'Tag GL code',
         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',
+            composerPlaceholder: 'How much did I spend last month?',
+            quickActions: {
+                createExpense: 'Create expense',
+                createExpensePrompt: 'Create an expense',
+                analyzeSpend: 'Analyze spend',
+                analyzeSpendPrompt: 'How much did I spend last month?',
+                configureWorkspace: 'Configure workspace',
+                configureWorkspacePrompt: 'Help me configure my workspace',
+                getSupport: 'Get support',
+                getSupportPrompt: 'I need help with something',
+            },
         },
         vacationDelegate: 'Vacation delegate',
         expensifyLogo: 'Expensify logo',

src/languages/es.ts

@@ -481,7 +481,23 @@ const translations: TranslationDeepObject<typeof en> = {
         quarter: 'Trimestre',
         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',
+            composerPlaceholder: '¿Cuánto gasté el mes pasado?',
+            quickActions: {
+                createExpense: 'Crear gasto',
+                createExpensePrompt: 'Crea un gasto',
+                analyzeSpend: 'Analizar gastos',
+                analyzeSpendPrompt: '¿Cuánto gasté el mes pasado?',
+                configureWorkspace: 'Configurar espacio de trabajo',
+                configureWorkspacePrompt: 'Ayúdame a configurar mi espacio de trabajo',
+                getSupport: 'Obtener ayuda',
+                getSupportPrompt: 'Necesito ayuda con algo',
+            },
         },
         vacationDelegate: 'Delegado de vacaciones',
         expensifyLogo: 'Logo de Expensify',

src/languages/fr.ts

@@ -488,7 +488,26 @@ const translations: TranslationDeepObject<typeof en> = {
         quarter: 'Trimestre',
         vacationDelegate: 'Délégué de vacances',
         expensifyLogo: 'Logo Expensify',
-        concierge: {greeting: 'Bonjour, comment puis-je vous aider ?', showHistory: 'Afficher l’historique'},
+        concierge: {
+            greeting: 'Bonjour, comment puis-je vous aider ?',
+            subtitle: 'Votre assistant IA personnel',
+            welcomeDescription: 'Concierge peut répondre à vos questions, mettre à jour vos dépenses et plus encore.',
+            viewChatHistory: 'Afficher l’historique du chat',
+            hideChatHistory: 'Masquer l’historique du chat',
+            askNewQuestion: 'Poser une nouvelle question',
+            newChat: 'Nouveau chat',
+            composerPlaceholder: 'Combien ai-je dépensé le mois dernier ?',
+            quickActions: {
+                createExpense: 'Créer une dépense',
+                createExpensePrompt: 'Crée une dépense',
+                analyzeSpend: 'Analyser les dépenses',
+                analyzeSpendPrompt: 'Combien ai-je dépensé le mois dernier ?',
+                configureWorkspace: 'Configurer l’espace de travail',
+                configureWorkspacePrompt: 'Aide-moi à configurer mon espace de travail',
+                getSupport: 'Obtenir de l’aide',
+                getSupportPrompt: 'J’ai besoin d’aide pour quelque chose',
+            },
+        },
         duplicateReport: 'Note de frais en double',
         approver: 'Approbateur',
         goToConcierge: 'Aller à Concierge',

src/languages/it.ts

@@ -488,7 +488,26 @@ const translations: TranslationDeepObject<typeof en> = {
         quarter: 'Trimestre',
         vacationDelegate: 'Delega ferie',
         expensifyLogo: 'Logo Expensify',
-        concierge: {greeting: 'Ciao, come posso aiutarti?', showHistory: 'Mostra cronologia'},
+        concierge: {
+            greeting: 'Ciao, come posso aiutarti?',
+            subtitle: 'Il tuo assistente AI personale',
+            welcomeDescription: 'Concierge può rispondere a domande, aggiornare spese e altro ancora.',
+            viewChatHistory: 'Mostra cronologia chat',
+            hideChatHistory: 'Nascondi cronologia chat',
+            askNewQuestion: 'Fai una nuova domanda',
+            newChat: 'Nuova chat',
+            composerPlaceholder: 'Quanto ho speso il mese scorso?',
+            quickActions: {
+                createExpense: 'Crea spesa',
+                createExpensePrompt: 'Crea una spesa',
+                analyzeSpend: 'Analizza le spese',
+                analyzeSpendPrompt: 'Quanto ho speso il mese scorso?',
+                configureWorkspace: 'Configura area di lavoro',
+                configureWorkspacePrompt: 'Aiutami a configurare la mia area di lavoro',
+                getSupport: 'Ottieni assistenza',
+                getSupportPrompt: 'Ho bisogno di aiuto con una cosa',
+            },
+        },
         duplicateReport: 'Report duplicato',
         approver: 'Approvante',
         goToConcierge: 'Vai a Concierge',

src/languages/ja.ts

@@ -487,7 +487,26 @@ const translations: TranslationDeepObject<typeof en> = {
         quarter: '四半期',
         vacationDelegate: '休暇代理人',
         expensifyLogo: 'Expensifyロゴ',
-        concierge: {greeting: 'こんにちは、どのようにお手伝いできますか？', showHistory: '履歴を表示'},
+        concierge: {
+            greeting: 'こんにちは、どのようにお手伝いできますか？',
+            subtitle: 'あなた専用のAIアシスタント',
+            welcomeDescription: 'Conciergeは質問への回答や経費の更新などを行えます。',
+            viewChatHistory: 'チャット履歴を表示',
+            hideChatHistory: 'チャット履歴を非表示',
+            askNewQuestion: '新しい質問をする',
+            newChat: '新しいチャット',
+            composerPlaceholder: '先月はいくら使いましたか？',
+            quickActions: {
+                createExpense: '経費を作成',
+                createExpensePrompt: '経費を作成して',
+                analyzeSpend: '支出を分析',
+                analyzeSpendPrompt: '先月はいくら使いましたか？',
+                configureWorkspace: 'ワークスペースを設定',
+                configureWorkspacePrompt: 'ワークスペースの設定を手伝って',
+                getSupport: 'サポートを受ける',
+                getSupportPrompt: '困っていることがあります',
+            },
+        },
         duplicateReport: 'レポートを複製',
         approver: '承認者',
         goToConcierge: 'Conciergeへ移動',

src/languages/nl.ts

@@ -487,7 +487,26 @@ const translations: TranslationDeepObject<typeof en> = {
         quarter: 'Kwartaal',
         vacationDelegate: 'Vertegenwoordiger tijdens vakantie',
         expensifyLogo: 'Expensify-logo',
-        concierge: {greeting: 'Hoi, waarmee kan ik je helpen?', showHistory: 'Geschiedenis weergeven'},
+        concierge: {
+            greeting: 'Hoi, waarmee kan ik je helpen?',
+            subtitle: 'Je persoonlijke AI-assistent',
+            welcomeDescription: 'Concierge kan vragen beantwoorden, uitgaven bijwerken en meer.',
+            viewChatHistory: 'Chatgeschiedenis weergeven',
+            hideChatHistory: 'Chatgeschiedenis verbergen',
+            askNewQuestion: 'Stel een nieuwe vraag',
+            newChat: 'Nieuwe chat',
+            composerPlaceholder: 'Hoeveel heb ik vorige maand uitgegeven?',
+            quickActions: {
+                createExpense: 'Uitgave maken',
+                createExpensePrompt: 'Maak een uitgave',
+                analyzeSpend: 'Uitgaven analyseren',
+                analyzeSpendPrompt: 'Hoeveel heb ik vorige maand uitgegeven?',
+                configureWorkspace: 'Werkruimte instellen',
+                configureWorkspacePrompt: 'Help me mijn werkruimte in te stellen',
+                getSupport: 'Hulp krijgen',
+                getSupportPrompt: 'Ik heb ergens hulp bij nodig',
+            },
+        },
         duplicateReport: 'Dubbel rapport',
         approver: 'Fiatteur',
         goToConcierge: 'Ga naar Concierge',

src/languages/pl.ts

@@ -491,7 +491,26 @@ const translations: TranslationDeepObject<typeof en> = {
         quarter: 'Kwartał',
         vacationDelegate: 'Zastępca urlopowy',
         expensifyLogo: 'Logo Expensify',
-        concierge: {greeting: 'Cześć, w czym mogę pomóc?', showHistory: 'Pokaż historię'},
+        concierge: {
+            greeting: 'Cześć, w czym mogę pomóc?',
+            subtitle: 'Twój osobisty asystent AI',
+            welcomeDescription: 'Concierge może odpowiadać na pytania, aktualizować wydatki i nie tylko.',
+            viewChatHistory: 'Pokaż historię czatu',
+            hideChatHistory: 'Ukryj historię czatu',
+            askNewQuestion: 'Zadaj nowe pytanie',
+            newChat: 'Nowy czat',
+            composerPlaceholder: 'Ile wydałem w zeszłym miesiącu?',
+            quickActions: {
+                createExpense: 'Utwórz wydatek',
+                createExpensePrompt: 'Utwórz wydatek',
+                analyzeSpend: 'Analizuj wydatki',
+                analyzeSpendPrompt: 'Ile wydałem w zeszłym miesiącu?',
+                configureWorkspace: 'Skonfiguruj przestrzeń roboczą',
+                configureWorkspacePrompt: 'Pomóż mi skonfigurować moją przestrzeń roboczą',
+                getSupport: 'Uzyskaj pomoc',
+                getSupportPrompt: 'Potrzebuję z czymś pomocy',
+            },
+        },
         duplicateReport: 'Zduplikowany raport',
         approver: 'Osoba zatwierdzająca',
         goToConcierge: 'Przejdź do Concierge',

src/languages/pt-BR.ts

@@ -486,7 +486,26 @@ const translations: TranslationDeepObject<typeof en> = {
         quarter: 'Trimestre',
         vacationDelegate: 'Delegado de férias',
         expensifyLogo: 'Logo da Expensify',
-        concierge: {greeting: 'Oi, como posso ajudar?', showHistory: 'Mostrar histórico'},
+        concierge: {
+            greeting: 'Oi, como posso ajudar?',
+            subtitle: 'Seu assistente de IA pessoal',
+            welcomeDescription: 'O Concierge pode responder perguntas, atualizar despesas e muito mais.',
+            viewChatHistory: 'Ver histórico do chat',
+            hideChatHistory: 'Ocultar histórico do chat',
+            askNewQuestion: 'Faça uma nova pergunta',
+            newChat: 'Novo chat',
+            composerPlaceholder: 'Quanto gastei no mês passado?',
+            quickActions: {
+                createExpense: 'Criar despesa',
+                createExpensePrompt: 'Crie uma despesa',
+                analyzeSpend: 'Analisar gastos',
+                analyzeSpendPrompt: 'Quanto gastei no mês passado?',
+                configureWorkspace: 'Configurar espaço de trabalho',
+                configureWorkspacePrompt: 'Ajude-me a configurar meu espaço de trabalho',
+                getSupport: 'Obter suporte',
+                getSupportPrompt: 'Preciso de ajuda com uma coisa',
+            },
+        },
         duplicateReport: 'Duplicar relatório',
         approver: 'Aprovador',
         goToConcierge: 'Ir para o Concierge',

src/languages/zh-hans.ts

@@ -483,7 +483,26 @@ const translations: TranslationDeepObject<typeof en> = {
         quarter: '季度',
         vacationDelegate: '休假代理',
         expensifyLogo: 'Expensify徽标',
-        concierge: {greeting: '你好，我能帮你做什么？', showHistory: '显示历史'},
+        concierge: {
+            greeting: '你好，我能帮你做什么？',
+            subtitle: '你的专属 AI 助手',
+            welcomeDescription: 'Concierge 可以回答问题、更新支出等。',
+            viewChatHistory: '查看聊天记录',
+            hideChatHistory: '隐藏聊天记录',
+            askNewQuestion: '提出新问题',
+            newChat: '新聊天',
+            composerPlaceholder: '我上个月花了多少钱？',
+            quickActions: {
+                createExpense: '创建支出',
+                createExpensePrompt: '创建一笔支出',
+                analyzeSpend: '分析支出',
+                analyzeSpendPrompt: '我上个月花了多少钱？',
+                configureWorkspace: '配置工作区',
+                configureWorkspacePrompt: '帮我配置工作区',
+                getSupport: '获取支持',
+                getSupportPrompt: '我需要一些帮助',
+            },
+        },
         duplicateReport: '重复报销单',
         approver: '审批人',
         goToConcierge: '前往 Concierge',