@gitlab/ui 74.9.2 → 74.9.3
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 +7 -7
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -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/components/duo_chat_loader/duo_chat_loader.scss +1 -6
- package/src/components/experimental/duo/chat/duo_chat.scss +11 -12
- package/src/components/experimental/duo/chat/duo_chat.spec.js +4 -3
- package/src/components/experimental/duo/chat/duo_chat.vue +37 -46
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.scss
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
.duo-chat-loader {
|
|
2
|
-
@include gl-py-3;
|
|
3
|
-
@include gl-px-4;
|
|
4
|
-
@include gl-mb-4;
|
|
5
|
-
@include gl-rounded-lg;
|
|
6
|
-
@include gl-rounded-bottom-left-none;
|
|
7
2
|
@include gl-display-flex;
|
|
8
3
|
@include gl-text-gray-500;
|
|
9
4
|
|
|
@@ -64,4 +59,4 @@
|
|
|
64
59
|
40% {
|
|
65
60
|
transform: scale(1);
|
|
66
61
|
}
|
|
67
|
-
}
|
|
62
|
+
}
|
|
@@ -12,18 +12,9 @@
|
|
|
12
12
|
transform: translateY(10px);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.loader-
|
|
16
|
-
.loader-leave-
|
|
17
|
-
transition:
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.loader-enter,
|
|
21
|
-
.loader-leave-to {
|
|
22
|
-
@include gl-opacity-0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.loader-leave-active {
|
|
26
|
-
@include gl-absolute;
|
|
15
|
+
.duo-chat-loader.message-leave,
|
|
16
|
+
.duo-chat-loader.message-leave-to {
|
|
17
|
+
transition: none;
|
|
27
18
|
}
|
|
28
19
|
|
|
29
20
|
.gl-drawer-body-scrim-on-footer {
|
|
@@ -31,11 +22,19 @@
|
|
|
31
22
|
background: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
|
|
32
23
|
}
|
|
33
24
|
}
|
|
25
|
+
|
|
26
|
+
.gl-drawer-body {
|
|
27
|
+
overflow-y: auto;
|
|
28
|
+
}
|
|
34
29
|
}
|
|
35
30
|
|
|
36
31
|
.duo-chat-history {
|
|
37
32
|
scroll-behavior: smooth;
|
|
38
33
|
|
|
34
|
+
&.force-scroll-bar {
|
|
35
|
+
min-height: calc(100% + 1rem);
|
|
36
|
+
}
|
|
37
|
+
|
|
39
38
|
/*
|
|
40
39
|
Browsers a are pretty good at keeping the focus on an element while
|
|
41
40
|
the parent element grows in size. With this we mark all child elements
|
|
@@ -72,6 +72,7 @@ describe('GlDuoChat', () => {
|
|
|
72
72
|
};
|
|
73
73
|
|
|
74
74
|
const findChatComponent = () => wrapper.find('[data-testid="chat-component"]');
|
|
75
|
+
const findChatHistoryComponent = () => wrapper.find('[data-testid="chat-history"]');
|
|
75
76
|
const findCloseButton = () => wrapper.find('[data-testid="chat-close-button"]');
|
|
76
77
|
const findChatConversations = () => wrapper.findAllComponents(DuoChatConversation);
|
|
77
78
|
const findCustomLoader = () => wrapper.findComponent(DuoChatLoader);
|
|
@@ -462,7 +463,7 @@ describe('GlDuoChat', () => {
|
|
|
462
463
|
|
|
463
464
|
beforeEach(() => {
|
|
464
465
|
createComponent({ propsData: { messages, isChatAvailable: true } });
|
|
465
|
-
element =
|
|
466
|
+
element = findChatHistoryComponent().element;
|
|
466
467
|
});
|
|
467
468
|
|
|
468
469
|
it('when scrolling to the bottom it removes the scrim class', async () => {
|
|
@@ -470,7 +471,7 @@ describe('GlDuoChat', () => {
|
|
|
470
471
|
jest.spyOn(element, 'offsetHeight', 'get').mockReturnValue(100);
|
|
471
472
|
jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
|
|
472
473
|
|
|
473
|
-
|
|
474
|
+
findChatHistoryComponent().trigger('scroll');
|
|
474
475
|
|
|
475
476
|
await nextTick();
|
|
476
477
|
|
|
@@ -482,7 +483,7 @@ describe('GlDuoChat', () => {
|
|
|
482
483
|
jest.spyOn(element, 'offsetHeight', 'get').mockReturnValue(100);
|
|
483
484
|
jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
|
|
484
485
|
|
|
485
|
-
|
|
486
|
+
findChatHistoryComponent().trigger('scroll');
|
|
486
487
|
|
|
487
488
|
await nextTick();
|
|
488
489
|
|
|
@@ -285,8 +285,8 @@ export default {
|
|
|
285
285
|
this.prompt = prompt;
|
|
286
286
|
this.sendChatPrompt();
|
|
287
287
|
},
|
|
288
|
-
handleScrolling() {
|
|
289
|
-
const { scrollTop, offsetHeight, scrollHeight } =
|
|
288
|
+
handleScrolling(event) {
|
|
289
|
+
const { scrollTop, offsetHeight, scrollHeight } = event.target;
|
|
290
290
|
this.scrolledToBottom = scrollTop + offsetHeight >= scrollHeight;
|
|
291
291
|
},
|
|
292
292
|
async scrollToBottom() {
|
|
@@ -355,11 +355,9 @@ export default {
|
|
|
355
355
|
<aside
|
|
356
356
|
v-if="!isHidden"
|
|
357
357
|
id="chat-component"
|
|
358
|
-
ref="drawer"
|
|
359
358
|
class="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"
|
|
360
359
|
role="complementary"
|
|
361
360
|
data-testid="chat-component"
|
|
362
|
-
@scroll="handleScrollingTrottled"
|
|
363
361
|
>
|
|
364
362
|
<header
|
|
365
363
|
v-if="showHeader"
|
|
@@ -416,50 +414,43 @@ export default {
|
|
|
416
414
|
</gl-alert>
|
|
417
415
|
</header>
|
|
418
416
|
|
|
419
|
-
<div class="gl-drawer-body
|
|
420
|
-
<
|
|
421
|
-
|
|
417
|
+
<div class="gl-drawer-body" data-testid="chat-history" @scroll="handleScrollingTrottled">
|
|
418
|
+
<transition-group
|
|
419
|
+
tag="section"
|
|
420
|
+
name="message"
|
|
421
|
+
class="duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-bg-gray-10"
|
|
422
|
+
:class="[
|
|
423
|
+
{
|
|
424
|
+
'gl-h-full': !hasMessages,
|
|
425
|
+
'force-scroll-bar': hasMessages,
|
|
426
|
+
},
|
|
427
|
+
]"
|
|
422
428
|
>
|
|
423
|
-
<
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
:
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
:
|
|
437
|
-
|
|
438
|
-
:show-delimiter="index > 0"
|
|
439
|
-
@track-feedback="onTrackFeedback"
|
|
429
|
+
<gl-duo-chat-conversation
|
|
430
|
+
v-for="(conversation, index) in conversations"
|
|
431
|
+
:key="`conversation-${index}`"
|
|
432
|
+
:messages="conversation"
|
|
433
|
+
:show-delimiter="index > 0"
|
|
434
|
+
@track-feedback="onTrackFeedback"
|
|
435
|
+
/>
|
|
436
|
+
<template v-if="!hasMessages && !isLoading">
|
|
437
|
+
<gl-empty-state
|
|
438
|
+
key="empty-state"
|
|
439
|
+
:svg-path="$options.emptySvg"
|
|
440
|
+
:svg-height="145"
|
|
441
|
+
:title="emptyStateTitle"
|
|
442
|
+
:description="emptyStateDescription"
|
|
443
|
+
class="gl-flex-grow gl-justify-content-center"
|
|
440
444
|
/>
|
|
441
|
-
<
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
</div>
|
|
451
|
-
<gl-duo-chat-predefined-prompts
|
|
452
|
-
key="predefined-prompts"
|
|
453
|
-
:prompts="predefinedPrompts"
|
|
454
|
-
@click="sendPredefinedPrompt"
|
|
455
|
-
/>
|
|
456
|
-
</template>
|
|
457
|
-
</transition-group>
|
|
458
|
-
<transition name="loader">
|
|
459
|
-
<gl-duo-chat-loader v-if="isLoading" :tool-name="toolName" class="gl-px-0!" />
|
|
460
|
-
</transition>
|
|
461
|
-
<div ref="anchor" class="scroll-anchor"></div>
|
|
462
|
-
</section>
|
|
445
|
+
<gl-duo-chat-predefined-prompts
|
|
446
|
+
key="predefined-prompts"
|
|
447
|
+
:prompts="predefinedPrompts"
|
|
448
|
+
@click="sendPredefinedPrompt"
|
|
449
|
+
/>
|
|
450
|
+
</template>
|
|
451
|
+
<gl-duo-chat-loader v-if="isLoading" key="loader" :tool-name="toolName" />
|
|
452
|
+
<div key="anchor" ref="anchor" class="scroll-anchor"></div>
|
|
453
|
+
</transition-group>
|
|
463
454
|
</div>
|
|
464
455
|
<footer
|
|
465
456
|
v-if="isChatAvailable"
|