@gitlab/duo-ui 12.0.0 → 12.1.1

package/src/components/chat/duo_chat.vue

@@ -814,7 +814,7 @@ export default {
       <footer
         v-if="isChatAvailable && !shouldShowThreadList"
         data-testid="chat-footer"
-        class="duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0 gl-border-0 gl-bg-default gl-pb-3"
+        class="duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0 gl-border-0 gl-pb-3"
         :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
       >
         <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">

package/src/components/chat/mock_data.js

@@ -210,7 +210,7 @@ export const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND_WITH_RESPONSE =
   content: 'Tool run_command requires approval. Please confirm if you want to proceed.',
   message_type: MESSAGE_MODEL_ROLES.request,
   tool_info: {
-    args: { command: 'cat Dockerfile | grep ENV' },
+    args: { command: 'docker run -d -v /home/project:/app -p 8001:8001 node' },
     name: 'run_command',
     tool_response: {
       id: null,

package/src/components/chat/web_duo_chat.vue

@@ -791,7 +791,7 @@ export default {
     <footer
       v-if="isChatAvailable && !shouldShowThreadList"
       data-testid="chat-footer"
-      class="duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0 gl-border-0 gl-bg-default gl-pb-3"
+      class="duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0 gl-border-0 gl-pb-3"
       :class="{ 'duo-chat-drawer-body-scrim-on-footer': !scrolledToBottom }"
     >
       <gl-form data-testid="chat-prompt-form" @submit.stop.prevent="sendChatPrompt">

package/src/components/ui/duo_layout/duo_layout.vue

@@ -74,20 +74,24 @@ export default {
     :class="{
       'duo-chat-resizable': shouldRenderResizable,
       'non-resizable-wrapper': !shouldRenderResizable,
+      'gl-rounded-[1rem] gl-bg-default gl-shadow-sm': true,
     }"
     :active="shouldRenderResizable ? ['l', 't', 'lt'] : null"
     data-testid="duo-layout-component"
     @resize:end="updateSize"
   >
     <aside
-      class="markdown-code-block duo-chat gl-align-items gl-bottom-0 gl-flex gl-h-full gl-max-h-full gl-flex-row gl-bg-strong gl-py-3 gl-pl-3"
+      class="markdown-code-block duo-chat gl-align-items gl-bottom-0 gl-flex gl-h-full gl-max-h-full gl-flex-row gl-border-subtle"
     >
       <main
-        class="content flex-none gl-flex gl-h-full gl-min-w-0 gl-grow gl-overflow-y-auto gl-rounded-[1rem] gl-bg-default"
+        class="content flex-none gl-border-r gl-flex gl-h-full gl-min-w-0 gl-grow gl-overflow-y-auto gl-border-subtle"
       >
         <slot name="mainview"></slot>
       </main>
-      <aside class="gl-h-full gl-min-h-full gl-bg-strong gl-px-0 gl-py-2">
+      <aside
+        v-if="$scopedSlots.siderail"
+        class="gl-flex gl-h-full gl-min-h-full gl-w-9 gl-min-w-9 gl-items-start gl-justify-center gl-p-4 gl-px-0"
+      >
         <slot name="siderail"></slot>
       </aside>
     </aside>

package/src/components/ui/side_rail/side_rail.vue

@@ -29,25 +29,25 @@ export default {
 };
 </script>
 <template>
-  <gl-button-group :vertical="true">
+  <gl-button-group :vertical="true" class="gl-flex-col gl-gap-3">
     <template v-for="(button, buttonName) in buttons">
       <div
         v-if="button.dividerBefore"
         :key="`${buttonName}-divider`"
-        class="gl-mx-auto gl-my-0 gl-h-1 gl-w-5 gl-border-0 gl-border-t-1 gl-border-solid gl-border-[#7759C233]"
+        class="gl-mx-auto gl-my-4 gl-h-1 gl-w-6 gl-border-0 gl-border-t-1 gl-border-solid gl-border-strong"
         name="divider"
       ></div>
       <gl-button
         v-if="button.render"
         :key="`${buttonName}-button`"
-        v-gl-tooltip
+        v-gl-tooltip.left
         :title="button.title"
         category="tertiary"
         variant="default"
         size="medium"
         :icon="button.icon"
         active-class="gl-active"
-        class="gl-py-0"
+        class="btn-icon !gl-rounded-full"
         @click="onClick(buttonName)"
       >
         <gl-avatar v-if="button.avatar" :size="32" :entity-name="button.avatar" shape="circle" />

package/translations.js

@@ -72,7 +72,7 @@ export default {
   'DuoChat.closeChatHeaderLabel': 'Close chat',
   'DuoChat.copySessionIdFailedToast': 'Could not copy session ID',
   'DuoChat.copySessionIdSuccessToast': 'Session ID copied to clipboard',
-  'DuoChat.copySessionIdTooltip': 'Copy session ID',
+  'DuoChat.copySessionIdTooltip': 'Copy session ID: %{id}',
   'DuoChat.emptyHistoryAlt':
     'Clock icon with circular arrow, indicating chat history or time-based functionality',
   'DuoChat.emptyHistoryCopy': 'Your previous chats will appear here.',
@@ -149,7 +149,7 @@ export default {
   'MessageToolApproval.denyText': 'Deny',
   'MessageToolApproval.denyingText': 'Denying...',
   'MessageToolApproval.noParametersText': 'No parameters will be sent with this request.',
-  'MessageToolApproval.parametersText': 'Request',
+  'MessageToolApproval.parametersText': 'Request parameters',
   'MessageToolApproval.runCommand': 'Duo wants to run a command.',
   'MessageToolApproval.runGitCommand': 'Duo wants to run a git command.',
   'MessageToolApproval.toolApprovalDescription':
@@ -202,7 +202,7 @@ export default {
   'WebDuoChat.closeChatHeaderLabel': 'Close chat',
   'WebDuoChat.copySessionIdFailedToast': 'Could not copy session ID',
   'WebDuoChat.copySessionIdSuccessToast': 'Session ID copied to clipboard',
-  'WebDuoChat.copySessionIdTooltip': 'Copy session ID',
+  'WebDuoChat.copySessionIdTooltip': 'Copy session ID: %{id}',
   'WebDuoChat.overLimitCharacterCountMessage': null,
   'WebDuoChat.remainingCharacterCountMessage': null,
 };