@gitlab/duo-ui 15.16.0 → 15.17.0

package/dist/components/agentic_chat/{web_agentic_duo_chat.js → web_agentic_duo_chat_deprecated.js}

@@ -7,10 +7,11 @@ import DuoChatLoader from '../chat/components/duo_chat_loader/duo_chat_loader';
 import DuoChatPredefinedPrompts from '../chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
 import DuoChatConversation from '../chat/components/duo_chat_conversation/duo_chat_conversation';
 import { messageRenderersValidator } from '../chat/components/utils';
-import WebDuoChatHeader from '../chat/components/duo_chat_header/web_duo_chat_header';
+import WebDuoChatHeader from '../chat/components/duo_chat_header/web_duo_chat_header_deprecated';
 import DuoChatThreads from '../chat/components/duo_chat_threads/duo_chat_threads';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 const i18n = {
   CHAT_DEFAULT_TITLE: translate('WebAgenticDuoChat.chatDefaultTitle', 'GitLab Duo Agentic Chat'),
   CHAT_HISTORY_TITLE: translate('WebAgenticDuoChat.chatHistoryTitle', 'Chat history'),
@@ -61,6 +62,12 @@ var script = {
   directives: {
     SafeHtml: GlSafeHtmlDirective
   },
+  provide() {
+    return {
+      // 'md' applies GitLab's markdown typography styles
+      markdownClass: 'md'
+    };
+  },
   props: {
     /**
      * Determines if the component should be resizable. When true, it renders inside

package/dist/components/chat/components/duo_chat_header/{web_duo_chat_header.js → web_duo_chat_header_deprecated.js}

@@ -5,6 +5,7 @@ import { copyToClipboard } from '../utils';
 import { VIEW_TYPES } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 const i18n = {
   CHAT_CLOSE_LABEL: translate('WebDuoChat.closeChatHeaderLabel', 'Close chat'),
   CHAT_BACK_TO_CHAT_TOOLTIP: translate('WebDuoChat.chatBackToChatToolTip', 'Back to chat'),

package/dist/components/chat/components/duo_chat_message/markdown_renderer.js

@@ -21,6 +21,10 @@ var script = {
     renderMarkdown: {
       from: 'renderMarkdown',
       default: () => renderDuoChatMarkdownPreview
+    },
+    markdownClass: {
+      from: 'markdownClass',
+      default: ''
     }
   },
   props: {
@@ -69,7 +73,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedMarkdown),expression:"renderedMarkdown",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"})};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedMarkdown),expression:"renderedMarkdown",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content",class:_vm.markdownClass})};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/chat/{web_duo_chat.js → web_duo_chat_deprecated.js}

@@ -6,10 +6,11 @@ import { VIEW_TYPES } from './components/duo_chat_header/constants';
 import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader';
 import DuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts';
 import DuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation';
-import WebDuoChatHeader from './components/duo_chat_header/web_duo_chat_header';
+import WebDuoChatHeader from './components/duo_chat_header/web_duo_chat_header_deprecated';
 import DuoChatThreads from './components/duo_chat_threads/duo_chat_threads';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 const i18n = {
   CHAT_DEFAULT_TITLE: translate('WebDuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
   CHAT_HISTORY_TITLE: translate('WebDuoChat.chatHistoryTitle', 'Chat history'),
@@ -60,6 +61,12 @@ var script = {
   directives: {
     SafeHtml: GlSafeHtmlDirective
   },
+  provide() {
+    return {
+      // 'md' applies GitLab's markdown typography styles
+      markdownClass: 'md'
+    };
+  },
   props: {
     /**
      * The title of the chat/feature.

package/dist/components.css.map

@@ -1 +1 @@
-{"version":3,"sources":["components.scss"],"names":[],"mappings":"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","file":"components.css","sourcesContent":["@charset \"UTF-8\";\n/*\n* SASS preserves units in arithmetic operations. For example:\n* 12em * 0 = 0em. This function return the unit of a numeric value.\n*\n* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ\n*/\n/* stylelint-disable @gitlab/no-gl-deprecated-design-tokens */\n/* stylelint-enable @gitlab/no-gl-deprecated-design-tokens */\n/* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */\n/* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */\n/**\n* Declares a property with a fluid value that decreases or\n* rises depending on the viewport’s size. The property type\n* should be numeric.\n*\n* Values are expected in rem units.\n* Fluid range: between 48rem (768px) – 75rem (1200px).\n*\n* @param $property Property name, i.e. line-height, font-size, width, height, etc.\n* @param $min Property value lower bound.\n* @param $max Property value upper bound.\n*/\n/**\n* Helper function for :focus\n*\n* @param $size is deprecated and should not be used anymore\n*/\n/**\n* Helper function for @media of at least the minimum\n* breakpoint width.\n*\n* @param $name Breakpoint name, such as `sm` or `md`.\n*/\n/**\n* Helper function for @media of at most the maximum\n* breakpoint width.\n*\n* Note: Before using, consider using a mobile-first\n* approach, and define @media for larger breakpoints\n* using `gl-media-breakpoint-up` while using this rule as\n* the starting point instead.\n*\n* @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid\n*/\n/**\n* Helper function to resolve font-size value from $gl-font-sizes and\n* $gl-font-sizes-fixed maps.\n*\n* @param $size Number font-size scale\n* @param $fixed Boolean toggle default and fixed font size scales\n*/\n.resizable-content {\n  height: 100%;\n  width: 100%;\n  background: var(--gl-background-color-default);\n  border-radius: 0.5rem;\n  @apply gl-overflow-y-auto;\n  @apply gl-shadow-lg;\n  @apply gl-text-base;\n  @apply gl-leading-normal;\n  @apply gl-flex;\n  @apply gl-flex-col;\n}\n\n.resizable-component .resizable-t,\n.resizable-component .resizable-l {\n  background-color: transparent;\n  border-radius: 3px;\n  transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .resizable-component .resizable-t,\n.resizable-component .resizable-l {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.resizable-component .resizable-t:hover,\n.resizable-component .resizable-l:hover {\n  background-color: var(--gl-color-blue-200);\n}\n.resizable-component .resizable-t {\n  width: 95% !important;\n  transform: translateX(-50%);\n  left: 50% !important;\n  height: 4px !important;\n  top: 2px !important;\n}\n.resizable-component .resizable-l {\n  height: 95% !important;\n  transform: translateY(-50%);\n  top: 50% !important;\n  width: 4px !important;\n  left: 2px !important;\n}\n.resizable-component .duo-chat {\n  @apply gl-z-0;\n}\n.resizable-component .resizable-l,\n.resizable-component .resizable-lt,\n.resizable-component .resizable-t {\n  @apply gl-z-1;\n}\n\n.duo-chat {\n  z-index: 999;\n  @apply gl-font-regular;\n}\n.duo-chat .message-enter-active,\n.duo-chat .message-leave-active {\n  transition: all 0.5s ease;\n}\n.duo-chat .message-enter,\n.duo-chat .message-leave-to {\n  @apply gl-opacity-0;\n  transform: translateY(10px);\n}\n.duo-chat .duo-chat-loader.message-leave,\n.duo-chat .duo-chat-loader.message-leave-to {\n  transition: none;\n}\n.duo-chat .duo-agent-mode-switcher > *,\n.duo-chat .duo-model-switcher > * {\n  width: 100%;\n}\n\n.duo-chat-drawer {\n  right: 0;\n  @apply gl-transition-all;\n  position: fixed;\n  @apply gl-h-full;\n  @apply gl-w-full;\n  @apply gl-overflow-y-auto;\n  @apply gl-shadow-lg;\n  @apply gl-text-base;\n  @apply gl-leading-normal;\n  @apply gl-flex;\n  @apply gl-flex-col;\n}\n\n.duo-chat-drawer-footer {\n  @apply gl-px-4;\n  @apply gl-pb-4;\n}\n.duo-chat-drawer-footer::before {\n  background: linear-gradient(to bottom, transparent, var(--gl-background-color-default));\n  top: 0;\n  @apply -gl-translate-y-full;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  @apply gl-pointer-events-none;\n  @apply gl-w-full;\n  @apply gl-h-4;\n}\n\n.duo-chat-history {\n  scroll-behavior: smooth;\n  /*\n  Browsers a are pretty good at keeping the focus on an element while\n  the parent element grows in size. With this we mark all child elements\n  of the chat history as \"non\" anchors.\n  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor\n  */\n  /*\n  Right at the bottom of the chat history we add a scroll-anchor element.\n  This scroll-anchor element is the only \"possible\" anchor. The beauty of it:\n  It only will be used as an anchor _if_ it is currently inside the view port.\n  So if the user manually scrolls up while a chunked message is coming in,\n  it won't stick to the bottom while the message still loads.\n  */\n}\n.duo-chat-history * {\n  overflow-anchor: none;\n}\n.duo-chat-history .scroll-anchor {\n  overflow-anchor: auto;\n  height: 1px;\n  margin-top: -1px;\n}\n\n.history-item {\n  @apply gl-pr-2;\n  @apply -gl-mx-3;\n  @apply gl-rounded-lg;\n  @apply gl-flex;\n  @apply gl-gap-3;\n  @apply gl-items-center;\n  background: var(--gl-button-default-tertiary-background-color-default);\n  transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n.history-item:hover, .history-item:focus, .history-item:focus-within {\n  background: var(--gl-button-default-tertiary-background-color-hover);\n}\n.history-item:hover .history-remove-button, .history-item:focus .history-remove-button, .history-item:focus-within .history-remove-button {\n  opacity: 1;\n}\n.history-item .history-remove-button {\n  opacity: 0;\n  transition: opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n.history-item .history-item-name {\n  @apply gl-py-3;\n  @apply gl-px-3;\n  @apply gl-rounded-lg;\n  @apply gl-border-0;\n}\n.history-item .history-item-name, .history-item .history-item-name:hover, .history-item .history-item-name:active, .history-item .history-item-name:focus {\n  background-color: transparent !important;\n}\n.history-item .gl-button-text {\n  @apply gl-w-full;\n  @apply gl-flex;\n  @apply gl-flex-row;\n  @apply gl-items-center;\n  @apply gl-gap-3;\n  @apply gl-text-left;\n}\n\n.duo-chat-input {\n  @apply gl-flex;\n  @apply gl-flex-col;\n  max-height: 240px;\n  overflow: hidden;\n  background: var(--gl-control-background-color-default);\n  box-shadow: inset 0 0 0 1px var(--gl-control-border-color-default);\n  border-radius: 1.25rem;\n}\n.duo-chat-input:focus-within {\n  box-shadow: inset 0 0 0 1px var(--gl-control-border-color-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color);\n  outline: none;\n}\n@media (forced-colors: active) {\n  .duo-chat-input:focus-within {\n    outline: 2px solid LinkText;\n  }\n}\n.duo-chat-input .gl-form-textarea.form-control {\n  flex: 1;\n  resize: none;\n  max-height: 240px;\n  padding-right: 40px;\n  border-radius: 1.25rem;\n}\n.duo-chat-input::after {\n  content: attr(data-value) \" \";\n  @apply gl-invisible;\n  @apply gl-p-4;\n  @apply gl-font-regular;\n  padding-right: 40px;\n  word-break: break-word;\n}\n\n.duo-chat .duo-chat-suggestion-button {\n  @apply gl-rounded-[1rem];\n}\n\n.slash-commands {\n  @apply -gl-mt-2;\n}\n.slash-commands .active-command {\n  @apply gl-bg-strong;\n  @apply gl-rounded-base;\n}\n.slash-commands .gl-dropdown-item button.dropdown-item {\n  @apply gl-text-sm;\n  @apply gl-px-3;\n  @apply gl-bg-transparent;\n}\n.slash-commands .gl-dropdown-item button.dropdown-item:hover {\n  @apply gl-bg-transparent;\n}\n\n.duo-chat-markdown {\n  @apply gl-text-lg;\n  @apply gl-leading-24;\n  color: #3a383f;\n  @apply gl-font-regular;\n  @apply gl-font-normal;\n}\n.duo-chat-markdown :first-child {\n  @apply gl-mt-0;\n}\n.duo-chat-markdown h1,\n.duo-chat-markdown .gl-h1 {\n  @apply gl-heading-1;\n  @apply gl-mt-7;\n}\n.duo-chat-markdown h2,\n.duo-chat-markdown .gl-h2 {\n  @apply gl-heading-2;\n  @apply gl-mt-6;\n}\n.duo-chat-markdown h3,\n.duo-chat-markdown .gl-h3 {\n  @apply gl-heading-3;\n  @apply gl-mt-6;\n}\n.duo-chat-markdown h4,\n.duo-chat-markdown .gl-h4 {\n  @apply gl-heading-4;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown h5,\n.duo-chat-markdown .gl-h5 {\n  @apply gl-heading-5;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown h6,\n.duo-chat-markdown .gl-h6 {\n  @apply gl-heading-6;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown p,\n.duo-chat-markdown .gl-paragraph {\n  @apply gl-mt-0;\n  @apply gl-mb-0;\n}\n.duo-chat-markdown p + p,\n.duo-chat-markdown p + .gl-paragraph,\n.duo-chat-markdown .gl-paragraph + p,\n.duo-chat-markdown .gl-paragraph + .gl-paragraph {\n  @apply gl-mt-5;\n}\n.duo-chat-markdown p.sm,\n.duo-chat-markdown .gl-paragraph.sm {\n  font-size: 0.875rem;\n  @apply gl-leading-20;\n}\n.duo-chat-markdown .sm {\n  font-size: 0.875rem;\n  @apply gl-leading-20;\n}\n.duo-chat-markdown .monospace,\n.duo-chat-markdown code {\n  @apply gl-font-monospace;\n}\n.duo-chat-markdown blockquote {\n  @apply gl-text-gray-700;\n  @apply gl-py-3;\n  @apply gl-pl-6;\n  @apply gl-my-3;\n  @apply gl-mx-0;\n  box-shadow: inset 4px 0 0 0 #dcdcde;\n}\n.duo-chat-markdown .idiff {\n  @apply gl-rounded-base;\n  @apply gl-inline-flex;\n  @apply gl-px-2;\n}\n.duo-chat-markdown .deletion {\n  @apply gl-bg-red-100;\n}\n.duo-chat-markdown .addition {\n  @apply gl-bg-green-100;\n}\n.duo-chat-markdown code {\n  @apply gl-rounded-base;\n  @apply gl-bg-gray-50;\n  @apply gl-text-gray-950;\n  @apply gl-px-2;\n  @apply gl-py-1;\n}\n.duo-chat-markdown pre {\n  @apply gl-rounded-base;\n  @apply gl-py-3;\n  @apply gl-px-4;\n  box-shadow: inset 0 0 0 1px #dcdcde;\n  @apply gl-my-7;\n  @apply gl-overflow-auto;\n}\n.duo-chat-markdown pre code {\n  @apply gl-bg-white;\n  @apply gl-rounded-none;\n  @apply gl-text-gray-900;\n  @apply gl-p-0;\n}\n.duo-chat-markdown .audio-container {\n  @apply gl-inline-flex;\n  @apply gl-flex-col;\n  @apply gl-w-full;\n}\n.duo-chat-markdown .audio-container audio {\n  @apply gl-w-full;\n}\n.duo-chat-markdown .audio-container a {\n  @apply gl-mt-3;\n}\n.duo-chat-markdown .audio-container a::before {\n  @apply gl-mr-2;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  content: \"📎\";\n}\n.duo-chat-markdown table {\n  @apply gl-my-7;\n}\n.duo-chat-markdown table th,\n.duo-chat-markdown table td {\n  @apply gl-px-3;\n  @apply gl-py-4;\n  box-shadow: inset 0 -1px 0 0 #dcdcde;\n  @apply gl-align-top;\n}\n.duo-chat-markdown table th {\n  box-shadow: inset 0 1px 0 0 #dcdcde, inset 0 -1px 0 0 #dcdcde;\n  @apply gl-font-bold;\n}\n.duo-chat-markdown table thead {\n  @apply gl-bg-gray-50;\n}\n.duo-chat-markdown table tr:nth-child(even) {\n  @apply gl-bg-gray-10;\n}\n\n.duo-chat-compact-markdown {\n  @apply gl-text-base;\n  @apply gl-leading-20;\n}\n.duo-chat-compact-markdown h1,\n.duo-chat-compact-markdown .gl-h1 {\n  @apply gl-heading-1-fixed;\n  @apply gl-mt-7;\n}\n.duo-chat-compact-markdown h2,\n.duo-chat-compact-markdown .gl-h2 {\n  @apply gl-heading-2-fixed;\n  @apply gl-mt-6;\n}\n.duo-chat-compact-markdown h3,\n.duo-chat-compact-markdown .gl-h3 {\n  @apply gl-heading-3-fixed;\n  @apply gl-mt-6;\n}\n.duo-chat-compact-markdown h4,\n.duo-chat-compact-markdown .gl-h4 {\n  @apply gl-heading-4-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown h5,\n.duo-chat-compact-markdown .gl-h5 {\n  @apply gl-heading-5-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown h6,\n.duo-chat-compact-markdown .gl-h6 {\n  @apply gl-heading-6-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown .sm {\n  @apply gl-text-sm;\n}\n.duo-chat-compact-markdown .monospace,\n.duo-chat-compact-markdown code {\n  @apply gl-font-monospace;\n}\n.duo-chat-compact-markdown table th,\n.duo-chat-compact-markdown table td {\n  @apply gl-py-3;\n}\n\n.message-tool-approval-collapsed {\n  border-bottom: 0;\n}\n\n.message-tool-approval-collapsed-header {\n  border-bottom-left-radius: calc(var(--gl-card-border-radius) - 1px);\n  border-bottom-right-radius: calc(var(--gl-card-border-radius) - 1px);\n}\n\n.web-only .duo-chat-input {\n  position: relative;\n  overflow: visible;\n}\n.web-only .duo-chat-input::after {\n  @apply gl-p-2;\n}\n\n.web-only .duo-chat-input-wrap {\n  min-height: 80px;\n  max-height: 240px;\n  overflow: hidden;\n}\n.web-only .duo-chat-input-wrap .gl-form-textarea.form-control {\n  flex: 1;\n  resize: none;\n}\n.web-only .duo-chat-input-wrap::after {\n  content: attr(data-value) \" \";\n  @apply gl-invisible;\n  @apply gl-p-4;\n  @apply gl-font-regular;\n  padding-right: 40px;\n  word-break: break-word;\n}\n\n.web-only .duo-chat-message pre code {\n  color: inherit !important;\n  background-color: transparent !important;\n}\n\n.duo-chat-loader {\n  @apply gl-flex;\n}\n.duo-chat-loader .transition {\n  transition: width 200ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .transition {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-enter {\n  @apply gl-opacity-0;\n}\n.duo-chat-loader .text-enter-active {\n  transition: opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .text-enter-active {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-enter-to {\n  @apply gl-opacity-10;\n}\n.duo-chat-loader .text-leave {\n  @apply gl-opacity-10;\n}\n.duo-chat-loader .text-leave-active {\n  transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .text-leave-active {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-leave-to {\n  @apply gl-opacity-0;\n}\n\n.duo-chat-message {\n  position: relative;\n  border-radius: 1rem 1rem 0;\n  color: var(--duo-chat-message-color, inherit) !important;\n  --gl-text-color-heading: var(--duo-chat-message-heading-color, inherit) !important;\n}\n.duo-chat-message code {\n  @apply gl-bg-status-neutral;\n}\n.duo-chat-message pre {\n  box-shadow: none !important;\n  @apply gl-border gl-max-h-[60vh] gl-scroll-smooth gl-px-4 gl-py-3 gl-text-inherit;\n  background-color: var(--gl-background-color-preformat, var(--gl-background-color-default));\n}\n.duo-chat-message pre::before, .duo-chat-message pre::after {\n  content: \"\";\n  left: 1px;\n  width: calc(100% - 2px);\n  position: absolute;\n  @apply gl-pointer-events-none gl-h-7 gl-rounded-b-base;\n}\n.duo-chat-message pre.scrim-top::before {\n  background: linear-gradient(to bottom, transparent, var(--gl-background-color-default));\n  top: 1px;\n  @apply -gl-rotate-180;\n}\n.duo-chat-message pre.scrim-bottom::after {\n  background: linear-gradient(to bottom, transparent, var(--gl-background-color-default));\n  bottom: 1px;\n}\n.duo-chat-message pre code {\n  @apply gl-text-sm;\n  @apply gl-bg-transparent;\n  @apply gl-block;\n  @apply gl-whitespace-pre-wrap;\n  @apply gl-break-all;\n}\n.duo-chat-message p:not(:last-of-type) {\n  @apply gl-mb-4;\n}\n.duo-chat-message p:last-of-type {\n  @apply gl-mb-0;\n}\n.duo-chat-message copy-code,\n.duo-chat-message insert-code-snippet {\n  position: absolute;\n  @apply gl-transition-all;\n  @apply gl-opacity-0;\n  right: 0.5rem;\n  top: 0.5rem;\n}\n.duo-chat-message copy-code [role=tooltip],\n.duo-chat-message insert-code-snippet [role=tooltip] {\n  display: none;\n  @apply gl-bg-gray-100;\n  width: max-content;\n  position: absolute;\n  top: 0;\n  left: 0;\n  @apply gl-rounded-base;\n}\n.duo-chat-message copy-code [role=tooltip] .arrow,\n.duo-chat-message insert-code-snippet [role=tooltip] .arrow {\n  position: absolute;\n  background: inherit;\n  @apply gl-h-3 gl-w-3;\n  transform: rotate(45deg);\n}\n.duo-chat-message copy-code {\n  margin-right: 2.5rem;\n}\n\n.insert-code-hidden insert-code-snippet {\n  display: none;\n}\n.insert-code-hidden copy-code {\n  margin-right: 0;\n}\n\n.duo-chat-message-complete .duo-message-pre-block:focus copy-code,\n.duo-chat-message-complete .duo-message-pre-block:focus insert-code-snippet,\n.duo-chat-message-complete .duo-message-pre-block:focus .copy-to-clipboard-button-container,\n.duo-chat-message-complete .duo-message-pre-block:hover copy-code,\n.duo-chat-message-complete .duo-message-pre-block:hover insert-code-snippet,\n.duo-chat-message-complete .duo-message-pre-block:hover .copy-to-clipboard-button-container,\n.duo-chat-message-complete .duo-message-pre-block:has(button:focus) copy-code,\n.duo-chat-message-complete .duo-message-pre-block:has(button:focus) insert-code-snippet,\n.duo-chat-message-complete .duo-message-pre-block:has(button:focus) .copy-to-clipboard-button-container {\n  opacity: 1;\n}\n\n.duo-chat-message-error > p {\n  margin: 0;\n}\n\n.agentic-feedback-hover-wrapper {\n  transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s ease-in-out;\n}\n.gl-group:hover .agentic-feedback-hover-wrapper {\n  width: auto;\n  opacity: 1;\n  margin-right: 0;\n}\n\n.recents-wrapper .gl-accordion-item-header .gl-button.gl-button.btn-link {\n  @apply gl-block;\n  @apply gl-w-full;\n  @apply gl-pl-3;\n  @apply gl-py-2;\n  @apply gl-rounded-none;\n  @apply gl-shadow-none;\n  @apply gl-no-underline;\n  @apply gl-uppercase;\n  @apply gl-font-bold;\n  @apply gl-text-sm;\n}\n.recents-wrapper .gl-accordion-item-header > .collapse {\n  @apply gl-ml-0;\n}\n.recents-wrapper .gl-text-base {\n  @apply gl-mt-0;\n}\n\n.agentic-binary-feedback .feedback-colored-icon {\n  animation: feedback-fade-out 0.3s ease-in-out forwards;\n  animation-delay: 0.3s;\n  will-change: opacity;\n  margin-left: 4px;\n}\n.agentic-binary-feedback .feedback-thanks {\n  pointer-events: none;\n  animation: feedback-fade-in 0.3s ease-in-out forwards;\n  animation-delay: 0.3s;\n  will-change: opacity, width, margin;\n}\n\n@keyframes feedback-fade-out {\n  to {\n    opacity: 0;\n    width: 0;\n    overflow: hidden;\n    pointer-events: none;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .feedback-colored-icon,\n.feedback-thanks {\n    animation: none;\n  }\n}\n@keyframes feedback-fade-in {\n  to {\n    opacity: 1;\n    width: auto;\n    margin-left: -6px;\n    pointer-events: auto;\n  }\n}"]}
+{"version":3,"sources":["components.scss"],"names":[],"mappings":"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","file":"components.css","sourcesContent":["@charset \"UTF-8\";\n/*\n* SASS preserves units in arithmetic operations. For example:\n* 12em * 0 = 0em. This function return the unit of a numeric value.\n*\n* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ\n*/\n/* stylelint-disable @gitlab/no-gl-deprecated-design-tokens */\n/* stylelint-enable @gitlab/no-gl-deprecated-design-tokens */\n/* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */\n/* stylelint-disable-next-line @gitlab/no-gl-deprecated-design-tokens */\n/**\n* Declares a property with a fluid value that decreases or\n* rises depending on the viewport’s size. The property type\n* should be numeric.\n*\n* Values are expected in rem units.\n* Fluid range: between 48rem (768px) – 75rem (1200px).\n*\n* @param $property Property name, i.e. line-height, font-size, width, height, etc.\n* @param $min Property value lower bound.\n* @param $max Property value upper bound.\n*/\n/**\n* Helper function for :focus\n*\n* @param $size is deprecated and should not be used anymore\n*/\n/**\n* Helper function for @media of at least the minimum\n* breakpoint width.\n*\n* @param $name Breakpoint name, such as `sm` or `md`.\n*/\n/**\n* Helper function for @media of at most the maximum\n* breakpoint width.\n*\n* Note: Before using, consider using a mobile-first\n* approach, and define @media for larger breakpoints\n* using `gl-media-breakpoint-up` while using this rule as\n* the starting point instead.\n*\n* @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid\n*/\n/**\n* Helper function to resolve font-size value from $gl-font-sizes and\n* $gl-font-sizes-fixed maps.\n*\n* @param $size Number font-size scale\n* @param $fixed Boolean toggle default and fixed font size scales\n*/\n.resizable-content {\n  height: 100%;\n  width: 100%;\n  background: var(--gl-background-color-default);\n  border-radius: 0.5rem;\n  @apply gl-overflow-y-auto;\n  @apply gl-shadow-lg;\n  @apply gl-text-base;\n  @apply gl-leading-normal;\n  @apply gl-flex;\n  @apply gl-flex-col;\n}\n\n.resizable-component .resizable-t,\n.resizable-component .resizable-l {\n  background-color: transparent;\n  border-radius: 3px;\n  transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .resizable-component .resizable-t,\n.resizable-component .resizable-l {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.resizable-component .resizable-t:hover,\n.resizable-component .resizable-l:hover {\n  background-color: var(--gl-color-blue-200);\n}\n.resizable-component .resizable-t {\n  width: 95% !important;\n  transform: translateX(-50%);\n  left: 50% !important;\n  height: 4px !important;\n  top: 2px !important;\n}\n.resizable-component .resizable-l {\n  height: 95% !important;\n  transform: translateY(-50%);\n  top: 50% !important;\n  width: 4px !important;\n  left: 2px !important;\n}\n.resizable-component .duo-chat {\n  @apply gl-z-0;\n}\n.resizable-component .resizable-l,\n.resizable-component .resizable-lt,\n.resizable-component .resizable-t {\n  @apply gl-z-1;\n}\n\n.duo-chat {\n  z-index: 999;\n  @apply gl-font-regular;\n}\n.duo-chat .message-enter-active,\n.duo-chat .message-leave-active {\n  transition: all 0.5s ease;\n}\n.duo-chat .message-enter,\n.duo-chat .message-leave-to {\n  @apply gl-opacity-0;\n  transform: translateY(10px);\n}\n.duo-chat .duo-chat-loader.message-leave,\n.duo-chat .duo-chat-loader.message-leave-to {\n  transition: none;\n}\n.duo-chat .duo-agent-mode-switcher > *,\n.duo-chat .duo-model-switcher > * {\n  width: 100%;\n}\n\n.duo-chat-drawer {\n  right: 0;\n  @apply gl-transition-all;\n  position: fixed;\n  @apply gl-h-full;\n  @apply gl-w-full;\n  @apply gl-overflow-y-auto;\n  @apply gl-shadow-lg;\n  @apply gl-text-base;\n  @apply gl-leading-normal;\n  @apply gl-flex;\n  @apply gl-flex-col;\n}\n\n.duo-chat-drawer-footer {\n  @apply gl-px-4;\n  @apply gl-pb-4;\n}\n.duo-chat-drawer-footer::before {\n  background: linear-gradient(to bottom, transparent, var(--gl-background-color-default));\n  top: 0;\n  @apply -gl-translate-y-full;\n  content: \"\";\n  left: 0;\n  position: absolute;\n  @apply gl-pointer-events-none;\n  @apply gl-w-full;\n  @apply gl-h-4;\n}\n\n.duo-chat-history {\n  scroll-behavior: smooth;\n  /*\n  Browsers a are pretty good at keeping the focus on an element while\n  the parent element grows in size. With this we mark all child elements\n  of the chat history as \"non\" anchors.\n  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor\n  */\n  /*\n  Right at the bottom of the chat history we add a scroll-anchor element.\n  This scroll-anchor element is the only \"possible\" anchor. The beauty of it:\n  It only will be used as an anchor _if_ it is currently inside the view port.\n  So if the user manually scrolls up while a chunked message is coming in,\n  it won't stick to the bottom while the message still loads.\n  */\n}\n.duo-chat-history * {\n  overflow-anchor: none;\n}\n.duo-chat-history .scroll-anchor {\n  overflow-anchor: auto;\n  height: 1px;\n  margin-top: -1px;\n}\n\n.history-item {\n  @apply gl-pr-2;\n  @apply -gl-mx-3;\n  @apply gl-rounded-lg;\n  @apply gl-flex;\n  @apply gl-gap-3;\n  @apply gl-items-center;\n  background: var(--gl-button-default-tertiary-background-color-default);\n  transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n.history-item:hover, .history-item:focus, .history-item:focus-within {\n  background: var(--gl-button-default-tertiary-background-color-hover);\n}\n.history-item:hover .history-remove-button, .history-item:focus .history-remove-button, .history-item:focus-within .history-remove-button {\n  opacity: 1;\n}\n.history-item .history-remove-button {\n  opacity: 0;\n  transition: opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n.history-item .history-item-name {\n  @apply gl-py-3;\n  @apply gl-px-3;\n  @apply gl-rounded-lg;\n  @apply gl-border-0;\n}\n.history-item .history-item-name, .history-item .history-item-name:hover, .history-item .history-item-name:active, .history-item .history-item-name:focus {\n  background-color: transparent !important;\n}\n.history-item .gl-button-text {\n  @apply gl-w-full;\n  @apply gl-flex;\n  @apply gl-flex-row;\n  @apply gl-items-center;\n  @apply gl-gap-3;\n  @apply gl-text-left;\n}\n\n.duo-chat-input {\n  @apply gl-flex;\n  @apply gl-flex-col;\n  max-height: 240px;\n  overflow: hidden;\n  background: var(--gl-control-background-color-default);\n  box-shadow: inset 0 0 0 1px var(--gl-control-border-color-default);\n  border-radius: 1.25rem;\n}\n.duo-chat-input:focus-within {\n  box-shadow: inset 0 0 0 1px var(--gl-control-border-color-focus), 0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color);\n  outline: none;\n}\n@media (forced-colors: active) {\n  .duo-chat-input:focus-within {\n    outline: 2px solid LinkText;\n  }\n}\n.duo-chat-input .gl-form-textarea.form-control {\n  flex: 1;\n  resize: none;\n  max-height: 240px;\n  padding-right: 40px;\n  border-radius: 1.25rem;\n}\n.duo-chat-input::after {\n  content: attr(data-value) \" \";\n  @apply gl-invisible;\n  @apply gl-p-4;\n  @apply gl-font-regular;\n  padding-right: 40px;\n  word-break: break-word;\n}\n\n.duo-chat .duo-chat-suggestion-button {\n  @apply gl-rounded-[1rem];\n}\n\n.slash-commands {\n  @apply -gl-mt-2;\n}\n.slash-commands .active-command {\n  @apply gl-bg-strong;\n  @apply gl-rounded-base;\n}\n.slash-commands .gl-dropdown-item button.dropdown-item {\n  @apply gl-text-sm;\n  @apply gl-px-3;\n  @apply gl-bg-transparent;\n}\n.slash-commands .gl-dropdown-item button.dropdown-item:hover {\n  @apply gl-bg-transparent;\n}\n\n.duo-chat-markdown {\n  @apply gl-text-lg;\n  @apply gl-leading-24;\n  color: #3a383f;\n  @apply gl-font-regular;\n  @apply gl-font-normal;\n}\n.duo-chat-markdown :first-child {\n  @apply gl-mt-0;\n}\n.duo-chat-markdown h1,\n.duo-chat-markdown .gl-h1 {\n  @apply gl-heading-1;\n  @apply gl-mt-7;\n}\n.duo-chat-markdown h2,\n.duo-chat-markdown .gl-h2 {\n  @apply gl-heading-2;\n  @apply gl-mt-6;\n}\n.duo-chat-markdown h3,\n.duo-chat-markdown .gl-h3 {\n  @apply gl-heading-3;\n  @apply gl-mt-6;\n}\n.duo-chat-markdown h4,\n.duo-chat-markdown .gl-h4 {\n  @apply gl-heading-4;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown h5,\n.duo-chat-markdown .gl-h5 {\n  @apply gl-heading-5;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown h6,\n.duo-chat-markdown .gl-h6 {\n  @apply gl-heading-6;\n  @apply gl-mt-5;\n}\n.duo-chat-markdown p,\n.duo-chat-markdown .gl-paragraph {\n  @apply gl-mt-0;\n  @apply gl-mb-0;\n}\n.duo-chat-markdown p + p,\n.duo-chat-markdown p + .gl-paragraph,\n.duo-chat-markdown .gl-paragraph + p,\n.duo-chat-markdown .gl-paragraph + .gl-paragraph {\n  @apply gl-mt-5;\n}\n.duo-chat-markdown p.sm,\n.duo-chat-markdown .gl-paragraph.sm {\n  font-size: 0.875rem;\n  @apply gl-leading-20;\n}\n.duo-chat-markdown .sm {\n  font-size: 0.875rem;\n  @apply gl-leading-20;\n}\n.duo-chat-markdown .monospace,\n.duo-chat-markdown code {\n  @apply gl-font-monospace;\n}\n.duo-chat-markdown blockquote {\n  @apply gl-text-gray-700;\n  @apply gl-py-3;\n  @apply gl-pl-6;\n  @apply gl-my-3;\n  @apply gl-mx-0;\n  box-shadow: inset 4px 0 0 0 #dcdcde;\n}\n.duo-chat-markdown .idiff {\n  @apply gl-rounded-base;\n  @apply gl-inline-flex;\n  @apply gl-px-2;\n}\n.duo-chat-markdown .deletion {\n  @apply gl-bg-red-100;\n}\n.duo-chat-markdown .addition {\n  @apply gl-bg-green-100;\n}\n.duo-chat-markdown code {\n  @apply gl-rounded-base;\n  @apply gl-bg-gray-50;\n  @apply gl-text-gray-950;\n  @apply gl-px-2;\n  @apply gl-py-1;\n}\n.duo-chat-markdown pre {\n  @apply gl-rounded-base;\n  @apply gl-py-3;\n  @apply gl-px-4;\n  box-shadow: inset 0 0 0 1px #dcdcde;\n  @apply gl-my-7;\n  @apply gl-overflow-auto;\n}\n.duo-chat-markdown pre code {\n  @apply gl-bg-white;\n  @apply gl-rounded-none;\n  @apply gl-text-gray-900;\n  @apply gl-p-0;\n}\n.duo-chat-markdown .audio-container {\n  @apply gl-inline-flex;\n  @apply gl-flex-col;\n  @apply gl-w-full;\n}\n.duo-chat-markdown .audio-container audio {\n  @apply gl-w-full;\n}\n.duo-chat-markdown .audio-container a {\n  @apply gl-mt-3;\n}\n.duo-chat-markdown .audio-container a::before {\n  @apply gl-mr-2;\n  text-rendering: auto;\n  -webkit-font-smoothing: antialiased;\n  content: \"📎\";\n}\n.duo-chat-markdown table {\n  @apply gl-my-7;\n}\n.duo-chat-markdown table th,\n.duo-chat-markdown table td {\n  @apply gl-px-3;\n  @apply gl-py-4;\n  box-shadow: inset 0 -1px 0 0 #dcdcde;\n  @apply gl-align-top;\n}\n.duo-chat-markdown table th {\n  box-shadow: inset 0 1px 0 0 #dcdcde, inset 0 -1px 0 0 #dcdcde;\n  @apply gl-font-bold;\n}\n.duo-chat-markdown table thead {\n  @apply gl-bg-gray-50;\n}\n.duo-chat-markdown table tr:nth-child(even) {\n  @apply gl-bg-gray-10;\n}\n\n.duo-chat-compact-markdown {\n  @apply gl-text-base;\n  @apply gl-leading-20;\n}\n.duo-chat-compact-markdown h1,\n.duo-chat-compact-markdown .gl-h1 {\n  @apply gl-heading-1-fixed;\n  @apply gl-mt-7;\n}\n.duo-chat-compact-markdown h2,\n.duo-chat-compact-markdown .gl-h2 {\n  @apply gl-heading-2-fixed;\n  @apply gl-mt-6;\n}\n.duo-chat-compact-markdown h3,\n.duo-chat-compact-markdown .gl-h3 {\n  @apply gl-heading-3-fixed;\n  @apply gl-mt-6;\n}\n.duo-chat-compact-markdown h4,\n.duo-chat-compact-markdown .gl-h4 {\n  @apply gl-heading-4-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown h5,\n.duo-chat-compact-markdown .gl-h5 {\n  @apply gl-heading-5-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown h6,\n.duo-chat-compact-markdown .gl-h6 {\n  @apply gl-heading-6-fixed;\n  @apply gl-mt-5;\n}\n.duo-chat-compact-markdown .sm {\n  @apply gl-text-sm;\n}\n.duo-chat-compact-markdown .monospace,\n.duo-chat-compact-markdown code {\n  @apply gl-font-monospace;\n}\n.duo-chat-compact-markdown table th,\n.duo-chat-compact-markdown table td {\n  @apply gl-py-3;\n}\n\n.message-tool-approval-collapsed {\n  border-bottom: 0;\n}\n\n.message-tool-approval-collapsed-header {\n  border-bottom-left-radius: calc(var(--gl-card-border-radius) - 1px);\n  border-bottom-right-radius: calc(var(--gl-card-border-radius) - 1px);\n}\n\n/**\n * ╔══════════════════════════════════════════════════════════════════════════════╗\n * ║  ⚠️  DEPRECATED — DO NOT MODIFY THIS FILE  ⚠️                              ║\n * ║                                                                            ║\n * ║  This stylesheet belongs to a deprecated component scheduled for removal   ║\n * ║  as part of the effort to decouple web-only Duo UI components.             ║\n * ║                                                                            ║\n * ║  See: https://gitlab.com/gitlab-org/gitlab/-/work_items/593464             ║\n * ╚══════════════════════════════════════════════════════════════════════════════╝\n */\n.web-only .duo-chat-input {\n  position: relative;\n  overflow: visible;\n}\n.web-only .duo-chat-input::after {\n  @apply gl-p-2;\n}\n\n.web-only .duo-chat-input-wrap {\n  min-height: 80px;\n  max-height: 240px;\n  overflow: hidden;\n}\n.web-only .duo-chat-input-wrap .gl-form-textarea.form-control {\n  flex: 1;\n  resize: none;\n}\n.web-only .duo-chat-input-wrap::after {\n  content: attr(data-value) \" \";\n  @apply gl-invisible;\n  @apply gl-p-4;\n  @apply gl-font-regular;\n  padding-right: 40px;\n  word-break: break-word;\n}\n\n.web-only .duo-chat-message pre code {\n  color: inherit !important;\n  background-color: transparent !important;\n}\n\n.duo-chat-loader {\n  @apply gl-flex;\n}\n.duo-chat-loader .transition {\n  transition: width 200ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .transition {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-enter {\n  @apply gl-opacity-0;\n}\n.duo-chat-loader .text-enter-active {\n  transition: opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .text-enter-active {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-enter-to {\n  @apply gl-opacity-10;\n}\n.duo-chat-loader .text-leave {\n  @apply gl-opacity-10;\n}\n.duo-chat-loader .text-leave-active {\n  transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion) {\n  .duo-chat-loader .text-leave-active {\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n.duo-chat-loader .text-leave-to {\n  @apply gl-opacity-0;\n}\n\n.duo-chat-message {\n  position: relative;\n  border-radius: 1rem 1rem 0;\n  color: var(--duo-chat-message-color, inherit) !important;\n  --gl-text-color-heading: var(--duo-chat-message-heading-color, inherit) !important;\n}\n.duo-chat-message code {\n  @apply gl-bg-status-neutral;\n}\n.duo-chat-message pre {\n  box-shadow: none !important;\n  @apply gl-border gl-max-h-[60vh] gl-scroll-smooth gl-px-4 gl-py-3 gl-text-inherit;\n  background-color: var(--gl-background-color-preformat, var(--gl-background-color-default));\n}\n.duo-chat-message pre::before, .duo-chat-message pre::after {\n  content: \"\";\n  left: 1px;\n  width: calc(100% - 2px);\n  position: absolute;\n  @apply gl-pointer-events-none gl-h-7 gl-rounded-b-base;\n}\n.duo-chat-message pre.scrim-top::before {\n  background: linear-gradient(to bottom, transparent, var(--gl-background-color-default));\n  top: 1px;\n  @apply -gl-rotate-180;\n}\n.duo-chat-message pre.scrim-bottom::after {\n  background: linear-gradient(to bottom, transparent, var(--gl-background-color-default));\n  bottom: 1px;\n}\n.duo-chat-message pre code {\n  @apply gl-text-sm;\n  @apply gl-bg-transparent;\n  @apply gl-block;\n  @apply gl-whitespace-pre-wrap;\n  @apply gl-break-all;\n}\n.duo-chat-message p:not(:last-of-type) {\n  @apply gl-mb-4;\n}\n.duo-chat-message p:last-of-type {\n  @apply gl-mb-0;\n}\n.duo-chat-message copy-code,\n.duo-chat-message insert-code-snippet {\n  position: absolute;\n  @apply gl-transition-all;\n  @apply gl-opacity-0;\n  right: 0.5rem;\n  top: 0.5rem;\n}\n.duo-chat-message copy-code [role=tooltip],\n.duo-chat-message insert-code-snippet [role=tooltip] {\n  display: none;\n  @apply gl-bg-gray-100;\n  width: max-content;\n  position: absolute;\n  top: 0;\n  left: 0;\n  @apply gl-rounded-base;\n}\n.duo-chat-message copy-code [role=tooltip] .arrow,\n.duo-chat-message insert-code-snippet [role=tooltip] .arrow {\n  position: absolute;\n  background: inherit;\n  @apply gl-h-3 gl-w-3;\n  transform: rotate(45deg);\n}\n.duo-chat-message copy-code {\n  margin-right: 2.5rem;\n}\n\n.insert-code-hidden insert-code-snippet {\n  display: none;\n}\n.insert-code-hidden copy-code {\n  margin-right: 0;\n}\n\n.duo-chat-message-complete .duo-message-pre-block:focus copy-code,\n.duo-chat-message-complete .duo-message-pre-block:focus insert-code-snippet,\n.duo-chat-message-complete .duo-message-pre-block:focus .copy-to-clipboard-button-container,\n.duo-chat-message-complete .duo-message-pre-block:hover copy-code,\n.duo-chat-message-complete .duo-message-pre-block:hover insert-code-snippet,\n.duo-chat-message-complete .duo-message-pre-block:hover .copy-to-clipboard-button-container,\n.duo-chat-message-complete .duo-message-pre-block:has(button:focus) copy-code,\n.duo-chat-message-complete .duo-message-pre-block:has(button:focus) insert-code-snippet,\n.duo-chat-message-complete .duo-message-pre-block:has(button:focus) .copy-to-clipboard-button-container {\n  opacity: 1;\n}\n\n.duo-chat-message-error > p {\n  margin: 0;\n}\n\n.agentic-feedback-hover-wrapper {\n  transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out, margin 0.3s ease-in-out;\n}\n.gl-group:hover .agentic-feedback-hover-wrapper {\n  width: auto;\n  opacity: 1;\n  margin-right: 0;\n}\n\n.recents-wrapper .gl-accordion-item-header .gl-button.gl-button.btn-link {\n  @apply gl-block;\n  @apply gl-w-full;\n  @apply gl-pl-3;\n  @apply gl-py-2;\n  @apply gl-rounded-none;\n  @apply gl-shadow-none;\n  @apply gl-no-underline;\n  @apply gl-uppercase;\n  @apply gl-font-bold;\n  @apply gl-text-sm;\n}\n.recents-wrapper .gl-accordion-item-header > .collapse {\n  @apply gl-ml-0;\n}\n.recents-wrapper .gl-text-base {\n  @apply gl-mt-0;\n}\n\n.agentic-binary-feedback .feedback-colored-icon {\n  animation: feedback-fade-out 0.3s ease-in-out forwards;\n  animation-delay: 0.3s;\n  will-change: opacity;\n  margin-left: 4px;\n}\n.agentic-binary-feedback .feedback-thanks {\n  pointer-events: none;\n  animation: feedback-fade-in 0.3s ease-in-out forwards;\n  animation-delay: 0.3s;\n  will-change: opacity, width, margin;\n}\n\n@keyframes feedback-fade-out {\n  to {\n    opacity: 0;\n    width: 0;\n    overflow: hidden;\n    pointer-events: none;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .feedback-colored-icon,\n.feedback-thanks {\n    animation: none;\n  }\n}\n@keyframes feedback-fade-in {\n  to {\n    opacity: 1;\n    width: auto;\n    margin-left: -6px;\n    pointer-events: auto;\n  }\n}"]}

package/dist/index.js

@@ -26,8 +26,8 @@ export { default as DuoRecentContent } from './components/ui/duo_recent_content/
 export { addDuoMarkdownPlugin } from './components/chat/markdown_renderer';
 export { default as DuoLayout } from './components/ui/duo_layout/duo_layout';
 export { default as SideRail } from './components/ui/side_rail/side_rail';
-export { default as WebDuoChat } from './components/chat/web_duo_chat';
-export { default as WebAgenticDuoChat } from './components/agentic_chat/web_agentic_duo_chat';
+export { default as WebDuoChat } from './components/chat/web_duo_chat_deprecated';
+export { default as WebAgenticDuoChat } from './components/agentic_chat/web_agentic_duo_chat_deprecated';
 export { default as DuoChatThreads } from './components/chat/components/duo_chat_threads/duo_chat_threads';
 
 // Legacy message type exports for backward compatibility

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "15.16.0",
+  "version": "15.17.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -105,7 +105,7 @@
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/stylelint-config": "6.3.0",
     "@gitlab/svgs": "^3.157.0",
-    "@gitlab/ui": "^129.5.1",
+    "@gitlab/ui": "^130.1.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

package/src/components/agentic_chat/{web_agentic_duo_chat.vue → web_agentic_duo_chat_deprecated.vue}

@@ -1,3 +1,13 @@
+<!--
+╔══════════════════════════════════════════════════════════════════════════════╗
+║  ⚠️  DEPRECATED — DO NOT MODIFY OR ADD NEW FEATURES TO THIS COMPONENT  ⚠️  ║
+║                                                                            ║
+║  This component is scheduled for removal as part of the effort to          ║
+║  decouple web-only Duo UI components.                                      ║
+║                                                                            ║
+║  See: https://gitlab.com/gitlab-org/gitlab/-/work_items/593464             ║
+╚══════════════════════════════════════════════════════════════════════════════╝
+-->
 <script>
 import { throttle } from 'lodash-es';
 
@@ -27,7 +37,7 @@ import DuoChatLoader from '../chat/components/duo_chat_loader/duo_chat_loader.vu
 import DuoChatPredefinedPrompts from '../chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import DuoChatConversation from '../chat/components/duo_chat_conversation/duo_chat_conversation.vue';
 import { messageRenderersValidator } from '../chat/components/utils';
-import WebDuoChatHeader from '../chat/components/duo_chat_header/web_duo_chat_header.vue';
+import WebDuoChatHeader from '../chat/components/duo_chat_header/web_duo_chat_header_deprecated.vue';
 import DuoChatThreads from '../chat/components/duo_chat_threads/duo_chat_threads.vue';
 
 export const i18n = {
@@ -124,6 +134,12 @@ export default {
   directives: {
     SafeHtml,
   },
+  provide() {
+    return {
+      // 'md' applies GitLab's markdown typography styles
+      markdownClass: 'md',
+    };
+  },
   props: {
     /**
      * Determines if the component should be resizable. When true, it renders inside

package/src/components/chat/components/duo_chat_header/web_duo_chat_header_deprecated.md

@@ -0,0 +1,4 @@
+> **⚠️ DEPRECATED** — This component is scheduled for removal. Do not modify or add new features.
+> See: [gitlab-org/gitlab#593464](https://gitlab.com/gitlab-org/gitlab/-/work_items/593464)
+
+A component that handles the header of the chat, including agent selection

package/src/components/chat/components/duo_chat_header/{web_duo_chat_header.vue → web_duo_chat_header_deprecated.vue}

@@ -1,3 +1,13 @@
+<!--
+╔══════════════════════════════════════════════════════════════════════════════╗
+║  ⚠️  DEPRECATED — DO NOT MODIFY OR ADD NEW FEATURES TO THIS COMPONENT  ⚠️  ║
+║                                                                            ║
+║  This component is scheduled for removal as part of the effort to          ║
+║  decouple web-only Duo UI components.                                      ║
+║                                                                            ║
+║  See: https://gitlab.com/gitlab-org/gitlab/-/work_items/593464             ║
+╚══════════════════════════════════════════════════════════════════════════════╝
+-->
 <script>
 import Vue from 'vue';
 import {

package/src/components/chat/components/duo_chat_message/markdown_renderer.vue

@@ -23,6 +23,10 @@ export default {
       from: 'renderMarkdown',
       default: () => renderDuoChatMarkdownPreview,
     },
+    markdownClass: {
+      from: 'markdownClass',
+      default: '',
+    },
   },
   props: {
     markdown: {
@@ -67,5 +71,9 @@ export default {
 };
 </script>
 <template>
-  <div ref="content" v-safe-html:[$options.safeHtmlConfigExtension]="renderedMarkdown"></div>
+  <div
+    ref="content"
+    v-safe-html:[$options.safeHtmlConfigExtension]="renderedMarkdown"
+    :class="markdownClass"
+  ></div>
 </template>

package/src/components/chat/web_duo_chat_deprecated.scss

@@ -0,0 +1,45 @@
+/**
+ * ╔══════════════════════════════════════════════════════════════════════════════╗
+ * ║  ⚠️  DEPRECATED — DO NOT MODIFY THIS FILE  ⚠️                              ║
+ * ║                                                                            ║
+ * ║  This stylesheet belongs to a deprecated component scheduled for removal   ║
+ * ║  as part of the effort to decouple web-only Duo UI components.             ║
+ * ║                                                                            ║
+ * ║  See: https://gitlab.com/gitlab-org/gitlab/-/work_items/593464             ║
+ * ╚══════════════════════════════════════════════════════════════════════════════╝
+ */
+.web-only .duo-chat-input {
+  position: relative;
+  overflow: visible;
+
+  &::after {
+    @apply gl-p-2;
+  }
+}
+
+.web-only .duo-chat-input-wrap {
+  min-height: 80px;
+  max-height: 240px;
+  overflow: hidden;
+
+  .gl-form-textarea.form-control {
+    flex: 1;
+    resize: none;
+  }
+
+  &::after {
+    content: attr(data-value) ' ';
+    @apply gl-invisible;
+    @apply gl-p-4;
+    @apply gl-font-regular;
+    padding-right: 40px;
+    word-break: break-word;
+  }
+}
+
+.web-only .duo-chat-message {
+  pre code {
+    color: inherit !important;
+    background-color: transparent !important;
+  }
+}

package/src/components/chat/{web_duo_chat.vue → web_duo_chat_deprecated.vue}

@@ -1,3 +1,13 @@
+<!--
+╔══════════════════════════════════════════════════════════════════════════════╗
+║  ⚠️  DEPRECATED — DO NOT MODIFY OR ADD NEW FEATURES TO THIS COMPONENT  ⚠️  ║
+║                                                                            ║
+║  This component is scheduled for removal as part of the effort to          ║
+║  decouple web-only Duo UI components.                                      ║
+║                                                                            ║
+║  See: https://gitlab.com/gitlab-org/gitlab/-/work_items/593464             ║
+╚══════════════════════════════════════════════════════════════════════════════╝
+-->
 <script>
 import { throttle } from 'lodash-es';
 
@@ -27,7 +37,7 @@ import { VIEW_TYPES } from './components/duo_chat_header/constants';
 import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import DuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import DuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
-import WebDuoChatHeader from './components/duo_chat_header/web_duo_chat_header.vue';
+import WebDuoChatHeader from './components/duo_chat_header/web_duo_chat_header_deprecated.vue';
 import DuoChatThreads from './components/duo_chat_threads/duo_chat_threads.vue';
 
 export const i18n = {
@@ -119,6 +129,12 @@ export default {
   directives: {
     SafeHtml,
   },
+  provide() {
+    return {
+      // 'md' applies GitLab's markdown typography styles
+      markdownClass: 'md',
+    };
+  },
   props: {
     /**
      * The title of the chat/feature.

package/src/index.js

@@ -51,7 +51,9 @@ export { addDuoMarkdownPlugin } from './components/chat/markdown_renderer';
 
 export { default as DuoLayout } from './components/ui/duo_layout/duo_layout.vue';
 export { default as SideRail } from './components/ui/side_rail/side_rail.vue';
-export { default as WebDuoChat } from './components/chat/web_duo_chat.vue';
-export { default as WebAgenticDuoChat } from './components/agentic_chat/web_agentic_duo_chat.vue';
+/** @deprecated See https://gitlab.com/gitlab-org/gitlab/-/work_items/593464 */
+export { default as WebDuoChat } from './components/chat/web_duo_chat_deprecated.vue';
+/** @deprecated See https://gitlab.com/gitlab-org/gitlab/-/work_items/593464 */
+export { default as WebAgenticDuoChat } from './components/agentic_chat/web_agentic_duo_chat_deprecated.vue';
 
 export { default as DuoChatThreads } from './components/chat/components/duo_chat_threads/duo_chat_threads.vue';

package/src/scss/components.scss

@@ -2,7 +2,7 @@
 @import '@gitlab/ui/src/scss/mixins';
 
 @import '../components/chat/duo_chat';
-@import '../components/chat/web_duo_chat';
+@import '../components/chat/web_duo_chat_deprecated';
 @import '../components/chat/components/duo_chat_loader/duo_chat_loader';
 @import '../components/chat/components/duo_chat_message/duo_chat_message';
 @import '../components/ui/duo_recent_collapsible/duo_recent_collapsible';

package/src/components/chat/components/duo_chat_header/web_duo_chat_header.md

@@ -1 +0,0 @@
-A component that handles the header of the chat, including agent selection

package/src/components/chat/web_duo_chat.scss

@@ -1,35 +0,0 @@
-.web-only .duo-chat-input {
-  position: relative;
-  overflow: visible;
-
-  &::after {
-    @apply gl-p-2;
-  }
-}
-
-.web-only .duo-chat-input-wrap {
-  min-height: 80px;
-  max-height: 240px;
-  overflow: hidden;
-
-  .gl-form-textarea.form-control {
-    flex: 1;
-    resize: none;
-  }
-
-  &::after {
-    content: attr(data-value) ' ';
-    @apply gl-invisible;
-    @apply gl-p-4;
-    @apply gl-font-regular;
-    padding-right: 40px;
-    word-break: break-word;
-  }
-}
-
-.web-only .duo-chat-message {
-  pre code {
-    color: inherit !important;
-    background-color: transparent !important;
-  }
-}