@gitlab/ui 66.35.0 → 66.35.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [66.35.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.35.0...v66.35.1) (2023-10-20)
+
+
+### Bug Fixes
+
+* **GlDuoChatMessage:** nextTick() when rendering GFM ([835900c](https://gitlab.com/gitlab-org/gitlab-ui/commit/835900cb9cf01e26b4e24120be3abc6f48c3c371))
+
 # [66.35.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.34.0...v66.35.0) (2023-10-20)
 
 

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

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
@@ -60,7 +61,7 @@ var script = {
         if (!chunkId) {
           this.messageChunks = [];
           this.messageContent = this.content;
-          this.renderGFM(this.$refs.content);
+          this.hydrateContentWithGFM();
         } else {
           this.messageChunks[chunkId] = content;
           this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
@@ -81,7 +82,13 @@ var script = {
     if (this.message.chunkId) {
       this.messageChunks[this.message.chunkId] = this.message.content;
     }
-    this.renderGFM(this.$refs.content);
+    this.hydrateContentWithGFM();
+  },
+  methods: {
+    async hydrateContentWithGFM() {
+      await nextTick();
+      this.renderGFM(this.$refs.content);
+    }
   }
 };
 

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

@@ -80,5 +80,12 @@ const MOCK_USER_PROMPT_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
   extras: null
 };
+const renderMarkdown = content => content;
+const renderGFM = el => {
+  const codeBlock = el.querySelectorAll('.markdown-code-block');
+  codeBlock.forEach(block => {
+    block === null || block === void 0 ? void 0 : block.classList.add('gl-bg-purple-50', 'gl-p-3', 'gl-mb-3');
+  });
+};
 
-export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, generateMockResponseChunks };
+export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, generateMockResponseChunks, renderGFM, renderMarkdown };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 20 Oct 2023 08:03:38 GMT
+ * Generated on Fri, 20 Oct 2023 18:59:55 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 20 Oct 2023 08:03:38 GMT
+ * Generated on Fri, 20 Oct 2023 18:59:55 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 20 Oct 2023 08:03:38 GMT
+ * Generated on Fri, 20 Oct 2023 18:59:55 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 20 Oct 2023 08:03:38 GMT
+ * Generated on Fri, 20 Oct 2023 18:59:55 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 20 Oct 2023 08:03:38 GMT
+// Generated on Fri, 20 Oct 2023 18:59:55 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 20 Oct 2023 08:03:38 GMT
+// Generated on Fri, 20 Oct 2023 18:59:55 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.35.0",
+  "version": "66.35.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -1,10 +1,13 @@
-import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } from '../../mock_data';
+import {
+  MOCK_USER_PROMPT_MESSAGE,
+  MOCK_RESPONSE_MESSAGE,
+  renderGFM,
+  renderMarkdown,
+} from '../../mock_data';
 import GlDuoChatConversation from './duo_chat_conversation.vue';
 import readme from './duo_chat_conversation.md';
 
 const defaultValue = (prop) => GlDuoChatConversation.props[prop].default;
-const renderMarkdown = (content) => content;
-const renderGFM = () => {};
 
 const generateProps = ({ messages = [], showDelimiter = defaultValue('showDelimiter') } = {}) => ({
   messages,

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

@@ -109,8 +109,9 @@ describe('DuoChatMessage', () => {
   });
 
   describe('message output', () => {
-    it('hydrates the message with GLFM when mounting the component', () => {
+    it('hydrates the message with GLFM when mounting the component', async () => {
       createComponent();
+      await nextTick();
       expect(renderGFM).toHaveBeenCalled();
     });
 
@@ -327,6 +328,7 @@ describe('DuoChatMessage', () => {
           message: chunk1,
         },
       });
+      await nextTick();
       renderGFM.mockClear();
       expect(renderGFM).not.toHaveBeenCalled();
 

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

@@ -1,10 +1,12 @@
-import { MOCK_RESPONSE_MESSAGE, MOCK_USER_PROMPT_MESSAGE } from '../../mock_data';
+import {
+  MOCK_RESPONSE_MESSAGE,
+  MOCK_USER_PROMPT_MESSAGE,
+  renderGFM,
+  renderMarkdown,
+} from '../../mock_data';
 import GlDuoChatMessage from './duo_chat_message.vue';
 import readme from './duo_chat_message.md';
 
-const renderMarkdown = (content) => content;
-const renderGFM = () => {};
-
 const generateProps = ({ message = MOCK_RESPONSE_MESSAGE } = {}) => ({
   message,
 });

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

@@ -1,4 +1,5 @@
 <script>
+import { nextTick } from 'vue';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
@@ -60,7 +61,7 @@ export default {
         if (!chunkId) {
           this.messageChunks = [];
           this.messageContent = this.content;
-          this.renderGFM(this.$refs.content);
+          this.hydrateContentWithGFM();
         } else {
           this.messageChunks[chunkId] = content;
           this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
@@ -81,7 +82,13 @@ export default {
     if (this.message.chunkId) {
       this.messageChunks[this.message.chunkId] = this.message.content;
     }
-    this.renderGFM(this.$refs.content);
+    this.hydrateContentWithGFM();
+  },
+  methods: {
+    async hydrateContentWithGFM() {
+      await nextTick();
+      this.renderGFM(this.$refs.content);
+    },
   },
 };
 </script>

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

@@ -8,11 +8,10 @@ import {
   MOCK_RESPONSE_MESSAGE,
   MOCK_USER_PROMPT_MESSAGE,
   generateMockResponseChunks,
+  renderGFM,
+  renderMarkdown,
 } from './mock_data';
 
-const renderMarkdown = (content) => content;
-const renderGFM = () => {};
-
 const defaultValue = (prop) =>
   typeof GlDuoChat.props[prop].default === 'function'
     ? GlDuoChat.props[prop].default()

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

@@ -94,3 +94,11 @@ export const MOCK_USER_PROMPT_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
   extras: null,
 };
+
+export const renderMarkdown = (content) => content;
+export const renderGFM = (el) => {
+  const codeBlock = el.querySelectorAll('.markdown-code-block');
+  codeBlock.forEach((block) => {
+    block?.classList.add('gl-bg-purple-50', 'gl-p-3', 'gl-mb-3');
+  });
+};