@cometchat/chat-uikit-react
Version:
Ready-to-use Chat UI Components for React
1,008 lines (1,002 loc) • 489 kB
CSS
/* src/components/CometChatAIAssistantChat/CometChatAIAssistantChatHistory.css */
.cometchat-ai-assistant-chat-history {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--cometchat-background-color-01, #ffffff);
border-radius: var(--cometchat-radius-3, 12px);
overflow: hidden;
}
.cometchat-ai-assistant-chat-history__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--cometchat-spacing-4, 16px);
flex-shrink: 0;
}
.cometchat-ai-assistant-chat-history__title {
font: var(--cometchat-font-heading3-bold, 700 16px Roboto);
color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-ai-assistant-chat-history__close-btn {
background: none;
border: none;
cursor: pointer;
padding: var(--cometchat-spacing-1, 4px);
border-radius: var(--cometchat-radius-1, 4px);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
}
.cometchat-ai-assistant-chat-history__close-btn:hover {
background-color: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-ai-assistant-chat-history__close-btn:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6851d6);
outline-offset: 2px;
}
.cometchat-ai-assistant-chat-history__close-icon {
display: block;
width: 20px;
height: 20px;
mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_740_8321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8321)">%0A<path d="M11.9995 13.0538L6.92652 18.127C6.78802 18.2653 6.61394 18.3362 6.40427 18.3395C6.19477 18.3427 6.01752 18.2718 5.87252 18.127C5.72769 17.982 5.65527 17.8063 5.65527 17.6C5.65527 17.3937 5.72769 17.218 5.87252 17.073L10.9458 12L5.87252 6.92701C5.73419 6.78851 5.66336 6.61443 5.66002 6.40476C5.65686 6.19526 5.72769 6.01801 5.87252 5.87301C6.01752 5.72818 6.19319 5.65576 6.39952 5.65576C6.60586 5.65576 6.78152 5.72818 6.92652 5.87301L11.9995 10.9463L17.0725 5.87301C17.211 5.73468 17.3851 5.66385 17.5948 5.66051C17.8043 5.65735 17.9815 5.72818 18.1265 5.87301C18.2714 6.01801 18.3438 6.19368 18.3438 6.40001C18.3438 6.60635 18.2714 6.78201 18.1265 6.92701L13.0533 12L18.1265 17.073C18.2649 17.2115 18.3357 17.3856 18.339 17.5953C18.3422 17.8048 18.2714 17.982 18.1265 18.127C17.9815 18.2718 17.8059 18.3443 17.5995 18.3443C17.3932 18.3443 17.2175 18.2718 17.0725 18.127L11.9995 13.0538Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
-webkit-mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_740_8321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8321)">%0A<path d="M11.9995 13.0538L6.92652 18.127C6.78802 18.2653 6.61394 18.3362 6.40427 18.3395C6.19477 18.3427 6.01752 18.2718 5.87252 18.127C5.72769 17.982 5.65527 17.8063 5.65527 17.6C5.65527 17.3937 5.72769 17.218 5.87252 17.073L10.9458 12L5.87252 6.92701C5.73419 6.78851 5.66336 6.61443 5.66002 6.40476C5.65686 6.19526 5.72769 6.01801 5.87252 5.87301C6.01752 5.72818 6.19319 5.65576 6.39952 5.65576C6.60586 5.65576 6.78152 5.72818 6.92652 5.87301L11.9995 10.9463L17.0725 5.87301C17.211 5.73468 17.3851 5.66385 17.5948 5.66051C17.8043 5.65735 17.9815 5.72818 18.1265 5.87301C18.2714 6.01801 18.3438 6.19368 18.3438 6.40001C18.3438 6.60635 18.2714 6.78201 18.1265 6.92701L13.0533 12L18.1265 17.073C18.2649 17.2115 18.3357 17.3856 18.339 17.5953C18.3422 17.8048 18.2714 17.982 18.1265 18.127C17.9815 18.2718 17.8059 18.3443 17.5995 18.3443C17.3932 18.3443 17.2175 18.2718 17.0725 18.127L11.9995 13.0538Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
background: var(--cometchat-icon-color-secondary, #727272);
}
.cometchat-ai-assistant-chat-history__new-chat-row {
display: flex;
align-items: center;
gap: var(--cometchat-spacing-3, 12px);
width: 100%;
padding: var(--cometchat-spacing-3, 12px) var(--cometchat-spacing-4, 16px);
background: none;
border: none;
border-bottom: 1px solid var(--cometchat-border-color-light, #e8e8e8);
cursor: pointer;
text-align: left;
box-sizing: border-box;
}
.cometchat-ai-assistant-chat-history__new-chat-row:hover {
background-color: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-ai-assistant-chat-history__new-chat-row:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6851d6);
outline-offset: -2px;
}
.cometchat-ai-assistant-chat-history__new-chat-icon {
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_740_8399" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8399)">%0A<path d="M11.25 12.75H6.25C6.0375 12.75 5.85942 12.6781 5.71575 12.5342C5.57192 12.3904 5.5 12.2122 5.5 11.9997C5.5 11.7871 5.57192 11.609 5.71575 11.4655C5.85942 11.3218 6.0375 11.25 6.25 11.25H11.25V6.25C11.25 6.0375 11.3219 5.85942 11.4658 5.71575C11.6096 5.57192 11.7878 5.5 12.0003 5.5C12.2129 5.5 12.391 5.57192 12.5345 5.71575C12.6782 5.85942 12.75 6.0375 12.75 6.25V11.25H17.75C17.9625 11.25 18.1406 11.3219 18.2843 11.4658C18.4281 11.6096 18.5 11.7878 18.5 12.0003C18.5 12.2129 18.4281 12.391 18.2843 12.5345C18.1406 12.6782 17.9625 12.75 17.75 12.75H12.75V17.75C12.75 17.9625 12.6781 18.1406 12.5342 18.2843C12.3904 18.4281 12.2122 18.5 11.9997 18.5C11.7871 18.5 11.609 18.4281 11.4655 18.2843C11.3218 18.1406 11.25 17.9625 11.25 17.75V12.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
-webkit-mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_740_8399" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8399)">%0A<path d="M11.25 12.75H6.25C6.0375 12.75 5.85942 12.6781 5.71575 12.5342C5.57192 12.3904 5.5 12.2122 5.5 11.9997C5.5 11.7871 5.57192 11.609 5.71575 11.4655C5.85942 11.3218 6.0375 11.25 6.25 11.25H11.25V6.25C11.25 6.0375 11.3219 5.85942 11.4658 5.71575C11.6096 5.57192 11.7878 5.5 12.0003 5.5C12.2129 5.5 12.391 5.57192 12.5345 5.71575C12.6782 5.85942 12.75 6.0375 12.75 6.25V11.25H17.75C17.9625 11.25 18.1406 11.3219 18.2843 11.4658C18.4281 11.6096 18.5 11.7878 18.5 12.0003C18.5 12.2129 18.4281 12.391 18.2843 12.5345C18.1406 12.6782 17.9625 12.75 17.75 12.75H12.75V17.75C12.75 17.9625 12.6781 18.1406 12.5342 18.2843C12.3904 18.4281 12.2122 18.5 11.9997 18.5C11.7871 18.5 11.609 18.4281 11.4655 18.2843C11.3218 18.1406 11.25 17.9625 11.25 17.75V12.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
background: var(--cometchat-text-color-primary, #141414);
}
.cometchat-ai-assistant-chat-history__new-chat-label {
font: var(--cometchat-font-body-bold, 600 14px Roboto);
color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-ai-assistant-chat-history__list {
list-style: none;
margin: 0;
padding: var(--cometchat-spacing-2, 8px);
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-ai-assistant-chat-history__list::-webkit-scrollbar {
width: 4px;
}
.cometchat-ai-assistant-chat-history__list::-webkit-scrollbar-thumb {
background: var(--cometchat-border-color-light, #e8e8e8);
border-radius: 2px;
}
.cometchat-ai-assistant-chat-history__item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--cometchat-spacing-3, 12px);
border-radius: var(--cometchat-radius-2, 8px);
cursor: pointer;
gap: var(--cometchat-spacing-2, 8px);
list-style: none;
}
.cometchat-ai-assistant-chat-history__item:hover {
background-color: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-ai-assistant-chat-history__item:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6851d6);
outline-offset: -2px;
}
.cometchat-ai-assistant-chat-history__item-text {
flex: 1;
font: var(--cometchat-font-body-regular, 400 14px Roboto);
color: var(--cometchat-text-color-primary, #141414);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cometchat-ai-assistant-chat-history__delete-btn {
background: none;
border: none;
cursor: pointer;
padding: var(--cometchat-spacing-1, 4px);
border-radius: var(--cometchat-radius-1, 4px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.15s;
flex-shrink: 0;
width: 24px;
height: 24px;
}
.cometchat-ai-assistant-chat-history__item:hover .cometchat-ai-assistant-chat-history__delete-btn,
.cometchat-ai-assistant-chat-history__item:focus-within .cometchat-ai-assistant-chat-history__delete-btn {
opacity: 1;
}
.cometchat-ai-assistant-chat-history__delete-btn:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6851d6);
outline-offset: 2px;
opacity: 1;
}
.cometchat-ai-assistant-chat-history__delete-icon {
display: block;
width: 24px;
height: 24px;
mask: url('data:image/svg+xml,%0A<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.73364 20.8332C6.29731 20.8332 5.92431 20.6785 5.61464 20.369C5.30514 20.0595 5.15039 19.6865 5.15039 19.25V5.55H4.94614C4.72397 5.55 4.53581 5.47266 4.38164 5.318C4.22747 5.16316 4.15039 4.97566 4.15039 4.7555C4.15039 4.53516 4.22747 4.34858 4.38164 4.19575C4.53581 4.04308 4.72397 3.96675 4.94614 3.96675H8.83689V3.95425C8.83689 3.73558 8.91339 3.54966 9.06639 3.3965C9.21956 3.24333 9.40731 3.16675 9.62964 3.16675H14.3961C14.612 3.16675 14.7972 3.244 14.9519 3.3985C15.1064 3.55317 15.1836 3.73841 15.1836 3.95425V3.96675H19.0831C19.2975 3.96675 19.4817 4.04425 19.6359 4.19925C19.7901 4.35441 19.8671 4.54033 19.8671 4.757C19.8671 4.98017 19.7898 5.16808 19.6351 5.32075C19.4806 5.47358 19.2955 5.55 19.0796 5.55H18.8671V19.25C18.8671 19.6865 18.7123 20.0595 18.4026 20.369C18.0931 20.6785 17.7201 20.8332 17.2836 20.8332H6.73364ZM17.2836 5.55H6.73364V19.25H17.2836V5.55ZM9.99489 17.1707C10.2127 17.1707 10.3986 17.0951 10.5526 16.9437C10.7066 16.7924 10.7836 16.6056 10.7836 16.3832V8.4C10.7836 8.17783 10.7061 7.98966 10.5509 7.8355C10.3959 7.68133 10.2101 7.60425 9.99339 7.60425C9.77022 7.60425 9.58231 7.68133 9.42964 7.8355C9.27681 7.98966 9.20039 8.17783 9.20039 8.4V16.3832C9.20039 16.6056 9.27839 16.7924 9.43439 16.9437C9.59022 17.0951 9.77706 17.1707 9.99489 17.1707ZM14.0284 17.1707C14.2462 17.1707 14.4321 17.0951 14.5861 16.9437C14.7401 16.7924 14.8171 16.6056 14.8171 16.3832V8.4C14.8171 8.17783 14.7396 7.98966 14.5844 7.8355C14.4292 7.68133 14.2433 7.60425 14.0266 7.60425C13.8036 7.60425 13.6157 7.68133 13.4629 7.8355C13.3101 7.98966 13.2336 8.17783 13.2336 8.4V16.3832C13.2336 16.6056 13.3116 16.7924 13.4676 16.9437C13.6236 17.0951 13.8106 17.1707 14.0284 17.1707Z" fill="%23141414"/>%0A</svg>%0A') center center no-repeat;
-webkit-mask: url('data:image/svg+xml,%0A<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.73364 20.8332C6.29731 20.8332 5.92431 20.6785 5.61464 20.369C5.30514 20.0595 5.15039 19.6865 5.15039 19.25V5.55H4.94614C4.72397 5.55 4.53581 5.47266 4.38164 5.318C4.22747 5.16316 4.15039 4.97566 4.15039 4.7555C4.15039 4.53516 4.22747 4.34858 4.38164 4.19575C4.53581 4.04308 4.72397 3.96675 4.94614 3.96675H8.83689V3.95425C8.83689 3.73558 8.91339 3.54966 9.06639 3.3965C9.21956 3.24333 9.40731 3.16675 9.62964 3.16675H14.3961C14.612 3.16675 14.7972 3.244 14.9519 3.3985C15.1064 3.55317 15.1836 3.73841 15.1836 3.95425V3.96675H19.0831C19.2975 3.96675 19.4817 4.04425 19.6359 4.19925C19.7901 4.35441 19.8671 4.54033 19.8671 4.757C19.8671 4.98017 19.7898 5.16808 19.6351 5.32075C19.4806 5.47358 19.2955 5.55 19.0796 5.55H18.8671V19.25C18.8671 19.6865 18.7123 20.0595 18.4026 20.369C18.0931 20.6785 17.7201 20.8332 17.2836 20.8332H6.73364ZM17.2836 5.55H6.73364V19.25H17.2836V5.55ZM9.99489 17.1707C10.2127 17.1707 10.3986 17.0951 10.5526 16.9437C10.7066 16.7924 10.7836 16.6056 10.7836 16.3832V8.4C10.7836 8.17783 10.7061 7.98966 10.5509 7.8355C10.3959 7.68133 10.2101 7.60425 9.99339 7.60425C9.77022 7.60425 9.58231 7.68133 9.42964 7.8355C9.27681 7.98966 9.20039 8.17783 9.20039 8.4V16.3832C9.20039 16.6056 9.27839 16.7924 9.43439 16.9437C9.59022 17.0951 9.77706 17.1707 9.99489 17.1707ZM14.0284 17.1707C14.2462 17.1707 14.4321 17.0951 14.5861 16.9437C14.7401 16.7924 14.8171 16.6056 14.8171 16.3832V8.4C14.8171 8.17783 14.7396 7.98966 14.5844 7.8355C14.4292 7.68133 14.2433 7.60425 14.0266 7.60425C13.8036 7.60425 13.6157 7.68133 13.4629 7.8355C13.3101 7.98966 13.2336 8.17783 13.2336 8.4V16.3832C13.2336 16.6056 13.3116 16.7924 13.4676 16.9437C13.6236 17.0951 13.8106 17.1707 14.0284 17.1707Z" fill="%23141414"/>%0A</svg>%0A') center center no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
background: var(--cometchat-error-color, #f44649);
}
.cometchat-ai-assistant-chat-history__date-separator {
display: flex;
align-items: center;
padding: var(--cometchat-spacing-2, 8px) var(--cometchat-spacing-3, 12px);
list-style: none;
}
.cometchat-ai-assistant-chat-history__date-separator-text {
font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
color: var(--cometchat-text-color-secondary, #727272);
}
.cometchat-ai-assistant-chat-history__shimmer-list {
list-style: none;
margin: 0;
padding: var(--cometchat-spacing-2, 8px);
display: flex;
flex-direction: column;
gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-ai-assistant-chat-history__shimmer-item {
padding: var(--cometchat-spacing-3, 12px);
display: flex;
flex-direction: column;
gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-ai-assistant-chat-history__shimmer-line {
height: 12px;
border-radius: var(--cometchat-radius-1, 4px);
background-color: var(--cometchat-background-color-02, #f5f5f5);
animation: cometchat-history-shimmer 1.5s infinite;
}
.cometchat-ai-assistant-chat-history__shimmer-line--title {
width: 70%;
}
.cometchat-ai-assistant-chat-history__shimmer-line--subtitle {
width: 45%;
}
@keyframes cometchat-history-shimmer {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
.cometchat-ai-assistant-chat-history__empty-state,
.cometchat-ai-assistant-chat-history__error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
padding: var(--cometchat-spacing-6, 24px);
text-align: center;
gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-ai-assistant-chat-history__empty-title,
.cometchat-ai-assistant-chat-history__error-title {
font: var(--cometchat-font-heading3-bold, 700 16px Roboto);
color: var(--cometchat-text-color-primary, #141414);
margin: 0;
}
.cometchat-ai-assistant-chat-history__empty-subtitle,
.cometchat-ai-assistant-chat-history__error-subtitle {
font: var(--cometchat-font-body-regular, 400 14px Roboto);
color: var(--cometchat-text-color-secondary, #727272);
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.cometchat-ai-assistant-chat-history__shimmer-line {
animation: none;
}
}
/* src/components/base/CometChatDate/CometChatDate.css */
.cometchat-date {
display: inline-flex;
align-items: center;
background: transparent;
text-align: center;
font-style: normal;
padding: var(--cometchat-date-padding, 3px 10px);
}
.cometchat-date[data-variant=caption] {
font: var(--cometchat-date-font, var(--cometchat-font-caption1-regular, 400 12px Roboto));
color: var(--cometchat-date-color, var(--cometchat-neutral-color-600, #727272));
}
.cometchat-date[data-variant=caption2] {
font: var(--cometchat-font-caption2-regular, 400 10px Roboto);
color: var(--cometchat-date-color, var(--cometchat-neutral-color-600, #727272));
}
.cometchat-date[data-variant=body] {
font: var(--cometchat-font-body-regular, 400 14px Roboto);
color: var(--cometchat-date-color, var(--cometchat-neutral-color-600, #727272));
}
.cometchat-date[data-variant=label] {
font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
color: var(--cometchat-date-color, var(--cometchat-neutral-color-600, #727272));
}
.cometchat-date[data-variant=separator] {
font: var( --cometchat-date-separator-font, var(--cometchat-font-caption1-medium, 500 12px Roboto) );
color: var( --cometchat-date-separator-color, var(--cometchat-text-color-secondary, rgba(20, 20, 20, 0.58)) );
justify-content: center;
align-items: center;
padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
border-radius: var(--cometchat-radius-1, 4px);
border: 1px solid var(--cometchat-border-color-dark, #dcdcdc);
background: var(--cometchat-background-color-01, #f5f5f5);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.cometchat-date__text {
display: inline;
}
@media (prefers-reduced-motion: reduce) {
.cometchat-date {
transition: none;
}
}
/* src/components/CometChatMessageList/CometChatMessageList.css */
.cometchat-message-list {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: var(--cometchat-message-list-bg);
}
.cometchat-message-list__scroll-wrapper {
position: relative;
display: flex;
flex: 1;
min-height: 0;
}
.cometchat-message-list__scroll-container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
overflow-anchor: auto;
display: flex;
flex-direction: column;
padding: var(--cometchat-padding-3, 12px) 0;
}
.cometchat-message-list__scroll-container--hide-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.cometchat-message-list__scroll-container--hide-scrollbar::-webkit-scrollbar {
display: none;
}
.cometchat-message-list__top-sentinel {
height: 1px;
overflow-anchor: none;
}
.cometchat-message-list__bottom-sentinel {
height: 1px;
overflow-anchor: none;
}
.cometchat-message-list__messages {
display: flex;
flex-direction: column;
margin-top: auto;
}
.cometchat-message-list__date-separator {
display: flex;
justify-content: center;
padding: var(--cometchat-padding-2, 8px) 0;
}
.cometchat-message-list__floating-date {
position: absolute;
top: var(--cometchat-padding-2, 8px);
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 5;
}
.cometchat-message-list__new-message-divider {
display: flex;
align-items: center;
justify-content: center;
gap: var(--cometchat-spacing-4, 16px);
width: 100%;
padding: var(--cometchat-padding-4, 16px) var(--cometchat-padding-7, 28px);
box-sizing: border-box;
}
.cometchat-message-list__new-message-divider span {
white-space: nowrap;
font: var(--cometchat-font-body-medium, 500 14px / 16.8px Roboto);
color: var(--cometchat-error-color, #f44336);
}
.cometchat-message-list__new-message-divider div {
width: 100%;
height: 1px;
background: var(--cometchat-error-color, #f44336);
}
.cometchat-message-list__scroll-to-bottom {
position: absolute;
bottom: 8px;
right: 12px;
z-index: 10;
display: flex;
padding: var(--cometchat-padding-2, 8px);
flex-direction: column-reverse;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: var(--cometchat-radius-max, 1000px);
background: var(--cometchat-static-black, #000);
border: none;
cursor: pointer;
}
.cometchat-message-list__scroll-to-bottom:hover {
cursor: pointer;
}
.cometchat-message-list__scroll-to-bottom:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
}
.cometchat-message-list__scroll-to-bottom-icon {
display: flex;
width: 24px;
height: 24px;
justify-content: center;
align-items: center;
background: var(--cometchat-static-white, #fff);
mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_740_8306" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8306)">%0A<path d="M11.9998 14.677C11.8793 14.677 11.7671 14.6578 11.6633 14.6193C11.5594 14.5808 11.4607 14.5148 11.367 14.4213L6.87276 9.92701C6.73442 9.78851 6.66359 9.61443 6.66026 9.40476C6.65709 9.19526 6.72792 9.01801 6.87276 8.87301C7.01776 8.72818 7.19342 8.65576 7.39976 8.65576C7.60609 8.65576 7.78176 8.72818 7.92676 8.87301L11.9998 12.9463L16.0728 8.87301C16.2113 8.73468 16.3853 8.66385 16.595 8.66051C16.8045 8.65735 16.9818 8.72818 17.1268 8.87301C17.2716 9.01801 17.344 9.19368 17.344 9.40001C17.344 9.60635 17.2716 9.78201 17.1268 9.92701L12.6325 14.4213C12.5388 14.5148 12.4401 14.5808 12.3363 14.6193C12.2324 14.6578 12.1203 14.677 11.9998 14.677Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
-webkit-mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_740_8306" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8306)">%0A<path d="M11.9998 14.677C11.8793 14.677 11.7671 14.6578 11.6633 14.6193C11.5594 14.5808 11.4607 14.5148 11.367 14.4213L6.87276 9.92701C6.73442 9.78851 6.66359 9.61443 6.66026 9.40476C6.65709 9.19526 6.72792 9.01801 6.87276 8.87301C7.01776 8.72818 7.19342 8.65576 7.39976 8.65576C7.60609 8.65576 7.78176 8.72818 7.92676 8.87301L11.9998 12.9463L16.0728 8.87301C16.2113 8.73468 16.3853 8.66385 16.595 8.66051C16.8045 8.65735 16.9818 8.72818 17.1268 8.87301C17.2716 9.01801 17.344 9.19368 17.344 9.40001C17.344 9.60635 17.2716 9.78201 17.1268 9.92701L12.6325 14.4213C12.5388 14.5148 12.4401 14.5808 12.3363 14.6193C12.2324 14.6578 12.1203 14.677 11.9998 14.677Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
}
.cometchat-message-list__scroll-to-bottom-badge {
color: var(--cometchat-static-white, #fff);
text-align: center;
font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
background: var(--cometchat-primary-color, #6852d6);
border-radius: var(--cometchat-radius-max, 1000px);
height: 20px;
padding: 0 var(--cometchat-padding-2, 8px);
display: flex;
justify-content: center;
align-items: center;
}
.cometchat-message-list__empty-state {
display: flex;
flex: 1;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
padding: var(--cometchat-padding-5, 24px);
box-sizing: border-box;
background: var(--cometchat-message-list-bg);
}
.cometchat-message-list__error-state {
display: flex;
flex: 1;
height: 100%;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--cometchat-padding-6, 24px);
box-sizing: border-box;
background: var(--cometchat-message-list-bg);
}
.cometchat-message-list__error-state-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cometchat-spacing-4, 16px);
text-align: center;
}
.cometchat-message-list__error-state-icon {
width: 120px;
height: 120px;
background-color: var(--cometchat-error-color, #f44336);
opacity: 0.8;
mask: url('data:image/svg+xml,<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_7089_707053" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">%0A<path d="M120 60C120 68.9108 118.054 77.3757 114.559 84.9811C105.089 105.649 84.2189 120 60 120C35.7811 120 14.9108 105.649 5.44054 84.9811C1.94595 77.3757 0 68.9108 0 60C0 26.8622 26.8622 0 60 0C93.1378 0 120 26.8622 120 60Z" fill="%23F4F7FC"/>%0A</mask>%0A<g mask="url(%23mask0_7089_707053)">%0A<path d="M2.625 84L22.5 79.875L39 86.25L24 94.5L2.625 84Z" fill="%23DCDCDC"/>%0A<path d="M117.375 84L97.5 79.875L81 86.25L96 94.5L117.375 84Z" fill="%23DCDCDC"/>%0A<path opacity="0.6" d="M39 86.25H81L96 94.5H24L39 86.25Z" fill="%23A1A1A1"/>%0A<path d="M45.0793 50.5798C51.8385 46.6773 60.4814 48.9932 64.3838 55.7524C68.2863 62.5115 65.9704 71.1545 59.2112 75.0569L51.2626 79.646L49.1291 89.2059C48.8661 90.3844 47.2924 90.6255 46.6887 89.5798L43.0171 83.2205C37.4837 83.9945 31.7809 81.424 28.8155 76.2878C24.9131 69.5286 27.229 60.8857 33.9882 56.9833L45.0793 50.5798Z" fill="%23E8E8E8"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 54.8662 58.7017)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 47.217 63.1196)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 39.568 67.5317)" fill="%23FAFAFA"/>%0A<path d="M68.7319 23.6854C58.716 21.0017 48.4209 26.9456 45.7371 36.9615C43.0534 46.9774 48.9973 57.2726 59.0132 59.9563L70.7932 63.1128L76.8182 74.647C77.5609 76.0689 79.6633 75.8372 80.0785 74.2876L82.6036 64.864C89.9703 63.9541 96.404 58.6946 98.4433 51.0841C101.127 41.0681 95.1831 30.773 85.1672 28.0892L68.7319 23.6854Z" fill="%23DCDCDC"/>%0A<circle cx="61.039" cy="41.0622" r="2.93362" transform="rotate(15 61.039 41.0622)" fill="%23FAFAFA"/>%0A<circle cx="72.3738" cy="44.0973" r="2.93362" transform="rotate(15 72.3738 44.0973)" fill="%23FAFAFA"/>%0A<circle cx="83.7081" cy="47.1384" r="2.93362" transform="rotate(15 83.7081 47.1384)" fill="%23FAFAFA"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6951 32.7839C42.2994 32.6391 42.6718 32.0319 42.527 31.4277C42.3822 30.8234 41.775 30.451 41.1708 30.5958L38.2534 31.2949C37.6492 31.4397 37.2768 32.0469 37.4216 32.6511C37.5663 33.2553 38.1735 33.6278 38.7777 33.483L41.6951 32.7839ZM52.5122 19.092C52.5109 19.7133 52.0063 20.216 51.385 20.2148C50.7637 20.2136 50.261 19.7089 50.2622 19.0876L50.268 16.0876C50.2692 15.4663 50.7739 14.9636 51.3952 14.9648C52.0165 14.966 52.5192 15.4707 52.518 16.092L52.5122 19.092ZM43.1169 26.0355C42.9758 26.6405 42.3709 27.0167 41.7658 26.8756L38.8442 26.1942C38.2391 26.0531 37.863 25.4482 38.0041 24.8431C38.1452 24.2381 38.7501 23.8619 39.3552 24.003L42.2768 24.6844C42.8819 24.8255 43.258 25.4304 43.1169 26.0355ZM46.7835 20.5285C47.0607 21.0846 46.8345 21.76 46.2784 22.0372C45.7224 22.3143 45.0469 22.0882 44.7698 21.5321L43.4316 18.8471C43.1544 18.291 43.3805 17.6156 43.9366 17.3384C44.4927 17.0613 45.1682 17.2874 45.4453 17.8435L46.7835 20.5285Z" fill="%23DCDCDC"/>%0A<rect x="24" y="94.5" width="72" height="63" fill="%23DCDCDC"/>%0A</g>%0A</svg>%0A') center center / contain no-repeat;
-webkit-mask: url('data:image/svg+xml,<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<mask id="mask0_7089_707053" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">%0A<path d="M120 60C120 68.9108 118.054 77.3757 114.559 84.9811C105.089 105.649 84.2189 120 60 120C35.7811 120 14.9108 105.649 5.44054 84.9811C1.94595 77.3757 0 68.9108 0 60C0 26.8622 26.8622 0 60 0C93.1378 0 120 26.8622 120 60Z" fill="%23F4F7FC"/>%0A</mask>%0A<g mask="url(%23mask0_7089_707053)">%0A<path d="M2.625 84L22.5 79.875L39 86.25L24 94.5L2.625 84Z" fill="%23DCDCDC"/>%0A<path d="M117.375 84L97.5 79.875L81 86.25L96 94.5L117.375 84Z" fill="%23DCDCDC"/>%0A<path opacity="0.6" d="M39 86.25H81L96 94.5H24L39 86.25Z" fill="%23A1A1A1"/>%0A<path d="M45.0793 50.5798C51.8385 46.6773 60.4814 48.9932 64.3838 55.7524C68.2863 62.5115 65.9704 71.1545 59.2112 75.0569L51.2626 79.646L49.1291 89.2059C48.8661 90.3844 47.2924 90.6255 46.6887 89.5798L43.0171 83.2205C37.4837 83.9945 31.7809 81.424 28.8155 76.2878C24.9131 69.5286 27.229 60.8857 33.9882 56.9833L45.0793 50.5798Z" fill="%23E8E8E8"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 54.8662 58.7017)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 47.217 63.1196)" fill="%23FAFAFA"/>%0A<circle cx="2.2081" cy="2.2081" r="2.2081" transform="matrix(-0.866025 0.5 0.5 0.866025 39.568 67.5317)" fill="%23FAFAFA"/>%0A<path d="M68.7319 23.6854C58.716 21.0017 48.4209 26.9456 45.7371 36.9615C43.0534 46.9774 48.9973 57.2726 59.0132 59.9563L70.7932 63.1128L76.8182 74.647C77.5609 76.0689 79.6633 75.8372 80.0785 74.2876L82.6036 64.864C89.9703 63.9541 96.404 58.6946 98.4433 51.0841C101.127 41.0681 95.1831 30.773 85.1672 28.0892L68.7319 23.6854Z" fill="%23DCDCDC"/>%0A<circle cx="61.039" cy="41.0622" r="2.93362" transform="rotate(15 61.039 41.0622)" fill="%23FAFAFA"/>%0A<circle cx="72.3738" cy="44.0973" r="2.93362" transform="rotate(15 72.3738 44.0973)" fill="%23FAFAFA"/>%0A<circle cx="83.7081" cy="47.1384" r="2.93362" transform="rotate(15 83.7081 47.1384)" fill="%23FAFAFA"/>%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M41.6951 32.7839C42.2994 32.6391 42.6718 32.0319 42.527 31.4277C42.3822 30.8234 41.775 30.451 41.1708 30.5958L38.2534 31.2949C37.6492 31.4397 37.2768 32.0469 37.4216 32.6511C37.5663 33.2553 38.1735 33.6278 38.7777 33.483L41.6951 32.7839ZM52.5122 19.092C52.5109 19.7133 52.0063 20.216 51.385 20.2148C50.7637 20.2136 50.261 19.7089 50.2622 19.0876L50.268 16.0876C50.2692 15.4663 50.7739 14.9636 51.3952 14.9648C52.0165 14.966 52.5192 15.4707 52.518 16.092L52.5122 19.092ZM43.1169 26.0355C42.9758 26.6405 42.3709 27.0167 41.7658 26.8756L38.8442 26.1942C38.2391 26.0531 37.863 25.4482 38.0041 24.8431C38.1452 24.2381 38.7501 23.8619 39.3552 24.003L42.2768 24.6844C42.8819 24.8255 43.258 25.4304 43.1169 26.0355ZM46.7835 20.5285C47.0607 21.0846 46.8345 21.76 46.2784 22.0372C45.7224 22.3143 45.0469 22.0882 44.7698 21.5321L43.4316 18.8471C43.1544 18.291 43.3805 17.6156 43.9366 17.3384C44.4927 17.0613 45.1682 17.2874 45.4453 17.8435L46.7835 20.5285Z" fill="%23DCDCDC"/>%0A<rect x="24" y="94.5" width="72" height="63" fill="%23DCDCDC"/>%0A</g>%0A</svg>%0A') center center / contain no-repeat;
}
.cometchat-message-list__error-state-text {
margin: 0;
font: var(--cometchat-font-body-regular, 400 14px / 16.8px Roboto);
color: var(--cometchat-error-color, #f44336);
}
.cometchat-message-list__shimmer {
height: 100%;
display: flex;
flex-direction: column;
gap: var(--cometchat-spacing-3, 12px);
padding: var(--cometchat-padding-3, 12px);
flex: 1;
background: var(--cometchat-message-list-bg);
}
.cometchat-message-list__shimmer-header {
display: flex;
width: 50px;
align-self: center;
}
.cometchat-message-list__shimmer-body {
display: flex;
width: 286px;
flex-direction: column;
gap: var(--cometchat-spacing-1, 4px);
}
.cometchat-message-list__shimmer-leading-view {
display: flex;
width: 40px;
height: 40px;
border-radius: var(--cometchat-radius-max, 1000px);
background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%) );
background-size: 200% 100%;
animation: cometchat-shimmer 0.8s infinite;
}
.cometchat-message-list__shimmer-item-header {
display: flex;
width: 120px;
height: 12px;
border-radius: var(--cometchat-radius-1, 4px);
background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%) );
background-size: 200% 100%;
animation: cometchat-shimmer 0.8s infinite;
}
.cometchat-message-list__shimmer-item {
width: 100%;
height: 53px;
border-radius: var(--cometchat-radius-3, 12px);
background: var( --cometchat-shimmer-gradient-color, linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%) );
background-size: 200% 100%;
animation: cometchat-shimmer 0.8s infinite;
}
.cometchat-message-list__shimmer-header .cometchat-message-list__shimmer-item {
height: 22px;
}
@keyframes cometchat-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.cometchat-message-list__header-view {
flex-shrink: 0;
}
.cometchat-message-list__footer-view {
flex-shrink: 0;
}
.cometchat-message-list__live-region {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.cometchat-message-list__emoji-picker-overlay {
position: absolute;
z-index: 100;
border-radius: var(--cometchat-radius-3, 12px);
box-shadow: var(--cometchat-shadow-high, 0 8px 32px rgba(0, 0, 0, 0.1));
overflow: hidden;
}
.cometchat-message-list__message-info-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
background: var(--cometchat-overlay-background-heavy, rgba(0, 0, 0, 0.6));
}
.cometchat-message-list__message-info-panel {
width: 420px;
max-width: 90vw;
max-height: 80vh;
border-radius: var(--cometchat-radius-5, 20px);
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;
}
@keyframes cometchat-background-fade {
0% {
background-color: var(--cometchat-extended-primary-color-200, rgba(104, 82, 214, 0.2));
}
50% {
background-color: var(--cometchat-extended-primary-color-100, rgba(104, 82, 214, 0.1));
}
75%, 100% {
background-color: transparent;
}
}
.cometchat-message-list__bubble-highlight {
animation: cometchat-background-fade 3s ease-out forwards;
display: block;
width: 100%;
}
/* src/components/base/CometChatAvatar/CometChatAvatar.css */
.cometchat-avatar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: var(--cometchat-radius-max, 1000px);
background: var(--cometchat-extended-primary-color-500, #aa9ee8);
}
.cometchat-avatar[data-size=small] {
width: 32px;
height: 32px;
}
.cometchat-avatar[data-size=medium] {
width: 40px;
height: 40px;
}
.cometchat-avatar[data-size=large] {
width: 48px;
height: 48px;
}
.cometchat-avatar__image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--cometchat-radius-max, 1000px);
overflow: hidden;
}
.cometchat-avatar__initials {
display: flex;
justify-content: center;
align-items: center;
color: var(--cometchat-static-white, #fff);
text-align: center;
user-select: none;
}
.cometchat-avatar[data-size=small] .cometchat-avatar__initials {
font: var(--cometchat-font-body-bold, 700 12px Roboto);
}
.cometchat-avatar[data-size=medium] .cometchat-avatar__initials {
font: var(--cometchat-font-heading4-bold, 700 14px Roboto);
}
.cometchat-avatar[data-size=large] .cometchat-avatar__initials {
font: var(--cometchat-font-heading3-bold, 700 20px Roboto);
}
.cometchat-avatar__status-indicator {
position: absolute;
bottom: 0;
right: 0;
border-radius: var(--cometchat-radius-max, 1000px);
border: 2px solid var(--cometchat-background-color-01, #fff);
}
.cometchat-avatar[data-size=small] .cometchat-avatar__status-indicator {
width: 8px;
height: 8px;
}
.cometchat-avatar[data-size=medium] .cometchat-avatar__status-indicator {
width: 10px;
height: 10px;
}
.cometchat-avatar[data-size=large] .cometchat-avatar__status-indicator {
width: 12px;
height: 12px;
}
.cometchat-avatar__status-indicator[data-status=online] {
background: var(--cometchat-success-color, #09c26f);
}
.cometchat-avatar__status-indicator[data-status=offline] {
display: none;
}
/* src/components/base/CometChatThreadView/CometChatThreadView.css */
.cometchat-thread-view {
display: inline-flex;
align-items: center;
gap: var(--cometchat-spacing-1, 4px);
padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
border-radius: var(--cometchat-radius-2, 8px);
background: transparent;
border: none;
cursor: pointer;
user-select: none;
font-family: inherit;
}
.cometchat-thread-view:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #3399ff);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.cometchat-thread-view {
transition: none;
}
}
.cometchat-thread-view--right {
justify-content: flex-end;
}
.cometchat-thread-view--left {
justify-content: flex-start;
}
.cometchat-thread-view--unread .cometchat-thread-view__count {
font: var(--cometchat-font-caption1-bold, 700 12px / 14.4px Roboto);
}
.cometchat-thread-view__icon {
display: inline-block;
height: 16px;
width: 16px;
flex-shrink: 0;
background-color: var(--cometchat-icon-color-secondary, #727272);
mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Base_Icon">%0A<mask id="mask0_3985_363515" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24">%0A<rect id="Bounding box" x="0.00390625" width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_3985_363515)">%0A<path id="subdirectory_arrow_right" d="M13.4769 19.9578C13.3219 19.8026 13.246 19.6253 13.2492 19.426C13.2523 19.2267 13.3282 19.0526 13.4769 18.9038L16.6309 15.75H7.31166C6.81299 15.75 6.38699 15.5734 6.03366 15.2203C5.68049 14.8669 5.50391 14.4409 5.50391 13.9423V5.25C5.50391 5.03717 5.57574 4.859 5.71941 4.7155C5.86291 4.57183 6.04107 4.5 6.25391 4.5C6.46674 4.5 6.64491 4.57183 6.78841 4.7155C6.93207 4.859 7.00391 5.03717 7.00391 5.25V13.9423C7.00391 14.0321 7.03274 14.1058 7.09041 14.1635C7.14807 14.2212 7.22182 14.25 7.31166 14.25H16.6309L13.4617 11.0807C13.3065 10.9256 13.2315 10.7499 13.2367 10.5538C13.2418 10.3578 13.3168 10.1822 13.4617 10.027C13.6168 9.87183 13.7941 9.79333 13.9934 9.7915C14.1927 9.7895 14.3667 9.86283 14.5154 10.0115L18.8712 14.3673C18.9648 14.4609 19.0308 14.5597 19.0692 14.6635C19.1077 14.7673 19.1269 14.8795 19.1269 15C19.1269 15.1205 19.1077 15.2327 19.0692 15.3365C19.0308 15.4403 18.9648 15.5391 18.8712 15.6328L14.5462 19.9578C14.391 20.1128 14.2128 20.1902 14.0117 20.1902C13.8103 20.1902 13.6321 20.1128 13.4769 19.9578Z" fill="%23A1A1A1"/>%0A</g>%0A</g>%0A</svg>%0A') center / contain no-repeat;
-webkit-mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<g id="Base_Icon">%0A<mask id="mask0_3985_363515" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="24">%0A<rect id="Bounding box" x="0.00390625" width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_3985_363515)">%0A<path id="subdirectory_arrow_right" d="M13.4769 19.9578C13.3219 19.8026 13.246 19.6253 13.2492 19.426C13.2523 19.2267 13.3282 19.0526 13.4769 18.9038L16.6309 15.75H7.31166C6.81299 15.75 6.38699 15.5734 6.03366 15.2203C5.68049 14.8669 5.50391 14.4409 5.50391 13.9423V5.25C5.50391 5.03717 5.57574 4.859 5.71941 4.7155C5.86291 4.57183 6.04107 4.5 6.25391 4.5C6.46674 4.5 6.64491 4.57183 6.78841 4.7155C6.93207 4.859 7.00391 5.03717 7.00391 5.25V13.9423C7.00391 14.0321 7.03274 14.1058 7.09041 14.1635C7.14807 14.2212 7.22182 14.25 7.31166 14.25H16.6309L13.4617 11.0807C13.3065 10.9256 13.2315 10.7499 13.2367 10.5538C13.2418 10.3578 13.3168 10.1822 13.4617 10.027C13.6168 9.87183 13.7941 9.79333 13.9934 9.7915C14.1927 9.7895 14.3667 9.86283 14.5154 10.0115L18.8712 14.3673C18.9648 14.4609 19.0308 14.5597 19.0692 14.6635C19.1077 14.7673 19.1269 14.8795 19.1269 15C19.1269 15.1205 19.1077 15.2327 19.0692 15.3365C19.0308 15.4403 18.9648 15.5391 18.8712 15.6328L14.5462 19.9578C14.391 20.1128 14.2128 20.1902 14.0117 20.1902C13.8103 20.1902 13.6321 20.1128 13.4769 19.9578Z" fill="%23A1A1A1"/>%0A</g>%0A</g>%0A</svg>%0A') center / contain no-repeat;
}
.cometchat-thread-view__icon--custom {
mask: none;
-webkit-mask: none;
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.cometchat-thread-view__count {
color: var(--cometchat-text-color-primary, #141414);
font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
white-space: nowrap;
}
.cometchat-thread-view__unread-indicator {
width: 8px;
height: 8px;
border-radius: var(--cometchat-radius-max, 1000px);
background: var(--cometchat-primary-color, #3399ff);
flex-shrink: 0;
}
/* src/components/base/CometChatContextMenu/CometChatContextMenu.css */
.cometchat-context-menu {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: var(--cometchat-padding-2, 8px);
background: transparent;
}
.cometchat-context-menu__top-menu {
display: flex;
align-items: center;
gap: 12px;
}
.cometchat-context-menu__top-menu-item {
display: flex;
width: 24px;
height: 24px;
padding: 4px;
justify-content: center;
align-items: center;
border: none;
border-radius: var(--cometchat-radius-max, 1000px);
background: var(--cometchat-background-color-01, #fff);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
color: var(--cometchat-icon-color-secondary, #a1a1a1);
cursor: pointer;
}
.cometchat-context-menu__top-menu-item:hover:not(:disabled) {
background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-context-menu__top-menu-item:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #3399ff);
outline-offset: 2px;
}
.cometchat-context-menu__top-menu-item:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cometchat-context-menu__top-menu-item-icon {
display: flex;
width: 16px;
height: 16px;
justify-content: center;
align-items: center;
flex-shrink: 0;
filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}
.cometchat-context-menu__trigger {
display: flex;
width: 24px;
height: 24px;
padding: 4px;
justify-content: center;
align-items: center;
border: none;
border-radius: var(--cometchat-radius-max, 1000px);
background: var(--cometchat-background-color-01, #fff);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
color: var(--cometchat-icon-color-secondary, #a1a1a1);
cursor: pointer;
z-index: 1000;
}
.cometchat-context-menu__trigger:hover {
background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-context-menu__trigger:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #3399ff);
outline-offset: 2px;
}
.cometchat-context-menu__trigger-icon {
display: flex;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}
.cometchat-context-menu__trigger-wrapper {
position: relative;
display: inline-flex;
}
.cometchat-context-menu__dropdown {
position: fixed;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 160px;
width: max-content;
max-width: 280px;
padding: 0;
overflow: hidden;
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);
}
.cometchat-context-menu__dropdown--hidden {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
.cometchat-context-menu__dropdown {
animation: contextMenuFadeIn 150ms ease-out;
}
}
@keyframes contextMenuFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.cometchat-context-menu__dropdown-item {
display: flex;
align-items: center;
gap: var(--cometchat-padding-2, 8px);
width: 100%;
padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
border: none;
background: var(--cometchat-background-color-01, #fff);
cursor: pointer;
text-align: start;
font: inherit;
color: inherit;
box-sizing: border-box;
}
.cometchat-context-menu__dropdown-item:hover:not(:disabled) {
background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-context-menu__dropdown-item:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #3399ff);
outline-offset: -2px;
}
.cometchat-context-menu__dropdown-item:disabled,
.cometchat-context-menu__dropdown-item--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cometchat-context-menu__dropdown-item-icon {
display: flex;
width: 20px;
height: 20px;
justify-content: center;
align-items: center;
flex-shrink: 0;
color: var(--cometchat-icon-color-secondary, #a1a1a1);
filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}
.cometchat-context-menu__dropdown-item-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
color: var(--cometchat-text-color-primary, #141414);
font: var(--cometchat-font-body-regular, 400 14px Roboto);
line-height: 120%;
text-align: start;
}
.cometchat-context-menu__overlay {
position: fixed;
inset: 0;
z-index: 999;
background: transparent;
}
/* src/components/CometChatMessageBubble/CometChatMessageBubble.css */
.cometchat-message-bubble__wrapper {
display: flex;
position: relative;
max-width: 100%;
width: 100%;
box-sizing: border-box;
padding: 0 var(--cometchat-padding-3, 12px);
align-items: flex-start;
gap: var(--cometchat-spacing-2, 8px);
flex: 1 0 0;
}
.cometchat-message-bubble__wrapper:focus {
outline: none;
}
.cometchat-message-bubble__wrapper:focus-visible {
outline: none;
}
.cometchat-message-bubble__wrapper--outgoing {
flex-direction: row-reverse;
}
.cometchat-message-bubble__wrapper--selected {
background: var(--cometchat-extended-primary-color-50, #f9f8fd);
}
.cometchat-message-bubble__wrapper--moderation-disapproved:has(.cometchat-message-bubble__body-bottom-view) .cometchat-message-bubble__body {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.cometchat-message-bubble__wrapper--moderation-disapproved .cometchat-message-bubble__body-wrapper,
.cometchat-message-bubble__wrapper--moderation-disapproved .cometchat-message-bubble__body {
min-width: 240px;
box-sizing: border-box;
}
.cometchat-message-bubble__body-bottom-view:has(.cometchat-moderation-view) {
max-width: 240px;
}
.cometchat-message-bubble__leading-view {
flex-shrink: 0;
align-self: flex-start;
--cometchat-avatar-width: 36px;
--cometchat-avatar-height: 36px;
}
.cometchat-message-bubble__leading-view [role=button] {
cursor: pointer;
}
.cometchat-message-bubble__leading-view [role=button]:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
border-radius: var(--cometchat-radius-max, 1000px);
}
.cometchat-message-bubble {
display: flex;
flex-direction: column;
max-width: 65%;
min-width: fit-content;
}
.cometchat-message-bubble-incoming {
align-items: flex-start;
}
.cometchat-message-bubble-outgoing {
align-items: flex-end;
margin-left: auto;
}
.cometchat-message-bubble-action {
align-items: center;
margin: 0 auto;
max-width: 100%;
}
.cometchat-message-bubble__header-view {
padding: 0 0 var(--cometchat-padding-1, 4px) 0;
}
.cometchat-message-bubble__sender-name {
font: var( --cometchat-font-caption1-medium, 500 12px var(--cometchat-font-family, "Inter", sans-serif) );
color: var(--cometchat-text-color-highlight, var(--cometchat-primary-color, #6852d6));
}
.cometchat-message-bubble__body-container {
display: flex;
align-items: center;
width: 100%;
height: 100%;
background: inherit;
position: relative;
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__body-container {
flex-direction: row;
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__body-container {
flex-direction: row;
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__options {
order: 3;
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__options {
order: 1;
}
.cometchat-message-bubble__options {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
display: flex;
align-items: center;
align-self: flex-start;
padding: 0px var(--cometchat-padding-2, 8px);
}
.cometchat-message-bubble__options--visible {
opacity: 1;
pointer-events: auto;
}
.cometchat-message-bubble__body-wrapper {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
order: 2;
}
.cometchat-message-bubble__body {
display: flex;
padding: var(--cometchat-padding-1, 4px);
flex-direction: column;
align-items: stretch;
border-radius: var(--cometchat-radius-3, 12px);
overflow: hidden;
max-width: 100%;
}
.cometchat-message-bubble__body:has(.cometchat-files-bubble__container--multi),
.cometchat-message-bubble__body:has(.cometchat-audios-bubble__container--multi) {
padding: 8px;
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__text-message {
background: var(--cometchat-neutral-color-300, #e8e8e8);
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__text-message {
background: var(--cometchat-primary-color, #6852d6);
}
.cometchat-message-bubble-incoming .cometchat-message-bubble__audio-message,
.cometchat-message-bubble-incoming .cometchat-message-bubble__file-message {
background: var(--cometchat-neutral-color-300, #e8e8e8);
}
.cometchat-message-bubble-outgoing .cometchat-message-bubble__audio-message,
.cometchat-message-bubble-outgoing .cometchat-message-bubble__file-message {
background: var(--cometchat-primary-color, #6852d6);
}
.cometchat-