@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/components/chat/duo_chat.scss

@@ -0,0 +1,393 @@
+$duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
+
+.duo-chat {
+  z-index: 999;
+
+  .message-enter-active,
+  .message-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .message-enter,
+  .message-leave-to {
+    @apply gl-opacity-0;
+    transform: translateY(10px);
+  }
+
+  .duo-chat-loader.message-leave,
+  .duo-chat-loader.message-leave-to {
+    transition: none;
+  }
+
+  .duo-chat-drawer-body-scrim-on-footer {
+    &::before {
+      background: $duo-chat-scrim-gradient;
+    }
+  }
+
+  .duo-chat-drawer-body {
+    overflow-y: auto;
+  }
+
+  .duo-chat-drawer-header,
+  .duo-chat-drawer-body > * {
+    @apply gl-p-5;
+  }
+}
+
+.duo-chat-drawer {
+  right: 0;
+  @apply gl-transition-all;
+  position: fixed;
+  @apply gl-h-full;
+  @apply gl-overflow-y-auto;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
+  @apply gl-flex;
+  @apply gl-flex-col;
+}
+
+.duo-chat-drawer-header {
+  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
+}
+
+.duo-chat-drawer-header-sticky {
+  top: 0;
+  position: sticky;
+  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
+}
+
+.duo-chat-drawer-body {
+  @apply gl-grow;
+  // prevent safari bug where box shadow is visible
+  // above the drawer when hovering interactive elements
+  // see https://gitlab.com/gitlab-org/gitlab/-/issues/366558
+  background-color: inherit;
+}
+
+.duo-chat-drawer-footer {
+  @apply gl-border-t-solid gl-border-t-gray-100 gl-border-t-1;
+  @apply gl-p-5;
+}
+
+.duo-chat-drawer-footer-sticky {
+  bottom: 0;
+  position: sticky;
+}
+
+.duo-chat-drawer-body-scrim-on-footer {
+  &::before {
+    background: $duo-chat-scrim-gradient;
+    top: -$gl-border-size-1;
+    @apply -gl-translate-y-full;
+    content: '';
+    left: 0;
+    position: absolute;
+    @apply gl-pointer-events-none;
+    @apply gl-w-full;
+    @apply gl-h-7;
+  }
+}
+
+.duo-chat-history {
+  scroll-behavior: smooth;
+
+  &.force-scroll-bar {
+    min-height: calc(100% + 1rem);
+  }
+
+  /*
+  Browsers a are pretty good at keeping the focus on an element while
+  the parent element grows in size. With this we mark all child elements
+  of the chat history as "non" anchors.
+  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
+  */
+  * {
+    overflow-anchor: none;
+  }
+
+  /*
+  Right at the bottom of the chat history we add a scroll-anchor element.
+  This scroll-anchor element is the only "possible" anchor. The beauty of it:
+  It only will be used as an anchor _if_ it is currently inside the view port.
+  So if the user manually scrolls up while a chunked message is coming in,
+  it won't stick to the bottom while the message still loads.
+  */
+  .scroll-anchor {
+    overflow-anchor: auto;
+    height: 1px;
+    margin-top: -1px; // In order to not add 1px vertically, we add a negative margin
+  }
+}
+
+.duo-chat-input {
+  @apply gl-flex;
+  @apply gl-flex-col;
+  max-height: 240px;
+  overflow: hidden;
+
+  &:focus-within {
+    @include gl-focus($color: $gray-900);
+  }
+
+  .gl-form-textarea.form-control {
+    flex: 1;
+    resize: none;
+    max-height: 240px;
+    padding-right: 40px;
+  }
+
+  &::after {
+    content: attr(data-value) ' ';
+    @apply gl-invisible;
+    @apply gl-whitespace-pre-wrap;
+    @apply gl-py-4;
+  }
+}
+
+.slash-commands {
+  @apply -gl-mt-2;
+
+  .active-command {
+    @apply gl-bg-gray-50;
+    @apply gl-rounded-base;
+  }
+
+  .gl-dropdown-item button.dropdown-item {
+    @apply gl-text-sm;
+    @apply gl-px-3;
+    @apply gl-bg-transparent;
+
+    &:hover {
+      @apply gl-bg-transparent;
+    }
+  }
+}
+// TODO this is techdebt from: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3953#note_1762834219
+// once this file is migrated to Duo-UI we need to remove these styles as a markdown fallback
+// and make sure all host-system provide markdown renderer
+.duo-chat-markdown {
+  @apply gl-text-lg;
+  @apply gl-leading-24;
+  color: $gl-text-color;
+  @apply gl-font-regular;
+  @apply gl-font-normal;
+
+  :first-child {
+    @apply gl-mt-0;
+  }
+
+  h1,
+  .gl-h1 {
+    @apply gl-heading-1;
+    @apply gl-mt-7;
+  }
+
+  h2,
+  .gl-h2 {
+    @apply gl-heading-2;
+    @apply gl-mt-6;
+  }
+
+  h3,
+  .gl-h3 {
+    @apply gl-heading-3;
+    @apply gl-mt-6;
+  }
+
+  h4,
+  .gl-h4 {
+    @apply gl-heading-4;
+    @apply gl-mt-5;
+  }
+
+  h5,
+  .gl-h5 {
+    @apply gl-heading-5;
+    @apply gl-mt-5;
+  }
+
+  h6,
+  .gl-h6 {
+    @apply gl-heading-6;
+    @apply gl-mt-5;
+  }
+
+  p,
+  .gl-paragraph {
+    @apply gl-mt-0;
+    @apply gl-mb-0;
+
+    + p,
+    + .gl-paragraph {
+      @apply gl-mt-5;
+    }
+
+    &.sm {
+      font-size: $gl-font-size-markdown-sm;
+      @apply gl-leading-20;
+    }
+  }
+
+  .sm {
+    font-size: $gl-font-size-markdown-sm;
+    @apply gl-leading-20;
+  }
+
+  .monospace,
+  code {
+    @apply gl-font-monospace;
+  }
+
+  blockquote {
+    @apply gl-text-gray-700;
+    @apply gl-py-3;
+    @apply gl-pl-6;
+    @apply gl-my-3;
+    @apply gl-mx-0;
+    box-shadow: inset $gl-border-size-4 0 0 0 $gray-100;
+  }
+
+  .idiff {
+    @apply gl-rounded-base;
+    @apply gl-inline-flex;
+    @apply gl-px-2;
+  }
+
+  .deletion {
+    @apply gl-bg-red-100;
+  }
+
+  .addition {
+    @apply gl-bg-green-100;
+  }
+
+  code {
+    @apply gl-rounded-base;
+    @apply gl-bg-gray-50;
+    @apply gl-text-gray-950;
+    @apply gl-px-2;
+    @apply gl-py-1;
+  }
+
+  pre {
+    @apply gl-rounded-base;
+    @apply gl-py-3;
+    @apply gl-px-4;
+    box-shadow: inset 0 0 0 $gl-border-size-1 $gray-100;
+    @apply gl-my-7;
+    @apply gl-overflow-auto;
+
+    code {
+      @apply gl-bg-white;
+      @apply gl-rounded-none;
+      @apply gl-text-gray-900;
+      @apply gl-p-0;
+    }
+  }
+
+  .audio-container {
+    @apply gl-inline-flex;
+    @apply gl-flex-col;
+    @apply gl-w-full;
+
+    audio {
+      @apply gl-w-full;
+    }
+
+    a {
+      @apply gl-mt-3;
+
+      &::before {
+        @apply gl-mr-2;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        content: '📎';
+      }
+    }
+  }
+
+  table {
+    @apply gl-my-7;
+
+    th,
+    td {
+      @apply gl-px-3;
+      @apply gl-py-4;
+      box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+      @apply gl-align-top;
+    }
+
+    th {
+      box-shadow:
+        inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+        inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+      @apply gl-font-bold;
+    }
+
+    thead {
+      @apply gl-bg-gray-50;
+    }
+
+    tr:nth-child(even) {
+      @apply gl-bg-gray-10;
+    }
+  }
+}
+
+.duo-chat-compact-markdown {
+  @apply gl-text-base;
+  @apply gl-leading-20;
+
+  h1,
+  .gl-h1 {
+    @apply gl-heading-1-fixed;
+    @apply gl-mt-7;
+  }
+
+  h2,
+  .gl-h2 {
+    @apply gl-heading-2-fixed;
+    @apply gl-mt-6;
+  }
+
+  h3,
+  .gl-h3 {
+    @apply gl-heading-3-fixed;
+    @apply gl-mt-6;
+  }
+
+  h4,
+  .gl-h4 {
+    @apply gl-heading-4-fixed;
+    @apply gl-mt-5;
+  }
+
+  h5,
+  .gl-h5 {
+    @apply gl-heading-5-fixed;
+    @apply gl-mt-5;
+  }
+
+  h6,
+  .gl-h6 {
+    @apply gl-heading-6-fixed;
+    @apply gl-mt-5;
+  }
+
+  .sm {
+    @apply gl-text-sm;
+  }
+
+  .monospace,
+  code {
+    @apply gl-font-monospace;
+  }
+
+  table {
+    th,
+    td {
+      @apply gl-py-3;
+    }
+  }
+}

package/src/components/{experimental/duo/chat → chat}/mock_data.js

@@ -1,4 +1,4 @@
-import { setStoryTimeout } from '../../../../utils/test_utils';
+import { setStoryTimeout } from '@gitlab/ui/dist/utils/test_utils';
 import {
   DOCUMENTATION_SOURCE_TYPES,
   MESSAGE_MODEL_ROLES,
@@ -143,7 +143,7 @@ export const renderMarkdown = (content) => content;
 export const renderGFM = (el) => {
   const codeBlock = el.querySelectorAll('.markdown-code-block');
   codeBlock.forEach((block) => {
-    block?.classList.add('gl-markdown', 'gl-compact-markdown');
+    block?.classList.add('duo-chat-markdown', 'duo-chat-compact-markdown');
   });
 };
 

package/src/config.js

@@ -1,44 +1,11 @@
-import Vue from 'vue';
 import translationKeys from '../translations';
-import { BVConfigPlugin } from './vendor/bootstrap-vue/src/bv-config';
-import { tooltipDelay } from './utils/constants';
-
-const tooltipGlobalConfig = {
-  // Work around for https://github.com/bootstrap-vue/bootstrap-vue/issues/6507
-  boundaryPadding: 5,
-  customClass: 'gl-tooltip',
-  delay: tooltipDelay,
-};
-
-const popoverDelayConfig = {
-  show: 50, // BootstrapVue's default delay on show.
-  hide: 150, // Increased hide delay so that it doesn't disappear to quickly when user attempts to interact with the content.
-};
-
-/**
- * Guard against nonexistent localStorage,
- * or corrupted localStorage
- *
- * localStorage access is not possible in certain environments like
- * - in iframe usage in Chrome if embedded on another domain
- * - tests / node
- */
-try {
-  const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
-
-  if (glTooltipDelay) {
-    tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
-  }
-} catch (e) {
-  // localStorage doesn't exist (or the value is not properly formatted)
-}
 
 export const i18n = translationKeys;
 
 let configured = false;
 
 /**
- * Set GitLab UI configuration.
+ * Set GitLab Duo-UI configuration.
  *
  * @typedef {object} GitLabUIConfiguration
  * @template TValue=string
@@ -47,20 +14,13 @@ let configured = false;
 const setConfigs = ({ translations } = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
-      throw new Error('GitLab UI can only be configured once!');
+      throw new Error('GitLab Duo-UI can only be configured once!');
     }
 
     return;
   }
   configured = true;
 
-  Vue.use(BVConfigPlugin, {
-    BTooltip: tooltipGlobalConfig,
-    BPopover: {
-      delay: popoverDelayConfig,
-    },
-  });
-
   if (typeof translations === 'object') {
     if (process.env.NODE_ENV === 'development') {
       const undefinedTranslationKeys = Object.keys(i18n).reduce((acc, current) => {
@@ -72,7 +32,7 @@ const setConfigs = ({ translations } = {}) => {
       if (undefinedTranslationKeys.length) {
         /* eslint-disable no-console */
         console.warn(
-          '[@gitlab/ui] The following translations have not been given, so will fall back to their default US English strings:'
+          '[@gitlab/duo-ui] The following translations have not been given, so will fall back to their default US English strings:'
         );
         console.table(undefinedTranslationKeys);
         /* eslint-enable no-console */

package/src/index.js

@@ -1,130 +1,3 @@
-// DO NOT REMOVE
-/* auto-inject-styles */
-// The line above serves as a token for rollup-plugin-replace to inject styles in production
-// builds. We do this to avoid having the stylesheet included multiple times in Storybook.
-
-// Components
-// ADD COMPONENT EXPORTS - needed for yarn generate:component. Do not remove
-export { default as GlDuoWorkflowPrompt } from './components/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.vue';
-export { default as GlDuoWorkflowPanel } from './components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue';
-export { default as GlTableLite } from './components/base/table_lite/table_lite.vue';
-export { default as GlDropdownForm } from './components/base/dropdown/dropdown_form.vue';
-export { default as GlKeysetPagination } from './components/base/keyset_pagination/keyset_pagination.vue';
-export { default as GlInputGroupText } from './components/base/form/input_group_text/input_group_text.vue';
-export { default as GlFormCombobox } from './components/base/form/form_combobox/form_combobox.vue';
-export { default as GlTokenSelector } from './components/base/token_selector/token_selector.vue';
-export { default as GlNavItemDropdown } from './components/base/nav/nav_item_dropdown.vue';
-export { default as GlNav } from './components/base/nav/nav.vue';
-export { default as GlNavItem } from './components/base/nav/nav_item.vue';
-export { default as GlFormCheckboxTree } from './components/base/form/form_checkbox_tree/form_checkbox_tree.vue';
-export { default as GlMarkdown } from './components/base/markdown/markdown.vue';
-export { default as GlNavbar } from './components/base/navbar/navbar.vue';
-export { default as GlIntersectionObserver } from './components/utilities/intersection_observer/intersection_observer.vue';
-export { default as GlLink, default as GlDeprecatedLink } from './components/base/link/link.vue';
-export { default as GlIcon } from './components/base/icon/icon.vue';
-export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon.vue';
-export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon.vue';
-export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon.vue';
-export { default as GlAnimatedSidebarIcon } from './components/base/animated_icon/animated_sidebar_icon.vue';
-export { default as GlAnimatedSmileIcon } from './components/base/animated_icon/animated_smile_icon.vue';
-export { default as GlAnimatedSortIcon } from './components/base/animated_icon/animated_sort_icon.vue';
-export { default as GlAnimatedStarIcon } from './components/base/animated_icon/animated_star_icon.vue';
-export { default as GlAnimatedTodoIcon } from './components/base/animated_icon/animated_todo_icon.vue';
-export { default as GlAnimatedUploadIcon } from './components/base/animated_icon/animated_upload_icon.vue';
-export { default as GlLoadingIcon } from './components/base/loading_icon/loading_icon.vue';
-export { default as GlModal } from './components/base/modal/modal.vue';
-export { default as GlPagination } from './components/base/pagination/pagination.vue';
-export { default as GlPaginatedList } from './components/base/paginated_list/paginated_list.vue';
-export { default as GlPopover } from './components/base/popover/popover.vue';
-export { default as GlProgressBar } from './components/base/progress_bar/progress_bar.vue';
-export { default as GlToken } from './components/base/token/token.vue';
-export { default as GlBadge } from './components/base/badge/badge.vue';
-export { default as GlBanner } from './components/base/banner/banner.vue';
-export { default as GlButton } from './components/base/button/button.vue';
-export { default as GlTooltip } from './components/base/tooltip/tooltip.vue';
-export { default as GlToast } from './components/base/toast/toast';
-export { default as GlDashboardSkeleton } from './components/regions/dashboard_skeleton/dashboard_skeleton.vue';
-export { default as GlEmptyState } from './components/regions/empty_state/empty_state.vue';
-export { default as GlForm } from './components/base/form/form.vue';
-export { default as GlFormCharacterCount } from './components/base/form/form_character_count/form_character_count.vue';
-export { default as GlFormDate } from './components/base/form/form_date/form_date.vue';
-export { default as GlFormInput } from './components/base/form/form_input/form_input.vue';
-export { default as GlFormInputGroup } from './components/base/form/form_input_group/form_input_group.vue';
-export { default as GlFormRadio } from './components/base/form/form_radio/form_radio.vue';
-export { default as GlFormRadioGroup } from './components/base/form/form_radio_group/form_radio_group.vue';
-export { default as GlFormSelect } from './components/base/form/form_select/form_select.vue';
-export { default as GlFormTextarea } from './components/base/form/form_textarea/form_textarea.vue';
-export { default as GlFormGroup } from './components/base/form/form_group/form_group.vue';
-export { default as GlFormFields } from './components/base/form/form_fields/form_fields.vue';
-export { default as GlSearchBoxByType } from './components/base/search_box_by_type/search_box_by_type.vue';
-export { default as GlSearchBoxByClick } from './components/base/search_box_by_click/search_box_by_click.vue';
-export { default as GlDropdownItem } from './components/base/dropdown/dropdown_item.vue';
-export { default as GlDropdownSectionHeader } from './components/base/dropdown/dropdown_section_header.vue';
-export { default as GlDropdownDivider } from './components/base/dropdown/dropdown_divider.vue';
-export { default as GlDropdownText } from './components/base/dropdown/dropdown_text.vue';
-export { default as GlDropdown } from './components/base/dropdown/dropdown.vue';
-// new components aiming to replace GlDropdown  - start
-export { default as GlCollapsibleListbox } from './components/base/new_dropdowns/listbox/listbox.vue';
-export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item.vue';
-export { default as GlDisclosureDropdown } from './components/base/new_dropdowns/disclosure/disclosure_dropdown.vue';
-export { default as GlDisclosureDropdownItem } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue';
-export { default as GlDisclosureDropdownGroup } from './components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue';
-// new components aiming to replace GlDropdown  - end
-export { default as GlPath } from './components/base/path/path.vue';
-export { default as GlTable } from './components/base/table/table.vue';
-export { default as GlBreadcrumb } from './components/base/breadcrumb/breadcrumb.vue';
-export { default as GlScrollableTabs } from './components/base/tabs/tabs/scrollable_tabs.vue';
-export { default as GlTabs } from './components/base/tabs/tabs/tabs.vue';
-export { default as GlTab } from './components/base/tabs/tab/tab.vue';
-export { default as GlButtonGroup } from './components/base/button_group/button_group.vue';
-export { default as GlFormCheckbox } from './components/base/form/form_checkbox/form_checkbox.vue';
-export { default as GlFormCheckboxGroup } from './components/base/form/form_checkbox/form_checkbox_group.vue';
-export { default as GlAvatar } from './components/base/avatar/avatar.vue';
-export { default as GlAvatarsInline } from './components/base/avatars_inline/avatars_inline.vue';
-export { default as GlAvatarLabeled } from './components/base/avatar_labeled/avatar_labeled.vue';
-export { default as GlAvatarLink } from './components/base/avatar_link/avatar_link.vue';
-export { default as GlLabel } from './components/base/label/label.vue';
-export { default as GlDatepicker } from './components/base/datepicker/datepicker.vue';
-export { default as GlDaterangePicker } from './components/base/daterange_picker/daterange_picker.vue';
-export { default as GlToggle } from './components/base/toggle/toggle.vue';
-export { default as GlSorting } from './components/base/sorting/sorting.vue';
-export { default as GlInfiniteScroll } from './components/base/infinite_scroll/infinite_scroll.vue';
-export { default as GlAlert } from './components/base/alert/alert.vue';
-export { default as GlSegmentedControl } from './components/base/segmented_control/segmented_control.vue';
-export { default as GlSkeletonLoader } from './components/base/skeleton_loader/skeleton_loader.vue';
-export { default as GlDrawer } from './components/base/drawer/drawer.vue';
-export { default as GlCard } from './components/base/card/card.vue';
-export { default as GlFilteredSearchSuggestion } from './components/base/filtered_search/filtered_search_suggestion.vue';
-export { default as GlFilteredSearchSuggestionList } from './components/base/filtered_search/filtered_search_suggestion_list.vue';
-export { default as GlFilteredSearchTerm } from './components/base/filtered_search/filtered_search_term.vue';
-export { default as GlFilteredSearchToken } from './components/base/filtered_search/filtered_search_token.vue';
-export { default as GlFilteredSearchTokenSegment } from './components/base/filtered_search/filtered_search_token_segment.vue';
-export { default as GlFilteredSearch } from './components/base/filtered_search/filtered_search.vue';
-export { default as GlBroadcastMessage } from './components/base/broadcast_message/broadcast_message.vue';
-export { default as GlCollapse } from './components/base/collapse/collapse.vue';
-export { default as GlAccordion } from './components/base/accordion/accordion.vue';
-export { default as GlAccordionItem } from './components/base/accordion/accordion_item.vue';
-
-// Experimental
-export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
-export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback.vue';
-export { default as GlDuoChat } from './components/experimental/duo/chat/duo_chat.vue';
-export { default as GlDuoChatContextItemMenu } from './components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue';
-
-// Utilities
-export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';
-export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap.vue';
-export { default as GlIntersperse } from './components/utilities/intersperse/intersperse.vue';
-export { default as GlSprintf } from './components/utilities/sprintf/sprintf.vue';
-export { default as GlTruncate } from './components/utilities/truncate/truncate.vue';
-export { default as GlTruncateText } from './components/utilities/truncate_text/truncate_text.vue';
-
-// Directives
-export { GlModalDirective } from './directives/modal';
-export { GlTooltipDirective } from './directives/tooltip';
-export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
-export { GlCollapseToggleDirective } from './directives/collapse_toggle';
-export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';
-export { SafeHtmlDirective as GlSafeHtmlDirective } from './directives/safe_html/safe_html';
-export { OutsideDirective as GlOutsideDirective } from './directives/outside/outside';
-export { HoverLoadDirective as GlHoverLoadDirective } from './directives/hover_load/hover_load';
+export { default as DuoUserFeedback } from './components/user_feedback/user_feedback.vue';
+export { default as DuoChat } from './components/chat/duo_chat.vue';
+export { default as DuoChatContextItemMenu } from './components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue';