Duo Chat cannot output code content.

Checklist

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;

Chat 2.png

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)

Possible fixes