@sendbird/uikit-react 3.8.2 → 3.9.0-rc.0

package/dist/index.css

@@ -1355,22 +1355,22 @@
   z-index: 2;
 }
 .sendbird-avatar {
+  border-radius: 50%;
   display: inline-block;
   overflow: hidden;
-  border-radius: 50%;
   position: relative;
 }
 .sendbird-avatar:focus {
   outline: none;
 }
 .sendbird-avatar .sendbird-avatar-img {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  left: 50%;
   position: absolute;
   top: 50%;
-  left: 50%;
   transform: translate(-50%, -50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 .sendbird-theme--light .sendbird-avatar .sendbird-avatar-img {
   background-color: var(--sendbird-light-background-300);
@@ -1406,9 +1406,9 @@
   transform: translate(-23%, -23%) scale(0.5);
 }
 .sendbird-avatar .sendbird-avatar-img--default {
+  align-items: center;
   display: flex;
   justify-content: center;
-  align-items: center;
 }
 .sendbird-theme--light .sendbird-avatar .sendbird-avatar-img--default {
   background-color: var(--sendbird-light-background-300);
@@ -1416,6 +1416,27 @@
 .sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img--default {
   background-color: var(--sendbird-dark-background-300);
 }
+.sendbird-theme--light .sendbird-avatar .sendbird-avatar-img--default.text {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img--default.text {
+  background-color: var(--sendbird-dark-background-400);
+}
+.sendbird-avatar .sendbird-avatar-text {
+  font-family: Roboto;
+  font-size: 8px;
+  font-style: normal;
+  font-weight: bold;
+  font-weight: 400;
+  line-height: 12px;
+  text-align: center;
+}
+.sendbird-theme--light .sendbird-avatar .sendbird-avatar-text {
+  color: var(--sendbird-light-onlight-02);
+}
+.sendbird-theme--dark .sendbird-avatar .sendbird-avatar-text {
+  color: var(--sendbird-dark-ondark-02);
+}
 .sendbird--mobile-mode .sendbird-add-channel__modal .sendbird-modal__content {
   margin: 0 40px;
 }
@@ -2886,9 +2907,9 @@
   border: 1px solid var(--sendbird-dark-ondark-04);
 }
 .sendbird-message-content {
-  position: relative;
   display: inline-flex;
   flex-direction: row;
+  position: relative;
   width: 100%;
 }
 .sendbird-message-content.incoming {
@@ -2904,8 +2925,8 @@
   max-width: calc(100vw - 140px);
 }
 .sendbird-message-content .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.use-quote {
-  margin-top: -8px;
   bottom: -8px;
+  margin-top: -8px;
 }
 
 .sendbird-message-content__middle__quote-message__quote {
@@ -2913,48 +2934,57 @@
 }
 
 .sendbird-message-content.incoming .sendbird-message-content__left {
-  position: relative;
   display: inline-flex;
   min-width: 40px;
+  position: relative;
 }
 .sendbird-message-content.incoming .sendbird-message-content__left .sendbird-message-content__left__avatar {
-  position: absolute;
-  left: 0px;
   bottom: 2px;
+  left: 0;
+  position: absolute;
+}
+.sendbird-message-content.incoming .sendbird-message-content__left .sendbird-message-content__left__avatar.multiple {
+  border: 2px solid;
+}
+.sendbird-theme--light .sendbird-message-content.incoming .sendbird-message-content__left .sendbird-message-content__left__avatar.multiple {
+  border-color: var(--sendbird-light-background-50);
+}
+.sendbird-theme--dark .sendbird-message-content.incoming .sendbird-message-content__left .sendbird-message-content__left__avatar.multiple {
+  border-color: var(--sendbird-dark-background-600);
 }
 .sendbird-message-content.incoming .sendbird-message-content__left .sendbird-message-content__left__avatar.use-thread-replies {
   bottom: 35px;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle {
-  position: relative;
+  align-items: flex-start;
   display: inline-flex;
   flex-direction: column;
-  align-items: flex-start;
+  position: relative;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
-  position: absolute;
   bottom: 6px;
-  right: -84px;
-  white-space: nowrap;
   display: flex;
   flex-direction: row;
   min-width: 80px;
+  position: absolute;
+  right: -84px;
+  white-space: nowrap;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at.sendbird-mouse-hover {
   display: none;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__sender-name {
-  position: relative;
-  margin-left: 12px;
   margin-bottom: 4px;
-  width: 100%;
+  margin-left: 12px;
   overflow-x: hidden;
+  position: relative;
   text-overflow: ellipsis;
+  width: 100%;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__quote-message {
+  display: inline-flex;
   position: relative;
   width: 100%;
-  display: inline-flex;
 }
 .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.outgoing {
   justify-content: flex-end;
@@ -2966,11 +2996,11 @@
   cursor: pointer;
 }
 .sendbird-message-content.incoming .sendbird-message-content__right {
-  position: relative;
   display: inline-flex;
-  width: 50px;
   margin-left: 4px;
   padding-top: 18px;
+  position: relative;
+  width: 50px;
 }
 .sendbird-message-content.incoming .sendbird-message-content__right.use-reactions {
   width: 70px;
@@ -2982,29 +3012,29 @@
   padding-top: 18px;
 }
 .sendbird-message-content.incoming .sendbird-message-content__right .sendbird-message-content-menu {
-  position: relative;
+  display: none;
   flex-direction: row;
   height: 32px;
-  display: none;
+  position: relative;
 }
 .sendbird-message-content.incoming .sendbird-message-content__right .sendbird-message-content-menu.sendbird-mouse-hover {
   display: inline-flex;
 }
+.sendbird--mobile-mode .sendbird-message-content.incoming:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
+  display: inline-flex;
+}
 .sendbird-message-content.incoming:hover .sendbird-message-content__right .sendbird-message-content-menu {
   display: inline-flex;
 }
 .sendbird-message-content.incoming:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
   display: none;
 }
-.sendbird--mobile-mode .sendbird-message-content.incoming:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
-  display: inline-flex;
-}
 
 .sendbird-message-content.outgoing .sendbird-message-content__left {
-  position: relative;
   box-sizing: border-box;
   display: inline-flex;
   justify-content: flex-end;
+  position: relative;
   width: 50px;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__left.use-reactions {
@@ -3014,25 +3044,25 @@
   top: 18px;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__left .sendbird-message-content-menu {
+  display: none;
+  flex-direction: row;
   position: absolute;
-  top: 2px;
   right: 4px;
-  flex-direction: row;
-  display: none;
+  top: 2px;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__left .sendbird-message-content-menu.sendbird-mouse-hover {
   display: inline-flex;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle {
-  position: relative;
+  align-items: flex-end;
   display: inline-flex;
   flex-direction: column;
-  align-items: flex-end;
+  position: relative;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__quote-message {
+  display: inline-flex;
   position: relative;
   width: 100%;
-  display: inline-flex;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.outgoing {
   justify-content: flex-end;
@@ -3045,53 +3075,53 @@
   width: 100%;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
-  position: absolute;
   bottom: 2px;
-  left: -84px;
-  white-space: nowrap;
+  box-sizing: content-box;
   display: flex;
   justify-content: flex-end;
-  box-sizing: content-box;
-  min-width: 80px;
+  left: -84px;
   min-height: 16px;
+  min-width: 80px;
+  position: absolute;
+  white-space: nowrap;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at.sendbird-mouse-hover {
   display: none;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at .sendbird-message-content__middle__body-container__created-at__component-container {
-  position: relative;
   display: inline-flex;
+  position: relative;
 }
 .sendbird-message-content.outgoing .sendbird-message-content__right {
   display: none;
 }
+.sendbird--mobile-mode .sendbird-message-content.outgoing:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
+  display: inline-flex;
+}
 .sendbird-message-content.outgoing:hover .sendbird-message-content__left .sendbird-message-content-menu {
   display: inline-flex;
 }
 .sendbird-message-content.outgoing:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
   display: none;
 }
-.sendbird--mobile-mode .sendbird-message-content.outgoing:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
-  display: inline-flex;
-}
 
 .sendbird-message-content__middle__body-container {
+  display: flex;
+  flex-direction: column;
   position: relative;
   width: -moz-fit-content;
   width: fit-content;
-  display: flex;
-  flex-direction: column;
 }
 .sendbird-message-content__middle__body-container .sendbird-message-content__middle__message-item-body {
-  width: 100%;
   box-sizing: border-box;
+  width: 100%;
 }
 
 .sendbird-message-content-reactions {
+  border-radius: 0 0 16px 16px;
+  max-width: 400px;
   position: relative;
   width: 100%;
-  max-width: 400px;
-  border-radius: 0px 0px 16px 16px;
 }
 .sendbird-theme--light .sendbird-message-content-reactions {
   background-color: var(--sendbird-light-background-100);
@@ -3129,8 +3159,8 @@
 }
 
 .sendbird-voice-message-item-body.sendbird-message-content__middle__message-item-body {
-  min-width: 136px;
   height: 50px;
+  min-width: 136px;
 }
 .sendbird-message-item-menu__list__menu-item:focus-visible {
   outline: none;
@@ -4807,6 +4837,61 @@ div.sendbird-text-message-item-body {
   justify-content: center;
   margin-right: 8px;
 }
+.typing-dots-container {
+  align-items: center;
+  border-radius: 16px;
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  padding: 16px 12px;
+}
+.sendbird-theme--light .typing-dots-container {
+  background-color: var(--sendbird-light-background-100);
+}
+.sendbird-theme--dark .typing-dots-container {
+  background-color: var(--sendbird-dark-background-400);
+}
+.typing-dots-container span {
+  animation: blink 1.4s infinite;
+  animation-fill-mode: both;
+  border-radius: 50%;
+  height: 8px;
+  width: 8px;
+}
+.sendbird-theme--light .typing-dots-container span {
+  background-color: var(--sendbird-light-background-700);
+}
+.sendbird-theme--dark .typing-dots-container span {
+  background-color: var(--sendbird-dark-background-50);
+}
+.typing-dots-container span:nth-child(1) {
+  animation-delay: 0.4s;
+}
+.typing-dots-container span:nth-child(2) {
+  animation-delay: 0.6s;
+}
+.typing-dots-container span:nth-child(3) {
+  animation-delay: 0.8s;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.12;
+    transform: scale(1);
+  }
+  21.43% {
+    opacity: 0.38;
+    transform: scale(1.2);
+  }
+  42.86% {
+    opacity: 0.12;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0.12;
+    transform: scale(1);
+  }
+}
 .sendbird-message-input-wrapper--voice-message,
 .sendbird-message-input-wrapper {
   position: relative;