@ermis-network/ermis-chat-react 1.0.0

package/src/styles/_message-list.css

@@ -0,0 +1,416 @@
+/* ----------------------------------------------------------
+   Channel
+   ---------------------------------------------------------- */
+.ermis-channel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  font-family: var(--ermis-font-family);
+}
+
+.ermis-channel__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  color: var(--ermis-text-muted);
+  font-size: var(--ermis-font-size-sm);
+  font-family: var(--ermis-font-family);
+}
+
+/* ----------------------------------------------------------
+   MessageList
+   ---------------------------------------------------------- */
+.ermis-message-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  font-family: var(--ermis-font-family);
+  gap: var(--ermis-spacing-xs);
+  position: relative;
+}
+
+.ermis-message-list__vlist {
+  display: flex !important;
+  flex-direction: column !important;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  padding-top: var(--ermis-spacing-lg);
+  padding-bottom: var(--ermis-spacing-lg);
+}
+
+/* Push content to bottom when few messages, margin collapses when content overflows */
+.ermis-message-list__vlist > div {
+  margin-top: auto;
+}
+
+/* Jump to latest button */
+.ermis-message-list__jump-latest {
+  position: sticky;
+  bottom: var(--ermis-spacing-md);
+  align-self: center;
+  padding: var(--ermis-spacing-xs) var(--ermis-spacing-lg);
+  border: none;
+  border-radius: 999px;
+  background-color: var(--ermis-accent);
+  color: #fff;
+  font-size: var(--ermis-font-size-xs);
+  font-weight: 600;
+  font-family: var(--ermis-font-family);
+  cursor: pointer;
+  transition: background-color var(--ermis-transition), transform var(--ermis-transition);
+  z-index: 10;
+}
+
+.ermis-message-list__jump-latest:hover {
+  background-color: var(--ermis-accent-hover);
+  transform: translateY(-1px);
+}
+
+/* Pushes messages to bottom when few messages exist */
+.ermis-message-list__spacer {
+  flex: 1;
+}
+
+/* --- Load more (pagination) --- */
+.ermis-message-list__loading-more {
+  text-align: center;
+  padding: var(--ermis-spacing-sm);
+  color: var(--ermis-text-muted);
+  font-size: var(--ermis-font-size-xs);
+}
+
+.ermis-message-list__no-more {
+  text-align: center;
+  padding: var(--ermis-spacing-sm);
+  color: var(--ermis-text-muted);
+  font-size: var(--ermis-font-size-xs);
+  font-style: italic;
+}
+
+/* --- Date separator --- */
+.ermis-message-list__date-separator {
+  display: flex;
+  align-items: center;
+  gap: var(--ermis-spacing-md);
+  padding: var(--ermis-spacing-md) 0;
+  margin: var(--ermis-spacing-xs) 0;
+  align-self: stretch;
+}
+
+.ermis-message-list__date-separator-line {
+  flex: 1;
+  height: 1px;
+  background-color: var(--ermis-border);
+}
+
+.ermis-message-list__date-separator-label {
+  font-size: var(--ermis-font-size-xs);
+  color: var(--ermis-text-muted);
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.ermis-message-list__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: var(--ermis-spacing-sm);
+  color: var(--ermis-text-muted);
+  font-family: var(--ermis-font-family);
+  padding: var(--ermis-spacing-lg);
+  user-select: none;
+}
+
+.ermis-message-list__empty-icon {
+  color: var(--ermis-accent);
+  opacity: 0.4;
+  margin-bottom: var(--ermis-spacing-xs);
+}
+
+.ermis-message-list__empty-title {
+  font-size: var(--ermis-font-size-base);
+  font-weight: 600;
+  color: var(--ermis-text-secondary);
+}
+
+.ermis-message-list__empty-subtitle {
+  font-size: var(--ermis-font-size-sm);
+  color: var(--ermis-text-muted);
+}
+
+/* --- Message item (other = left, own = right) --- */
+.ermis-message-list__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ermis-spacing-sm);
+  width: 100%;
+}
+
+/* First message in a group: normal top margin */
+.ermis-message-list__item--group-start {
+  padding-top: var(--ermis-spacing-md);
+}
+
+/* Continuation messages in a group: tight spacing */
+.ermis-message-list__item--group-cont {
+  padding-top: 2px;
+}
+
+.ermis-message-list__item--other {
+  align-self: flex-start;
+  flex-direction: row;
+}
+
+.ermis-message-list__item--own {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+@keyframes ermis-highlight-fade {
+  0% {
+    background-color: rgba(99, 102, 241, 0.15);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+/* --- Fade-in animation for new messages --- */
+/* Smooth scroll handles the "slide-up" for the entire list;
+   individual items only need a subtle fade-in. */
+@keyframes ermis-message-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.ermis-message-list__item--new {
+  animation: ermis-message-fade-in 0.35s ease-out forwards;
+}
+
+.ermis-message-list__item--highlighted {
+  position: relative;
+}
+
+.ermis-message-list__item--highlighted::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -3rem;
+  right: -3rem;
+  animation: ermis-highlight-fade 3s ease-out forwards;
+  pointer-events: none;
+  z-index: -1;
+}
+
+/* --- Optimistic UI: message status --- */
+.ermis-message--sending {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.ermis-message--error .ermis-message-bubble {
+  border: 1px solid #e74c3c;
+}
+
+/* --- Pinned Message Indicator --- */
+.ermis-message-list__pinned-indicator {
+  position: absolute;
+  top: -5px;
+  color: #e74c3c;
+  z-index: 10;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.ermis-message-list__pinned-indicator--own {
+  left: -10px;
+  transform: rotate(-45deg);
+}
+
+.ermis-message-list__pinned-indicator--other {
+  right: -10px;
+  transform: rotate(45deg);
+}
+
+/* ----------------------------------------------------------
+   Banned State
+   ---------------------------------------------------------- */
+
+.ermis-message-list__banned-overlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100dvh - 8rem);
+  gap: var(--ermis-spacing-md);
+  user-select: none;
+}
+
+.ermis-message-list__banned-overlay-icon {
+  color: #ef4444;
+  opacity: 0.6;
+}
+
+.ermis-message-list__banned-overlay-title {
+  font-size: var(--ermis-font-size-base);
+  font-weight: 600;
+  color: var(--ermis-text-primary);
+}
+
+.ermis-message-list__banned-overlay-subtitle {
+  font-size: var(--ermis-font-size-sm);
+  color: var(--ermis-text-muted);
+}
+
+/* ----------------------------------------------------------
+   Blocked State (messaging channels — user-initiated block)
+   Messages remain visible but actions are disabled.
+   ---------------------------------------------------------- */
+.ermis-message-list--blocked .ermis-message-actions {
+  display: none;
+}
+
+.ermis-message-list--blocked .ermis-message-reactions__add-btn {
+  display: none;
+}
+
+/* Unblock button inside blocked overlay */
+.ermis-message-list__unblock-btn {
+  margin-top: var(--ermis-spacing-md);
+  padding: var(--ermis-spacing-sm) var(--ermis-spacing-xl, 24px);
+  border: none;
+  border-radius: var(--ermis-radius-md, 8px);
+  background-color: var(--ermis-accent);
+  color: #fff;
+  font-size: var(--ermis-font-size-sm);
+  font-weight: 600;
+  font-family: var(--ermis-font-family);
+  cursor: pointer;
+  transition: background-color var(--ermis-transition), transform var(--ermis-transition);
+}
+
+.ermis-message-list__unblock-btn:hover {
+  background-color: var(--ermis-accent-hover);
+  transform: translateY(-1px);
+}
+
+.ermis-message-list__unblock-btn:active {
+  transform: translateY(0);
+}
+
+/* Pending Overlay */
+.ermis-message-list__pending-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100dvh - 8rem);
+  padding: var(--ermis-spacing-xl);
+}
+
+.ermis-message-list__pending-card {
+  background-color: var(--ermis-bg-elevated, #ffffff);
+  border-radius: var(--ermis-radius-lg, 12px);
+  padding: var(--ermis-spacing-xxl, 32px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+}
+
+.ermis-message-list__pending-avatar {
+  margin-bottom: var(--ermis-spacing-lg, 16px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.ermis-message-list__pending-overlay-title {
+  font-family: var(--ermis-font-family, sans-serif);
+  font-size: var(--ermis-font-size-md, 14px);
+  font-weight: 500;
+  color: var(--ermis-text-secondary, #666);
+  margin-bottom: var(--ermis-spacing-xs, 4px);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.ermis-message-list__pending-channel-name {
+  font-family: var(--ermis-font-family, sans-serif);
+  font-size: var(--ermis-font-size-xl, 20px);
+  font-weight: 700;
+  color: var(--ermis-text, #333);
+  margin-bottom: var(--ermis-spacing-sm, 8px);
+}
+
+.ermis-message-list__pending-overlay-subtitle {
+  font-family: var(--ermis-font-family, sans-serif);
+  font-size: var(--ermis-font-size-sm, 14px);
+  color: var(--ermis-text-secondary, #666);
+  margin-bottom: var(--ermis-spacing-xl, 24px);
+  line-height: 1.5;
+}
+
+.ermis-message-list__pending-actions {
+  display: flex;
+  gap: var(--ermis-spacing-md, 12px);
+  width: 100%;
+}
+
+.ermis-message-list__accept-btn,
+.ermis-message-list__reject-btn {
+  flex: 1;
+  padding: var(--ermis-spacing-sm, 10px) var(--ermis-spacing-md, 16px);
+  border-radius: var(--ermis-radius-md, 8px);
+  font-family: var(--ermis-font-family, sans-serif);
+  font-size: var(--ermis-font-size-md, 15px);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--ermis-transition, 0.2s ease);
+}
+
+.ermis-message-list__accept-btn {
+  border: none;
+  background-color: var(--ermis-accent, #005fff);
+  color: #fff;
+  box-shadow: 0 4px 10px rgba(0, 95, 255, 0.2);
+}
+
+.ermis-message-list__accept-btn:hover {
+  background-color: var(--ermis-accent-hover, #004ecc);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 14px rgba(0, 95, 255, 0.3);
+}
+
+.ermis-message-list__accept-btn:active {
+  transform: translateY(0);
+}
+
+.ermis-message-list__reject-btn {
+  border: 1px solid var(--ermis-danger-border, #fecaca);
+  background-color: var(--ermis-danger-soft, #fef2f2);
+  color: var(--ermis-danger, #ef4444);
+}
+
+.ermis-message-list__reject-btn:hover {
+  background-color: var(--ermis-danger, #ef4444);
+  color: #fff;
+  border-color: var(--ermis-danger, #ef4444);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.3);
+}
+.ermis-message-list__reject-btn:active {
+  transform: translateY(0);
+}

package/src/styles/_message-quick-reactions.css

@@ -0,0 +1,62 @@
+/* ============================================================
+   Message Quick Reactions (Hover popup)
+   ============================================================ */
+
+.ermis-message-quick-reactions {
+  position: absolute;
+  bottom: calc(100% - 10px); /* hover right above the bubble */
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background-color: var(--ermis-bg-primary);
+  border: 1px solid var(--ermis-border);
+  padding: 4px;
+  border-radius: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(8px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  z-index: 20;
+}
+
+/* Align based on ownership */
+.ermis-message-quick-reactions {
+  left: 0;
+}
+.ermis-message-quick-reactions--own {
+  left: auto;
+  right: 0;
+}
+
+.ermis-message-list__bubble-wrapper:hover .ermis-message-quick-reactions {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.ermis-message-quick-reactions__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  font-size: 18px;
+  line-height: 1;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.15s;
+}
+
+.ermis-message-quick-reactions__btn:hover {
+  transform: scale(1.2);
+  background-color: var(--ermis-bg-hover);
+}
+
+.ermis-message-quick-reactions__btn--active {
+  background-color: var(--ermis-bg-active, rgba(99, 102, 241, 0.12));
+}

package/src/styles/_message-reactions.css

@@ -0,0 +1,67 @@
+/* ============================================================
+   Message Reactions
+   ============================================================ */
+.ermis-message-reactions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 2px;
+}
+
+.ermis-message-reactions__item {
+  position: relative; /* For tooltip */
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-radius: 12px;
+  background-color: var(--ermis-surface);
+  border: 1px solid var(--ermis-border);
+  font-size: 11px;
+  line-height: 1.2;
+  color: var(--ermis-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+/* Custom Tooltip */
+.ermis-message-reactions__item::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  white-space: pre;
+  text-align: left;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+  margin-bottom: 6px;
+  z-index: 100;
+}
+
+.ermis-message-reactions__item:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.ermis-message-reactions__item--active {
+  background-color: var(--ermis-bg-active, rgba(99, 102, 241, 0.12));
+  border-color: var(--ermis-accent);
+  color: var(--ermis-accent);
+}
+
+.ermis-message-reactions__emoji {
+  font-size: 14px;
+}
+
+.ermis-message-reactions__count {
+  font-weight: 600;
+}

package/src/styles/_modal.css

@@ -0,0 +1,113 @@
+.ermis-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ermis-modal-fade-in 0.2s ease-out;
+}
+
+@keyframes ermis-modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.ermis-modal-content {
+  background-color: var(--ermis-bg-surface, #ffffff);
+  border-radius: 12px;
+  width: 90%;
+  max-width: 480px;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  animation: ermis-modal-slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  border: 1px solid var(--ermis-border-color, #eaeaea);
+}
+
+[data-theme='dark'] .ermis-modal-content {
+  background-color: var(--ermis-bg-surface, #1e1e1e);
+  border: 1px solid var(--ermis-border-color, #333333);
+}
+
+@keyframes ermis-modal-slide-up {
+  from { opacity: 0; transform: translateY(20px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.ermis-modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--ermis-border-color, #eaeaea);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+
+[data-theme='dark'] .ermis-modal-header {
+  border-bottom: 1px solid var(--ermis-border-color, #333333);
+}
+
+.ermis-modal-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ermis-text-primary, #000000);
+}
+
+[data-theme='dark'] .ermis-modal-header h3 {
+  color: var(--ermis-text-primary, #ffffff);
+}
+
+.ermis-modal-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--ermis-text-secondary, #666666);
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.ermis-modal-close:hover {
+  background-color: var(--ermis-bg-hover, #f0f0f0);
+  color: var(--ermis-text-primary, #000000);
+}
+
+[data-theme='dark'] .ermis-modal-close:hover {
+  background-color: var(--ermis-bg-hover, #2a2a2a);
+  color: var(--ermis-text-primary, #ffffff);
+}
+
+.ermis-modal-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1;
+}
+
+.ermis-modal-footer {
+  padding: 16px 20px;
+  border-top: 1px solid var(--ermis-border-color, #eaeaea);
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-shrink: 0;
+  background-color: var(--ermis-bg-base, #f9f9f9);
+}
+
+[data-theme='dark'] .ermis-modal-footer {
+  border-top: 1px solid var(--ermis-border-color, #333333);
+  background-color: var(--ermis-bg-base, #121212);
+}

package/src/styles/_panel.css

@@ -0,0 +1,69 @@
+/* ==========================================================================
+   Panel — Reusable sliding overlay panel
+   ========================================================================== */
+
+.ermis-panel {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  background: var(--ermis-bg-primary, #fff);
+  transform: translateX(100%);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  overflow: hidden;
+}
+
+.ermis-panel--open {
+  transform: translateX(0);
+}
+
+/* Header */
+.ermis-panel__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--ermis-border, rgba(0, 0, 0, 0.08));
+  flex-shrink: 0;
+}
+
+.ermis-panel__back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: none;
+  color: var(--ermis-text-secondary);
+  cursor: pointer;
+  border-radius: 8px;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+
+.ermis-panel__back:hover {
+  background: var(--ermis-bg-hover);
+  color: var(--ermis-text-primary);
+}
+
+.ermis-panel__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ermis-text-primary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Body */
+.ermis-panel__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+}