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

package/dist/styles/CometChatMessageComposer.css

@@ -0,0 +1,302 @@
+/* Message Composer container - main wrapper */
+.cometchat-message-composer {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    align-self: stretch;
+    border-radius: var(--cometchat-radius-2, 8px);
+    border: 1px solid var(--cometchat-border-color-light);
+    background: var(--cometchat-background-color-01);
+    width: 100%;
+    height: 100%;
+}
+
+/* Send button styling */
+.cometchat-message-composer__send-button {
+    display: flex;
+    width: 32px;
+    height: 32px;
+    padding: var(--cometchat-padding-1, 4px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--cometchat-padding-1, 4px);
+    border-radius: 60px;
+    background: var(--cometchat-background-color-04);
+}
+
+/* Default state for the send button */
+.cometchat-message-composer__send-button .cometchat-button {
+    cursor: default;
+}
+
+/* Active state for the send button */
+.cometchat-message-composer__send-button-active {
+    cursor: pointer;
+    background: var(--cometchat-primary-color);
+}
+
+
+/* Sticker button popover content */
+.cometchat-message-composer__auxilary-button-view-sticker-button .cometchat-popover__content {
+    height: 300px;
+    overflow: hidden;
+    width: 272px;
+}
+
+/* Emoji keyboard button popover content */
+.cometchat-message-composer__emoji-keyboard-button .cometchat-popover__content {
+    height: 300px;
+    width: 300px;
+    overflow: hidden;
+}
+
+/* Action sheet button popover content */
+.cometchat-message-composer__secondary-button-view-attachment-button .cometchat-popover__content {
+    height: 332px;
+    border: none;
+}
+
+/* Voice recording button popover content */
+.cometchat-message-composer__voice-recording-button .cometchat-popover__content {
+    width: fit-content;
+}
+
+/* AI button popover content */
+.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-popover__content {
+    min-height: 110px;
+    width: fit-content;
+    min-width: 280px;
+    max-height: 240px;
+    max-width: 280px;
+}
+
+.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-popover__content>.cometchat {
+    border-radius: inherit;
+}
+
+.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-popover__content .cometchat-ai-smart-replies {
+    height: 200px;
+}
+
+.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-action-sheet__item {
+    padding: var(--cometchat-padding-3, 12px);
+}
+
+.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-action-sheet__item-body {
+    font: var(--cometchat-font-body-regular);
+
+}
+
+.cometchat-message-composer__auxilary-button-view-ai-button .cometchat-action-sheet {
+    justify-content: center;
+    border: none;
+    border-radius: inherit;
+    background: inherit;
+    box-shadow: none;
+    width: 100%;
+    height: 100%;
+}
+
+.cometchat-message-composer__input .cometchat-mentions>span {
+    color: var(--cometchat-text-color-highlight, #6852D6);
+    font: var(--cometchat-font-body-regular);
+}
+
+.cometchat-message-composer__input .cometchat-mentions-you>span {
+    color: var(--cometchat-warning-color, #FFAB00);
+    font: var(--cometchat-font-body-regular);
+}
+
+/* Styling for buttons with no specific class */
+.cometchat-message-composer div:not([class]) .cometchat-button {
+    width: fit-content;
+    background: transparent;
+    padding: 0;
+    gap: 0;
+    height: 24px;
+}
+
+.cometchat-message-composer__unblock-button {
+    color: var(--cometchat-neutral-color-900);
+    font: var(--cometchat-font-body-regular);
+    cursor: pointer;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border-radius: var(--cometchat-radius-2, 8px);
+    border: 1px solid var(--cometchat-border-color-dark);
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
+}
+
+/* Composer header wrapper */
+.cometchat-message-composer__header {
+    width: 100%;
+    height: fit-content;
+    display: flex;
+    padding: var(--cometchat-padding-1, 4px);
+    justify-content: space-between;
+    align-items: flex-start;
+    align-self: stretch;
+    flex-direction: column;
+}
+
+.cometchat-message-composer__header-error-state {
+    display: flex;
+    padding: var(--cometchat-padding-2, 8px);
+    align-items: center;
+    gap: var(--cometchat-padding-1);
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: var(--cometchat-radius-1, 4px);
+    background: var(--cometchat-background-color-02);
+}
+
+.cometchat-message-composer__header-error-state-icon-wrapper {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--cometchat-error-color);
+    border-radius: var(--cometchat-radius-max);
+}
+
+.cometchat-message-composer__header-error-state-icon {
+    -webkit-mask: url("../../assets/error_info.svg");
+    width: 20px;
+    height: 20px;
+    -webkit-mask-size: contain;
+    background: var(--cometchat-static-white);
+}
+
+.cometchat-message-composer__header-error-state-text {
+    overflow: hidden;
+    color: var(--cometchat-error-color);
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-caption1-regular);
+}
+
+/* Mentions wrapper styling */
+.cometchat-mention-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    z-index: 2;
+    height: fit-content;
+    min-height: 45px;
+    padding: 0 0 1px 0;
+    width: fit-content;
+    align-self: flex-start;
+    min-width: 320px;
+    bottom: 100%;
+    left: 0;
+    position: absolute;
+    max-height: 336px;
+    border-radius: var(--cometchat-radius-4, 16px);
+    border: 1px solid var(--cometchat-background-color-01);
+    background: var(--cometchat-background-color-01);
+    box-shadow: 0 12px 16px 4px rgba(16, 24, 40, 0.08), 0 4px 6px 4px rgba(16, 24, 40, 0.03);
+}
+
+.cometchat-mention-list .cometchat-list {
+    max-height: 336px;
+}
+
+.cometchat-mention-list>.cometchat {
+    overflow: hidden;
+    border-radius: inherit;
+}
+
+/* Message input area */
+.cometchat-message-composer__input {
+    width: 100%;
+    outline: none;
+    background: transparent;
+    overflow-y: auto;
+    min-height: 30px;
+    user-select: text;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    text-align: left;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--cometchat-border-color-light);
+    padding: var(--cometchat-padding-3, 12px);
+    color: var(--cometchat-text-color-primary);
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-body-regular);
+    max-height: 150px;
+    scrollbar-width: none;
+    cursor: text;
+}
+
+/* Auxiliary button container */
+.cometchat-message-composer__auxilary-button-view {
+    display: flex;
+    justify-content: flex-start;
+    gap: 12px;
+    width: 100%;
+    align-items: center;
+}
+
+/* Placeholder styling when input is empty */
+.cometchat-message-composer__input:empty:before {
+    content: attr(data-placeholder);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    color: var(--cometchat-text-color-tertiary);
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-body-regular);
+}
+
+/* Send button icon default styling */
+.cometchat-message-composer div:not([class]) .cometchat-message-composer__send-button .cometchat-button .cometchat-button__icon {
+    background: var(--cometchat-static-white);
+}
+
+/* Icon styling for buttons with no specific class */
+.cometchat-message-composer div:not([class]) .cometchat-button .cometchat-button__icon {
+    background: var(--cometchat-icon-color-secondary);
+}
+
+.cometchat-message-composer div:not([class]) .cometchat-button .cometchat-button__icon:hover {
+    background: var(--cometchat-primary-color, #6852D6);
+}
+
+.cometchat-message-composer div:not([class]) .cometchat-message-composer__send-button .cometchat-button .cometchat-button__icon:hover {
+    background: var(--cometchat-static-white);
+}
+
+/* Active emoji keyboard button icon */
+.cometchat-message-composer div:not([class]) .cometchat-message-composer__emoji-keyboard-button-active .cometchat-button__icon {
+    background: var(--cometchat-primary-color);
+}
+
+/* Active action sheet button icon */
+.cometchat-message-composer div:not([class]) .cometchat-message-composer__secondary-button-view-attachment-button-active .cometchat-button__icon {
+    background: var(--cometchat-primary-color);
+}
+
+/* Active voice recording button icon */
+.cometchat-message-composer div:not([class]) .cometchat-message-composer__voice-recording-button-active .cometchat-button__icon {
+    background: var(--cometchat-primary-color);
+}
+
+/* Active AI button icon */
+.cometchat-message-composer div:not([class]) .cometchat-message-composer__auxilary-button-view-ai-button-active .cometchat-button__icon {
+    background: var(--cometchat-primary-color);
+}
+
+/* Active stickerkeyboard button icon */
+.cometchat-message-composer div:not([class]) .cometchat-message-composer__auxilary-button-view-sticker-button-active .cometchat-button__icon {
+    background: var(--cometchat-primary-color);
+}
+
+.cometchat-message-composer__input-mobile{
+    font: var( --cometchat-font-heading4-regular);
+}

package/dist/styles/CometChatMessageHeader.css

@@ -0,0 +1,168 @@
+/* Container for the message header, aligning items horizontally */
+
+.cometchat-message-header {
+    display: flex;
+    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;
+    justify-content: space-between;
+    height: 64px;
+    background: var(--cometchat-background-color-01);
+    width: 100%;
+    overflow: hidden;
+}
+
+/* Subtitle styling within the message header */
+
+.cometchat-message-header .cometchat-message-header__subtitle {
+    overflow: hidden;
+    color: var(--cometchat-icon-color-secondary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: var(--cometchat-font-caption1-regular);
+    width: 100%;
+    text-align: left;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 17px;
+}
+
+/* Subtitle styling for typing state in the message header */
+
+.cometchat-message-header .cometchat-message-header__subtitle.cometchat-message-header__subtitle-typing {
+    color: var(--cometchat-text-color-highlight);
+}
+
+/* Container for the title of the list item within the message header */
+
+.cometchat-message-header .cometchat-list-item__title-container {
+    gap: 0;
+    height: fit-content;
+}
+
+/* Flex container for direct children of the message header that have no class */
+
+.cometchat-message-header>div:not([class]) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--cometchat-padding-2, 8px);
+    flex: 1 0 0;
+    width: 100%;
+    overflow: hidden;
+}
+.cometchat-message-header  .cometchat-list-item__tail-view{
+    display: none;
+}
+
+/* Styling for the back button in the message header */
+
+.cometchat-message-header__back-button {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    -webkit-mask: url('../../assets//arrow_back.svg');
+    -webkit-mask-size: contain;
+    background: var(--cometchat-icon-color-primary);
+    cursor: pointer;
+}
+
+
+/* List item container within the message header */
+
+.cometchat-message-header__listitem {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    overflow: hidden;
+}
+
+/* Menu container within the message header, aligned to the right */
+
+.cometchat-message-header__menu {
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+/* Removes padding for list items within the message header */
+
+.cometchat-message-header .cometchat-list-item {
+    padding: 0;
+
+}
+.cometchat-message-header .cometchat-list-item:hover{
+    background: transparent;
+    cursor: default;
+}
+/* Removes padding for the body of the list item within the message header */
+
+.cometchat-message-header .cometchat-list-item__body {
+    padding: 0;
+}
+
+/* Title styling within the body of the list item in the message header */
+
+.cometchat-message-header .cometchat-list-item .cometchat-list-item__body-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+/* Avatar styling in the message header and shared avatar styling */
+
+.cometchat-message-header .cometchat-list-item .cometchat-avatar {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: var(--cometchat-radius-max);
+}
+
+.cometchat-message-header .cometchat-list-item .cometchat-list-item__leading-view {
+    height: 40px;
+    width: 40px;
+    padding: 0;
+}
+
+.cometchat-message-header__listitem>.cometchat {
+    height: 100%;
+    width: 100%;
+}
+
+.cometchat-message-header .cometchat-button__icon:hover{
+    background: var(--cometchat-primary-color);
+}
+
+
+/* Media query for larger screens to hide the back button */
+
+@media (max-width: 768px) {
+    .cometchat-message-header__back-button {
+        display: block;
+    }
+    .cometchat-message-header .cometchat-list-item .cometchat-list-item__body-title {
+      display: initial;
+    }
+}
+
+@media (min-width: 769px) {
+    .cometchat-message-header__back-button {
+        display: none;
+    }
+}

package/dist/styles/CometChatMessageInformation.css

@@ -0,0 +1,231 @@
+.cometchat-message-information {
+    width: 420px;
+    height: fit-content;
+    flex-shrink: 0;
+    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);
+    overflow: hidden;
+}
+
+.cometchat-message-information__header {
+    display: flex;
+    height: 64px;
+    padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
+    align-items: center;
+    gap: var(--cometchat-padding-3, 12px);
+    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-message-information__header-title {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 0px;
+    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-message-information__header-close {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.cometchat-message-information__header-close .cometchat-button {
+    height: 24px;
+    width: 24px;
+    padding: 0px;
+    gap: 0px;
+    background: transparent;
+}
+
+.cometchat-message-information__header-close .cometchat-button:hover {
+    background: transparent;
+}
+
+.cometchat-message-information__header-close .cometchat-button:active {
+    background: transparent;
+}
+
+.cometchat-message-information__header-close .cometchat-button__icon {
+    background: var(--cometchat-icon-color-primary, #141414);
+}
+
+.cometchat-message-information__header-close .cometchat-button__icon:hover {
+    background: var(--cometchat-icon-color-highlight);
+}
+
+.cometchat-message-information__message {
+    display: flex;
+    padding: var(--cometchat-padding-5, 20px) var(--cometchat-padding-4, 16px);
+    align-items: flex-start;
+    gap: 0px;
+    width: 100%;
+    max-height: 300px;
+    overflow: hidden auto;
+    background: var(--cometchat-background-color-02, #FAFAFA);
+    border-bottom: 1px solid var(--cometchat-border-color-light);
+}
+
+.cometchat-message-information__message::-webkit-scrollbar,
+.cometchat-message-information__message::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+
+.cometchat-message-information__message .cometchat-message-bubble__wrapper {
+    padding: 0px;
+    width: 100%;
+}
+
+.cometchat-message-information__receipts {
+    display: flex;
+    width: 100%;
+    padding: 0px;
+    flex-direction: column;
+    align-items: flex-start;
+    max-height: 300px;
+    overflow: hidden auto;
+}
+
+.cometchat-message-information__receipts .cometchat-list-item__body-subtitle {
+    flex-direction: column;
+    gap: 0px;
+}
+
+.cometchat-message-information__receipts::-webkit-scrollbar,
+.cometchat-message-information__receipts::-webkit-scrollbar-thumb {
+    display: none;
+}
+
+.cometchat-message-information__receipts .cometchat-list-item__body {
+    padding: 0px;
+}
+
+.cometchat-message-information__receipts .cometchat-list-item:hover {
+    background: transparent;
+}
+
+.cometchat-message-information__receipts-subtitle {
+    display: flex;
+    padding: 0px;
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--cometchat-padding-1, 4px);
+    flex: 1 0 0;
+}
+
+.cometchat-message-information__receipts-subtitle-text {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    overflow: hidden;
+    color: var(--cometchat-text-color-secondary, #727272);
+    text-overflow: ellipsis;
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+
+}
+
+.cometchat-message-information__receipts .cometchat-list-item {
+    padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+    align-items: flex-start;
+}
+
+.cometchat-message-information__receipts .cometchat-list-item__tail-view {
+    display: none;
+}
+
+.cometchat-message-information__receipts .cometchat-list-item__leading-view,
+.cometchat-message-information__receipts .cometchat-avatar,
+.cometchat-message-information__receipts .cometchat-avatar__image {
+    height: 40px;
+    width: 40px;
+}
+
+.cometchat-message-information__shimmer {
+    width: 100%;
+    height: 100%;
+    background: var(--cometchat-background-color-01, #FFF);
+
+}
+
+.cometchat-message-information__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-message-information__shimmer-item-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--cometchat-radius-max, 1000px);
+    background: var(--cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 0%, #eee 100%));
+    animation: shimmerAnimation 5s infinite linear;
+}
+
+.cometchat-message-information__shimmer-item-title {
+    background: var(--cometchat-shimmer-gradient-color);
+    border-radius: var(--cometchat-radius-2, 8px);
+    display: flex;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 0;
+    animation: shimmerAnimation 5s infinite linear;
+}
+
+@keyframes shimmerAnimation {
+    0% {
+        background-position: -468px 0;
+    }
+
+    100% {
+        background-position: 468px 0;
+    }
+}
+
+.cometchat-message-information .cometchat-date,
+.cometchat-message-information__receipts-subtite-text .cometchat-date {
+    padding: 0px;
+    overflow: hidden;
+    color: var(--cometchat-text-color-secondary, #727272);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+}
+
+.cometchat-message-information__receipts-empty,
+.cometchat-message-information__error-state {
+    display: flex;
+    height: 200px;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    color: var(--cometchat-text-color-secondary, #727272);
+    text-align: center;
+    font: var(--cometchat-font-body-regular, 400 14px Roboto);
+}
+
+.cometchat-message-information .cometchat-list__header {
+    border-bottom: none;
+}