Skip to content
Snippets Groups Projects
Commit ef8ee1c1 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray
Browse files

Make small updates to GitLab chat UI

- No border bottom radius depending on user
- Increase spacing between content and sources
- Update source wording

Changelog: changed
parent 165bcb3a
No related branches found
No related tags found
1 merge request!121193Make small updates to GitLab chat UI
<script>
import { GlLink, GlIcon } from '@gitlab/ui';
import { __, s__ } from '~/locale';
import { __, s__, n__ } from '~/locale';
import { renderMarkdown } from '~/notes/utils';
import SafeHtml from '~/vue_shared/directives/safe_html';
import { MESSAGE_TYPES, SOURCE_TYPES, TANUKI_BOT_FEEDBACK_ISSUE_URL } from '../constants';
......@@ -8,7 +8,6 @@ import { MESSAGE_TYPES, SOURCE_TYPES, TANUKI_BOT_FEEDBACK_ISSUE_URL } from '../c
export default {
name: 'TanukiBotChatMessage',
i18n: {
sources: s__('TanukiBot|Sources'),
giveFeedback: s__('TanukiBot|Give feedback'),
source: __('Source'),
},
......@@ -35,6 +34,9 @@ export default {
hasSources() {
return this.message.sources?.length > 0;
},
sourceLabel() {
return n__('TanukiBot|Source', 'TanukiBot|Sources', this.message.sources?.length);
},
},
mounted() {
this.$refs.message.scrollIntoView({ behavior: 'smooth' });
......@@ -78,8 +80,8 @@ export default {
data-testid="tanuki-bot-chat-message"
class="gl-py-3 gl-px-4 gl-mb-6 gl-rounded-lg"
:class="{
'gl-ml-auto gl-bg-blue-100 gl-text-blue-900': isUserMessage,
'tanuki-bot-message gl-text-gray-900': isTanukiMessage,
'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': isUserMessage,
'tanuki-bot-message gl-text-gray-900 gl-rounded-bottom-left-none': isTanukiMessage,
}"
>
<div
......@@ -88,13 +90,13 @@ export default {
class="tanuki-bot-chat-message-markdown"
></div>
<p v-if="isUserMessage" class="gl-mb-0">{{ message.content }}</p>
<div v-if="isTanukiMessage" class="gl-display-flex gl-align-items-flex-end gl-mt-3">
<div v-if="isTanukiMessage" class="gl-display-flex gl-align-items-flex-end gl-mt-4">
<div
v-if="hasSources"
class="gl-mr-3 gl-text-gray-600"
data-testid="tanuki-bot-chat-message-sources"
>
<span>{{ $options.i18n.sources }}</span>
<span>{{ sourceLabel }}</span>
<ul class="gl-pl-5 gl-my-0">
<li v-for="(source, index) in message.sources" :key="index">
<gl-icon v-if="source.source_type" :name="getSourceIcon(source.source_type)" />
......
......@@ -39,7 +39,12 @@ describe('TanukiBotChatMessage', () => {
it('uses the correct classList', () => {
expect(findTanukiBotChatMessage().classes()).toEqual(
expect.arrayContaining(['gl-ml-auto', 'gl-bg-blue-100', 'gl-text-blue-900']),
expect.arrayContaining([
'gl-ml-auto',
'gl-bg-blue-100',
'gl-text-blue-900',
'gl-rounded-bottom-right-none',
]),
);
});
......@@ -64,7 +69,11 @@ describe('TanukiBotChatMessage', () => {
it('uses the correct classList', () => {
expect(findTanukiBotChatMessage().classes()).toEqual(
expect.arrayContaining(['tanuki-bot-message', 'gl-text-gray-900']),
expect.arrayContaining([
'tanuki-bot-message',
'gl-text-gray-900',
'gl-rounded-bottom-left-none',
]),
);
});
......
......@@ -44447,8 +44447,10 @@ msgstr ""
msgid "TanukiBot|Give feedback"
msgstr ""
 
msgid "TanukiBot|Sources"
msgstr ""
msgid "TanukiBot|Source"
msgid_plural "TanukiBot|Sources"
msgstr[0] ""
msgstr[1] ""
 
msgid "TanukiBot|There was an error communicating with GitLab Chat. Please try again later."
msgstr ""
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment