@cometchat/chat-uikit-react 4.3.22 → 5.0.0-beta1

package/dist/styles/CometChatTextBubble.css

@@ -0,0 +1,97 @@
+/* Container for the text bubble */
+.cometchat-text-bubble {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--cometchat-padding-1) var(--cometchat-padding-2) var(--cometchat-padding-2) var(--cometchat-padding-2);
+    align-self: flex-end;
+    width: auto;
+    border-radius: var(--cometchat-radius-3, 12px);
+    max-width: 630px;
+}
+
+/* Styles for the text content inside the text bubble */
+.cometchat-text-bubble__body-text {
+    margin: 0;
+    word-break: break-word;
+    text-align: left;
+    white-space: pre-line;
+    overflow: auto;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    padding-top:var(--cometchat-padding-1);
+
+}
+
+/* Incoming text bubble specific styles */
+.cometchat-text-bubble.cometchat-text-bubble-incoming {
+    background: var(--cometchat-neutral-color-300);
+}
+
+/* Outgoing text bubble specific styles */
+.cometchat-text-bubble.cometchat-text-bubble-outgoing {
+    background: var(--cometchat-primary-color);
+}
+
+/* Styles for the text inside the incoming text bubble */
+.cometchat-text-bubble.cometchat-text-bubble-incoming .cometchat-text-bubble__body-text {
+    color: var(--cometchat-neutral-color-900);
+    font: var(--cometchat-font-body-regular);
+    font-style: normal;
+
+}
+
+/* Styles for the text inside the outgoing text bubble */
+.cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text {
+    color: var(--cometchat-static-white);
+    font: var(--cometchat-font-body-regular);
+    font-style: normal;
+}
+
+/* Container for the body content of the text bubble */
+.cometchat-text-bubble__body {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Styles for the text expanding buttons inside the text bubble */
+.cometchat-text-bubble__read-more,
+.cometchat-text-bubble__read-less {
+    font: var(--cometchat-font-body-regular);
+    font-style: normal;
+    cursor: pointer;
+    display: flex;
+    align-self: flex-end;
+    width: fit-content;
+    padding: var(--cometchat-padding-1);
+}
+
+/* text expanding buttons styles for outgoing message bubbles */
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-more,
+.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-less {
+    color: var(--cometchat-static-white);
+}
+
+/* text expanding buttons styles for incoming message bubbles */
+.cometchat-text-bubble-incoming .cometchat-text-bubble__read-more,
+.cometchat-text-bubble-incoming .cometchat-text-bubble__read-less {
+    color: var(--cometchat-text-color-highlight);
+
+}
+
+.cometchat-text-bubble .cometchat-text-bubble__body-text.cometchat-text-bubble__body-text-emoji{
+    font:var(--cometchat-font-title-regular);
+}
+@media (max-width: 1000px) {
+    .cometchat-text-bubble {
+        max-width: 420px;
+    }
+}
+
+@media (max-width: 768px) {
+    .cometchat-text-bubble {
+        max-width: 280px;
+    }
+}

package/dist/styles/CometChatThreadedMessagePreview.css

@@ -0,0 +1,152 @@
+.cometchat-threaded-message-preview {
+    display: flex;
+    width: 420px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 0px;
+    flex-shrink: 0;
+    background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-threaded-message-preview__header {
+    display: flex;
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
+    align-items: center;
+    gap: var(--cometchat-padding-2, 8px);
+    height: 64px;
+    align-self: stretch;
+    border-bottom: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+    border-left: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+    background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-threaded-message-preview__header-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    flex: 1 0 0;
+    overflow: hidden;
+    color: var(--cometchat-text-color-primary, #141414);
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-heading3-bold, 700 20px Roboto);
+}
+
+.cometchat-threaded-message-preview__header-close {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.cometchat-threaded-message-preview__header-close .cometchat-button {
+    height: 24px;
+    width: 24px;
+    padding: 0px;
+    gap: 0px;
+    background: transparent;
+}
+
+.cometchat-threaded-message-preview__header-close .cometchat-button:hover {
+    background: transparent;
+}
+
+.cometchat-threaded-message-preview__header-close .cometchat-button:active {
+    background: transparent;
+}
+
+.cometchat-threaded-message-preview__header-close .cometchat-button__icon {
+    background: var(--cometchat-icon-color-primary, #141414);
+}
+
+.cometchat-threaded-message-preview__header-close .cometchat-button__icon:hover {
+    background: var(--cometchat-icon-color-highlight);
+}
+
+.cometchat-threaded-message-preview__content {
+    display: flex;
+    width: 100%;
+    padding-top: var(--cometchat-padding-3, 12px);
+    flex-direction: column;
+    flex-shrink: 0;
+}
+
+.cometchat-threaded-message-preview__content-time {
+    display: flex;
+    padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
+    align-self: center;
+    border-radius: var(--cometchat-radius-1, 4px);
+    border: 1px solid var(--cometchat-border-color-dark, #DCDCDC);
+    background: var(--cometchat-background-color-02, #FAFAFA);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.cometchat-threaded-message-preview__content-time .cometchat-date {
+    color: var(--cometchat-text-color-primary, #141414);
+    text-align: center;
+    font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
+    padding: 0px;
+    display: flex;
+}
+
+.cometchat-threaded-message-preview__message {
+    display: flex;
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
+    gap: 0px;
+    min-height: 50px;
+    max-height: 300px;
+    overflow: hidden auto;
+    flex: 1 0 0;
+}
+
+.cometchat-threaded-message-preview__message::-webkit-scrollbar,
+.cometchat-threaded-message-preview__message::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+.cometchat-threaded-message-preview__message .cometchat-text-bubble .cometchat-text-bubble__read-more {
+    display: none;
+}
+
+.cometchat-threaded-message-preview__message-small {
+    min-height: fit-content;
+    max-height: 150px;
+}
+
+.cometchat-threaded-message-preview__message-incoming {
+    align-self: flex-start;
+}
+
+.cometchat-threaded-message-preview__message-outgoing {
+    align-self: flex-end;
+}
+
+.cometchat-threaded-message-preview__message .cometchat-message-bubble__wrapper {
+    padding: 0px;
+    width: 100%;
+}
+
+.cometchat-threaded-message-preview__footer {
+    display: flex;
+    padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-5, 20px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--cometchat-padding-2, 8px);
+    align-self: stretch;
+}
+
+.cometchat-threaded-message-preview__footer-reply-count {
+    color: var(--cometchat-text-color-secondary, #727272);
+    text-align: center;
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+}
+
+.cometchat-threaded-message-preview__footer-divider {
+    width: 100%;
+    height: 1px;
+    background: var(--cometchat-border-color-default, #E8E8E8);
+    flex: 1;
+}

package/dist/styles/CometChatToast.css

@@ -0,0 +1,14 @@
+.cometchat-toast{
+    display: inline-block;
+    padding: var(--cometchat-padding-2,8px);
+    border-radius: var(--cometchat-radius-1,4ppx);
+    background: var(--cometchat-static-black);
+    position: fixed;
+    color: var(--cometchat-static-white, #F9F8FD);
+    font: var(--cometchat-font-caption1-regular);
+    bottom: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    position: absolute;
+}

package/dist/styles/CometChatUsers.css

@@ -0,0 +1,165 @@
+.cometchat-users {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0px;
+  flex-shrink: 0;
+  background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-users__empty-state-view {
+  display: flex;
+  flex-direction: column;
+}
+
+.cometchat-users__empty-state-view,
+.cometchat-users__error-state-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding-5, 20px);
+  justify-content: center;
+  align-items: center;
+  background: var(--cometchat-background-color-01, #FFF);
+}
+
+
+.cometchat-users__empty-state-view-body,
+.cometchat-users__error-state-view-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding, 2px);
+}
+
+.cometchat-users__empty-state-view-body-title,
+.cometchat-users__error-state-view-body-title {
+  width: 280px;
+  color: var(--cometchat-text-color-primary, #141414);
+  text-align: center;
+  font: var(--cometchat-font-heading3-bold);
+  font-style: normal;
+}
+
+.cometchat-users__empty-state-view-body-description,
+.cometchat-users__error-state-view-body-description {
+  width: 280px;
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-align: center;
+  font: var(--cometchat-font-body-regular);
+  font-style: normal;
+}
+
+.cometchat-users__shimmer {
+  width: 100%;
+  height: 100%;
+  background: var(--cometchat-background-color-01, #FFF);
+
+}
+
+.cometchat-users__shimmer-item {
+  width: 100%;
+  height: 72px;
+  display: flex;
+  width: 100%;
+  min-width: 240px;
+  max-width: 1440px;
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+  align-items: center;
+  gap: 12px;
+}
+
+.cometchat-users__shimmer-item-avatar {
+  display: flex;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--cometchat-radius-max,1000px);
+  background: var(
+    --cometchat-shimmer-gradient-color,
+    linear-gradient(90deg, #e0e0e0 0%, #eee 100%)
+  );
+}
+
+.cometchat-users__shimmer-item-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: var(--cometchat-padding-2, 8px);
+}
+
+.cometchat-users__shimmer-item-title {
+  width: 50%;
+  height: 22px;
+  flex-shrink: 0;
+  border-radius: var(--cometchat-radius-2, 8px);
+  background: var(
+    --cometchat-shimmer-gradient-color,
+    linear-gradient(90deg, #e0e0e0 0%, #eee 100%)
+  );
+  animation: shimmerAnimation 1.5s infinite linear;
+
+}
+
+.cometchat-users__shimmer-item-body-subtitle {
+  width:25%;
+  height: 12px;
+  flex-shrink: 0;
+  border-radius: var(--cometchat-radius-2, 8px);
+  background: var(
+    --cometchat-shimmer-gradient-color,
+    linear-gradient(90deg, #e0e0e0 0%, #eee 100%)
+  );
+  animation: shimmerAnimation 1.5s infinite linear;
+
+}
+
+.cometchat-users__list-item-online .cometchat-list-item__status {
+  width: 14px;
+  height: 14px;
+  margin-right: -12px;
+  position: relative;
+  top: 20px;
+  right: 15px;
+  border-radius: var(--cometchat-radius-max, 1000px);
+  background:  var(--cometchat-success-color,#09C26F);
+  min-width: 14px;
+  border: 2px solid var(--cometchat-neutral-color-50,#FFFFFF);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cometchat-users__list-item-active .cometchat-list-item{
+  background-color:var(--cometchat-white-pressed,#E8E8E8)
+}
+
+.cometchat-users__list-item  {
+  cursor: pointer;
+}
+.cometchat-users__list-item .cometchat-avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.cometchat-users__list-item .cometchat-list-item__leading-view {
+  width: 40px;
+  height: 40px;
+}
+
+.cometchat-users .cometchat-list-item__body {
+  padding: 0px;
+  min-height: 43px;
+}
+
+@keyframes shimmerAnimation {
+    0% {
+      background-position: -468px 0;
+    }
+  
+    100% {
+      background-position: 468px 0;
+    }
+  }

package/dist/styles/CometChatVideoBubble.css

@@ -0,0 +1,39 @@
+/* The main container for the video bubble, setting up basic layout, width,
+   padding, and flex properties for alignment and justification */
+.cometchat-video-bubble {
+    display: flex;
+    padding: 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    border-radius: var(--cometchat-radius-3, 12px);
+    max-width: 250px;
+    max-height: 350px;
+    overflow: hidden;
+    width: auto;
+    height: auto;
+    cursor: pointer;
+}
+
+/* Defines the body of the video bubble, ensuring the video or media inside
+   takes up the full available space with inherited border radius */
+.cometchat-video-bubble__body {
+    margin: 0;
+    border-radius: inherit;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    overflow: hidden;
+}
+
+/* Specific styling for incoming video bubbles, giving it a background color
+   for differentiation */
+.cometchat-video-bubble-incoming {
+    background: var(--cometchat-neutral-color-300);
+}
+
+/* Specific styling for outgoing video bubbles, using the primary color as
+   the background to distinguish it from incoming bubbles */
+.cometchat-video-bubble-outgoing {
+    background: var(--cometchat-primary-color);
+}