nui-chatbot-pkg 1.0.19 → 1.0.20
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.d.mts +4 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -4
- package/dist/index.mjs +3 -3
- package/package.json +1 -1
- package/dist/Sparkles-S7ERSS5C.svg +0 -14
package/dist/index.d.mts
CHANGED
|
@@ -129,6 +129,10 @@ declare const ICONS: {
|
|
|
129
129
|
size?: number | undefined;
|
|
130
130
|
className?: string | undefined;
|
|
131
131
|
}) => react_jsx_runtime.JSX.Element;
|
|
132
|
+
Sparkles: ({ size, className }: {
|
|
133
|
+
size?: number | undefined;
|
|
134
|
+
className?: string | undefined;
|
|
135
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
132
136
|
};
|
|
133
137
|
|
|
134
138
|
export { type ApiResponse, type CardRegistryItem, ChatBot, type ChatBotProps, ChatHeader, ChatInput, type ChatInputProps, type ChatTheme, type ChatTheming, ChatBot as Chatbot, type CollectionRecord, type CustomRecord, type Deal, type EmployeeRecord, ICONS, type Message, MessageBubble, type MessageBubbleProps, Suggestions, type SuggestionsProps, type TourRecord };
|
package/dist/index.d.ts
CHANGED
|
@@ -129,6 +129,10 @@ declare const ICONS: {
|
|
|
129
129
|
size?: number | undefined;
|
|
130
130
|
className?: string | undefined;
|
|
131
131
|
}) => react_jsx_runtime.JSX.Element;
|
|
132
|
+
Sparkles: ({ size, className }: {
|
|
133
|
+
size?: number | undefined;
|
|
134
|
+
className?: string | undefined;
|
|
135
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
132
136
|
};
|
|
133
137
|
|
|
134
138
|
export { type ApiResponse, type CardRegistryItem, ChatBot, type ChatBotProps, ChatHeader, ChatInput, type ChatInputProps, type ChatTheme, type ChatTheming, ChatBot as Chatbot, type CollectionRecord, type CustomRecord, type Deal, type EmployeeRecord, ICONS, type Message, MessageBubble, type MessageBubbleProps, Suggestions, type SuggestionsProps, type TourRecord };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";"use client";var G=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var he=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var o in t)G(e,o,{get:t[o],enumerable:!0})},ge=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of pe(t))!he.call(e,n)&&n!==o&&G(e,n,{get:()=>t[n],enumerable:!(r=me(t,n))||r.enumerable});return e};var ue=e=>ge(G({},"__esModule",{value:!0}),e);var Me={};fe(Me,{ChatBot:()=>Q,ChatHeader:()=>H,ChatInput:()=>W,Chatbot:()=>Q,ICONS:()=>P,MessageBubble:()=>Y,Suggestions:()=>U});module.exports=ue(Me);var x=require("react");var q="./Sparkles-S7ERSS5C.svg";var I=require("react/jsx-runtime"),we=({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:q,alt:"style icon",width:30,height:30,className:"chat-btn-icon"})]})})}),J=we;var A=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 B=(e,t)=>t?`${e} ${t}`:e;var h=require("react/jsx-runtime"),xe=({onClose:e,title:t,theming:o,strapiUrl:r})=>{let[n,m]=(0,A.useState)(null);(0,A.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=B("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=xe;var O=require("react");var k=require("react/jsx-runtime"),ye=({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=B("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=ye;var X=require("react");var d=require("react/jsx-runtime"),ve=({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=ve;var C=require("react/jsx-runtime"),ke=({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,X.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))]})},ee=ke;var j=require("react");var u=require("react/jsx-runtime"),Ce=({strapiUrl:e,onSelectQuestion:t,variant:o,theming:r})=>{let[n,m]=(0,j.useState)([]),[s,f]=(0,j.useState)(!0);(0,j.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=Ce;var w=require("react/jsx-runtime"),Ne=({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=B(`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)(ee,{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"})})]})]})},te=Ne;var D=require("react/jsx-runtime"),Ie=({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),F=(0,x.useRef)(null),[ae,re]=(0,x.useState)([]),oe=(0,x.useRef)(null),ie={"--cb-primary":o?.primaryColor||"#2999d6","--cb-secondary":o?.secondaryColor||"#179fa3","--cb-accent":o?.accentColor||o?.secondaryColor||"#179fa3"};return(0,x.useEffect)(()=>{t.length>0&&re(t)},[t]),(0,x.useEffect)(()=>()=>F.current?.abort(),[]),(0,D.jsxs)("div",{className:"chatbot-container",style:ie,children:[(0,D.jsx)(J,{isExpanded:l,onOpen:()=>N(!0),theming:o}),(0,D.jsx)(te,{isExpanded:l,setIsExpanded:N,messages:m,scrollRef:oe,sendMessage:async ne=>{let V=ne||f;if(!V.trim())return;F.current?.abort(),F.current=new AbortController,N(!0),g(""),a(!0);let se={role:"user",content:V,id:Date.now()},M=Date.now()+1;s(S=>[...S,se,{role:"assistant",content:"",items:null,loading:!0,id:M}]);try{let S=await fetch(`${e}/api/faq-ai-bot/ask`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:V,history:m.slice(-4).map(p=>({role:p.role,content:p.content}))}),signal:F.current.signal});if(!S.ok)throw new Error("Network response was not ok");let $=S.body?.getReader(),E=new TextDecoder;if(!$)throw new Error("No reader available");let T=[],K=!1,de=(async()=>{for(;!K||T.length>0;)if(T.length>0){let p=T.shift();if(p?.type==="text")if(n&&n>0)for(let c of p.content)s(b=>b.map(y=>y.id===M?{...y,content:y.content+c}:y)),await new Promise(b=>setTimeout(b,n));else s(c=>c.map(b=>b.id===M?{...b,content:b.content+p.content}:b));else if(p?.type==="card")try{let c=p.data;s(b=>b.map(y=>y.id===M?{...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===M?{...c,loading:!1}:c))})(),_="";for(;;){let{value:p,done:c}=await $.read();if(c)break;let b=E.decode(p,{stream:!0});_+=b;let y=_.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:()=>I,MessageBubble:()=>Y,Suggestions:()=>U});module.exports=ge(Ne);var y=require("react");var p=require("react/jsx-runtime"),I={MessageCircle:({size:e=24,className:t=""})=>(0,p.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,p.jsx)("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>(0,p.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,p.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,p.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,p.jsx)("path",{d:"M18 6 6 18M6 6l12 12"})}),Send:({size:e=24,className:t=""})=>(0,p.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,p.jsx)("path",{d:"m22 2-7 20-4-9-9-4Z"}),(0,p.jsx)("path",{d:"M22 2 11 13"})]}),Sparkles:({size:e=24,className:t=""})=>(0,p.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,p.jsx)("path",{d:"M12 2l1.8 4.6L18 8l-4.2 1.4L12 14l-1.8-4.6L6 8l4.2-1.4L12 2z"}),(0,p.jsx)("path",{d:"M5 16l.9 2.3L8 19l-2.1.7L5 22l-.9-2.3L2 19l2.1-.7L5 16z"}),(0,p.jsx)("path",{d:"M19 14l.9 2.3L22 17l-2.1.7L19 20l-.9-2.3L16 17l2.1-.7L19 14z"})]})};var S=require("react/jsx-runtime"),ue=({isExpanded:e,onOpen:t,theming:o})=>(0,S.jsx)("div",{onClick:t,className:`chat-floating-btn ${e?"chat-btn-hidden":"chat-btn-visible"}`,children:(0,S.jsx)("div",{className:"chat-btn-border seamless-border",children:(0,S.jsxs)("div",{className:"chat-btn-inner",children:[(0,S.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,S.jsx)(I.Sparkles,{size:30,className:"chat-btn-icon"})]})})}),X=ue;var j=require("react");var E=(e,t)=>t?`${e} ${t}`:e;var f=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 g=E("chat-header",o?.header);return(0,f.jsxs)("header",{className:g,style:o?.headerStyle,children:[(0,f.jsxs)("div",{className:"chat-header-left",children:[(0,f.jsx)("div",{className:"chat-header-logo-placeholder",children:"A"}),(0,f.jsxs)("div",{className:"chat-header-title-wrap",children:[(0,f.jsxs)("div",{className:"chat-header-title-row",children:[(0,f.jsx)("span",{className:"chat-header-title",children:"Aria"}),(0,f.jsx)("span",{className:"chat-header-badge",children:t||"Assistant"})]}),(0,f.jsxs)("span",{className:"chat-header-status",children:[(0,f.jsx)("span",{className:"chat-header-status-dot"}),"Online \xB7 usually replies instantly"]})]})]}),(0,f.jsx)("div",{className:"chat-header-actions",children:(0,f.jsx)("button",{onClick:e,className:"chat-header-close-btn","aria-label":"Close chat",children:(0,f.jsx)(I.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),u=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:u,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)(I.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=u=>{let i=u?.__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,g={background:r?.showGradient===!1?"#3B82F6":"linear-gradient(135deg, #1D4ED8 0%, #3B82F6 100%)"};if(e.items?.items?.length){let u=e.items.cardStyle?.toLowerCase()||e.items.collection?.toLowerCase()||e.items.title?.toLowerCase(),a=t.find(l=>l.id===u)?.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"?{...g,...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 b=require("react/jsx-runtime"),ve=({strapiUrl:e,onSelectQuestion:t,variant:o,theming:r})=>{let[n,m]=(0,D.useState)([]),[s,g]=(0,D.useState)(!0);(0,D.useEffect)(()=>{let i=new AbortController;return g(!0),fetch(`${e}/api/faq-ai-bot/suggestion-and-logo`,{signal:i.signal}).then(a=>a.json()).then(a=>{m(a.suggestedQuestions||[]),g(!1)}).catch(a=>{a.name!=="AbortError"&&(console.error("Suggestions fetch failed",a),g(!1))}),()=>i.abort()},[e]);let u=()=>o==="floating"?(0,b.jsxs)("div",{className:"sug-skeleton-float",children:[[1,2].map(i=>(0,b.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,b.jsx)("div",{className:"sug-skeleton-more"})]}):(0,b.jsx)("div",{className:"sug-skeleton-list",children:[1,2,3].map(i=>(0,b.jsx)("div",{className:"sug-skeleton-chip"},i))});return s&&n.length===0?(0,b.jsx)(u,{}):o==="floating"?(0,b.jsx)("div",{className:"sug-float-wrap",children:n.map((i,a)=>(0,b.jsx)("button",{onClick:()=>t(i),className:"sug-float-btn",style:{borderColor:"#bfdbfe",animationDelay:`${a*.1}s`},children:(0,b.jsx)("span",{className:"sug-float-text",children:i})},`float-${a}-${i}`))}):(0,b.jsx)("div",{className:"sug-list-wrap",children:n.map((i,a)=>(0,b.jsx)("button",{onClick:()=>t(i),className:"sug-list-btn",style:{animationDelay:`${a*.05}s`},children:i},`list-${a}-${i}`))})},U=ve;var x=require("react/jsx-runtime"),ke=({isExpanded:e,setIsExpanded:t,messages:o,scrollRef:r,sendMessage:n,strapiUrl:m,resolvedRegistry:s,input:g,setInput:u,isLoading:i,title:a,theming:l})=>{let N=E(`chat-window ${e?"chat-window-open":"chat-window-closed"}`,l?.container);return(0,x.jsxs)("div",{className:N,style:l?.containerStyle,children:[(0,x.jsx)("div",{className:"chat-window-header",children:(0,x.jsx)(H,{title:a,onClose:()=>t(!1),theming:l,strapiUrl:m})}),(0,x.jsx)(_,{messages:o,scrollRef:r,resolvedRegistry:s,theming:l}),(0,x.jsxs)("div",{className:"chat-window-footer",children:[(0,x.jsx)("div",{className:"chat-window-suggestions",children:(0,x.jsx)(U,{onSelectQuestion:n,strapiUrl:m,variant:"floating",theming:l})}),(0,x.jsx)(W,{input:g,onInputChange:u,onSendMessage:n,isLoading:i,theming:l}),(0,x.jsx)("div",{className:"chat-window-powered",children:(0,x.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,y.useState)([]),[g,u]=(0,y.useState)(""),[i,a]=(0,y.useState)(!1),[l,N]=(0,y.useState)(!1),$=(0,y.useRef)(null),[te,ae]=(0,y.useState)([]),re=(0,y.useRef)(null),oe={"--cb-primary":o?.primaryColor||"#2999d6","--cb-secondary":o?.secondaryColor||"#179fa3","--cb-accent":o?.accentColor||o?.secondaryColor||"#179fa3"};return(0,y.useEffect)(()=>{t.length>0&&ae(t)},[t]),(0,y.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||g;if(!G.trim())return;$.current?.abort(),$.current=new AbortController,N(!0),u(""),a(!0);let ne={role:"user",content:G,id:Date.now()},L=Date.now()+1;s(M=>[...M,ne,{role:"assistant",content:"",items:null,loading:!0,id:L}]);try{let M=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(h=>({role:h.role,content:h.content}))}),signal:$.current.signal});if(!M.ok)throw new Error("Network response was not ok");let A=M.body?.getReader(),z=new TextDecoder;if(!A)throw new Error("No reader available");let T=[],q=!1,se=(async()=>{for(;!q||T.length>0;)if(T.length>0){let h=T.shift();if(h?.type==="text")if(n&&n>0)for(let c of h.content)s(w=>w.map(v=>v.id===L?{...v,content:v.content+c}:v)),await new Promise(w=>setTimeout(w,n));else s(c=>c.map(w=>w.id===L?{...w,content:w.content+h.content}:w));else if(h?.type==="card")try{let c=h.data;s(w=>w.map(v=>v.id===L?{...v,items:{items:c.items,schema:c.schema,collection:c.title,title:c.title,cardStyle:c.cardStyle}}:v))}catch(c){console.error("Error processing card data:",c)}}else await new Promise(h=>setTimeout(h,20));a(!1),s(h=>h.map(c=>c.id===L?{...c,loading:!1}:c))})(),Q="";for(;;){let{value:h,done:c}=await A.read();if(c)break;let w=z.decode(h,{stream:!0});Q+=w;let v=Q.split(`
|
|
2
2
|
|
|
3
|
-
`);
|
|
4
|
-
`),
|
|
5
|
-
`:"")+
|
|
3
|
+
`);Q=v.pop()||"";for(let de of v){let le=de.split(`
|
|
4
|
+
`),J="message",P="";for(let R of le)if(R.startsWith("event:"))J=R.slice(6).trim();else if(R.startsWith("data:")){let B=R.slice(5);if(B.startsWith(" ")&&(B=B.slice(1)),B.trim()==="[DONE]"||B.trim()==="[Done]")continue;P+=(P?`
|
|
5
|
+
`:"")+B}if(J==="cards"){let R=JSON.parse(P);T.push({type:"card",data:R})}else P&&T.push({type:"text",content:P})}}q=!0,await se}catch(M){M.name!=="AbortError"&&s(A=>A.map(z=>z.id===L?{...z,content:"I'm sorry, I'm having trouble connecting right now.",loading:!1}:z)),a(!1)}},strapiUrl:e,resolvedRegistry:te,input:g,setInput:u,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 P,useEffect as ee,useRef as te}from"react";var Q="./Sparkles-S7ERSS5C.svg";import{jsx as F,jsxs as ge}from"react/jsx-runtime";var fe=({isExpanded:e,onOpen:t,theming:n})=>F("div",{onClick:t,className:`chat-floating-btn ${e?"chat-btn-hidden":"chat-btn-visible"}`,children:F("div",{className:"chat-btn-border seamless-border",children:ge("div",{className:"chat-btn-inner",children:[F("div",{className:"chat-btn-gradient",style:{background:n?.showGradient===!1?"var(--cb-primary)":"linear-gradient(135deg, var(--cb-primary)0%, var(--cb-secondary)100%)"}}),F("img",{src:Q,alt:"style icon",width:30,height:30,className:"chat-btn-icon"})]})})}),K=fe;import{useEffect as be,useState as we}from"react";import{jsx as w,jsxs as ue}from"react/jsx-runtime";var $={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=""})=>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"})]})};var R=(e,t)=>t?`${e} ${t}`:e;import{jsx as k,jsxs as T}from"react/jsx-runtime";var xe=({onClose:e,title:t,theming:n,strapiUrl:r})=>{let[s,c]=we(null);be(()=>{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=R("chat-header",n?.header);return T("header",{className:p,style:n?.headerStyle,children:[T("div",{className:"chat-header-left",children:[k("div",{className:"chat-header-logo-placeholder",children:"A"}),T("div",{className:"chat-header-title-wrap",children:[T("div",{className:"chat-header-title-row",children:[k("span",{className:"chat-header-title",children:"Aria"}),k("span",{className:"chat-header-badge",children:t||"Assistant"})]}),T("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($.X,{size:20})})})]})},O=xe;import{useRef as ye,useEffect as ve}from"react";import{jsx as x,jsxs as Ce}from"react/jsx-runtime";var ke=({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=ye(null),h=R("chat-input-container",s?.input);ve(()=>{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:Ce("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($.Send,{className:"chat-input-send-icon"})})]})})})},W=ke;import{useEffect as Ie}from"react";import{jsx as u,jsxs as C}from"react/jsx-runtime";var Ne=({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=Ne;import{jsx as z,jsxs as U}from"react/jsx-runtime";var Me=({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 Ie(()=>{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))]})},Z=Me;import{useState as q,useEffect as Se}from"react";import{jsx as b,jsxs as Le}from"react/jsx-runtime";var Re=({strapiUrl:e,onSelectQuestion:t,variant:n,theming:r})=>{let[s,c]=q([]),[i,p]=q(!0);Se(()=>{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"?Le("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}`))})},V=Re;import{jsx as y,jsxs as J}from"react/jsx-runtime";var Be=({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=R(`chat-window ${e?"chat-window-open":"chat-window-closed"}`,d?.container);return J("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(Z,{messages:n,scrollRef:r,resolvedRegistry:i,theming:d}),J("div",{className:"chat-window-footer",children:[y("div",{className:"chat-window-suggestions",children:y(V,{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"})})]})]})},X=Be;import{jsx as ae,jsxs as Te}from"react/jsx-runtime";var Ee=({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),j=te(null),[oe,ie]=P([]),ne=te(null),se={"--cb-primary":n?.primaryColor||"#2999d6","--cb-secondary":n?.secondaryColor||"#179fa3","--cb-accent":n?.accentColor||n?.secondaryColor||"#179fa3"};return ee(()=>{t.length>0&&ie(t)},[t]),ee(()=>()=>j.current?.abort(),[]),Te("div",{className:"chatbot-container",style:se,children:[ae(K,{isExpanded:d,onOpen:()=>v(!0),theming:n}),ae(X,{isExpanded:d,setIsExpanded:v,messages:c,scrollRef:ne,sendMessage:async de=>{let A=de||p;if(!A.trim())return;j.current?.abort(),j.current=new AbortController,v(!0),h(""),a(!0);let le={role:"user",content:A,id:Date.now()},N=Date.now()+1;i(I=>[...I,le,{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:A,history:c.slice(-4).map(m=>({role:m.role,content:m.content}))}),signal:j.current.signal});if(!I.ok)throw new Error("Network response was not ok");let D=I.body?.getReader(),L=new TextDecoder;if(!D)throw new Error("No reader available");let B=[],_=!1,ce=(async()=>{for(;!_||B.length>0;)if(B.length>0){let m=B.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 D.read();if(l)break;let f=L.decode(m,{stream:!0});H+=f;let g=H.split(`
|
|
1
|
+
"use client";import{useState as D,useEffect as ee,useRef as te}from"react";import{jsx as u,jsxs as K}from"react/jsx-runtime";var M={MessageCircle:({size:e=24,className:t=""})=>u("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:u("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>u("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:u("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=""})=>u("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:u("path",{d:"M18 6 6 18M6 6l12 12"})}),Send:({size:e=24,className:t=""})=>K("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[u("path",{d:"m22 2-7 20-4-9-9-4Z"}),u("path",{d:"M22 2 11 13"})]}),Sparkles:({size:e=24,className:t=""})=>K("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[u("path",{d:"M12 2l1.8 4.6L18 8l-4.2 1.4L12 14l-1.8-4.6L6 8l4.2-1.4L12 2z"}),u("path",{d:"M5 16l.9 2.3L8 19l-2.1.7L5 22l-.9-2.3L2 19l2.1-.7L5 16z"}),u("path",{d:"M19 14l.9 2.3L22 17l-2.1.7L19 20l-.9-2.3L16 17l2.1-.7L19 14z"})]})};import{jsx as A,jsxs as fe}from"react/jsx-runtime";var he=({isExpanded:e,onOpen:t,theming:n})=>A("div",{onClick:t,className:`chat-floating-btn ${e?"chat-btn-hidden":"chat-btn-visible"}`,children:A("div",{className:"chat-btn-border seamless-border",children:fe("div",{className:"chat-btn-inner",children:[A("div",{className:"chat-btn-gradient",style:{background:n?.showGradient===!1?"var(--cb-primary)":"linear-gradient(135deg, var(--cb-primary)0%, var(--cb-secondary)100%)"}}),A(M.Sparkles,{size:30,className:"chat-btn-icon"})]})})}),q=he;import{useEffect as ge,useState as ue}from"react";var R=(e,t)=>t?`${e} ${t}`:e;import{jsx as k,jsxs as T}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=R("chat-header",n?.header);return T("header",{className:p,style:n?.headerStyle,children:[T("div",{className:"chat-header-left",children:[k("div",{className:"chat-header-logo-placeholder",children:"A"}),T("div",{className:"chat-header-title-wrap",children:[T("div",{className:"chat-header-title-row",children:[k("span",{className:"chat-header-title",children:"Aria"}),k("span",{className:"chat-header-badge",children:t||"Assistant"})]}),T("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(M.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=R("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(M.Send,{className:"chat-input-send-icon"})})]})})})},W=ye;import{useEffect as Ce}from"react";import{jsx as b,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&&b("div",{className:"mb-card-content",children:e.content}),a&&e.items.items.map((d,v)=>b(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?b("div",{className:"mb-card-wrapper",children:b(i,{record:e.record,style:n})}):b("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:[b("span",{className:"mb-dot mb-dot-1"}),b("span",{className:"mb-dot mb-dot-2"}),b("span",{className:"mb-dot mb-dot-3"})]}):e.content}),e.role==="assistant"&&!i&&C("div",{className:"mb-assistant-meta",children:[b("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," "]}),b("span",{className:"mb-user-tick","aria-label":"Delivered",children:"\u2713\u2713"})]})]})},Y=ke;import{jsx as P,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&&P("div",{className:"chat-welcome",children:U("div",{className:"chat-welcome-message",children:[P("p",{className:"chat-welcome-subtitle",children:s}),U("div",{className:"chat-welcome-meta",children:[P("span",{className:"chat-welcome-avatar",style:{background:r?.showGradient===!1?"#3B82F6":"linear-gradient(135deg, var(--cb-primary), var(--cb-secondary))"},children:"A"}),P("span",{className:"chat-welcome-time",children:c})]})]})}),e.map(i=>P(Y,{message:i,cardRegistry:n,theming:r},i.id))]})},J=Ne;import{useState as X,useEffect as Ie}from"react";import{jsx as w,jsxs as Le}from"react/jsx-runtime";var Se=({strapiUrl:e,onSelectQuestion:t,variant:n,theming:r})=>{let[s,c]=X([]),[i,p]=X(!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"?Le("div",{className:"sug-skeleton-float",children:[[1,2].map(o=>w("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)),w("div",{className:"sug-skeleton-more"})]}):w("div",{className:"sug-skeleton-list",children:[1,2,3].map(o=>w("div",{className:"sug-skeleton-chip"},o))});return i&&s.length===0?w(h,{}):n==="floating"?w("div",{className:"sug-float-wrap",children:s.map((o,a)=>w("button",{onClick:()=>t(o),className:"sug-float-btn",style:{borderColor:"#bfdbfe",animationDelay:`${a*.1}s`},children:w("span",{className:"sug-float-text",children:o})},`float-${a}-${o}`))}):w("div",{className:"sug-list-wrap",children:s.map((o,a)=>w("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 Z}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=R(`chat-window ${e?"chat-window-open":"chat-window-closed"}`,d?.container);return Z("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(J,{messages:n,scrollRef:r,resolvedRegistry:i,theming:d}),Z("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"})})]})]})},_=Me;import{jsx as ae,jsxs as Be}from"react/jsx-runtime";var Re=({strapiUrl:e,cardRegistry:t,theme:n,title:r,streamSpeed:s})=>{let[c,i]=D([]),[p,h]=D(""),[o,a]=D(!1),[d,v]=D(!1),F=te(null),[oe,ie]=D([]),ne=te(null),se={"--cb-primary":n?.primaryColor||"#2999d6","--cb-secondary":n?.secondaryColor||"#179fa3","--cb-accent":n?.accentColor||n?.secondaryColor||"#179fa3"};return ee(()=>{t.length>0&&ie(t)},[t]),ee(()=>()=>F.current?.abort(),[]),Be("div",{className:"chatbot-container",style:se,children:[ae(q,{isExpanded:d,onOpen:()=>v(!0),theming:n}),ae(_,{isExpanded:d,setIsExpanded:v,messages:c,scrollRef:ne,sendMessage:async de=>{let j=de||p;if(!j.trim())return;F.current?.abort(),F.current=new AbortController,v(!0),h(""),a(!0);let le={role:"user",content:j,id:Date.now()},N=Date.now()+1;i(I=>[...I,le,{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:F.current.signal});if(!I.ok)throw new Error("Network response was not ok");let $=I.body?.getReader(),B=new TextDecoder;if(!$)throw new Error("No reader available");let E=[],Q=!1,ce=(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 $.read();if(l)break;let f=B.decode(m,{stream:!0});H+=f;let g=H.split(`
|
|
2
2
|
|
|
3
3
|
`);H=g.pop()||"";for(let me of g){let pe=me.split(`
|
|
4
|
-
`),
|
|
5
|
-
`:"")+
|
|
4
|
+
`),V="message",z="";for(let S of pe)if(S.startsWith("event:"))V=S.slice(6).trim();else if(S.startsWith("data:")){let L=S.slice(5);if(L.startsWith(" ")&&(L=L.slice(1)),L.trim()==="[DONE]"||L.trim()==="[Done]")continue;z+=(z?`
|
|
5
|
+
`:"")+L}if(V==="cards"){let S=JSON.parse(z);E.push({type:"card",data:S})}else z&&E.push({type:"text",content:z})}}Q=!0,await ce}catch(I){I.name!=="AbortError"&&i($=>$.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:oe,input:p,setInput:h,isLoading:o,title:r,theming:n})]})},re=Re;export{re as ChatBot,O as ChatHeader,W as ChatInput,re as Chatbot,M as ICONS,Y as MessageBubble,G as Suggestions};
|
package/package.json
CHANGED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g clip-path="url(#clip0_2_507)">
|
|
3
|
-
<path d="M9.10915 14.2084C9.02731 13.8911 8.86196 13.6016 8.6303 13.37C8.39863 13.1383 8.10913 12.9729 7.7919 12.8911L2.16815 11.4409C2.0722 11.4137 1.98775 11.3559 1.92762 11.2763C1.86749 11.1968 1.83496 11.0998 1.83496 11C1.83496 10.9003 1.86749 10.8033 1.92762 10.7237C1.98775 10.6441 2.0722 10.5863 2.16815 10.5591L7.7919 9.10803C8.10902 9.02626 8.39845 8.86105 8.6301 8.62956C8.86175 8.39807 9.02716 8.10876 9.10915 7.79169L10.5593 2.16794C10.5863 2.07162 10.644 1.98675 10.7237 1.9263C10.8034 1.86585 10.9007 1.83313 11.0007 1.83313C11.1007 1.83313 11.198 1.86585 11.2777 1.9263C11.3574 1.98675 11.4151 2.07162 11.4421 2.16794L12.8913 7.79169C12.9732 8.10892 13.1385 8.39843 13.3702 8.63009C13.6018 8.86175 13.8913 9.0271 14.2086 9.10894L19.8323 10.5582C19.929 10.5849 20.0143 10.6425 20.0751 10.7223C20.1359 10.8022 20.1688 10.8997 20.1688 11C20.1688 11.1003 20.1359 11.1979 20.0751 11.2777C20.0143 11.3575 19.929 11.4152 19.8323 11.4419L14.2086 12.8911C13.8913 12.9729 13.6018 13.1383 13.3702 13.37C13.1385 13.6016 12.9732 13.8911 12.8913 14.2084L11.4411 19.8321C11.4142 19.9284 11.3565 20.0133 11.2768 20.0737C11.1971 20.1342 11.0998 20.1669 10.9998 20.1669C10.8997 20.1669 10.8025 20.1342 10.7228 20.0737C10.6431 20.0133 10.5854 19.9284 10.5584 19.8321L9.10915 14.2084Z" stroke="white" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
-
<path d="M18.333 2.75V6.41667" stroke="white" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
-
<path d="M20.1667 4.58331H16.5" stroke="white" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
-
<path d="M3.66699 15.5833V17.4166" stroke="white" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
7
|
-
<path d="M4.58333 16.5H2.75" stroke="white" stroke-width="1.83333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
8
|
-
</g>
|
|
9
|
-
<defs>
|
|
10
|
-
<clipPath id="clip0_2_507">
|
|
11
|
-
<rect width="22" height="22" fill="white"/>
|
|
12
|
-
</clipPath>
|
|
13
|
-
</defs>
|
|
14
|
-
</svg>
|