Skip to content

Draft: feat(GlDuoChat): Add syntax highlighting and action buttons to code blocks

Dylan Bernardi requested to merge db/add-action-buttons-to-markdown into main

What does this MR do?

Resolves: DuoChat: Show Action Buttons in Completed Code ... (#2829 - moved)

This MR updates the current renderMarkdown function to include syntax highlighting and action buttons while the assistant message is streaming a response by leveraging the marked library. This solves two issues:

  1. This solves the visual issue where the code blocks would render as two-toned until the message had completed streaming and then flash with correct syntax and action buttons.
  2. In the event a user cancels the prompt while it is streaming, the code blocks that have completed do not have syntax highlighting, nor action buttons. This change allows code blocks that have already been sent by the model to be used and correctly render with syntax highlighting.

Note that the insert code button will not work unless the entire message is streamed due to a bug outlined here: Make insertCodeSnippetElement find codeblock in... (!4543 - merged).

Screenshots or screen recordings

Integration merge requests

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.
Edited by Dylan Bernardi

Merge request reports