@gitlab/ui 66.32.0 → 66.33.0

package/dist/index.js

@@ -88,6 +88,7 @@ export { default as GlCarousel } from './components/base/carousel/carousel';
 export { default as GlCarouselSlide } from './components/base/carousel/carousel_slide';
 export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge';
 export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback';
+export { default as GlDuoChat } from './components/experimental/duo/chat/duo_chat';
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number';
 export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap';
 export { default as GlIntersperse } from './components/utilities/intersperse/intersperse';

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Oct 2023 11:22:12 GMT
+ * Generated on Tue, 17 Oct 2023 12:41:31 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,9 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Oct 2023 11:22:12 GMT
+ * Generated on Tue, 17 Oct 2023 12:41:31 GMT
  */
 
-:root {
+:root.gl-dark {
   --red-950: #fff4f3;
   --red-900: #fcf1ef;
   --red-800: #fdd4cd;

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Oct 2023 11:22:12 GMT
+ * Generated on Tue, 17 Oct 2023 12:41:31 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Oct 2023 11:22:12 GMT
+ * Generated on Tue, 17 Oct 2023 12:41:31 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Oct 2023 11:22:12 GMT
+// Generated on Tue, 17 Oct 2023 12:41:31 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Oct 2023 11:22:12 GMT
+// Generated on Tue, 17 Oct 2023 12:41:31 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.32.0",
+  "version": "66.33.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,9 +91,9 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
-    "@gitlab/eslint-plugin": "19.0.0",
-    "@gitlab/fonts": "^1.2.0",
-    "@gitlab/stylelint-config": "5.0.0",
+    "@gitlab/eslint-plugin": "19.2.0",
+    "@gitlab/fonts": "^1.3.0",
+    "@gitlab/stylelint-config": "5.0.1",
     "@gitlab/svgs": "3.66.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.3.0",
+    "cypress": "13.3.1",
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -28,6 +28,16 @@ $clear-button-size: 24px;
     }
   }
 
+  // top container radius minus its border size to avoid the small gap between the focus ring and container
+  $input-focus-ring-border-radius: calc($gl-border-radius-large - $gl-border-size-1);
+
+  &.gl-listbox-topmost {
+    .gl-listbox-search-input {
+      border-top-left-radius: $input-focus-ring-border-radius;
+      border-top-right-radius: $input-focus-ring-border-radius;
+    }
+  }
+
   .gl-listbox-search-icon {
     @include gl-absolute;
     top: calc(50% - #{$search-icon-size} / 2);

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -809,6 +809,7 @@ export default {
         :aria-owns="listboxId"
         data-testid="listbox-search-input"
         :placeholder="searchPlaceholder"
+        :class="{ 'gl-listbox-topmost': !headerText }"
         @input="search"
         @keydown.enter.prevent
         @keydown="onKeydown"

package/src/components/experimental/duo/chat/constants.js

@@ -1,3 +1,5 @@
+export const CHAT_RESET_MESSAGE = '/reset';
+
 export const LOADING_TRANSITION_DURATION = 7500;
 
 export const DOCUMENTATION_SOURCE_TYPES = {

package/src/components/experimental/duo/chat/duo_chat.md

@@ -0,0 +1,143 @@
+The component represents the complete Duo Chat feature.
+
+The component provides a configurable chat UI interface. The primary use is communication with
+GitLab Duo, however, the component is BE-agnostic and can accept information from any source.
+
+## Usage
+
+To use the component in its simplest form, import it and add it to the `template` part of your
+consumer component.
+
+```html
+<gl-duo-chat
+  :title="title"
+  :messages="messages"
+  :error="error"
+  :is-loading="isLoading"
+  :is-chat-available="isChatAvailable"
+  :predefined-prompts="predefinedPrompts"
+  :experiment-help-page-url="experimentHelpPageUrl"
+  :tool-name="toolName"
+  @chat-hidden="onChatHidden"
+  @send-chat-prompt="onSendChatPrompt"
+  @track-feedback="onTrackFeedback"
+/>
+```
+
+## Integration
+
+To demonstrate how to connect this component to a backend implementation, let's consider its use
+for GitLab Duo. First, some general notes on the best practices and expectations when using this
+component.
+
+### Expected dependency injection
+
+To be universal, the component delegates some of its responsibilities to the consumer component.
+
+The component expects two function props:
+
+- `renderMarkdown`
+- `renderGFM`
+
+#### `renderMarkdown`
+
+This function prop converts plain Markdown text into HTML markup. To have a better understanding
+of what is expected from this function, take a look at
+[the existing GitLab example](https://gitlab.com/gitlab-org/gitlab/-/blob/774ecc1f2b15a581e8eab6441de33585c9691c82/app/assets/javascripts/notes/utils.js#L22-24).
+
+#### `renderGFM`
+
+This function prop extends the standard Markdown rendering with support for the
+[GitLab Flavored Markdown (GLFM)](https://docs.gitlab.com/ee/user/markdown.html). To
+have a better understanding of what is expected from this function, take a look at
+[the existing GitLab example](https://gitlab.com/gitlab-org/gitlab/-/blob/774ecc1f2b15a581e8eab6441de33585c9691c82/app/assets/javascripts/behaviors/markdown/render_gfm.js#L18-40).
+
+The reason to have two different functions for rendering Markdown is performance. `renderGFM`
+operates on a DOM node and might come with many additional mutations for the node's content.
+Such behavior suits a one-time update. However, Duo Chat also supports streaming of the AI
+responses (check the [Interactive story for this component](?path=/story/experimental-duo-chat-duo-chat--interactive))
+and, in this case, when the message is constantly updating, we rely on a more lightweight
+`renderMarkdown` to render the updated message faster.
+
+### Don't use reactivity where unnecessary
+
+The `GlDuoChat` component exposes many properties, as seen below. But not all of those should
+be necessarily reactive in the consumer component. The properties that might be static:
+
+- `title`. The title is shown in the head of the component.
+- `isChatAvailable`. The flag indicates whether the communication interface should allow follow-up
+  questions. Usually, this decision stays the same during the component's lifecycle.
+- `predefinedPrompts`. The `Array` of strings that represents the possible questions to ask when
+  there are no messages in the chat.
+- `experimentHelpPageUrl`. The link to an external page explaining the meaning of an "experiment".
+  The prop is passed down to the [`GlExperimentBadge` component](?path=/docs/experimental-experiment-badge--docs).
+
+### Set up communication with consumer
+
+```javascript
+import { GlDuoChat } from '@gitlab/ui';
+
+export default {
+  ...
+  data() {
+    return {
+      messages: [],
+      error: null,
+      isLoading: false,
+      toolName: '',
+    }
+  },
+  provide: {
+    renderMarkdown: (content) => {
+      // implementation of the `renderMarkdown` functionality
+    },
+    renderGFM: (el) => {
+      // implementation of the `renderGFM` functionality
+    },
+  },
+  beforeCreate() {
+    // Here, we set up our non-reactive properties if we must change the default values
+    this.title = 'Foo Bar';
+    this.isChatAvailable = true; // this is just an example. `true` is the default value
+    this.predefinedPrompts = ['How to …?', 'Where do I …?'];
+    this.experimentHelpPageUrl = 'https://dev.null';
+  }
+  methods: {
+    onChatHidden() {
+      ...
+    },
+    onSendChatPrompt(prompt = '') {
+      this.isLoading = true;
+      this.messages.push(constructUserMessage(prompt));
+      ...
+    },
+    onTrackFeedback(feedbackObj = {}) {
+      ...
+    },
+    onAiResponse(data) {
+      this.messages = data
+      …
+      this.isLoading = false;
+    },
+    onAiResponseError(error) {
+      this.error = error;
+      this.isLoading = false;
+    },
+    onToolNameChange(toolMessage) {
+      this.toolName = toolMessage.content;
+    }
+  }
+}
+```
+
+With this template in place, consumer is left with the following things to implement:
+
+- Fetch `messages`. For Duo Chat, we rely on GraphQL query to get the cached
+  messages and subscription to monitor new messages when:
+
+  - streaming response
+  - listening to chat messages in other tabs/environments
+  - listen to updates from different tools to update `toolName`
+
+- Send the new user's prompt. For Duo Chat, we rely on GraphQL mutation for this purpose.
+- Send user feedback to the telemetry of your choice when `track-feedback` event arrives.

package/src/components/experimental/duo/chat/duo_chat.scss

@@ -0,0 +1,50 @@
+.duo-chat {
+  z-index: 999;
+
+  .message-enter-active,
+  .message-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .message-enter,
+  .message-leave-to {
+    @include gl-opacity-0;
+    transform: translateY(10px);
+  }
+
+  .loader-enter-active,
+  .loader-leave-active {
+    transition: opacity 0.5s ease;
+  }
+
+  .loader-enter,
+  .loader-leave-to {
+    @include gl-opacity-0;
+  }
+
+  .loader-leave-active {
+    @include gl-absolute;
+  }
+
+  .gl-drawer-body-scrim-on-footer {
+    &::before {
+      background: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
+    }
+  }
+}
+
+.duo-chat-input {
+  @include gl-display-flex;
+  @include gl-flex-direction-column;
+
+  &:focus-within {
+    @include gl-focus($color: $gray-900);
+  }
+
+  .gl-form-textarea.form-control {
+    flex: 1;
+    resize: none;
+    max-height: 240px;
+    width: calc(100% - 40px);
+  }
+}