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

package/dist/styles/components/AISmartReplies.css

@@ -0,0 +1,122 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.cometchat-ai-smart-replies {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: var(--cometchat-padding-3, 12px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--cometchat-padding-4, 16px);
+  border-radius: var(--cometchat-radius-4, 16px);
+}
+
+.cometchat-ai-smart-replies__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+.cometchat-ai-smart-replies__header-title {
+  overflow: hidden;
+  color: var(--cometchat-text-color-primary, #141414);
+  text-overflow: ellipsis;
+  font: var(--cometchat-font-heading4-medium);
+  font-style: normal;
+}
+
+.cometchat-ai-smart-replies__item-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding-2, 8px);
+  overflow: scroll;
+}
+
+.cometchat-ai-smart-replies__item-wrapper::-webkit-scrollbar,
+.cometchat-ai-smart-replies__item-wrapper::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+.cometchat-ai-smart-replies__item {
+  display: flex;
+  flex: 1 0 0;
+  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
+  align-items: center;
+  align-content: center;
+  gap: 4px var(--cometchat-padding-1, 4px);
+  align-self: stretch;
+  flex-wrap: wrap;
+  border-radius: var(--cometchat-radius-2, 8px);
+  border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+  background: var(--cometchat-background-color-01, #FFF);
+  text-align: left;
+}
+
+.cometchat-ai-smart-replies__item:hover {
+  background: var(--cometchat-white-hover, #FAFAFA);
+  cursor: pointer;
+}
+
+.cometchat-ai-smart-replies__item-button {
+  background: transparent;
+  border: none;
+  text-align: left;
+  color: var(--cometchat-text-color-primary, #141414);
+}
+
+.cometchat-ai-smart-replies__header-close-button {
+  cursor: pointer;
+  mask-repeat: no-repeat;
+  background-color: var(--cometchat-icon-color-primary, #141414);
+  height: 20px;
+  width: 20px;
+  -webkit-mask: url("../../assets/close.svg");
+  mask: url("../../assets/close.svg");
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+
+.cometchat-ai-smart-replies__shimmer-item {
+  max-height: 33px;
+  display: flex;
+  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
+  align-items: center;
+  align-content: center;
+  gap: 4px var(--cometchat-padding-1, 4px);
+  align-self: stretch;
+  flex-wrap: wrap;
+  border-radius: var(--cometchat-radius-2, 8px);
+  border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+  flex: 1 0 0;
+  background: var(--cometchat-shimmer-gradient-color, linear-gradient(90deg, #E0E0E0 0%, #EEE 100%));
+  animation: shimmerAnimation 1.5s infinite linear;
+}
+
+.cometchat-ai-smart-replies__error-view,
+.cometchat-ai-smart-replies__empty-view {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-align: center;
+  font: var(--cometchat-font-body-regular);
+  font-style: normal;
+}
+
+
+@keyframes shimmerAnimation {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}

package/dist/styles/components/CometChatActionBubble.css

@@ -0,0 +1,19 @@
+.cometchat-action-bubble {
+    display: flex;
+    padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-3, 12px);
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--cometchat-radius-max, 1000px);
+    border: 1px solid var(--cometchat-border-color-default);
+    background: var(--cometchat-background-color-02);
+}
+
+.cometchat-action-bubble__text {
+    color: var(--cometchat-text-color-secondary);
+    text-align: center;
+    font: var(--cometchat-font-caption1-regular);
+}
+
+.cometchat-action-bubble__icon {
+    display: none;
+}

package/dist/styles/components/CometChatActionSheet.css

@@ -0,0 +1,60 @@
+.cometchat-action-sheet {
+    display: flex;
+    width: max-content;
+    height: 310px;
+    padding: 0px;
+    flex-direction: column;
+    align-items: flex-start;
+    position: absolute;
+    border-radius: var(--cometchat-radius-4, 16px);
+    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);
+    overflow: hidden;
+    overflow-y: auto;
+    justify-content: flex-start;
+}
+
+.cometchat-action-sheet::-webkit-scrollbar,
+.cometchat-action-sheet::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+.cometchat-action-sheet__item-icon {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    background: var(--cometchat-icon-color-highlight, #6852D6);
+    mask-size: contain;
+    -webkit-mask-size: contain;
+}
+
+.cometchat-action-sheet__item-body {
+    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-regular, 400 16px Roboto);
+    line-height: 120%;
+    text-align: left;
+}
+
+.cometchat-action-sheet__item {
+    display: flex;
+    align-items: center;
+    gap: var(--cometchat-padding-2, 8px);
+    padding: var(--cometchat-padding-4, 16px);
+    cursor: pointer;
+    width: 100%;
+}
+
+.cometchat-action-sheet__item:hover  {
+    background: var(--cometchat-white-hover);
+}
+.cometchat-popover .cometchat-action-sheet {
+    height: inherit;
+}

package/dist/styles/components/CometChatAudioBubble.css

@@ -0,0 +1,191 @@
+/* Base audio bubble container */
+.cometchat-audio-bubble {
+    border: none;
+    display: flex;
+    background: transparent;
+    display: flex;
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-2, 8px) 0px var(--cometchat-padding-2, 8px);
+    flex-direction: row;
+    align-items: flex-start;
+    align-self: stretch;
+    border-radius: var(--cometchat-radius-3, 12px);
+    max-width: 240px;
+    width: 240px;
+}
+
+/* Download icon for the tail view (right side of the audio bubble) */
+.cometchat-audio-bubble__tail-view-download {
+    mask: url("../../assets/download.svg");
+    -webkit-mask: url("../../assets/download.svg");
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    cursor: pointer;
+    background: var(--cometchat-static-white);
+
+}
+
+/* Waveform container inside the audio bubble body */
+.cometchat-audio-bubble__body-wave {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Container for download progress circle (24x24 size) */
+.cometchat-audio-bubble__tail-view-download-progress {
+    position: relative;
+    width: 24px;
+    height: 24px;
+}
+
+/* Rotate the SVG progress circle for correct start position */
+.cometchat-audio-bubble__tail-view-download-progress svg {
+    width: 24px;
+    height: 24px;
+    transform: rotate(-90deg);
+}
+
+/* Close/stop icon inside the progress view (positioned in the center) */
+.cometchat-audio-bubble__tail-view-download-stop {
+    mask: url("../../assets/close.svg");
+    -webkit-mask: url("../../assets/close.svg");
+    background: var(--cometchat-static-white);
+    display: flex;
+    width: 15px;
+    height: 15px;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    cursor: pointer;
+}
+.cometchat-audio-bubble>div:not([class]) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--cometchat-padding-2, 8px);
+    flex: 1 0 0;
+}
+
+/* Time display (current time / duration) inside the audio bubble body */
+.cometchat-audio-bubble__body-time {
+    color: var(--cometchat-static-white);
+    font: var(--cometchat-font-caption2-regular);
+    width: 100%;
+    text-align: left;
+}
+
+/* Body of the audio bubble, containing waveform and time display */
+.cometchat-audio-bubble__body {
+    padding: 0px var(--cometchat-padding-2) 0px var(--cometchat-padding-3);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--cometchat-padding);
+}
+
+/* Play and pause icons for controlling the audio bubble */
+.cometchat-audio-bubble__leading-view-play,
+.cometchat-audio-bubble__leading-view-pause {
+    height: 24px;
+    width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--cometchat-primary-color);
+    cursor: pointer;
+
+}
+
+/* Play button icon */
+.cometchat-audio-bubble__leading-view-play {
+    mask: url("../../assets/play_arrow.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/play_arrow.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+}
+
+/* Pause button icon */
+.cometchat-audio-bubble__leading-view-pause {
+    mask: url("../../assets/pause.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/pause.svg") center center no-repeat;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+}
+
+/* Leading view container (play/pause button) with rounded background */
+.cometchat-audio-bubble__leading-view {
+    background: var(--cometchat-static-white);
+    cursor: pointer;
+    display: flex;
+    width: 32px;
+    border-radius: var(--cometchat-radius-max, 1000px);
+    height: 32px;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Background circle of the download progress indicator */
+circle.cometchat-audio-bubble__tail-view-download-progress-background {
+    stroke: var(--cometchat-static-white);
+    stroke-dasharray: 113 113;
+    opacity: .2;
+    stroke-width: 2;
+    fill: none;
+}
+
+/* Foreground circle that indicates download progress */
+circle.cometchat-audio-bubble__tail-view-download-progress-foreground {
+    stroke: var(--cometchat-static-white);
+    stroke-dasharray: 0 113;
+    stroke-width: 2;
+    fill: none;
+    stroke-linecap: round;
+}
+
+/* Outgoing audio bubble (message sent by the user) background */
+.cometchat-audio-bubble-outgoing {
+    background: var(--cometchat-primary-color);
+}
+
+/* Incoming audio bubble (message received by the user) background */
+.cometchat-audio-bubble-incoming {
+    background: var(--cometchat-neutral-color-300);
+}
+
+/* Tail view download button for incoming audio bubble */
+.cometchat-audio-bubble-incoming .cometchat-audio-bubble__tail-view-download {
+    background: var(--cometchat-primary-color);
+}
+
+/* Background circle for download progress in incoming bubble */
+.cometchat-audio-bubble-incoming circle.cometchat-audio-bubble__tail-view-download-progress-background {
+    stroke: var(--cometchat-primary-color);
+    opacity: .2;
+}
+
+/* Foreground circle for download progress in incoming bubble */
+.cometchat-audio-bubble-incoming circle.cometchat-audio-bubble__tail-view-download-progress-foreground {
+    stroke: var(--cometchat-primary-color);
+}
+
+/* Stop download icon for incoming audio bubble */
+.cometchat-audio-bubble-incoming .cometchat-audio-bubble__tail-view-download-stop {
+    background: var(--cometchat-primary-color);
+}
+
+/* Time display in incoming audio bubble */
+.cometchat-audio-bubble-incoming .cometchat-audio-bubble__body-time {
+    color: var(--cometchat-neutral-color-600);
+}

package/dist/styles/components/CometChatAvatar.css

@@ -0,0 +1,35 @@
+.cometchat-avatar {
+    display: flex;
+    width: 48px;
+    height: 48px;
+    background: var(--cometchat-extended-primary-color-500, #AA9EE8);
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--cometchat-radius-max, 1000px);
+}
+
+.cometchat-avatar__image {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--cometchat-primary-button-icon, #FFF);
+    text-align: center;
+    font: var(--cometchat-font-title-bold, 700 32px Roboto);
+    border-radius: var(--cometchat-radius-max, 1000px);
+}
+
+.cometchat-avatar__text {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    font: var(--cometchat-font-heading3-bold, 700 20px Roboto);
+    color: var(--cometchat-primary-button-icon, #FFF);
+    text-align: center;
+}

package/dist/styles/components/CometChatBadge.css

@@ -0,0 +1,15 @@
+.cometchat-badge {
+    height: min-content;
+    width: min-content;
+    border-radius: 20px;
+    background: #6852D6;
+    font-weight: 400;
+    font-size: 12px;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    min-width: 26px;
+    min-height: 16px;
+}

package/dist/styles/components/CometChatButton.css

@@ -0,0 +1,61 @@
+.cometchat-button {
+    display: flex;
+    height: 40px;
+    width: 160px;
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    border-radius: var(--cometchat-radius-2, 8px);
+    border: none;
+    background: var(--cometchat-primary-button-background, #6852D6);
+    cursor: pointer;
+}
+
+.cometchat-button__text {
+    color: var(--cometchat-static-white, #FFFFFF);
+    font: var(--cometchat-font-button-medium, 500 14px Roboto);
+    line-height: 120%;
+    cursor: pointer;
+}
+
+.cometchat-button__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.cometchat-button__icon-default {
+    height: 24px;
+    width: 24px;
+}
+
+.cometchat-button:hover {
+    background: var(--cometchat-extended-primary-color-800, #7A6BD6);
+}
+
+.cometchat-button:active {
+    background: var(--cometchat-extended-primary-color-900, #5D49BE);
+    outline: none;
+}
+
+.cometchat-button:focus {
+    outline: none;
+}
+
+.cometchat-button__loading-view {
+    width: 24px;
+    height: 24px;
+    animation: spin .8s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/dist/styles/components/CometChatCallBubble.css

@@ -0,0 +1,199 @@
+/**
+Represents the overall container for the call bubble component. It is a flexible container that displays its content in a column format and aligns its items centrally.
+*/
+.cometchat-call-bubble {
+    display: flex;
+    max-width: 240px;
+    width: 240px;
+    flex-direction: column;
+    align-items: center;
+    gap: 0px;
+    background: var(--cometchat-primary-color);
+    border-radius: var(--cometchat-radius-3, 12px);
+    background: inherit;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+/**
+Defines the main body of the call bubble,
+organizing its child elements in a flexible layout and aligning them appropriately.
+*/
+.cometchat-call-bubble__body {
+    display: flex;
+    padding: var(--cometchat-padding-3, 12px);
+    align-items: center;
+    gap: var(--cometchat-padding-2, 8px);
+    align-self: stretch;
+}
+
+/**
+Represents the title area of the call bubble,
+ensuring the text is constrained to a single line and truncates overflowed text with ellipsis.
+*/
+.cometchat-call-bubble__body-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    align-self: stretch;
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-body-medium);
+    font-style: normal;
+}
+
+/**
+Specifies the icon within the call bubble,
+typically an SVG used to visually represent a type of call (e.g., video or voice).
+*/
+.cometchat-call-bubble__icon-wrapper-icon {
+    mask: url("../../assets/incoming_video.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/incoming_video.svg") center center no-repeat;
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--cometchat-primary-color);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+}
+
+/**
+Acts as the wrapper for the call bubble icon,
+setting its size and background with a rounded appearance.
+*/
+.cometchat-call-bubble__icon-wrapper {
+    display: flex;
+    width: 40px;
+    border-radius: var(--cometchat-radius-max, 1000px);
+    background: var(--cometchat-static-white);
+    height: 40px;
+
+    padding: var(--cometchat-padding-2);
+    justify-content: center;
+    align-items: center;
+}
+
+/**
+Represents the subtitle text within the call bubble,
+ensuring the text is truncated with ellipsis to fit within the given space.
+*/
+.cometchat-call-bubble__body-content-subtitle {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    align-self: stretch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-caption1-regular);
+    font-style: normal;
+}
+
+/**
+Defines the styling of the subtitle date within the body content of the call bubble
+*/
+.cometchat-call-bubble__body-content-subtitle .cometchat-date {
+    padding: 0px;
+    color: inherit;
+    font: inherit;
+  }
+
+/**
+Provides additional content styling for the body of the call bubble, aligning the content text to the left.
+*/
+.cometchat-call-bubble__body-content {
+    text-align: left;
+}
+
+
+/**
+ Defines the button at the bottom of the call bubble,
+ making it fully responsive in width and controlling its appearance with inherited styles.
+*/
+.cometchat-call-bubble__button {
+    display: flex;
+    height: 40px;
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
+    border: none;
+    justify-content: center;
+    align-items: center;
+    gap: var(--cometchat-padding-2, 8px);
+    align-self: stretch;
+    width: 100%;
+    background: inherit;
+    border-radius: 0px 0px var(--cometchat-radius-radius_2, 8px) var(--cometchat-radius-radius_2, 8px);
+    font: var(--cometchat-font-body-medium);
+    font-style: normal;
+    cursor: pointer;
+}
+
+/**
+Represents the visual styling for an incoming call bubble,
+providing a background color specific to incoming calls.
+*/
+.cometchat-call-bubble-incoming {
+    background: var(--cometchat-neutral-color-300);
+}
+
+/**
+Represents the visual styling for an outgoing call bubble,
+providing a background color specific to outgoing calls.
+*/
+.cometchat-call-bubble-outgoing {
+    background: var(--cometchat-primary-color);
+}
+
+/**
+Adjusts the subtitle text color within an incoming call bubble.
+*/
+.cometchat-call-bubble-incoming .cometchat-call-bubble__body-content-subtitle {
+    color: var(--cometchat-neutral-color-600);
+}
+
+.cometchat-call-bubble__body-content-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-body-medium);
+}
+
+/**
+ Adjusts the title text color for the body content within an incoming call bubble.
+*/
+.cometchat-call-bubble-incoming .cometchat-call-bubble__body-content-title {
+    color: var(--cometchat-neutral-color-900);
+}
+
+/**
+Adjusts the subtitle text color within an outgoing call bubble.
+*/
+.cometchat-call-bubble-outgoing .cometchat-call-bubble__body-content-subtitle {
+    color: var(--cometchat-static-white);
+}
+
+/**
+ Adjusts the title text color for the body content within an outgoing call bubble.
+*/
+.cometchat-call-bubble-outgoing .cometchat-call-bubble__body-content-title {
+    color: var(--cometchat-static-white);
+}
+
+/**
+Defines the styling of the button for incoming call bubbles,
+adding a border and setting the button text color.
+*/
+.cometchat-call-bubble-incoming .cometchat-call-bubble__button {
+    border-top: 1px solid var(--cometchat-border-color-dark);
+    color: var(--cometchat-neutral-color-900);
+}
+
+/**
+Defines the styling of the button for outgoing call bubbles,
+including a top border and button text color.
+*/
+.cometchat-call-bubble-outgoing .cometchat-call-bubble__button {
+    border-top: 1px solid var(--cometchat-extended-primary-color-800);
+    color: var(--cometchat-static-white);
+}