feat: Implement "Explain" button for report actions with Concierge reasoning v2#80153
Conversation
|
Hey, I noticed you changed If you want to automatically generate translations for other locales, an Expensify employee will have to:
Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running: npx ts-node ./scripts/generateTranslations.ts --helpTypically, you'd want to translate only what you changed by running |
melvin-bot
bot
requested review from
eh2077,
joekaufmanexpensify and
marcaaron
samranahm
changed the title
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| <RenderHTML | ||
| html={`<comment><muted-text>${modifiedExpenseMessageText}</muted-text></comment>`} | ||
| isSelectable={false} | ||
| onLinkPress={(_evt, href) => { |
There was a problem hiding this comment.
❌ CONSISTENCY-2 (docs)
The magic string '/concierge/explain' is hardcoded and used in multiple places without being defined as a constant. This reduces code maintainability and makes future changes error-prone.
Define this as a named constant in a shared location (e.g., CONST or ROUTES):
// In CONST or appropriate constants file
const EXPLAIN_LINK_PATH = '/concierge/explain';
// Then use it:
if (!href.endsWith(CONST.EXPLAIN_LINK_PATH)) {
return;
}This also applies to the translation files where this string appears in the HTML.\n\n---\n\nPlease rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
There was a problem hiding this comment.
I still think it is weird that this is not an actual path - but agree with the above comment.
There was a problem hiding this comment.
Pull request overview
This pull request implements an "Explain" feature for Concierge AI-generated report actions, allowing users to request explanations for automated decisions made by the AI assistant.
Changes:
- Adds an "Explain" link with sparkles emoji (✨) in Concierge messages that include AI reasoning
- Adds an "Explain" option to the context menu for actions with AI reasoning
- Creates a thread and automatically posts "Please explain this to me." when the user clicks the Explain option
- Refactors
navigateToAndOpenChildReportto extractbuildOptimisticChildReportfor code reuse
Reviewed changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/actions/ReportTest.ts | Adds comprehensive test coverage for navigateToAndOpenChildReport and explain functions with proper mocking |
| src/types/onyx/OriginalMessage.ts | Adds reasoning field to OriginalMessageModifiedExpense and improves type safety of OriginalMessage |
| src/pages/home/report/PureReportActionItem.tsx | Integrates explain link handling for MODIFIED_EXPENSE and automatically submitted actions |
| src/pages/home/report/ContextMenu/ContextMenuActions.tsx | Adds "Explain" context menu action with proper shouldShow logic checking for reasoning field |
| src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx | Updates to pass currentUserPersonalDetails to context menu actions and adds Concierge icon |
| src/libs/actions/Report.ts | Implements explain function, refactors navigateToAndOpenChildReport, and extracts buildOptimisticChildReport |
| src/libs/ReportActionsUtils.ts | Adds isActionFromAISource utility function to detect AI-generated actions |
| src/languages/*.ts | Adds translations for "Explain", "explainMessage", and "AskToExplain" across all supported languages |
| src/components/RenderHTML.tsx | Adds optional isSelectable prop to control text selection in rendered HTML |
| src/CONST/index.ts | Adds EXPLAIN sentry label constant for context menu tracking |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b6a57ff18d
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
|
||
| /** | ||
| * Builds an optimistic child report and returns it without checking for existing reports. | ||
| * If childReportID is not provided, creates an optimistic report and calls openReport() |
There was a problem hiding this comment.
I think a method called buildOptimisticChildReport should only be returning a report object and not creating one. This feels like it is mixing the concerns of creating a child report with building the optimistic data. Can we just call it createChildReport() ?
There was a problem hiding this comment.
Also, what happens if a childReportID is provided? It looks like it merges it into Onyx. Why are we doing that? How did we get here with a childReportID if we are creating an optimistic one.
There was a problem hiding this comment.
Yes, make sense to call this createChildReport.
When childReportID is provided, it means a thread report was previously created on the BE, but the report data hasn't loaded into Onyx yet. We use Onyx.merge to populate the optimistic report data for navigation while the actual report fetches from the BE. This actually prevents creating duplicate reports in some edge cases.
| <RenderHTML | ||
| html={`<comment><muted-text>${modifiedExpenseMessageText}</muted-text></comment>`} | ||
| isSelectable={false} | ||
| onLinkPress={(_evt, href) => { |
There was a problem hiding this comment.
I would use e or event here over _evt
There was a problem hiding this comment.
Extracted the callback into a useCallback and renamed the param from _evt to event.
| <RenderHTML | ||
| html={`<comment><muted-text>${modifiedExpenseMessageText}</muted-text></comment>`} | ||
| isSelectable={false} | ||
| onLinkPress={(_evt, href) => { |
There was a problem hiding this comment.
I still think it is weird that this is not an actual path - but agree with the above comment.
| const isDEWPolicy = hasDynamicExternalWorkflow(policy); | ||
|
|
||
| const isPendingAdd = action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD; | ||
| const isAISource = isActionFromAISource(action); |
There was a problem hiding this comment.
This is not going to have an AI source. The reasoning field is what should trigger the "explain" button to show.
There was a problem hiding this comment.
Updated this to check hasReasoning.
| } | ||
|
|
||
| const actionOriginalReportID = getOriginalReportID(reportID, action); | ||
| explain(action, actionOriginalReportID, translate, personalDetail?.timezone); |
There was a problem hiding this comment.
This should be DRY. But also, I think we maybe have the wrong solution. Can we show this in a more generic way so that any report action could potentially have an "Explain" link? That was the agreed scope. If something has reasoning then we show the link.
There was a problem hiding this comment.
@marcaaron I've created a new wrapper ReportActionItemMessageWithExplain to handle this.
|
I'll continue the review once @marcaaron 's comments have been addressed. |
Please review in parallel and test when PR looks good. No need to wait to review. @samranahm Let us know when it's ready for another review by leaving an "Updated" comment. Thank you both! |
|
@eh2077 PR ready for review, please take a look. |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-01-26.at.10.39.44.AM.movAndroid: mWeb ChromeScreen.Recording.2026-01-26.at.10.40.42.AM.moviOS: HybridAppScreen.Recording.2026-01-26.at.10.38.25.AM.moviOS: mWeb SafariScreen.Recording.2026-01-26.at.10.39.19.AM.movMacOS: Chrome / SafariScreen.Recording.2026-01-26.at.10.36.03.AM.mov |
eh2077
left a comment
eh2077
left a comment
There was a problem hiding this comment.
Code looks good and I'll continue test and feedback in the weekend, thanks!
Co-authored-by: Eric Han <117511920+eh2077@users.noreply.github.com>
|
Sorry, conflicts @samranahm. Taking it for a test drive. |
|
Sorry for the delay. Looking into this now. After resolving the conflicts, I’ll test the feature again. |
|
@marcaaron All yours. |
|
🚧 @marcaaron has triggered a test Expensify/App build. You can view the workflow run here. |
|
Having some trouble testing this locally so building an ad hoc. Looking at the code now. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
Working well! |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/marcaaron in version: 9.3.10-0 🚀
|
|
🚀 Deployed to production by https://github.com/roryabraham in version: 9.3.10-6 🚀
|
|
I think this PR blocks any link added to automated messages, e.g. https://github.com/Expensify/Web-Expensify/pull/50455#issuecomment-3864160604. In the linked issue, we add a link to the MODIFIEDEXPENSE action, but the callback handler returns early. |
|
Lemme know if you need a review on that. |
|
I’d be happy to help review if needed. |
Explanation of Change
Fixed Issues
$ #78464
PROPOSAL: #78464 (comment)
Tests
Test 01: Explain link in Concierge message
Shell Gasoline) and no category.Please explain this to me.Test 02: Explain option in context menu
Please explain this to me.Test 03: Parent report participant should access thread
[Member]
[Approver]
4. Open the expense report submitted by member
5. Click thead on the "Set the category based on past activity..." message
6. Verify you can access the thead without any error
Offline tests
QA Steps
Same as test
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodhttps://expensify.enterprise.slack.com/archives/C01GTK53T8Q/p1766796781987199
STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android.Native.mp4
Android: mWeb Chrome
Android.mWeb.Chrome.mp4
iOS: Native
IOS.Native.mp4
iOS: mWeb Safari
IOS.mWeb.Safari.mp4
MacOS: Chrome / Safari
macOS.Chrome.one.mp4
macOS.Chrome.two.mp4
macOS.Chrome.three.mp4