@gitlab/duo-ui 10.23.1 → 11.0.0

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

@@ -0,0 +1,161 @@
+import Vue from 'vue';
+import { GlToast, GlAlert, GlBadge, GlAvatar, GlButton, GlDropdown, GlDropdownItem, GlDisclosureDropdown, GlSafeHtmlDirective, GlTooltipDirective } 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('WebDuoChat.chatBackLabel', 'Back to history'),
+  CHAT_CLOSE_LABEL: translate('WebDuoChat.closeChatHeaderLabel', 'Close chat'),
+  CHAT_NEW_LABEL: translate('WebDuoChat.chatNewLabel', 'New chat'),
+  CHAT_NEW_TOOLTIP: translate('WebDuoChat.chatNewToolTip', 'New chat'),
+  CHAT_HISTORY_TOOLTIP: translate('WebDuoChat.chatHistoryToolTip', 'Chat history'),
+  CHAT_BACK_TO_CHAT_TOOLTIP: translate('WebDuoChat.chatBackToChatToolTip', 'Back to chat'),
+  CHAT_TITLE: translate('WebDuoChat.chatTitle', 'GitLab Duo Chat'),
+  CHAT_DROPDOWN_MORE_OPTIONS: translate('WebDuoChat.chatDropdownMoreOptions', 'More options'),
+  CHAT_COPY_TOOLTIP: translate('WebDuoChat.copySessionIdTooltip', 'Copy session ID'),
+  CHAT_COPY_SUCCESS_TOAST: translate('WebDuoChat.copySessionIdSuccessToast', 'Session ID copied to clipboard'),
+  CHAT_COPY_FAILED_TOAST: translate('WebDuoChat.copySessionIdFailedToast', 'Could not copy session ID')
+};
+Vue.use(GlToast);
+var script = {
+  name: 'DuoChatHeader',
+  components: {
+    GlAlert,
+    GlBadge,
+    GlAvatar,
+    GlButton,
+    GlDropdown,
+    GlDropdownItem,
+    GlDisclosureDropdown
+  },
+  directives: {
+    SafeHtml: GlSafeHtmlDirective,
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: i18n.CHAT_TITLE
+    },
+    subtitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    sessionId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    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
+    },
+    agents: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  computed: {
+    VIEW_TYPES() {
+      return VIEW_TYPES;
+    },
+    hasManyAgents() {
+      return this.agents.length > 1;
+    },
+    hasAgents() {
+      return this.agents.length > 0;
+    }
+  },
+  methods: {
+    startNewChat(agent) {
+      if (agent) {
+        this.$emit('new-chat', agent);
+      } else if (this.hasAgents) {
+        this.$emit('new-chat', this.agents[0]);
+      } else {
+        this.$emit('new-chat');
+      }
+    },
+    async copySessionIdToClipboard() {
+      try {
+        await navigator.clipboard.writeText(this.sessionId);
+        this.$toast.show('Session ID copied to clipboard');
+      } catch {
+        this.$toast.show('Could not copy session ID');
+      }
+    }
+  },
+  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:"gl-border-b gl-shrink-0 gl-bg-default gl-p-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"gl-border-b gl-flex gl-w-full gl-items-center gl-px-5 gl-py-3"},[(_vm.subtitle)?_c('h4',{staticClass:"gl-mb-0 gl-shrink-0 gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-pr-3 gl-text-sm gl-font-normal gl-text-subtle",attrs:{"data-testid":"chat-subtitle"}},[_vm._v("\n      "+_vm._s(_vm.subtitle)+"\n    ")]):_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(" "),_c('div',{staticClass:"drawer-title gl-flex gl-items-center gl-justify-start gl-p-5"},[_c('div',{staticClass:"gl-flex gl-flex-1 gl-overflow-hidden"},[_c('gl-avatar',{staticClass:"gl-mr-3",attrs:{"size":32,"entity-name":_vm.title,"shape":"circle"}}),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center"},[_c('h3',{staticClass:"gl-my-0 gl-text-[0.875rem]"},[_vm._v(_vm._s(_vm.title))])])],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[(
+          _vm.isMultithreaded && (_vm.activeThreadId || _vm.currentView === _vm.VIEW_TYPES.LIST || _vm.hasManyAgents)
+        )?[(_vm.hasManyAgents)?_c('gl-disclosure-dropdown',{attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"toggle-text":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"items":_vm.agents,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","text-sr-only":"","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL,"no-caret":""},on:{"action":_vm.startNewChat},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
+        var item = ref.item;
+return [_c('span',{staticClass:"gl-flex gl-flex-col"},[_c('span',{attrs:{"clas":"gl-block"}},[_vm._v(_vm._s(item.name))]),_vm._v(" "),_c('span',{staticClass:"gl-overflow-hidden gl-text-ellipsis gl-whitespace-nowrap gl-text-sm"},[_vm._v(_vm._s(item.description))])])]}}],null,false,117082970)}):_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_NEW_TOOLTIP,"data-testid":"chat-new-button","variant":"confirm","category":"tertiary","size":"small","icon":"duo-chat-new","aria-label":_vm.$options.i18n.CHAT_NEW_LABEL},on:{"click":_vm.startNewChat}})]:_vm._e(),_vm._v(" "),(_vm.isMultithreaded && _vm.currentView === _vm.VIEW_TYPES.CHAT)?_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_HISTORY_TOOLTIP,"data-testid":"go-back-to-list-button","category":"tertiary","size":"small","icon":"history","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',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP,"data-testid":"go-back-to-chat-button","category":"tertiary","size":"small","icon":"go-back","aria-label":_vm.$options.i18n.CHAT_BACK_TO_CHAT_TOOLTIP},on:{"click":function($event){return _vm.$emit('go-back-to-chat')}}}):_vm._e(),_vm._v(" "),(_vm.sessionId)?_c('gl-dropdown',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",modifiers:{"hover":true}}],attrs:{"icon":"ellipsis_v","category":"tertiary","text-sr-only":"","size":"small","text":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"title":_vm.$options.i18n.CHAT_DROPDOWN_MORE_OPTIONS,"no-caret":""}},[_c('gl-dropdown-item',{on:{"click":function($event){return _vm.copySessionIdToClipboard()}}},[_c('span',{staticClass:"gl-flex gl-items-center gl-gap-2"},[_c('span',{staticClass:"gl-flex-shrink-0"},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_COPY_TOOLTIP))]),_vm._v(" "),_c('gl-badge',{staticClass:"gl-flex-shrink"},[_c('span',{staticClass:"gl-max-w-12 gl-truncate",attrs:{"title":_vm.sessionId}},[_vm._v("\n                "+_vm._s(_vm.sessionId)+"\n              ")])])],1)])],1):_vm._e()],2)]),_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 };