Skip to content

feat(DuoChat): Streaming code includes syntax highlight/action buttons

Dylan Bernardi requested to merge db/render-markdown-while-streaming into main

The intention is to have this code exist in the LSP, but while webview work is still being done there, it made sense to include it in individual extensions. A note exists to remove the file from the extensions once the LSP webviews are completed.

Description

This MR introduces a renderDuoChatMarkdownPreview that is provided to the vue component as renderMarkdown. This function injects 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.

Related Issues

Resolves part of DuoChat: Show Action Buttons in Completed Code ... (gitlab-org/editor-extensions/gitlab-lsp#431 - closed)

Additional Resources

Marked documentation
Marked-highlight documentation
Marked-bidi documentation

How to test:

To confirm this is working:

  • check out this branch and build the plugin
  • use Duo Chat to stream some code
  • the expected behavior is that the code blocks stream with syntax highlighting and the copy-code/insert-snippet buttons
  • another test is canceling the assistant message mid response
  • the expected behavior is the same as above

Demo

renderWhileStreaming_vsCodeTest

What CHANGELOG entry will this MR create?

  • fix: Bug fix fixes - a user-facing issue in production - included in changelog
  • feature: New feature - a user-facing change which adds functionality - included in changelog
  • BREAKING CHANGE: (fix or feature that would cause existing functionality to change) - should bump major version, mentioned in the changelog
  • None - other non-user-facing changes
Edited by Dylan Bernardi

Merge request reports

Loading