@gitlab/ui 78.9.0 → 78.10.1

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

@@ -8,6 +8,7 @@ import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_s
 // eslint-disable-next-line no-restricted-imports
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
+import { concatUntilEmpty } from './utils';
 
 export const i18n = {
   MODAL: {
@@ -21,16 +22,6 @@ export const i18n = {
   },
 };
 
-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 default {
   name: 'GlDuoChatMessage',
   safeHtmlConfigExtension: {
@@ -80,9 +71,14 @@ export default {
     return {
       didWhat: '',
       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;
     },
@@ -95,7 +91,7 @@ export default {
     hasFeedback() {
       return this.message.extras?.hasFeedback;
     },
-    messageContent() {
+    defaultContent() {
       if (this.message.errors.length > 0)
         return this.renderMarkdown(this.message.errors.join('; '));
 
@@ -103,7 +99,13 @@ export default {
         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() {
@@ -112,15 +114,36 @@ export default {
     }
   },
   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) {
@@ -131,6 +154,12 @@ export default {
         message: this.message,
       });
     },
+    manageMessageUpdate() {
+      this.setChunks();
+      if (!this.isChunk) {
+        this.stopWatchingMessage();
+      }
+    },
   },
   i18n,
 };

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

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

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

@@ -0,0 +1,24 @@
+import { concatUntilEmpty } from './utils';
+
+describe('concatUntilEmpty utility', () => {
+  it('returns empty string if input array is falsy', () => {
+    expect(concatUntilEmpty()).toEqual('');
+    expect(concatUntilEmpty(null)).toEqual('');
+    expect(concatUntilEmpty(undefined)).toEqual('');
+  });
+
+  it('concatenates array elements until first falsy element', () => {
+    const arr = ['a', 'b', undefined, 'c'];
+    expect(concatUntilEmpty(arr)).toEqual('ab');
+  });
+
+  it('concatenates all array elements if none are falsy', () => {
+    const arr = ['a', 'b', 'c'];
+    expect(concatUntilEmpty(arr)).toEqual('abc');
+  });
+
+  it('returns empty string if first element is falsy', () => {
+    const arr = [undefined, 'b', 'c'];
+    expect(concatUntilEmpty(arr)).toEqual('');
+  });
+});

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

@@ -357,6 +357,7 @@ describe('GlDuoChat', () => {
             { ...MOCK_RESPONSE_MESSAGE, content: undefined, chunks: [''] },
           ],
         ],
+        [[{ ...MOCK_RESPONSE_MESSAGE, chunkId: 1 }]],
       ])('prevents submission when streaming (messages = "%o")', (msgs = []) => {
         createComponent({
           propsData: { isChatAvailable: true, messages: msgs },

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

@@ -125,45 +125,28 @@ export const Interactive = (args, { argTypes }) => ({
     async mockResponseFromAi() {
       const generator = generateMockResponseChunks(this.requestId);
 
-      for await (const result of generator) {
-        const { chunkId, content, ...messageAttributes } = result;
+      for await (const newResponse of generator) {
         const existingMessageIndex = this.msgs.findIndex(
-          (msg) => msg.requestId === result.requestId && msg.role === result.role
+          (msg) => msg.requestId === newResponse.requestId && msg.role === newResponse.role
         );
-
-        if (existingMessageIndex === -1) {
-          this.addNewMessage(messageAttributes, content);
+        const existingMessage = this.msgs[existingMessageIndex];
+        if (existingMessage) {
+          this.updateExistingMessage(newResponse, existingMessageIndex);
         } else {
-          this.updateExistingMessage(existingMessageIndex, content, chunkId);
+          this.addNewMessage(newResponse);
         }
       }
     },
-    addNewMessage(messageAttributes, content) {
+    addNewMessage(msg) {
       this.promptInFlight = false;
-      this.$set(this.msgs, this.msgs.length, {
-        ...messageAttributes,
-        chunks: [content],
-      });
+      this.$set(this.msgs, this.msgs.length, msg);
     },
-    updateExistingMessage(index, content, chunkId) {
-      const message = this.msgs[index];
-
-      if (chunkId != null) {
-        // Ensure the chunks array exists
-        if (!message.chunks) {
-          this.$set(message, 'chunks', []);
-        } else {
-          this.$set(message.chunks, chunkId, content);
-        }
-      } else {
-        // Update for final message
-        this.$set(message, 'content', content);
-
-        // Remove chunks if they are not needed anymore
-        if (message.chunks) {
-          this.$delete(message, 'chunks');
-        }
-      }
+    updateExistingMessage(newResponse, existingMessageIndex) {
+      const existingMessage = this.msgs[existingMessageIndex];
+      this.$set(this.msgs, existingMessageIndex, {
+        ...existingMessage,
+        ...newResponse,
+      });
     },
   },
   template: `

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

@@ -225,7 +225,10 @@ export default {
       return this.isLoading || this.isStreaming;
     },
     isStreaming() {
-      return Boolean(this.lastMessage?.chunks?.length > 0 && !this.lastMessage?.content);
+      return Boolean(
+        (this.lastMessage?.chunks?.length > 0 && !this.lastMessage?.content) ||
+          typeof this.lastMessage?.chunkId === 'number'
+      );
     },
     filteredSlashCommands() {
       const caseInsensitivePrompt = this.prompt.toLowerCase();

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

@@ -41,6 +41,21 @@ export const MOCK_RESPONSE_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
 };
 
+export 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;
+};
+
 export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   id: '123',
   content: `To change your password in GitLab:
@@ -64,7 +79,6 @@ export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   ~~~
   which is rendered while streaming.
   `,
-  contentHtml: '',
   role: 'assistant',
   extras: {},
   requestId: '987',
@@ -91,7 +105,7 @@ export async function* generateMockResponseChunks(requestId = 1) {
       ...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
@@ -108,8 +122,9 @@ export async function* generateMockResponseChunks(requestId = 1) {
 
 export 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: [],