@gitlab/duo-ui 8.11.0 → 8.12.1

package/src/components/agentic_chat/agentic_duo_chat.scss

@@ -0,0 +1,416 @@
+$duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
+$drawer-width: 400px;
+
+.resizable-content {
+  height: 100%;
+  width: 100%;
+  background: var(--gl-background-color-default);
+  border-radius: $gl-border-radius-large;
+  @apply gl-overflow-y-auto;
+  @apply gl-shadow-lg;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
+  @apply gl-flex;
+  @apply gl-flex-col;
+}
+
+.resizable-component {
+  .resizable-t,
+  .resizable-l {
+    background-color: transparent;
+    border-radius: 3px;
+    @include gl-prefers-reduced-motion-transition;
+    transition: background-color $gl-transition-duration-medium $gl-easing-out-cubic;
+
+    &:hover {
+      background-color: var(--gl-color-blue-200);
+    }
+  }
+
+  // important styles because we need
+  // to overwrite inline styles set by
+  // https://www.npmjs.com/package/vue-resizable
+  .resizable-t {
+    width: 95% !important;
+    transform: translateX(-50%);
+    left: 50% !important;
+    height: 4px !important;
+    top: 2px !important;
+  }
+
+  .resizable-l {
+    height: 95% !important;
+    transform: translateY(-50%);
+    top: 50% !important;
+    width: 4px !important;
+    left: 2px !important;
+  }
+}
+
+.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 {
+  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-footer {
+  @apply gl-border-t;
+  @apply gl-p-5;
+}
+
+.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;
+
+  /*
+  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;
+  }
+}
+
+.duo-chat .duo-chat-suggestion-button {
+  border-radius: px-to-rem(20px);
+}
+
+.slash-commands {
+  @apply -gl-mt-2;
+
+  .active-command {
+    @apply gl-bg-strong;
+    @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;
+    }
+  }
+}