@gitlab/duo-ui 15.3.0 → 15.4.0

package/dist/utils/highlight.js

@@ -0,0 +1,483 @@
+import highlightjs from 'highlight.js/lib/core';
+
+const languageLoaders = {
+  '1c': () => import('highlight.js/lib/languages/1c'),
+  abnf: () => import('highlight.js/lib/languages/abnf'),
+  accesslog: () => import('highlight.js/lib/languages/accesslog'),
+  actionscript: () => import('highlight.js/lib/languages/actionscript'),
+  ada: () => import('highlight.js/lib/languages/ada'),
+  angelscript: () => import('highlight.js/lib/languages/angelscript'),
+  apache: () => import('highlight.js/lib/languages/apache'),
+  applescript: () => import('highlight.js/lib/languages/applescript'),
+  arcade: () => import('highlight.js/lib/languages/arcade'),
+  arduino: () => import('highlight.js/lib/languages/arduino'),
+  armasm: () => import('highlight.js/lib/languages/armasm'),
+  asciidoc: () => import('highlight.js/lib/languages/asciidoc'),
+  aspectj: () => import('highlight.js/lib/languages/aspectj'),
+  autohotkey: () => import('highlight.js/lib/languages/autohotkey'),
+  autoit: () => import('highlight.js/lib/languages/autoit'),
+  avrasm: () => import('highlight.js/lib/languages/avrasm'),
+  awk: () => import('highlight.js/lib/languages/awk'),
+  axapta: () => import('highlight.js/lib/languages/axapta'),
+  bash: () => import('highlight.js/lib/languages/bash'),
+  basic: () => import('highlight.js/lib/languages/basic'),
+  bnf: () => import('highlight.js/lib/languages/bnf'),
+  brainfuck: () => import('highlight.js/lib/languages/brainfuck'),
+  c: () => import('highlight.js/lib/languages/c'),
+  cal: () => import('highlight.js/lib/languages/cal'),
+  capnproto: () => import('highlight.js/lib/languages/capnproto'),
+  ceylon: () => import('highlight.js/lib/languages/ceylon'),
+  clean: () => import('highlight.js/lib/languages/clean'),
+  'clojure-repl': () => import('highlight.js/lib/languages/clojure-repl'),
+  clojure: () => import('highlight.js/lib/languages/clojure'),
+  cmake: () => import('highlight.js/lib/languages/cmake'),
+  coffeescript: () => import('highlight.js/lib/languages/coffeescript'),
+  coq: () => import('highlight.js/lib/languages/coq'),
+  cos: () => import('highlight.js/lib/languages/cos'),
+  cpp: () => import('highlight.js/lib/languages/cpp'),
+  crmsh: () => import('highlight.js/lib/languages/crmsh'),
+  crystal: () => import('highlight.js/lib/languages/crystal'),
+  csharp: () => import('highlight.js/lib/languages/csharp'),
+  csp: () => import('highlight.js/lib/languages/csp'),
+  css: () => import('highlight.js/lib/languages/css'),
+  d: () => import('highlight.js/lib/languages/d'),
+  dart: () => import('highlight.js/lib/languages/dart'),
+  delphi: () => import('highlight.js/lib/languages/delphi'),
+  diff: () => import('highlight.js/lib/languages/diff'),
+  django: () => import('highlight.js/lib/languages/django'),
+  dns: () => import('highlight.js/lib/languages/dns'),
+  dockerfile: () => import('highlight.js/lib/languages/dockerfile'),
+  dos: () => import('highlight.js/lib/languages/dos'),
+  dsconfig: () => import('highlight.js/lib/languages/dsconfig'),
+  dts: () => import('highlight.js/lib/languages/dts'),
+  dust: () => import('highlight.js/lib/languages/dust'),
+  ebnf: () => import('highlight.js/lib/languages/ebnf'),
+  elixir: () => import('highlight.js/lib/languages/elixir'),
+  elm: () => import('highlight.js/lib/languages/elm'),
+  erb: () => import('highlight.js/lib/languages/erb'),
+  'erlang-repl': () => import('highlight.js/lib/languages/erlang-repl'),
+  erlang: () => import('highlight.js/lib/languages/erlang'),
+  excel: () => import('highlight.js/lib/languages/excel'),
+  fix: () => import('highlight.js/lib/languages/fix'),
+  flix: () => import('highlight.js/lib/languages/flix'),
+  fortran: () => import('highlight.js/lib/languages/fortran'),
+  fsharp: () => import('highlight.js/lib/languages/fsharp'),
+  gams: () => import('highlight.js/lib/languages/gams'),
+  gauss: () => import('highlight.js/lib/languages/gauss'),
+  gcode: () => import('highlight.js/lib/languages/gcode'),
+  gherkin: () => import('highlight.js/lib/languages/gherkin'),
+  glsl: () => import('highlight.js/lib/languages/glsl'),
+  gml: () => import('highlight.js/lib/languages/gml'),
+  go: () => import('highlight.js/lib/languages/go'),
+  golo: () => import('highlight.js/lib/languages/golo'),
+  gradle: () => import('highlight.js/lib/languages/gradle'),
+  graphql: () => import('highlight.js/lib/languages/graphql'),
+  groovy: () => import('highlight.js/lib/languages/groovy'),
+  haml: () => import('highlight.js/lib/languages/haml'),
+  handlebars: () => import('highlight.js/lib/languages/handlebars'),
+  haskell: () => import('highlight.js/lib/languages/haskell'),
+  haxe: () => import('highlight.js/lib/languages/haxe'),
+  hsp: () => import('highlight.js/lib/languages/hsp'),
+  html: () => import('highlight.js/lib/languages/xml'),
+  http: () => import('highlight.js/lib/languages/http'),
+  hy: () => import('highlight.js/lib/languages/hy'),
+  inform7: () => import('highlight.js/lib/languages/inform7'),
+  ini: () => import('highlight.js/lib/languages/ini'),
+  irpf90: () => import('highlight.js/lib/languages/irpf90'),
+  isbl: () => import('highlight.js/lib/languages/isbl'),
+  java: () => import('highlight.js/lib/languages/java'),
+  javascript: () => import('highlight.js/lib/languages/javascript'),
+  'jboss-cli': () => import('highlight.js/lib/languages/jboss-cli'),
+  json: () => import('highlight.js/lib/languages/json'),
+  'julia-repl': () => import('highlight.js/lib/languages/julia-repl'),
+  julia: () => import('highlight.js/lib/languages/julia'),
+  kotlin: () => import('highlight.js/lib/languages/kotlin'),
+  lasso: () => import('highlight.js/lib/languages/lasso'),
+  latex: () => import('highlight.js/lib/languages/latex'),
+  ldif: () => import('highlight.js/lib/languages/ldif'),
+  leaf: () => import('highlight.js/lib/languages/leaf'),
+  less: () => import('highlight.js/lib/languages/less'),
+  lisp: () => import('highlight.js/lib/languages/lisp'),
+  livecodeserver: () => import('highlight.js/lib/languages/livecodeserver'),
+  livescript: () => import('highlight.js/lib/languages/livescript'),
+  llvm: () => import('highlight.js/lib/languages/llvm'),
+  lsl: () => import('highlight.js/lib/languages/lsl'),
+  lua: () => import('highlight.js/lib/languages/lua'),
+  makefile: () => import('highlight.js/lib/languages/makefile'),
+  markdown: () => import('highlight.js/lib/languages/markdown'),
+  mathematica: () => import('highlight.js/lib/languages/mathematica'),
+  matlab: () => import('highlight.js/lib/languages/matlab'),
+  maxima: () => import('highlight.js/lib/languages/maxima'),
+  mel: () => import('highlight.js/lib/languages/mel'),
+  mercury: () => import('highlight.js/lib/languages/mercury'),
+  mipsasm: () => import('highlight.js/lib/languages/mipsasm'),
+  mizar: () => import('highlight.js/lib/languages/mizar'),
+  mojolicious: () => import('highlight.js/lib/languages/mojolicious'),
+  monkey: () => import('highlight.js/lib/languages/monkey'),
+  moonscript: () => import('highlight.js/lib/languages/moonscript'),
+  n1ql: () => import('highlight.js/lib/languages/n1ql'),
+  nestedtext: () => import('highlight.js/lib/languages/nestedtext'),
+  nginx: () => import('highlight.js/lib/languages/nginx'),
+  nim: () => import('highlight.js/lib/languages/nim'),
+  nix: () => import('highlight.js/lib/languages/nix'),
+  'node-repl': () => import('highlight.js/lib/languages/node-repl'),
+  nsis: () => import('highlight.js/lib/languages/nsis'),
+  objectivec: () => import('highlight.js/lib/languages/objectivec'),
+  ocaml: () => import('highlight.js/lib/languages/ocaml'),
+  openscad: () => import('highlight.js/lib/languages/openscad'),
+  oxygene: () => import('highlight.js/lib/languages/oxygene'),
+  parser3: () => import('highlight.js/lib/languages/parser3'),
+  perl: () => import('highlight.js/lib/languages/perl'),
+  pf: () => import('highlight.js/lib/languages/pf'),
+  pgsql: () => import('highlight.js/lib/languages/pgsql'),
+  'php-template': () => import('highlight.js/lib/languages/php-template'),
+  php: () => import('highlight.js/lib/languages/php'),
+  plaintext: () => import('highlight.js/lib/languages/plaintext'),
+  pony: () => import('highlight.js/lib/languages/pony'),
+  powershell: () => import('highlight.js/lib/languages/powershell'),
+  processing: () => import('highlight.js/lib/languages/processing'),
+  profile: () => import('highlight.js/lib/languages/profile'),
+  prolog: () => import('highlight.js/lib/languages/prolog'),
+  properties: () => import('highlight.js/lib/languages/properties'),
+  protobuf: () => import('highlight.js/lib/languages/protobuf'),
+  puppet: () => import('highlight.js/lib/languages/puppet'),
+  purebasic: () => import('highlight.js/lib/languages/purebasic'),
+  'python-repl': () => import('highlight.js/lib/languages/python-repl'),
+  python: () => import('highlight.js/lib/languages/python'),
+  q: () => import('highlight.js/lib/languages/q'),
+  qml: () => import('highlight.js/lib/languages/qml'),
+  r: () => import('highlight.js/lib/languages/r'),
+  reasonml: () => import('highlight.js/lib/languages/reasonml'),
+  rib: () => import('highlight.js/lib/languages/rib'),
+  roboconf: () => import('highlight.js/lib/languages/roboconf'),
+  routeros: () => import('highlight.js/lib/languages/routeros'),
+  rsl: () => import('highlight.js/lib/languages/rsl'),
+  ruby: () => import('highlight.js/lib/languages/ruby'),
+  ruleslanguage: () => import('highlight.js/lib/languages/ruleslanguage'),
+  rust: () => import('highlight.js/lib/languages/rust'),
+  sas: () => import('highlight.js/lib/languages/sas'),
+  scala: () => import('highlight.js/lib/languages/scala'),
+  scheme: () => import('highlight.js/lib/languages/scheme'),
+  scilab: () => import('highlight.js/lib/languages/scilab'),
+  scss: () => import('highlight.js/lib/languages/scss'),
+  shell: () => import('highlight.js/lib/languages/shell'),
+  smali: () => import('highlight.js/lib/languages/smali'),
+  smalltalk: () => import('highlight.js/lib/languages/smalltalk'),
+  sml: () => import('highlight.js/lib/languages/sml'),
+  sqf: () => import('highlight.js/lib/languages/sqf'),
+  sql: () => import('highlight.js/lib/languages/sql'),
+  stan: () => import('highlight.js/lib/languages/stan'),
+  stata: () => import('highlight.js/lib/languages/stata'),
+  step21: () => import('highlight.js/lib/languages/step21'),
+  stylus: () => import('highlight.js/lib/languages/stylus'),
+  subunit: () => import('highlight.js/lib/languages/subunit'),
+  swift: () => import('highlight.js/lib/languages/swift'),
+  taggerscript: () => import('highlight.js/lib/languages/taggerscript'),
+  tap: () => import('highlight.js/lib/languages/tap'),
+  tcl: () => import('highlight.js/lib/languages/tcl'),
+  thrift: () => import('highlight.js/lib/languages/thrift'),
+  tp: () => import('highlight.js/lib/languages/tp'),
+  twig: () => import('highlight.js/lib/languages/twig'),
+  typescript: () => import('highlight.js/lib/languages/typescript'),
+  vala: () => import('highlight.js/lib/languages/vala'),
+  vbnet: () => import('highlight.js/lib/languages/vbnet'),
+  'vbscript-html': () => import('highlight.js/lib/languages/vbscript-html'),
+  vbscript: () => import('highlight.js/lib/languages/vbscript'),
+  verilog: () => import('highlight.js/lib/languages/verilog'),
+  vhdl: () => import('highlight.js/lib/languages/vhdl'),
+  vim: () => import('highlight.js/lib/languages/vim'),
+  wasm: () => import('highlight.js/lib/languages/wasm'),
+  wren: () => import('highlight.js/lib/languages/wren'),
+  x86asm: () => import('highlight.js/lib/languages/x86asm'),
+  xl: () => import('highlight.js/lib/languages/xl'),
+  xml: () => import('highlight.js/lib/languages/xml'),
+  xquery: () => import('highlight.js/lib/languages/xquery'),
+  yaml: () => import('highlight.js/lib/languages/yaml'),
+  zephir: () => import('highlight.js/lib/languages/zephir')
+};
+const fileExtensionToLanguage = {
+  // JavaScript/TypeScript
+  js: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  jsx: 'javascript',
+  ts: 'typescript',
+  tsx: 'typescript',
+  mts: 'typescript',
+  cts: 'typescript',
+  // Web
+  html: 'html',
+  htm: 'html',
+  xml: 'xml',
+  svg: 'xml',
+  css: 'css',
+  scss: 'scss',
+  sass: 'scss',
+  less: 'less',
+  // Python
+  py: 'python',
+  pyw: 'python',
+  pyi: 'python',
+  // Java/JVM
+  java: 'java',
+  kt: 'kotlin',
+  kts: 'kotlin',
+  scala: 'scala',
+  groovy: 'groovy',
+  gradle: 'gradle',
+  // C/C++
+  c: 'c',
+  h: 'c',
+  cpp: 'cpp',
+  cc: 'cpp',
+  cxx: 'cpp',
+  hpp: 'cpp',
+  hh: 'cpp',
+  hxx: 'cpp',
+  // C#
+  cs: 'csharp',
+  csx: 'csharp',
+  // PHP
+  php: 'php',
+  phtml: 'php',
+  php3: 'php',
+  php4: 'php',
+  php5: 'php',
+  phps: 'php',
+  // Ruby
+  rb: 'ruby',
+  rake: 'ruby',
+  gemspec: 'ruby',
+  // Go
+  go: 'go',
+  // Rust
+  rs: 'rust',
+  // Swift
+  swift: 'swift',
+  // Shell
+  sh: 'bash',
+  bash: 'bash',
+  zsh: 'bash',
+  fish: 'shell',
+  bat: 'dos',
+  cmd: 'dos',
+  ps1: 'powershell',
+  // Config/Data
+  json: 'json',
+  yaml: 'yaml',
+  yml: 'yaml',
+  toml: 'ini',
+  ini: 'ini',
+  cfg: 'ini',
+  conf: 'ini',
+  properties: 'properties',
+  // Markdown/Docs
+  md: 'markdown',
+  markdown: 'markdown',
+  adoc: 'asciidoc',
+  asciidoc: 'asciidoc',
+  rst: 'plaintext',
+  tex: 'latex',
+  // SQL
+  sql: 'sql',
+  // Perl
+  pl: 'perl',
+  pm: 'perl',
+  // R
+  r: 'r',
+  R: 'r',
+  // Lua
+  lua: 'lua',
+  // Vim
+  vim: 'vim',
+  // Dockerfile
+  Dockerfile: 'dockerfile',
+  dockerfile: 'dockerfile',
+  // Makefile
+  Makefile: 'makefile',
+  mk: 'makefile',
+  // Diff/Patch
+  diff: 'diff',
+  patch: 'diff',
+  // Elixir
+  ex: 'elixir',
+  exs: 'elixir',
+  // Erlang
+  erl: 'erlang',
+  hrl: 'erlang',
+  // Haskell
+  hs: 'haskell',
+  lhs: 'haskell',
+  // Clojure
+  clj: 'clojure',
+  cljs: 'clojure',
+  cljc: 'clojure',
+  // Dart
+  dart: 'dart',
+  // F#
+  fs: 'fsharp',
+  fsi: 'fsharp',
+  fsx: 'fsharp',
+  // OCaml
+  ml: 'ocaml',
+  mli: 'ocaml',
+  // Lisp
+  lisp: 'lisp',
+  lsp: 'lisp',
+  // Scheme
+  scm: 'scheme',
+  ss: 'scheme',
+  // Julia
+  jl: 'julia',
+  // Nim
+  nim: 'nim',
+  // Crystal
+  cr: 'crystal',
+  // D
+  d: 'd',
+  // Fortran
+  f: 'fortran',
+  f90: 'fortran',
+  f95: 'fortran',
+  // Pascal/Delphi
+  pas: 'delphi',
+  dpr: 'delphi',
+  // Ada
+  ada: 'ada',
+  adb: 'ada',
+  ads: 'ada',
+  // COBOL
+  cob: 'coq',
+  cbl: 'coq',
+  // Assembly
+  asm: 'x86asm',
+  s: 'armasm',
+  // Verilog/VHDL
+  v: 'verilog',
+  vh: 'verilog',
+  vhd: 'vhdl',
+  vhdl: 'vhdl',
+  // GraphQL
+  graphql: 'graphql',
+  gql: 'graphql',
+  // Protobuf
+  proto: 'protobuf',
+  // Nginx
+  nginx: 'nginx',
+  // Apache
+  htaccess: 'apache',
+  // CMake
+  'CMakeLists.txt': 'cmake',
+  cmake: 'cmake',
+  // Handlebars
+  hbs: 'handlebars',
+  handlebars: 'handlebars',
+  // Django
+  djhtml: 'django',
+  // ERB
+  erb: 'erb',
+  // Haml
+  haml: 'haml',
+  // Pug
+  pug: 'plaintext',
+  jade: 'plaintext',
+  // CoffeeScript
+  coffee: 'coffeescript',
+  // Elm
+  elm: 'elm',
+  // ReasonML
+  re: 'reasonml',
+  rei: 'reasonml',
+  // Haxe
+  hx: 'haxe',
+  // ActionScript
+  as: 'actionscript',
+  // VB.NET
+  vb: 'vbnet',
+  // VBScript
+  vbs: 'vbscript',
+  // AutoHotkey
+  ahk: 'autohotkey',
+  // PowerShell
+  psm1: 'powershell',
+  psd1: 'powershell',
+  // Puppet
+  pp: 'puppet',
+  // Terraform
+  tf: 'plaintext',
+  tfvars: 'plaintext',
+  // Nix
+  nix: 'nix',
+  // Awk
+  awk: 'awk',
+  // Tcl
+  tcl: 'tcl',
+  // Prolog
+  pro: 'prolog',
+  // MATLAB
+  m: 'matlab',
+  // Mathematica
+  nb: 'mathematica',
+  wl: 'mathematica',
+  // SAS
+  sas: 'sas',
+  // Stata
+  do: 'stata',
+  ado: 'stata',
+  // GLSL
+  glsl: 'glsl',
+  vert: 'glsl',
+  frag: 'glsl',
+  // WebAssembly
+  wasm: 'wasm',
+  wat: 'wasm',
+  // Thrift
+  thrift: 'thrift',
+  // Stylus
+  styl: 'stylus',
+  // Twig
+  twig: 'twig',
+  // Smarty
+  tpl: 'plaintext',
+  // Dust
+  dust: 'dust'
+};
+const loadLanguagePackages = async function () {
+  let languages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  try {
+    await Promise.all(languages.map(async language => {
+      // Check if language is a file extension and map it to the actual language
+      const actualLanguage = fileExtensionToLanguage[language] || language;
+      const loader = languageLoaders[actualLanguage];
+      if (!highlightjs.listLanguages().includes(actualLanguage) && loader) {
+        const languageModule = await loader();
+        highlightjs.registerLanguage(actualLanguage, languageModule.default);
+        highlightjs.registerAliases([language], {
+          languageName: actualLanguage
+        });
+      }
+    }));
+  } catch (e) {
+    throw Error('Could not load highlight.js languages for duo chat syntax highlighting');
+  }
+};
+const highlightElement = async (element, languages) => {
+  // eslint-disable-next-line no-console
+  await loadLanguagePackages(languages);
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(() => highlightjs.highlightElement(element), {
+      timeout: 500
+    });
+  } else {
+    window.requestAnimationFrame(() => highlightjs.highlightElement(element));
+  }
+};
+const highlightCode = async (code, languages) => {
+  await loadLanguagePackages(languages);
+  const language = languages.pop();
+  return highlightjs.listLanguages().includes(language) ? highlightjs.highlight(code, {
+    language
+  }).value : code;
+};
+
+export { fileExtensionToLanguage, highlightCode, highlightElement, languageLoaders };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "15.3.0",
+  "version": "15.4.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -70,6 +70,7 @@
     "lodash": "^4.17.20",
     "marked": "^12.0.0",
     "marked-bidi": "^1.0.8",
+    "marked-highlight": "^2.2.3",
     "popper.js": "^1.16.1",
     "portal-vue": "^2.1.7",
     "vue-functional-data-merge": "^3.1.0",
@@ -103,7 +104,7 @@
     "@gitlab/eslint-plugin": "21.2.1",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/stylelint-config": "6.2.2",
-    "@gitlab/svgs": "^3.150.0",
+    "@gitlab/svgs": "^3.152.0",
     "@gitlab/ui": "^125.0.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",

package/src/components/agentic_chat/agentic_duo_chat.scss

@@ -290,7 +290,6 @@ $drawer-width: 400px;
     @apply gl-py-3;
     @apply gl-px-4;
     box-shadow: inset 0 0 0 $gl-border-size-1 $gray-100;
-    @apply gl-my-7;
     @apply gl-overflow-auto;
 
     code {
@@ -298,6 +297,8 @@ $drawer-width: 400px;
       @apply gl-rounded-none;
       @apply gl-text-gray-900;
       @apply gl-p-0;
+      @apply gl-overflow-initial;
+      @apply gl-inline;
     }
   }
 

package/src/components/agentic_chat/agentic_duo_chat.vue

@@ -840,7 +840,7 @@ export default {
         'resizable-content': shouldRenderResizable,
         'duo-chat-drawer': !shouldRenderResizable,
       }"
-      class="markdown-code-block duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
+      class="duo-chat gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
       role="complementary"
       data-testid="chat-component"
     >

package/src/components/agentic_chat/web_agentic_duo_chat.vue

@@ -846,7 +846,7 @@ export default {
 <template>
   <div
     id="chat-component"
-    class="markdown-code-block duo-chat web-only gl-bottom-0 gl-flex gl-max-h-full gl-flex-grow gl-flex-col"
+    class="duo-chat web-only gl-bottom-0 gl-flex gl-max-h-full gl-flex-grow gl-flex-col"
     role="complementary"
     data-testid="chat-component"
   >

package/src/components/chat/components/duo_chat_message/duo_chat_message.scss

@@ -13,8 +13,7 @@ $duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-1
 
   pre {
     box-shadow: none !important;
-    color: var(--duo-chat-message-pre-color, inherit) !important;
-    @apply gl-border gl-max-h-[60vh] gl-px-4 gl-py-3 gl-text-inherit;
+    @apply gl-border gl-max-h-[60vh] gl-scroll-smooth gl-px-4 gl-py-3 gl-text-inherit;
     background-color: var(--gl-background-color-preformat, var(--gl-background-color-default));
 
     &::before,
@@ -44,9 +43,10 @@ $duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-1
 
   pre code {
     @apply gl-text-sm;
-    @apply gl-leading-1;
     @apply gl-bg-transparent;
-    white-space: inherit;
+    @apply gl-block;
+    @apply gl-whitespace-pre-wrap;
+    @apply gl-break-all;
   }
 
   p:not(:last-of-type) {
@@ -87,15 +87,6 @@ $duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-1
   copy-code {
     margin-right: $gl-spacing-scale-8;
   }
-
-  .js-markdown-code.markdown-code-block:hover {
-    copy-code,
-    copy-code:focus-within,
-    insert-code-snippet,
-    insert-code-snippet:focus-within {
-      @apply gl-opacity-10;
-    }
-  }
 }
 
 .insert-code-hidden {
@@ -108,13 +99,18 @@ $duo-code-scrim-top-gradient: linear-gradient(to top, rgba($gray-10, 0), $gray-1
   }
 }
 
-.duo-message-pre-block:focus,
-.duo-message-pre-block:hover {
-  .copy-to-clipboard-button-container {
-    opacity: 1;
+.duo-chat-message-complete {
+  .duo-message-pre-block:focus,
+  .duo-message-pre-block:hover,
+  .duo-message-pre-block:has(button:focus) {
+    copy-code,
+    insert-code-snippet,
+    .copy-to-clipboard-button-container {
+      opacity: 1;
+    }
   }
 }
 
-.duo-message-pre-block .copy-to-clipboard-button-container:has(button:focus) {
-  opacity: 1;
+.duo-chat-message-error > p {
+  margin: 0;
 }