fix(DuoChat): Fix renderGFM call in agentic messages

What does this MR do?

This is part one of two MRs that resolves GLQL not rendering in Duo agentic chat:

1. Fix renderGFM method call in @gitlab/duo-ui 👈 YOU ARE HERE
2. Add the duo-ui GLQL markdown selector to renderGFM in the monolith gitlab!209488 (merged)

This MR fixes a problem in Duo-UI code where renderGFM is called before an agentic message has finished streaming. It also resolves a minor code issue where renderGFM is called immediately in $nextTick because it's not passed as a callback.

On it's own this MR won't render GLQL in agentic chat and won't change anything on the monolith. The second MR Resolve GLQL not rendering in Duo chat (gitlab!209488 - merged) updates renderGFM to detect GLQL in agentic chat messages. Without this MR the monolith change doesn't work because if renderGFM is called on a partial GLQL code then it will error out if it cannot parse the code. Classic chat renders GLQL as expected so no changes is made to that.

See the related issue for a more technical detailed breakdown of why streaming safeguards aren't working in agentic chat.

Screenshots or screen recordings

GDK classic chat	GDK agentic chat	VS Code (thread)
Screen_Recording_2025-10-22_at_16.50.54	Screen_Recording_2025-10-22_at_16.48.54	Screen_Recording_2025-10-22_at_12.27.15

Duo UI with GLQL markdown blocks.

Before	After (with this MR)	After (this MR + Resolve GLQL not rendering in Duo chat (gitlab!209488 - merged))

No changes to regular markdown.

Before	After

Integration merge requests

• GitLab: mr_url
• CustomersDot: mr_url
• Status Page: mr_url

Does this MR meet the acceptance criteria?

This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.

Toggle the acceptance checklist

Conformity

• Code review guidelines.
• GitLab UI's contributing guidelines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened (see integration merge requests above).
• Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

• All actions and functionality can be done with a keyboard.
• Links, buttons, and controls have a visible focus state.
• All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
• Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
• Color combinations have sufficient contrast.

Validation steps

GitLab / GDK

1. Clone this project and checkout this MR's branch.
2. To validate duo-ui changes in GDK you need to modify your GDK to use these changes:

# In duo-ui/
git checkout 105-fix-rendergfm-in-duo-chat-message
yarn install && yalc publish

# In gdk/gitlab/
yalc add @gitlab/duo-ui
yarn install --check-files

# You should now be good to go!

# If changes don't show in GDK, try running this
gdk stop vite && rm -rf node_modules/.vite tmp/cache && gdk start vite

# When done and you want to clean up the yalc changes in your GDK
yalc remove @gitlab/duo-ui
yarn install --check-files

2. In your gdk/gitlab dir checkout out the monolith changes git checkout 573052-fix-glql-visualization-in-duo-chat
3. Follow the GDK validation steps outlined in the MR gitlab!209488 (merged)

IDE

Prerequisite:

Make sure that you have set up and configured the Duo VS Code extension within your local GitLab repo so it has the settings configured already for this test. You can do this from within the locally tested extension, but I'm not sure if it's persisted between tests.

For this repo (Duo UI):

1. Clone this MR locally
2. Run yarn install
3. Run yarn build
4. Install yalc with yarn global add yalc if you haven't already got it installed
5. Publish the MR to yalc using yalc publish

For running these changes in the VS Code extension:

1. Install prerequisites
2. Fork the VS Code extension repo
3. Open the gitlab-vscode-extension directory in VS Code (or whatever you chose to call the repo's directory)
4. Run npm install
5. Go to ./webviews/vue2/
6. Run yalc add @gitlab/duo-ui
7. Run npm install
8. Go to ./webviews/vue2/node_modules/@gitlab/duo-ui/src/components/chat/components/duo_chat_message/duo_chat_message.vue and check that this MR's changes are in there (verifying that yalc worked)
9. Go to ./.vscode/launch.json and add your local GitLab repo's file path to the args of Run Extension, e.g. (you could do the same for Run Extension (without build) if you plan on using it):

   "configurations": [
   {
     "name": "Run Extension",
     "type": "extensionHost",
     "request": "launch",
     "runtimeExecutable": "${execPath}",
     "args": ["/Users/roberthunt/www/gdk/gitlab", "--disable-extensions", "--extensionDevelopmentPath=${workspaceRoot}/dist-desktop"],
     "outFiles": ["${workspaceFolder}/dist-desktop/**/*.js"],
     "preLaunchTask": "Build and watch desktop sources",
     "postDebugTask": "Terminate All Tasks",
     "env": {
       "NODE_ENV": "development",
       "GITLAB_VSCODE_ENV": "development"
     }
   },

10. Within VS Code, go to Run and Debug, select the Run Extension task, and click the run button (green play icon)
11. A new VS Code window should open automatically with the GitLab repo loaded, as well as the local extension. The extension expects to be run within a repo which has Duo enabled
12. Within the new window, open Duo chat/Duo Agentic, and verify that the syntax highlighting continues to work (the only part of renderGFM IDE's use).

Closes #105 (closed)