@gitlab/ui 73.0.1 → 73.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/components/experimental/duo/chat/duo_chat.js +9 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +1 -1
- package/src/components/experimental/duo/chat/duo_chat.spec.js +13 -0
- package/src/components/experimental/duo/chat/duo_chat.stories.js +6 -1
- package/src/components/experimental/duo/chat/duo_chat.vue +13 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [73.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v73.0.1...v73.1.0) (2024-01-31)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **GlDuoChat:** Adds showHeader prop ([694f75f](https://gitlab.com/gitlab-org/gitlab-ui/commit/694f75fe5480416eef5ffd08ab32f6ed76da22ee))
|
|
7
|
+
|
|
1
8
|
## [73.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v73.0.0...v73.0.1) (2024-01-30)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -140,6 +140,14 @@ var script = {
|
|
|
140
140
|
required: false,
|
|
141
141
|
default: () => [],
|
|
142
142
|
validator: slashCommandsValidator
|
|
143
|
+
},
|
|
144
|
+
/**
|
|
145
|
+
* Whether the header should be displayed.
|
|
146
|
+
*/
|
|
147
|
+
showHeader: {
|
|
148
|
+
type: Boolean,
|
|
149
|
+
required: false,
|
|
150
|
+
default: true
|
|
143
151
|
}
|
|
144
152
|
},
|
|
145
153
|
data() {
|
|
@@ -309,7 +317,7 @@ var script = {
|
|
|
309
317
|
const __vue_script__ = script;
|
|
310
318
|
|
|
311
319
|
/* template */
|
|
312
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! 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":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader")],2),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_vm._t("hero"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-mb-0 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(),_vm._v(" "),_c('section',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
|
|
320
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{ref:"drawer",staticClass:"markdown-code-block gl-drawer gl-drawer-default gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"},on:{"scroll":_vm.handleScrollingTrottled}},[(_vm.showHeader)?_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! 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":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader")],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body gl-display-flex gl-flex-direction-column"},[_vm._t("hero"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-mb-0 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(),_vm._v(" "),_c('section',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"},[_c('transition-group',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end",class:[
|
|
313
321
|
{
|
|
314
322
|
'gl-h-full': !_vm.hasMessages,
|
|
315
323
|
'gl-h-auto': _vm.hasMessages,
|
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -76,6 +76,7 @@ describe('GlDuoChat', () => {
|
|
|
76
76
|
const findChatConversations = () => wrapper.findAllComponents(DuoChatConversation);
|
|
77
77
|
const findCustomLoader = () => wrapper.findComponent(DuoChatLoader);
|
|
78
78
|
const findError = () => wrapper.find('[data-testid="chat-error"]');
|
|
79
|
+
const findHeader = () => wrapper.find('[data-testid="chat-header"]');
|
|
79
80
|
const findFooter = () => wrapper.find('[data-testid="chat-footer"]');
|
|
80
81
|
const findPromptForm = () => wrapper.find('[data-testid="chat-prompt-form"]');
|
|
81
82
|
const findGeneratedByAI = () => wrapper.find('[data-testid="chat-legal-warning"]');
|
|
@@ -224,6 +225,18 @@ describe('GlDuoChat', () => {
|
|
|
224
225
|
expect(findBadge().props('type')).toBe(expectedProp);
|
|
225
226
|
}
|
|
226
227
|
);
|
|
228
|
+
|
|
229
|
+
describe('showHeader', () => {
|
|
230
|
+
it.each`
|
|
231
|
+
desc | showHeader | shouldRender
|
|
232
|
+
${'renders'} | ${undefined} | ${true}
|
|
233
|
+
${'does not render'} | ${false} | ${false}
|
|
234
|
+
${'renders'} | ${true} | ${true}
|
|
235
|
+
`('$desc the header when showHeader is "$showHeader"', ({ showHeader, shouldRender }) => {
|
|
236
|
+
createComponent({ propsData: { showHeader } });
|
|
237
|
+
expect(findHeader().exists()).toBe(shouldRender);
|
|
238
|
+
});
|
|
239
|
+
});
|
|
227
240
|
});
|
|
228
241
|
|
|
229
242
|
describe('chat', () => {
|
|
@@ -47,6 +47,7 @@ const generateProps = ({
|
|
|
47
47
|
badgeHelpPageUrl = defaultValue('badgeHelpPageUrl'),
|
|
48
48
|
badgeType = defaultValue('badgeType'),
|
|
49
49
|
toolName = defaultValue('toolName'),
|
|
50
|
+
showHeader = defaultValue('showHeader'),
|
|
50
51
|
} = {}) => ({
|
|
51
52
|
title,
|
|
52
53
|
messages,
|
|
@@ -58,6 +59,7 @@ const generateProps = ({
|
|
|
58
59
|
badgeType,
|
|
59
60
|
toolName,
|
|
60
61
|
slashCommands,
|
|
62
|
+
showHeader,
|
|
61
63
|
});
|
|
62
64
|
|
|
63
65
|
export const Default = (args, { argTypes }) => ({
|
|
@@ -78,6 +80,7 @@ export const Default = (args, { argTypes }) => ({
|
|
|
78
80
|
:badge-help-page-url="badgeHelpPageUrl"
|
|
79
81
|
:badge-type="badgeType"
|
|
80
82
|
:tool-name="toolName"
|
|
83
|
+
:show-header="showHeader"
|
|
81
84
|
/>`,
|
|
82
85
|
});
|
|
83
86
|
Default.args = generateProps({
|
|
@@ -172,6 +175,7 @@ export const Interactive = (args, { argTypes }) => ({
|
|
|
172
175
|
:badge-help-page-url="badgeHelpPageUrl"
|
|
173
176
|
:badge-type="badgeType"
|
|
174
177
|
:tool-name="toolName"
|
|
178
|
+
:show-header="showHeader"
|
|
175
179
|
@send-chat-prompt="onSendChatPrompt"
|
|
176
180
|
@chat-hidden="onChatHidden"
|
|
177
181
|
/>
|
|
@@ -197,7 +201,8 @@ export const Slots = (args, { argTypes }) => ({
|
|
|
197
201
|
:predefined-prompts="predefinedPrompts"
|
|
198
202
|
:badge-help-page-url="badgeHelpPageUrl"
|
|
199
203
|
:badge-type="badgeType"
|
|
200
|
-
:tool-name="toolName"
|
|
204
|
+
:tool-name="toolName"
|
|
205
|
+
:show-header="showHeader">
|
|
201
206
|
|
|
202
207
|
<template #hero>
|
|
203
208
|
<pre class="code-block rounded code highlight gl-border-b gl-rounded-0! gl-mb-0 gl-overflow-y-auto solarized-light" style="max-height: 20rem; overflow-y: auto;">
|
|
@@ -149,6 +149,14 @@ export default {
|
|
|
149
149
|
default: () => [],
|
|
150
150
|
validator: slashCommandsValidator,
|
|
151
151
|
},
|
|
152
|
+
/**
|
|
153
|
+
* Whether the header should be displayed.
|
|
154
|
+
*/
|
|
155
|
+
showHeader: {
|
|
156
|
+
type: Boolean,
|
|
157
|
+
required: false,
|
|
158
|
+
default: true,
|
|
159
|
+
},
|
|
152
160
|
},
|
|
153
161
|
data() {
|
|
154
162
|
return {
|
|
@@ -327,7 +335,11 @@ export default {
|
|
|
327
335
|
data-testid="chat-component"
|
|
328
336
|
@scroll="handleScrollingTrottled"
|
|
329
337
|
>
|
|
330
|
-
<header
|
|
338
|
+
<header
|
|
339
|
+
v-if="showHeader"
|
|
340
|
+
data-testid="chat-header"
|
|
341
|
+
class="gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0"
|
|
342
|
+
>
|
|
331
343
|
<div
|
|
332
344
|
class="drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"
|
|
333
345
|
>
|