@gitlab/duo-ui 8.2.1 → 8.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [8.3.0](https://gitlab.com/gitlab-org/duo-ui/compare/v8.2.1...v8.3.0) (2025-02-21)
+
+
+### Features
+
+* add Duo Chat header component ([b120863](https://gitlab.com/gitlab-org/duo-ui/commit/b12086344411a02894ddca77c3be9c7763443ce6))
+
 ## [8.2.1](https://gitlab.com/gitlab-org/duo-ui/compare/v8.2.0...v8.2.1) (2025-02-21)
 
 

package/dist/components/chat/components/duo_chat_header/constants.js

@@ -0,0 +1,6 @@
+const VIEW_TYPES = {
+  CHAT: 'chat',
+  LIST: 'list'
+};
+
+export { VIEW_TYPES };

package/dist/components/chat/components/duo_chat_header/duo_chat_header.js

@@ -0,0 +1,105 @@
+import { GlButton, GlAlert, GlExperimentBadge, GlSafeHtmlDirective } from '@gitlab/ui';
+import { translate } from '../../../../utils/i18n';
+import { VIEW_TYPES } from './constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  CHAT_BACK_LABEL: translate('DuoChat.chatBackLabel', 'Back to History'),
+  CHAT_CLOSE_LABEL: translate('DuoChat.closeChatHeaderLabel', 'Close Chat'),
+  CHAT_NEW_LABEL: translate('DuoChat.chatNewLabel', 'New Chat'),
+  CHAT_TITLE: translate('DuoChat.chatTitle', 'GitLab Duo Chat')
+};
+var script = {
+  name: 'DuoChatHeader',
+  components: {
+    GlButton,
+    GlAlert,
+    GlExperimentBadge
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_TITLE
+    },
+    error: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    isMultithreaded: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    shouldRenderResizable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    activeThreadId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    badgeType: {
+      type: String,
+      required: false,
+      default: null
+    },
+    currentView: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    VIEW_TYPES() {
+      return VIEW_TYPES;
+    }
+  },
+  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('header',{staticClass:"duo-chat-drawer-header duo-chat-drawer-header-sticky gl-border-0 gl-bg-default !gl-p-0",class:{
+    'gl-z-200': !_vm.shouldRenderResizable,
+  },attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-p-5"},[(_vm.isMultithreaded && _vm.currentView === _vm.VIEW_TYPES.CHAT)?_c('gl-button',{staticClass:"gl-mr-3",attrs:{"data-testid":"chat-back-button","category":"primary","size":"medium","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_LABEL},on:{"click":function($event){return _vm.$emit('go-back')}}}):_vm._e(),_vm._v(" "),(_vm.isMultithreaded && (_vm.activeThreadId || _vm.currentView === _vm.VIEW_TYPES.LIST))?_c('gl-button',{staticClass:"gl-mr-3",attrs:{"data-testid":"chat-new-button","category":"primary","size":"medium","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":function($event){return _vm.$emit('new-chat')}}}):_vm._e(),_vm._v(" "),_c('h3',{staticClass:"gl-my-0 gl-text-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),(_vm.badgeType)?_c('gl-experiment-badge',{attrs:{"type":_vm.badgeType,"container-id":"chat-component"}}):_vm._e(),_vm._v(" "),_c('gl-button',{staticClass:"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":function($event){return _vm.$emit('close')}}})],1),_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)};
+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__;
+export { i18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -104,7 +104,7 @@
     "@gitlab/eslint-plugin": "20.3.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.2",
-    "@gitlab/svgs": "3.117.0",
+    "@gitlab/svgs": "^3.0.0",
     "@gitlab/ui": "latest",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",

package/src/components/chat/components/duo_chat_header/constants.js

@@ -0,0 +1,4 @@
+export const VIEW_TYPES = {
+  CHAT: 'chat',
+  LIST: 'list',
+};

package/src/components/chat/components/duo_chat_header/duo_chat_header.vue

@@ -0,0 +1,127 @@
+<script>
+import { GlButton, GlAlert, GlExperimentBadge, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { translate } from '../../../../utils/i18n';
+import { VIEW_TYPES } from './constants';
+
+export const i18n = {
+  CHAT_BACK_LABEL: translate('DuoChat.chatBackLabel', 'Back to History'),
+  CHAT_CLOSE_LABEL: translate('DuoChat.closeChatHeaderLabel', 'Close Chat'),
+  CHAT_NEW_LABEL: translate('DuoChat.chatNewLabel', 'New Chat'),
+  CHAT_TITLE: translate('DuoChat.chatTitle', 'GitLab Duo Chat'),
+};
+
+export default {
+  name: 'DuoChatHeader',
+
+  components: {
+    GlButton,
+    GlAlert,
+    GlExperimentBadge,
+  },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_TITLE,
+    },
+    error: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    isMultithreaded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    shouldRenderResizable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    activeThreadId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    badgeType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    currentView: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    VIEW_TYPES() {
+      return VIEW_TYPES;
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <header
+    data-testid="chat-header"
+    :class="{
+      'gl-z-200': !shouldRenderResizable,
+    }"
+    class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-border-0 gl-bg-default !gl-p-0"
+  >
+    <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
+      <gl-button
+        v-if="isMultithreaded && currentView === VIEW_TYPES.CHAT"
+        data-testid="chat-back-button"
+        category="primary"
+        size="medium"
+        icon="go-back"
+        class="gl-mr-3"
+        :aria-label="$options.i18n.CHAT_BACK_LABEL"
+        @click="$emit('go-back')"
+      />
+      <gl-button
+        v-if="isMultithreaded && (activeThreadId || currentView === VIEW_TYPES.LIST)"
+        data-testid="chat-new-button"
+        category="primary"
+        size="medium"
+        icon="duo-chat-new"
+        class="gl-mr-3"
+        :aria-label="$options.i18n.CHAT_NEW_LABEL"
+        @click="$emit('new-chat')"
+      />
+
+      <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
+      <gl-experiment-badge v-if="badgeType" :type="badgeType" container-id="chat-component" />
+      <gl-button
+        category="tertiary"
+        variant="default"
+        icon="close"
+        size="small"
+        class="gl-ml-auto"
+        data-testid="chat-close-button"
+        :aria-label="$options.i18n.CHAT_CLOSE_LABEL"
+        @click="$emit('close')"
+      />
+    </div>
+
+    <slot name="subheader"></slot>
+
+    <gl-alert
+      v-if="error"
+      key="error"
+      :dismissible="false"
+      variant="danger"
+      class="!gl-pl-9"
+      role="alert"
+      data-testid="chat-error"
+    >
+      <span v-safe-html="error"></span>
+    </gl-alert>
+  </header>
+</template>

package/translations.js

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-default-export */
 export default {
+  'DuoChat.chatBackLabel': 'Back to History',
   'DuoChat.chatCancelLabel': 'Cancel',
   'DuoChat.chatCloseLabel': 'Close the Code Explanation',
   'DuoChat.chatDefaultPredefinedPromptsChangePassword': 'How do I change my password in GitLab?',
@@ -9,9 +10,12 @@ export default {
   'DuoChat.chatDefaultTitle': 'GitLab Duo Chat',
   'DuoChat.chatEmptyStateTitle':
     '👋 I am GitLab Duo Chat, your personal AI-powered assistant. How can I help you today?',
+  'DuoChat.chatNewLabel': 'New Chat',
   'DuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
   'DuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
   'DuoChat.chatSubmitLabel': 'Send chat message.',
+  'DuoChat.chatTitle': 'GitLab Duo Chat',
+  'DuoChat.closeChatHeaderLabel': 'Close Chat',
   'DuoChatContextItemDetailsModal.contentErrorMessage': 'Item content could not be displayed.',
   'DuoChatContextItemDetailsModal.title': 'Preview',
   'DuoChatContextItemMenu.emptyStateMessage': 'No results found',