@gitlab/ui 78.9.0 → 78.10.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [78.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.10.0...v78.10.1) (2024-04-09)
+
+
+### Bug Fixes
+
+* **GlLabel:** Add fallback value to focus ring CSS variable ([2f3c184](https://gitlab.com/gitlab-org/gitlab-ui/commit/2f3c184818c3c16cd825558ea69b92adfa90d640))
+
+# [78.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.9.0...v78.10.0) (2024-04-08)
+
+
+### Features
+
+* **GlDuoChat:** detect streaming based on chunkId ([6cdfe5c](https://gitlab.com/gitlab-org/gitlab-ui/commit/6cdfe5cd823ed0e832a5ec51870421ff4c532dbc))
+* **GlDuoChatMessage:** Handle streaming in the component ([082ab86](https://gitlab.com/gitlab-org/gitlab-ui/commit/082ab867597972bb18ba5287ac69126f38e17619))
+
 # [78.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.8.1...v78.9.0) (2024-04-04)
 
 

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

@@ -6,6 +6,7 @@ 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 { concatUntilEmpty } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {
@@ -18,12 +19,6 @@ const i18n = {
     BETTER_RESPONSE: 'How the response might better meet your needs.'
   }
 };
-const concatUntilEmpty = arr => {
-  if (!arr) return '';
-  let end = arr.findIndex(el => !el);
-  if (end < 0) end = arr.length;
-  return arr.slice(0, end).join('');
-};
 var script = {
   name: 'GlDuoChatMessage',
   safeHtmlConfigExtension: {
@@ -72,10 +67,16 @@ var script = {
   data() {
     return {
       didWhat: '',
-      improveWhat: ''
+      improveWhat: '',
+      messageWatcher: null,
+      // imperatively set up watcher on message
+      messageChunks: []
     };
   },
   computed: {
+    isChunk() {
+      return typeof this.message.chunkId === 'number';
+    },
     isAssistantMessage() {
       return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
     },
@@ -90,12 +91,18 @@ var script = {
       var _this$message$extras2;
       return (_this$message$extras2 = this.message.extras) === null || _this$message$extras2 === void 0 ? void 0 : _this$message$extras2.hasFeedback;
     },
-    messageContent() {
+    defaultContent() {
       if (this.message.errors.length > 0) return this.renderMarkdown(this.message.errors.join('; '));
       if (this.message.contentHtml) {
         return this.message.contentHtml;
       }
-      return this.renderMarkdown(this.message.content || concatUntilEmpty(this.message.chunks));
+      return this.renderMarkdown(this.message.content);
+    },
+    messageContent() {
+      if (this.isAssistantMessage && this.isChunk) {
+        return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
+      }
+      return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
     }
   },
   beforeCreate() {
@@ -104,15 +111,39 @@ var script = {
     }
   },
   mounted() {
-    this.$nextTick(this.hydrateContentWithGFM);
+    if (this.isAssistantMessage) {
+      // The watcher has to be created imperatively here
+      // to give an opportunity to remove it after
+      // the complete message has arrived
+      this.messageWatcher = this.$watch('message', this.manageMessageUpdate);
+    }
+    this.setChunks();
+    this.hydrateContentWithGFM();
   },
   updated() {
-    this.$nextTick(this.hydrateContentWithGFM);
+    this.hydrateContentWithGFM();
   },
   methods: {
-    async hydrateContentWithGFM() {
-      if (this.message.contentHtml) {
-        this.renderGFM(this.$refs.content);
+    setChunks() {
+      if (this.isChunk) {
+        const {
+          chunkId,
+          content
+        } = this.message;
+        this.$set(this.messageChunks, chunkId - 1, content);
+      } else {
+        this.messageChunks = [];
+      }
+    },
+    stopWatchingMessage() {
+      if (this.messageWatcher) {
+        this.messageWatcher(); // Stop watching the message prop
+        this.messageWatcher = null; // Ensure the watcher can't be stopped multiple times
+      }
+    },
+    hydrateContentWithGFM() {
+      if (!this.isChunk) {
+        this.$nextTick(this.renderGFM(this.$refs.content));
       }
     },
     logEvent(e) {
@@ -122,6 +153,12 @@ var script = {
         improveWhat: this.improveWhat,
         message: this.message
       });
+    },
+    manageMessageUpdate() {
+      this.setChunks();
+      if (!this.isChunk) {
+        this.stopWatchingMessage();
+      }
     }
   },
   i18n

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

@@ -0,0 +1,8 @@
+const concatUntilEmpty = arr => {
+  if (!arr) return '';
+  let end = arr.findIndex(el => !el);
+  if (end < 0) end = arr.length;
+  return arr.slice(0, end).join('');
+};
+
+export { concatUntilEmpty };

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

@@ -215,8 +215,8 @@ var script = {
       return this.isLoading || this.isStreaming;
     },
     isStreaming() {
-      var _this$lastMessage2, _this$lastMessage2$ch, _this$lastMessage3;
-      return Boolean(((_this$lastMessage2 = this.lastMessage) === null || _this$lastMessage2 === void 0 ? void 0 : (_this$lastMessage2$ch = _this$lastMessage2.chunks) === null || _this$lastMessage2$ch === void 0 ? void 0 : _this$lastMessage2$ch.length) > 0 && !((_this$lastMessage3 = this.lastMessage) !== null && _this$lastMessage3 !== void 0 && _this$lastMessage3.content));
+      var _this$lastMessage2, _this$lastMessage2$ch, _this$lastMessage3, _this$lastMessage4;
+      return Boolean(((_this$lastMessage2 = this.lastMessage) === null || _this$lastMessage2 === void 0 ? void 0 : (_this$lastMessage2$ch = _this$lastMessage2.chunks) === null || _this$lastMessage2$ch === void 0 ? void 0 : _this$lastMessage2$ch.length) > 0 && !((_this$lastMessage3 = this.lastMessage) !== null && _this$lastMessage3 !== void 0 && _this$lastMessage3.content) || typeof ((_this$lastMessage4 = this.lastMessage) === null || _this$lastMessage4 === void 0 ? void 0 : _this$lastMessage4.chunkId) === 'number');
     },
     filteredSlashCommands() {
       const caseInsensitivePrompt = this.prompt.toLowerCase();

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

@@ -28,6 +28,20 @@ const MOCK_RESPONSE_MESSAGE = {
   errors: [],
   timestamp: '2021-04-21T12:00:00.000Z'
 };
+const generateSeparateChunks = n => {
+  const res = [];
+  for (let i = 1; i <= n; i += 1) {
+    res.push({
+      chunkId: i,
+      content: `chunk #${i}`,
+      role: MESSAGE_MODEL_ROLES.assistant,
+      requestId: '987',
+      errors: [],
+      timestamp: '2021-04-21T12:00:00.000Z'
+    });
+  }
+  return res;
+};
 const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   id: '123',
   content: `To change your password in GitLab:
@@ -51,7 +65,6 @@ const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   ~~~
   which is rendered while streaming.
   `,
-  contentHtml: '',
   role: 'assistant',
   extras: {},
   requestId: '987',
@@ -81,7 +94,7 @@ function generateMockResponseChunks() {
           ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
           requestId,
           content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(start, end),
-          chunkId
+          chunkId: chunkId + 1
         };
 
         // eslint-disable-next-line no-await-in-loop
@@ -101,8 +114,9 @@ function generateMockResponseChunks() {
 }
 const MOCK_USER_PROMPT_MESSAGE = {
   id: '456',
+  chunkId: null,
   content: 'How to create a new template?',
-  contentHtml: '',
+  contentHtml: '<p>How to create a new template?</p>',
   role: MESSAGE_MODEL_ROLES.user,
   requestId: '987',
   errors: [],
@@ -135,4 +149,4 @@ const SLASH_COMMANDS = [{
   description: 'Explain the selected snippet.'
 }];
 
-export { MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, SLASH_COMMANDS, generateMockResponseChunks, renderGFM, renderMarkdown };
+export { MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, SLASH_COMMANDS, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };