Duo Chat cannot output code content.
Checklist
-
I'm using the latest version of the extension (see the latest version in the right column of this page) - Extension version: GitLab Workflow version (6.18.1)
-
I'm using the latest VS Code version (find the latest version here) - VS Code version: Version: 1.100.2 Commit: 848b80aeb52026648a8ff9f7c45a9b0a80641e2e
-
I'm using a supported version of GitLab (see README for the supported version) - GitLab version: "happens on
gitlab.com"
- GitLab version: "happens on
Summary
Duo Chat cannot output code snippet(s) which incorportate JS & JSX and render them marked up as expected. It appears to be choking and outputting HTML, this appears to be happen parsing input also.
Steps to reproduce
Open chat and paste the following prompt
Prompt:
From this input
import { addMilliseconds, isAfter } from 'date-fns'; import PropTypes from 'prop-types'; import React from 'react'; import { marginShape } from '../../../../types/vitals-panel'; const PlotElements = ({ categorizedData, xScale, yScale, margin, }) => ( <g transform={`translate(${margin.left},${margin.top})`}>{ categorizedData.values.map((dataPoint) => ( <g transform={`translate(${xScale(dataPoint.x)},${xScale(dataPoint.y)})`} key={dataPoint.id}> </g> ))} </g> ); PlotElements.propTypes = { categorizedData: PropTypes.shape({ clusters: PropTypes.arrayOf(PropTypes.shape({})), values: PropTypes.arrayOf(PropTypes.shape({})), }).isRequired, xScale: PropTypes.func.isRequired, yScale: PropTypes.func.isRequired, }; export default PlotElements; ``` Extend this snippet to draw a circle of radius 3 at each dataPoint, output content ready to be pasted directly into the file.
What is the current bug behavior?
Output is incorrect;
In my example it starts erroring at the first line of JSX at the first "`" character after {
<g transform={`translate(${margin.left},${margin.top})`}>
The copy to clipboard functionality from the broken code snippet is also broken:
Clipboard output:
import { Colors } from '@blueprintjs/core';
import { addMilliseconds, isAfter } from 'date-fns';
import PropTypes from 'prop-types';
import React from 'react';
import { marginShape } from '../../../../types/vitals-panel';
const PlotElements = ({
categorizedData,
xScale,
yScale,
margin,
}) => (
<g transform={<span class="hljs-attr">translate</span>(${<span class="hljs-attr">margin.left</span>},${<span class="hljs-attr">margin.top</span>})}>{
categorizedData.values.map((dataPoint) => (
<g transform={<span class="hljs-attr">translate</span>(${<span class="hljs-attr">xScale</span>(<span class="hljs-attr">dataPoint.x</span>)},${<span class="hljs-attr">yScale</span>(<span class="hljs-attr">dataPoint.y</span>)})} key={dataPoint.id}>
<circle r={3} fill={Colors.BLUE3} />
</g>
))}
</g>
);
PlotElements.propTypes = {
categorizedData: PropTypes.shape({
clusters: PropTypes.arrayOf(PropTypes.shape({})),
values: PropTypes.arrayOf(PropTypes.shape({})),
}).isRequired,
xScale: PropTypes.func.isRequired,
yScale: PropTypes.func.isRequired,
margin: marginShape.isRequired,
};
What is the expected correct behavior?
Code is produced which do not contain unexpected spans are produced; <span class="hljs-attr">.
Relevant logs and/or screenshots
See screenshot above.
Logs contain nothing interesting looking, here are the lines which don't include my gitlab project info;
2025-05-28T10:40:42:509 [info]: Configuring Language Server - baseUrl: https://gitlab.com
2025-05-28T10:40:51:517 [debug]: [auth] Syncing account credentials to language server (https://gitlab.com|9329202 - knowledgeable-chicken)
