@cometchat/chat-uikit-react 6.3.13 → 6.4.0

package/dist/styles/components/CometChatConversations.css

@@ -116,10 +116,40 @@ box-sizing: border-box;
   text-overflow: ellipsis;
   white-space: nowrap;
   font: var(--cometchat-font-body-regular);
-  font-style: normal;
   width: 100%; 
 }
 
+/* Inline code styling in conversation subtitle */
+.cometchat-conversations__subtitle-text code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 0.9em;
+  background: var(--cometchat-background-color-03);
+  color: var(--cometchat-text-color-secondary);
+  padding: 0 var(--cometchat-padding-1, 2px);
+  border-radius: var(--cometchat-radius-1, 4px);
+  border: 1px solid var(--cometchat-border-color-light);
+}
+
+/* Rich text formatting tags in conversation subtitle */
+/* !important needed because the parent uses the `font` shorthand which resets font-weight/style on all descendants */
+.cometchat-conversations__subtitle-text b,
+.cometchat-conversations__subtitle-text strong {
+  font-weight: 700 !important;
+}
+
+.cometchat-conversations__subtitle-text i,
+.cometchat-conversations__subtitle-text em {
+  font-style: italic !important;
+}
+
+.cometchat-conversations__subtitle-text u {
+  text-decoration: underline !important;
+}
+
+.cometchat-conversations__subtitle-text s {
+  text-decoration: line-through !important;
+}
+
 .cometchat-conversations__subtitle-icon {
   display: flex;
   align-items: center;
@@ -449,10 +479,16 @@ background: var(--cometchat-icon-color-secondary, #A1A1A1);
 .cometchat-conversations__subtitle-text .cometchat-mentions > span{ 
   color: var(--cometchat-text-color-highlight,#6852D6);
   font: var(--cometchat-font-body-regular);
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: none;
 }
 .cometchat-conversations__subtitle-text .cometchat-mentions-you > span{ 
   color: var(--cometchat-warning-color,#FFAB00);
   font: var(--cometchat-font-body-regular);
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: none;
 }
 
 .cometchat-conversations__subtitle-typing {

package/dist/styles/components/CometChatDocumentBubble.css

@@ -100,7 +100,6 @@
     background: var(--cometchat-primary-color, #6852D6);
 }
 
-
 .cometchat-document-bubble-outgoing .cometchat-document-bubble__body-icon {
     background: var(--cometchat-static-white, #FFF);
 }

package/dist/styles/components/CometChatFormattingToolbar.css

@@ -0,0 +1,257 @@
+/* CometChatFormattingToolbar - formatting toolbar styles */
+
+/* Base toolbar container */
+.cometchat-formatting-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--cometchat-padding-4, 16px);
+  padding: 0;
+  background: var(--cometchat-background-color-02);
+  border-radius: 0;
+  font-family: var(--cometchat-font-family);
+  box-sizing: border-box;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-wrap: nowrap;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  width: 100%;
+}
+
+.cometchat-formatting-toolbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Toolbar button base styles */
+.cometchat-formatting-toolbar__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--cometchat-radius-1);
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  flex-shrink: 0;
+}
+
+/* Override CometChatButton styles for toolbar buttons */
+.cometchat-formatting-toolbar__button .cometchat {
+  width: 100%;
+  height: 100%;
+}
+
+.cometchat-formatting-toolbar__button .cometchat-button {
+  width: 100%;
+  height: 100%;
+  min-width: unset;
+  min-height: unset;
+  padding: 0;
+  background: transparent;
+  border-radius: var(--cometchat-radius-1);
+}
+
+.cometchat-formatting-toolbar__button .cometchat-button:hover {
+  background: transparent;
+}
+
+.cometchat-formatting-toolbar__button .cometchat-button:active {
+  background: transparent;
+}
+
+.cometchat-formatting-toolbar__button .cometchat-button__icon-default {
+  width: 20px;
+  height: 20px;
+  background-color: var(--cometchat-icon-color-secondary);
+}
+
+.cometchat-formatting-toolbar__button:hover .cometchat-button__icon-default {
+  background-color: var(--cometchat-icon-color-primary);
+}
+
+/* Button icon styling */
+.cometchat-formatting-toolbar__button img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  filter: brightness(0) saturate(100%);
+  opacity: 0.6;
+}
+
+/* Button hover state */
+.cometchat-formatting-toolbar__button:hover img {
+  filter: brightness(0) saturate(100%);
+  opacity: 1;
+}
+
+/* Button active/pressed state */
+.cometchat-formatting-toolbar__button--active {
+  border-radius: var(--cometchat-radius-1, 4px);
+  background: var(--cometchat-background-color-04);
+}
+
+.cometchat-formatting-toolbar__button--active .cometchat-button__icon-default {
+  background-color: var(--cometchat-icon-color-primary);
+}
+
+.cometchat-formatting-toolbar__button--active img {
+  opacity: 1;
+  filter: brightness(0) saturate(100%);
+}
+
+/* Button disabled state */
+.cometchat-formatting-toolbar__button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.cometchat-formatting-toolbar__button--disabled:hover {
+  background: transparent;
+}
+
+.cometchat-formatting-toolbar__button--disabled img {
+  opacity: 0.4;
+}
+
+/* Button focus state for accessibility */
+.cometchat-formatting-toolbar__button:focus {
+  outline: 2px solid var(--cometchat-border-color-highlight);
+  outline-offset: 1px;
+}
+
+.cometchat-formatting-toolbar__button:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Separator between button groups */
+.cometchat-formatting-toolbar__separator {
+  width: 1px;
+  height: 20px;
+  background: var(--cometchat-border-color-default);
+  margin: 0 var(--cometchat-margin-1, 4px);
+  flex-shrink: 0;
+}
+
+/* Floating toolbar modifier */
+.cometchat-formatting-toolbar--floating {
+  position: fixed;
+  z-index: 1000;
+  transform: translateX(-50%);
+  background: var(--cometchat-background-color-02);
+  border-radius: var(--cometchat-radius-2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--cometchat-border-color-light);
+  width: auto;
+  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
+  gap: var(--cometchat-spacing-1, 4px);
+}
+
+/* Compact buttons in floating toolbar */
+.cometchat-formatting-toolbar--floating .cometchat-formatting-toolbar__button {
+  width: 22px;
+  height: 22px;
+}
+
+.cometchat-formatting-toolbar--floating .cometchat-formatting-toolbar__button img {
+  width: 16px;
+  height: 16px;
+}
+
+.cometchat-formatting-toolbar--floating .cometchat-formatting-toolbar__separator {
+  height: 16px;
+  margin: 0 var(--cometchat-margin-1, 4px);
+}
+
+/* Link input popover container */
+.cometchat-formatting-toolbar__link-input {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--cometchat-margin-2, 8px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-spacing-2, 8px);
+  padding: var(--cometchat-padding-3, 12px);
+  background: var(--cometchat-background-color-01);
+  border: 1px solid var(--cometchat-border-color-default);
+  border-radius: var(--cometchat-radius-2, 8px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 280px;
+  z-index: 1001;
+}
+
+/* Link input field */
+.cometchat-formatting-toolbar__link-input input {
+  width: 100%;
+  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
+  border: 1px solid var(--cometchat-border-color-default);
+  border-radius: var(--cometchat-radius-1, 4px);
+  background: var(--cometchat-background-color-01);
+  color: var(--cometchat-text-color-primary);
+  font: var(--cometchat-font-body-regular);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.cometchat-formatting-toolbar__link-input input:focus {
+  border-color: var(--cometchat-border-color-highlight);
+}
+
+.cometchat-formatting-toolbar__link-input input::placeholder {
+  color: var(--cometchat-text-color-tertiary);
+}
+
+/* Link input error message */
+.cometchat-formatting-toolbar__link-input-error {
+  color: var(--cometchat-error-color);
+  font: var(--cometchat-font-caption1-regular);
+}
+
+/* Link input action buttons container */
+.cometchat-formatting-toolbar__link-input-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--cometchat-spacing-2, 8px);
+}
+
+/* Override CometChatButton styles for link dialog buttons */
+.cometchat-formatting-toolbar__link-input-button .cometchat-button {
+  width: auto;
+  min-width: 80px;
+  height: 32px;
+  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-3, 12px);
+}
+
+.cometchat-formatting-toolbar__link-input-button--primary .cometchat-button {
+  background: var(--cometchat-primary-button-background);
+}
+
+.cometchat-formatting-toolbar__link-input-button--primary .cometchat-button:hover {
+  background: var(--cometchat-extended-primary-color-800);
+}
+
+.cometchat-formatting-toolbar__link-input-button:not(.cometchat-formatting-toolbar__link-input-button--primary) .cometchat-button {
+  background: var(--cometchat-background-color-01);
+  border: 1px solid var(--cometchat-border-color-default);
+}
+
+.cometchat-formatting-toolbar__link-input-button:not(.cometchat-formatting-toolbar__link-input-button--primary) .cometchat-button:hover {
+  background: var(--cometchat-background-color-02);
+}
+
+.cometchat-formatting-toolbar__link-input-button:not(.cometchat-formatting-toolbar__link-input-button--primary) .cometchat-button__text {
+  color: var(--cometchat-text-color-primary);
+}
+
+/* Link input buttons */
+.cometchat-formatting-toolbar__link-input-button {
+  padding: 0;
+  border: none;
+  border-radius: var(--cometchat-radius-1, 4px);
+  background: transparent;
+}

package/dist/styles/components/CometChatLinkDialog.css

@@ -0,0 +1,191 @@
+/* Backdrop overlay for the link dialog */
+.cometchat-link-dialog__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+/* Container for the link dialog */
+.cometchat-link-dialog {
+  width: 400px;
+  max-width: 90vw;
+  box-sizing: border-box;
+  display: flex;
+  padding: var(--cometchat-padding-6, 24px);
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--cometchat-padding-4, 16px);
+  border-radius: var(--cometchat-radius-4, 16px);
+  border: 1px solid var(--cometchat-border-color-light);
+  background: var(--cometchat-background-color-01);
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+/* Header section with title and close button */
+.cometchat-link-dialog__header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Dialog title */
+.cometchat-link-dialog__title {
+  color: var(--cometchat-text-color-primary);
+  text-align: left;
+  font: var(--cometchat-font-heading4-bold);
+  font-style: normal;
+}
+
+/* Close button */
+.cometchat-link-dialog__close-button {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  mask: url("../../assets/close.svg") center center no-repeat;
+  -webkit-mask: url("../../assets/close.svg") center center no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  background: var(--cometchat-icon-color-primary);
+}
+
+/* Divider between header and content */
+.cometchat-link-dialog__divider {
+  height: 1px;
+  width: 100%;
+  background: var(--cometchat-border-color-light);
+}
+
+/* Content section with form fields */
+.cometchat-link-dialog__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding-5, 20px);
+}
+
+/* Individual form field */
+.cometchat-link-dialog__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding, 4px);
+}
+
+/* Field label */
+.cometchat-link-dialog__label {
+  color: var(--cometchat-text-color-primary);
+  font: var(--cometchat-font-heading4-medium);
+  font-style: normal;
+  text-align: left;
+}
+
+/* Input field */
+.cometchat-link-dialog__input {
+  display: flex;
+  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
+  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);
+  color: var(--cometchat-text-color-primary);
+  font: var(--cometchat-font-body-regular);
+  font-style: normal;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.cometchat-link-dialog__input:focus {
+  border-color: var(--cometchat-primary-color);
+}
+
+.cometchat-link-dialog__input::placeholder {
+  color: var(--cometchat-text-color-tertiary);
+}
+
+/* Input field with error */
+.cometchat-link-dialog__input--error {
+  border-color: var(--cometchat-error-color);
+}
+
+.cometchat-link-dialog__input--error:focus {
+  border-color: var(--cometchat-error-color);
+}
+
+/* Error message */
+.cometchat-link-dialog__error {
+  color: var(--cometchat-error-color);
+  font: var(--cometchat-font-caption2-regular);
+  font-style: normal;
+}
+
+/* Button group */
+.cometchat-link-dialog__button-group {
+  display: flex;
+  padding-top: var(--cometchat-padding-2, 8px);
+  align-items: center;
+  gap: var(--cometchat-padding-2, 8px);
+  align-self: stretch;
+  width: 100%;
+}
+
+/* Button containers */
+.cometchat-link-dialog__button-cancel,
+.cometchat-link-dialog__button-submit {
+  flex: 1;
+  display: flex;
+  height: 40px;
+}
+
+.cometchat-link-dialog__button-cancel > .cometchat,
+.cometchat-link-dialog__button-submit > .cometchat {
+  height: 100%;
+  width: 100%;
+}
+
+.cometchat-link-dialog__button-cancel .cometchat-button,
+.cometchat-link-dialog__button-submit .cometchat-button {
+  height: 100%;
+  width: 100%;
+}
+
+/* Cancel button styling */
+.cometchat-link-dialog__button-cancel .cometchat-button {
+  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
+  border: 1px solid var(--cometchat-border-color-dark);
+  background: var(--cometchat-background-color-01);
+}
+
+.cometchat-link-dialog__button-cancel .cometchat-button .cometchat-button__text {
+  color: var(--cometchat-text-color-primary);
+}
+
+/* Submit button styling */
+.cometchat-link-dialog__button-submit .cometchat-button {
+  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
+  background: var(--cometchat-primary-color);
+  border: 1px solid var(--cometchat-primary-color);
+}
+
+.cometchat-link-dialog__button-submit .cometchat-button .cometchat-button__text {
+  color: var(--cometchat-static-white);
+}
+
+
+/* Disabled submit button styling */
+.cometchat-link-dialog__button-submit--disabled .cometchat-button {
+  background: var(--cometchat-background-color-04) !important;
+  border-color: var(--cometchat-background-color-04) !important;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.cometchat-link-dialog__button-submit--disabled .cometchat-button .cometchat-button__text {
+  color: var(--cometchat-text-color-tertiary) !important;
+}

package/dist/styles/components/CometChatLinkPopover.css

@@ -0,0 +1,128 @@
+/* CometChatLinkPopover - Link popover shown on click */
+
+.cometchat-link-popover {
+  position: absolute;
+  z-index: 1000;
+  transform: translateY(-100%);
+}
+
+.cometchat-link-popover__content {
+  position: relative;
+  background: var(--cometchat-background-color-01, #fff);
+  border-radius: var(--cometchat-radius-4, 16px);
+  padding: var(--cometchat-padding-6, 24px);
+  width: 320px;
+  max-width: 90vw;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-spacing-3, 12px);
+  border: 1px solid var(--cometchat-border-color-light);
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+.cometchat-link-popover__close {
+  position: absolute;
+  top: var(--cometchat-spacing-4, 16px);
+  right: var(--cometchat-spacing-4, 16px);
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  color: var(--cometchat-icon-color-secondary, #727272);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--cometchat-radius-1, 4px);
+  padding: 0;
+  transition: background-color 0.2s ease;
+}
+
+.cometchat-link-popover__close:hover {
+  background: var(--cometchat-background-color-02, #f5f5f5);
+  color: var(--cometchat-icon-color-primary, #141414);
+}
+
+.cometchat-link-popover__text {
+  font: var(--cometchat-font-heading4-bold);
+  color: var(--cometchat-text-color-primary, #141414);
+  padding-right: var(--cometchat-padding-7, 28px);
+  word-break: break-word;
+  text-align: left;
+}
+
+.cometchat-link-popover__url {
+  font: var(--cometchat-font-body-regular);
+  color: var(--cometchat-primary-color, #6852d6);
+  text-decoration: none;
+  display: block;
+  word-break: break-all;
+  text-align: left;
+}
+
+.cometchat-link-popover__url:hover {
+  text-decoration: underline;
+}
+
+.cometchat-link-popover__actions {
+  display: flex;
+  gap: var(--cometchat-spacing-3, 12px);
+}
+
+/* Button wrappers — shared */
+.cometchat-link-popover__button-edit,
+.cometchat-link-popover__button-remove {
+  flex: 1;
+  display: flex;
+  height: 40px;
+}
+
+.cometchat-link-popover__button-edit > .cometchat,
+.cometchat-link-popover__button-remove > .cometchat {
+  width: 100%;
+  height: 100%;
+}
+
+/* Shared button styles */
+.cometchat-link-popover__button-edit .cometchat-button,
+.cometchat-link-popover__button-remove .cometchat-button {
+  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
+  border-radius: var(--cometchat-radius-2, 8px);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  height: 100%;
+  width: 100%;
+}
+
+/* Shared button text */
+.cometchat-link-popover__button-edit .cometchat-button .cometchat-button__text,
+.cometchat-link-popover__button-remove .cometchat-button .cometchat-button__text {
+  font: var(--cometchat-font-button-medium);
+}
+
+/* Edit button — specific */
+.cometchat-link-popover__button-edit .cometchat-button {
+  background: var(--cometchat-background-color-01, #fff);
+  border: 1px solid var(--cometchat-border-color-default, #e8e8e8);
+}
+
+.cometchat-link-popover__button-edit .cometchat-button:hover {
+  background: var(--cometchat-background-color-02, #f5f5f5);
+}
+
+.cometchat-link-popover__button-edit .cometchat-button .cometchat-button__text {
+  color: var(--cometchat-text-color-primary, #141414);
+}
+
+/* Remove button — specific */
+.cometchat-link-popover__button-remove .cometchat-button {
+  background: var(--cometchat-error-color, #f44336);
+  border: none;
+}
+
+.cometchat-link-popover__button-remove .cometchat-button .cometchat-button__text {
+  color: var(--cometchat-static-white, #fff);
+}