nui-chatbot-pkg 1.0.15 → 1.0.17
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.
- package/dist/index.css +1 -1
- package/dist/index.d.mts +2 -4
- package/dist/index.d.ts +2 -4
- package/dist/index.js +4 -4
- package/dist/index.mjs +4 -4
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.chat-floating-btn{position:relative;width:3.5rem;height:3.5rem;cursor:pointer;transition:all .5s ease-in-out}@media(max-width:359px){.chat-floating-btn{width:3rem;height:3rem}}@media(min-width:360px)and (max-width:639px){.chat-floating-btn{width:4rem;height:4rem}}@media(min-width:640px){.chat-floating-btn{width:5rem;height:5rem}}.chat-btn-visible{transform:scale(1);opacity:1;pointer-events:auto}.chat-btn-visible:hover{transform:scale(1.1)}.chat-btn-hidden{transform:scale(0);opacity:0;pointer-events:none}.chat-btn-border{position:relative;width:100%;height:100%;border-radius:9999px;overflow:hidden;background-color:transparent}.chat-btn-inner{position:absolute;inset:0;margin:auto;width:85%;height:85%;z-index:10;border-radius:9999px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:transparent}.chat-btn-gradient{position:absolute;inset:0}.chat-btn-icon{position:relative;z-index:20;transition:transform .3s ease;color:#fff}.chat-floating-btn:hover .chat-btn-icon{transform:rotate(12deg)}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-scaleIn{animation:scaleIn .2s ease-out}.glow-container{position:absolute;width:120%;height:300%}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin-slow{animation:spin-slow 10s linear infinite}@keyframes rotate-border{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-10px) rotate(0)}}.seamless-border{position:relative;overflow:hidden}.seamless-border:before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0%,transparent 40%,var(--cb-primary) 70%,var(--cb-secondary) 90%,var(--cb-accent) 100%);animation:rotate-border 3s linear infinite}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;position:sticky;top:0;z-index:10;background:transparent}.chat-header-left{display:flex;align-items:center;gap:.75rem}.chat-header-logo{width:3rem;height:3rem;border-radius:9999px;object-fit:cover}.chat-header-logo-placeholder{width:3rem;height:3rem;border-radius:9999px;background:#f3f4f6;display:flex;align-items:center;justify-content:center}.chat-header-bot-icon{color:#4b5563}.chat-header-title-wrap{display:flex;flex-direction:column}.chat-header-title{font-weight:600;color:#111827;font-size:.875rem;line-height:1}.chat-header-actions{display:flex;align-items:center;gap:.5rem}.chat-header-close-btn{padding:.375rem;border-radius:9999px;color:#9ca3af;background:transparent;border:none;cursor:pointer;transition:color .2s ease,background-color .2s ease}.chat-header-close-btn:hover{background:#f3f4f6;color:#4b5563}.chat-input-outer{padding:1rem;display:flex;justify-content:center;width:100%}@media(max-width:639px){.chat-input-outer{padding:.75rem}}.chat-input-wrap{position:relative;width:100%;max-width:42rem}.chat-input-glow-lg{position:absolute;inset:-3px;border-radius:1rem;filter:blur(24px);opacity:.7;transition:opacity .7s ease;animation:chat-pulse 2s ease-in-out infinite}.chat-input-wrap:hover .chat-input-glow-lg{opacity:1}.chat-input-glow-sm{position:absolute;inset:-1px;border-radius:1rem;filter:blur(4px);transition:filter .5s ease}.chat-input-wrap:hover .chat-input-glow-sm{filter:blur(2)}@keyframes chat-pulse{0%,to{opacity:.6}50%{opacity:.9}}.chat-input-container{position:relative;display:flex;align-items:center;background:#fff;border-radius:1rem;border:1px solid #e4e4e7;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;width:100%}.chat-input-inner{position:relative;display:flex;align-items:center;width:100%;padding:.25rem 1.5rem}.chat-input-field{flex:1;font-size:1rem;outline:none;padding:.75rem 0;color:#27272a;background:transparent;border:none}.chat-input-send-wrap{position:absolute;right:-.75rem;display:flex;align-items:center;justify-content:center}.chat-input-send-btn{position:relative;z-index:20;display:flex;align-items:center;justify-content:center;height:3.7rem;width:3.7rem;border-radius:9999px;border:4px solid white;color:#fff;box-shadow:0 10px 15px -3px #0000001a;cursor:pointer;transition:transform .2s ease}@media(max-width:639px){.chat-input-send-btn{height:3rem;width:3rem;border:3px solid white}}.chat-input-send-btn:active{transform:scale(.9)}.chat-input-send-btn:enabled:hover{transform:scale(1.1) rotate(12deg)}.chat-input-send-btn:disabled{opacity:.8;cursor:not-allowed}.chat-input-spinner{height:1.25rem;width:1.25rem;border-radius:9999px;border:2px solid white;border-top-color:transparent;animation:chat-spin 1s linear infinite}@keyframes chat-spin{to{transform:rotate(360deg)}}.chat-input-send-icon{font-size:1.25rem}.mb-row{display:flex;width:100%}.mb-row-user{justify-content:flex-end}.mb-row-assistant{justify-content:flex-start}.mb-card-container{display:flex;flex-direction:column;gap:1rem;width:100%}.mb-card-content{background:#f3f4f6;color:#27272a;padding:1rem;border-radius:1rem;font-size:.875rem}.mb-card-wrapper{max-width:90%;animation:mb-in .3s ease forwards}.mb-bubble{max-width:85%;padding:1rem;font-size:.875rem;border-radius:1rem;box-shadow:0 1px 2px #0000000d;animation:mb-in .3s ease forwards;white-space:pre-wrap;word-break:break-word;transition:all .3s ease}.mb-bubble-user{color:#fff;border-top-right-radius:0}.mb-bubble-assistant{background:#f3f4f6;color:#27272a;border-top-left-radius:0}@keyframes mb-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.mb-typing{display:flex;gap:.25rem;padding:.25rem .5rem}.mb-dot{width:.375rem;height:.375rem;background:currentColor;border-radius:9999px;animation:mb-bounce 1.4s infinite both}.mb-dot-1{animation-delay:-.3s}.mb-dot-2{animation-delay:-.15s}.mb-dot-3{animation-delay:0s}@keyframes mb-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.sug-skeleton-float{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.25rem 1rem 0;width:100%;animation:sug-pulse 1.5s ease-in-out infinite}.sug-skeleton-item{height:2.5rem;width:70%;border-radius:.5rem;opacity:.7}.sug-skeleton-more{height:1.5rem;width:3rem;border-radius:9999px;margin-top:.5rem;background:#0000000d}.sug-skeleton-list{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;justify-content:flex-start;animation:sug-pulse 1.5s ease-in-out infinite}@media(min-width:640px){.sug-skeleton-list{justify-content:center}}.sug-skeleton-chip{height:2rem;width:6rem;background:#f3f4f6;border-radius:.5rem}@keyframes sug-pulse{0%,to{opacity:.6}50%{opacity:1}}.sug-float-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.5rem 1rem 1rem;width:100%}.sug-float-btn{background:#fff;border:none;padding:.625rem 1.5rem;border-radius:.75rem;box-shadow:0 8px 20px color-mix(in srgb,var(--cb-primary) 25%,transparent);font-size:.875rem;font-weight:500;max-width:85%;width:fit-content;cursor:pointer;animation:sug-fade-up .4s ease-out forwards;opacity:0;transition:transform .2s ease,box-shadow .2s ease}.sug-float-btn:hover{box-shadow:0 8px 18px color-mix(in srgb,var(--cb-primary) 40%,transparent);transform:scale(1.03)}.sug-float-btn:active{transform:scale(.95)}.sug-float-text{color:#374151}.sug-more-btn{margin-top:.25rem;background:#f3f4f6;padding:.375rem 1.25rem;border-radius:9999px;cursor:pointer;box-shadow:0 1px 2px #0000000d;transition:background-color .2s ease,transform .1s ease;animation:sug-fade-up .4s ease-out forwards;opacity:0;border:none}.sug-more-btn:hover{background:#e5e7eb}.sug-more-btn:active{transform:scale(.95)}.sug-more-dots{display:flex;align-items:center;gap:.25rem}.sug-more-dots span{width:.375rem;height:.375rem;background:currentColor;border-radius:9999px}.sug-list-wrap{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;justify-content:flex-start}@media(min-width:640px){.sug-list-wrap{justify-content:center}}.sug-list-btn{white-space:nowrap;border:none;padding:.375rem 1rem;border-radius:.5rem;font-size:.75rem;color:#4b5563;background:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--cb-primary) 22%,transparent);cursor:pointer;transition:background-color .2s ease,transform .15s ease,box-shadow .15s ease;animation:sug-fade .3s ease-out forwards;opacity:0}.sug-list-btn:hover{background:#f9fafb;box-shadow:0 6px 18px color-mix(in srgb,var(--cb-primary) 35%,transparent);transform:translateY(-1px)}@keyframes sug-fade-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes sug-fade{0%{opacity:0}to{opacity:1}}.sug-list-wrap::-webkit-scrollbar{display:none}.chat-messages-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:.75rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem;background:transparent;-ms-overflow-style:none;scrollbar-width:none}.chat-messages-container::-webkit-scrollbar{display:none;width:0}.chat-welcome{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100%;text-align:center;gap:1.5rem;overflow:visible}@media(max-width:639px){.chat-messages-container{padding:.75rem 1rem;gap:1rem}.chat-welcome{gap:1rem;padding:.75rem}}.chat-welcome-icon{width:5rem;height:5rem;flex-shrink:0;z-index:10;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:chat-float 4s ease-in-out infinite}@keyframes chat-float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.chat-welcome-title{font-size:1.5rem;font-weight:700;color:#000;letter-spacing:-.015em}.chat-welcome-subtitle{font-size:.875rem;color:#6b7280;padding:0 2.5rem}@media(max-width:639px){.chat-welcome-subtitle{padding:0 1rem;font-size:.8125rem}}.chat-welcome-suggestions{width:100%;max-height:fit-content}.chat-window{position:fixed;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(255,255,255,.4);border-radius:2rem;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transform-origin:bottom right;transition:all .5s cubic-bezier(.4,0,.2,1);bottom:1rem;right:1rem;top:auto;z-index:40;width:85vw;max-height:75vh}@media(max-width:359px){.chat-window{width:80vw;bottom:.5rem;right:.5rem;border-radius:1.5rem;max-height:70vh}}@media(min-width:360px)and (max-width:639px){.chat-window{width:90vw;max-height:75vh}}@media(min-width:640px){.chat-window{width:400px;max-height:600px}}@media(min-width:768px){.chat-window{width:420px;max-height:620px}}@media(min-width:1024px){.chat-window{width:450px;max-height:650px}}.chat-window-open{height:65vh;opacity:1;transform:scale(1) translateY(0);pointer-events:auto}@media(min-width:640px){.chat-window-open{height:560px}}@media(min-width:768px){.chat-window-open{height:580px}}@media(min-width:1024px){.chat-window-open{height:600px}}.chat-window-closed{height:0;opacity:0;transform:scale(.95) translateY(2.5rem);pointer-events:none}.chat-window-header{flex:none;z-index:20;background:#fff9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.2)}.chat-window-footer{flex:none;background:#fff;padding:.75rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){.chat-window-footer{padding:1rem}}.chat-window-powered{text-align:center;margin-top:.5rem}.chat-powered-text{font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:.2em}.chat-powered-link{color:#9ca3af;font-weight:600;text-decoration:none;transition:color .2s ease}.chat-powered-link:hover{color:#2563eb}.chatbot-container{position:fixed;bottom:1rem;right:1rem;z-index:50;display:flex;flex-direction:column;align-items:flex-end;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif}@media(max-width:359px){.chatbot-container{bottom:.5rem;right:.5rem}}@media(min-width:640px){.chatbot-container{bottom:1.5rem;right:1.5rem}}@media(min-width:768px){.chatbot-container{bottom:2rem;right:2rem}}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";.chat-floating-btn{position:relative;width:3.5rem;height:3.5rem;cursor:pointer;transition:all .5s ease-in-out}@media(max-width:359px){.chat-floating-btn{width:3rem;height:3rem}}@media(min-width:360px)and (max-width:639px){.chat-floating-btn{width:4rem;height:4rem}}@media(min-width:640px){.chat-floating-btn{width:5rem;height:5rem}}.chat-btn-visible{transform:scale(1);opacity:1;pointer-events:auto}.chat-btn-visible:hover{transform:scale(1.1)}.chat-btn-hidden{transform:scale(0);opacity:0;pointer-events:none}.chat-btn-border{position:relative;width:100%;height:100%;border-radius:9999px;overflow:hidden;background-color:transparent}.chat-btn-inner{position:absolute;inset:0;margin:auto;width:85%;height:85%;z-index:10;border-radius:9999px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:transparent}.chat-btn-gradient{position:absolute;inset:0}.chat-btn-icon{position:relative;z-index:20;transition:transform .3s ease}.chat-floating-btn:hover .chat-btn-icon{transform:rotate(12deg)}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-scaleIn{animation:scaleIn .2s ease-out}.glow-container{position:absolute;width:120%;height:300%}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin-slow{animation:spin-slow 10s linear infinite}@keyframes rotate-border{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-10px) rotate(0)}}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;position:sticky;top:0;z-index:10;background:transparent}.chat-header-left{display:flex;align-items:center;gap:.75rem}.chat-header-logo{width:2.6rem;height:2.6rem;border-radius:9999px;object-fit:cover;border:2px solid rgba(255,255,255,.22)}.chat-header-logo-placeholder{width:2.6rem;height:2.6rem;border-radius:9999px;background:#59a0fff2;display:flex;align-items:center;justify-content:center;font-weight:700;color:#f8fbff}.chat-header-bot-icon{color:#f8fbff}.chat-header-title-wrap{display:flex;flex-direction:column;gap:.2rem}.chat-header-title-row{display:flex;align-items:center;gap:.45rem}.chat-header-title{font-weight:700;color:#f5f9ff;font-size:1.03rem;line-height:1.1}.chat-header-badge{font-size:.74rem;line-height:1;color:#d8e8ff;padding:.19rem .5rem;border-radius:9999px;background:#ffffff24;border:1px solid rgba(255,255,255,.08)}.chat-header-status{display:flex;align-items:center;gap:.33rem;font-size:.84rem;color:#b7c8e9}.chat-header-status-dot{width:.45rem;height:.45rem;border-radius:9999px;background:#22d56f;flex:none}.chat-header-actions{display:flex;align-items:center;gap:.5rem}.chat-header-close-btn{padding:.375rem;border-radius:9999px;color:#d2def4;background:transparent;border:none;cursor:pointer;transition:color .2s ease,background-color .2s ease}.chat-header-close-btn:hover{background:#ffffff1f;color:#fff}.chat-input-outer{padding:.75rem .95rem .6rem;display:flex;justify-content:center;width:100%;background:#fff}@media(max-width:639px){.chat-input-outer{padding:.75rem .95rem .6rem}}.chat-input-wrap{position:relative;width:100%;max-width:none}@keyframes chat-pulse{0%,to{opacity:.6}50%{opacity:.9}}.chat-input-row{display:flex;align-items:center;gap:.65rem}.chat-input-container{position:relative;display:flex;align-items:center;background:#f9fafb;border-radius:9999px;border:1.5px solid #E5E7EB;box-shadow:none;width:80%;min-height:2.7rem}.chat-input-inner{position:relative;display:flex;align-items:center;width:100%;padding:.15rem 1.1rem}.chat-input-field{flex:1;font-size:1rem;outline:none;padding:.52rem 0;color:#000;background:transparent;border:none}.chat-input-container:focus-within{border-color:#3b82f6}.chat-input-field::placeholder{color:#8b909b}.chat-input-send-btn{position:relative;z-index:20;display:flex;align-items:center;justify-content:center;height:2.65rem;width:2.65rem;min-height:2.65rem;min-width:2.65rem;aspect-ratio:1 / 1;flex-shrink:0;border-radius:9999px;border:none;color:#fff;box-shadow:none;cursor:pointer;transition:transform .2s ease}@media(max-width:639px){.chat-input-send-btn{height:2.55rem;width:2.55rem;min-height:2.55rem;min-width:2.55rem}}.chat-input-send-btn:active{transform:scale(.9)}.chat-input-send-btn:enabled:hover{transform:scale(1.03)}.chat-input-send-btn:disabled{opacity:.65;cursor:not-allowed}.chat-input-spinner{height:1.25rem;width:1.25rem;border-radius:9999px;border:2px solid white;border-top-color:transparent;animation:chat-spin 1s linear infinite}@keyframes chat-spin{to{transform:rotate(360deg)}}.chat-input-send-icon{height:1.3rem;width:1.3rem}.mb-row{display:flex;width:100%}.mb-row-user{justify-content:flex-end;flex-direction:column;align-items:flex-end}.mb-row-assistant{justify-content:flex-start;flex-direction:column;align-items:flex-start}.mb-card-container{display:flex;flex-direction:column;gap:1rem;width:100%}.mb-card-content{background:#f3f4f6;color:#27272a;padding:1rem;border-radius:1rem;font-size:.875rem}.mb-card-wrapper{max-width:90%;animation:mb-in .3s ease forwards}.mb-bubble{max-width:88%;padding:.78rem 1rem;font-size:.98rem;border-radius:1.15rem;line-height:1.55;box-shadow:0 2px 8px #0f172a14;animation:mb-in .3s ease forwards;white-space:pre-wrap;word-break:break-word;transition:all .3s ease}.mb-bubble-user{color:#fff;border-bottom-right-radius:8px}.mb-bubble-assistant{background:#eceef1;color:#1f2937;border:1px solid #d6dbe2;margin-left:30px}.mb-assistant-meta{display:flex;align-items:center;gap:.55rem;margin-top:-.1rem;padding-left:.1rem}.mb-assistant-avatar{margin-top:.15rem;width:2rem;height:2rem;border-radius:9999px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;line-height:1;flex:none}.mb-assistant-time{font-size:.95rem;color:#99a3b3}.mb-user-meta{display:flex;align-items:center;gap:.18rem;margin-top:.2rem}.mb-user-time{font-size:.85rem;color:#99a3b3}.mb-user-tick{font-size:.78rem;line-height:1;color:#2f89ff;letter-spacing:-.12rem}@keyframes mb-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.mb-typing{display:flex;gap:.25rem;padding:.25rem .5rem}.mb-dot{width:.5rem;height:.5rem;background:#3b82f6;border-radius:10px;animation:mb-bounce 1.4s infinite both}.mb-dot-1{animation-delay:-.3s}.mb-dot-2{animation-delay:-.15s}.mb-dot-3{animation-delay:0s}@keyframes mb-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.chat-messages-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem;display:flex;flex-direction:column;gap:.85rem;background:#f1f5fb;-ms-overflow-style:none;scrollbar-width:none}.chat-messages-container::-webkit-scrollbar{display:none;width:0}.chat-welcome{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:100%;text-align:left;gap:1rem;overflow:visible}.chat-welcome-message{width:100%;max-width:360px}@media(max-width:639px){.chat-messages-container{padding:.75rem 1rem;gap:1rem}.chat-welcome{gap:1rem;padding:.75rem}}.chat-welcome-subtitle{font-size:1rem;color:#232c39;line-height:1.6;background:#eceef1;border:1px solid #d6dbe2;border-radius:1.15rem;padding:.78rem 1rem;margin:0;box-shadow:0 2px 8px #0f172a14;margin-bottom:.5rem;margin-left:30px}.chat-welcome-meta{display:flex;align-items:center;gap:.55rem;margin-top:-.1rem;padding-left:.1rem}.chat-welcome-avatar{width:2rem;height:2rem;border-radius:9999px;background:#2551a2;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;line-height:1;flex:none}.chat-welcome-time{font-size:.95rem;color:#99a3b3}@media(max-width:639px){.chat-welcome-subtitle{font-size:.9rem;padding:.75rem .9rem}}.chat-welcome-suggestions{width:100%;max-height:fit-content;margin-top:auto;padding-top:.2rem}.sug-skeleton-float{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.25rem 1rem 0;width:100%;animation:sug-pulse 1.5s ease-in-out infinite}.sug-skeleton-item{height:2.5rem;width:70%;border-radius:.5rem;opacity:.7}.sug-skeleton-more{height:1.5rem;width:3rem;border-radius:9999px;margin-top:.5rem;background:#0000000d}.sug-skeleton-list{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;justify-content:flex-start;animation:sug-pulse 1.5s ease-in-out infinite}@media(min-width:640px){.sug-skeleton-list{justify-content:center}}.sug-skeleton-chip{height:2rem;width:6rem;background:#f3f4f6;border-radius:.5rem}@keyframes sug-pulse{0%,to{opacity:.6}50%{opacity:1}}.sug-float-wrap{display:flex;flex-direction:row;align-items:center;gap:.55rem;padding:0 .95rem .35rem;margin-bottom:0;width:100%;overflow-x:scroll;overflow-y:hidden;scrollbar-width:auto;scrollbar-color:#a6acb3 #f9fafb}.sug-float-btn{background:#fff;border:2px solid transparent;padding:.5rem .95rem;border-radius:9999px;box-shadow:0 1px 2px #1e3a8a2e;font-size:1rem;font-weight:500;max-width:none;width:auto;cursor:pointer;animation:none;opacity:1;transition:transform .15s ease,box-shadow .15s ease;flex:none;color:#bfdbfe;line-height:1;white-space:nowrap;margin-bottom:1px}.sug-float-btn:hover{box-shadow:0 2px 6px #1e3a8a33}.sug-float-btn:active{transform:scale(.97)}.sug-float-text{color:#2150bf}.sug-more-btn{margin-top:.25rem;background:#f6f9ff;padding:.375rem 1.25rem;border-radius:9999px;cursor:pointer;box-shadow:0 1px 2px #0000000d;transition:background-color .2s ease,transform .1s ease;animation:sug-fade-up .4s ease-out forwards;opacity:0;border:none}.sug-more-btn:hover{background:#e5e7eb}.sug-more-btn:active{transform:scale(.95)}.sug-more-dots{display:flex;align-items:center;gap:.25rem}.sug-more-dots span{width:.375rem;height:.375rem;background:currentColor;border-radius:9999px}.sug-float-wrap::-webkit-scrollbar{height:14px}.sug-float-wrap::-webkit-scrollbar-track{background:#f9fafb;border-radius:0}.sug-float-wrap::-webkit-scrollbar-thumb{background:#a6acb3;border-radius:9999px;border:2px solid #f9fafb}.sug-float-wrap::-webkit-scrollbar-thumb:hover{background:#b4bac1}.sug-float-wrap::-webkit-scrollbar-button:horizontal{background:#f9fafb;width:12px}.sug-list-wrap{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;justify-content:flex-start}@media(min-width:640px){.sug-list-wrap{justify-content:center}}.sug-list-btn{white-space:nowrap;border:none;padding:.375rem 1rem;border-radius:.5rem;font-size:.75rem;color:#4b5563;background:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--cb-primary) 22%,transparent);cursor:pointer;transition:background-color .2s ease,transform .15s ease,box-shadow .15s ease;animation:sug-fade .3s ease-out forwards;opacity:0}.sug-list-btn:hover{background:#f9fafb;box-shadow:0 6px 18px color-mix(in srgb,var(--cb-primary) 35%,transparent);transform:translateY(-1px)}@keyframes sug-fade-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes sug-fade{0%{opacity:0}to{opacity:1}}.sug-list-wrap::-webkit-scrollbar{display:none}.chat-window{position:fixed;display:flex;flex-direction:column;background:#d8dce2;border-radius:1rem;box-shadow:0 18px 45px -16px #0f172a80;overflow:hidden;transform-origin:bottom right;transition:all .5s cubic-bezier(.4,0,.2,1);bottom:1.25rem;right:1.25rem;top:auto;z-index:40;width:85vw;max-height:80vh}@media(max-width:359px){.chat-window{width:80vw;bottom:.5rem;right:.5rem;border-radius:1.5rem;max-height:70vh}}@media(min-width:360px)and (max-width:639px){.chat-window{width:90vw;max-height:75vh}}@media(min-width:640px){.chat-window{width:400px;max-height:600px}}@media(min-width:768px){.chat-window{width:420px;max-height:620px}}@media(min-width:1024px){.chat-window{width:450px;max-height:650px}}.chat-window-open{height:65vh;opacity:1;transform:scale(1) translateY(0);pointer-events:auto}@media(min-width:640px){.chat-window-open{height:560px}}@media(min-width:768px){.chat-window-open{height:580px}}@media(min-width:1024px){.chat-window-open{height:600px}}.chat-window-closed{height:0;opacity:0;transform:scale(.95) translateY(2.5rem);pointer-events:none}.chat-window-header{flex:none;z-index:20;background:linear-gradient(135deg,#2450a0,#1b3f87);border-bottom:1px solid rgba(255,255,255,.14)}.chat-window-footer{flex:none;background:#fff;padding:0;border-top:1px solid #d4d8e0}@media(min-width:640px){.chat-window-footer{padding:0}}.chat-window-suggestions{border-bottom:1px solid #d4d8e0;padding:.5rem 0 0;background:#f1f5fb}.chat-window-powered{text-align:center;margin-top:0;padding:.1rem 1rem .45rem;border-top:1px solid #e2e5ea;background:#fff}.chat-powered-text{font-size:12px;color:#9da5b5;letter-spacing:.01em}.chat-powered-link{color:#9ca3af;font-weight:600;text-decoration:none;transition:color .2s ease}.chat-powered-link:hover{color:#2563eb}.chatbot-container{position:fixed;bottom:1rem;right:1rem;z-index:50;display:flex;flex-direction:column;align-items:flex-end;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif}@media(max-width:359px){.chatbot-container{bottom:.5rem;right:.5rem}}@media(min-width:640px){.chatbot-container{bottom:1.5rem;right:1.5rem}}@media(min-width:768px){.chatbot-container{bottom:2rem;right:2rem}}
|
package/dist/index.d.mts
CHANGED
|
@@ -53,6 +53,7 @@ type ChatTheme = {
|
|
|
53
53
|
container?: string;
|
|
54
54
|
header?: string;
|
|
55
55
|
input?: string;
|
|
56
|
+
userBubbleStyle?: React.CSSProperties;
|
|
56
57
|
showGradient?: boolean;
|
|
57
58
|
welcomeMessage?: string;
|
|
58
59
|
welcomeDescription?: string;
|
|
@@ -64,6 +65,7 @@ type ChatTheming = {
|
|
|
64
65
|
containerStyle?: React.CSSProperties;
|
|
65
66
|
headerStyle?: React.CSSProperties;
|
|
66
67
|
inputStyle?: React.CSSProperties;
|
|
68
|
+
userBubbleStyle?: React.CSSProperties;
|
|
67
69
|
showGradient?: boolean;
|
|
68
70
|
welcomeMessage?: string;
|
|
69
71
|
welcomeDescription?: string;
|
|
@@ -123,10 +125,6 @@ declare const ICONS: {
|
|
|
123
125
|
size?: number | undefined;
|
|
124
126
|
className?: string | undefined;
|
|
125
127
|
}) => react_jsx_runtime.JSX.Element;
|
|
126
|
-
Sparkles: ({ size, className }: {
|
|
127
|
-
size?: number | undefined;
|
|
128
|
-
className?: string | undefined;
|
|
129
|
-
}) => react_jsx_runtime.JSX.Element;
|
|
130
128
|
Send: ({ size, className }: {
|
|
131
129
|
size?: number | undefined;
|
|
132
130
|
className?: string | undefined;
|
package/dist/index.d.ts
CHANGED
|
@@ -53,6 +53,7 @@ type ChatTheme = {
|
|
|
53
53
|
container?: string;
|
|
54
54
|
header?: string;
|
|
55
55
|
input?: string;
|
|
56
|
+
userBubbleStyle?: React.CSSProperties;
|
|
56
57
|
showGradient?: boolean;
|
|
57
58
|
welcomeMessage?: string;
|
|
58
59
|
welcomeDescription?: string;
|
|
@@ -64,6 +65,7 @@ type ChatTheming = {
|
|
|
64
65
|
containerStyle?: React.CSSProperties;
|
|
65
66
|
headerStyle?: React.CSSProperties;
|
|
66
67
|
inputStyle?: React.CSSProperties;
|
|
68
|
+
userBubbleStyle?: React.CSSProperties;
|
|
67
69
|
showGradient?: boolean;
|
|
68
70
|
welcomeMessage?: string;
|
|
69
71
|
welcomeDescription?: string;
|
|
@@ -123,10 +125,6 @@ declare const ICONS: {
|
|
|
123
125
|
size?: number | undefined;
|
|
124
126
|
className?: string | undefined;
|
|
125
127
|
}) => react_jsx_runtime.JSX.Element;
|
|
126
|
-
Sparkles: ({ size, className }: {
|
|
127
|
-
size?: number | undefined;
|
|
128
|
-
className?: string | undefined;
|
|
129
|
-
}) => react_jsx_runtime.JSX.Element;
|
|
130
128
|
Send: ({ size, className }: {
|
|
131
129
|
size?: number | undefined;
|
|
132
130
|
className?: string | undefined;
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";"use client";var K=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var me=Object.prototype.hasOwnProperty;var pe=(e,t)=>{for(var r in t)K(e,r,{get:t[r],enumerable:!0})},he=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of le(t))!me.call(e,a)&&a!==r&&K(e,a,{get:()=>t[a],enumerable:!(o=ce(t,a))||o.enumerable});return e};var ue=e=>he(K({},"__esModule",{value:!0}),e);var Ce={};pe(Ce,{ChatBot:()=>Z,ChatHeader:()=>W,ChatInput:()=>U,Chatbot:()=>Z,ICONS:()=>I,MessageBubble:()=>F,Suggestions:()=>Q});module.exports=ue(Ce);var k=require("react");var f=require("react/jsx-runtime"),I={MessageCircle:({size:e=24,className:t=""})=>(0,f.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,f.jsx)("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>(0,f.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,f.jsx)("path",{d:"M12 8V4m8 4V4M4 8V4M2 11h20m-1 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11m5 5v2m8-2v2"})}),X:({size:e=24,className:t=""})=>(0,f.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,f.jsx)("path",{d:"M18 6 6 18M6 6l12 12"})}),Sparkles:({size:e=24,className:t=""})=>(0,f.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,f.jsx)("path",{d:"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"})}),Send:({size:e=24,className:t=""})=>(0,f.jsxs)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[(0,f.jsx)("path",{d:"m22 2-7 20-4-9-9-4Z"}),(0,f.jsx)("path",{d:"M22 2 11 13"})]})};var R=require("react/jsx-runtime"),ge=({isExpanded:e,onOpen:t,theming:r})=>(0,R.jsx)("div",{onClick:t,className:`chat-floating-btn ${e?"chat-btn-hidden":"chat-btn-visible"}`,children:(0,R.jsx)("div",{className:"chat-btn-border seamless-border",children:(0,R.jsxs)("div",{className:"chat-btn-inner",children:[(0,R.jsx)("div",{className:"chat-btn-gradient",style:{background:r?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary))"}}),(0,R.jsx)(I.MessageCircle,{size:30,className:"chat-btn-icon"})]})})}),_=ge;var Y=require("react");var T=(e,t)=>t?`${e} ${t}`:e;var y=require("react/jsx-runtime"),fe=({onClose:e,title:t,theming:r,strapiUrl:o})=>{let[a,i]=(0,Y.useState)(null);(0,Y.useEffect)(()=>{if(!o)return;(async()=>{try{let m=await(await fetch(`${o}/api/faq-ai-bot/suggestion-and-logo`)).json();m?.logoUrl&&i(`${o}${m.logoUrl}`)}catch(l){console.error("Failed to fetch logo",l)}})()},[o]);let u=T("chat-header",r?.header);return(0,y.jsxs)("header",{className:u,style:r?.headerStyle,children:[(0,y.jsxs)("div",{className:"chat-header-left",children:[a?(0,y.jsx)("img",{src:a,alt:"Bot Logo",className:"chat-header-logo"}):(0,y.jsx)("div",{className:"chat-header-logo-placeholder",children:(0,y.jsx)(I.Bot,{size:20,className:"chat-header-bot-icon"})}),(0,y.jsx)("div",{className:"chat-header-title-wrap",children:(0,y.jsx)("span",{className:"chat-header-title",children:t})})]}),(0,y.jsx)("div",{className:"chat-header-actions",children:(0,y.jsx)("button",{onClick:e,className:"chat-header-close-btn","aria-label":"Close chat",children:(0,y.jsx)(I.X,{size:20})})})]})},W=fe;var A=require("react");var b=require("react/jsx-runtime"),be=({input:e,onInputChange:t,onSendMessage:r,isLoading:o,theming:a})=>{let i=a?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",s=(0,A.useRef)(null),d=T("chat-input-container",a?.input);(0,A.useEffect)(()=>{o||s.current?.focus()},[o]);let l=m=>{m.key==="Enter"&&!m.nativeEvent.isComposing&&e.trim()&&!o&&r()};return(0,b.jsx)("div",{className:"chat-input-outer",children:(0,b.jsxs)("div",{className:"chat-input-wrap",children:[(0,b.jsx)("div",{style:{background:i},className:"chat-input-glow-lg"}),(0,b.jsx)("div",{style:{background:i},className:"chat-input-glow-sm"}),(0,b.jsx)("div",{className:d,style:a?.inputStyle,children:(0,b.jsxs)("div",{className:"chat-input-inner",children:[(0,b.jsx)("input",{ref:s,type:"text",className:"chat-input-field",placeholder:o?"AI is thinking...":"Ask anything...",value:e,onChange:m=>t(m.target.value),onKeyDown:l,disabled:o,"aria-label":"User message"}),(0,b.jsx)("div",{className:"chat-input-send-wrap",children:(0,b.jsx)("button",{onClick:r,disabled:o||!e.trim(),style:{background:i},className:"chat-input-send-btn","aria-label":"Send message",children:o?(0,b.jsx)("div",{className:"chat-input-spinner"}):(0,b.jsx)(I.Send,{className:"chat-input-send-icon"})})})]})})]})})},U=be;var w=require("react/jsx-runtime"),we=({message:e,cardRegistry:t,themeStyles:r,theming:o})=>{let a=s=>{let u=s?.__collectionUid?.split(".").pop()?.toLowerCase();return t.find(d=>d.id===u)||t.find(d=>d.id==="default")},i=e.record?a(e.record)?.component:null;if(e.items?.items?.length){let s=e.items.cardStyle?.toLowerCase()||e.items.collection?.toLowerCase()||e.items.title?.toLowerCase(),d=t.find(l=>l.id===s)?.component;return(0,w.jsxs)("div",{className:"mb-card-container",children:[e.content&&(0,w.jsx)("div",{className:"mb-card-content",children:e.content}),d&&e.items.items.map((l,m)=>(0,w.jsx)(d,{items:l,style:r},m))]})}return(0,w.jsx)("div",{className:`mb-row ${e.role==="user"?"mb-row-user":"mb-row-assistant"}`,children:i&&e.record?(0,w.jsx)("div",{className:"mb-card-wrapper",children:(0,w.jsx)(i,{record:e.record,style:r})}):(0,w.jsx)("div",{style:e.role==="user"?{background:o?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))"}:{},className:`mb-bubble ${e.role==="user"?"mb-bubble-user":"mb-bubble-assistant"}`,children:e.loading&&!e.content?(0,w.jsxs)("div",{className:"mb-typing",children:[(0,w.jsx)("span",{className:"mb-dot mb-dot-1"}),(0,w.jsx)("span",{className:"mb-dot mb-dot-2"}),(0,w.jsx)("span",{className:"mb-dot mb-dot-3"})]}):e.content})})},F=we;var z=require("react");var c=require("react/jsx-runtime"),xe=({strapiUrl:e,onSelectQuestion:t,variant:r,theming:o})=>{let[a,i]=(0,z.useState)([]),[s,u]=(0,z.useState)(!0),[d,l]=(0,z.useState)(!1);(0,z.useEffect)(()=>{let n=new AbortController;return u(!0),fetch(`${e}/api/faq-ai-bot/suggestion-and-logo`,{signal:n.signal}).then(p=>p.json()).then(p=>{i(p.suggestedQuestions||[]),u(!1)}).catch(p=>{p.name!=="AbortError"&&(console.error("Suggestions fetch failed",p),u(!1))}),()=>n.abort()},[e]);let m=()=>r==="floating"?(0,c.jsxs)("div",{className:"sug-skeleton-float",children:[[1,2].map(n=>(0,c.jsx)("div",{className:"sug-skeleton-item",style:{backgroundColor:o?.primaryColor?`${o.primaryColor}`:"hsla(178, 100%, 51%, 0.05)",transform:n%2===0?"rotate(1deg)":"rotate(-1deg)"}},n)),(0,c.jsx)("div",{className:"sug-skeleton-more"})]}):(0,c.jsx)("div",{className:"sug-skeleton-list",children:[1,2,3].map(n=>(0,c.jsx)("div",{className:"sug-skeleton-chip"},n))});if(s&&a.length===0)return(0,c.jsx)(m,{});if(r==="floating"){let n=d?a:a.slice(0,2),p=!d&&a.length>2;return(0,c.jsxs)("div",{className:"sug-float-wrap",children:[n.map((M,P)=>{let G=P%2===0?"rotate(-1deg)":"rotate(1deg)";return(0,c.jsx)("button",{onClick:()=>t(M),className:"sug-float-btn",style:{borderColor:o?.primaryColor||"var(--cb-primary)",transform:G,animationDelay:`${P*.1}s`},children:(0,c.jsx)("span",{className:"sug-float-text",children:M})},`float-${P}-${M}`)}),p&&(0,c.jsx)("button",{onClick:()=>l(!0),"aria-label":"Show more suggestions",title:"Show more suggestions",className:"sug-more-btn",style:{animationDelay:`${n.length*.1}s`},children:(0,c.jsxs)("div",{className:"sug-more-dots",style:{color:o?.secondaryColor||"var(--cb-secondary)"},children:[(0,c.jsx)("span",{}),(0,c.jsx)("span",{}),(0,c.jsx)("span",{})]})})]})}return(0,c.jsx)("div",{className:"sug-list-wrap",children:a.map((n,p)=>(0,c.jsx)("button",{onClick:()=>t(n),className:"sug-list-btn",style:{animationDelay:`${p*.05}s`},children:n},`list-${p}-${n}`))})},Q=xe;var v=require("react/jsx-runtime"),ye=({messages:e,scrollRef:t,sendMessage:r,strapiUrl:o,resolvedRegistry:a,theming:i})=>{let s=i?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",u=i?.welcomeMessage||"How can I help you?",d=i?.welcomeDescription||"Select a common question below or type your own.";return(0,v.jsxs)("div",{ref:t,className:"chat-messages-container",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:[e.length===0&&(0,v.jsxs)("div",{className:"chat-welcome",children:[(0,v.jsx)("div",{className:"chat-welcome-icon",style:{background:s},children:(0,v.jsx)(I.MessageCircle,{size:40})}),(0,v.jsxs)("div",{children:[(0,v.jsx)("h3",{className:"chat-welcome-title",children:u}),(0,v.jsx)("p",{className:"chat-welcome-subtitle",children:d})]}),(0,v.jsx)("div",{className:"chat-welcome-suggestions",children:(0,v.jsx)(Q,{onSelectQuestion:r,strapiUrl:o,variant:"floating",theming:i})})]}),e.map(l=>(0,v.jsx)(F,{message:l,cardRegistry:a,theming:i},l.id))]})},ee=ye;var N=require("react/jsx-runtime"),ve=({isExpanded:e,setIsExpanded:t,messages:r,scrollRef:o,sendMessage:a,strapiUrl:i,resolvedRegistry:s,input:u,setInput:d,isLoading:l,title:m,theming:n})=>{let p=T(`chat-window ${e?"chat-window-open":"chat-window-closed"}`,n?.container);return(0,N.jsxs)("div",{className:p,style:n?.containerStyle,children:[(0,N.jsx)("div",{className:"chat-window-header",children:(0,N.jsx)(W,{title:m,onClose:()=>t(!1),theming:n,strapiUrl:i})}),(0,N.jsx)(ee,{messages:r,scrollRef:o,sendMessage:a,strapiUrl:i,resolvedRegistry:s,theming:n}),(0,N.jsxs)("div",{className:"chat-window-footer",children:[(0,N.jsx)(U,{input:u,onInputChange:d,onSendMessage:a,isLoading:l,theming:n}),(0,N.jsx)("div",{className:"chat-window-powered",children:(0,N.jsxs)("span",{className:"chat-powered-text",children:["Powered by"," ",(0,N.jsx)("a",{href:"https://numentica-ui.com",className:"chat-powered-link",children:"Numentica-UI"})]})})]})]})},te=ve;var O=require("react/jsx-runtime"),ke=({strapiUrl:e,cardRegistry:t,theme:r,title:o,streamSpeed:a})=>{let[i,s]=(0,k.useState)([]),[u,d]=(0,k.useState)(""),[l,m]=(0,k.useState)(!1),[n,p]=(0,k.useState)(!1),M=(0,k.useRef)(null),[P,G]=(0,k.useState)([]),ae=(0,k.useRef)(null),re={"--cb-primary":r?.primaryColor||"#2999d6","--cb-secondary":r?.secondaryColor||"#179fa3","--cb-accent":r?.accentColor||"#07a372"};return(0,k.useEffect)(()=>{t.length>0&&G(t)},[t]),(0,k.useEffect)(()=>()=>M.current?.abort(),[]),(0,O.jsxs)("div",{className:"chatbot-container",style:re,children:[(0,O.jsx)(_,{isExpanded:n,onOpen:()=>p(!0),theming:r}),(0,O.jsx)(te,{isExpanded:n,setIsExpanded:p,messages:i,scrollRef:ae,sendMessage:async oe=>{let V=oe||u;if(!V.trim())return;M.current?.abort(),M.current=new AbortController,p(!0),d(""),m(!0);let ne={role:"user",content:V,id:Date.now()},S=Date.now()+1;s(L=>[...L,ne,{role:"assistant",content:"",items:null,loading:!0,id:S}]);try{let L=await fetch(`${e}/api/faq-ai-bot/ask`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:V,history:i.slice(-4).map(g=>({role:g.role,content:g.content}))}),signal:M.current.signal});if(!L.ok)throw new Error("Network response was not ok");let H=L.body?.getReader(),$=new TextDecoder;if(!H)throw new Error("No reader available");let j=[],J=!1,ie=(async()=>{for(;!J||j.length>0;)if(j.length>0){let g=j.shift();if(g?.type==="text")if(a&&a>0)for(let h of g.content)s(x=>x.map(C=>C.id===S?{...C,content:C.content+h}:C)),await new Promise(x=>setTimeout(x,a));else s(h=>h.map(x=>x.id===S?{...x,content:x.content+g.content}:x));else if(g?.type==="card")try{let h=g.data;s(x=>x.map(C=>C.id===S?{...C,items:{items:h.items,schema:h.schema,collection:h.title,title:h.title,cardStyle:h.cardStyle}}:C))}catch(h){console.error("Error processing card data:",h)}}else await new Promise(g=>setTimeout(g,20));m(!1),s(g=>g.map(h=>h.id===S?{...h,loading:!1}:h))})(),q="";for(;;){let{value:g,done:h}=await H.read();if(h)break;let x=$.decode(g,{stream:!0});q+=x;let C=q.split(`
|
|
1
|
+
"use strict";"use client";var V=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var pe=Object.prototype.hasOwnProperty;var he=(e,t)=>{for(var o in t)V(e,o,{get:t[o],enumerable:!0})},fe=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of me(t))!pe.call(e,n)&&n!==o&&V(e,n,{get:()=>t[n],enumerable:!(r=ce(t,n))||r.enumerable});return e};var ge=e=>fe(V({},"__esModule",{value:!0}),e);var Ne={};he(Ne,{ChatBot:()=>K,ChatHeader:()=>H,ChatInput:()=>W,Chatbot:()=>K,ICONS:()=>P,MessageBubble:()=>Y,Suggestions:()=>U});module.exports=ge(Ne);var x=require("react");var I=require("react/jsx-runtime"),ue=({isExpanded:e,onOpen:t,theming:o})=>(0,I.jsx)("div",{onClick:t,className:`chat-floating-btn ${e?"chat-btn-hidden":"chat-btn-visible"}`,children:(0,I.jsx)("div",{className:"chat-btn-border seamless-border",children:(0,I.jsxs)("div",{className:"chat-btn-inner",children:[(0,I.jsx)("div",{className:"chat-btn-gradient",style:{background:o?.showGradient===!1?"var(--cb-primary)":"linear-gradient(135deg, var(--cb-primary)0%, var(--cb-secondary)100%)"}}),(0,I.jsx)("img",{src:"assert/Sparkles.svg",alt:"style icon",width:30,height:30,className:"chat-btn-icon"})]})})}),X=ue;var j=require("react");var v=require("react/jsx-runtime"),P={MessageCircle:({size:e=24,className:t=""})=>(0,v.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,v.jsx)("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>(0,v.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,v.jsx)("path",{d:"M12 8V4m8 4V4M4 8V4M2 11h20m-1 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11m5 5v2m8-2v2"})}),X:({size:e=24,className:t=""})=>(0,v.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,v.jsx)("path",{d:"M18 6 6 18M6 6l12 12"})}),Send:({size:e=24,className:t=""})=>(0,v.jsxs)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[(0,v.jsx)("path",{d:"m22 2-7 20-4-9-9-4Z"}),(0,v.jsx)("path",{d:"M22 2 11 13"})]})};var E=(e,t)=>t?`${e} ${t}`:e;var h=require("react/jsx-runtime"),be=({onClose:e,title:t,theming:o,strapiUrl:r})=>{let[n,m]=(0,j.useState)(null);(0,j.useEffect)(()=>{if(!r)return;(async()=>{try{let a=await(await fetch(`${r}/api/faq-ai-bot/suggestion-and-logo`)).json();a?.logoUrl&&m(`${r}${a.logoUrl}`)}catch(i){console.error("Failed to fetch logo",i)}})()},[r]);let f=E("chat-header",o?.header);return(0,h.jsxs)("header",{className:f,style:o?.headerStyle,children:[(0,h.jsxs)("div",{className:"chat-header-left",children:[(0,h.jsx)("div",{className:"chat-header-logo-placeholder",children:"A"}),(0,h.jsxs)("div",{className:"chat-header-title-wrap",children:[(0,h.jsxs)("div",{className:"chat-header-title-row",children:[(0,h.jsx)("span",{className:"chat-header-title",children:"Aria"}),(0,h.jsx)("span",{className:"chat-header-badge",children:t||"Assistant"})]}),(0,h.jsxs)("span",{className:"chat-header-status",children:[(0,h.jsx)("span",{className:"chat-header-status-dot"}),"Online \xB7 usually replies instantly"]})]})]}),(0,h.jsx)("div",{className:"chat-header-actions",children:(0,h.jsx)("button",{onClick:e,className:"chat-header-close-btn","aria-label":"Close chat",children:(0,h.jsx)(P.X,{size:20})})})]})},H=be;var O=require("react");var k=require("react/jsx-runtime"),we=({input:e,onInputChange:t,onSendMessage:o,isLoading:r,theming:n})=>{let m=n?.showGradient===!1?"var(--cb-primary)":"linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-secondary) 100%)",s=(0,O.useRef)(null),g=E("chat-input-container",n?.input);(0,O.useEffect)(()=>{r||s.current?.focus()},[r]);let i=l=>{l.key==="Enter"&&!l.nativeEvent.isComposing&&a()},a=()=>{e.trim()&&!r&&o()};return(0,k.jsx)("div",{className:"chat-input-outer",children:(0,k.jsx)("div",{className:"chat-input-wrap",children:(0,k.jsxs)("div",{className:"chat-input-row",children:[(0,k.jsx)("div",{className:g,style:{...n?.inputStyle,borderRadius:"9999px"},children:(0,k.jsx)("div",{className:"chat-input-inner",children:(0,k.jsx)("input",{ref:s,type:"text",className:"chat-input-field",placeholder:r?"AI is thinking...":"Type a message...",value:e,onChange:l=>t(l.target.value),onKeyDown:i,disabled:r,"aria-label":"User message"})})}),(0,k.jsx)("button",{onClick:a,disabled:r||!e.trim(),style:{background:m},className:"chat-input-send-btn","aria-label":"Send message",children:r?(0,k.jsx)("div",{className:"chat-input-spinner"}):(0,k.jsx)(P.Send,{className:"chat-input-send-icon"})})]})})})},W=we;var Z=require("react");var d=require("react/jsx-runtime"),xe=({message:e,cardRegistry:t,themeStyles:o,theming:r})=>{let n=new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",hour12:!0}).toLowerCase(),m=g=>{let i=g?.__collectionUid?.split(".").pop()?.toLowerCase();return t.find(a=>a.id===i)||t.find(a=>a.id==="default")},s=e.record?m(e.record)?.component:null,f={background:r?.showGradient===!1?"#3B82F6":"linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%)"};if(e.items?.items?.length){let g=e.items.cardStyle?.toLowerCase()||e.items.collection?.toLowerCase()||e.items.title?.toLowerCase(),a=t.find(l=>l.id===g)?.component;return(0,d.jsxs)("div",{className:"mb-card-container",children:[e.content&&(0,d.jsx)("div",{className:"mb-card-content",children:e.content}),a&&e.items.items.map((l,N)=>(0,d.jsx)(a,{items:l,style:o},N))]})}return(0,d.jsxs)("div",{className:`mb-row ${e.role==="user"?"mb-row-user":"mb-row-assistant"}`,children:[s&&e.record?(0,d.jsx)("div",{className:"mb-card-wrapper",children:(0,d.jsx)(s,{record:e.record,style:o})}):(0,d.jsx)("div",{style:e.role==="user"?{...f,...r?.userBubbleStyle}:{},className:`mb-bubble ${e.role==="user"?"mb-bubble-user":"mb-bubble-assistant"}`,children:e.loading&&!e.content?(0,d.jsxs)("div",{className:"mb-typing",children:[(0,d.jsx)("span",{className:"mb-dot mb-dot-1"}),(0,d.jsx)("span",{className:"mb-dot mb-dot-2"}),(0,d.jsx)("span",{className:"mb-dot mb-dot-3"})]}):e.content}),e.role==="assistant"&&!s&&(0,d.jsxs)("div",{className:"mb-assistant-meta",children:[(0,d.jsx)("span",{className:"mb-assistant-avatar",style:{background:r?.showGradient===!1?"#3B82F6":"linear-gradient(135deg, var(--cb-primary), var(--cb-secondary))"},children:"A"}),(0,d.jsxs)("span",{className:"mb-assistant-time",children:[n," "]})]}),e.role==="user"&&!s&&(0,d.jsxs)("div",{className:"mb-user-meta",children:[(0,d.jsxs)("span",{className:"mb-user-time",children:[n," "]}),(0,d.jsx)("span",{className:"mb-user-tick","aria-label":"Delivered",children:"\u2713\u2713"})]})]})},Y=xe;var C=require("react/jsx-runtime"),ye=({messages:e,scrollRef:t,resolvedRegistry:o,theming:r})=>{let n=r?.welcomeDescription||"Hi! I'm Aria, your Harbour Air travel assistant. I'm here to help you book flights, check fees, understand baggage rules, and anything else you need.",m=new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",hour12:!0}).toLowerCase();return(0,Z.useEffect)(()=>{let s=t.current;s&&s.scrollTo({top:s.scrollHeight,behavior:"auto"})},[e,t]),(0,C.jsxs)("div",{ref:t,className:"chat-messages-container",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:[e.length===0&&(0,C.jsx)("div",{className:"chat-welcome",children:(0,C.jsxs)("div",{className:"chat-welcome-message",children:[(0,C.jsx)("p",{className:"chat-welcome-subtitle",children:n}),(0,C.jsxs)("div",{className:"chat-welcome-meta",children:[(0,C.jsx)("span",{className:"chat-welcome-avatar",style:{background:r?.showGradient===!1?"#3B82F6":"linear-gradient(135deg, var(--cb-primary), var(--cb-secondary))"},children:"A"}),(0,C.jsx)("span",{className:"chat-welcome-time",children:m})]})]})}),e.map(s=>(0,C.jsx)(Y,{message:s,cardRegistry:o,theming:r},s.id))]})},_=ye;var D=require("react");var u=require("react/jsx-runtime"),ve=({strapiUrl:e,onSelectQuestion:t,variant:o,theming:r})=>{let[n,m]=(0,D.useState)([]),[s,f]=(0,D.useState)(!0);(0,D.useEffect)(()=>{let i=new AbortController;return f(!0),fetch(`${e}/api/faq-ai-bot/suggestion-and-logo`,{signal:i.signal}).then(a=>a.json()).then(a=>{m(a.suggestedQuestions||[]),f(!1)}).catch(a=>{a.name!=="AbortError"&&(console.error("Suggestions fetch failed",a),f(!1))}),()=>i.abort()},[e]);let g=()=>o==="floating"?(0,u.jsxs)("div",{className:"sug-skeleton-float",children:[[1,2].map(i=>(0,u.jsx)("div",{className:"sug-skeleton-item",style:{backgroundColor:r?.primaryColor?`${r.primaryColor}`:"hsla(178, 100%, 51%, 0.05)",transform:i%2===0?"rotate(1deg)":"rotate(-1deg)"}},i)),(0,u.jsx)("div",{className:"sug-skeleton-more"})]}):(0,u.jsx)("div",{className:"sug-skeleton-list",children:[1,2,3].map(i=>(0,u.jsx)("div",{className:"sug-skeleton-chip"},i))});return s&&n.length===0?(0,u.jsx)(g,{}):o==="floating"?(0,u.jsx)("div",{className:"sug-float-wrap",children:n.map((i,a)=>(0,u.jsx)("button",{onClick:()=>t(i),className:"sug-float-btn",style:{borderColor:"#bfdbfe",animationDelay:`${a*.1}s`},children:(0,u.jsx)("span",{className:"sug-float-text",children:i})},`float-${a}-${i}`))}):(0,u.jsx)("div",{className:"sug-list-wrap",children:n.map((i,a)=>(0,u.jsx)("button",{onClick:()=>t(i),className:"sug-list-btn",style:{animationDelay:`${a*.05}s`},children:i},`list-${a}-${i}`))})},U=ve;var w=require("react/jsx-runtime"),ke=({isExpanded:e,setIsExpanded:t,messages:o,scrollRef:r,sendMessage:n,strapiUrl:m,resolvedRegistry:s,input:f,setInput:g,isLoading:i,title:a,theming:l})=>{let N=E(`chat-window ${e?"chat-window-open":"chat-window-closed"}`,l?.container);return(0,w.jsxs)("div",{className:N,style:l?.containerStyle,children:[(0,w.jsx)("div",{className:"chat-window-header",children:(0,w.jsx)(H,{title:a,onClose:()=>t(!1),theming:l,strapiUrl:m})}),(0,w.jsx)(_,{messages:o,scrollRef:r,resolvedRegistry:s,theming:l}),(0,w.jsxs)("div",{className:"chat-window-footer",children:[(0,w.jsx)("div",{className:"chat-window-suggestions",children:(0,w.jsx)(U,{onSelectQuestion:n,strapiUrl:m,variant:"floating",theming:l})}),(0,w.jsx)(W,{input:f,onInputChange:g,onSendMessage:n,isLoading:i,theming:l}),(0,w.jsx)("div",{className:"chat-window-powered",children:(0,w.jsx)("span",{className:"chat-powered-text",children:"Talk to a human \xB7 Privacy policy"})})]})]})},ee=ke;var F=require("react/jsx-runtime"),Ce=({strapiUrl:e,cardRegistry:t,theme:o,title:r,streamSpeed:n})=>{let[m,s]=(0,x.useState)([]),[f,g]=(0,x.useState)(""),[i,a]=(0,x.useState)(!1),[l,N]=(0,x.useState)(!1),$=(0,x.useRef)(null),[te,ae]=(0,x.useState)([]),re=(0,x.useRef)(null),oe={"--cb-primary":o?.primaryColor||"#2999d6","--cb-secondary":o?.secondaryColor||"#179fa3","--cb-accent":o?.accentColor||o?.secondaryColor||"#179fa3"};return(0,x.useEffect)(()=>{t.length>0&&ae(t)},[t]),(0,x.useEffect)(()=>()=>$.current?.abort(),[]),(0,F.jsxs)("div",{className:"chatbot-container",style:oe,children:[(0,F.jsx)(X,{isExpanded:l,onOpen:()=>N(!0),theming:o}),(0,F.jsx)(ee,{isExpanded:l,setIsExpanded:N,messages:m,scrollRef:re,sendMessage:async ie=>{let G=ie||f;if(!G.trim())return;$.current?.abort(),$.current=new AbortController,N(!0),g(""),a(!0);let ne={role:"user",content:G,id:Date.now()},S=Date.now()+1;s(R=>[...R,ne,{role:"assistant",content:"",items:null,loading:!0,id:S}]);try{let R=await fetch(`${e}/api/faq-ai-bot/ask`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:G,history:m.slice(-4).map(p=>({role:p.role,content:p.content}))}),signal:$.current.signal});if(!R.ok)throw new Error("Network response was not ok");let A=R.body?.getReader(),T=new TextDecoder;if(!A)throw new Error("No reader available");let L=[],q=!1,se=(async()=>{for(;!q||L.length>0;)if(L.length>0){let p=L.shift();if(p?.type==="text")if(n&&n>0)for(let c of p.content)s(b=>b.map(y=>y.id===S?{...y,content:y.content+c}:y)),await new Promise(b=>setTimeout(b,n));else s(c=>c.map(b=>b.id===S?{...b,content:b.content+p.content}:b));else if(p?.type==="card")try{let c=p.data;s(b=>b.map(y=>y.id===S?{...y,items:{items:c.items,schema:c.schema,collection:c.title,title:c.title,cardStyle:c.cardStyle}}:y))}catch(c){console.error("Error processing card data:",c)}}else await new Promise(p=>setTimeout(p,20));a(!1),s(p=>p.map(c=>c.id===S?{...c,loading:!1}:c))})(),Q="";for(;;){let{value:p,done:c}=await A.read();if(c)break;let b=T.decode(p,{stream:!0});Q+=b;let y=Q.split(`
|
|
2
2
|
|
|
3
|
-
`);
|
|
4
|
-
`),
|
|
5
|
-
`:"")+B}if(
|
|
3
|
+
`);Q=y.pop()||"";for(let de of y){let le=de.split(`
|
|
4
|
+
`),J="message",z="";for(let M of le)if(M.startsWith("event:"))J=M.slice(6).trim();else if(M.startsWith("data:")){let B=M.slice(5);if(B.startsWith(" ")&&(B=B.slice(1)),B.trim()==="[DONE]"||B.trim()==="[Done]")continue;z+=(z?`
|
|
5
|
+
`:"")+B}if(J==="cards"){let M=JSON.parse(z);L.push({type:"card",data:M})}else z&&L.push({type:"text",content:z})}}q=!0,await se}catch(R){R.name!=="AbortError"&&s(A=>A.map(T=>T.id===S?{...T,content:"I'm sorry, I'm having trouble connecting right now.",loading:!1}:T)),a(!1)}},strapiUrl:e,resolvedRegistry:te,input:f,setInput:g,isLoading:i,title:r,theming:o})]})},K=Ce;0&&(module.exports={ChatBot,ChatHeader,ChatInput,Chatbot,ICONS,MessageBubble,Suggestions});
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use client";import{useState as $,useEffect as re,useRef as oe}from"react";import{jsx as w,jsxs as ue}from"react/jsx-runtime";var x={MessageCircle:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"M12 8V4m8 4V4M4 8V4M2 11h20m-1 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11m5 5v2m8-2v2"})}),X:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"M18 6 6 18M6 6l12 12"})}),Sparkles:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"})}),Send:({size:e=24,className:t=""})=>ue("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[w("path",{d:"m22 2-7 20-4-9-9-4Z"}),w("path",{d:"M22 2 11 13"})]})};import{jsx as D,jsxs as fe}from"react/jsx-runtime";var ge=({isExpanded:e,onOpen:t,theming:r})=>D("div",{onClick:t,className:`chat-floating-btn ${e?"chat-btn-hidden":"chat-btn-visible"}`,children:D("div",{className:"chat-btn-border seamless-border",children:fe("div",{className:"chat-btn-inner",children:[D("div",{className:"chat-btn-gradient",style:{background:r?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary))"}}),D(x.MessageCircle,{size:30,className:"chat-btn-icon"})]})})}),J=ge;import{useEffect as be,useState as we}from"react";var L=(e,t)=>t?`${e} ${t}`:e;import{jsx as C,jsxs as X}from"react/jsx-runtime";var xe=({onClose:e,title:t,theming:r,strapiUrl:a})=>{let[o,i]=we(null);be(()=>{if(!a)return;(async()=>{try{let l=await(await fetch(`${a}/api/faq-ai-bot/suggestion-and-logo`)).json();l?.logoUrl&&i(`${a}${l.logoUrl}`)}catch(c){console.error("Failed to fetch logo",c)}})()},[a]);let h=L("chat-header",r?.header);return X("header",{className:h,style:r?.headerStyle,children:[X("div",{className:"chat-header-left",children:[o?C("img",{src:o,alt:"Bot Logo",className:"chat-header-logo"}):C("div",{className:"chat-header-logo-placeholder",children:C(x.Bot,{size:20,className:"chat-header-bot-icon"})}),C("div",{className:"chat-header-title-wrap",children:C("span",{className:"chat-header-title",children:t})})]}),C("div",{className:"chat-header-actions",children:C("button",{onClick:e,className:"chat-header-close-btn","aria-label":"Close chat",children:C(x.X,{size:20})})})]})},W=xe;import{useRef as ye,useEffect as ve}from"react";import{jsx as y,jsxs as _}from"react/jsx-runtime";var ke=({input:e,onInputChange:t,onSendMessage:r,isLoading:a,theming:o})=>{let i=o?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",s=ye(null),d=L("chat-input-container",o?.input);ve(()=>{a||s.current?.focus()},[a]);let c=l=>{l.key==="Enter"&&!l.nativeEvent.isComposing&&e.trim()&&!a&&r()};return y("div",{className:"chat-input-outer",children:_("div",{className:"chat-input-wrap",children:[y("div",{style:{background:i},className:"chat-input-glow-lg"}),y("div",{style:{background:i},className:"chat-input-glow-sm"}),y("div",{className:d,style:o?.inputStyle,children:_("div",{className:"chat-input-inner",children:[y("input",{ref:s,type:"text",className:"chat-input-field",placeholder:a?"AI is thinking...":"Ask anything...",value:e,onChange:l=>t(l.target.value),onKeyDown:c,disabled:a,"aria-label":"User message"}),y("div",{className:"chat-input-send-wrap",children:y("button",{onClick:r,disabled:a||!e.trim(),style:{background:i},className:"chat-input-send-btn","aria-label":"Send message",children:a?y("div",{className:"chat-input-spinner"}):y(x.Send,{className:"chat-input-send-icon"})})})]})})]})})},A=ke;import{jsx as v,jsxs as ee}from"react/jsx-runtime";var Ce=({message:e,cardRegistry:t,themeStyles:r,theming:a})=>{let o=s=>{let h=s?.__collectionUid?.split(".").pop()?.toLowerCase();return t.find(d=>d.id===h)||t.find(d=>d.id==="default")},i=e.record?o(e.record)?.component:null;if(e.items?.items?.length){let s=e.items.cardStyle?.toLowerCase()||e.items.collection?.toLowerCase()||e.items.title?.toLowerCase(),d=t.find(c=>c.id===s)?.component;return ee("div",{className:"mb-card-container",children:[e.content&&v("div",{className:"mb-card-content",children:e.content}),d&&e.items.items.map((c,l)=>v(d,{items:c,style:r},l))]})}return v("div",{className:`mb-row ${e.role==="user"?"mb-row-user":"mb-row-assistant"}`,children:i&&e.record?v("div",{className:"mb-card-wrapper",children:v(i,{record:e.record,style:r})}):v("div",{style:e.role==="user"?{background:a?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))"}:{},className:`mb-bubble ${e.role==="user"?"mb-bubble-user":"mb-bubble-assistant"}`,children:e.loading&&!e.content?ee("div",{className:"mb-typing",children:[v("span",{className:"mb-dot mb-dot-1"}),v("span",{className:"mb-dot mb-dot-2"}),v("span",{className:"mb-dot mb-dot-3"})]}):e.content})})},U=Ce;import{useState as F,useEffect as Ne}from"react";import{jsx as g,jsxs as Q}from"react/jsx-runtime";var Ie=({strapiUrl:e,onSelectQuestion:t,variant:r,theming:a})=>{let[o,i]=F([]),[s,h]=F(!0),[d,c]=F(!1);Ne(()=>{let n=new AbortController;return h(!0),fetch(`${e}/api/faq-ai-bot/suggestion-and-logo`,{signal:n.signal}).then(m=>m.json()).then(m=>{i(m.suggestedQuestions||[]),h(!1)}).catch(m=>{m.name!=="AbortError"&&(console.error("Suggestions fetch failed",m),h(!1))}),()=>n.abort()},[e]);let l=()=>r==="floating"?Q("div",{className:"sug-skeleton-float",children:[[1,2].map(n=>g("div",{className:"sug-skeleton-item",style:{backgroundColor:a?.primaryColor?`${a.primaryColor}`:"hsla(178, 100%, 51%, 0.05)",transform:n%2===0?"rotate(1deg)":"rotate(-1deg)"}},n)),g("div",{className:"sug-skeleton-more"})]}):g("div",{className:"sug-skeleton-list",children:[1,2,3].map(n=>g("div",{className:"sug-skeleton-chip"},n))});if(s&&o.length===0)return g(l,{});if(r==="floating"){let n=d?o:o.slice(0,2),m=!d&&o.length>2;return Q("div",{className:"sug-float-wrap",children:[n.map((k,B)=>{let O=B%2===0?"rotate(-1deg)":"rotate(1deg)";return g("button",{onClick:()=>t(k),className:"sug-float-btn",style:{borderColor:a?.primaryColor||"var(--cb-primary)",transform:O,animationDelay:`${B*.1}s`},children:g("span",{className:"sug-float-text",children:k})},`float-${B}-${k}`)}),m&&g("button",{onClick:()=>c(!0),"aria-label":"Show more suggestions",title:"Show more suggestions",className:"sug-more-btn",style:{animationDelay:`${n.length*.1}s`},children:Q("div",{className:"sug-more-dots",style:{color:a?.secondaryColor||"var(--cb-secondary)"},children:[g("span",{}),g("span",{}),g("span",{})]})})]})}return g("div",{className:"sug-list-wrap",children:o.map((n,m)=>g("button",{onClick:()=>t(n),className:"sug-list-btn",style:{animationDelay:`${m*.05}s`},children:n},`list-${m}-${n}`))})},G=Ie;import{jsx as N,jsxs as V}from"react/jsx-runtime";var Me=({messages:e,scrollRef:t,sendMessage:r,strapiUrl:a,resolvedRegistry:o,theming:i})=>{let s=i?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",h=i?.welcomeMessage||"How can I help you?",d=i?.welcomeDescription||"Select a common question below or type your own.";return V("div",{ref:t,className:"chat-messages-container",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:[e.length===0&&V("div",{className:"chat-welcome",children:[N("div",{className:"chat-welcome-icon",style:{background:s},children:N(x.MessageCircle,{size:40})}),V("div",{children:[N("h3",{className:"chat-welcome-title",children:h}),N("p",{className:"chat-welcome-subtitle",children:d})]}),N("div",{className:"chat-welcome-suggestions",children:N(G,{onSelectQuestion:r,strapiUrl:a,variant:"floating",theming:i})})]}),e.map(c=>N(U,{message:c,cardRegistry:o,theming:i},c.id))]})},te=Me;import{jsx as E,jsxs as q}from"react/jsx-runtime";var Re=({isExpanded:e,setIsExpanded:t,messages:r,scrollRef:a,sendMessage:o,strapiUrl:i,resolvedRegistry:s,input:h,setInput:d,isLoading:c,title:l,theming:n})=>{let m=L(`chat-window ${e?"chat-window-open":"chat-window-closed"}`,n?.container);return q("div",{className:m,style:n?.containerStyle,children:[E("div",{className:"chat-window-header",children:E(W,{title:l,onClose:()=>t(!1),theming:n,strapiUrl:i})}),E(te,{messages:r,scrollRef:a,sendMessage:o,strapiUrl:i,resolvedRegistry:s,theming:n}),q("div",{className:"chat-window-footer",children:[E(A,{input:h,onInputChange:d,onSendMessage:o,isLoading:c,theming:n}),E("div",{className:"chat-window-powered",children:q("span",{className:"chat-powered-text",children:["Powered by"," ",E("a",{href:"https://numentica-ui.com",className:"chat-powered-link",children:"Numentica-UI"})]})})]})]})},ae=Re;import{jsx as ne,jsxs as Le}from"react/jsx-runtime";var Se=({strapiUrl:e,cardRegistry:t,theme:r,title:a,streamSpeed:o})=>{let[i,s]=$([]),[h,d]=$(""),[c,l]=$(!1),[n,m]=$(!1),k=oe(null),[B,O]=$([]),se=oe(null),de={"--cb-primary":r?.primaryColor||"#2999d6","--cb-secondary":r?.secondaryColor||"#179fa3","--cb-accent":r?.accentColor||"#07a372"};return re(()=>{t.length>0&&O(t)},[t]),re(()=>()=>k.current?.abort(),[]),Le("div",{className:"chatbot-container",style:de,children:[ne(J,{isExpanded:n,onOpen:()=>m(!0),theming:r}),ne(ae,{isExpanded:n,setIsExpanded:m,messages:i,scrollRef:se,sendMessage:async ce=>{let H=ce||h;if(!H.trim())return;k.current?.abort(),k.current=new AbortController,m(!0),d(""),l(!0);let le={role:"user",content:H,id:Date.now()},I=Date.now()+1;s(M=>[...M,le,{role:"assistant",content:"",items:null,loading:!0,id:I}]);try{let M=await fetch(`${e}/api/faq-ai-bot/ask`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:H,history:i.slice(-4).map(u=>({role:u.role,content:u.content}))}),signal:k.current.signal});if(!M.ok)throw new Error("Network response was not ok");let j=M.body?.getReader(),T=new TextDecoder;if(!j)throw new Error("No reader available");let z=[],K=!1,me=(async()=>{for(;!K||z.length>0;)if(z.length>0){let u=z.shift();if(u?.type==="text")if(o&&o>0)for(let p of u.content)s(f=>f.map(b=>b.id===I?{...b,content:b.content+p}:b)),await new Promise(f=>setTimeout(f,o));else s(p=>p.map(f=>f.id===I?{...f,content:f.content+u.content}:f));else if(u?.type==="card")try{let p=u.data;s(f=>f.map(b=>b.id===I?{...b,items:{items:p.items,schema:p.schema,collection:p.title,title:p.title,cardStyle:p.cardStyle}}:b))}catch(p){console.error("Error processing card data:",p)}}else await new Promise(u=>setTimeout(u,20));l(!1),s(u=>u.map(p=>p.id===I?{...p,loading:!1}:p))})(),Y="";for(;;){let{value:u,done:p}=await j.read();if(p)break;let f=T.decode(u,{stream:!0});Y+=f;let b=Y.split(`
|
|
1
|
+
"use client";import{useState as P,useEffect as _,useRef as ee}from"react";import{jsx as $,jsxs as he}from"react/jsx-runtime";var pe=({isExpanded:e,onOpen:t,theming:n})=>$("div",{onClick:t,className:`chat-floating-btn ${e?"chat-btn-hidden":"chat-btn-visible"}`,children:$("div",{className:"chat-btn-border seamless-border",children:he("div",{className:"chat-btn-inner",children:[$("div",{className:"chat-btn-gradient",style:{background:n?.showGradient===!1?"var(--cb-primary)":"linear-gradient(135deg, var(--cb-primary)0%, var(--cb-secondary)100%)"}}),$("img",{src:"assert/Sparkles.svg",alt:"style icon",width:30,height:30,className:"chat-btn-icon"})]})})}),K=pe;import{useEffect as ge,useState as ue}from"react";import{jsx as w,jsxs as fe}from"react/jsx-runtime";var A={MessageCircle:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"M12 8V4m8 4V4M4 8V4M2 11h20m-1 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11m5 5v2m8-2v2"})}),X:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"M18 6 6 18M6 6l12 12"})}),Send:({size:e=24,className:t=""})=>fe("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[w("path",{d:"m22 2-7 20-4-9-9-4Z"}),w("path",{d:"M22 2 11 13"})]})};var M=(e,t)=>t?`${e} ${t}`:e;import{jsx as k,jsxs as L}from"react/jsx-runtime";var be=({onClose:e,title:t,theming:n,strapiUrl:r})=>{let[s,c]=ue(null);ge(()=>{if(!r)return;(async()=>{try{let a=await(await fetch(`${r}/api/faq-ai-bot/suggestion-and-logo`)).json();a?.logoUrl&&c(`${r}${a.logoUrl}`)}catch(o){console.error("Failed to fetch logo",o)}})()},[r]);let p=M("chat-header",n?.header);return L("header",{className:p,style:n?.headerStyle,children:[L("div",{className:"chat-header-left",children:[k("div",{className:"chat-header-logo-placeholder",children:"A"}),L("div",{className:"chat-header-title-wrap",children:[L("div",{className:"chat-header-title-row",children:[k("span",{className:"chat-header-title",children:"Aria"}),k("span",{className:"chat-header-badge",children:t||"Assistant"})]}),L("span",{className:"chat-header-status",children:[k("span",{className:"chat-header-status-dot"}),"Online \xB7 usually replies instantly"]})]})]}),k("div",{className:"chat-header-actions",children:k("button",{onClick:e,className:"chat-header-close-btn","aria-label":"Close chat",children:k(A.X,{size:20})})})]})},O=be;import{useRef as we,useEffect as xe}from"react";import{jsx as x,jsxs as ve}from"react/jsx-runtime";var ye=({input:e,onInputChange:t,onSendMessage:n,isLoading:r,theming:s})=>{let c=s?.showGradient===!1?"var(--cb-primary)":"linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-secondary) 100%)",i=we(null),h=M("chat-input-container",s?.input);xe(()=>{r||i.current?.focus()},[r]);let o=d=>{d.key==="Enter"&&!d.nativeEvent.isComposing&&a()},a=()=>{e.trim()&&!r&&n()};return x("div",{className:"chat-input-outer",children:x("div",{className:"chat-input-wrap",children:ve("div",{className:"chat-input-row",children:[x("div",{className:h,style:{...s?.inputStyle,borderRadius:"9999px"},children:x("div",{className:"chat-input-inner",children:x("input",{ref:i,type:"text",className:"chat-input-field",placeholder:r?"AI is thinking...":"Type a message...",value:e,onChange:d=>t(d.target.value),onKeyDown:o,disabled:r,"aria-label":"User message"})})}),x("button",{onClick:a,disabled:r||!e.trim(),style:{background:c},className:"chat-input-send-btn","aria-label":"Send message",children:r?x("div",{className:"chat-input-spinner"}):x(A.Send,{className:"chat-input-send-icon"})})]})})})},W=ye;import{useEffect as Ce}from"react";import{jsx as u,jsxs as C}from"react/jsx-runtime";var ke=({message:e,cardRegistry:t,themeStyles:n,theming:r})=>{let s=new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",hour12:!0}).toLowerCase(),c=h=>{let o=h?.__collectionUid?.split(".").pop()?.toLowerCase();return t.find(a=>a.id===o)||t.find(a=>a.id==="default")},i=e.record?c(e.record)?.component:null,p={background:r?.showGradient===!1?"#3B82F6":"linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%)"};if(e.items?.items?.length){let h=e.items.cardStyle?.toLowerCase()||e.items.collection?.toLowerCase()||e.items.title?.toLowerCase(),a=t.find(d=>d.id===h)?.component;return C("div",{className:"mb-card-container",children:[e.content&&u("div",{className:"mb-card-content",children:e.content}),a&&e.items.items.map((d,v)=>u(a,{items:d,style:n},v))]})}return C("div",{className:`mb-row ${e.role==="user"?"mb-row-user":"mb-row-assistant"}`,children:[i&&e.record?u("div",{className:"mb-card-wrapper",children:u(i,{record:e.record,style:n})}):u("div",{style:e.role==="user"?{...p,...r?.userBubbleStyle}:{},className:`mb-bubble ${e.role==="user"?"mb-bubble-user":"mb-bubble-assistant"}`,children:e.loading&&!e.content?C("div",{className:"mb-typing",children:[u("span",{className:"mb-dot mb-dot-1"}),u("span",{className:"mb-dot mb-dot-2"}),u("span",{className:"mb-dot mb-dot-3"})]}):e.content}),e.role==="assistant"&&!i&&C("div",{className:"mb-assistant-meta",children:[u("span",{className:"mb-assistant-avatar",style:{background:r?.showGradient===!1?"#3B82F6":"linear-gradient(135deg, var(--cb-primary), var(--cb-secondary))"},children:"A"}),C("span",{className:"mb-assistant-time",children:[s," "]})]}),e.role==="user"&&!i&&C("div",{className:"mb-user-meta",children:[C("span",{className:"mb-user-time",children:[s," "]}),u("span",{className:"mb-user-tick","aria-label":"Delivered",children:"\u2713\u2713"})]})]})},Y=ke;import{jsx as z,jsxs as U}from"react/jsx-runtime";var Ne=({messages:e,scrollRef:t,resolvedRegistry:n,theming:r})=>{let s=r?.welcomeDescription||"Hi! I'm Aria, your Harbour Air travel assistant. I'm here to help you book flights, check fees, understand baggage rules, and anything else you need.",c=new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",hour12:!0}).toLowerCase();return Ce(()=>{let i=t.current;i&&i.scrollTo({top:i.scrollHeight,behavior:"auto"})},[e,t]),U("div",{ref:t,className:"chat-messages-container",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:[e.length===0&&z("div",{className:"chat-welcome",children:U("div",{className:"chat-welcome-message",children:[z("p",{className:"chat-welcome-subtitle",children:s}),U("div",{className:"chat-welcome-meta",children:[z("span",{className:"chat-welcome-avatar",style:{background:r?.showGradient===!1?"#3B82F6":"linear-gradient(135deg, var(--cb-primary), var(--cb-secondary))"},children:"A"}),z("span",{className:"chat-welcome-time",children:c})]})]})}),e.map(i=>z(Y,{message:i,cardRegistry:n,theming:r},i.id))]})},q=Ne;import{useState as J,useEffect as Ie}from"react";import{jsx as b,jsxs as Re}from"react/jsx-runtime";var Se=({strapiUrl:e,onSelectQuestion:t,variant:n,theming:r})=>{let[s,c]=J([]),[i,p]=J(!0);Ie(()=>{let o=new AbortController;return p(!0),fetch(`${e}/api/faq-ai-bot/suggestion-and-logo`,{signal:o.signal}).then(a=>a.json()).then(a=>{c(a.suggestedQuestions||[]),p(!1)}).catch(a=>{a.name!=="AbortError"&&(console.error("Suggestions fetch failed",a),p(!1))}),()=>o.abort()},[e]);let h=()=>n==="floating"?Re("div",{className:"sug-skeleton-float",children:[[1,2].map(o=>b("div",{className:"sug-skeleton-item",style:{backgroundColor:r?.primaryColor?`${r.primaryColor}`:"hsla(178, 100%, 51%, 0.05)",transform:o%2===0?"rotate(1deg)":"rotate(-1deg)"}},o)),b("div",{className:"sug-skeleton-more"})]}):b("div",{className:"sug-skeleton-list",children:[1,2,3].map(o=>b("div",{className:"sug-skeleton-chip"},o))});return i&&s.length===0?b(h,{}):n==="floating"?b("div",{className:"sug-float-wrap",children:s.map((o,a)=>b("button",{onClick:()=>t(o),className:"sug-float-btn",style:{borderColor:"#bfdbfe",animationDelay:`${a*.1}s`},children:b("span",{className:"sug-float-text",children:o})},`float-${a}-${o}`))}):b("div",{className:"sug-list-wrap",children:s.map((o,a)=>b("button",{onClick:()=>t(o),className:"sug-list-btn",style:{animationDelay:`${a*.05}s`},children:o},`list-${a}-${o}`))})},G=Se;import{jsx as y,jsxs as X}from"react/jsx-runtime";var Me=({isExpanded:e,setIsExpanded:t,messages:n,scrollRef:r,sendMessage:s,strapiUrl:c,resolvedRegistry:i,input:p,setInput:h,isLoading:o,title:a,theming:d})=>{let v=M(`chat-window ${e?"chat-window-open":"chat-window-closed"}`,d?.container);return X("div",{className:v,style:d?.containerStyle,children:[y("div",{className:"chat-window-header",children:y(O,{title:a,onClose:()=>t(!1),theming:d,strapiUrl:c})}),y(q,{messages:n,scrollRef:r,resolvedRegistry:i,theming:d}),X("div",{className:"chat-window-footer",children:[y("div",{className:"chat-window-suggestions",children:y(G,{onSelectQuestion:s,strapiUrl:c,variant:"floating",theming:d})}),y(W,{input:p,onInputChange:h,onSendMessage:s,isLoading:o,theming:d}),y("div",{className:"chat-window-powered",children:y("span",{className:"chat-powered-text",children:"Talk to a human \xB7 Privacy policy"})})]})]})},Z=Me;import{jsx as te,jsxs as Ee}from"react/jsx-runtime";var Be=({strapiUrl:e,cardRegistry:t,theme:n,title:r,streamSpeed:s})=>{let[c,i]=P([]),[p,h]=P(""),[o,a]=P(!1),[d,v]=P(!1),D=ee(null),[re,oe]=P([]),ie=ee(null),ne={"--cb-primary":n?.primaryColor||"#2999d6","--cb-secondary":n?.secondaryColor||"#179fa3","--cb-accent":n?.accentColor||n?.secondaryColor||"#179fa3"};return _(()=>{t.length>0&&oe(t)},[t]),_(()=>()=>D.current?.abort(),[]),Ee("div",{className:"chatbot-container",style:ne,children:[te(K,{isExpanded:d,onOpen:()=>v(!0),theming:n}),te(Z,{isExpanded:d,setIsExpanded:v,messages:c,scrollRef:ie,sendMessage:async se=>{let j=se||p;if(!j.trim())return;D.current?.abort(),D.current=new AbortController,v(!0),h(""),a(!0);let de={role:"user",content:j,id:Date.now()},N=Date.now()+1;i(I=>[...I,de,{role:"assistant",content:"",items:null,loading:!0,id:N}]);try{let I=await fetch(`${e}/api/faq-ai-bot/ask`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:j,history:c.slice(-4).map(m=>({role:m.role,content:m.content}))}),signal:D.current.signal});if(!I.ok)throw new Error("Network response was not ok");let F=I.body?.getReader(),B=new TextDecoder;if(!F)throw new Error("No reader available");let E=[],Q=!1,le=(async()=>{for(;!Q||E.length>0;)if(E.length>0){let m=E.shift();if(m?.type==="text")if(s&&s>0)for(let l of m.content)i(f=>f.map(g=>g.id===N?{...g,content:g.content+l}:g)),await new Promise(f=>setTimeout(f,s));else i(l=>l.map(f=>f.id===N?{...f,content:f.content+m.content}:f));else if(m?.type==="card")try{let l=m.data;i(f=>f.map(g=>g.id===N?{...g,items:{items:l.items,schema:l.schema,collection:l.title,title:l.title,cardStyle:l.cardStyle}}:g))}catch(l){console.error("Error processing card data:",l)}}else await new Promise(m=>setTimeout(m,20));a(!1),i(m=>m.map(l=>l.id===N?{...l,loading:!1}:l))})(),H="";for(;;){let{value:m,done:l}=await F.read();if(l)break;let f=B.decode(m,{stream:!0});H+=f;let g=H.split(`
|
|
2
2
|
|
|
3
|
-
`);
|
|
4
|
-
`),
|
|
5
|
-
`:"")+
|
|
3
|
+
`);H=g.pop()||"";for(let ce of g){let me=ce.split(`
|
|
4
|
+
`),V="message",T="";for(let S of me)if(S.startsWith("event:"))V=S.slice(6).trim();else if(S.startsWith("data:")){let R=S.slice(5);if(R.startsWith(" ")&&(R=R.slice(1)),R.trim()==="[DONE]"||R.trim()==="[Done]")continue;T+=(T?`
|
|
5
|
+
`:"")+R}if(V==="cards"){let S=JSON.parse(T);E.push({type:"card",data:S})}else T&&E.push({type:"text",content:T})}}Q=!0,await le}catch(I){I.name!=="AbortError"&&i(F=>F.map(B=>B.id===N?{...B,content:"I'm sorry, I'm having trouble connecting right now.",loading:!1}:B)),a(!1)}},strapiUrl:e,resolvedRegistry:re,input:p,setInput:h,isLoading:o,title:r,theming:n})]})},ae=Be;export{ae as ChatBot,O as ChatHeader,W as ChatInput,ae as Chatbot,A as ICONS,Y as MessageBubble,G as Suggestions};
|