@gitlab/ui 66.29.0 → 66.30.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [66.30.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.29.0...v66.30.0) (2023-10-12)
+
+
+### Features
+
+* **GlDuoChatConversation:** added component ([68017ef](https://gitlab.com/gitlab-org/gitlab-ui/commit/68017ef7707a5984e41fb93d2fd25cd53ab5e323))
+
 # [66.29.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.28.0...v66.29.0) (2023-10-12)
 
 

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

@@ -0,0 +1,81 @@
+import GlDuoChatMessage from '../duo_chat_message/duo_chat_message';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  CONVERSATION_NEW_CHAT: 'New chat'
+};
+const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
+const itemsValidator = items => items.every(isMessage);
+var script = {
+  name: 'GlDuoChatConversation',
+  components: {
+    GlDuoChatMessage
+  },
+  props: {
+    /**
+     * Messages to display
+     */
+    messages: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: itemsValidator
+    },
+    /**
+     * Whether to show the delimiter before this conversation
+     */
+    showDelimiter: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  methods: {
+    onTrackFeedback(event) {
+      /**
+       * Notify listeners about the feedback form submission on a response message.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('track-feedback', event);
+    }
+  },
+  i18n
+};
+
+/* 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',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end"},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-display-flex gl-align-items-center gl-text-gray-500 gl-gap-4",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-flex-grow-1"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-flex-grow-1"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('gl-duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg},on:{"track-feedback":_vm.onTrackFeedback}})})],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 07:48:44 GMT
+ * Generated on Thu, 12 Oct 2023 16:02:49 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 07:48:44 GMT
+ * Generated on Thu, 12 Oct 2023 16:02:49 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 07:48:45 GMT
+ * Generated on Thu, 12 Oct 2023 16:02:49 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 07:48:44 GMT
+ * Generated on Thu, 12 Oct 2023 16:02:49 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 12 Oct 2023 07:48:45 GMT
+// Generated on Thu, 12 Oct 2023 16:02:49 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 12 Oct 2023 07:48:44 GMT
+// Generated on Thu, 12 Oct 2023 16:02:49 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.29.0",
+  "version": "66.30.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,7 +94,7 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "5.0.0",
-    "@gitlab/svgs": "3.65.0",
+    "@gitlab/svgs": "3.66.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

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

@@ -0,0 +1,8 @@
+A component that lists messages in a conversation, and presents an optional delimiter to
+mark the beginning of the conversation.
+
+## Usage
+
+```html
+<gl-duo-chat-conversation :messages="messages" :show-delimeter="showDelimiter" />
+```

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

@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } from '../../mock_data';
+import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
+import GlDuoChatConversation from './duo_chat_conversation.vue';
+
+describe('GlDuoChatConversation', () => {
+  let wrapper;
+
+  const findChatMessages = () => wrapper.findAllComponents(GlDuoChatMessage);
+  const findDelimiter = () => wrapper.find('[data-testid="conversation-delimiter"]');
+  const createComponent = ({ propsData = {} } = {}) => {
+    wrapper = shallowMount(GlDuoChatConversation, {
+      propsData,
+    });
+  };
+
+  describe('rendering', () => {
+    const messages = [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE];
+
+    describe('default state', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('does not render messages by default', () => {
+        expect(findChatMessages().length).toBe(0);
+      });
+
+      it('does render the delimiter', () => {
+        expect(findDelimiter().exists()).toBe(true);
+      });
+    });
+
+    it('renders messages when messages are passed', () => {
+      createComponent({
+        propsData: { messages },
+      });
+      expect(findChatMessages().length).toBe(2);
+    });
+
+    it('does not render delimiter when showDelimiter = false', () => {
+      createComponent({ propsData: { messages, showDelimiter: false } });
+      expect(findDelimiter().exists()).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,59 @@
+import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } 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,
+  showDelimiter,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatConversation },
+  props: Object.keys(argTypes),
+  provide: {
+    renderGFM,
+    renderMarkdown,
+  },
+  template: `
+    <gl-duo-chat-conversation :messages="messages" :show-delimiter="showDelimiter" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps({
+  messages: [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE],
+});
+
+export const MultipleConversations = (args, { argTypes }) => ({
+  components: { GlDuoChatConversation },
+  props: Object.keys(argTypes),
+  provide: {
+    renderGFM,
+    renderMarkdown,
+  },
+  template: `
+    <div>
+      <gl-duo-chat-conversation :messages="messages" :show-delimiter="false" />
+      <gl-duo-chat-conversation :messages="messages" :show-delimiter="true" />
+    </div>
+  `,
+});
+MultipleConversations.args = generateProps({
+  messages: [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE],
+});
+
+export default {
+  title: 'experimental/duo/chat/duo-chat-conversation',
+  component: GlDuoChatConversation,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,67 @@
+<script>
+import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
+
+const i18n = {
+  CONVERSATION_NEW_CHAT: 'New chat',
+};
+
+const isMessage = (item) => Boolean(item) && item?.role;
+
+const itemsValidator = (items) => items.every(isMessage);
+
+export default {
+  name: 'GlDuoChatConversation',
+  components: {
+    GlDuoChatMessage,
+  },
+  props: {
+    /**
+     * Messages to display
+     */
+    messages: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: itemsValidator,
+    },
+    /**
+     * Whether to show the delimiter before this conversation
+     */
+    showDelimiter: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  methods: {
+    onTrackFeedback(event) {
+      /**
+       * Notify listeners about the feedback form submission on a response message.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('track-feedback', event);
+    },
+  },
+  i18n,
+};
+</script>
+<template>
+  <div class="gl-display-flex gl-flex-direction-column gl-justify-content-end">
+    <div
+      v-if="showDelimiter"
+      class="gl-my-5 gl-display-flex gl-align-items-center gl-text-gray-500 gl-gap-4"
+      data-testid="conversation-delimiter"
+    >
+      <hr class="gl-flex-grow-1" />
+      <span>{{ $options.i18n.CONVERSATION_NEW_CHAT }}</span>
+      <hr class="gl-flex-grow-1" />
+    </div>
+
+    <gl-duo-chat-message
+      v-for="(msg, index) in messages"
+      :key="`${msg.role}-${index}`"
+      :message="msg"
+      @track-feedback="onTrackFeedback"
+    />
+  </div>
+</template>