@gitlab/duo-ui 0.4.0 → 2.0.0

package/src/components/chat/duo_chat.vue

@@ -15,7 +15,7 @@ import {
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';
 
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../utils/i18n';
 import {
   badgeTypes,
   badgeTypeValidator,
@@ -46,7 +46,7 @@ export const i18n = {
   ),
   CHAT_PROMPT_PLACEHOLDER_WITH_COMMANDS: translate(
     'GlDuoChat.chatPromptPlaceholderWithCommands',
-    'Type "/" for slash commands'
+    'Type /help to learn more'
   ),
   CHAT_SUBMIT_LABEL: translate('GlDuoChat.chatSubmitLabel', 'Send chat message.'),
   CHAT_CANCEL_LABEL: translate('GlDuoChat.chatCancelLabel', 'Cancel'),
@@ -542,14 +542,14 @@ export default {
   <aside
     v-if="!isHidden"
     id="chat-component"
-    class="markdown-code-block duo-chat-drawer duo-chat gl-border-t gl-border-l gl-bottom-0 gl-max-h-full gl-shadow-none"
+    class="markdown-code-block duo-chat-drawer duo-chat gl-bottom-0 gl-max-h-full"
     role="complementary"
     data-testid="chat-component"
   >
     <header
       v-if="showHeader"
       data-testid="chat-header"
-      class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-z-200 gl-bg-gray-10 !gl-p-0"
+      class="duo-chat-drawer-header duo-chat-drawer-header-sticky gl-z-200 gl-border-0 gl-bg-default !gl-p-0"
     >
       <div class="drawer-title gl-flex gl-items-center gl-justify-start gl-p-5">
         <h3 class="gl-my-0 gl-text-size-h2">{{ title }}</h3>
@@ -590,11 +590,15 @@ export default {
       </gl-alert>
     </header>
 
-    <div class="duo-chat-drawer-body" data-testid="chat-history" @scroll="handleScrollingTrottled">
+    <div
+      class="duo-chat-drawer-body gl-bg-default"
+      data-testid="chat-history"
+      @scroll="handleScrollingTrottled"
+    >
       <transition-group
         tag="section"
         name="message"
-        class="duo-chat-history gl-flex gl-flex-col gl-justify-end gl-bg-gray-10"
+        class="duo-chat-history gl-flex gl-flex-col gl-justify-end"
         :class="[
           {
             'gl-h-full': !hasMessages,
@@ -646,7 +650,7 @@ export default {
     <footer
       v-if="isChatAvailable"
       data-testid="chat-footer"
-      class="duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-t gl-bg-gray-10 gl-p-5"
+      class="duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-0 gl-bg-default gl-p-5"
       :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
     >
       <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">
@@ -665,7 +669,7 @@ export default {
 
         <gl-form-input-group>
           <div
-            class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400"
+            class="duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-align-top"
             :data-value="prompt"
           >
             <gl-card
@@ -683,7 +687,7 @@ export default {
               >
                 <span class="gl-flex gl-justify-between">
                   <span class="gl-block">{{ command.name }}</span>
-                  <small class="gl-pl-3 gl-text-right gl-italic gl-text-gray-500">{{
+                  <small class="gl-pl-3 gl-text-right gl-italic gl-text-subtle">{{
                     command.description
                   }}</small>
                 </span>
@@ -709,7 +713,7 @@ export default {
               icon="paper-airplane"
               category="primary"
               variant="confirm"
-              class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base"
+              class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
               type="submit"
               data-testid="chat-prompt-submit-button"
               :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
@@ -719,7 +723,7 @@ export default {
               icon="stop"
               category="primary"
               variant="default"
-              class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base"
+              class="!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-full"
               data-testid="chat-prompt-cancel-button"
               :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
               @click="cancelPrompt"

package/src/components/workflow/components/duo_workflow_panel/duo_workflow_panel.vue

@@ -1,6 +1,6 @@
 <script>
 import { GlIcon, GlCollapse, GlButton, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../utils/i18n';
 
 export default {
   name: 'GlDuoWorkflowPanel',

package/src/components/workflow/components/duo_workflow_prompt/duo_workflow_prompt.vue

@@ -1,6 +1,6 @@
 <script>
 import { GlButton, GlFormGroup, GlFormTextarea, GlFormInput } from '@gitlab/ui';
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../utils/i18n';
 import GlDuoWorkflowPanel from '../duo_workflow_panel/duo_workflow_panel.vue';
 
 export default {

package/src/utils/i18n.js

@@ -0,0 +1,62 @@
+import escape from 'lodash/escape';
+import { i18n } from '../config';
+
+const defaultPluralHandler = (n, singleValue, pluralValue) => {
+  const value = n === 1 ? singleValue : pluralValue;
+
+  return value.replace(/%d/g, n);
+};
+
+/**
+ * Mark a label as translatable.
+ *
+ * @param {string} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
+ * @param {string} defaultValue A fallback value to be relied on if the consumer doesn't have translation capabilities.
+ * @returns {string} The translated label.
+ */
+export const translate = (key, defaultValue) => i18n[key] ?? defaultValue;
+
+/**
+ * Marks a label as translatable and pluralized.
+ *
+ * @param {*} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
+ * @param {*} singularValue The singular value to be relied on if the consumer doesn't have translation capabilities.
+ * @param {*} pluralValue The plural value to be relied on if the consumer doesn't have translation capabilities.
+ * @returns {function} A function that takes a number and returns the pluralized translated label.
+ */
+export const translatePlural = (key, singularValue, pluralValue) => {
+  if (i18n[key]) {
+    return i18n[key];
+  }
+  return (x) => defaultPluralHandler(x, singularValue, pluralValue);
+};
+
+/**
+ * Very limited implementation of sprintf supporting only named parameters.
+ * Copied from the GitLab repo: https://gitlab.com/gitlab-org/gitlab/-/blob/0dff8b02accb3dccbf6cd31236834c37013aad59/app/assets/javascripts/locale/sprintf.js.
+ * @param {string} input - (translated) text with parameters (e.g. '%{num_users} users use us')
+ * @param {Object.<string, string|number>} [parameters] - object mapping parameter names to values (e.g. { num_users: 5 })
+ * @param {boolean} [escapeParameters=true] - whether parameter values should be escaped (see https://lodash.com/docs/4.17.15#escape)
+ * @returns {string} the text with parameters replaces (e.g. '5 users use us')
+ * @see https://ruby-doc.org/core-2.3.3/Kernel.html#method-i-sprintf
+ * @see https://gitlab.com/gitlab-org/gitlab-foss/issues/37992
+ */
+export function sprintf(input, parameters, escapeParameters = true) {
+  let output = input;
+
+  output = output.replace(/%+/g, '%');
+
+  if (parameters) {
+    const mappedParameters = new Map(Object.entries(parameters));
+
+    mappedParameters.forEach((key, parameterName) => {
+      const parameterValue = mappedParameters.get(parameterName);
+      const escapedParameterValue = escapeParameters ? escape(parameterValue) : parameterValue;
+      // Pass the param value as a function to ignore special replacement patterns like $` and $'.
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#syntax
+      output = output.replace(new RegExp(`%{${parameterName}}`, 'g'), () => escapedParameterValue);
+    });
+  }
+
+  return output;
+}

package/translations.js

@@ -18,8 +18,9 @@ export default {
   'GlDuoChat.chatEmptyStateSecondaryDesc': 'Responses may be inaccurate. Verify before use.',
   'GlDuoChat.chatEmptyStateTitle': 'Ask a question',
   'GlDuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
-  'GlDuoChat.chatPromptPlaceholderWithCommands': 'Type "/" for slash commands',
+  'GlDuoChat.chatPromptPlaceholderWithCommands': 'Type /help to learn more',
   'GlDuoChat.chatSubmitLabel': 'Send chat message.',
+  'GlDuoChatContextItemDetailsModal.contentErrorMessage': 'Item content could not be displayed.',
   'GlDuoChatContextItemDetailsModal.title': 'Preview',
   'GlDuoChatContextItemMenu.emptyStateMessage': 'No results found',
   'GlDuoChatContextItemMenu.loadingMessage': 'Loading...',