feat(i18n): Setup translation for Duo Chat component and all sub-components

Resolves the issue gitlab-ui#2327

src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.md

@@ -6,3 +6,13 @@ mark the beginning of the conversation.
 ```html
 <gl-duo-chat-conversation :messages="messages" :show-delimeter="showDelimiter" />
 ```
+
+Translations for newChatLabel can be set via the props as documented or via translation configuration:
+
+```js
+setConfigs({
+  translations: {
+    'GlDuoWorkflowPrompt.newChat': __('New chat'),
+  },
+});
+```

src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.vue

 <script>
 import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
+import { translate } from '../../../../../../utils/i18n';
 
 const i18n = {
-  CONVERSATION_NEW_CHAT: 'New chat',
+  CONVERSATION_NEW_CHAT: translate('GlDuoChatConversation.newChat', 'New chat'),
 };
 
 const isMessage = (item) => Boolean(item) && item?.role;

src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.vue

 <script>
+import { translate } from '../../../../../../utils/i18n';
 import GlSprintf from '../../../../../utilities/sprintf/sprintf.vue';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 
 export const i18n = {
-  LOADER_LOADING_MESSAGE: '%{tool} is %{transition} an answer',
-  LOADER_LOADING_TRANSITIONS: ['finding', 'working on', 'generating', 'producing'],
-  GITLAB_DUO: 'GitLab Duo',
+  LOADER_LOADING_MESSAGE: translate(
+    'GlDuoChatLoader.loaderLoadingMessage',
+    '%{tool} is %{transition} an answer'
+  ),
+  LOADER_LOADING_TRANSITIONS: [
+    translate('GlDuoChatLoader.loaderLoadingTransitionsFinding', 'finding'),
+    translate('GlDuoChatLoader.loaderLoadingTransitionsWorkingOn', 'working on'),
+    translate('GlDuoChatLoader.loaderLoadingTransitionsGenerating', 'generating'),
+    translate('GlDuoChatLoader.loaderLoadingTransitionsProducing', 'producing'),
+  ],
+  GITLAB_DUO: translate('GlDuoChatLoader.gitlabDuo', 'GitLab Duo'),
 };
 
 export default {

src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -7,8 +7,8 @@ import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import GlFormGroup from '../../../../../base/form/form_group/form_group.vue';
 import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
-import { sprintf, translatePlural } from '../../../../../../utils/i18n';
 import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '../../constants';
+import { sprintf, translate, translatePlural } from '../../../../../../utils/i18n';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 // eslint-disable-next-line no-restricted-imports
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
@@ -18,14 +18,25 @@ import { concatUntilEmpty } from './utils';
 
 export const i18n = {
   MODAL: {
-    TITLE: 'Give feedback on GitLab Duo Chat',
-    ALERT_TEXT:
-      'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
-    DID_WHAT: 'What were you doing?',
-    INTERACTION: 'The situation in which you interacted with GitLab Duo Chat.',
-    IMPROVE_WHAT: 'How could the response be improved?',
-    BETTER_RESPONSE: 'How the response might better meet your needs.',
-    MESSAGE_ERROR: 'Error sending the message',
+    TITLE: translate('GlDuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
+    ALERT_TEXT: translate(
+      'GlDuoChatMessage.modalAlertText',
+      'GitLab team members cannot view your conversation. Please be as descriptive as possible.'
+    ),
+    DID_WHAT: translate('GlDuoChatMessage.modalDidWhat', 'What were you doing?'),
+    INTERACTION: translate(
+      'GlDuoChatMessage.modalInteraction',
+      'The situation in which you interacted with GitLab Duo Chat.'
+    ),
+    IMPROVE_WHAT: translate(
+      'GlDuoChatMessage.modalImproveWhat',
+      'How could the response be improved?'
+    ),
+    BETTER_RESPONSE: translate(
+      'GlDuoChatMessage.modalBetterResponse',
+      'How the response might better meet your needs.'
+    ),
+    MESSAGE_ERROR: translate('GlDuoChatMessage.modalMessageError', 'Error sending the message'),
   },
 };
 

src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.vue

 <script>
+import { translatePlural } from '../../../../../../utils/i18n';
 import GlIcon from '../../../../../base/icon/icon.vue';
 import GlLink from '../../../../../base/link/link.vue';
 import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 
 export const i18n = {
-  MESSAGE_SOURCE: 'Source',
-  MESSAGE_SOURCES: 'Sources',
+  MESSAGE_SOURCE: (count = 1) =>
+    translatePlural('GlDuoChatMessageSources.messageSources', 'Source', 'Sources')(count),
 };
 
 export default {
@@ -25,7 +26,7 @@ export default {
   },
   computed: {
     sourceLabel() {
-      return this.sources.length > 1 ? i18n.MESSAGE_SOURCES : i18n.MESSAGE_SOURCES;
+      return i18n.MESSAGE_SOURCE(this.sources.length);
     },
   },
   methods: {
@@ -53,7 +54,7 @@ export default {
         }
       }
 
-      return i18n.MESSAGE_SOURCE;
+      return this.sourceLabel;
     },
   },
 };

src/components/experimental/duo/chat/duo_chat.vue

@@ -12,6 +12,7 @@ import GlForm from '../../../base/form/form.vue';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
 import { badgeTypes, badgeTypeValidator } from '../../experiment_badge/constants';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
+import { translate } from '../../../../utils/i18n';
 import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
@@ -25,23 +26,49 @@ import {
 import { INCLUDE_SLASH_COMMAND } from './mock_data';
 
 export const i18n = {
-  CHAT_DEFAULT_TITLE: 'GitLab Duo Chat',
-  CHAT_CLOSE_LABEL: 'Close the Code Explanation',
-  CHAT_LEGAL_GENERATED_BY_AI: 'Responses generated by AI',
-  CHAT_EMPTY_STATE_TITLE: 'Ask a question',
-  CHAT_EMPTY_STATE_DESC: 'GitLab Duo Chat is your AI-powered assistant.',
-  CHAT_EMPTY_STATE_SECONDARY_DESC: 'Responses may be inaccurate. Verify before use.',
-  CHAT_PROMPT_PLACEHOLDER_DEFAULT: 'GitLab Duo Chat',
-  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: 'Type "/" for slash commands',
-  CHAT_SUBMIT_LABEL: 'Send chat message.',
-  CHAT_CANCEL_LABEL: 'Cancel',
-  CHAT_LEGAL_DISCLAIMER:
-    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
+  CHAT_DEFAULT_TITLE: translate('GlDuoChat.chatDefaultTitle', 'GitLab Duo Chat'),
+  CHAT_CLOSE_LABEL: translate('GlDuoChat.chatCloseLabel', 'Close the Code Explanation'),
+  CHAT_LEGAL_GENERATED_BY_AI: translate(
+    'GlDuoChat.chatLegalGeneratedByAI',
+    'Responses generated by AI'
+  ),
+  CHAT_EMPTY_STATE_TITLE: translate('GlDuoChat.chatEmptyStateTitle', 'Ask a question'),
+  CHAT_EMPTY_STATE_DESC: translate(
+    'GlDuoChat.chatEmptyStateDesc',
+    'GitLab Duo Chat is your AI-powered assistant.'
+  ),
+  CHAT_EMPTY_STATE_SECONDARY_DESC: translate(
+    'GlDuoChat.chatEmptyStateSecondaryDesc',
+    'Responses may be inaccurate. Verify before use.'
+  ),
+  CHAT_PROMPT_PLACEHOLDER_DEFAULT: translate(
+    'GlDuoChat.chatPromptPlaceholderDefault',
+    'GitLab Duo Chat'
+  ),
+  CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate(
+    'GlDuoChat.chatPromptPlaceholderWithCommands',
+    'Type "/" for slash commands'
+  ),
+  CHAT_SUBMIT_LABEL: translate('GlDuoChat.chatSubmitLabel', 'Send chat message.'),
+  CHAT_CANCEL_LABEL: translate('GlDuoChat.chatCancelLabel', 'Cancel'),
+  CHAT_LEGAL_DISCLAIMER: translate(
+    'GlDuoChat.chatLegalDisclaimer',
+    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data."
+  ),
   CHAT_DEFAULT_PREDEFINED_PROMPTS: [
-    'How do I change my password in GitLab?',
-    'How do I fork a project?',
-    'How do I clone a repository?',
-    'How do I create a template?',
+    translate(
+      'GlDuoChat.chatDefaultPredefinedPromptsChangePassword',
+      'How do I change my password in GitLab?'
+    ),
+    translate('GlDuoChat.chatDefaultPredefinedPromptsForkProject', 'How do I fork a project?'),
+    translate(
+      'GlDuoChat.chatDefaultPredefinedPromptsCloneRepository',
+      'How do I clone a repository?'
+    ),
+    translate(
+      'GlDuoChat.chatDefaultPredefinedPromptsCreateTemplate',
+      'How do I create a template?'
+    ),
   ],
 };
 

translations.js

@@ -11,12 +11,45 @@ export default {
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlBroadcastMessage.closeButtonTitle': 'Dismiss',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDuoChat.chatCancelLabel': 'Cancel',
+  'GlDuoChat.chatCloseLabel': 'Close the Code Explanation',
+  'GlDuoChat.chatDefaultPredefinedPromptsChangePassword': 'How do I change my password in GitLab?',
+  'GlDuoChat.chatDefaultPredefinedPromptsCloneRepository': 'How do I clone a repository?',
+  'GlDuoChat.chatDefaultPredefinedPromptsCreateTemplate': 'How do I create a template?',
+  'GlDuoChat.chatDefaultPredefinedPromptsForkProject': 'How do I fork a project?',
+  'GlDuoChat.chatDefaultTitle': 'GitLab Duo Chat',
+  'GlDuoChat.chatEmptyStateDesc': 'GitLab Duo Chat is your AI-powered assistant.',
+  'GlDuoChat.chatEmptyStateSecondaryDesc': 'Responses may be inaccurate. Verify before use.',
+  'GlDuoChat.chatEmptyStateTitle': 'Ask a question',
+  'GlDuoChat.chatLegalDisclaimer':
+    "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
+  'GlDuoChat.chatLegalGeneratedByAI': 'Responses generated by AI',
+  'GlDuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
+  'GlDuoChat.chatPromptPlaceholderWithCommands': 'Type "/" for slash commands',
+  'GlDuoChat.chatSubmitLabel': 'Send chat message.',
   'GlDuoChatContextItemMenu.emptyStateMessage': 'No results found',
   'GlDuoChatContextItemMenu.loadingMessage': 'Loading...',
   'GlDuoChatContextItemMenu.searchInputPlaceholder': 'Search %{categoryLabel}...',
   'GlDuoChatContextItemMenu.selectedContextItemsTitle': 'Included references',
+  'GlDuoChatConversation.newChat': 'New chat',
+  'GlDuoChatLoader.gitlabDuo': 'GitLab Duo',
+  'GlDuoChatLoader.loaderLoadingMessage': '%{tool} is %{transition} an answer',
+  'GlDuoChatLoader.loaderLoadingTransitionsFinding': 'finding',
+  'GlDuoChatLoader.loaderLoadingTransitionsGenerating': 'generating',
+  'GlDuoChatLoader.loaderLoadingTransitionsProducing': 'producing',
+  'GlDuoChatLoader.loaderLoadingTransitionsWorkingOn': 'working on',
   'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage': null,
   'GlDuoChatMessage.SelectedContextItemsTitleUserMessage': null,
+  'GlDuoChatMessage.modalAlertText':
+    'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
+  'GlDuoChatMessage.modalBetterResponse': 'How the response might better meet your needs.',
+  'GlDuoChatMessage.modalDidWhat': 'What were you doing?',
+  'GlDuoChatMessage.modalImproveWhat': 'How could the response be improved?',
+  'GlDuoChatMessage.modalInteraction':
+    'The situation in which you interacted with GitLab Duo Chat.',
+  'GlDuoChatMessage.modalMessageError': 'Error sending the message',
+  'GlDuoChatMessage.modalTitle': 'Give feedback on GitLab Duo Chat',
+  'GlDuoChatMessageSources.messageSources': null,
   'GlDuoWorkflowPanel.collapseButtonTitle': 'Collapse',
   'GlDuoWorkflowPanel.expandButtonTitle': 'Expand',
   'GlDuoWorkflowPrompt.cancelButtonText': 'Cancel',