@cometchat/chat-uikit-react 6.1.2 → 6.2.1

package/dist/styles/CometChatAIAssistantChat.css

@@ -0,0 +1,465 @@
+.cometchat-ai-assistant-chat {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: var(--cometchat-background-color-02);
+    align-items: center;
+
+}
+.cometchat-ai-assistant-chat  .cometchat-message-bubble-incoming{
+    overflow: hidden;
+    max-width: 100%;
+    box-sizing: border-box;
+    align-self: flex-start;
+    padding-top: 3px;
+}
+.cometchat-ai-assistant-chat__wrapper {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+.cometchat-ai-assistant-chat__message-list-wrapper {
+    height: inherit;
+    width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+.cometchat-ai-assistant-chat__header-wrapper {
+    height: fit-content;
+    width: 100%;
+    overflow: hidden;
+}
+
+.cometchat-ai-assistant-chat__composer-wrapper {
+    height: fit-content;
+    width: 100%;
+    overflow: hidden;
+    background: transparent;
+}
+
+/* header */
+.cometchat-ai-assistant-chat .cometchat-message-header {
+    border-bottom: 1px solid var(--cometchat-border-color-light);
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-header .cometchat-list-item {
+    gap: var(--cometchat-spacing-2);
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-header .cometchat-list-item__body-title {
+    display: block;
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-header .cometchat-message-header__subtitle {
+    color: var(--cometchat-text-color-secondary);
+}
+
+.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__header-auxiliary-view {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cometchat-spacing-2);
+
+}
+
+.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__header-auxiliary-view .cometchat-button {
+    height: fit-content;
+    width: fit-content;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    padding: 6px;
+
+}
+
+.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__header-auxiliary-view .cometchat-button__icon {
+    background: var(--cometchat-icon-color-secondary);
+    height: 24px;
+    width: 24px;
+}
+
+.cometchat-ai-assistant-chat .cometchat-ai-assistant-chat__header-auxiliary-view .cometchat-button__icon:hover {
+    background: var(--cometchat-icon-color-primary);
+    transition: background .4s ease-in-out;
+}
+
+/* header css end */
+
+/* composer  */
+.cometchat-ai-assistant-chat .cometchat-message-composer__input {
+    border: none;
+
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-composer {
+    border-radius: var(--cometchat-radius-4);
+    border: 1px solid var(--cometchat-border-color-default);
+    background: var(--cometchat-background-color-01);
+    margin: 0px 8px 8px;
+    width: auto;
+
+}
+.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view .cometchat-message-bubble__status-info-view-receipts-error {
+    height: 12px;
+    width: 12px;
+    margin-bottom: 2px;
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-bubble__status-info-view {
+    gap: var(--cometchat-padding-1);
+}
+.cometchat-ai-assistant-chat__send-button-view {
+    height: 44px;
+    width: 44px;
+    border-radius: var(--cometchat-radius-max);
+    padding: var(--cometchat-padding-3);
+    border: 1px solid var(--cometchat-border-color-light);
+    background: var(--cometchat-background-color-04);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.cometchat-ai-assistant-chat__send-button-view .cometchat-ai-assistant-chat__send-button-icon {
+    mask: url("../../assets/send-message.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/send-message.svg") center center no-repeat;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    height: 20px;
+    width: 20px;
+    background: var(--cometchat-icon-color-white);
+}
+
+.cometchat-ai-assistant-chat__send-button-view--active {
+    background: var(--cometchat-secondary-button-background);
+
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-list .cometchat-list__body {
+    border: none;
+    height: 100%;
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-list__shimmer {
+    background: transparent;
+}
+
+.cometchat-ai-assistant-chat__send-button-view--streaming {
+    background: var(--cometchat-secondary-button-background);
+
+
+}
+
+.cometchat-ai-assistant-chat__send-button-view--streaming .cometchat-ai-assistant-chat__send-button-icon {
+    mask: url("../../assets/stop-message.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/stop-message.svg") center center no-repeat;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    height: 16px;
+    width: 16px;
+    background: var(--cometchat-icon-color-white);
+    border-radius: 0px;
+}
+
+/* composer css end */
+/* message list */
+.cometchat-ai-assistant-chat .cometchat-list__empty-view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    /* height: 90%; */
+    padding: var(--cometchat-padding-4);
+
+}
+
+.cometchat-ai-assistant-chat__empty-state-suggested-messages {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    padding-top: var(--cometchat-padding-5);
+    max-width: 85%;
+}
+
+.cometchat-ai-assistant-chat__suggested-message-icon {
+    height: 16px;
+    width: 16px;
+    mask: url("../../assets/right-arrow.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/right-arrow.svg") center center no-repeat;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    background: var(--cometchat-icon-color-secondary);
+    display: inline-block;
+
+}
+.cometchat-ai-assistant-chat__suggested-message-pill:hover{
+    background: var(--cometchat-background-color-01);
+    transition: all .4s ease-in-out;
+    cursor: pointer;
+}
+.cometchat-ai-assistant-chat__suggested-message-pill {
+    border: 1px solid var(--cometchat-border-color-default);
+    background: transparent;
+    border-radius: var(--cometchat-radius-max);
+    min-height: 32px;
+    min-width: 80px;
+    color: var(--cometchat-text-color-secondary);
+    font: var(--cometchat-font-body-regular);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--cometchat-spacing-2);
+    padding: var(--cometchat-padding-2) var(--cometchat-padding-3);
+    box-sizing: border-box;
+}
+
+.cometchat-ai-assistant-chat .cometchat-message-list {
+    background: transparent;
+    max-width: calc(100% + (var(--cometchat-padding-4) * 2));
+    margin: 0 auto 17px auto;
+}
+.cometchat-ai-assistant-chat .cometchat-message-list__body
+{
+padding: 0 var(--cometchat-padding-1);
+padding-bottom: var(--cometchat-padding-2);
+
+}
+/* message list css end */
+
+/* mobile view */
+@media (max-width: 768px) {
+    .cometchat-ai-assistant-chat {
+        width: 100vw;
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        z-index: 3;
+    }
+
+}
+
+/* Empty State */
+.cometchat-ai-assistant-chat__empty-state {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+}
+
+.cometchat-ai-assistant-chat__empty-state-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* gap: var(--cometchat-spacing-3); */
+    text-align: center;
+    padding-top: var(--cometchat-padding-2);
+}
+
+.cometchat-ai-assistant-chat .cometchat-list__body > .cometchat-list__body-intersection-top{
+    visibility: hidden;
+}
+.cometchat-ai-assistant-chat__empty-state-icon img {
+    width: 60px;
+    height: 60px;
+    object-fit: contain;
+}
+
+.cometchat-ai-assistant-chat__empty-state-icon {
+    padding-bottom: var(--cometchat-padding-5);
+}
+
+.cometchat-ai-assistant-chat__empty-state-greeting-message {
+    color: var(--cometchat-text-color-secondary);
+    text-align: center;
+    font: var(--cometchat-font-heading3-regular);
+}
+
+.cometchat-ai-assistant-chat__empty-state-intro-message {
+    color: var(--cometchat-text-color-primary);
+    text-align: center;
+    font: var(--cometchat-font-title-regular);
+    padding-top: var(--cometchat-padding-1);
+}
+.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body
+,.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-text-bubble
+{
+    background: var(--cometchat-background-color-03);
+
+}
+.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming .cometchat-message-bubble__body
+{
+    background: transparent;
+
+}
+.cometchat-ai-assistant-chat .cometchat-message-bubble__wrapper{
+    gap: var(--cometchat-spacing-2);
+    padding: var(--cometchat-padding-2);
+
+}
+.cometchat-message-bubble__body.agent-assistant_custom{
+    padding: 0px;;
+
+}
+.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing  .cometchat-text-bubble__body-text,
+.cometchat-ai-assistant-chat .cometchat-message-bubble-outgoing .cometchat-date
+{
+    color: var(--cometchat-text-color-primary);
+}
+@media (max-width: 768px) {
+    .cometchat-ai-assistant-chat__empty-state-suggested-messages {
+        max-width: 90%;
+    }
+}
+@media (max-width: 680px) {
+    .cometchat-ai-assistant-chat__empty-state-suggested-messages {
+        max-width: 100%;
+    }
+}
+
+/* Chat History Sidebar */
+.cometchat-ai-assistant-chat__sidebar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60%;
+    max-width: 420px;
+    height: 100%;
+    background: var(--cometchat-background-color-01);
+    border-left: 1px solid var(--cometchat-border-color-light);
+    transform: translateX(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+}
+
+.cometchat-ai-assistant-chat__sidebar--open {
+    transform: translateX(0);
+}
+.cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__body-text {
+    -webkit-line-clamp: initial !important;
+    line-clamp: initial !important;
+}
+.cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-more,
+.cometchat-ai-assistant-chat .cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__read-less {
+    display: none;
+}
+.cometchat-ai-assistant-chat__sidebar-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--cometchat-background-color-02);
+}
+.cometchat-ai-assistant-chat__message-composer-view{
+    width: 100%;
+}
+.cometchat-ai-assistant-chat__message-composer-view--disabled {
+cursor: not-allowed ;
+caret-color: transparent ;
+position: relative;
+}
+
+.cometchat-ai-assistant-chat__message-composer-view--disabled * {
+pointer-events: none;
+}
+
+.cometchat-ai-assistant-chat__message-composer-view--disabled:hover::before {
+opacity: 1;
+background: var(--cometchat-error-color);
+}
+.cometchat-ai-assistant-chat__message-composer-view--disabled .cometchat-ai-assistant-chat__send-button-view--streaming .cometchat-ai-assistant-chat__send-button-icon{
+    cursor: not-allowed ;
+    pointer-events: none ;
+}
+.cometchat-ai-assistant-message-bubble__copy{
+    mask: url("../../assets/Copy.svg") center center no-repeat;
+    -webkit-mask: url("../../assets/Copy.svg") center center no-repeat;
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-top: var(--cometchat-margin-3);
+    height: 20px;
+    width: 20px;
+    background: var(--cometchat-icon-color-secondary);
+
+}
+.cometchat-ai-assistant-chat__sidebar-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 999;
+    opacity: 0;
+    animation: fadeIn 0.3s ease forwards;
+}
+.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming .cometchat-message-bubble__body-content-view,.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming .cometchat-message-bubble__body-wrapper,.cometchat-ai-assistant-chat 
+.cometchat-message-bubble-incoming .cometchat-message-bubble__body.tool-result_agentic,
+.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming > div,
+.cometchat-ai-assistant-chat .cometchat-message-bubble-incoming .cometchat-message-bubble__body
+{
+  min-width: 100%  !important;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+/* Mobile responsive sidebar */
+@media (max-width: 768px) {
+    .cometchat-ai-assistant-chat__sidebar {
+        position: fixed;
+        z-index: 1000;
+    }
+    
+    .cometchat-ai-assistant-chat__sidebar--open {
+        position: fixed;
+        transform: translateX(0);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    .cometchat-ai-assistant-chat__sidebar-overlay {
+        position: fixed;
+        z-index: 999;
+    }
+}
+
+@media (max-width: 480px) {
+    .cometchat-ai-assistant-chat__sidebar {
+        position: fixed;
+        z-index: 1000;
+    }
+    
+    .cometchat-ai-assistant-chat__sidebar--open {
+        width: 100%;
+        max-width: none;
+        position: fixed;
+        transform: translateX(0);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    .cometchat-ai-assistant-chat__sidebar-overlay {
+        position: fixed;
+        z-index: 999;
+    }
+}

package/dist/styles/CometChatAIAssistantChatHistory.css

@@ -0,0 +1,175 @@
+.cometchat-ai-assistant-chat-history {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: var(--cometchat-padding-2);
+  padding-top: 0;
+}
+
+.cometchat-ai-assistant-chat-history__loading,
+.cometchat-ai-assistant-chat-history__empty,
+.cometchat-ai-assistant-chat-history__error {
+  padding: 20px;
+  text-align: center;
+  color: var(--cometchat-text-color-secondary);
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.cometchat-ai-assistant-chat-history__list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cometchat-ai-assistant-chat-history__list-item {
+  padding: var(--cometchat-padding-3) var(--cometchat-padding-2);
+  background: var(--cometchat-background-color-02);
+  transition: background 0.2s ease;
+}
+
+.cometchat-ai-assistant-chat-history__list-item:hover {
+  background: var(--cometchat-background-color-03);
+  border-radius: var(--cometchat-radius-2);
+}
+
+.cometchat-ai-assistant-chat-history__list-item-text {
+  line-height: 1.5;
+  color: var(--cometchat-text-color-primary);
+  font: var(--cometchat-font-body-regular);
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cometchat-ai-assistant-chat-history .cometchat-list__body {
+  border: none;
+  padding: var(--cometchat-padding-2) 0;
+
+}
+
+.cometchat-ai-assistant-chat-history__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--cometchat-padding-2);
+  background: var(--cometchat-background-color-02);
+  min-height: 65px;
+  box-sizing: border-box;
+}
+
+.cometchat-ai-assistant-chat-history__title {
+  font: var(--cometchat-font-heading3-bold);
+  color: var(--cometchat-text-color-primary);
+  margin: 0;
+}
+
+.cometchat-ai-assistant-chat-history .cometchat-list__body-intersection-top {
+  visibility: hidden !important;
+}
+
+.cometchat-ai-assistant-chat-history__close {
+  background: transparent;
+  border: none;
+  padding: var(--cometchat-padding-2);
+  cursor: pointer;
+  border-radius: var(--cometchat-radius-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+}
+
+.cometchat-ai-assistant-chat-history__close:hover {
+  background: var(--cometchat-background-color-03);
+}
+
+.cometchat-ai-assistant-chat-history__close-icon {
+  width: 24px;
+  height: 24px;
+  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-secondary);
+}
+
+.cometchat-ai-assistant-chat-history__shimmer {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+
+}
+
+.cometchat-ai-assistant-chat-history__shimmer-item {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  width: 100%;
+  padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
+}
+
+.cometchat-ai-assistant-chat-history__shimmer-item-title {
+  width: 100%;
+  height: 22px;
+  flex-shrink: 0;
+  border-radius: var(--cometchat-radius-2, 8px);
+  background: var(--cometchat-shimmer-gradient-color,
+      linear-gradient(90deg, #e0e0e0 0%, #eee 100%));
+  animation: shimmerAnimation 1.5s infinite linear;
+
+}
+
+.cometchat-ai-assistant-chat-history__empty-state-view,
+.cometchat-ai-assistant-chat-history__error-state-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding-5, 20px);
+  justify-content: center;
+  align-items: center;
+ background: transparent;
+}
+
+
+
+.cometchat-ai-assistant-chat-history__empty-state-view-body,
+.cometchat-ai-assistant-chat-history__error-state-view-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cometchat-padding, 2px);
+}
+
+.cometchat-ai-assistant-chat-history__empty-state-view-body-title,
+.cometchat-ai-assistant-chat-history__error-state-view-body-title {
+  width: 280px;
+  color: var(--cometchat-text-color-primary, #141414);
+  text-align: center;
+  font: var(--cometchat-font-heading3-bold);
+  font-style: normal;
+}
+
+.cometchat-ai-assistant-chat-history__empty-state-view-body-description,
+.cometchat-ai-assistant-chat-history__error-state-view-body-description {
+  width: 280px;
+  color: var(--cometchat-text-color-secondary, #727272);
+  text-align: center;
+  font: var(--cometchat-font-body-regular);
+  font-style: normal;
+}
+
+@keyframes shimmerAnimation {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}