@gitlab/duo-ui 0.4.0 → 1.0.0

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.vue

@@ -1,25 +1,18 @@
 <script>
-import { GlIcon, GlTruncate } from '@gitlab/ui';
+import { GlIcon, GlTruncate, GlBadge } from '@gitlab/ui';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
 
 import {
   categoryValidator,
   contextItemValidator,
-  formatGitItemSecondaryText,
-  formatIssueId,
-  formatMergeRequestId,
   getContextItemIcon,
+  getContextItemSecondaryText,
+  getContextItemSource,
 } from '../utils';
-import {
-  CONTEXT_ITEM_CATEGORY_FILE,
-  CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
-  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-} from '../constants';
 
 export default {
   name: 'GlDuoChatContextItemMenuSearchItem',
-  components: { GlTruncate, GlIcon, GlDuoChatContextItemPopover },
+  components: { GlBadge, GlTruncate, GlIcon, GlDuoChatContextItemPopover },
   props: {
     category: {
       type: Object,
@@ -37,22 +30,14 @@ export default {
       return this.contextItem.metadata?.title || '';
     },
     secondaryText() {
-      switch (this.category.value) {
-        case CONTEXT_ITEM_CATEGORY_FILE:
-          return this.contextItem.metadata.relativePath;
-        case CONTEXT_ITEM_CATEGORY_ISSUE:
-          return formatIssueId(this.contextItem.metadata.iid);
-        case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
-          return formatMergeRequestId(this.contextItem.metadata.iid);
-        case CONTEXT_ITEM_CATEGORY_LOCAL_GIT:
-          return formatGitItemSecondaryText(this.contextItem);
-        default:
-          return '';
-      }
+      return getContextItemSecondaryText(this.contextItem);
     },
     icon() {
       return getContextItemIcon(this.contextItem, this.category);
     },
+    itemSource() {
+      return getContextItemSource(this.contextItem);
+    },
   },
 };
 </script>
@@ -75,10 +60,17 @@ export default {
     </div>
     <div
       v-if="secondaryText"
-      class="gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary"
+      class="gl-align-items-center gl-mt-1 gl-flex gl-shrink-0 gl-whitespace-nowrap gl-text-secondary"
       data-testid="item-secondary-text"
     >
-      <gl-truncate :text="secondaryText" />
+      <gl-badge
+        v-if="itemSource"
+        variant="neutral"
+        class="gl-mr-1"
+        data-testid="context-item-source"
+        >{{ itemSource }}</gl-badge
+      >
+      <gl-truncate class="gl-min-w-0" position="middle" :text="secondaryText" />
     </div>
   </div>
 </template>

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.vue

@@ -1,5 +1,5 @@
 <script>
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../../utils/i18n';
 
 export default {
   name: 'GlDuoChatContextItemMenuSearchItemsLoading',

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue

@@ -1,24 +1,25 @@
 <script>
-import { GlAlert, GlIcon, GlPopover, GlTruncate } from '@gitlab/ui';
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { GlAlert, GlIcon, GlPopover, GlTruncate, GlBadge } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
 
 import {
   CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
   CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
 } from '../constants';
 import {
-  formatGitItemSecondaryText,
   formatIssueId,
   formatMergeRequestId,
   getContextItemIcon,
+  getContextItemSecondaryText,
+  getContextItemSource,
   getContextItemTypeLabel,
 } from '../utils';
 
 export default {
   name: 'DuoChatContextItemPopover',
   components: {
+    GlBadge,
     GlTruncate,
     GlAlert,
     GlIcon,
@@ -76,11 +77,6 @@ export default {
     filePathArray() {
       return this.filePath?.split('/');
     },
-    gitDetails() {
-      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT
-        ? formatGitItemSecondaryText(this.contextItem)
-        : null;
-    },
     isEnabled() {
       return this.contextItem.metadata.enabled !== false;
     },
@@ -96,6 +92,12 @@ export default {
     itemTypeLabel() {
       return getContextItemTypeLabel(this.contextItem);
     },
+    secondaryText() {
+      return getContextItemSecondaryText(this.contextItem);
+    },
+    itemSource() {
+      return getContextItemSource(this.contextItem);
+    },
   },
   methods: {
     translate,
@@ -118,21 +120,24 @@ export default {
         >
           {{ title }}
         </div>
-        <div v-if="itemTypeLabel" class="gl-font-normal gl-text-subtle">{{ itemTypeLabel }}</div>
+        <div v-if="itemTypeLabel" class="gl-flex gl-items-center gl-font-normal gl-text-subtle">
+          <gl-truncate :text="itemTypeLabel" class="gl-min-w-0" />
+        </div>
       </div>
     </template>
     <div>
-      <div v-if="filePath">
+      <div v-if="secondaryText" class="gl-flex gl-items-center">
+        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1 gl-shrink-0" />
+        <gl-badge v-if="itemSource" class="gl-mr-1">{{ itemSource }}</gl-badge>
+        <gl-truncate :text="secondaryText" class="gl-min-w-0" />
+      </div>
+      <div v-else-if="filePath">
         <gl-icon name="document" :size="12" variant="subtle" />
         <span class="gl-break-all">{{ contextItem.metadata.project }}</span>
         <span v-for="(pathPart, index) in filePathArray" :key="pathPart" class="gl-break-all"
           >{{ pathPart }}{{ index + 1 < filePathArray.length ? '/' : '' }}</span
         >
       </div>
-      <div v-else-if="gitDetails" class="gl-flex gl-items-center" data-testid="git-details">
-        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1 gl-shrink-0" />
-        <gl-truncate :text="gitDetails" class="gl-min-w-0" />
-      </div>
       <div v-else>
         <gl-icon v-if="iconName" :name="iconName" :size="12" variant="subtle" />
         <span class="gl-break-all">{{ contextItem.metadata.project }}</span>

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue

@@ -3,7 +3,11 @@ import uniqueId from 'lodash/uniqueId';
 import { GlIcon, GlToken, GlTruncate } from '@gitlab/ui';
 
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
-import { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT } from '../constants';
+import {
+  CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+} from '../constants';
 import GlDuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue';
 import { contextItemsValidator, getContextItemIcon } from '../utils';
 
@@ -109,9 +113,11 @@ export default {
       this.previewContextItemId = contextItem.id;
     },
     canOpen(contextItem) {
-      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE].includes(
-        contextItem.category
-      );
+      return [
+        CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+        CONTEXT_ITEM_CATEGORY_FILE,
+        CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+      ].includes(contextItem.category);
     },
     onClosePreview() {
       this.previewContextItemId = null;

package/src/components/chat/components/duo_chat_context/mock_context_data.js

@@ -1,8 +1,9 @@
 import {
-  CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_CATEGORY_DEPENDENCY,
   CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
   CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
 } from './constants';
 
 export const MOCK_CATEGORIES = [
@@ -10,6 +11,7 @@ export const MOCK_CATEGORIES = [
   { label: 'Local Git', value: CONTEXT_ITEM_CATEGORY_LOCAL_GIT, icon: 'git' },
   { label: 'Issues', value: CONTEXT_ITEM_CATEGORY_ISSUE, icon: 'issues' },
   { label: 'Merge Requests', value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, icon: 'merge-request' },
+  { label: 'Dependencies', value: CONTEXT_ITEM_CATEGORY_DEPENDENCY, icon: 'package' },
 ];
 
 export function getMockCategory(categoryValue) {
@@ -37,6 +39,9 @@ export const MOCK_CONTEXT_ITEM_FILE = {
   metadata: {
     enabled: true,
     title: 'strawberry.ts',
+    secondaryText: 'src/plants/strawberry.ts',
+    subTypeLabel: 'Project file',
+    icon: 'document',
     project: 'example/garden',
     relativePath: 'src/plants/strawberry.ts',
   },
@@ -48,6 +53,9 @@ export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
   metadata: {
     enabled: false,
     title: 'motorbike.cs',
+    secondaryText: '/src/VehicleFoo/motorbike.cs',
+    subTypeLabel: 'Project file',
+    icon: 'document',
     project: 'example/vehicles',
     relativePath: '/src/VehicleFoo/motorbike.cs',
   },
@@ -60,6 +68,9 @@ const mockFiles = [
     metadata: {
       enabled: true,
       title: 'potato.ts',
+      secondaryText: '/src/plants/potato.ts',
+      subTypeLabel: 'Project file',
+      icon: 'document',
       project: 'example/garden',
       relativePath: '/src/plants/potato.ts',
     },
@@ -73,7 +84,9 @@ export const MOCK_CONTEXT_ITEM_ISSUE = {
   metadata: {
     enabled: true,
     title: 'Implement watering schedule',
-    project: 'example/garden',
+    secondaryText: 'example/garden#1234',
+    subTypeLabel: 'Issue',
+    icon: 'issues',
     iid: 1234,
   },
 };
@@ -85,7 +98,9 @@ export const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
     enabled: false,
     disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
     title: `Fix vehicle colours and make them look real nice and colourful won't that be wonderful wow this issue title is really long I sure hope it's gonna wrap OK`,
-    project: 'example/vehicle',
+    secondaryText: 'example/vehicle#91011',
+    subTypeLabel: 'Issue',
+    icon: 'issues',
     iid: 91011,
   },
 };
@@ -98,7 +113,9 @@ const mockIssues = [
     metadata: {
       enabled: true,
       title: 'Refactor plant growth rates',
-      project: 'example/garden',
+      secondaryText: 'example/garden#5678',
+      subTypeLabel: 'Issue',
+      icon: 'issues',
       iid: 5678,
     },
   },
@@ -111,7 +128,9 @@ export const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
   metadata: {
     enabled: true,
     title: 'Improve database performance',
-    project: 'example/garden',
+    secondaryText: 'example/garden!1122',
+    subTypeLabel: 'Merge request',
+    icon: 'merge-request',
     iid: 1122,
   },
 };
@@ -122,7 +141,9 @@ export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
     enabled: false,
     disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
     title: 'Fix broken layout at small viewports',
-    project: 'example/vehicle',
+    secondaryText: 'example/vehicle!5566',
+    subTypeLabel: 'Merge request',
+    icon: 'merge-request',
     iid: 5566,
   },
 };
@@ -136,7 +157,9 @@ const mockMergeRequests = [
       enabled: false,
       disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
       title: 'Add vehicle registration details',
-      project: 'example/vehicle',
+      secondaryText: 'example/vehicle!3344',
+      subTypeLabel: 'Merge request',
+      icon: 'merge-request',
       iid: 3344,
     },
   },
@@ -149,6 +172,10 @@ export const MOCK_CONTEXT_ITEM_GIT_DIFF = {
   metadata: {
     enabled: true,
     title: 'Current working changes',
+    secondaryText: 'main',
+    subType: 'local_git',
+    subTypeLabel: 'Local Git repository diff',
+    icon: 'comparison',
     commitId: 'main',
     repositoryName: 'example/garden',
     gitType: 'diff',
@@ -160,6 +187,10 @@ export const MOCK_CONTEXT_ITEM_GIT_COMMIT = {
   metadata: {
     enabled: true,
     title: 'fix: some bug fix commit',
+    secondaryText: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+    subType: 'local_git',
+    subTypeLabel: 'Local Git repository commit',
+    icon: 'commit',
     commitId: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
     repositoryName: 'example/garden',
     gitType: 'commit',
@@ -174,6 +205,9 @@ const mockGitItems = [
     metadata: {
       enabled: true,
       title: 'Diff from default branch',
+      secondaryText: 'main',
+      subTypeLabel: 'Local Git repository diff',
+      icon: 'comparison',
       commitId: 'main',
       repositoryName: 'example/garden',
       gitType: 'diff',
@@ -186,6 +220,9 @@ const mockGitItems = [
     metadata: {
       enabled: true,
       title: 'feat: add cool new feature',
+      secondaryText: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+      subTypeLabel: 'Local Git repository commit',
+      icon: 'commit',
       commitId: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
       repositoryName: 'example/garden',
       gitType: 'commit',
@@ -197,6 +234,9 @@ const mockGitItems = [
     metadata: {
       enabled: true,
       title: 'fix: stop foo from bar when baz because customers ding',
+      secondaryText: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+      subTypeLabel: 'Local Git repository commit',
+      icon: 'commit',
       commitId: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
       repositoryName: 'example/garden',
       gitType: 'commit',
@@ -204,8 +244,107 @@ const mockGitItems = [
   },
 ];
 
+export const MOCK_CONTEXT_ITEM_DEPENDENCY = {
+  id: '823e4567-e89b-12d3-a456-426614174007',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([
+    {
+      javascript: [
+        '@types/node@16.11.7',
+        '@vue/compiler-sfc@3.2.37',
+        'typescript@4.5.5',
+        'vue@3.2.37',
+      ],
+    },
+  ]),
+  metadata: {
+    enabled: true,
+    title: 'example/garden',
+    secondaryText: 'package.json',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/garden',
+  },
+};
+
+export const MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED = {
+  id: '923e4567-e89b-12d3-a456-426614174008',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([
+    {
+      javascript: [
+        '@types/node@16.11.7',
+        '@vue/compiler-sfc@3.2.37',
+        'typescript@4.5.5',
+        'vue@3.2.37',
+      ],
+      csharp: ['newtonsoft.json@13.0.1', 'microsoft.net.test.sdk@16.11.0'],
+    },
+  ]),
+  metadata: {
+    enabled: false,
+    disabledReasons: ['Dependencies are not available for this project', 'Access restricted'],
+    title: 'example/vehicle',
+    secondaryText: 'package.json, vehicle.csproj',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/vehicle',
+  },
+};
+
+const mockDependencies = [
+  MOCK_CONTEXT_ITEM_DEPENDENCY,
+  MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED,
+  {
+    id: 'b23e4567-e89b-12d3-a456-426614174010',
+    category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+    content: JSON.stringify([
+      {
+        python: ['django@3.2.9', 'djangorestframework@3.12.4', 'psycopg2@2.9.2', 'celery@5.2.1'],
+        csharp: ['newtonsoft.json@13.0.1', 'microsoft.net.test.sdk@16.11.0'],
+      },
+    ]),
+    metadata: {
+      enabled: true,
+      title: 'example/backend',
+      secondaryText: 'requirements.txt, some.backend.csproj',
+      icon: 'package',
+      subType: 'dependency',
+      subTypeLabel: 'Project dependencies',
+      project: 'example/backend',
+    },
+  },
+  {
+    id: 'c23e4567-e89b-12d3-a456-426614174011',
+    category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+    content: JSON.stringify([
+      {
+        javascript: ['jquery@3.5.1', 'backbone@1.4.0', 'underscore@1.13.1', 'moment@2.29.1'],
+      },
+    ]),
+    metadata: {
+      enabled: false,
+      disabledReasons: ['Project is archived'],
+      title: 'example/legacy',
+      secondaryText: 'bower.json',
+      icon: 'package',
+      subType: 'dependency',
+      subTypeLabel: 'Project dependencies',
+      project: 'example/legacy',
+    },
+  },
+];
+
 export const getMockContextItems = () => {
-  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests];
+  const allItems = [
+    ...mockFiles,
+    ...mockGitItems,
+    ...mockIssues,
+    ...mockMergeRequests,
+    ...mockDependencies,
+  ];
 
   // put disabled items in the back
   const disabledItems = allItems.filter((item) => !item.metadata.enabled);

package/src/components/chat/components/duo_chat_context/utils.js

@@ -1,4 +1,4 @@
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../utils/i18n';
 import {
   CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_ISSUE,
@@ -52,6 +52,10 @@ export function formatMergeRequestId(iid) {
   return `!${iid}`;
 }
 
+export function getContextItemSource(contextItem) {
+  return contextItem.metadata.repositoryName || contextItem.metadata.project || null;
+}
+
 function getGitItemIcon(contextItem) {
   const iconMap = {
     [CONTEXT_ITEM_LOCAL_GIT_COMMIT]: 'commit',
@@ -65,6 +69,10 @@ function getGitItemIcon(contextItem) {
  * Gets the icon name for a given contextItem.
  */
 export function getContextItemIcon(contextItem, category = { icon: null }) {
+  if (contextItem.metadata.icon) {
+    return contextItem.metadata.icon;
+  }
+
   if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
     const gitIcon = getGitItemIcon(contextItem);
     if (gitIcon) return gitIcon;
@@ -85,6 +93,10 @@ export function getContextItemIcon(contextItem, category = { icon: null }) {
 }
 
 export function getContextItemTypeLabel(contextItem) {
+  if (contextItem.metadata.subTypeLabel) {
+    return contextItem.metadata.subTypeLabel;
+  }
+
   if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
     switch (contextItem.metadata.gitType) {
       case CONTEXT_ITEM_LOCAL_GIT_DIFF:
@@ -117,6 +129,25 @@ export function formatGitItemSecondaryText(contextItem) {
   return `${repositoryName}${separator}${commitId || ''}`;
 }
 
+export function getContextItemSecondaryText(contextItem) {
+  if (contextItem.metadata.secondaryText) {
+    return contextItem.metadata.secondaryText;
+  }
+
+  switch (contextItem.category) {
+    case CONTEXT_ITEM_CATEGORY_FILE:
+      return contextItem.metadata.relativePath;
+    case CONTEXT_ITEM_CATEGORY_ISSUE:
+      return formatIssueId(contextItem.metadata.iid);
+    case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+      return formatMergeRequestId(contextItem.metadata.iid);
+    case CONTEXT_ITEM_CATEGORY_LOCAL_GIT:
+      return formatGitItemSecondaryText(contextItem);
+    default:
+      return '';
+  }
+}
+
 /**
  * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
  * @param {number} currentIndex - The starting index.

package/src/components/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -1,5 +1,5 @@
 <script>
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../utils/i18n';
 import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
 
 const i18n = {

package/src/components/chat/components/duo_chat_loader/duo_chat_loader.vue

@@ -1,6 +1,6 @@
 <script>
-import { translate } from '@gitlab/ui/dist/utils/i18n';
 import { GlSprintf } from '@gitlab/ui';
+import { translate } from '../../../../utils/i18n';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 
 export const i18n = {

package/src/components/chat/duo_chat.scss

@@ -40,7 +40,9 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   @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;
@@ -48,13 +50,13 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-drawer-header {
-  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
+  @apply gl-border-b;
 }
 
 .duo-chat-drawer-header-sticky {
   top: 0;
   position: sticky;
-  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
+  @apply gl-border-b;
 }
 
 .duo-chat-drawer-body {
@@ -63,14 +65,17 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   // 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-solid gl-border-t-gray-100 gl-border-t-1;
+  @apply gl-border-t;
   @apply gl-p-5;
 }
 
 .duo-chat-drawer-footer-sticky {
+  @apply gl-bg-white;
   bottom: 0;
   position: sticky;
 }
@@ -78,14 +83,14 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 .duo-chat-drawer-body-scrim-on-footer {
   &::before {
     background: $duo-chat-scrim-gradient;
-    top: -$gl-border-size-1;
+    top: 0;
     @apply -gl-translate-y-full;
     content: '';
     left: 0;
     position: absolute;
     @apply gl-pointer-events-none;
     @apply gl-w-full;
-    @apply gl-h-7;
+    @apply gl-h-5;
   }
 }
 
@@ -125,9 +130,12 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   @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: $gray-900);
+    @include gl-focus($color: var(--gl-control-border-color-focus));
   }
 
   .gl-form-textarea.form-control {
@@ -135,13 +143,16 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
     resize: none;
     max-height: 240px;
     padding-right: 40px;
+    border-radius: px-to-rem(20px);
   }
 
   &::after {
     content: attr(data-value) ' ';
     @apply gl-invisible;
-    @apply gl-whitespace-pre-wrap;
-    @apply gl-py-4;
+    @apply gl-p-4;
+    @apply gl-font-regular;
+    padding-right: 40px;
+    word-break: break-word;
   }
 }