@gitlab/ui 104.2.0 → 105.0.0

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

@@ -1,202 +0,0 @@
-<!--
-This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
-
-Please use the corresponding component in Duo-UI going forward.
-All future development and maintenance for Duo components should take place in Duo-UI.
-
-For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
--->
-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"
-  :badge-help-page-url="badgeHelpPageUrl"
-  :canceled-request-ids="cancelledRequestIds"
-  :tool-name="toolName"
-  :empty-state-title="emptyStateTitle"
-  :empty-state-description="emptyStateDescription"
-  :chat-prompt-placeholder="chatPromptPlaceholder"
-  :slash-commands="slashCommands"
-  @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.
-- `badgeHelpPageUrl`. 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).
-- `emptyStateTitle`. Title of the empty state component. Visible when there are no messages.
-- `emptyStateDescription`. Description text of the empty state component. Visible when there are no messages.
-- `chatPromptPlaceholder`. Placeholder text for the chat prompt input.
-
-### Set up communication with consumer
-
-```javascript
-import { GlDuoChat } from '@gitlab/ui';
-
-export default {
-  ...
-  data() {
-    return {
-      messages: [],
-      error: null,
-      isLoading: false,
-      toolName: '',
-      cancelledRequestIds: []
-    }
-  },
-  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.badgeHelpPageUrl = 'https://dev.null';
-    this.emptyStateTitle = 'Ask anything';
-    this.emptyStateDescription = 'You will see the answers below';
-    this.chatPromptPlaceholder = 'Type your question here';
-  }
-  methods: {
-    onChatCancel() {
-       // pushing last requestId of messages to canceled Request Ids
-      this.cancelledRequestIds.push(this.messages[this.messages.length - 1].requestId);
-      this.isLoading = false;
-    },
-    onChatHidden() {
-      ...
-    },
-    onSendChatPrompt(prompt = '') {
-      this.isLoading = true;
-      this.messages.push(constructUserMessage(prompt));
-      ...
-    },
-    onTrackFeedback(feedbackObj = {}) {
-      ...
-    },
-    onAiResponse(data) {
-      // check if requestId was not cancelled
-      if (requestId && !this.cancelledRequestIds.includes(data.requestId)) {
-        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.
-
-## Slash commands
-
-One of the props accepted by the component is the `slashCommands`. This is an `Array` of
-the commands, shown to user when they start typing the prompt with a slash (`/`)
-character.
-
-```javascript
-<script>
-  const slashCommands = [
-    {
-      name: '/mycommand', // This is the exact name of my command as it will be submitted
-      shouldSubmit: true, // If the command should be submitted right away without free text
-      description: 'The description of my super-duper command.',
-    },
-    ...
-  ];
-  export default {
-    ...
-    options: {
-      slashCommands
-    }
-  }
-<script>
-<template>
-  <gl-duo-chat
-    ...
-    :slash-commands="slashCommands"
-  />
-</template>
-```

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

@@ -1,413 +0,0 @@
-/**
- * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
- *
- * Please use the corresponding component in Duo-UI going forward.
- * All future development and maintenance for Duo components should take place in Duo-UI.
- *
- * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
- */
-
-@import 'variables';
-
-.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-w-full;
-  @apply gl-overflow-y-auto;
-  @apply gl-shadow-lg;
-  @apply gl-text-base;
-  @apply gl-leading-normal;
-  @apply gl-flex;
-  @apply gl-flex-col;
-}
-
-.duo-chat-drawer-header {
-  @apply gl-border-b;
-}
-
-.duo-chat-drawer-header-sticky {
-  top: 0;
-  position: sticky;
-  @apply gl-border-b;
-}
-
-.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;
-  // prevent scroll behind the chat
-  overscroll-behavior: contain;
-}
-
-.duo-chat-drawer-footer {
-  @apply gl-border-t;
-  @apply gl-p-5;
-}
-
-.duo-chat-drawer-footer-sticky {
-  @apply gl-bg-white;
-  bottom: 0;
-  position: sticky;
-}
-
-.duo-chat-drawer-body-scrim-on-footer {
-  &::before {
-    background: $duo-chat-scrim-gradient;
-    top: 0;
-    @apply -gl-translate-y-full;
-    content: '';
-    left: 0;
-    position: absolute;
-    @apply gl-pointer-events-none;
-    @apply gl-w-full;
-    @apply gl-h-5;
-  }
-}
-
-.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;
-  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: var(--gl-control-border-color-focus));
-  }
-
-  .gl-form-textarea.form-control {
-    flex: 1;
-    resize: none;
-    max-height: 240px;
-    padding-right: 40px;
-    border-radius: px-to-rem(20px);
-  }
-
-  &::after {
-    content: attr(data-value) ' ';
-    @apply gl-invisible;
-    @apply gl-p-4;
-    @apply gl-font-regular;
-    padding-right: 40px;
-    word-break: break-word;
-  }
-}
-
-.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;
-    }
-  }
-}