@cometchat/chat-uikit-react 4.3.24 → 5.0.0-beta2

package/dist/styles/components/CometChatDeleteBubble.css

@@ -0,0 +1,59 @@
+.cometchat-delete-bubble {
+    display: flex;
+    padding: var(--cometchat-padding-2, 8px);
+    flex-direction: column;
+    align-items: flex-end;
+    border-radius: var(--cometchat-radius-3, 12px);
+    max-width: 270px;
+}
+
+.cometchat-delete-bubble-outgoing {
+    background: var(--cometchat-primary-color, #6852D6);
+}
+
+.cometchat-delete-bubble-incoming {
+    background: var(--cometchat-neutral-color-300, #383838);
+}
+
+.cometchat-delete-bubble__body {
+    display: flex;
+    padding: 0px;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: var(--cometchat-padding-1, 4px);
+    border-radius: 0px;
+}
+
+.cometchat-delete-bubble__icon {
+    display: flex;
+    width: 16px;
+    height: 16px;
+    justify-content: center;
+    align-items: center;
+    mask: url("../../assets/message_delete.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/message_delete.svg") center center no-repeat;
+    background: var(--cometchat-primary-button-icon, #FFFFFF);
+    mask-size: contain;
+    -webkit-mask-size: contain;
+}
+
+.cometchat-delete-bubble-incoming .cometchat-delete-bubble__icon {
+    background: var(--cometchat-neutral-color-600, #727272);
+}
+
+.cometchat-delete-bubble-outgoing .cometchat-delete-bubble__icon {
+    background: var(--cometchat-static-white, #FFF);
+}
+
+.cometchat-delete-bubble__text {
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+    text-align: left;
+}
+
+.cometchat-delete-bubble-outgoing .cometchat-delete-bubble__text {
+    color: var(--cometchat-static-white, #FFF);
+}
+
+.cometchat-delete-bubble-incoming .cometchat-delete-bubble__text {
+    color: var(--cometchat-neutral-color-600, #989898);
+}

package/dist/styles/components/CometChatDocumentBubble.css

@@ -0,0 +1,130 @@
+.cometchat-document-bubble {
+    display: flex;
+    width: 240px;
+    flex-direction: column;
+    padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-1, 4px) 0px var(--cometchat-padding-1, 4px);
+    gap: 0px;
+    border-radius: var(--cometchat-radius-3, 12px);
+    max-width: 240px;
+
+}
+
+.cometchat-document-bubble-incoming {
+    background: var(--cometchat-neutral-color-300, #E8E8E8);
+}
+
+.cometchat-document-bubble-outgoing {
+    background: var(--cometchat-primary-color, #6852D6);
+}
+
+.cometchat-document-bubble__body {
+    display: flex;
+    padding: var(--cometchat-padding-2, 8px) 0px var(--cometchat-padding-2, 8px) 0px;
+    align-items: center;
+    gap: var(--cometchat-padding-1, 4px);
+    align-self: stretch;
+    border-radius: var(--cometchat-radius-3, 12px);
+}
+
+.cometchat-document-bubble__banner-image {
+    border-radius: var(--cometchat-radius-2, 8px);
+}
+
+.cometchat-document-bubble__banner-image img {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--cometchat-radius-2, 8px);
+}
+
+.cometchat-document-bubble__body-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cometchat-padding, 2px);
+}
+
+.cometchat-document-bubble__body-content-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-body-medium);
+    font-style: normal;
+    line-height: 120%;
+    text-align: left;
+}
+
+.cometchat-document-bubble-incoming .cometchat-document-bubble__body-content-name {
+    color: var(--cometchat-text-color-primary, #141414);
+}
+
+.cometchat-document-bubble-outgoing .cometchat-document-bubble__body-content-name {
+    color: var(--cometchat-static-white, #FFF);
+}
+
+.cometchat-document-bubble__body-content-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-caption2-regular);
+    font-style: normal;
+    line-height: 120%;
+}
+
+.cometchat-document-bubble-incoming .cometchat-document-bubble__body-content-description {
+    color: var(--cometchat-neutral-color-600, #727272);
+}
+
+.cometchat-document-bubble-outgoing .cometchat-document-bubble__body-content-description {
+    color: var(--cometchat-static-white, #FFF);
+}
+
+.cometchat-document-bubble__body-icon {
+    display: flex;
+    width: 32px;
+    height: 32px;
+    justify-content: center;
+    align-items: center;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    mask-size: 100%;
+}
+
+.cometchat-collaborative-document .cometchat-document-bubble__body-icon {
+    -webkit-mask: url("../../assets/collaborative_document_fill.svg")center center no-repeat;
+    mask: url("../../assets/collaborative_document_fill.svg") center center no-repeat;
+}
+
+.cometchat-collaborative-whiteboard .cometchat-document-bubble__body-icon {
+    -webkit-mask: url("../../assets/collaborative_whiteboard_fill.svg")center center no-repeat;
+    mask: url("../../assets/collaborative_whiteboard_fill.svg") center center no-repeat;
+}
+
+.cometchat-document-bubble-incoming .cometchat-document-bubble__body-icon {
+    background: var(--cometchat-primary-color, #6852D6);
+}
+
+
+.cometchat-document-bubble-outgoing .cometchat-document-bubble__body-icon {
+    background: var(--cometchat-static-white, #FFF);
+}
+
+.cometchat-document-bubble__button {
+    display: flex;
+    height: 40px;
+    padding: var(--cometchat-padding-5, 20px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--cometchat-padding-2, 8px);
+    align-self: stretch;
+    font: var(--cometchat-font-button-medium);
+    font-style: normal;
+    line-height: 120%;
+    cursor: pointer;
+}
+
+.cometchat-document-bubble-incoming .cometchat-document-bubble__button {
+    color: var(--cometchat-primary-button-background, #6852D6);
+    border-top: 1px solid var(--cometchat-border-color-dark, #DCDCDC);
+}
+
+.cometchat-document-bubble-outgoing .cometchat-document-bubble__button {
+    border-top: 1px solid var(--cometchat-extended-primary-color-800, #7965DB);
+    color: var(--cometchat-static-white, #FFF);
+}

package/dist/styles/components/CometChatDropDown.css

@@ -0,0 +1,82 @@
+.cometchat-dropdown {
+    position: relative;
+}
+
+.cometchat-dropdown__placeholder-text {
+    display: flex;
+    justify-content: space-between;
+    height: 36px;
+    width: 100%;
+    padding: var(--cometchat-padding-2, 8px);
+    align-items: center;
+    gap: var(--cometchat-padding-1, 4px);
+    align-self: stretch;
+    border-radius: var(--cometchat-radius-2, 8px);
+    background: var(--cometchat-background-color-01, #FFF);
+    border: 1px solid var(--cometchat-border-color-default, #F5F5F5);
+    overflow: hidden;
+    color: var(--cometchat-text-color-tertiary, #141414);
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+    line-height: 120%;
+}
+
+.cometchat-dropdown__placeholder-text label {
+    color: var(--cometchat-text-color-primary, #141414);
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+}
+
+.cometchat-dropdown__placeholder-text::after {
+    border: 1px solid var(--cometchat-border-color-highlight, #6852D6);
+}
+
+.cometchat-dropdown__arrow {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    justify-content: center;
+    align-items: center;
+    background: var(--cometchat-icon-color-primary, #6B7280);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask: url('../../assets/dropdown-arrow.svg');
+    cursor: pointer;
+}
+
+.cometchat-dropdown__items {
+    display: flex;
+    padding: 0px;
+    flex-direction: column;
+    align-items: flex-start;
+    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);
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    position: relative;
+    z-index: 20;
+}
+
+.cometchat-dropdown__item {
+    display: flex;
+    padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+    align-items: center;
+    gap: var(--cometchat-padding-3, 12px);
+    align-self: stretch;
+    background: var(--cometchat-background-color-01, #FFF);
+    overflow: hidden;
+    color: var(--cometchat-text-color-primary, #141414);
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+    line-height: 120%;
+}
+
+.cometchat-dropdown__item:hover {
+    border-right: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+    background: var(--cometchat-white-hover, #FAFAFA);
+    cursor: pointer;
+}
+
+.cometchat-dropdown__items-hidden {
+    display: none;
+}

package/dist/styles/components/CometChatEditPreview.css

@@ -0,0 +1,59 @@
+/*
+   Main container for the edit preview area.
+*/
+.cometchat-edit-preview {
+    padding: var(--cometchat-padding-2, 8px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 0;
+    min-height: 30px;
+    height: 100%;
+    width: 100%;
+    border: none;
+    background: var(--cometchat-background-color-03);
+    border-radius: var(--cometchat-radius-1, 4px);
+    box-sizing: border-box;
+    gap: var(--cometchat-padding-1, 4px);
+    position: relative;
+}
+
+/*
+   Close button for the edit preview.
+*/
+.cometchat-edit-preview__close {
+    mask: url("../../assets/close.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/close.svg") center center no-repeat;
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--cometchat-icon-color-primary);
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    position: absolute;
+    top: var(--cometchat-padding-2, 8px);
+    right: var(--cometchat-padding-2, 8px);
+    cursor: pointer;
+}
+
+/*
+   Title text inside the edit preview.
+*/
+.cometchat-edit-preview__title {
+    font: var(--cometchat-font-body-regular);
+    color: var(--cometchat-text-color-primary);
+    font-style: normal;
+}
+
+/*
+   Subtitle text inside the edit preview, containing the actual text being edited.
+*/
+.cometchat-edit-preview__subtitle {
+    font-style: normal;
+    text-align: left;
+    color: var(--cometchat-text-color-secondary);
+    font: var(--cometchat-font-caption1-regular);
+}

package/dist/styles/components/CometChatEmojiKeyboard.css

@@ -0,0 +1,146 @@
+.cometchat-emoji-keyboard {
+    display: flex;
+    width: 300px;
+    height: 300px;
+    overflow: hidden;
+    padding: 0px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0px;
+    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);
+}
+
+.cometchat-emoji-keyboard__tabs {
+    display: flex;
+    width: 100%;
+    min-height: 48px;
+    overflow: scroll hidden;
+    padding: var(--cometchat-padding-2, 8px);
+    align-items: center;
+    gap: var(--cometchat-padding-2, 4px);
+    border-bottom: 1px solid var(--cometchat-border-color-default, #E8E8E8);
+    cursor: pointer;
+  /* Force hardware acceleration */
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  will-change: scroll-position; /* Hint the browser for performance optimization */
+}
+
+.cometchat-emoji-keyboard__search {
+    width: 100%;
+     height: fit-content;
+     padding: var(--cometchat-padding-3, 12px);
+}
+
+.cometchat-emoji-keyboard .cometchat-search-bar {
+    height: 36px;
+}
+
+.cometchat-emoji-keyboard .cometchat-search-bar input,
+.cometchat-emoji-keyboard .cometchat-search-bar input::placeholder {
+    font: var(--cometchat-font-body-regular, 700 14px Roboto);
+}
+
+.cometchat-emoji-keyboard__list .cometchat-search {
+    display: flex;
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
+    align-items: center;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: var(--cometchat-radius-max, 1000px);
+    border: 1px solid var(--cometchat-border-color-light, #F5F5F5);
+    background: var(--cometchat-background-color-03, #F5F5F5);
+}
+
+.cometchat-emoji-keyboard__list-content {
+    display: contents;
+}
+
+.cometchat-emoji-keyboard__emoji-list {
+    flex-wrap: wrap;
+    display: flex;
+    align-items: center;
+    gap: var(--cometchat-spacing-2, 8px);
+}
+
+.cometchat-emoji-keyboard__list-item {
+    font-size: 24px;
+    cursor: pointer;
+    border-radius: var(--cometchat-radius-2, 8px);
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    height: 32px;
+    width: 32px;
+}
+
+.cometchat-emoji-keyboard__list-item:hover{
+    background-color: var(--cometchat-background-color-03, #F5F5F5);
+}
+
+.cometchat-emoji-keyboard__list-item:active{
+    background-color: var(--cometchat-background-color-04, #E8E8E8);
+}
+
+.cometchat-emoji-keyboard__list-title {
+    color: var(--cometchat-text-color-tertiary, #A1A1A1);
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+    line-height: 120%;
+    text-align: left;
+}
+
+.cometchat-emoji-keyboard__tab-active {
+    background: var(--cometchat-extended-primary-color-100, #EDEAFA);
+}
+
+.cometchat-emoji-keyboard__tab {
+    display: flex;
+    width: 32px;
+    height: 32px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 12.8px;
+    flex-shrink: 0;
+    border-radius: var(--cometchat-radius-2, 8px);
+}
+
+.cometchat-emoji-keyboard__list::-webkit-scrollbar,
+.cometchat-emoji-keyboard__list::-webkit-scrollbar-thumb,
+.cometchat-emoji-keyboard__tabs::-webkit-scrollbar,
+.cometchat-emoji-keyboard__tabs::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+.cometchat-emoji-keyboard__list {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    display: flex;
+    padding: 0px var(--cometchat-padding-3, 12px) var(--cometchat-padding-3, 12px);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--cometchat-padding-2, 8px);
+    align-self: stretch;
+}
+
+.cometchat-emoji-keyboard__tab-icon {
+    background: var(--cometchat-icon-color-secondary, #A1A1A1);
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    width: 17px;
+    height: 17px;
+}
+
+.cometchat-emoji-keyboard__tab-active .cometchat-emoji-keyboard__tab-icon {
+    background: var(--cometchat-icon-color-highlight, #6852D6);
+}
+
+
+[data-theme="dark"] .cometchat-emoji-keyboard .cometchat-emoji-keyboard__list-item {
+    color: var( --cometchat-neutral-color-500);
+}

package/dist/styles/components/CometChatFileBubble.css

@@ -0,0 +1,182 @@
+/* Main file bubble container with flex layout, gap, and background settings */
+.cometchat-file-bubble {
+    justify-content: space-between;
+    overflow: hidden;
+    box-sizing: border-box;
+    gap: var(--cometchat-padding-2, 8px);
+    border: none;
+    border-radius: none;
+    display: flex;
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-2, 8px) var(--cometchat-padding-2, 8px) var(--cometchat-padding-1, 4px);
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--cometchat-radius-3, 12px);
+    align-self: stretch;
+    width: 240px;
+    max-width: 240px;
+}
+.cometchat-file-bubble>div:not([class]) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--cometchat-padding-2, 8px);
+    flex: 1 0 0;
+    width: inherit;
+    overflow: hidden;
+}
+/* Body section of the file bubble with text alignment and overflow settings */
+.cometchat-file-bubble__body {
+    word-wrap: break-word;
+    text-align: left;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cometchat-padding);
+}
+
+/* Styling for the name inside the body */
+.cometchat-file-bubble__body-name {
+    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;
+}
+
+/* Styling for file details section (file size, type, etc.) */
+.cometchat-file-bubble__body-details {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-caption2-regular);
+    font-style: normal;
+
+}
+
+/* Leading view section (e.g., file icon) with flex settings */
+.cometchat-file-bubble__leading-view {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    width: fit-content;
+}
+
+/* Download icon for the tail view (right side of the file bubble) */
+.cometchat-file-bubble__tail-view-download {
+    mask: url("../../assets/download.svg");
+    -webkit-mask: url("../../assets/download.svg");
+    display: flex;
+    width: 20px;
+    height: 20px;
+    justify-content: center;
+    align-items: center;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    background: var(--cometchat-primary-color);
+    cursor: pointer;
+}
+
+/* Adjustments for incoming file bubble name text color */
+.cometchat-file-bubble-incoming .cometchat-file-bubble__body-name {
+    color: var(--cometchat-neutral-color-900);
+}
+
+/* Adjustments for incoming file bubble details text color */
+.cometchat-file-bubble-incoming .cometchat-file-bubble__body-details {
+    color: var(--cometchat-neutral-color-600);
+}
+
+/* Adjustments for outgoing file bubble name text color */
+.cometchat-file-bubble-outgoing .cometchat-file-bubble__body-name {
+    color: var(--cometchat-static-white);
+}
+
+/* Adjustments for outgoing file bubble details text color */
+.cometchat-file-bubble-outgoing .cometchat-file-bubble__body-details {
+    color: var(--cometchat-static-white);
+}
+
+/* Background color for incoming file bubbles */
+.cometchat-file-bubble-incoming {
+    background: var(--cometchat-neutral-color-300);
+}
+
+/* Background color for outgoing file bubbles */
+.cometchat-file-bubble-outgoing {
+    background: var(--cometchat-primary-color);
+}
+
+
+/* Progress circle container with a fixed width and height */
+.cometchat-file-bubble__tail-view-download-progress {
+    position: relative;
+    width: 20px;
+    height: 20px;
+}
+
+/* SVG within the download progress container with rotation */
+.cometchat-file-bubble__tail-view-download-progress svg {
+    width: 20px;
+    height: 20px;
+    transform: rotate(-90deg);
+}
+
+/* Close icon in the progress view to stop/cancel download */
+.cometchat-file-bubble__tail-view-download-stop {
+    mask: url("../../assets/close.svg");
+    -webkit-mask: url("../../assets/close.svg");
+    background: var(--cometchat-primary-color);
+    display: flex;
+    width: 12px;
+    height: 12px;
+    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;
+}
+
+/* Background circle for the download progress */
+circle.cometchat-file-bubble__tail-view-download-progress-background {
+    stroke: var(--cometchat-primary-color);
+    stroke-dasharray: 113 113;
+    stroke-width: 2;
+    fill: none;
+    opacity: .2;
+}
+
+/* Foreground circle that indicates download progress */
+circle.cometchat-file-bubble__tail-view-download-progress-foreground {
+    stroke: var(--cometchat-primary-color);
+    stroke-dasharray: 0 113;
+    stroke-width: 2;
+    fill: none;
+    stroke-linecap: round;
+}
+
+/* Tail view download button for outgoing file bubble */
+.cometchat-file-bubble-outgoing .cometchat-file-bubble__tail-view-download {
+    background: var(--cometchat-static-white);
+}
+
+/* Background circle for download progress in outgoing bubble */
+.cometchat-file-bubble-outgoing circle.cometchat-file-bubble__tail-view-download-progress-background {
+    stroke: var(--cometchat-static-white);
+    opacity: .2;
+}
+
+/* Foreground circle for download progress in outgoing bubble */
+.cometchat-file-bubble-outgoing circle.cometchat-file-bubble__tail-view-download-progress-foreground {
+    stroke: var(--cometchat-static-white);
+}
+
+/* Stop download icon for outgoing file bubble */
+.cometchat-file-bubble-outgoing .cometchat-file-bubble__tail-view-download-stop {
+    background: var(--cometchat-static-white);
+}