@gitlab/duo-ui 0.2.0 → 0.4.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

@@ -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/index.js

@@ -1,3 +1,3 @@
-export { default as DuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback.vue';
-export { default as DuoChat } from './components/experimental/duo/chat/duo_chat.vue';
-export { default as DuoChatContextItemMenu } from './components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue';
+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';

package/src/scss/components.scss

@@ -0,0 +1,6 @@
+@import '@gitlab/ui/src/scss/variables';
+@import '@gitlab/ui/src/scss/mixins';
+
+@import '../components/chat/duo_chat';
+@import '../components/chat/components/duo_chat_loader/duo_chat_loader';
+@import '../components/chat/components/duo_chat_message/duo_chat_message';

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

@@ -1,168 +0,0 @@
-$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-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-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 {
-  @apply gl-bg-white;
-  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;
-    }
-  }
-}