@gitlab/duo-ui 0.3.0 → 1.0.0

package/src/components/chat/components/duo_chat_context/utils.js

@@ -1,4 +1,4 @@
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../utils/i18n';
 import {
   CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_ISSUE,
@@ -52,6 +52,10 @@ export function formatMergeRequestId(iid) {
   return `!${iid}`;
 }
 
+export function getContextItemSource(contextItem) {
+  return contextItem.metadata.repositoryName || contextItem.metadata.project || null;
+}
+
 function getGitItemIcon(contextItem) {
   const iconMap = {
     [CONTEXT_ITEM_LOCAL_GIT_COMMIT]: 'commit',
@@ -65,6 +69,10 @@ function getGitItemIcon(contextItem) {
  * Gets the icon name for a given contextItem.
  */
 export function getContextItemIcon(contextItem, category = { icon: null }) {
+  if (contextItem.metadata.icon) {
+    return contextItem.metadata.icon;
+  }
+
   if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
     const gitIcon = getGitItemIcon(contextItem);
     if (gitIcon) return gitIcon;
@@ -85,6 +93,10 @@ export function getContextItemIcon(contextItem, category = { icon: null }) {
 }
 
 export function getContextItemTypeLabel(contextItem) {
+  if (contextItem.metadata.subTypeLabel) {
+    return contextItem.metadata.subTypeLabel;
+  }
+
   if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
     switch (contextItem.metadata.gitType) {
       case CONTEXT_ITEM_LOCAL_GIT_DIFF:
@@ -117,6 +129,25 @@ export function formatGitItemSecondaryText(contextItem) {
   return `${repositoryName}${separator}${commitId || ''}`;
 }
 
+export function getContextItemSecondaryText(contextItem) {
+  if (contextItem.metadata.secondaryText) {
+    return contextItem.metadata.secondaryText;
+  }
+
+  switch (contextItem.category) {
+    case CONTEXT_ITEM_CATEGORY_FILE:
+      return contextItem.metadata.relativePath;
+    case CONTEXT_ITEM_CATEGORY_ISSUE:
+      return formatIssueId(contextItem.metadata.iid);
+    case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+      return formatMergeRequestId(contextItem.metadata.iid);
+    case CONTEXT_ITEM_CATEGORY_LOCAL_GIT:
+      return formatGitItemSecondaryText(contextItem);
+    default:
+      return '';
+  }
+}
+
 /**
  * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
  * @param {number} currentIndex - The starting index.

package/src/components/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -1,5 +1,5 @@
 <script>
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../utils/i18n';
 import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
 
 const i18n = {

package/src/components/chat/components/duo_chat_loader/duo_chat_loader.vue

@@ -1,6 +1,6 @@
 <script>
-import { translate } from '@gitlab/ui/dist/utils/i18n';
 import { GlSprintf } from '@gitlab/ui';
+import { translate } from '../../../../utils/i18n';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 
 export const i18n = {

package/src/components/chat/duo_chat.scss

@@ -40,7 +40,9 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   @apply gl-transition-all;
   position: fixed;
   @apply gl-h-full;
+  @apply gl-w-full;
   @apply gl-overflow-y-auto;
+  @apply gl-shadow-lg;
   @apply gl-text-base;
   @apply gl-leading-normal;
   @apply gl-flex;
@@ -48,13 +50,13 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-drawer-header {
-  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
+  @apply gl-border-b;
 }
 
 .duo-chat-drawer-header-sticky {
   top: 0;
   position: sticky;
-  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
+  @apply gl-border-b;
 }
 
 .duo-chat-drawer-body {
@@ -63,14 +65,17 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   // above the drawer when hovering interactive elements
   // see https://gitlab.com/gitlab-org/gitlab/-/issues/366558
   background-color: inherit;
+  // prevent scroll behind the chat
+  overscroll-behavior: contain;
 }
 
 .duo-chat-drawer-footer {
-  @apply gl-border-t-solid gl-border-t-gray-100 gl-border-t-1;
+  @apply gl-border-t;
   @apply gl-p-5;
 }
 
 .duo-chat-drawer-footer-sticky {
+  @apply gl-bg-white;
   bottom: 0;
   position: sticky;
 }
@@ -78,14 +83,14 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 .duo-chat-drawer-body-scrim-on-footer {
   &::before {
     background: $duo-chat-scrim-gradient;
-    top: -$gl-border-size-1;
+    top: 0;
     @apply -gl-translate-y-full;
     content: '';
     left: 0;
     position: absolute;
     @apply gl-pointer-events-none;
     @apply gl-w-full;
-    @apply gl-h-7;
+    @apply gl-h-5;
   }
 }
 
@@ -125,9 +130,12 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   @apply gl-flex-col;
   max-height: 240px;
   overflow: hidden;
+  background: var(--gl-control-background-color-default);
+  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
+  border-radius: px-to-rem(20px);
 
   &:focus-within {
-    @include gl-focus($color: $gray-900);
+    @include gl-focus($color: var(--gl-control-border-color-focus));
   }
 
   .gl-form-textarea.form-control {
@@ -135,13 +143,16 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
     resize: none;
     max-height: 240px;
     padding-right: 40px;
+    border-radius: px-to-rem(20px);
   }
 
   &::after {
     content: attr(data-value) ' ';
     @apply gl-invisible;
-    @apply gl-whitespace-pre-wrap;
-    @apply gl-py-4;
+    @apply gl-p-4;
+    @apply gl-font-regular;
+    padding-right: 40px;
+    word-break: break-word;
   }
 }
 

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...',