@gitlab/ui 74.3.0 → 74.3.1
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 +4 -5
- 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/duo_chat.scss +28 -1
- package/src/components/experimental/duo/chat/duo_chat.spec.js +5 -3
- package/src/components/experimental/duo/chat/duo_chat.vue +3 -4
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -33,6 +33,33 @@
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
.duo-chat-history {
|
|
37
|
+
scroll-behavior: smooth;
|
|
38
|
+
|
|
39
|
+
/*
|
|
40
|
+
Browsers a are pretty good at keeping the focus on an element while
|
|
41
|
+
the parent element grows in size. With this we mark all child elements
|
|
42
|
+
of the chat history as "non" anchors.
|
|
43
|
+
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
|
|
44
|
+
*/
|
|
45
|
+
* {
|
|
46
|
+
overflow-anchor: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/*
|
|
50
|
+
Right at the bottom of the chat history we add a scroll-anchor element.
|
|
51
|
+
This scroll-anchor element is the only "possible" anchor. The beauty of it:
|
|
52
|
+
It only will be used as an anchor _if_ it is currently inside the view port.
|
|
53
|
+
So if the user manually scrolls up while a chunked message is coming in,
|
|
54
|
+
it won't stick to the bottom while the message still loads.
|
|
55
|
+
*/
|
|
56
|
+
.scroll-anchor {
|
|
57
|
+
overflow-anchor: auto;
|
|
58
|
+
height: 1px;
|
|
59
|
+
margin-top: -1px; // In order to not add 1px vertically, we add a negative margin
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
36
63
|
.duo-chat-input {
|
|
37
64
|
@include gl-display-flex;
|
|
38
65
|
@include gl-flex-direction-column;
|
|
@@ -61,7 +88,7 @@
|
|
|
61
88
|
.slash-commands {
|
|
62
89
|
@include gl-mt-n2;
|
|
63
90
|
|
|
64
|
-
.active-command{
|
|
91
|
+
.active-command {
|
|
65
92
|
@include gl-bg-gray-50;
|
|
66
93
|
@include gl-rounded-base;
|
|
67
94
|
}
|
|
@@ -127,13 +127,15 @@ describe('GlDuoChat', () => {
|
|
|
127
127
|
|
|
128
128
|
describe('when messages exist', () => {
|
|
129
129
|
it('scrolls to the bottom on load', async () => {
|
|
130
|
+
const scrollIntoViewMock = jest.fn();
|
|
131
|
+
window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
|
|
132
|
+
|
|
130
133
|
createComponent({ propsData: { messages } });
|
|
131
|
-
const { element } = findChatComponent();
|
|
132
|
-
jest.spyOn(element, 'scrollHeight', 'get').mockReturnValue(200);
|
|
133
134
|
|
|
134
135
|
await nextTick();
|
|
135
136
|
|
|
136
|
-
expect(
|
|
137
|
+
expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
|
|
138
|
+
window.HTMLElement.prototype.scrollIntoView = undefined;
|
|
137
139
|
});
|
|
138
140
|
});
|
|
139
141
|
|
|
@@ -292,9 +292,7 @@ export default {
|
|
|
292
292
|
async scrollToBottom() {
|
|
293
293
|
await this.$nextTick();
|
|
294
294
|
|
|
295
|
-
|
|
296
|
-
this.$refs.drawer.scrollTop = this.$refs.drawer.scrollHeight;
|
|
297
|
-
}
|
|
295
|
+
this.$refs.anchor?.scrollIntoView?.();
|
|
298
296
|
},
|
|
299
297
|
onTrackFeedback(event) {
|
|
300
298
|
/**
|
|
@@ -422,7 +420,7 @@ export default {
|
|
|
422
420
|
></gl-alert>
|
|
423
421
|
|
|
424
422
|
<section
|
|
425
|
-
class="gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
|
|
423
|
+
class="duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-flex-grow-1 gl-border-b-0 gl-bg-gray-10"
|
|
426
424
|
>
|
|
427
425
|
<transition-group
|
|
428
426
|
tag="div"
|
|
@@ -462,6 +460,7 @@ export default {
|
|
|
462
460
|
<transition name="loader">
|
|
463
461
|
<gl-duo-chat-loader v-if="isLoading" :tool-name="toolName" class="gl-px-0!" />
|
|
464
462
|
</transition>
|
|
463
|
+
<div ref="anchor" class="scroll-anchor"></div>
|
|
465
464
|
</section>
|
|
466
465
|
</div>
|
|
467
466
|
<footer
|