@gitlab/duo-ui 15.2.0 → 15.4.0

package/src/components/chat/mock_data.js

@@ -91,7 +91,7 @@ export const MOCK_TOOL_MESSAGE = {
 
 export const MOCK_AGENT_MESSAGE = {
   id: '123',
-  content: `I'll write a simple Python function with comments for you. Here's an example:\n\n<div class="gl-relative markdown-code-block js-markdown-code"><pre><code class="language-python"><span class="hljs-keyword">def</span> <span class="hljs-title function_">factorial</span>(<span class="hljs-params">n</span>):
+  contentHtml: `I'll write a simple Python function with comments for you. Here's an example:\n\n<div class="gl-relative markdown-code-block js-markdown-code"><pre><code class="language-python"><span class="hljs-keyword">def</span> <span class="hljs-title function_">factorial</span>(<span class="hljs-params">n</span>):
     <span class="hljs-string">&quot;&quot;&quot;
     Calculate the factorial of a non-negative integer.
 
@@ -118,6 +118,35 @@ export const MOCK_AGENT_MESSAGE = {
   message_type: MESSAGE_MODEL_ROLES.agent,
 };
 
+export const MOCK_AGENT_MESSAGE_WITH_MARKDOWN = {
+  status: 'success',
+  content:
+    "The `GENERATE_SERIES` function in PostgreSQL creates a set of values from a start to an end point, which is incredibly useful for generating sequences, filling gaps in data, or creating test datasets.\n\n#### Basic Syntax\n\n```sql\n-- Generate integers from 1 to 10\nSELECT * FROM GENERATE_SERIES(1, 10);\n\n-- Generate with a step value (every 2)\nSELECT * FROM GENERATE_SERIES(1, 10, 2);\n-- Returns: 1, 3, 5, 7, 9\n```\n\n#### Common Use Cases\n\n**1. Generate date ranges:**\n```sql\n-- Generate all dates in January 2025\nSELECT GENERATE_SERIES(\n  '2025-01-01'::timestamp,\n  '2025-01-31'::timestamp,\n  '1 day'::interval\n) AS date;\n```\n\n**2. Fill missing data gaps:**\n```sql\n-- Find missing IDs in a sequence\nSELECT missing_id\nFROM GENERATE_SERIES(1, 100) AS missing_id\nWHERE missing_id NOT IN (SELECT id FROM your_table);\n```\n\n**3. Create test data:**\n```sql\n-- Generate 1000 rows of test data\nSELECT \n  id,\n  'User ' || id AS username,\n  NOW() - (id || ' days')::interval AS created_at\nFROM GENERATE_SERIES(1, 1000) AS id;\n```\n\n**4. Time-based aggregations:**\n```sql\n-- Group data by hour, even for hours with no data\nSELECT \n  hour_slot,\n  COUNT(orders.id) AS order_count\nFROM GENERATE_SERIES(\n  '2025-01-01 00:00'::timestamp,\n  '2025-01-01 23:00'::timestamp,\n  '1 hour'::interval\n) AS hour_slot\nLEFT JOIN orders ON DATE_TRUNC('hour', orders.created_at) = hour_slot\nGROUP BY hour_slot\nORDER BY hour_slot;\n```\n\n**Key points:**\n- Works with integers, bigints, numeric types, and timestamps\n- The step parameter is optional (defaults to 1 for numbers, 1 day for timestamps)\n- For descending sequences, use a negative step: `GENERATE_SERIES(10, 1, -1)`\n- Can be used in `FROM` clauses, joins, or subqueries",
+  timestamp: '2025-11-29T13:32:50.545772+00:00',
+  tool_info: null,
+  message_type: 'agent',
+  correlation_id: null,
+  message_sub_type: null,
+  additional_context: null,
+};
+
+export const MOCK_AGENT_MESSAGE_WITH_LONG_CODE_BLOCK = {
+  status: 'success',
+  content: `
+  \`\`\`javascript
+  ${Array.from({ length: 500 })
+    .map(() => 'console.log("Hello world")')
+    .join('\n\n')}
+  \`\`\`
+  `,
+  timestamp: '2025-11-29T13:32:50.545772+00:00',
+  tool_info: null,
+  message_type: 'agent',
+  correlation_id: null,
+  message_sub_type: null,
+  additional_context: null,
+};
+
 export const MOCK_TOOL_MESSAGE_WITH_LINK = {
   id: '123',
   content: "Search for 'duo.*chat.*message' in directory",

package/src/components/chat/web_duo_chat.vue

@@ -738,7 +738,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-col"
+    class="duo-chat web-only gl-bottom-0 gl-flex gl-max-h-full gl-flex-col"
     role="complementary"
     data-testid="chat-component"
   >

package/src/components/ui/duo_layout/duo_layout.vue

@@ -81,7 +81,7 @@ export default {
     @resize:end="updateSize"
   >
     <aside
-      class="markdown-code-block duo-chat gl-align-items gl-bottom-0 gl-flex gl-h-full gl-max-h-full gl-flex-row gl-border-subtle"
+      class="duo-chat gl-align-items gl-bottom-0 gl-flex gl-h-full gl-max-h-full gl-flex-row gl-border-subtle"
     >
       <main
         class="content flex-none gl-border-r gl-flex gl-h-full gl-min-w-0 gl-grow gl-overflow-y-auto gl-border-subtle"

package/src/utils/highlight.js

@@ -0,0 +1,562 @@
+import highlightjs from 'highlight.js/lib/core';
+
+export 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'),
+};
+
+export 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 (languages = []) => {
+  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');
+  }
+};
+
+export 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));
+  }
+};
+
+export const highlightCode = async (code, languages) => {
+  await loadLanguagePackages(languages);
+
+  const language = languages.pop();
+
+  return highlightjs.listLanguages().includes(language)
+    ? highlightjs.highlight(code, { language }).value
+    : code;
+};

package/translations.js

@@ -95,6 +95,7 @@ export default {
     'Clock icon with circular arrow, indicating chat history or time-based functionality',
   'DuoChat.emptyHistoryCopy': 'Your previous chats will appear here.',
   'DuoChat.emptyHistoryTitle': 'See your chat history',
+  'DuoChat.loadingThreads': 'Loading chat history...',
   'DuoChat.openChatLabel': 'Open chat: %{title}',
   'DuoChat.threadDeleteLabel': 'Delete this chat',
   'DuoChat.untitledChatTitle': 'Untitled Chat',

package/dist/components/chat/components/duo_chat_message_tool_approval/services/highlight.js

@@ -1,21 +0,0 @@
-import highlightjs from 'highlight.js/lib/core';
-import json from 'highlight.js/lib/languages/json';
-import diff from 'highlight.js/lib/languages/diff';
-import markdown from 'highlight.js/lib/languages/markdown';
-
-const highlightElement = element => {
-  if (!highlightjs.listLanguages().includes('json')) {
-    highlightjs.registerLanguage('json', json);
-    highlightjs.registerLanguage('diff', diff);
-    highlightjs.registerLanguage('markdown', markdown);
-  }
-  if (typeof window.requestIdleCallback === 'function') {
-    window.requestIdleCallback(() => highlightjs.highlightElement(element), {
-      timeout: 500
-    });
-  } else {
-    window.requestAnimationFrame(() => highlightjs.highlightElement(element));
-  }
-};
-
-export { highlightElement };

package/src/components/chat/components/duo_chat_message_tool_approval/services/highlight.js

@@ -1,18 +0,0 @@
-import highlightjs from 'highlight.js/lib/core';
-import json from 'highlight.js/lib/languages/json';
-import diff from 'highlight.js/lib/languages/diff';
-import markdown from 'highlight.js/lib/languages/markdown';
-
-export const highlightElement = (element) => {
-  if (!highlightjs.listLanguages().includes('json')) {
-    highlightjs.registerLanguage('json', json);
-    highlightjs.registerLanguage('diff', diff);
-    highlightjs.registerLanguage('markdown', markdown);
-  }
-
-  if (typeof window.requestIdleCallback === 'function') {
-    window.requestIdleCallback(() => highlightjs.highlightElement(element), { timeout: 500 });
-  } else {
-    window.requestAnimationFrame(() => highlightjs.highlightElement(element));
-  }
-};