@product7/product7-js 0.5.5 → 0.5.7

package/src/styles/{web-chat-components.js → liveChat-components.js}

@@ -1,16 +1,16 @@
-export const webChatComponentsStyles = `
+export const liveChatComponentsStyles = `
 
 /* ========================================
    MESSAGES
    ======================================== */
 
-.web-chat-message {
+.liveChat-message {
   display: flex;
   gap: var(--spacing-2);
   max-width: 75%;
 }
 
-.web-chat-message-system {
+.liveChat-message-system {
   align-self: center;
   display: flex;
   align-items: center;
@@ -19,15 +19,15 @@
   width: 100%;
 }
 
-.web-chat-message-system::before,
-.web-chat-message-system::after {
+.liveChat-message-system::before,
+.liveChat-message-system::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--msg-border);
 }
 
-.web-chat-message-system-text {
+.liveChat-message-system-text {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--msg-text-secondary);
@@ -36,7 +36,7 @@
 }
 
 /* Rich join/leave system event */
-.web-chat-message-system-event {
+.liveChat-message-system-event {
   align-self: center;
   display: flex;
   flex-direction: column;
@@ -47,7 +47,7 @@
   text-align: center;
 }
 
-.web-chat-message-system-event-avatar {
+.liveChat-message-system-event-avatar {
   width: 3rem;
   height: 3rem;
   border-radius: var(--radius-full);
@@ -64,103 +64,103 @@
   margin-bottom: 4px;
 }
 
-.web-chat-message-system-event-avatar img {
+.liveChat-message-system-event-avatar img {
   width: 60%;
   height: 60%;
   object-fit: contain;
 }
 
-.web-chat-message-system-event-name {
+.liveChat-message-system-event-name {
   font-size: 0.875rem;
   font-weight: var(--font-weight-semibold);
   color: var(--msg-text);
   line-height: 1.3;
 }
 
-.web-chat-message-system-event-action {
+.liveChat-message-system-event-action {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--msg-text-secondary);
   margin-top: -2px;
 }
 
-.web-chat-message-system-event-time {
+.liveChat-message-system-event-time {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--msg-text-tertiary);
 }
 
-.web-chat-message-own {
+.liveChat-message-own {
   align-self: flex-end;
   flex-direction: column;
   align-items: flex-end;
 }
 
-.web-chat-message-received {
+.liveChat-message-received {
   align-self: flex-start;
   flex-direction: column;
 }
 
-.web-chat-message-row {
+.liveChat-message-row {
   display: flex;
   align-items: flex-end;
   gap: var(--spacing-2);
 }
 
-.web-chat-message-wrapper {
+.liveChat-message-wrapper {
   display: flex;
   flex-direction: column;
 }
 
-.web-chat-message-avatar {
+.liveChat-message-avatar {
   display: none;
 }
 
-.web-chat-message-sender {
+.liveChat-message-sender {
   display: none;
 }
 
-.web-chat-message-bubble {
+.liveChat-message-bubble {
   padding: 7px 13px;
   border-radius: 1.125rem;
   word-wrap: break-word;
   max-width: 100%;
 }
 
-.web-chat-message-own .web-chat-message-bubble {
+.liveChat-message-own .liveChat-message-bubble {
   background: var(--msg-bg-bubble-own);
   color: #111827;
   border-bottom-right-radius: 0.25rem;
 }
 
-.web-chat-message-received .web-chat-message-bubble {
+.liveChat-message-received .liveChat-message-bubble {
   background: var(--msg-bg-bubble-received);
   color: #ffffff;
   border-bottom-left-radius: 0.25rem;
 }
 
-.web-chat-message-content {
+.liveChat-message-content {
   font-size: 0.875rem;
   font-weight: 500;
   line-height: var(--line-height-relaxed);
 }
 
-.web-chat-message-content p {
+.liveChat-message-content p {
   margin: 0 0 0.5rem;
 }
 
-.web-chat-message-content p:last-child {
+.liveChat-message-content p:last-child {
   margin-bottom: 0;
 }
 
-.web-chat-message-time {
+.liveChat-message-time {
   font-size: var(--font-size-xs);
   color: var(--msg-text-tertiary);
   margin-top: 0.25rem;
   padding: 0 var(--spacing-1);
 }
 
-.web-chat-message-meta {
+.liveChat-message-meta {
   display: flex;
   align-items: center;
   gap: 0.375rem;
@@ -170,19 +170,19 @@
   padding: 0 var(--spacing-1);
 }
 
-.web-chat-message-meta-own {
+.liveChat-message-meta-own {
   justify-content: flex-end;
 }
 
-.web-chat-message-sent-status {
+.liveChat-message-sent-status {
   color: var(--msg-text-muted);
 }
 
-.web-chat-message-optimistic .web-chat-message-bubble {
+.liveChat-message-optimistic .liveChat-message-bubble {
   opacity: 0.7;
 }
 
-.web-chat-message-image {
+.liveChat-message-image {
   max-width: 220px;
   max-height: 200px;
   width: auto;
@@ -194,7 +194,7 @@
   display: block;
 }
 
-.web-chat-message-file {
+.liveChat-message-file {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-2);
@@ -211,21 +211,21 @@
   cursor: pointer;
 }
 
-.web-chat-message-file:hover {
+.liveChat-message-file:hover {
   background: var(--color-neutral-200);
 }
 
-.web-chat-file-download-icon {
+.liveChat-file-download-icon {
   margin-left: auto;
   opacity: 0.5;
   flex-shrink: 0;
 }
 
-.web-chat-message-file:hover .web-chat-file-download-icon {
+.liveChat-message-file:hover .liveChat-file-download-icon {
   opacity: 1;
 }
 
-.web-chat-closed-banner {
+.liveChat-closed-banner {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -243,7 +243,7 @@
    SCROLL PILL & CONNECTION BANNER
    ======================================== */
 
-.web-chat-scroll-pill {
+.liveChat-scroll-pill {
   position: absolute;
   bottom: 80px;
   left: 50%;
@@ -263,7 +263,7 @@
   white-space: nowrap;
 }
 
-.web-chat-connection-banner {
+.liveChat-connection-banner {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -276,7 +276,7 @@
   flex-shrink: 0;
 }
 
-.web-chat-widget.theme-dark .web-chat-connection-banner {
+.liveChat-widget.theme-dark .liveChat-connection-banner {
   background: rgba(245, 158, 11, 0.15);
   color: #fbbf24;
 }
@@ -285,7 +285,7 @@
    CHAT HEADER
    ======================================== */
 
-.web-chat-chat-header {
+.liveChat-chat-header {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
@@ -293,7 +293,7 @@
   border-bottom: 1px solid var(--msg-border);
 }
 
-.web-chat-chat-header-avatar {
+.liveChat-chat-header-avatar {
   width: 2.25rem;
   height: 2.25rem;
   border-radius: var(--radius-lg);
@@ -307,19 +307,19 @@
   padding: 4px;
 }
 
-.web-chat-chat-header-avatar img {
+.liveChat-chat-header-avatar img {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
 
-.web-chat-chat-header-avatar svg {
+.liveChat-chat-header-avatar svg {
   width: 1.25rem;
   height: 1.25rem;
   color: var(--msg-text-secondary);
 }
 
-.web-chat-chat-header-info {
+.liveChat-chat-header-info {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -327,27 +327,27 @@
   min-width: 0;
 }
 
-.web-chat-chat-title {
+.liveChat-chat-title {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: var(--msg-text);
   line-height: 1.4;
 }
 
-.web-chat-chat-subtitle {
+.liveChat-chat-subtitle {
   font-size: var(--font-size-sm);
   color: var(--msg-text-secondary);
   line-height: 1.4;
 }
 
-.web-chat-chat-header-actions {
+.liveChat-chat-header-actions {
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
   flex-shrink: 0;
 }
 
-.web-chat-chat-messages {
+.liveChat-chat-messages {
   flex: 1;
   overflow-y: auto;
   padding: var(--spacing-5) var(--spacing-4);
@@ -356,7 +356,7 @@
   gap: var(--spacing-4);
 }
 
-.web-chat-chat-empty {
+.liveChat-chat-empty {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -366,11 +366,11 @@
   padding: var(--spacing-10);
 }
 
-.web-chat-chat-empty-avatars {
+.liveChat-chat-empty-avatars {
   margin-bottom: var(--spacing-4);
 }
 
-.web-chat-chat-empty-logo {
+.liveChat-chat-empty-logo {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-xl);
@@ -382,13 +382,13 @@
   background: var(--msg-bg-surface);
 }
 
-.web-chat-chat-empty-logo img {
+.liveChat-chat-empty-logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
 
-.web-chat-chat-empty h3 {
+.liveChat-chat-empty h3 {
   margin: 0 0 var(--spacing-2);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
@@ -404,11 +404,11 @@
    EMOJI PICKER
    ======================================== */
 
-.web-chat-emoji-picker-container {
+.liveChat-emoji-picker-container {
   padding: 0 var(--spacing-3) var(--spacing-2);
 }
 
-.web-chat-emoji-picker-container emoji-picker {
+.liveChat-emoji-picker-container emoji-picker {
   width: 100%;
   height: 320px;
   border-radius: var(--radius-xl);
@@ -434,7 +434,7 @@
   --hover-background: var(--msg-bg-hover);
 }
 
-.web-chat-widget.theme-dark .web-chat-emoji-picker-container emoji-picker {
+.liveChat-widget.theme-dark .liveChat-emoji-picker-container emoji-picker {
   --background: var(--msg-bg);
   --border-color: var(--msg-border);
   --category-font-color: var(--msg-text-secondary);
@@ -443,7 +443,7 @@
   --hover-background: var(--msg-bg-hover);
 }
 
-.web-chat-chat-compose {
+.liveChat-chat-compose {
   display: flex;
   flex-direction: column;
   padding: var(--spacing-3) var(--spacing-4);
@@ -453,11 +453,11 @@
   border-radius: var(--radius-xl);
 }
 
-.web-chat-compose-input-wrapper {
+.liveChat-compose-input-wrapper {
   width: 100%;
 }
 
-.web-chat-compose-input {
+.liveChat-compose-input {
   width: 100%;
   background: transparent;
   border: none;
@@ -471,33 +471,33 @@
   padding: var(--spacing-1) 0;
 }
 
-.web-chat-compose-input::placeholder {
+.liveChat-compose-input::placeholder {
   color: var(--msg-text-tertiary);
 }
 
-.web-chat-compose-input:focus {
+.liveChat-compose-input:focus {
   outline: none;
 }
 
-.web-chat-chat-compose:focus-within {
+.liveChat-chat-compose:focus-within {
   border-color: var(--color-primary-border);
   box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
-.web-chat-compose-bottom {
+.liveChat-compose-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: var(--spacing-2);
 }
 
-.web-chat-compose-actions {
+.liveChat-compose-actions {
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
 }
 
-.web-chat-compose-send {
+.liveChat-compose-send {
   width: 2.25rem;
   height: 2.25rem;
   background: transparent;
@@ -512,43 +512,43 @@
   flex-shrink: 0;
 }
 
-.web-chat-compose-send:hover:not(:disabled) {
+.liveChat-compose-send:hover:not(:disabled) {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--msg-bg);
 }
 
-.web-chat-compose-send:active:not(:disabled) {
+.liveChat-compose-send:active:not(:disabled) {
   transform: translateY(1px);
   transition-duration: 100ms;
 }
 
-.web-chat-compose-send:disabled {
+.liveChat-compose-send:disabled {
   color: var(--color-neutral-300);
   border-color: var(--color-neutral-200);
   cursor: not-allowed;
 }
 
-.web-chat-compose-send svg {
+.liveChat-compose-send svg {
   color: inherit;
 }
 
-.web-chat-compose-file-input {
+.liveChat-compose-file-input {
   display: none;
 }
 
-.web-chat-compose-attach {
+.liveChat-compose-attach {
   width: 2rem;
   height: 2rem;
   flex-shrink: 0;
   color: var(--msg-text-secondary);
 }
 
-.web-chat-compose-attach:hover {
+.liveChat-compose-attach:hover {
   color: var(--msg-text);
 }
 
-.web-chat-compose-attach svg {
+.liveChat-compose-attach svg {
   width: 1.25rem;
   height: 1.25rem;
 }
@@ -557,7 +557,7 @@
    TYPING INDICATOR
    ======================================== */
 
-.web-chat-typing-indicator {
+.liveChat-typing-indicator {
   display: none;
   align-items: center;
   gap: var(--spacing-2);
@@ -565,7 +565,7 @@
   margin: var(--spacing-1) 0;
 }
 
-.web-chat-typing-dots {
+.liveChat-typing-dots {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -574,19 +574,19 @@
   border-radius: var(--radius-2xl);
 }
 
-.web-chat-typing-dots span {
+.liveChat-typing-dots span {
   width: 6px;
   height: 6px;
   background: var(--color-neutral-400);
   border-radius: var(--radius-full);
-  animation: web-chat-typing-bounce 1.4s infinite ease-in-out;
+  animation: liveChat-typing-bounce 1.4s infinite ease-in-out;
 }
 
-.web-chat-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
-.web-chat-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
-.web-chat-typing-dots span:nth-child(3) { animation-delay: 0s; }
+.liveChat-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
+.liveChat-typing-dots span:nth-child(2) { animation-delay: -0.16s; }
+.liveChat-typing-dots span:nth-child(3) { animation-delay: 0s; }
 
-.web-chat-typing-text {
+.liveChat-typing-text {
   font-size: var(--font-size-xs);
   color: var(--msg-text-tertiary);
 }
@@ -595,23 +595,23 @@
    NAVIGATION TABS
    ======================================== */
 
-.web-chat-panel-nav {
+.liveChat-panel-nav {
   border-top: 1px solid var(--msg-border);
   background: var(--msg-bg);
 }
 
-.web-chat-nav-tabs {
+.liveChat-nav-tabs {
   display: flex;
   padding: var(--spacing-1) var(--spacing-2) 0;
   gap: var(--spacing-1);
 }
 
-.web-chat-nav-footer {
+.liveChat-nav-footer {
   padding: 2px var(--spacing-2) var(--spacing-2);
   text-align: center;
 }
 
-.web-chat-powered-by {
+.liveChat-powered-by {
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -621,20 +621,20 @@
   transition: color var(--transition-base);
 }
 
-.web-chat-powered-by:hover {
+.liveChat-powered-by:hover {
   color: var(--msg-text-secondary);
 }
 
-.web-chat-powered-by svg {
+.liveChat-powered-by svg {
   width: 12px;
   height: 14px;
 }
 
-.web-chat-powered-by strong {
+.liveChat-powered-by strong {
   font-weight: var(--font-weight-semibold);
 }
 
-.web-chat-nav-tab {
+.liveChat-nav-tab {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -649,21 +649,21 @@
   position: relative;
 }
 
-.web-chat-nav-tab:hover {
+.liveChat-nav-tab:hover {
   background: transparent;
 }
 
-.web-chat-nav-tab:active {
+.liveChat-nav-tab:active {
   transform: translateY(1px);
   transition-duration: 100ms;
 }
 
-.web-chat-nav-tab:hover .web-chat-nav-icon,
-.web-chat-nav-tab:hover .web-chat-nav-label {
+.liveChat-nav-tab:hover .liveChat-nav-icon,
+.liveChat-nav-tab:hover .liveChat-nav-label {
   color: var(--msg-text);
 }
 
-.web-chat-nav-icon {
+.liveChat-nav-icon {
   color: var(--msg-text-secondary);
   transition: color var(--transition-base);
   display: flex;
@@ -673,25 +673,25 @@
   height: 26px;
 }
 
-.web-chat-nav-icon svg {
+.liveChat-nav-icon svg {
   width: 26px;
   height: 26px;
   display: block;
 }
 
-.web-chat-nav-label {
+.liveChat-nav-label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--msg-text-secondary);
   transition: color var(--transition-base);
 }
 
-.web-chat-nav-tab.active .web-chat-nav-icon,
-.web-chat-nav-tab.active .web-chat-nav-label {
+.liveChat-nav-tab.active .liveChat-nav-icon,
+.liveChat-nav-tab.active .liveChat-nav-label {
   color: var(--color-primary);
 }
 
-.web-chat-nav-badge {
+.liveChat-nav-badge {
   position: absolute;
   top: var(--spacing-1);
   right: calc(50% - 16px);
@@ -712,11 +712,11 @@
    PRECHAT
    ======================================== */
 
-.web-chat-prechat-view {
+.liveChat-prechat-view {
   position: relative;
 }
 
-.web-chat-prechat-overlay {
+.liveChat-prechat-overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -731,7 +731,7 @@
   backdrop-filter: blur(2px);
 }
 
-.web-chat-prechat-card {
+.liveChat-prechat-card {
   background: var(--msg-bg);
   border-radius: var(--radius-xl);
   padding: var(--spacing-6) var(--spacing-6) var(--spacing-5);
@@ -742,7 +742,7 @@
   text-align: center;
 }
 
-.web-chat-prechat-icon {
+.liveChat-prechat-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -754,33 +754,33 @@
   margin: 0 auto var(--spacing-4);
 }
 
-.web-chat-prechat-title {
+.liveChat-prechat-title {
   margin: 0 0 var(--spacing-2);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: var(--msg-text);
 }
 
-.web-chat-prechat-subtitle {
+.liveChat-prechat-subtitle {
   margin: 0 0 var(--spacing-5);
   font-size: var(--font-size-sm);
   color: var(--msg-text-secondary);
   line-height: var(--line-height-relaxed);
 }
 
-.web-chat-prechat-form {
+.liveChat-prechat-form {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
 }
 
-.web-chat-prechat-field {
+.liveChat-prechat-field {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
 }
 
-.web-chat-prechat-input {
+.liveChat-prechat-input {
   width: 100%;
   padding: var(--spacing-2) var(--spacing-3);
   border: 1px solid var(--msg-border);
@@ -794,20 +794,20 @@
   box-sizing: border-box;
 }
 
-.web-chat-prechat-input::placeholder {
+.liveChat-prechat-input::placeholder {
   color: var(--msg-text-secondary);
 }
 
-.web-chat-prechat-input:focus {
+.liveChat-prechat-input:focus {
   border-color: var(--color-primary);
 }
 
-.web-chat-prechat-error {
+.liveChat-prechat-error {
   font-size: var(--font-size-xs);
   color: #dc2626;
 }
 
-.web-chat-prechat-submit {
+.liveChat-prechat-submit {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -826,16 +826,16 @@
   margin-top: var(--spacing-1);
 }
 
-.web-chat-prechat-submit:hover {
+.liveChat-prechat-submit:hover {
   background: var(--color-primary-hover);
 }
 
-.web-chat-prechat-submit:active {
+.liveChat-prechat-submit:active {
   transform: translateY(1px);
   transition-duration: 100ms;
 }
 
-.web-chat-prechat-submit:disabled {
+.liveChat-prechat-submit:disabled {
   opacity: 0.7;
   cursor: not-allowed;
 }