@cognigy/chat-components-vue 0.1.0 → 0.3.0

package/src/components/messages/AdaptiveCardRenderer.vue

@@ -0,0 +1,260 @@
+<template>
+  <div ref="targetRef" data-testid="adaptive-card-renderer" />
+</template>
+
+<script setup lang="ts">
+/**
+ * AdaptiveCardRenderer - Inner component that uses Microsoft's adaptivecards library
+ *
+ * This component handles the actual rendering of Adaptive Cards using the
+ * Microsoft adaptivecards library. It's designed for presentation-only mode
+ * (no action handling).
+ *
+ * Inspired by Microsoft's adaptivecards-react package:
+ * https://github.com/microsoft/AdaptiveCards/blob/5b66a52e0e0cee5074a42dcbe688d608e0327ae4/source/nodejs/adaptivecards-react/src/adaptive-card.tsx
+ */
+import { ref, shallowRef, watch, onMounted, onBeforeUnmount } from 'vue'
+import { AdaptiveCard as MSAdaptiveCard, HostConfig } from 'adaptivecards'
+import MarkdownIt from 'markdown-it'
+import { sanitizeHTMLWithConfig } from '../../utils/sanitize'
+
+/**
+ * Shared MarkdownIt instance at module scope.
+ *
+ * Why this is safe to share across component instances:
+ * - MarkdownIt's render() method is a pure function (input → output, no side effects)
+ * - No internal state is mutated during rendering
+ * - Configuration is set at construction time and doesn't change
+ * - This pattern is recommended by MarkdownIt documentation for performance
+ *
+ * Creating a new instance per component would be wasteful since there's no
+ * per-instance state to isolate.
+ */
+const md = new MarkdownIt()
+
+/**
+ * Set up Markdown processing for Adaptive Cards (module-level, runs once)
+ *
+ * This sets a static callback on MSAdaptiveCard that processes markdown text.
+ * We intentionally do this at module scope to:
+ * 1. Avoid race conditions from multiple components setting the callback
+ * 2. Ensure consistent markdown processing across all card instances
+ *
+ * Note: We use sanitizeHTML directly (not via useSanitize composable) because
+ * this runs at module scope without component context. For adaptive cards,
+ * sanitization is always applied for security - config overrides don't apply.
+ */
+MSAdaptiveCard.onProcessMarkdown = (text, result) => {
+  try {
+    const html = md.render(text)
+    // Use default sanitization (no custom allowed tags for adaptive card content)
+    result.outputHtml = sanitizeHTMLWithConfig(html)
+    result.didProcess = true
+  } catch (error) {
+    console.error('AdaptiveCardRenderer: Markdown processing failed', { error })
+    result.outputHtml = text
+    result.didProcess = true
+  }
+}
+
+/**
+ * Host config input type - plain object that HostConfig constructor parses.
+ * We don't use Partial<HostConfig> because HostConfig properties are class instances,
+ * but the constructor accepts plain objects and converts them internally.
+ */
+type HostConfigInput = Record<string, unknown>
+
+interface Props {
+  /**
+   * The Adaptive Card payload to render
+   */
+  payload?: Record<string, unknown>
+  /**
+   * Host configuration for styling the card.
+   * Accepts a plain object matching the HostConfig structure - the library
+   * parses this internally when constructing the HostConfig instance.
+   */
+  hostConfig?: HostConfigInput
+  /**
+   * When true, disables all inputs and buttons after rendering
+   * Useful for displaying submitted cards in chat history
+   */
+  readonly?: boolean
+  /**
+   * Data to pre-fill into input fields
+   * Keys should match input element IDs in the card
+   * Used to show submitted values in chat history
+   */
+  inputData?: Record<string, unknown>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+})
+
+const targetRef = ref<HTMLDivElement | null>(null)
+
+// Component-scoped card instance - using shallowRef for proper instance isolation
+// Each component gets its own MSAdaptiveCard instance to prevent conflicts
+const cardInstance = shallowRef<MSAdaptiveCard | null>(null)
+
+/**
+ * Apply input data to card payload by setting values on input elements
+ * Recursively walks the card structure to find inputs and set their values
+ */
+function applyInputData(
+  cardPayload: Record<string, unknown>,
+  inputData: Record<string, unknown>
+): Record<string, unknown> {
+  if (!inputData || Object.keys(inputData).length === 0) {
+    return cardPayload
+  }
+
+  // Deep clone to avoid mutating original
+  const payload = structuredClone(cardPayload)
+
+  function processElement(element: Record<string, unknown>): void {
+    // Check if this is an input element with an id
+    const type = element.type as string | undefined
+    const id = element.id as string | undefined
+
+    if (type?.startsWith('Input.') && id && id in inputData) {
+      // Set the value for this input
+      const value = inputData[id]
+
+      if (type === 'Input.Toggle') {
+        // Toggle inputs use valueOn/valueOff - custom values take precedence
+        const matchesCustomOn = element.valueOn !== undefined && value === element.valueOn
+        const matchesCustomOff = element.valueOff !== undefined && value === element.valueOff
+        const isStandardOn = value === true || value === 'true'
+
+        const isToggleOn = matchesCustomOn || (!matchesCustomOff && isStandardOn)
+
+        element.value = isToggleOn
+          ? (element.valueOn ?? 'true')
+          : (element.valueOff ?? 'false')
+      } else if (type === 'Input.ChoiceSet' && Array.isArray(value)) {
+        // Multi-select choice sets use comma-separated values
+        element.value = value.join(',')
+      } else {
+        element.value = value
+      }
+    }
+
+    // Recursively process child elements
+    if (Array.isArray(element.body)) {
+      element.body.forEach((child: Record<string, unknown>) => processElement(child))
+    }
+    if (Array.isArray(element.items)) {
+      element.items.forEach((child: Record<string, unknown>) => processElement(child))
+    }
+    if (Array.isArray(element.columns)) {
+      element.columns.forEach((col: Record<string, unknown>) => {
+        if (Array.isArray(col.items)) {
+          col.items.forEach((child: Record<string, unknown>) => processElement(child))
+        }
+      })
+    }
+    if (Array.isArray(element.actions)) {
+      element.actions.forEach((action: Record<string, unknown>) => {
+        if (action.card) {
+          processElement(action.card as Record<string, unknown>)
+        }
+      })
+    }
+  }
+
+  processElement(payload)
+  return payload
+}
+
+/**
+ * Disable all interactive elements in the rendered card
+ * Used for displaying submitted cards in chat history
+ */
+function disableInteractiveElements(container: HTMLElement): void {
+  const interactiveElements = container.querySelectorAll(
+    'input, textarea, select, button'
+  )
+  interactiveElements.forEach((el) => {
+    el.setAttribute('disabled', 'true')
+    el.setAttribute('aria-disabled', 'true')
+  })
+
+  // Add a class to the container for additional styling hooks
+  container.classList.add('ac-readonly')
+}
+
+/**
+ * Render the adaptive card
+ */
+function renderCard(): void {
+  if (!targetRef.value || !props.payload) {
+    return
+  }
+
+  // Create card instance if needed
+  if (!cardInstance.value) {
+    cardInstance.value = new MSAdaptiveCard()
+  }
+
+  // Apply host config if provided
+  if (props.hostConfig) {
+    cardInstance.value.hostConfig = new HostConfig(props.hostConfig)
+  }
+
+  try {
+    // Apply input data to payload if provided
+    const payloadToRender = props.inputData
+      ? applyInputData(props.payload, props.inputData)
+      : props.payload
+
+    // Parse and render the card
+    cardInstance.value.parse(payloadToRender)
+    const renderedCard = cardInstance.value.render()
+
+    if (renderedCard && targetRef.value) {
+      // Clear previous content and append new
+      targetRef.value.innerHTML = ''
+      targetRef.value.appendChild(renderedCard)
+
+      // Accessibility: Add aria-level to heading elements without it
+      const headings = targetRef.value.querySelectorAll("[role='heading']")
+      headings.forEach((heading) => {
+        if (heading.getAttribute('aria-level') === null) {
+          heading.setAttribute('aria-level', '4')
+        }
+      })
+
+      // Disable all interactive elements when in readonly mode
+      if (props.readonly) {
+        disableInteractiveElements(targetRef.value)
+      }
+    }
+  } catch (error) {
+    console.error('AdaptiveCardRenderer: Unable to render Adaptive Card', {
+      error,
+      payload: props.payload,
+    })
+  }
+}
+
+// Render on mount (markdown processing is set up at module scope)
+onMounted(() => {
+  renderCard()
+})
+
+// Re-render when payload, hostConfig, or inputData changes
+watch(
+  () => [props.payload, props.hostConfig, props.inputData],
+  () => {
+    renderCard()
+  },
+  { deep: true }
+)
+
+// Cleanup on unmount
+onBeforeUnmount(() => {
+  cardInstance.value = null
+})
+</script>

package/src/components/messages/AudioMessage.vue

@@ -270,8 +270,11 @@ onMounted(() => {
   gap: 10px;
   background-color: var(--cc-white, #ffffff);
   border-radius: var(--cc-bubble-border-radius, 15px);
-  border: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+  border: 1px solid var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8)));
   padding: 0px 12px;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .audioWrapper .controls {

package/src/components/messages/DatePicker.vue

@@ -21,16 +21,6 @@
       </Typography>
     </div>
 
-    <!-- Event name/label (optional) -->
-    <div
-      v-if="eventName"
-      :class="['webchat-date-picker-event', $style.eventName]"
-      data-testid="datepicker-event"
-    >
-      <Typography variant="copy-medium" component="span" :class="$style.eventLabel">
-        {{ eventName }}
-      </Typography>
-    </div>
   </div>
 </template>
 
@@ -59,16 +49,9 @@ const buttonText = computed(() => {
   return datePickerData.value?.openPickerButtonText || 'Pick date'
 })
 
-// Event name/label
-const eventName = computed(() => {
-  return datePickerData.value?.eventName
-})
-
-// Check if button should be disabled (for presentation purposes)
-// In a real implementation, this would check conversation state
+// Disable button when a date has already been selected
 const isDisabled = computed(() => {
-  // Could be extended to check message.data.hasReply or other flags
-  return false
+  return !!selectedDate.value
 })
 
 // Get selected date if available (from message text or reply)
@@ -93,6 +76,9 @@ const selectedDate = computed(() => {
   flex-direction: column;
   gap: 8px;
   align-items: flex-start;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .button {
@@ -124,12 +110,4 @@ const selectedDate = computed(() => {
   border-radius: var(--cc-bubble-border-radius, 15px);
 }
 
-.eventName {
-  padding: 4px 8px;
-}
-
-.eventLabel {
-  color: var(--cc-black-40, rgba(0, 0, 0, 0.4));
-  font-style: italic;
-}
 </style>

package/src/components/messages/FileMessage.vue

@@ -149,6 +149,9 @@ const nonImages = computed(() => {
   object-position: center center;
   animation: webchatImagePreviewPopIn 0.2s ease-out;
   transform-origin: center;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .smallImagePreview {
@@ -159,6 +162,9 @@ const nonImages = computed(() => {
   object-position: center center;
   animation: webchatImagePreviewPopIn 0.2s ease-out;
   transform-origin: center;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .filePreview {
@@ -167,8 +173,11 @@ const nonImages = computed(() => {
   padding: 8px 12px;
   border-radius: var(--cc-bubble-border-radius, 15px);
   height: 33px;
-  background-color: var(--cc-black-95, rgba(0, 0, 0, 0.95));
+  background-color: var(--cc-file-preview-background, rgba(0, 0, 0, 0.95));
   max-width: 295px;
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .filePreview .fileNameWrapper {
@@ -176,7 +185,7 @@ const nonImages = computed(() => {
   flex-direction: row;
   align-items: center;
   max-width: 200px;
-  color: var(--cc-black-10, rgba(0, 0, 0, 0.1));
+  color: var(--cc-file-preview-text-color, #ffffff);
 }
 
 .filePreview .fileName {
@@ -190,6 +199,6 @@ const nonImages = computed(() => {
 }
 
 .filePreview .fileSize {
-  color: var(--cc-black-40, rgba(0, 0, 0, 0.4));
+  color: var(--cc-file-preview-secondary-text-color, rgba(255, 255, 255, 0.6));
 }
 </style>

package/src/components/messages/Gallery.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="elements.length > 0">
+  <div v-if="elements.length > 0" :class="$style.galleryRoot">
     <!-- Single card (no carousel) -->
     <div
       v-if="elements.length === 1"
-      :class="['webchat-carousel-template-root', $style.wrapper]"
+      :class="['webchat-carousel-template-root', $style.wrapper, variantClass]"
       data-testid="gallery-message"
     >
       <GalleryItem :slide="elements[0]" :contentId="`${carouselContentId}-0`" />
@@ -21,22 +21,23 @@
       }"
       :pagination="{ clickable: true }"
       :a11y="{ slideLabelMessage }"
-      :class="['webchat-carousel-template-root', $style.wrapper]"
+      :class="swiperClasses"
       data-testid="gallery-message"
+      @slideChange="handleSlideChange"
     >
       <SwiperSlide
         v-for="(element, index) in elements"
         :key="index"
-        style="width: 206px"
+        :style="slideStyle"
       >
         <GalleryItem :slide="element" :contentId="`${carouselContentId}-${index}`" />
       </SwiperSlide>
 
-      <!-- Navigation buttons -->
-      <button class="gallery-button-prev">
+      <!-- Navigation buttons (click.stop prevents event bubbling to parent card) -->
+      <button class="gallery-button-prev" @click.stop>
         <ArrowBackIcon />
       </button>
-      <button class="gallery-button-next">
+      <button class="gallery-button-next" @click.stop>
         <ArrowBackIcon />
       </button>
     </Swiper>
@@ -44,14 +45,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, useCssModule } from 'vue'
+import { computed, onMounted, useCssModule, nextTick } from 'vue'
 import { Swiper, SwiperSlide } from 'swiper/vue'
+import type { Swiper as SwiperType } from 'swiper'
 import { Navigation, Pagination, A11y } from 'swiper/modules'
 import GalleryItem from './GalleryItem.vue'
 import { ArrowBackIcon } from '../../assets/svg'
 import { useMessageContext } from '../../composables/useMessageContext'
 import { getChannelPayload } from '../../utils/matcher'
 import { getRandomId } from '../../utils/helpers'
+import { getMessageId } from '../../types'
 import type { IWebchatTemplateAttachment } from '../../types'
 
 // Import Swiper styles
@@ -66,7 +69,7 @@ const $style = useCssModule()
 const modules = [Navigation, Pagination, A11y]
 
 // Message context
-const { message, config } = useMessageContext()
+const { message, config, onSlideChange } = useMessageContext()
 
 // Get gallery elements from message payload
 const payload = computed(() => getChannelPayload(message, config))
@@ -78,6 +81,40 @@ const elements = computed(() => {
 // Generate unique ID for content
 const carouselContentId = getRandomId('webchatCarouselContentButton')
 
+// Message ID for DOM queries (aria-live removal)
+const dataMessageId = computed(() => getMessageId(message))
+
+// Gallery variant from config
+const variant = computed(() => config?.settings?.layout?.galleryVariant ?? 'default')
+
+const variantClass = computed(() => {
+  if (variant.value === 'compact') return $style.compact
+  if (variant.value === 'copilot') return $style.copilot
+  return undefined
+})
+
+// Swiper classes (includes variant)
+const swiperClasses = computed(() => {
+  return ['webchat-carousel-template-root', $style.wrapper, variantClass.value].filter(Boolean)
+})
+
+// Slide width based on variant
+const slideStyle = computed(() => {
+  if (variant.value === 'compact') return { width: '170px' }
+  if (variant.value === 'copilot') {
+    // Copilot: adaptive sizing based on card count
+    if (elements.value.length === 1) return { width: '260px' }
+    if (elements.value.length === 2) return { width: '220px' }
+    return { width: '190px' }
+  }
+  return { width: '206px' }
+})
+
+// Handle slide change event from Swiper
+const handleSlideChange = (swiper: SwiperType) => {
+  onSlideChange?.(swiper.activeIndex, elements.value.length)
+}
+
 // Slide label for accessibility
 const slideLabelMessage = computed(() => {
   const slide = config?.settings?.customTranslations?.ariaLabels?.slide
@@ -95,8 +132,17 @@ const slideLabelMessage = computed(() => {
   return `${slide}: ${customSlidePosition}`
 })
 
-// Auto-focus first button/card on mount
+// Auto-focus first button/card on mount + remove aria-live from swiper-wrapper
 onMounted(() => {
+  // Remove aria-live from swiper-wrapper (matches React behavior — prevents noisy screen reader announcements)
+  nextTick(() => {
+    const messageEl = document.querySelector(`[data-message-id="${dataMessageId.value}"]`)
+    const swiperWrapper = messageEl?.querySelector('.swiper-wrapper')
+    if (swiperWrapper) {
+      swiperWrapper.removeAttribute('aria-live')
+    }
+  })
+
   if (!config?.settings?.widgetSettings?.enableAutoFocus) return
 
   const chatHistory = document.getElementById('webchatChatHistoryWrapperLiveLogPanel')
@@ -116,6 +162,10 @@ onMounted(() => {
 </script>
 
 <style module>
+.galleryRoot {
+  width: 100%;
+}
+
 .slideItem {
   position: relative;
   width: 206px;
@@ -293,4 +343,40 @@ onMounted(() => {
 :global(article) :global(.swiper).wrapper :global(.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet) {
   margin: 0 4px;
 }
+
+/*
+** GALLERY VARIANT: COMPACT
+** Narrower slides with smaller navigation buttons
+*/
+:global(article) :global(.swiper).compact :global(.gallery-button-prev),
+:global(article) :global(.swiper).compact :global(.gallery-button-next) {
+  width: 24px;
+  height: 24px;
+  top: calc(150px / 2 - 6px);
+}
+
+:global(article) :global(.swiper).compact :global(.gallery-button-prev) svg,
+:global(article) :global(.swiper).compact :global(.gallery-button-next) svg {
+  width: 10px;
+  height: 10px;
+}
+
+/*
+** GALLERY VARIANT: COPILOT
+** Adaptive sizing based on card count with adjusted spacing
+*/
+:global(article) :global(.swiper).copilot {
+  padding-left: 12px;
+  padding-right: 12px;
+  margin-left: -12px;
+  margin-right: -12px;
+}
+
+:global(article) :global(.swiper).copilot :global(.gallery-button-prev) {
+  left: 12px;
+}
+
+:global(article) :global(.swiper).copilot :global(.gallery-button-next) {
+  right: 12px;
+}
 </style>

package/src/components/messages/GalleryItem.vue

@@ -16,8 +16,8 @@
         v-else
         :src="slide.image_url"
         :alt="slide.image_alt_text || ''"
-        :class="$style.slideImage"
         @error="handleImageError"
+        @click="handleImageClick"
       />
     </div>
 
@@ -54,6 +54,7 @@
         :dataMessageId="dataMessageId"
         :onEmitAnalytics="onEmitAnalytics"
         :templateTextId="slide.title ? titleId : undefined"
+        :openXAppOverlay="openXAppOverlay"
       />
     </div>
   </div>
@@ -79,7 +80,7 @@ const props = defineProps<Props>()
 const $style = useCssModule()
 
 // Context and config
-const { action, config, onEmitAnalytics } = useMessageContext()
+const { action, config, onEmitAnalytics, messageParams, openXAppOverlay, onImageClick } = useMessageContext()
 const dataMessageId = window.__TEST_MESSAGE_ID__ // For testing
 
 // Sanitize HTML
@@ -97,6 +98,13 @@ const handleImageError = () => {
   isImageBroken.value = true
 }
 
+// Handle image click — notify consumer via onImageClick callback
+const handleImageClick = () => {
+  if (props.slide.image_url) {
+    onImageClick?.(props.slide.image_url)
+  }
+}
+
 // Check if card has extra info (subtitle or buttons)
 const hasExtraInfo = computed(() => {
   return !!(props.slide.subtitle || (props.slide.buttons && props.slide.buttons.length > 0))
@@ -109,8 +117,7 @@ const defaultActionUrl = computed(() => {
 
 // Should buttons be disabled
 const shouldBeDisabled = computed(() => {
-  // TODO: Add conversation ended check when messageParams available
-  return false
+  return messageParams?.isConversationEnded ?? false
 })
 
 // Translations
@@ -150,6 +157,11 @@ const handleKeyDown = (event: KeyboardEvent) => {
   position: relative;
   width: 206px;
   overflow: hidden;
+  border-radius: var(--cc-bubble-border-radius, 15px);
+  background-color: var(--cc-white, #ffffff);
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .slideItem .top {
@@ -160,7 +172,7 @@ const handleKeyDown = (event: KeyboardEvent) => {
 .slideItem .bottom {
   border-bottom-left-radius: var(--cc-bubble-border-radius, 15px);
   border-bottom-right-radius: var(--cc-bubble-border-radius, 15px);
-  border: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+  border: 1px solid var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8)));
   background-color: var(--cc-white, #ffffff);
   display: flex;
   flex-direction: column;

package/src/components/messages/ImageMessage.vue

@@ -29,7 +29,7 @@
       :custom-icon="DownloadIcon"
       :position="1"
       :total="1"
-      :class-name="$style.downloadButtonWrapper"
+      :class-name="$style.downloadButton"
       class="webchat-buttons-template-button"
     />
 
@@ -88,7 +88,7 @@ import ActionButton from '../common/ActionButton.vue'
 import { DownloadIcon, CloseIcon } from '../../assets/svg'
 import type { IWebchatImageAttachment, IWebchatButton } from '../../types'
 
-const { message, config, action, onEmitAnalytics } = useMessageContext()
+const { message, config, action, onEmitAnalytics, onImageClick } = useMessageContext()
 
 const $style = useCssModule()
 
@@ -144,6 +144,11 @@ const closeLabel = computed(() =>
 
 // Handlers
 const handleExpand = () => {
+  // Notify consumer via onImageClick callback
+  if (imageData.value.url) {
+    onImageClick?.(imageData.value.url)
+  }
+
   if (isDownloadable.value) {
     showLightbox.value = true
     // Focus the download button after lightbox opens
@@ -215,6 +220,10 @@ onUnmounted(() => {
   max-width: 295px;
   width: 100%;
   outline: none;
+  background-color: var(--cc-white, #ffffff);
+  box-shadow: var(--cc-message-shadow, rgba(151, 124, 156, 0.1) 0px 5px 9px 0px,
+    rgba(203, 195, 212, 0.1) 0px 5px 16px 0px,
+    rgba(216, 212, 221, 0.1) 0px 8px 20px 0px);
 }
 
 .wrapper .fixedImage,
@@ -238,7 +247,9 @@ onUnmounted(() => {
 .downloadable {
   background-color: var(--cc-white, #ffffff);
   cursor: pointer;
-  border: 1px solid var(--cc-black-80, rgba(0, 0, 0, 0.8));
+  border: 1px solid var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8)));
+  border-bottom: none;
+  overflow: hidden;
 }
 
 .downloadable img {
@@ -265,8 +276,12 @@ onUnmounted(() => {
   /* Base class for image containers */
 }
 
-.downloadButtonWrapper {
-  padding: 16px;
+.wrapper .downloadButton {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--cc-border-media-card, var(--cc-black-80, rgba(0, 0, 0, 0.8)));
+  border-top: none;
+  border-radius: 0 0 var(--cc-bubble-border-radius, 15px) var(--cc-bubble-border-radius, 15px);
 }
 
 .brokenImage {