@gitlab/ui 74.3.1 → 74.5.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [74.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v74.4.0...v74.5.0) (2024-02-12)
+
+
+### Bug Fixes
+
+* **DuoChat:** Move global error to header ([7d026ef](https://gitlab.com/gitlab-org/gitlab-ui/commit/7d026effca6cf9fb9a352e09784da401936285c5))
+
+
+### Features
+
+* **DuoChat:** Remove unused hero header ([30ab50c](https://gitlab.com/gitlab-org/gitlab-ui/commit/30ab50c30e72f10cca8600d21b5f71238a4dd2c4))
+
+# [74.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v74.3.1...v74.4.0) (2024-02-09)
+
+
+### Features
+
+* **DuoChat:** Add default markdown renderer for streaming messages ([07fea1c](https://gitlab.com/gitlab-org/gitlab-ui/commit/07fea1ce41a0a42be2860b5652e5e8b35330ae83))
+
 ## [74.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v74.3.0...v74.3.1) (2024-02-08)
 
 

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -2,6 +2,7 @@ import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
+import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -23,7 +24,22 @@ var script = {
   directives: {
     SafeHtml: SafeHtmlDirective
   },
-  inject: ['renderGFM', 'renderMarkdown'],
+  inject: {
+    // Note, we likely might move away from Provide/Inject for this
+    // and only ship the versions that are currently in the default
+    // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3953#note_1762834219
+    // for more context.
+    renderGFM: {
+      from: 'renderGFM',
+      default: () => element => {
+        element.classList.add('gl-markdown', 'gl-compact-markdown');
+      }
+    },
+    renderMarkdown: {
+      from: 'renderMarkdown',
+      default: () => renderDuoChatMarkdownPreview
+    }
+  },
   props: {
     /**
      * A message object

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -343,11 +343,11 @@ 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 (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[(_vm.showHeader)?_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader")],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_vm._t("hero"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-mb-0 gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e(),_vm._v(" "),_c('section',{staticClass:"duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[(_vm.showHeader)?_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_c('section',{staticClass:"duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
           {
             'gl-h-full': !_vm.hasMessages,
             'gl-h-auto': _vm.hasMessages,
-          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle,"description":_vm.emptyStateDescription}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1),_vm._v(" "),_c('div',{ref:"anchor",staticClass:"scroll-anchor"})],1)],2),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md",attrs:{"body-class":"gl-p-2!"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"disabled":_vm.isLoading,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
+          } ],attrs:{"tag":"div","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"messages":conversation,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state",staticClass:"gl-display-flex gl-flex-grow-1 gl-mr-auto gl-ml-auto"},[_c('gl-empty-state',{staticClass:"gl-align-self-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle,"description":_vm.emptyStateDescription}})],1),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e()],2),_vm._v(" "),_c('transition',{attrs:{"name":"loader"}},[(_vm.isLoading)?_c('gl-duo-chat-loader',{staticClass:"gl-px-0!",attrs:{"tool-name":_vm.toolName}}):_vm._e()],1),_vm._v(" "),_c('div',{ref:"anchor",staticClass:"scroll-anchor"})],1)]),_vm._v(" "),(_vm.isChatAvailable)?_c('footer',{staticClass:"gl-drawer-footer gl-drawer-footer-sticky gl-p-5 gl-border-t gl-bg-gray-10",class:{ 'gl-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{staticClass:"gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL,"disabled":_vm.isLoading}})]},proxy:true}],null,false,2232229068)},[_c('div',{staticClass:"duo-chat-input gl-flex-grow-1 gl-vertical-align-top gl-max-w-full gl-min-h-8 gl-inset-border-1-gray-400 gl-rounded-base gl-bg-white",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md",attrs:{"body-class":"gl-p-2!"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-display-flex gl-justify-content-space-between"},[_c('span',{staticClass:"gl-display-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!",class:{ 'gl-text-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"disabled":_vm.isLoading,"autofocus":""},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)]),_vm._v(" "),_c('gl-form-text',{staticClass:"gl-text-gray-400 gl-line-height-20 gl-mt-3",attrs:{"data-testid":"chat-legal-disclaimer"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_DISCLAIMER))])],1)],1):_vm._e()]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/markdown_renderer.js

@@ -0,0 +1,18 @@
+import { Marked } from 'marked';
+import markedBidi from 'marked-bidi';
+
+// eslint-disable-next-line no-restricted-imports
+const duoMarked = new Marked([{
+  async: false,
+  breaks: false,
+  gfm: false
+}, markedBidi()]);
+function renderDuoChatMarkdownPreview(md) {
+  try {
+    return md ? duoMarked.parse(md.toString()) : '';
+  } catch {
+    return md;
+  }
+}
+
+export { renderDuoChatMarkdownPreview };

package/dist/components/experimental/duo/chat/mock_data.js

@@ -31,15 +31,25 @@ const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   id: '123',
   content: `To change your password in GitLab:
 
-  Log in to your GitLab account.
-  Select your avatar in the top right corner and choose Edit profile.
-  On the left sidebar, select Password.
-  Enter your current password in the Current password field.
-  Enter your new password in the New password and Password confirmation fields.
-  Select Save password.
-  If you don't know your current password, select the I forgot my password link to reset it.
-  
-  GitLab enforces password requirements when you choose a new password.`,
+  1. Log in to your GitLab account.
+  2. Select your avatar in the top right corner and choose Edit profile.
+  3. On the left sidebar, select Password.
+  4. Enter your current password in the Current password field.
+  5. Enter your new password in the New password and Password confirmation fields.
+  6. Select Save password.
+  7. If you don't know your current password, select the I forgot my password link to reset it.
+
+  GitLab enforces password requirements when you choose a new password.
+
+  ~~~yaml
+  # And here is a
+  # code block
+  everyone:
+    likes:
+      yaml: true
+  ~~~
+  which is rendered while streaming.
+  `,
   contentHtml: '',
   role: 'assistant',
   extras: {},

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 12:05:37 GMT
+ * Generated on Mon, 12 Feb 2024 21:20:52 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 12:05:37 GMT
+ * Generated on Mon, 12 Feb 2024 21:20:52 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 12:05:37 GMT
+ * Generated on Mon, 12 Feb 2024 21:20:52 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 08 Feb 2024 12:05:37 GMT
+ * Generated on Mon, 12 Feb 2024 21:20:52 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 08 Feb 2024 12:05:37 GMT
+// Generated on Mon, 12 Feb 2024 21:20:52 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 08 Feb 2024 12:05:37 GMT
+// Generated on Mon, 12 Feb 2024 21:20:52 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "74.3.1",
+  "version": "74.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -72,6 +72,8 @@
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
+    "marked": "^12.0.0",
+    "marked-bidi": "^1.0.8",
     "portal-vue": "^2.1.6",
     "vue-runtime-helpers": "^1.1.2"
   },
@@ -99,25 +101,25 @@
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
-    "@gitlab/stylelint-config": "5.0.1",
+    "@gitlab/stylelint-config": "6.1.0",
     "@gitlab/svgs": "3.83.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.6.12",
-    "@storybook/addon-docs": "7.6.12",
-    "@storybook/addon-essentials": "7.6.12",
-    "@storybook/addon-interactions": "7.6.12",
-    "@storybook/addon-viewport": "7.6.12",
-    "@storybook/builder-webpack5": "7.6.12",
+    "@storybook/addon-a11y": "7.6.13",
+    "@storybook/addon-docs": "7.6.13",
+    "@storybook/addon-essentials": "7.6.13",
+    "@storybook/addon-interactions": "7.6.13",
+    "@storybook/addon-viewport": "7.6.13",
+    "@storybook/builder-webpack5": "7.6.13",
     "@storybook/jest": "0.2.3",
     "@storybook/test-runner": "0.16.0",
     "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.6.12",
-    "@storybook/vue": "7.6.12",
-    "@storybook/vue-webpack5": "7.6.12",
-    "@storybook/vue3": "7.6.12",
-    "@storybook/vue3-webpack5": "7.6.12",
+    "@storybook/theming": "7.6.13",
+    "@storybook/vue": "7.6.13",
+    "@storybook/vue-webpack5": "7.6.13",
+    "@storybook/vue3": "7.6.13",
+    "@storybook/vue3-webpack5": "7.6.13",
     "@types/jest": "^29.5.11",
     "@types/jest-image-snapshot": "^6.4.0",
     "@vue/compat": "^3.2.40",
@@ -170,7 +172,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.6.12",
+    "storybook": "7.6.13",
     "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/base/card/card.stories.js

@@ -1,30 +1,31 @@
 import readme from './card.md';
 import GlCard from './card.vue';
 
-const components = {
-  GlCard,
-};
-
-const template = `
-<gl-card>
-  <template #header>
-    <h3 class="gl-my-0 gl-font-weight-bold gl-font-lg">This is a custom header</h3>
-  </template>
-  <template #default>
-    Hello World
-  </template>
-  <template #footer>
-    <span>This is a custom footer</span>
-  </template>
-</gl-card>`;
+const generateProps = ({ headerClass, bodyClass, footerClass } = {}) => ({
+  headerClass,
+  bodyClass,
+  footerClass,
+});
 
 const Template = (args, { argTypes }) => ({
+  components: { GlCard },
   props: Object.keys(argTypes),
-  components,
-  template,
+  template: `
+      <gl-card :header-class="headerClass" :body-class="bodyClass" :footer-class="footerClass">
+        <template #header>
+          <h3 class="gl-my-0 gl-font-weight-bold gl-font-lg">This is a custom header</h3>
+        </template>
+        <template #default>
+          Hello World
+        </template>
+        <template #footer>
+          <span>This is a custom footer</span>
+        </template>
+      </gl-card>`,
 });
 
 export const Default = Template.bind({});
+Default.args = generateProps();
 
 export default {
   title: 'base/card',
@@ -36,4 +37,12 @@ export default {
       },
     },
   },
+  argTypes: {
+    headerClass: { control: 'text' },
+    bodyClass: { control: 'text' },
+    footerClass: { control: 'text' },
+    header: { control: { disable: true } },
+    default: { control: { disable: true } },
+    footer: { control: { disable: true } },
+  },
 };

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.md

@@ -11,7 +11,11 @@ The component represents a Duo Chat message.
 There are two ways of pretty-rendering a message's content in the component:
 
 - dependency injection, providing functions to convert raw markdown into HTML,
-- sending `contentHtml` prop as part of the `message` property,
+- sending `contentHtml` prop as part of the `message` property
+
+The component ships a default markdown renderer based on `marked`. It should produce
+reasonably well-looking results while streaming messages. The implementation can be found
+[here](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/experimental/duo/chat/markdown_renderer.js).
 
 ### Injecting functions
 

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.spec.js

@@ -19,14 +19,14 @@ describe('DuoChatMessage', () => {
 
   const componentFactory = ({ message = MOCK_USER_PROMPT_MESSAGE, options = {} } = {}) => {
     return shallowMount(GlDuoChatMessage, {
-      ...options,
-      propsData: {
-        message,
-      },
       provide: {
         renderMarkdown,
         renderGFM,
       },
+      ...options,
+      propsData: {
+        message,
+      },
     });
   };
 
@@ -115,7 +115,7 @@ describe('DuoChatMessage', () => {
 
   describe('message output', () => {
     it('outputs errors if they are present', async () => {
-      const errors = ['foo', 'bar', 'baz'];
+      const errors = ['error1', 'error2', 'error3'];
 
       createComponent({
         message: {
@@ -129,9 +129,10 @@ describe('DuoChatMessage', () => {
 
       await nextTick();
 
-      expect(findContent().text()).toContain(errors[0]);
-      expect(findContent().text()).toContain(errors[1]);
-      expect(findContent().text()).toContain(errors[2]);
+      const contentText = findContent().text();
+      expect(contentText).toContain(errors[0]);
+      expect(contentText).toContain(errors[1]);
+      expect(contentText).toContain(errors[2]);
     });
 
     it('outputs contentHtml if it is present', async () => {
@@ -228,4 +229,167 @@ describe('DuoChatMessage', () => {
       expect(renderGFM).toHaveBeenCalled();
     });
   });
+
+  describe('default renderers', () => {
+    it('outputs errors if they are present', async () => {
+      const errors = ['error1', 'error2', 'error3'];
+
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors,
+          contentHtml: 'fooHtml barHtml',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
+        },
+      });
+
+      await nextTick();
+
+      const contentText = findContent().text();
+      expect(contentText).toContain(errors[0]);
+      expect(contentText).toContain(errors[1]);
+      expect(contentText).toContain(errors[2]);
+    });
+
+    it('outputs contentHtml if it is present', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: 'fooHtml barHtml',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe(
+        '<div class="gl-markdown gl-compact-markdown">fooHtml barHtml</div>'
+      );
+    });
+
+    it('outputs markdown content if there is no contentHtml', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p>foo bar</p>\n</div>');
+    });
+
+    it('outputs chunks if there is no content', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: '',
+          chunks: ['a', 'b', 'c'],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p>abc</p>\n</div>');
+    });
+
+    it('sanitizes html produced by errors', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: ['[click here](javascript:prompt(1))'],
+          contentHtml: '',
+          content: '',
+          chunks: [],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
+    });
+
+    it('sanitizes html produced by content', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: '[click here](javascript:prompt(1))',
+          chunks: [],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
+    });
+
+    it('sanitizes html produced by chunks', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: '',
+          content: '',
+          chunks: ['[click here]', '(javascript:prompt(1))'],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
+    });
+
+    it('sanitizes contentHtml', async () => {
+      createComponent({
+        options: {
+          provide: null,
+        },
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: [],
+          contentHtml: `<a href="javascript:prompt(1)">click here</a>`,
+          content: '',
+          chunks: [],
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().html()).toBe(
+        '<div class="gl-markdown gl-compact-markdown"><a>click here</a></div>'
+      );
+    });
+  });
 });

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -3,6 +3,8 @@ import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
+// eslint-disable-next-line no-restricted-imports
+import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
 
 const concatUntilEmpty = (arr) => {
@@ -27,7 +29,22 @@ export default {
   directives: {
     SafeHtml,
   },
-  inject: ['renderGFM', 'renderMarkdown'],
+  inject: {
+    // Note, we likely might move away from Provide/Inject for this
+    // and only ship the versions that are currently in the default
+    // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3953#note_1762834219
+    // for more context.
+    renderGFM: {
+      from: 'renderGFM',
+      default: () => (element) => {
+        element.classList.add('gl-markdown', 'gl-compact-markdown');
+      },
+    },
+    renderMarkdown: {
+      from: 'renderMarkdown',
+      default: () => renderDuoChatMarkdownPreview,
+    },
+  },
   props: {
     /**
      * A message object

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -191,8 +191,6 @@ describe('GlDuoChat', () => {
 
       it.each`
         slot           | content        | isChatAvailable
-        ${'hero'}      | ${slotContent} | ${true}
-        ${'hero'}      | ${slotContent} | ${false}
         ${'subheader'} | ${slotContent} | ${false}
         ${'subheader'} | ${slotContent} | ${true}
       `(

package/src/components/experimental/duo/chat/duo_chat.stories.js

@@ -9,7 +9,6 @@ import {
   MOCK_USER_PROMPT_MESSAGE,
   generateMockResponseChunks,
   renderGFM,
-  renderMarkdown,
 } from './mock_data';
 
 const slashCommands = [
@@ -72,7 +71,6 @@ export const Default = (args, { argTypes }) => ({
   components: { GlDuoChat },
   props: Object.keys(argTypes),
   provide: {
-    renderMarkdown,
     renderGFM,
   },
   template: `
@@ -101,7 +99,6 @@ export const Interactive = (args, { argTypes }) => ({
   components: { GlDuoChat, GlButton },
   props: Object.keys(argTypes),
   provide: {
-    renderMarkdown,
     renderGFM,
   },
   data() {
@@ -160,7 +157,7 @@ export const Interactive = (args, { argTypes }) => ({
         this.logerInfo += `New response: ${JSON.stringify(newResponse)}\n\n`;
         this.timeout = setStoryTimeout(() => {
           this.mockResponseFromAi();
-        }, Math.floor(Math.random() * 251) + 50);
+        }, Math.floor(Math.random() * 251) + 16);
       }
     },
   },
@@ -199,7 +196,7 @@ export const Slots = (args, { argTypes }) => ({
   components: { GlDuoChat, GlAlert },
   props: Object.keys(argTypes),
   provide: {
-    renderMarkdown,
+    renderMarkdown: (md) => `THIS IS ALTERED MARKDOWN: ${md}`,
     renderGFM,
   },
   template: `
@@ -218,15 +215,6 @@ export const Slots = (args, { argTypes }) => ({
         :empty-state-title="emptyStateTitle"
         :empty-state-description="emptyStateDescription"
         :chat-prompt-placeholder="chatPromptPlaceholder">
-
-        <template #hero>
-<pre class="code-block rounded code highlight gl-border-b gl-rounded-0! gl-mb-0 gl-overflow-y-auto solarized-light" style="max-height: 20rem; overflow-y: auto;">
-if (firstUserPromptIndex >= 0 && lastUserPromptIndex > firstUserPromptIndex) {
-  messages.splice(firstUserPromptIndex, 1);
-  return truncateChatPrompt(messages);
-}
-</pre>
-        </template>
         <template #subheader>
           <gl-alert
             :dismissible="false"

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -401,24 +401,22 @@ export default {
         @slot Subheader to be rendered right after the title. It is sticky and stays on top of the chat no matter the number of messages.
       -->
       <slot name="subheader"></slot>
-    </header>
-
-    <div class="gl-drawer-body gl-display-flex gl-flex-direction-column">
-      <!-- @slot 'Hero' information to be rendered at the top of the chat before any message. It gets pushed away from the view by incomming messages
-      -->
-      <slot name="hero"></slot>
 
+      <!-- Ensure that the global error is not scrolled away -->
       <gl-alert
         v-if="error"
         key="error"
         :dismissible="false"
         variant="danger"
-        class="gl-mb-0 gl-pl-9!"
+        class="gl-pl-9!"
         role="alert"
         data-testid="chat-error"
-        ><span v-safe-html="error"></span
-      ></gl-alert>
+      >
+        <span v-safe-html="error"></span>
+      </gl-alert>
+    </header>
 
+    <div class="gl-drawer-body gl-display-flex gl-flex-direction-column">
       <section
         class="duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
       >

package/src/components/experimental/duo/chat/markdown_renderer.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line no-restricted-imports
+import { Marked } from 'marked';
+import markedBidi from 'marked-bidi';
+
+const duoMarked = new Marked([
+  {
+    async: false,
+    breaks: false,
+    gfm: false,
+  },
+  markedBidi(),
+]);
+
+export function renderDuoChatMarkdownPreview(md) {
+  try {
+    return md ? duoMarked.parse(md.toString()) : '';
+  } catch {
+    return md;
+  }
+}

package/src/components/experimental/duo/chat/markdown_renderer.spec.js

@@ -0,0 +1,55 @@
+import { Parser } from 'marked';
+import { renderDuoChatMarkdownPreview } from './markdown_renderer';
+
+describe('Duo Chat Markdown renderer', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders a few edge cases', () => {
+    expect(renderDuoChatMarkdownPreview('')).toEqual('');
+    expect(renderDuoChatMarkdownPreview(null)).toEqual('');
+    expect(renderDuoChatMarkdownPreview(undefined)).toEqual('');
+    expect(renderDuoChatMarkdownPreview(5)).toEqual('<p>5</p>\n');
+  });
+
+  it('renders a simple paragraph', () => {
+    expect(renderDuoChatMarkdownPreview('Hello world')).toEqual('<p>Hello world</p>\n');
+  });
+
+  it('auto-closes an open code block', () => {
+    expect(renderDuoChatMarkdownPreview('```yaml\n# comment')).toEqual(
+      '<pre><code class="language-yaml"># comment\n</code></pre>\n'
+    );
+  });
+
+  it('renders standard markdown syntax', () => {
+    expect(renderDuoChatMarkdownPreview('*italic*')).toEqual(`<p><em>italic</em></p>\n`);
+    expect(renderDuoChatMarkdownPreview('_italic_')).toEqual(`<p><em>italic</em></p>\n`);
+    expect(renderDuoChatMarkdownPreview('**bold**')).toEqual(`<p><strong>bold</strong></p>\n`);
+    expect(renderDuoChatMarkdownPreview('~~strike~~')).toEqual(`<p><del>strike</del></p>\n`);
+    expect(renderDuoChatMarkdownPreview('https://example.org')).toEqual(
+      `<p><a href="https://example.org">https://example.org</a></p>\n`
+    );
+    expect(renderDuoChatMarkdownPreview('[example](https://example.org)')).toEqual(
+      `<p><a href="https://example.org">example</a></p>\n`
+    );
+    expect(renderDuoChatMarkdownPreview('1. first\n2. second')).toEqual(
+      `<ol>\n<li>first</li>\n<li>second</li>\n</ol>\n`
+    );
+    expect(renderDuoChatMarkdownPreview('- first\n- second')).toEqual(
+      `<ul>\n<li>first</li>\n<li>second</li>\n</ul>\n`
+    );
+    expect(renderDuoChatMarkdownPreview('* first\n* second')).toEqual(
+      `<ul>\n<li>first</li>\n<li>second</li>\n</ul>\n`
+    );
+  });
+
+  it('returns content as-is if marked throws', () => {
+    jest.spyOn(Parser.prototype, 'parse').mockImplementationOnce(() => {
+      throw new Error('I am a broken parser');
+    });
+
+    expect(renderDuoChatMarkdownPreview('Hello world')).toEqual('Hello world');
+  });
+});

package/src/components/experimental/duo/chat/mock_data.js

@@ -39,15 +39,25 @@ export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   id: '123',
   content: `To change your password in GitLab:
 
-  Log in to your GitLab account.
-  Select your avatar in the top right corner and choose Edit profile.
-  On the left sidebar, select Password.
-  Enter your current password in the Current password field.
-  Enter your new password in the New password and Password confirmation fields.
-  Select Save password.
-  If you don't know your current password, select the I forgot my password link to reset it.
-  
-  GitLab enforces password requirements when you choose a new password.`,
+  1. Log in to your GitLab account.
+  2. Select your avatar in the top right corner and choose Edit profile.
+  3. On the left sidebar, select Password.
+  4. Enter your current password in the Current password field.
+  5. Enter your new password in the New password and Password confirmation fields.
+  6. Select Save password.
+  7. If you don't know your current password, select the I forgot my password link to reset it.
+
+  GitLab enforces password requirements when you choose a new password.
+
+  ~~~yaml
+  # And here is a
+  # code block
+  everyone:
+    likes:
+      yaml: true
+  ~~~
+  which is rendered while streaming.
+  `,
   contentHtml: '',
   role: 'assistant',
   extras: {},