@syncfusion/ej2-fabric-theme 33.2.13 → 34.1.29

package/styles/chat-ui/_layout.scss

@@ -0,0 +1,975 @@
+@use 'variables' as *;
+@mixin chat-display-alignment($chat-display, $chat-align-items) {
+  display: $chat-display;
+  align-items: $chat-align-items;
+}
+@mixin chat-text-ellipses($chat-overflow, $chat-white-space, $chat-text-overflow) {
+  overflow: $chat-overflow;
+  white-space: $chat-white-space;
+  text-overflow: $chat-text-overflow;
+}
+@mixin chat-progress-bar-display($chat-radius, $chat-cx, $chat-cy, ){
+  cx: $chat-cx;
+  cy: $chat-cy;
+  r: $chat-radius;
+}
+@mixin chat-wrapper-icon-alignment($width, $height){
+  position: absolute;
+  width: $width;
+  height: $height;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+@mixin chat-center-icon($size){
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: $size;
+  cursor: pointer;
+  z-index: 1;
+}
+@include export-module('chatui-layout') {
+  .e-chat-ui {
+    border: $chat-ui-border solid;
+    .e-chat-content {
+      position: relative;
+      height: $chat-content-height;
+      justify-content: space-between;
+      gap: $chat-content-gap;
+      padding-bottom: $chat-content-padding-bottom;
+    }
+    .e-chat-header {
+      height: $chat-header-height;
+      border-bottom: $chat-header-border-bottom solid;
+      .e-chat-toolbar {
+        flex-grow: 1;
+        &.e-toolbar {
+          border: none;
+        }
+      }
+    }
+    .e-header {
+      height: $header-height;
+      margin-left: $chat-header-margin-left;
+      font-size: $chat-header-font-size;
+      font-weight: $message-header-font-weight;
+      display: flex;
+      gap: $chat-header-gap;
+      align-items: center;
+    }
+    .e-message-wrapper .e-chat-message-toolbar {
+      position: absolute;
+    }
+    .e-message-wrapper > .e-chat-message-toolbar {
+      position: fixed;
+    }
+    .e-message-wrapper {
+      gap: $message-wrapper-gap;
+      width: 100%;
+      height: $message-wrapper-height;
+      overflow-y: scroll;
+      padding-top: $message-wrapper-padding-top;
+      &.e-scroll-smooth {
+        scroll-behavior: smooth;
+      }
+      &::-webkit-scrollbar {
+        width: $chat-scrollbar-width;
+        height: $chat-scrollbar-width;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: $scrollbar-thumb-border-radius;
+      }
+      .e-chat-message-toolbar {
+        border-radius: $chat-message-toolbar-radius;
+        display: none;
+        height: $chat-message-toolbar-height !important; /* stylelint-disable-line declaration-no-important */
+        min-height: 32px;
+        z-index: 10;
+        overflow-x: scroll;
+        scrollbar-width: none;
+        &.e-show,
+        &:hover {
+          display: block;
+        }
+        .e-toolbar-items .e-toolbar-item {
+          padding: $toolbar-item-padding;
+          min-height: 28px;
+          &:first-child {
+            margin-left: $toolbar-first-child-margin-left;
+          }
+          &:last-child {
+            margin-right: $toolbar-last-child-margin-right;
+          }
+          .e-tbar-btn {
+            min-height: 28px;
+            padding: $tbar-btn-padding;
+          }
+        }
+      }
+    }
+    .e-message-group {
+      max-width: 75%;
+      margin: $message-group-margin;
+    }
+    .e-message-item {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      margin-bottom: $message-item-bottom;
+      .e-forwarded-indicator {
+        font-size: $forwarded-indicator-font-size;
+        display: flex;
+        align-items: center;
+        gap: $forwarded-indicator-gap;
+        margin-bottom: $forwarded-indicator-margin-bottom;
+        .e-forward-arrow {
+          font-weight: normal;
+          font-size: $forward-arrow-font-size;
+          padding: $forward-arrow-padding;
+        }
+      }
+    }
+    .e-message-header-container {
+      display: flex;
+      align-items: baseline;
+      gap: $message-header-container-gap;
+    }
+    .e-message-header {
+      margin: $message-header-margin;
+      font-size: $message-header-size;
+      font-weight: $message-header-font-weight;
+    }
+    .e-time {
+      font-size: $message-time-size;
+      white-space: nowrap;
+    }
+    .e-message-content {
+      white-space: pre-wrap;
+      padding: $chat-text-padding;
+      border-radius: $text-border-radius;
+      margin-top: $text-margin-top;
+      font-size: $chat-text-font-size;
+      width: fit-content;
+      text-align: left;
+    }
+    .e-right,
+    .e-right .e-message-content,
+    .e-right .e-time {
+      align-self: flex-end;
+    }
+    .e-left {
+      align-self: flex-start;
+      position: relative;
+      &:not(.e-message-item-template) {
+        padding-left: $chat-left-message-item-padding-left;
+      }
+    }
+    .e-message-icon {
+      position: absolute;
+      top: 20px;
+      left: 0;
+    }
+
+    /* ======== Asssit Footer Styles ======== */
+    .e-footer {
+      position: relative;
+      margin: $chat-footer-margin;
+      align-self: flex-end;
+      width: calc(100% - 10px); //for margin space
+      .e-chat-textarea::-webkit-scrollbar-thumb {
+        border-radius: $chat-textarea-border-radius;
+      }
+      .e-chat-textarea::-webkit-scrollbar {
+        width: 4px;
+      }
+      .hide-scrollbar .e-chat-textarea {
+        scrollbar-width: none;
+      }
+      .e-footer-icons-wrapper {
+        display: flex;
+        align-items: center;
+        gap: $chat-footer-icons-gap;
+        padding: $chat-footer-icons-padding;
+        .e-icons {
+          cursor: pointer;
+        }
+        .e-upload {
+          display: none;
+        }
+      }
+      .e-chat-textarea {
+        height: $chat-textarea-height;
+        width: 100%;
+        min-height: $chat-textarea-min-height;
+        outline: none;
+        overflow-y: auto;
+        max-height: 280px;
+        line-height: $chat-textarea-line-height;
+        padding: $chat-textarea-padding;
+        font-size: $chat-textarea-font-size;
+        border: none;
+      }
+      .e-chat-textarea[placeholder]:empty::before {
+        content: attr(placeholder);
+        cursor: text;
+      }
+      &.e-footer-focus-wave-effect {
+        @if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark') {
+          &::before,
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            height: $focus-wave-effect-height;
+            width: 0;
+            transition: width .2s ease-out;
+          }
+          &::before {
+            left: 50%;
+          }
+          &::after {
+            right: 50%;
+          }
+          &.e-footer-focused::before,
+          &.e-upload-drag-hover::before {
+            width: 50%;
+          }
+          &.e-footer-focused::after,
+          &.e-upload-drag-hover::after {
+            width: 50%;
+          }
+        }
+      }
+
+      &:not(.e-footer-template) {
+        display: flex;
+        flex-direction: column;
+        border-radius: $chat-footer-border-radius;
+        @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
+          border-top-right-radius: $footer-border-top-right-radius;
+          border-top-left-radius: $footer-border-top-left-radius;
+        }
+        &.e-footer-expanded .e-textarea-icons-wrapper {
+          display: block;
+          .e-footer-icons-wrapper {
+            justify-content: end;
+          }
+          .e-chat-textarea {
+            width: 100%;
+          }
+        }
+        .e-chat-send {
+          font-size: $chat-send-icon-size;
+        }
+        .e-chat-attachment-icon {
+          font-size: $chat-send-icon-size;
+        }
+        .e-chat-send.disabled {
+          pointer-events: none;
+          opacity: .5;
+          cursor: not-allowed;
+        }
+        .e-chat-send.enabled {
+          pointer-events: auto;
+          opacity: 1;
+          cursor: pointer;
+        }
+        .e-textarea-icons-wrapper {
+          display: flex;
+          flex-direction: row;
+        }
+      }
+      .e-hidden-textarea {
+        display: none;
+      }
+      &[hidden]{
+        display: none;
+      }
+    }
+    .e-footer:not(.e-footer-template) .e-chat-send:not(.disabled):focus-visible,
+    .e-footer:not(.e-footer-template) .e-chat-attachment-icon:focus-visible {
+      outline: 1px solid;
+    }
+    .e-chat-content,
+    .e-message-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+    .e-message-icon,
+    .e-message-icon img {
+      height: $message-icon-height;
+      width: $message-icon-width;
+      font-size: $message-icon-font-size;
+    }
+    .e-message-icon,
+    .e-header-icon,
+    .e-user-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .e-status-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+    .e-status-item {
+      display: flex;
+      gap: $status-item-gap;
+    }
+    .e-right .e-time,
+    .e-status-text {
+      margin-right: $status-text-margin-right;
+    }
+    .e-status-text {
+      font-size: $typing-user-font-size;
+    }
+    .e-status-icon {
+      align-self: flex-end;
+      height: $status-icon-height;
+      width: $status-icon-width;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: $chat-status-icon-size;
+    }
+    .e-timebreak {
+      display: flex;
+      align-items: center;
+      margin: $timebreak-margin;
+      position: relative;
+      &::before,
+      &::after {
+        content: '';
+        flex-grow: 1;
+        height: $timebreak-height;
+      }
+      &::before {
+        margin-right: $timebreak-before-margin-right;
+      }
+      &::after {
+        margin-left: $timebreak-after-margin-left;
+      }
+    }
+    .e-timestamp {
+      font-size: $timebreak-font-size;
+      padding: $timebreak-padding;
+      border-radius: $timebreak-border-radius;
+      font-weight: $timebreak-font-weight;
+      border: $timestamp-border solid;
+      display: inline-block;
+    }
+    .e-typing-indicator {
+      align-self: baseline;
+      display: flex;
+      gap: $typing-indicator-gap;
+      margin-left: $typing-indicator-margin-left;
+      width: fit-content;
+      align-items: center;
+      justify-content: center;
+    }
+    .e-user-icon {
+      margin-right: $user-icon-margin-right;
+      height: $user-icon-height;
+      width: $user-icon-width;
+      font-size: $user-icon-font-size;
+    }
+    .e-user-text {
+      margin-left: $user-text-margin-left;
+      font-size: $typing-user-font-size;
+    }
+    .e-indicator-wrapper {
+      display: flex;
+      gap: $indicator-wrapper-gap;
+      height: $indicator-wrapper-height;
+      align-items: flex-end;
+    }
+    .e-indicator {
+      border-radius: $indicator-border-radius;
+      height: $indicator-height;
+      width: $indicator-width;
+    }
+    .e-indicator:nth-child(1) {
+      animation-delay: .3333s;
+    }
+    .e-indicator:nth-child(2) {
+      animation-delay: .6666s;
+    }
+    .e-indicator:nth-child(3) {
+      animation-delay: .9999s;
+    }
+    .e-header-icon {
+      position: relative;
+      display: inline-block;
+      width: $header-icon-width;
+      height: $header-icon-height;
+    }
+    .e-typing-suggestions {
+      display: flex;
+      gap: $typing-suggestions-gap;
+      justify-content: space-between;
+      align-items: flex-end;
+      width: 100%;
+      position: relative;
+      flex-wrap: wrap-reverse;
+    }
+    .e-suggestions {
+      flex: 1;
+      width: 100%;
+      &.e-suggestion-item-template li {
+        padding: $suggestion-item-template-padding;
+      }
+      ul {
+        list-style-type: none;
+        padding: $suggestions-ul-padding;
+        margin: $suggestions-ul-margin;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        margin-right: $suggestions-ul-margin-right;
+      }
+      li {
+        font-size: $timebreak-font-size;
+        line-height: $chat-suggesstion-line-height;
+        font-weight: $suggesstions-font-weight;
+        padding: $chat-suggesstions-list-padding;
+        margin: $suggestions-li-margin;
+        border: $suggestions-li-border solid;
+        border-radius: $suggestion-border-radius;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    .e-spinner-pane.e-spin-show {
+      height: $spinner-pane-height;
+    }
+    &.e-rtl {
+      .e-message-content {
+        text-align: right;
+      }
+      .e-left {
+        &:not(.e-message-item-template) {
+          padding-right: $chat-left-message-item-padding-right;
+          padding-left: $rtl-left-padding-left;
+        }
+      }
+      .e-message-icon {
+        left: unset;
+        right: 0;
+      }
+      .e-typing-indicator {
+        margin-right: $rtl-typing-indicator-margin-right;
+      }
+      .e-user-text {
+        margin-right: $rtl-user-text-margin-right;
+      }
+      .e-user-icon {
+        margin-left: $rtl-user-icon-margin-left;
+        margin-right: $rtl-user-icon-margin-right;
+      }
+      .e-typing-indicator,
+      .e-user-text,
+      .e-header {
+        margin-left: $rtl-header-margin-left;
+      }
+      .e-header {
+        margin-right: $rtl-header-margin-right;
+      }
+      .e-suggestions ul {
+        margin-right: $rtl-suggestions-ul-margin-right;
+        margin-left: $rtl-suggestions-ul-margin-left;
+      }
+      .e-right .e-time,
+      .e-status-text {
+        margin-right: $rtl-status-text-margin-right;
+        margin-left: $rtl-status-text-margin-left;
+      }
+      .e-footer {
+        .e-footer-icons-wrapper {
+          padding: $chat-footer-icons-rtl-padding;
+          padding-right: $footer-icons-wrapper-padding-right;
+        }
+      }
+    }
+    @if ($skin-name == 'highcontrast') {
+      .e-chat-header .e-toolbar .e-toolbar-item .e-tbar-btn {
+        border: none;
+      }
+    }
+    .e-fab.e-btn.e-fab-bottom {
+      bottom: 8px;
+    }
+    .e-arrowdown-hide,
+    .e-hide-suggestions {
+      display: none;
+    }
+    .e-arrowdown-show {
+      display: flex;
+    }
+    .e-show-suggestions {
+      display: block;
+    }
+    .e-suggestions li:focus-visible {
+      outline: 1px solid;
+    }
+    .e-chat-header {
+      .e-toolbar-item {
+        &.e-overlay {
+          opacity: .5;
+        }
+      }
+    }
+    .e-empty-chat-template {
+      margin: $empty-chat-template-margin;
+    }
+    .e-user-status-icon {
+      position: absolute;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      bottom: 0;
+      right: 0;
+      height: $user-status-icon-height;
+      width: $user-status-icon-width;
+      border: $user-status-icon-border solid;
+      border-color: $user-status-icon-border-color;
+      border-radius: $user-status-icon-border-radius;
+      font-size: $user-status-icon-font-size;
+  
+      &:not(.e-user-offline)
+      {
+        color: $user-status-icon-color;
+      }
+    }
+    .e-reply-wrapper {
+      display: flex;
+      align-items: center;
+      padding: $reply-wrapper-padding;
+      margin: $reply-wrapper-margin;
+      border-radius: $reply-wrapper-border-radius;
+      position: relative;
+      width: fit-content;
+      white-space: normal;
+      cursor: pointer;
+      .e-reply-content {
+        padding-left: $reply-content-padding-left;
+      }
+      .e-reply-message-details {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: $reply-message-details-gap;
+        padding-bottom: $reply-message-details-padding-bottom;
+        .e-chat-close {
+          margin-left: $reply-chat-close-margin-left;
+          font-size: $reply-chat-close-font-size;
+          cursor: pointer;
+        }
+      }
+      .e-reply-message-user {
+        font-size: $reply-message-user-font-size;
+        font-weight: $reply-message-user-font-weight;
+      }
+      .e-reply-message-text {
+        font-size: $reply-message-text-font-size;
+        vertical-align: middle;
+      }
+      .e-reply-message-time {
+        font-size: $reply-message-time-font-size;
+      }
+    }
+    .e-pinned-message-wrapper {
+      display: none;
+      align-items: center;
+      padding: $pinned-message-wrapper-padding;
+      .e-pinned-message {
+        display: flex;
+        align-items: center;
+        gap: $pinned-message-gap;
+        font-size: $pinned-message-font-size;
+      }
+      .e-pinned-dropdown-popup {
+        border: $pinned-dropdown-popup-border;
+        background: none;
+        box-shadow: none;
+        margin-left: $pinned-dropdown-popup-margin-left;
+      }
+    }
+
+    /* ======== Attachment Styles ======== */
+    .e-message-content {
+      .e-attached-file{
+        display: flex;
+        padding: $attached-file-padding;
+        cursor: pointer;
+        .e-image-wrapper,
+        .e-video-wrapper {
+          position: relative;
+          display: flex;
+          .e-image,
+          .e-video {
+            max-width: 250px;
+            max-height: 350px;
+            min-width: 200px;
+            width: 100%;
+            height: $image-video-height;
+            object-fit: cover;
+            border-radius: $image-video-border-radius;
+            display: block;
+          }
+          .e-play-icon-wrapper {
+            @include chat-wrapper-icon-alignment(40px, $play-icon-wrapper-height);
+            border-radius: $play-icon-wrapper-border-radius;
+            .e-chat-video-play {
+              @include chat-center-icon($progress-video-icon-size);
+              line-height: $progress-video-icon-height;
+              font-weight: $progress-video-icon-weight;
+              transform: translate(-42%, -52%);
+            }
+          }
+        }
+      }
+    }
+    .e-pinned-message {
+      min-width: 0;
+      .e-pinned-message-text{
+        @include chat-display-alignment(flex, center);
+        gap: $pinned-message-text-gap;
+        min-width: 0;
+        .e-pinned-img-thumb {
+          height: $pinned-img-thumb-height;
+          width: $pinned-img-thumb-width;
+          border-radius: $pinned-img-thumb-border-radius;
+          object-fit: inherit;
+        }
+        .e-pinned-file-name {
+          @include chat-text-ellipses(hidden, nowrap, ellipsis);
+          min-width: 0;
+          display: inline-block;
+          font-size: $pinned-file-name-font-size;
+        }
+        .e-chat-file-icon-svg svg {
+          width: $pin-file-icon-size;
+          height: $pin-file-icon-size;
+        }
+      }
+    }
+    .e-reply-wrapper {
+      .e-reply-media-preview {
+        @include chat-display-alignment(inline-flex, center);
+        gap: $reply-media-preview-gap;
+        margin-right: $reply-media-preview-margin-right;
+        width: fit-content;
+        vertical-align: middle;
+        .e-reply-media-thumb {
+          height: $reply-media-thumb-height;
+          width: $reply-media-thumb-width;
+          border-radius: $reply-media-thumb-border-radius;
+          object-fit: inherit;
+        }
+        .e-reply-file-name {
+          flex-grow: 1;
+          max-width: 120px;
+          @include chat-text-ellipses(hidden, nowrap, ellipsis);
+        }
+        .e-chat-file-icon-svg svg {
+          width: $reply-file-icon-size;
+          height: $reply-file-icon-size;
+        }
+      }
+    }
+    .e-preview-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: $preview-overlay-height;
+      z-index: 999;
+      @include chat-display-alignment(flex, center);
+      flex-direction: column;
+      justify-content: flex-start;
+      .e-preview-header {
+        @include chat-display-alignment(flex, center);
+        width: 100%;
+        padding: $preview-header-padding;
+        justify-content: space-between;
+        height: $preview-header-height;
+        .e-icons {
+          text-decoration: none;
+          cursor: pointer;
+        }
+        .e-chat-back-icon {
+          margin-right: $preview-header-close-margin-left;
+          font-size: $after-preview-close-size;
+          line-height: $after-preview-close-height;
+          font-weight: $after-preview-close-weight;
+        }
+        .e-chat-download {
+          font-size: $after-preview-download-size;
+          line-height: $after-preview-download-height;
+          font-weight: $after-preview-download-weight;
+        }
+        .e-preview-file-name {
+          padding-right: $preview-file-name-padding-right;
+          font-size: $after-preview-file-size;
+          line-height: $after-preview-file-line-height;
+          font-weight: $after-preview-file-weight;
+          letter-spacing: $after-preview-file-letter-spacing;
+          @include chat-text-ellipses(hidden, nowrap, ellipsis);
+          flex-grow: 1;
+        }
+      }
+      .e-media-wrapper {
+        display: flex;
+        height: $media-wrapper-height;
+      }
+
+      .e-image-preview,
+      .e-video-preview {
+        max-width: 95%;
+        max-height: 80%;
+        margin: $image-video-preview-margin;
+        object-fit: contain;
+      }
+
+      .e-file-preview {
+        height: $preview-file-height;
+        width: 80%;
+        margin: auto;
+        border-radius: $preview-file-border-radius;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: $preview-file-border solid;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        .e-chat-file-icon-svg svg {
+          width: 100px;
+          height: 100px;
+        }
+        .e-preview-file-text {
+          font-size: $no-preview-text-size;
+          font-weight: $no-preview-font-weight;
+          line-height: $no-preview-line-height;
+          letter-spacing: $no-preview-letter-sapcing;
+          margin-top: $preview-file-text-top;
+          margin-bottom: $preview-file-text-bottom;
+          text-align: center;
+          word-break: break-word;
+          hyphens: auto;
+        }
+        .e-file-details {
+          font-size: $preview-file-size-text;
+          line-height: $preview-file-size-height;
+          letter-spacing: $preview-file-size-spacing;
+          font-weight: $preview-file-size-weight;
+          word-break: break-word;
+          hyphens: auto;
+        }
+      }
+    }
+
+    .e-upload-failure-alert {
+      transition: opacity .5s ease-in-out;
+      opacity: 0;
+      padding: $file-failure-padding;
+      border-radius: $file-failure-border-radius;
+      display: flex;
+      align-items: center;
+      align-self: center;
+      justify-content: space-between;
+      width: calc(100% - 10px);
+      .e-chat-circle-close {
+        font-size: $file-failure-circle-icon-size;
+        line-height: $file-failure-circle-icon-height;
+        margin-right: $file-failure-circle-margin;
+        font-weight: $file-failure-circle-icon-weight;
+      }
+      .e-failure-message {
+        font-size: $file-failure-message-size;
+        line-height: $file-failure-message-height;
+        letter-spacing: $file-failure-message-spacing;
+        font-weight: $file-failure-message-weight;
+        margin-right: auto;
+      }
+      .e-chat-close {
+        font-size: $file-failure-close-icon-size;
+        line-height: $file-failure-close-icon-height;
+        margin-left: $file-failure-close-margin;
+        font-weight: $file-failure-close-icon-weight;
+        cursor: pointer;
+      }
+    }
+    .e-upload-failure-alert.e-show {
+      opacity: 1;
+    }
+
+    .e-footer:has(.e-chat-drop-area .e-chat-uploaded-file-item) {
+      .e-chat-textarea {
+        max-height: 90px;
+      }
+    }
+
+    .e-footer .e-chat-drop-area:has(.e-chat-uploaded-file-item) {
+      margin: $files-container-margin;
+    }
+
+    .e-footer .e-chat-drop-area {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      overflow-y: auto;
+      overflow-x: hidden;
+      white-space: normal;
+      max-width: inherit;
+      max-height: 225px;
+      scrollbar-width: thin;
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: $chat-textarea-border-radius;
+      }
+    }
+
+    .e-footer .e-chat-drop-area,
+    .e-attached-file {
+      .e-chat-uploaded-file-item,
+      .e-file-wrapper {
+        display: flex;
+        flex-direction: row;
+        border-radius: $file-wrapper-border-radius;
+        position: relative;
+        align-items: center;
+        width: 160px;
+        max-width: 160px;
+        min-width: 160px;
+        margin: $file-item-margin;
+        cursor: pointer;
+        &:not(:has(.e-chat-close)) .e-chat-file-details {
+          padding-right: $chat-file-details-padding-right;
+        }
+      }
+
+      .e-chat-file-details {
+        display: flex;
+        flex-direction: column;
+        padding: $chat-attached-file-details-padding;
+        min-width: 0;
+        flex: 1 1 auto;
+      }
+
+      .e-chat-file-name {
+        font-weight: $chat-attached-file-text-font-weight;
+      }
+
+      .e-chat-file-name,
+      .e-chat-file-size {
+        font-size: $chat-attached-file-text-font-size;
+        line-height: $chat-attached-file-text-line-height;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .e-chat-close {
+        cursor: pointer;
+        font-weight: bold;
+        padding: $chat-attached-file-clear-icon-padding;
+        border-radius: $chat-clear-icon-border-radius;
+        margin: $chat-attached-file-clear-icon-margin;
+      }
+    }
+
+    .e-footer {
+      .e-chat-drop-area,
+      .e-attachment-template {
+        .e-chat-progress-bar {
+          width: 100%;
+          border-radius: $chat-progress-bar-border-radius;
+          overflow: hidden;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+        }
+        .e-chat-progress-fill {
+          height: $chat-progress-fill-height;
+          width: 0;
+          transition: width .3s;
+        }
+      }
+    }
+    .e-attached-file {
+      .e-file-wrapper {
+        margin: $file-wrapper-margin;
+        width: fit-content;
+      }
+    }
+    .e-right .e-text .e-chat-mention-user-chip {
+      font-weight: $mentioned-user-font-weight;
+    }
+
+    .e-left .e-text .e-chat-mention-user-chip {
+      font-weight: $mentioned-left-user-font-weight;
+    }
+
+    .e-chat-uploaded-file-item,
+    .e-attached-file {
+      .e-chat-file-icon-svg {
+        padding: 3px;
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+    .e-chat-file-icon-svg svg {
+      display: block;
+    }
+  }
+
+  // Mention popup related styles for @mention support in chat ui
+  .e-chat-mention .e-chat-mention-item-template {
+    display: flex;
+    flex-direction: row;
+    padding: $chat-mention-padding;
+  }
+
+  .e-chat-mention .e-chat-mention-user-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .e-chat-mention .e-chat-mention-user-name {
+    font-size: $mention-user-name-size;
+    line-height: $mention-user-name-line-height;
+    margin: $mention-user-name-margin;
+  }
+
+  .e-chat-mention.e-rtl .e-chat-mention-user-icon {
+    left: unset;
+    right: 0;
+  }
+
+  .e-chat-mention .e-chat-mention-user-icon,
+  .e-chat-mention .e-chat-mention-user-icon img {
+    height: $mention-user-icon-height;
+    width: $mention-user-icon-width;
+    font-size: $mention-user-icon-size;
+  }
+
+  .e-chat-mention > div {
+    border-radius: $chat-mention-border-radius;
+  }
+
+  .e-chat-mention .e-list-item {
+    text-indent: 0;
+    height: $chat-mention-list-item-height;
+  }
+}