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

package/dist/styles/components/CometChatCallButtons.css

@@ -0,0 +1,52 @@
+.cometchat-call-button {
+    display: flex;
+    align-items: center;
+    gap: var(--cometchat-padding-4, 16px);
+    height: fit-content;
+    width: fit-content;
+}
+
+.cometchat-call-button__voice,
+.cometchat-call-button__video {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.cometchat-call-button .cometchat-button {
+    width: 24px;
+    height: 24px;
+    padding: 0px;
+    gap: 0px;
+    background: var(--cometchat-background-color-01, #FFFFFF);
+}
+
+.cometchat-call-button .cometchat-button__icon {
+    background: var(--cometchat-icon-color-primary, #141414);
+}
+
+.cometchat-outgoing-call__backdrop {
+    display: flex;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.cometchat-call-button .cometchat-button:hover {
+    background: transparent;
+}
+
+.cometchat-call-button .cometchat-button:active {
+    background: transparent;
+}

package/dist/styles/components/CometChatCallLogs.css

@@ -0,0 +1,239 @@
+
+.cometchat-call-logs {
+  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-call-logs__outgoing-call {
+  background: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+ .cometchat-call-logs__list-item-active .cometchat-list-item {
+   background-color: var(--cometchat-white-pressed, #E8E8E8);
+ }
+
+.cometchat-call-logs__list-item-tail {
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  border: none;
+  align-self: center;  
+  background:var(--cometchat-icon-color-primary,#FFF)
+}
+
+.cometchat-call-logs__list-item-tail-video {
+  -webkit-mask: url("../../assets/call-log_video.svg") center center no-repeat;
+  mask: url("../../assets/call-log_video.svg") center center no-repeat;
+}
+
+.cometchat-call-logs__list-item-tail-audio {
+  -webkit-mask: url("../../assets/call-log-audio.svg") center center no-repeat;
+  mask: url("../../assets/call-log-audio.svg") center center no-repeat;
+}
+
+.cometchat-call-logs__list-item-subtitle {
+  display: flex;
+  gap: 4px;
+}
+
+.cometchat-call-logs__list-item-subtitle .cometchat-date{
+  overflow: hidden;
+  color:var(--cometchat-text-color-secondary,#727272);
+  padding: 0px;
+ text-overflow: ellipsis;
+ font: var(--cometchat-font-body-regular);
+}
+
+.cometchat-call-logs__list-item-subtitle-icon {
+  height: 16px;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  border: none;
+  align-self: center;  
+  background:var(--cometchat-icon-color-primary,#FFF);
+
+}
+
+.cometchat-call-logs__list-item-subtitle-icon-missed-call {
+  -webkit-mask: url("../../assets/call_received.svg") center center no-repeat;
+  mask: url("../../assets/call_received.svg") center center no-repeat;
+  background-color: var(--cometchat-error-color,#F44649);
+}
+
+
+.cometchat-call-logs__list-item-subtitle-icon-outgoing-call {
+  -webkit-mask: url("../../assets/call_made.svg") center center no-repeat;
+  mask: url("../../assets/call_made.svg") center center no-repeat;
+  background-color: var(--cometchat-success-color,#09C26F);
+
+}
+
+.cometchat-call-logs__list-item-subtitle-icon-incoming-call {
+  -webkit-mask: url("../../assets/call_received.svg") center center no-repeat;
+  mask: url("../../assets/call_received.svg") center center no-repeat;
+  background-color: var(--cometchat-success-color,#09C26F);
+
+}
+
+.cometchat-call-logs__empty-state-view,
+.cometchat-call-logs__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-call-logs__empty-state-view-body,
+.cometchat-call-logs__error-state-view-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding, 2px);
+}
+
+.cometchat-call-logs__empty-state-view-body-title,
+.cometchat-call-logs__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-call-logs__empty-state-view-body-description,
+.cometchat-call-logs__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-call-logs__shimmer {
+  width: 100%;
+  height: 100%;
+  background: var(--cometchat-background-color-01, #FFF);
+
+}
+
+.cometchat-call-logs__shimmer-item {
+  width: 100%;
+  height: 72px;
+  display: flex;
+  width: 100%;
+  min-width: 240px;
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+  align-items: center;
+  gap: 12px;
+}
+
+.cometchat-call-logs__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-call-logs__shimmer-item-body {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+
+  gap: var(--cometchat-padding-2, 8px);
+}
+
+.cometchat-call-logs__shimmer-item-body-title-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.cometchat-call-logs__shimmer-item-body-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-call-logs__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-call-logs__shimmer-item-body-tail {
+  width: 32px;
+  height: 32px;
+  min-height: 32px;
+  border-radius: var(--cometchat-radius-2, 8px);
+  background: var(
+    --cometchat-shimmer-gradient-color,
+    linear-gradient(90deg, #e0e0e0 0%, #eee 100%)
+  );
+  animation: shimmerAnimation 10.5s infinite linear;
+}
+
+.cometchat-call-logs .cometchat-list-item {
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+  cursor: pointer;
+} 
+
+.cometchat-call-logs .cometchat-list-item__body {
+  padding: 0px;
+}
+
+@keyframes shimmerAnimation {
+    0% {
+      background-position: -468px 0;
+    }
+  
+    100% {
+      background-position: 468px 0;
+    }
+  }

package/dist/styles/components/CometChatCard.css

@@ -0,0 +1,41 @@
+* {
+    box-sizing: border-box;
+}
+
+.cometchat-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px;
+    justify-content: space-between;
+    height: 100%;
+    width: 100%;
+}
+
+.cometchat-card__details {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.cometchat-card__subtitle-view {
+    margin-bottom: 20px;
+}
+
+.cometchat-card__image {
+    height: fit-content;
+    width: fit-content;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cometchat-card__bottom-view {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}

package/dist/styles/components/CometChatChangeScope.css

@@ -0,0 +1,197 @@
+.cometchat-change-scope {
+    display: flex;
+    width: 400px;
+    padding: var(--cometchat-padding-6, 24px) var(--cometchat-padding-6, 24px) var(--cometchat-padding-3, 12px) var(--cometchat-padding-6, 24px);
+    flex-direction: column;
+    align-items: center;
+    gap: var(--cometchat-padding-3, 12px);
+    border-radius: var(--cometchat-radius-5, 20px);
+    border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+    background: var(--cometchat-background-color-01, #FFF);
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+.cometchat-change-scope__icon-container {
+    display: flex;
+    width: 80px;
+    height: 80px;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--cometchat-radius-max, 1000px);
+    background: var(--cometchat-background-color-02, #FAFAFA);
+}
+
+.cometchat-change-scope__icon {
+    display: flex;
+    width: 48px;
+    height: 48px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    mask: url("../../assets/change_scope.png") center center no-repeat;
+    -webkit-mask: url("../../assets/change_scope.png") center center no-repeat;
+    background: var(--cometchat-icon-color-highlight, #6852D6);
+    mask-size: contain;
+    -webkit-mask-size: contain;
+}
+
+.cometchat-change-scope__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--cometchat-padding-2, 8px);
+    align-self: stretch;
+}
+
+.cometchat-change-scope__title {
+    align-self: stretch;
+    color: var(--cometchat-text-color-primary, #141414);
+    text-align: center;
+    font: var(--cometchat-font-heading2-medium, 500 20px Roboto);
+    line-height: 120%;
+}
+
+.cometchat-change-scope__description {
+    align-self: stretch;
+    color: var(--cometchat-text-color-secondary, #727272);
+    text-align: center;
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+    line-height: 120%;
+}
+
+.cometchat-change-scope__dropdown {
+    width: 352px;
+    height: 36px;
+    gap: var(--cometchat-padding-2, 4px);
+    border-radius: var(--cometchat-radius-2, 8px);
+    border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+    background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-change-scope__list {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0px;
+    align-self: stretch;
+    border-radius: var(--cometchat-radius-2, 8px);
+    border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+    background: var(--cometchat-background-color-01, #FFF);
+    height: fit-content;
+    overflow: auto;
+}
+
+.cometchat-change-scope__list::-webkit-scrollbar,
+.cometchat-change-scope__list::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+.cometchat-change-scope__list-item {
+    display: flex;
+    min-width: 240px;
+    max-width: 1440px;
+    height: 48px;
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
+    align-items: center;
+    gap: var(--cometchat-padding-3, 12px);
+    flex: 1 0 0;
+    align-self: stretch;
+    background: var(--cometchat-background-color-01, #FFF);
+}
+
+.cometchat-change-scope__list-item:hover {
+    background: var(--cometchat-white-hover, #FAFAFA);
+    cursor: pointer;
+}
+
+.cometchat-change-scope__list-item-label {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    color: var(--cometchat-text-color-primary, #141414);
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
+    flex: 1 0 0;
+    text-align: left;
+}
+
+.cometchat-change-scope__button-container {
+    display: flex;
+    padding: var(--cometchat-padding-3, 12px) 0px;
+    align-items: center;
+    gap: var(--cometchat-padding-2, 8px);
+    align-self: stretch;
+}
+.cometchat-change-scope__submit-button > .cometchat{
+    height: 100%;
+    width: 100%;
+}
+.cometchat-change-scope__submit-button{
+    height: 40px;
+    line-height: 120%;
+    flex: 1;
+}
+.cometchat-change-scope__submit-button .cometchat-button{
+    background: var(--cometchat-primary-button-background, #6852D6);
+    color: var(--cometchat-primary-button-icon, #FFF);
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--cometchat-radius-2, 8px);
+    border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+    font: var(--cometchat-font-body-medium, 500 14px Roboto);
+
+}
+
+.cometchat-change-scope__submit-button-disabled .cometchat-button{
+    background: var(--cometchat-background-color-04, #E8E8E8);
+    color: var(--cometchat-static-white, #FFF);
+    pointer-events: none;
+}
+
+.cometchat-change-scope__cancel-button > .cometchat{
+    height: 100%;
+    width: 100%;
+}
+.cometchat-change-scope__cancel-button .cometchat-button{
+    border: 1px solid var(--cometchat-border-color-dark, #DCDCDC);
+    background: var(--cometchat-background-color-01, #FFF);
+    color: var(--cometchat-neutral-color-900, #141414);
+    font: var(--cometchat-font-body-medium, 500 14px Roboto);
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--cometchat-radius-2, 8px);
+}
+.cometchat-change-scope__button-container .cometchat-button .cometchat-button__text{
+    font: inherit;
+    color: inherit;
+}
+.cometchat-change-scope__cancel-button{
+    height: 40px;
+    line-height: 120%;
+    flex: 1;
+}
+.cometchat-change-scope__error-view{
+    color: var(--cometchat-error-color, #F44649);
+    font: var(--cometchat-font-body-regular);
+    font-style: normal;
+    display: flex;
+    padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--cometchat-padding-1, 4px);
+    align-self: stretch;
+    border-radius: var(--cometchat-radius-2, 8px);
+    background: rgba(244, 70, 73, 0.10);
+
+}

package/dist/styles/components/CometChatCheckbox.css

@@ -0,0 +1,62 @@
+.cometchat-checkbox {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+}
+
+.cometchat-checkbox__label input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+}
+
+.cometchat-checkbox__checkmark {
+    display: inline-block;
+    position: relative;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    border-radius: var(--cometchat-radius-1, 4px);
+    border: 1.5px solid var(--cometchat-border-color-default, #E8E8E8);
+}
+
+.cometchat-checkbox:hover .cometchat-checkbox__checkmark {
+    border: 1.5px solid var(--cometchat-border-color-dark, #DCDCDC);
+    cursor: pointer;
+}
+
+
+.cometchat-checkbox input[type="checkbox"]:checked+.cometchat-checkbox__checkmark {
+    border: 1.5px solid var(--cometchat-primary-color, #6852D6);
+    background-color: var(--cometchat-primary-color, #6852D6);
+}
+
+.cometchat-checkbox__checkmark::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 16px;
+    height: 16px;
+    background: var(--cometchat-static-white, #FFF);
+    mask: url('../../assets/checkbox_tick.svg') center center no-repeat;
+    -webkit-mask: url('../../assets/checkbox_tick.svg') center center no-repeat;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    transform: translate(-50%, -50%);
+    display: none;
+}
+
+.cometchat-checkbox input[type="checkbox"]:checked+.cometchat-checkbox__checkmark::after {
+    display: block;
+}
+
+.cometchat-checkbox__label {
+    display: flex;
+    align-items: center;
+    gap: var(--cometchat-radius-2, 8px);
+    color: var(--cometchat-text-color-secondary);
+    font: var(--cometchat-font-body-regular);
+}