@pindai-ai/chat-widget 3.0.0 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/pindai-chat-widget.css +1 -1
  2. package/dist/pindai-chat-widget.js +39 -6
  3. package/dist/pindai-chat-widget.js.map +1 -1
  4. package/dist/pindai-chat-widget.umd.js +5 -5
  5. package/dist/pindai-chat-widget.umd.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/i18n.js +2 -0
  8. package/src/main.js +39 -1
  9. package/src/style.css +34 -0
package/dist/pindai-chat-widget.css CHANGED
@@ -1 +1 @@
1
- :root{--pindai-primary: #0066FF;--pindai-primary-dark: #0052CC;--pindai-primary-light: #E6F0FF;--pindai-accent: #00C896;--pindai-accent-light: #E6FAF5;--pindai-gray-900: #1A1A1A;--pindai-gray-700: #4A4A4A;--pindai-gray-500: #9E9E9E;--pindai-gray-300: #E0E0E0;--pindai-gray-100: #F5F5F5;--pindai-gray-50: #FAFAFA;--pindai-error: #F44336;--pindai-success: #00C896;--pindai-warning: #FF9800;--pindai-info: #0066FF;--text-on-primary: #FFFFFF;--text-on-light: #1A1A1A;--text-on-dark: #FFFFFF;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;--font-size-xs: .6875rem;--font-size-sm: .875rem;--font-size-base: .9375rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--transition-fast: .15s ease-in-out;--transition-base: .3s ease-in-out;--transition-slow: .5s ease-in-out;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 50%}*{box-sizing:border-box}.n8n-chat-launcher-wrapper{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:9998}.n8n-chat-launcher-wrapper--left{right:auto;left:16px;align-items:flex-start}.n8n-chat-launcher{width:56px;height:56px;background-color:var(--pindai-primary);border-radius:var(--radius-full);display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow-lg);cursor:pointer;transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base);border:none;outline:none;position:relative}.n8n-chat-launcher:hover{transform:scale(1.05);box-shadow:0 8px 28px #06f6}.n8n-chat-launcher:focus-visible{outline:3px solid var(--pindai-primary);outline-offset:4px}.n8n-chat-launcher img{width:28px;height:28px;filter:invert(1)}.n8n-chat-launcher--hidden{transform:scale(0);opacity:0;pointer-events:none}.n8n-chat-unread-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;background-color:var(--pindai-error);color:var(--text-on-dark);font-size:12px;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 6px #0000004d;z-index:1}.n8n-chat-widget{position:fixed;bottom:0;right:0;width:100vw;height:100vh;max-height:100vh;border-radius:0;box-shadow:var(--shadow-lg);background-color:#fff;display:flex;flex-direction:column;overflow:hidden;font-family:var(--font-family);font-size:var(--font-size-base);transform:translateY(20px) scale(.95);opacity:0;visibility:hidden;transition:all var(--transition-base);z-index:9999}.n8n-chat-widget--open{transform:translateY(0) scale(1);opacity:1;visibility:visible}.n8n-chat-widget--fullscreen{width:100%;height:100%;bottom:0;right:0;border-radius:0;max-height:100vh;transform:none;opacity:1;visibility:visible}.n8n-chat-header{padding:var(--space-md);background-color:var(--pindai-gray-900);color:var(--text-on-dark);font-weight:700;font-size:var(--font-size-xl);letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.1)}.n8n-chat-header-content{display:flex;align-items:center;gap:12px;flex:1}.n8n-chat-logo{width:32px;height:32px;object-fit:contain;flex-shrink:0}.n8n-chat-title{font-size:var(--font-size-lg);flex:1}.n8n-chat-close-btn{background:none;border:none;color:var(--text-on-dark);font-size:32px;cursor:pointer;line-height:1;padding:0 8px;transition:opacity var(--transition-fast);flex-shrink:0}.n8n-chat-close-btn:hover{opacity:.8}.n8n-chat-close-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px;border-radius:4px}.n8n-chat-messages{flex-grow:1;padding:var(--space-lg);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-md);background-color:var(--pindai-gray-50);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.n8n-chat-messages::-webkit-scrollbar{width:6px}.n8n-chat-messages::-webkit-scrollbar-track{background:transparent}.n8n-chat-messages::-webkit-scrollbar-thumb{background:var(--pindai-gray-300);border-radius:3px}.n8n-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--pindai-gray-500)}.n8n-chat-bubble{padding:12px 16px;border-radius:var(--radius-xl);max-width:75%;line-height:1.5;font-size:var(--font-size-base);word-wrap:break-word;animation:fadeInSlide .3s ease-out}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-user-message{background-color:var(--pindai-primary);color:var(--text-on-primary);align-self:flex-end;border-bottom-right-radius:4px}.n8n-chat-ai-message{background-color:var(--pindai-gray-100);color:var(--text-on-light);align-self:flex-start;border-bottom-left-radius:4px}.n8n-chat-message-text{margin-bottom:4px}.n8n-chat-message-timestamp{font-size:var(--font-size-xs);opacity:.6;margin-top:4px;display:block}.n8n-chat-user-message .n8n-chat-message-timestamp{text-align:right;color:#fffc}.n8n-chat-ai-message .n8n-chat-message-timestamp{color:#00000080}.n8n-chat-quick-replies{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-md) 0;align-self:flex-start;max-width:90%;animation:fadeInSlide .4s ease-out}.n8n-chat-quick-reply-btn{padding:10px 16px;background:#fff;border:1.5px solid var(--pindai-primary);border-radius:var(--radius-xl);color:var(--pindai-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;min-height:44px}.n8n-chat-quick-reply-btn:hover{background:var(--pindai-primary);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #0066ff4d}.n8n-chat-quick-reply-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-typing-indicator{display:flex;align-items:center;gap:4px;padding:12px 16px}.n8n-chat-typing-indicator span{height:8px;width:8px;background-color:var(--pindai-gray-500);border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.n8n-chat-typing-indicator span:nth-child(1){animation-delay:-.32s}.n8n-chat-typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.n8n-chat-file-preview{padding:var(--space-sm) var(--space-md);display:flex;flex-wrap:wrap;gap:var(--space-sm);border-top:1px solid var(--pindai-gray-300);background:var(--pindai-gray-50)}.n8n-chat-file-item{display:flex;align-items:center;gap:var(--space-sm);padding:6px 12px;background:#fff;border:1px solid var(--pindai-gray-300);border-radius:var(--radius-lg);font-size:var(--font-size-sm);max-width:200px}.n8n-chat-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pindai-gray-700)}.n8n-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:var(--pindai-gray-500);padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}.n8n-chat-file-remove:hover{color:var(--pindai-error)}.n8n-chat-watermark{padding:8px 16px;text-align:center;font-size:12px;color:var(--pindai-gray-500);background-color:var(--pindai-gray-100);border-top:1px solid var(--pindai-gray-300);flex-shrink:0}.n8n-chat-watermark span{margin-right:4px}.n8n-chat-watermark a{color:var(--pindai-primary);text-decoration:none;font-weight:600;transition:color .2s ease}.n8n-chat-watermark a:hover{color:var(--pindai-primary-dark);text-decoration:underline}.n8n-chat-watermark a:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px;border-radius:2px}.n8n-chat-input-area{display:flex;align-items:center;padding:var(--space-md);border-top:1px solid var(--pindai-gray-300);background-color:#fff;flex-shrink:0;gap:var(--space-sm)}.n8n-chat-file-upload-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-full);transition:background-color var(--transition-fast);flex-shrink:0;border:none;background:none;color:var(--pindai-gray-700)}.n8n-chat-file-upload-btn:hover{background-color:var(--pindai-gray-100)}.n8n-chat-file-upload-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-input-area input{flex-grow:1;padding:12px 16px;border:1px solid var(--pindai-gray-300);border-radius:var(--radius-xl);font-size:16px;font-family:var(--font-family);outline:none;transition:border-color var(--transition-fast);min-height:44px}.n8n-chat-input-area input:focus{border-color:var(--pindai-primary);box-shadow:0 0 0 3px #0066ff1a}.n8n-chat-input-area input::placeholder{color:#757575}.n8n-chat-input-area button.n8n-chat-send-btn{width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);background-color:var(--send-button-color, var(--pindai-primary));color:#fff;flex-shrink:0}.n8n-chat-input-area button.n8n-chat-send-btn:hover:not(:disabled){transform:scale(1.05);filter:brightness(1.1);box-shadow:0 2px 8px #06f6}.n8n-chat-input-area button.n8n-chat-send-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-input-area button svg{width:18px;height:18px;color:#fff}.n8n-chat-input-area button:disabled{background-color:var(--pindai-gray-300);cursor:not-allowed;transform:none;opacity:.6}.n8n-chat-offline-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background-color:#fff3cd;color:#856404;font-size:var(--font-size-sm);border-bottom:1px solid #FFE69C;flex-shrink:0}.n8n-chat-offline-indicator svg{flex-shrink:0}.n8n-chat-loading-message{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;font-size:var(--font-size-sm);color:var(--pindai-gray-700)}.n8n-chat-spinner{width:16px;height:16px;border:2px solid var(--pindai-gray-300);border-top-color:var(--pindai-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--pindai-primary);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (min-width: 640px){.n8n-chat-widget{width:400px;height:85vh;max-height:700px;bottom:20px;right:20px;border-radius:var(--radius-lg)}.n8n-chat-launcher-wrapper{bottom:20px;right:20px}.n8n-chat-launcher-wrapper--left{right:auto;left:20px}.n8n-chat-launcher{width:60px;height:60px}.n8n-chat-launcher img{width:32px;height:32px}}@media (min-width: 1024px){.n8n-chat-widget{width:420px;height:80vh}.n8n-chat-messages{padding:var(--space-xl)}}@supports (padding: env(safe-area-inset-bottom)){.n8n-chat-widget{padding-bottom:env(safe-area-inset-bottom)}.n8n-chat-launcher-wrapper{bottom:calc(16px + env(safe-area-inset-bottom))}@media (min-width: 640px){.n8n-chat-launcher-wrapper{bottom:calc(20px + env(safe-area-inset-bottom))}}}.n8n-chat-header-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.25)}.n8n-chat-bubble-popup{background:#fff;color:var(--pindai-gray-900);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:10px 14px;font-size:var(--font-size-sm);max-width:220px;position:relative;display:flex;align-items:center;gap:8px;animation:pindai-bubble-in .3s ease-out}@keyframes pindai-bubble-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-bubble-popup-text{flex:1;line-height:1.4;transition:opacity .25s ease,transform .25s ease}.n8n-chat-bubble-popup-text--exit{opacity:0;transform:translateY(-4px)}.n8n-chat-bubble-popup-text--enter{animation:pindai-bubble-text-in .3s ease-out forwards}@keyframes pindai-bubble-text-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-bubble-popup-dismiss{background:none;border:none;cursor:pointer;color:var(--pindai-gray-500);font-size:16px;padding:0;line-height:1;flex-shrink:0;transition:color var(--transition-fast)}.n8n-chat-bubble-popup-dismiss:hover{color:var(--pindai-gray-900)}.n8n-chat-bubble-popup-arrow{position:absolute;bottom:-7px;right:20px;width:14px;height:8px;overflow:hidden}.n8n-chat-bubble-popup-arrow:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%) rotate(45deg);width:10px;height:10px;background:#fff;box-shadow:var(--shadow-sm)}.n8n-chat-launcher-wrapper--left .n8n-chat-bubble-popup-arrow{right:auto;left:20px}.n8n-chat-footer-sep{color:var(--pindai-gray-300);margin:0 2px}.n8n-chat-bubble--streaming .n8n-chat-message-text{white-space:pre-wrap}.n8n-chat-stream-cursor{display:inline-block;width:2px;height:1em;background-color:var(--pindai-gray-700);margin-left:2px;vertical-align:text-bottom;animation:pindai-cursor-blink .8s step-end infinite}@keyframes pindai-cursor-blink{0%,to{opacity:1}50%{opacity:0}}.n8n-chat-typing-indicator{flex-direction:column;gap:4px}.n8n-chat-typing-dots{display:flex;gap:4px}.n8n-chat-typing-label{font-size:var(--font-size-xs);color:var(--pindai-gray-500);font-style:italic}[data-pindai-theme=dark] .n8n-chat-widget{background-color:#1e1e1e;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-messages{background-color:#1e1e1e}[data-pindai-theme=dark] .n8n-chat-ai-message{background-color:#2d2d2d;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-message-timestamp{color:#888}[data-pindai-theme=dark] .n8n-chat-input-area{background-color:#262626;border-top-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-input-area input{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-input-area input::placeholder{color:#777}[data-pindai-theme=dark] .n8n-chat-input-area input:focus{border-color:#4a9eff;box-shadow:0 0 0 3px #4a9eff26}[data-pindai-theme=dark] .n8n-chat-watermark{background-color:#262626;border-top-color:#3a3a3a;color:#888}[data-pindai-theme=dark] .n8n-chat-watermark a{color:#4a9eff}[data-pindai-theme=dark] .n8n-chat-quick-reply-btn{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-quick-reply-btn:hover{background-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-file-preview{background-color:#262626;border-top-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-file-item{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-bubble-popup{background:#2d2d2d;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-bubble-popup-arrow:before{background:#2d2d2d}[data-pindai-theme=dark] .n8n-chat-stream-cursor{background-color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-typing-label{color:#888}
1
+ :root{--pindai-primary: #0066FF;--pindai-primary-dark: #0052CC;--pindai-primary-light: #E6F0FF;--pindai-accent: #00C896;--pindai-accent-light: #E6FAF5;--pindai-gray-900: #1A1A1A;--pindai-gray-700: #4A4A4A;--pindai-gray-500: #9E9E9E;--pindai-gray-300: #E0E0E0;--pindai-gray-100: #F5F5F5;--pindai-gray-50: #FAFAFA;--pindai-error: #F44336;--pindai-success: #00C896;--pindai-warning: #FF9800;--pindai-info: #0066FF;--text-on-primary: #FFFFFF;--text-on-light: #1A1A1A;--text-on-dark: #FFFFFF;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;--font-size-xs: .6875rem;--font-size-sm: .875rem;--font-size-base: .9375rem;--font-size-lg: 1.125rem;--font-size-xl: 1.5rem;--transition-fast: .15s ease-in-out;--transition-base: .3s ease-in-out;--transition-slow: .5s ease-in-out;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .2);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 50%}*{box-sizing:border-box}.n8n-chat-launcher-wrapper{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:9998}.n8n-chat-launcher-wrapper--left{right:auto;left:16px;align-items:flex-start}.n8n-chat-launcher{width:56px;height:56px;background-color:var(--pindai-primary);border-radius:var(--radius-full);display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow-lg);cursor:pointer;transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base);border:none;outline:none;position:relative}.n8n-chat-launcher:hover{transform:scale(1.05);box-shadow:0 8px 28px #06f6}.n8n-chat-launcher:focus-visible{outline:3px solid var(--pindai-primary);outline-offset:4px}.n8n-chat-launcher img{width:28px;height:28px;filter:invert(1)}.n8n-chat-launcher--hidden{transform:scale(0);opacity:0;pointer-events:none}.n8n-chat-unread-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;background-color:var(--pindai-error);color:var(--text-on-dark);font-size:12px;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 6px #0000004d;z-index:1}.n8n-chat-widget{position:fixed;bottom:0;right:0;width:100vw;height:100vh;max-height:100vh;border-radius:0;box-shadow:var(--shadow-lg);background-color:#fff;display:flex;flex-direction:column;overflow:hidden;font-family:var(--font-family);font-size:var(--font-size-base);transform:translateY(20px) scale(.95);opacity:0;visibility:hidden;transition:all var(--transition-base);z-index:9999}.n8n-chat-widget--open{transform:translateY(0) scale(1);opacity:1;visibility:visible}.n8n-chat-widget--fullscreen{width:100%;height:100%;bottom:0;right:0;border-radius:0;max-height:100vh;transform:none;opacity:1;visibility:visible}.n8n-chat-header{padding:var(--space-md);background-color:var(--pindai-gray-900);color:var(--text-on-dark);font-weight:700;font-size:var(--font-size-xl);letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.1)}.n8n-chat-header-content{display:flex;align-items:center;gap:12px;flex:1}.n8n-chat-logo{width:32px;height:32px;object-fit:contain;flex-shrink:0}.n8n-chat-title{font-size:var(--font-size-lg);flex:1}.n8n-chat-close-btn{background:none;border:none;color:var(--text-on-dark);font-size:32px;cursor:pointer;line-height:1;padding:0 8px;transition:opacity var(--transition-fast);flex-shrink:0}.n8n-chat-close-btn:hover{opacity:.8}.n8n-chat-close-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px;border-radius:4px}.n8n-chat-messages{flex-grow:1;padding:var(--space-lg);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-md);background-color:var(--pindai-gray-50);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.n8n-chat-messages::-webkit-scrollbar{width:6px}.n8n-chat-messages::-webkit-scrollbar-track{background:transparent}.n8n-chat-messages::-webkit-scrollbar-thumb{background:var(--pindai-gray-300);border-radius:3px}.n8n-chat-messages::-webkit-scrollbar-thumb:hover{background:var(--pindai-gray-500)}.n8n-chat-bubble{padding:12px 16px;border-radius:var(--radius-xl);max-width:75%;line-height:1.5;font-size:var(--font-size-base);word-wrap:break-word;animation:fadeInSlide .3s ease-out}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-user-message{background-color:var(--pindai-primary);color:var(--text-on-primary);align-self:flex-end;border-bottom-right-radius:4px}.n8n-chat-ai-message{background-color:var(--pindai-gray-100);color:var(--text-on-light);align-self:flex-start;border-bottom-left-radius:4px}.n8n-chat-message-text{margin-bottom:4px}.n8n-chat-message-timestamp{font-size:var(--font-size-xs);opacity:.6;margin-top:4px;display:block}.n8n-chat-user-message .n8n-chat-message-timestamp{text-align:right;color:#fffc}.n8n-chat-ai-message .n8n-chat-message-timestamp{color:#00000080}.n8n-chat-quick-replies{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-md) 0;align-self:flex-start;max-width:90%;animation:fadeInSlide .4s ease-out}.n8n-chat-quick-reply-btn{padding:10px 16px;background:#fff;border:1.5px solid var(--pindai-primary);border-radius:var(--radius-xl);color:var(--pindai-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;min-height:44px}.n8n-chat-quick-reply-btn:hover{background:var(--pindai-primary);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #0066ff4d}.n8n-chat-quick-reply-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-typing-indicator{display:flex;align-items:center;gap:4px;padding:12px 16px}.n8n-chat-typing-indicator span{height:8px;width:8px;background-color:var(--pindai-gray-500);border-radius:50%;display:inline-block;animation:bounce 1.4s infinite ease-in-out both}.n8n-chat-typing-indicator span:nth-child(1){animation-delay:-.32s}.n8n-chat-typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.n8n-chat-file-preview{padding:var(--space-sm) var(--space-md);display:flex;flex-wrap:wrap;gap:var(--space-sm);border-top:1px solid var(--pindai-gray-300);background:var(--pindai-gray-50)}.n8n-chat-file-item{display:flex;align-items:center;gap:var(--space-sm);padding:6px 12px;background:#fff;border:1px solid var(--pindai-gray-300);border-radius:var(--radius-lg);font-size:var(--font-size-sm);max-width:200px}.n8n-chat-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pindai-gray-700)}.n8n-chat-file-remove{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:var(--pindai-gray-500);padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast)}.n8n-chat-file-remove:hover{color:var(--pindai-error)}.n8n-chat-watermark{padding:8px 16px;text-align:center;font-size:12px;color:var(--pindai-gray-500);background-color:var(--pindai-gray-100);border-top:1px solid var(--pindai-gray-300);flex-shrink:0}.n8n-chat-watermark span{margin-right:4px}.n8n-chat-watermark a{color:var(--pindai-primary);text-decoration:none;font-weight:600;transition:color .2s ease}.n8n-chat-watermark a:hover{color:var(--pindai-primary-dark);text-decoration:underline}.n8n-chat-watermark a:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px;border-radius:2px}.n8n-chat-input-area{display:flex;align-items:center;padding:var(--space-md);border-top:1px solid var(--pindai-gray-300);background-color:#fff;flex-shrink:0;gap:var(--space-sm)}.n8n-chat-file-upload-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-full);transition:background-color var(--transition-fast);flex-shrink:0;border:none;background:none;color:var(--pindai-gray-700)}.n8n-chat-file-upload-btn:hover{background-color:var(--pindai-gray-100)}.n8n-chat-file-upload-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-input-area input{flex-grow:1;padding:12px 16px;border:1px solid var(--pindai-gray-300);border-radius:var(--radius-xl);font-size:16px;font-family:var(--font-family);outline:none;transition:border-color var(--transition-fast);min-height:44px}.n8n-chat-input-area input:focus{border-color:var(--pindai-primary);box-shadow:0 0 0 3px #0066ff1a}.n8n-chat-input-area input::placeholder{color:#757575}.n8n-chat-input-area button.n8n-chat-send-btn{width:44px;height:44px;padding:0;border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);background-color:var(--send-button-color, var(--pindai-primary));color:#fff;flex-shrink:0}.n8n-chat-input-area button.n8n-chat-send-btn:hover:not(:disabled){transform:scale(1.05);filter:brightness(1.1);box-shadow:0 2px 8px #06f6}.n8n-chat-input-area button.n8n-chat-send-btn:focus-visible{outline:2px solid var(--pindai-primary);outline-offset:2px}.n8n-chat-input-area button svg{width:18px;height:18px;color:#fff}.n8n-chat-input-area button:disabled{background-color:var(--pindai-gray-300);cursor:not-allowed;transform:none;opacity:.6}.n8n-chat-offline-indicator{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background-color:#fff3cd;color:#856404;font-size:var(--font-size-sm);border-bottom:1px solid #FFE69C;flex-shrink:0}.n8n-chat-offline-indicator svg{flex-shrink:0}.n8n-chat-loading-message{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) 0;font-size:var(--font-size-sm);color:var(--pindai-gray-700)}.n8n-chat-spinner{width:16px;height:16px;border:2px solid var(--pindai-gray-300);border-top-color:var(--pindai-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--pindai-primary);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (min-width: 640px){.n8n-chat-widget{width:400px;height:85vh;max-height:700px;bottom:20px;right:20px;border-radius:var(--radius-lg)}.n8n-chat-launcher-wrapper{bottom:20px;right:20px}.n8n-chat-launcher-wrapper--left{right:auto;left:20px}.n8n-chat-launcher{width:60px;height:60px}.n8n-chat-launcher img{width:32px;height:32px}}@media (min-width: 1024px){.n8n-chat-widget{width:420px;height:80vh}.n8n-chat-messages{padding:var(--space-xl)}}@supports (padding: env(safe-area-inset-bottom)){.n8n-chat-widget{padding-bottom:env(safe-area-inset-bottom)}.n8n-chat-launcher-wrapper{bottom:calc(16px + env(safe-area-inset-bottom))}@media (min-width: 640px){.n8n-chat-launcher-wrapper{bottom:calc(20px + env(safe-area-inset-bottom))}}}.n8n-chat-header-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.25)}.n8n-chat-bubble-popup{background:#fff;color:var(--pindai-gray-900);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:10px 14px;font-size:var(--font-size-sm);max-width:220px;position:relative;display:flex;align-items:center;gap:8px;animation:pindai-bubble-in .3s ease-out}@keyframes pindai-bubble-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-bubble-popup-text{flex:1;line-height:1.4;transition:opacity .25s ease,transform .25s ease}.n8n-chat-bubble-popup-text--exit{opacity:0;transform:translateY(-4px)}.n8n-chat-bubble-popup-text--enter{animation:pindai-bubble-text-in .3s ease-out forwards}@keyframes pindai-bubble-text-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.n8n-chat-bubble-popup-dismiss{background:none;border:none;cursor:pointer;color:var(--pindai-gray-500);font-size:16px;padding:0;line-height:1;flex-shrink:0;transition:color var(--transition-fast)}.n8n-chat-bubble-popup-dismiss:hover{color:var(--pindai-gray-900)}.n8n-chat-bubble-popup-arrow{position:absolute;bottom:-7px;right:20px;width:14px;height:8px;overflow:hidden}.n8n-chat-bubble-popup-arrow:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%) rotate(45deg);width:10px;height:10px;background:#fff;box-shadow:var(--shadow-sm)}.n8n-chat-launcher-wrapper--left .n8n-chat-bubble-popup-arrow{right:auto;left:20px}.n8n-chat-footer-sep{color:var(--pindai-gray-300);margin:0 2px}.n8n-chat-bubble--streaming .n8n-chat-message-text{white-space:pre-wrap}.n8n-chat-stream-cursor{display:inline-block;width:2px;height:1em;background-color:var(--pindai-gray-700);margin-left:2px;vertical-align:text-bottom;animation:pindai-cursor-blink .8s step-end infinite}@keyframes pindai-cursor-blink{0%,to{opacity:1}50%{opacity:0}}.n8n-chat-typing-indicator{flex-direction:column;gap:4px}.n8n-chat-typing-dots{display:flex;gap:4px}.n8n-chat-typing-label{font-size:var(--font-size-xs);color:var(--pindai-gray-500);font-style:italic}[data-pindai-theme=dark] .n8n-chat-widget{background-color:#1e1e1e;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-messages{background-color:#1e1e1e}[data-pindai-theme=dark] .n8n-chat-ai-message{background-color:#2d2d2d;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-message-timestamp{color:#888}[data-pindai-theme=dark] .n8n-chat-input-area{background-color:#262626;border-top-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-input-area input{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-input-area input::placeholder{color:#777}[data-pindai-theme=dark] .n8n-chat-input-area input:focus{border-color:#4a9eff;box-shadow:0 0 0 3px #4a9eff26}[data-pindai-theme=dark] .n8n-chat-watermark{background-color:#262626;border-top-color:#3a3a3a;color:#888}[data-pindai-theme=dark] .n8n-chat-watermark a{color:#4a9eff}[data-pindai-theme=dark] .n8n-chat-quick-reply-btn{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-quick-reply-btn:hover{background-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-file-preview{background-color:#262626;border-top-color:#3a3a3a}[data-pindai-theme=dark] .n8n-chat-file-item{background-color:#2d2d2d;border-color:#444;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-bubble-popup{background:#2d2d2d;color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-bubble-popup-arrow:before{background:#2d2d2d}[data-pindai-theme=dark] .n8n-chat-stream-cursor{background-color:#f0f0f0}[data-pindai-theme=dark] .n8n-chat-typing-label{color:#888}.pindai-chat-handoff-banner{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#f59e0b14;border-bottom:1px solid rgba(245,158,11,.25);font-size:12px;color:#92400e;flex-shrink:0}[data-pindai-theme=dark] .pindai-chat-handoff-banner{background:#f59e0b1f;border-bottom-color:#f59e0b4d;color:#fbbf24}.pindai-chat-handoff-pulse{width:8px;height:8px;border-radius:50%;background:#f59e0b;flex-shrink:0;animation:pindai-handoff-pulse 1.5s ease-in-out infinite}@keyframes pindai-handoff-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}
package/dist/pindai-chat-widget.js CHANGED
@@ -65,7 +65,8 @@ const g = {
65
65
  humanAgentLabel: "Support Agent",
66
66
  actionIndicator: "Performing action...",
67
67
  thinkingIndicator: "Thinking...",
68
- poweredBy: "Powered by"
68
+ poweredBy: "Powered by",
69
+ waitingForAgent: "Waiting for a human agent..."
69
70
  },
70
71
  id: {
71
72
  // Widget UI
@@ -117,7 +118,8 @@ const g = {
117
118
  humanAgentLabel: "Agen Dukungan",
118
119
  actionIndicator: "Sedang memproses...",
119
120
  thinkingIndicator: "Sedang berpikir...",
120
- poweredBy: "Dibuat dengan"
121
+ poweredBy: "Dibuat dengan",
122
+ waitingForAgent: "Menunggu agen manusia..."
121
123
  }
122
124
  };
123
125
  class y {
@@ -193,7 +195,20 @@ class w {
193
195
  this.i18n.t("quickReply4")
194
196
  ], this.enableHistory = e.enableHistory !== !1, this.maxHistoryItems = e.maxHistoryItems || 50;
195
197
  const n = this._agentMode ? this.agentId : this.webhookUrl;
196
- this.historyKey = `pindai-chat-history-${n}`, this.stateKey = `pindai-chat-state-${n}`, this.maxRetries = e.maxRetries || 3, this.retryDelay = e.retryDelay || 1e3, this.requestTimeout = e.requestTimeout || 3e4, this.rateLimit = e.rateLimit || 5, this.rateLimitWindow = e.rateLimitWindow || 6e4, this.messageTimes = [], this.container = null, this.launcher = null, this.bubblePopup = null, this.chatWindow = null, this.messageList = null, this.input = null, this.button = null, this.closeButton = null, this.pollingUrl = this._agentMode ? `${this.apiBaseUrl}/v1/chat/${this.agentId}/messages` : e.pollingUrl || null, this.pollingEnabled = !!(this.pollingUrl || e.pollingUrl), this.pollingInterval = e.pollingInterval || 3e3, this._pollingTimer = null, this._lastMessageTimestamp = null, this.sessionId = `web-session-${Date.now()}-${Math.random()}`, this.isLoading = !1, this.isOpen = !1, this.isOnline = navigator.onLine, this.loadState(), this._setupOfflineDetection(), this._applyTheme(), this.mode === "fullscreen" ? this._initChatWindow() : this._initLauncher();
198
+ this.historyKey = `pindai-chat-history-${n}`, this.stateKey = `pindai-chat-state-${n}`, this.maxRetries = e.maxRetries || 3, this.retryDelay = e.retryDelay || 1e3, this.requestTimeout = e.requestTimeout || 3e4, this.rateLimit = e.rateLimit || 5, this.rateLimitWindow = e.rateLimitWindow || 6e4, this.messageTimes = [], this.container = null, this.launcher = null, this.bubblePopup = null, this.chatWindow = null, this.messageList = null, this.input = null, this.button = null, this.closeButton = null, this.pollingUrl = this._agentMode ? `${this.apiBaseUrl}/v1/chat/${this.agentId}/messages` : e.pollingUrl || null, this.pollingEnabled = !!(this.pollingUrl || e.pollingUrl), this.pollingInterval = e.pollingInterval || 3e3, this._pollingTimer = null, this._lastMessageTimestamp = null;
199
+ const r = this._agentMode ? `pindai-session-id-${this.agentId}` : null, l = r ? (() => {
200
+ try {
201
+ return localStorage.getItem(r);
202
+ } catch (o) {
203
+ return null;
204
+ }
205
+ })() : null;
206
+ if (this.sessionId = l || `web-session-${Date.now()}-${Math.random()}`, r && !l)
207
+ try {
208
+ localStorage.setItem(r, this.sessionId);
209
+ } catch (o) {
210
+ }
211
+ this.isLoading = !1, this.isOpen = !1, this.isOnline = navigator.onLine, this.loadState(), this._setupOfflineDetection(), this._applyTheme(), this.mode === "fullscreen" ? this._initChatWindow() : this._initLauncher();
197
212
  }
198
213
  // ─────────────────────────────────────────────────────────────────────────
199
214
  // Auth helpers (Agent-API mode)
@@ -536,7 +551,7 @@ class w {
536
551
  p.onmessage = (f) => {
537
552
  try {
538
553
  const m = JSON.parse(f.data);
539
- m.delta && (h += m.delta, l.textContent = h, this.messageList.scrollTop = this.messageList.scrollHeight), m.type === "done" && (p.close(), o.remove(), r.classList.remove("n8n-chat-bubble--streaming"), c.textContent = this._formatTimestamp(/* @__PURE__ */ new Date()), b = m.status || "active", this.saveToHistory(h, "ai"), b && b !== "active" && (this._startPolling(), this.addMessage(this.i18n.t("humanAgentJoined"), "ai")), this.showQuickReplies && this.quickReplies.length > 0 && this._renderQuickReplies(), a(h));
554
+ m.delta && (h += m.delta, l.textContent = h, this.messageList.scrollTop = this.messageList.scrollHeight), m.type === "done" && (p.close(), o.remove(), r.classList.remove("n8n-chat-bubble--streaming"), c.textContent = this._formatTimestamp(/* @__PURE__ */ new Date()), b = m.status || "active", this.saveToHistory(h, "ai"), b && b !== "active" && (this._startPolling(), this._showHandoffBanner(!0), this.addMessage(this.i18n.t("humanAgentJoined"), "ai")), this.showQuickReplies && this.quickReplies.length > 0 && this._renderQuickReplies(), a(h));
540
555
  } catch (m) {
541
556
  }
542
557
  }, p.onerror = () => {
@@ -573,7 +588,7 @@ class w {
573
588
  const o = yield l.json();
574
589
  if (!o.response)
575
590
  throw new Error(this.i18n.t("errorInvalidResponse"));
576
- return o.status && o.status !== "active" && this.pollingUrl ? (this._startPolling(), this.addMessage(this.i18n.t("humanAgentJoined"), "ai")) : this._stopPolling(), o.response;
591
+ return o.status && o.status !== "active" && this.pollingUrl ? (this._startPolling(), this._showHandoffBanner(!0), this.addMessage(this.i18n.t("humanAgentJoined"), "ai")) : this._stopPolling(), o.response;
577
592
  } catch (a) {
578
593
  if (a.name === "AbortError")
579
594
  throw new Error(this.i18n.t("errorTimeout"));
@@ -753,7 +768,25 @@ class w {
753
768
  });
754
769
  }
755
770
  _stopPolling() {
756
- this._pollingTimer && (clearInterval(this._pollingTimer), this._pollingTimer = null);
771
+ this._pollingTimer && (clearInterval(this._pollingTimer), this._pollingTimer = null, this._showHandoffBanner(!1));
772
+ }
773
+ /**
774
+ * Show or hide the "Waiting for a human agent" banner above the message list.
775
+ * @param {boolean} show - true to show, false to remove.
776
+ */
777
+ _showHandoffBanner(e) {
778
+ if (!this.messageList) return;
779
+ const t = this.messageList.parentElement;
780
+ if (!t) return;
781
+ const i = t.querySelector(".pindai-chat-handoff-banner");
782
+ if (e && !i) {
783
+ const s = document.createElement("div");
784
+ s.className = "pindai-chat-handoff-banner";
785
+ const a = document.createElement("span");
786
+ a.className = "pindai-chat-handoff-pulse";
787
+ const n = document.createElement("span");
788
+ n.textContent = this.i18n.t("waitingForAgent"), s.appendChild(a), s.appendChild(n), t.insertBefore(s, this.messageList);
789
+ } else !e && i && i.remove();
757
790
  }
758
791
  // ─────────────────────────────────────────────────────────────────────────
759
792
  // Legacy aliases (keep public API stable)