[$250] Concierge AI - System message not shows text with actual formatting

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.41-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #82057
Email or phone of affected tester (no customers): -
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: MacOS Monterey 12.7.4 / Chrome,
App Component: Other

Action Performed:

Precondition: create expense in workspace.Open expense details.

1. Ask Concierge AI to set an expense description with strikethrough: "Set description to Test"
2. Test with bold: "Set description to Bold Test" - verify bold renders
3. Test with italic: "Set description to Italic Test" - verify italic renders
4. Test with combinations: "Set description to Strike Bold Italic" - verify all formatting renders

Expected Result:

The MODIFIEDEXPENSE system message shows "changed the description to Test" with actual strikethrough (bold, italic) formatting (not literal tildes or plain text)

Actual Result:

the MODIFIEDEXPENSE system message not shows "changed the description to Test" with actual formatting and shows literal tildes or plain text

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @shubham1206agra

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022034893381706550383
• Upwork Job ID: 2034893381706550383
• Last Price Increase: 2026-03-20

[MelvinBot]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When Concierge AI sets an expense description with markdown formatting (strikethrough, bold, italic), the MODIFIEDEXPENSE system message shows literal markdown characters (e.g. ~Test~, **bold**, *italic*) instead of rendered formatting.

What is the root cause of that problem?

There is a format mismatch between how the modified expense message is constructed and how it is rendered:

1. Construction (src/libs/ModifiedExpenseMessage.ts:318-319): The backend stores description values as HTML (e.g. <del>Test</del>). When building the display message, Parser.htmlToMarkdown() converts these to markdown syntax (e.g. ~Test~).

2. Rendering (src/pages/inbox/report/ReportActionItemMessageWithExplain.tsx:59): The message is wrapped in HTML tags <comment><muted-text>${message}</muted-text></comment> and passed to RenderHTML.

3. RenderHTML (src/components/RenderHTML.tsx:36): Calls Parser.replace(htmlParam, {shouldEscapeText: false, filterRules: ['emoji']}) which only applies the emoji rule — it does NOT convert markdown back to HTML. So ~Test~ stays as literal tildes instead of becoming <del>Test</del>.

The core issue is that description values are converted from HTML to markdown at step 1, but the rendering pipeline at step 3 expects HTML and doesn't perform full markdown-to-HTML conversion.

What changes do you think we should make in order to solve the problem?

In src/libs/ModifiedExpenseMessage.ts, instead of converting the description HTML to markdown with Parser.htmlToMarkdown(), we should strip the formatting entirely using Parser.htmlToText() at lines 318-319.

System messages like "changed the description to X" should display the description value as plain text, not with formatting. This is consistent with how other modified expense fields (merchant, amount, category) are displayed — as plain values without special formatting.

Change at lines 318-319:

• Parser.htmlToMarkdown(reportActionOriginalMessage?.newComment ?? '') → Parser.htmlToText(reportActionOriginalMessage?.newComment ?? '')
• Parser.htmlToMarkdown(reportActionOriginalMessage?.oldComment ?? '') → Parser.htmlToText(reportActionOriginalMessage?.oldComment ?? '')

The same change should also be applied at line 226 in getRulesModifiedMessage() which has the identical pattern for policy-rules-modified descriptions.

What alternative solutions did you explore? (Optional)

1. Keep the raw HTML from the backend instead of converting — Since the rendering pipeline is HTML-based, we could pass the HTML values directly (without Parser.htmlToMarkdown()). However, this would require ensuring the backend HTML is properly sanitized and well-formed, and would inject formatted text inline within a system message which looks inconsistent.

2. Remove the filterRules: ['emoji'] restriction in RenderHTML — This would enable full markdown-to-HTML conversion for all system messages, but would be a much larger change with potential side effects across the entire app, and is not the right scope for this fix.

3. Apply Parser.replace() without filter rules specifically for the description value — Convert just the description markdown to HTML before inserting it into the message. This would render formatting inside the system message, but system messages displaying formatted description values would look inconsistent with how other fields are shown.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @shubham1206agra (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022034893381706550383

[twilight2294]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When Concierge AI sets an expense description containing markdown formatting (bold, italic, strikethrough), the MODIFIEDEXPENSE system message displays raw markdown characters (e.g., **Bold Test**, ~strikethrough~) instead of rendering the actual formatting.

What is the root cause of that problem?

The description value arrives from the API as HTML (e.g., <strong>Bold Test</strong>). In getForReportAction() in ModifiedExpenseMessage, Parser.htmlToMarkdown() converts this HTML into markdown syntax like **Bold Test**. This markdown string is then assembled into a plain-text message fragment.

When rendering, ReportActionItemMessageWithExplain interpolates that message (still containing raw markdown) directly into an HTML template: `<comment><muted-text>${computedMessage}</muted-text></comment>`. This is then passed to RenderHTML, which calls Parser.replace() with filterRules: ['emoji'] — meaning it only processes emoji substitution, not markdown-to-HTML conversion. So **Bold Test** passes through as literal asterisks.

The core issue is a format mismatch: the message is converted from HTML to markdown during construction, but the rendering pipeline never converts that markdown back to HTML.

What changes do you think we should make in order to solve the problem?

In ReportActionItemMessageWithExplain, run Parser.replace() on the message to convert any markdown back to HTML before wrapping it in the <comment><muted-text> template:

+ import Parser from '@libs/Parser';
  // ... existing imports ...

  function ReportActionItemMessageWithExplain({message, action, childReport, originalReport}: ...) {
      // ... existing code ...
      const computedMessage = actionHasReasoning ? `${message}${translate('iou.AskToExplain')}` : message;
+     const htmlMessage = useMemo(() => Parser.replace(computedMessage), [computedMessage]);

      return (
          <ReportActionItemBasicMessage>
              <RenderHTML
-                 html={`<comment><muted-text>${computedMessage}</muted-text></comment>`}
+                 html={`<comment><muted-text>${htmlMessage}</muted-text></comment>`}
                  isSelectable={false}
                  onLinkPress={handleLinkPress}
              />
          </ReportActionItemBasicMessage>
      );
  }

This converts any markdown in the message to proper HTML before it enters the rendering pipeline, so **Bold Test** becomes <strong>Bold Test</strong> and renders with actual formatting.

What alternative solutions did you explore? (Optional)

The existing proposal suggests using Parser.htmlToText() in ModifiedExpenseMessage to strip all formatting entirely. While that removes the raw markdown characters, it also discards the formatting the user intentionally applied — the issue title specifically says the text should show "actual formatting." My approach preserves and correctly renders the user's intended formatting.

My fix is also more contained: it operates at the rendering layer in a single component rather than modifying the shared message construction logic, which reduces risk of side effects for other consumers of ModifiedExpenseMessage.

[MobileMage]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @MobileMage Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[anobie]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.