feat(DuoChat): Streaming code includes syntax highlight/action buttons
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:
- 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.
- 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