aspirechat
Version:
A highly customizable React chatbot component with extensive configuration options
3 lines (2 loc) • 14.7 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react"),require("uuid")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react","uuid"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).AspireChat={},e.jsxRuntime,e.React,e.uuid)}(this,(function(e,t,n,i){"use strict";var o=function(){return o=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},o.apply(this,arguments)};function r(e,t,n,i){return new(n||(n=Promise))((function(o,r){function a(e){try{l(i.next(e))}catch(e){r(e)}}function s(e){try{l(i.throw(e))}catch(e){r(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,s)}l((i=i.apply(e,t||[])).next())}))}function a(e,t){var n,i,o,r,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(s){return function(l){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;r&&(r=0,s[0]&&(a=0)),a;)try{if(n=1,i&&(o=2&s[0]?i.return:s[0]?i.throw||((o=i.return)&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;switch(i=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return a.label++,{value:s[1],done:!1};case 5:a.label++,i=s[1],s=[0];continue;case 7:s=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){a=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){a.label=s[1];break}if(6===s[0]&&a.label<o[1]){a.label=o[1],o=s;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(s);break}o[2]&&a.ops.pop(),a.trys.pop();continue}s=t.call(e,a)}catch(e){s=[6,e],i=0}finally{n=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}function s(e,t,n){if(n||2===arguments.length)for(var i,o=0,r=t.length;o<r;o++)!i&&o in t||(i||(i=Array.prototype.slice.call(t,0,o)),i[o]=t[o]);return e.concat(i||Array.prototype.slice.call(t))}function l(e){var t;void 0===e&&(e={});var r=e.initialMessages,a=void 0===r?[]:r,l=e.persistKey,u=e.flows,c=void 0===u?{}:u,d=e.initialFlow,p=void 0===d?null:d,f=e.typingDelay,g=void 0===f?1e3:f,m=e.initiallyOpen,h=void 0!==m&&m,x=n.useState({messages:a,isTyping:!1,isOpen:h,isMinimized:!1,currentFlow:p,availableOptions:p&&(null===(t=c[p])||void 0===t?void 0:t.options)||[]}),b=x[0],v=x[1],y=n.useRef(!0);n.useEffect((function(){return function(){y.current=!1}}),[]),n.useEffect((function(){if(l)try{var e=localStorage.getItem(l);e&&v((function(t){return o(o({},t),{messages:JSON.parse(e)})}))}catch(e){console.error("Error loading persisted chat messages:",e)}}),[l]),n.useEffect((function(){if(l&&b.messages.length>0)try{localStorage.setItem(l,JSON.stringify(b.messages))}catch(e){console.error("Error persisting chat messages:",e)}}),[b.messages,l]),n.useEffect((function(){p&&c[p]&&0===b.messages.length&&k(p)}),[p,c]);var F=n.useCallback((function(e){var t=o(o({},e),{id:i.v4(),timestamp:Date.now()});return v((function(e){return o(o({},e),{messages:s(s([],e.messages,!0),[t],!1)})})),t}),[]),w=n.useCallback((function(e,t){v((function(n){return o(o({},n),{messages:n.messages.map((function(n){return n.id===e?o(o({},n),t):n}))})}))}),[]),C=n.useCallback((function(){v((function(e){var t;return o(o({},e),{messages:[],availableOptions:e.currentFlow&&(null===(t=c[e.currentFlow])||void 0===t?void 0:t.options)||[]})})),l&&localStorage.removeItem(l)}),[l,c]),k=n.useCallback((function(e){var t=c[e];if(t){v((function(t){return o(o({},t),{isTyping:!0,currentFlow:e})}));var n=0;t.messages.forEach((function(e){setTimeout((function(){y.current&&(F(e),e===t.messages[t.messages.length-1]&&v((function(e){return o(o({},e),{isTyping:!1,availableOptions:t.options||[]})})))}),n),n+=g}))}}),[c,g,F]),j=n.useCallback((function(e){F({text:e.text,type:"user"}),e.nextFlow&&c[e.nextFlow]?k(e.nextFlow):e.value&&(v((function(e){return o(o({},e),{isTyping:!0,availableOptions:[]})})),setTimeout((function(){y.current&&(F({text:e.value,type:"bot"}),v((function(e){return o(o({},e),{isTyping:!1})})))}),g))}),[F,c,k,g]),B=n.useCallback((function(){v((function(e){return o(o({},e),{isOpen:!e.isOpen})}))}),[]),T=n.useCallback((function(){v((function(e){return o(o({},e),{isOpen:!0})}))}),[]),S=n.useCallback((function(){v((function(e){return o(o({},e),{isOpen:!1})}))}),[]),M=n.useCallback((function(){v((function(e){return o(o({},e),{isMinimized:!0})}))}),[]),O=n.useCallback((function(){v((function(e){return o(o({},e),{isMinimized:!1})}))}),[]);return{messages:b.messages,isTyping:b.isTyping,isOpen:b.isOpen,isMinimized:b.isMinimized,availableOptions:b.availableOptions,currentFlow:b.currentFlow,addMessage:F,updateMessage:w,clearMessages:C,toggleChat:B,openChat:T,closeChat:S,minimizeChat:M,maximizeChat:O,startFlow:k,handleButtonClick:j}}"function"==typeof SuppressedError&&SuppressedError;var u=n.createContext(null),c=function(){var e=n.useContext(u);if(!e)throw new Error("useGlobalChat must be used within a ChatContextProvider");return e},d=function(e){var n=e.title,i=void 0===n?"Chat Support":n,o=e.logo,r=c(),a=r.minimizeChat,s=r.closeChat,l=r.isMinimized,u=r.maximizeChat;return t.jsxs("div",{className:"flex items-center p-3 bg-blue-500 text-white",role:"heading","aria-level":1,children:[o&&t.jsx("img",{src:o,alt:"Chat Logo",className:"h-6 w-auto mr-2"}),t.jsx("h3",{className:"text-base font-semibold flex-1",children:i}),t.jsxs("div",{className:"flex gap-2",children:[l?t.jsx("button",{onClick:u,className:"p-1 hover:bg-blue-600 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300","aria-label":"Maximize chat",children:t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:t.jsx("polyline",{points:"5 12 12 5 19 12"})})}):t.jsx("button",{onClick:a,className:"p-1 hover:bg-blue-600 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300","aria-label":"Minimize chat",children:t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:t.jsx("polyline",{points:"5 9 12 16 19 9"})})}),t.jsx("button",{onClick:s,className:"p-1 hover:bg-blue-600 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300","aria-label":"Close chat",children:t.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[t.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})]})};function p(e,t){void 0===t&&(t="HH:mm");var n=new Date(e);return"HH:mm"===t?"".concat(String(n.getHours()).padStart(2,"0"),":").concat(String(n.getMinutes()).padStart(2,"0")):"HH:mm:ss"===t?"".concat(String(n.getHours()).padStart(2,"0"),":").concat(String(n.getMinutes()).padStart(2,"0"),":").concat(String(n.getSeconds()).padStart(2,"0")):n.toLocaleString()}var f=function(e){var n=e.message,i="user"===n.type;return t.jsxs("div",{className:"flex flex-col mb-3 max-w-[80%] ".concat(i?"items-end self-end":"items-start self-start"),role:i?"complementary":"region","aria-label":"".concat(i?"User":"Bot"," message"),children:[t.jsx("div",{className:"rounded-2xl px-4 py-2 ".concat(i?"bg-blue-500 text-white":"bg-gray-100 text-gray-800"),children:n.html?t.jsx("div",{dangerouslySetInnerHTML:{__html:n.text},"aria-live":"polite"}):t.jsx("p",{children:n.text})}),t.jsx("div",{className:"text-xs text-gray-400 mt-1","aria-hidden":"true",children:t.jsx("time",{dateTime:new Date(n.timestamp).toISOString(),children:p(n.timestamp)})})]})},g=function(e){var n=e.options,i=e.onButtonClick;return n&&0!==n.length?t.jsx("div",{className:"w-full flex flex-wrap gap-2 p-3 border-t border-gray-200",role:"group","aria-label":"Chat options",children:n.map((function(e){return t.jsx("button",{className:"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",onClick:function(){return i(e)},type:"button","aria-label":e.text,children:e.text},e.id)}))}):null},m=function(){var e=c(),n=e.availableOptions,i=e.handleButtonClick;return e.isTyping?t.jsx("div",{className:"border-t border-gray-200 p-4 flex items-center justify-center chat-typing-indicator","aria-live":"polite","aria-label":"Bot is typing",children:t.jsxs("div",{className:"flex space-x-2 items-center",children:[t.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full",style:{animationDelay:"0ms"}}),t.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full",style:{animationDelay:"150ms"}}),t.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full",style:{animationDelay:"300ms"}})]})}):t.jsx(g,{options:n,onButtonClick:i})},h=function(e){var n=e.config,i=void 0===n?{}:n,o=c().toggleChat,r=function(){var e;switch((null===(e=null==i?void 0:i.position)||void 0===e?void 0:e.placement)||"bottom-right"){case"top-left":case"bottom-left":return"top-5 left-5";case"top-right":return"top-5 right-5";default:return"bottom-5 right-5"}}();return t.jsx("button",{onClick:o,className:"fixed ".concat(r," z-50 w-14 h-14 bg-blue-500 hover:bg-blue-600 text-white rounded-full flex items-center justify-center shadow-lg transition-transform duration-300 ease-in-out hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"),"aria-label":"Toggle chat",children:t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:t.jsx("path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"})})})},x={primary:"#4F46E5",secondary:"#6366F1",background:"#FFFFFF",textPrimary:"#1F2937",textSecondary:"#4B5563",userBubbleBackground:"#4F46E5",userBubbleText:"#FFFFFF",botBubbleBackground:"#F3F4F6",botBubbleText:"#1F2937",systemMessageColor:"#9CA3AF",headerBackground:"#4F46E5",headerText:"#FFFFFF",inputBackground:"#FFFFFF",inputFieldBackground:"#F9FAFB",inputTextColor:"#1F2937",inputBorderColor:"#E5E7EB",borderColor:"#E5E7EB",timestampColor:"#9CA3AF",errorColor:"#EF4444",successColor:"#10B981",fontFamily:'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',fontSize:"14px",fontSizeSmall:"12px",fontSizeLarge:"16px",spacing:{unit:4,tiny:"4px",small:"8px",medium:"16px",large:"24px",extraLarge:"32px"},borderRadius:{small:"4px",medium:"8px",large:"16px",circle:"50%"},boxShadow:{light:"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",medium:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",heavy:"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"},animations:{transitionDuration:"200ms",easing:"ease-in-out"}},b=o(o({},x),{primary:"#6366F1",secondary:"#818CF8",background:"#1F2937",textPrimary:"#F9FAFB",textSecondary:"#E5E7EB",userBubbleBackground:"#6366F1",userBubbleText:"#FFFFFF",botBubbleBackground:"#374151",botBubbleText:"#F9FAFB",headerBackground:"#6366F1",headerText:"#FFFFFF",inputBackground:"#1F2937",inputFieldBackground:"#374151",inputTextColor:"#F9FAFB",inputBorderColor:"#4B5563",borderColor:"#4B5563",timestampColor:"#9CA3AF"});e.ChatButtons=g,e.ChatContextProvider=function(e){var i=e.children,r=e.initialConfig,a=void 0===r?{}:r,s=e.initialOptions,c=void 0===s?{}:s,d=l(o({initialMessages:a.initialMessages||[],persistKey:a.persistKey,flows:a.flows||{},initialFlow:a.initialFlow,typingDelay:a.typingIndicatorTimeout||1e3,initiallyOpen:a.initiallyOpen||!1},c)),p=n.useCallback((function(e){d.updateMessage(e,{text:"",type:"system"})}),[d]),f=n.useCallback((function(e){if(e!==d.isTyping&&e){var t=d.addMessage({text:"",type:"bot",isTyping:!0});d.isTyping||setTimeout((function(){d.updateMessage(t.id,{text:"",type:"system"})}),a.typingIndicatorTimeout||1e3)}}),[d,a.typingIndicatorTimeout]),g={messages:d.messages,isTyping:d.isTyping,isOpen:d.isOpen,isMinimized:d.isMinimized,currentFlow:d.currentFlow,availableOptions:d.availableOptions,config:a,addMessage:d.addMessage,updateMessage:d.updateMessage,clearMessages:d.clearMessages,toggleChat:d.toggleChat,openChat:d.openChat,closeChat:d.closeChat,minimizeChat:d.minimizeChat,maximizeChat:d.maximizeChat,startFlow:d.startFlow,handleButtonClick:d.handleButtonClick,removeMessage:p,setIsOpen:function(e){e?d.openChat():d.closeChat()},setIsMinimized:function(e){e?d.minimizeChat():d.maximizeChat()},setIsTyping:f};return t.jsx(u.Provider,{value:g,children:i})},e.ChatHeader=d,e.ChatInput=m,e.ChatMessage=f,e.ChatToggleButton=h,e.Chatbot=function(e){var i=e.config,o=void 0===i?{}:i,r=c(),a=r.isOpen,s=r.isMinimized,l=r.messages,u=n.useRef(null);if(n.useEffect((function(){o.disableAutoScroll||!u.current||s||u.current.scrollIntoView({behavior:"smooth"})}),[l,s,o.disableAutoScroll]),!a)return t.jsx(h,{config:o});var p=function(){var e;switch((null===(e=o.position)||void 0===e?void 0:e.placement)||"bottom-right"){case"top-left":return"top-5 left-5";case"top-right":return"top-5 right-5";case"bottom-left":return"bottom-5 left-5";default:return"bottom-5 right-5"}}();return t.jsxs("div",{className:"fixed ".concat(p," z-50 bg-white rounded-lg shadow-xl overflow-hidden flex flex-col aspire-chat-container"),style:{width:o.width||"350px",maxWidth:"90vw",maxHeight:o.maxHeight||"600px",minHeight:s?"60px":"300px"},role:"dialog","aria-label":"Chat window",children:[t.jsx(d,{title:o.headerTitle,logo:o.logo}),!s&&t.jsxs(t.Fragment,{children:[t.jsxs("div",{className:"flex-1 overflow-y-auto p-4 flex flex-col gap-3",role:"log","aria-live":"polite",children:[l.map((function(e){return t.jsx(f,{message:e},e.id)})),t.jsx("div",{ref:u})]}),t.jsx(m,{})]})]})},e.createChatbotResponse=function(e,t){return{text:e,type:"bot",metadata:t}},e.darkTheme=b,e.defaultTheme=x,e.formatTimestamp=p,e.processResponse=function(e,t){return r(void 0,void 0,void 0,(function(){var n;return a(this,(function(i){switch(i.label){case 0:return"function"!=typeof e?[3,3]:(n=e(t))instanceof Promise?[4,n]:[3,2];case 1:return[2,i.sent()];case 2:return[2,n];case 3:return[2,e]}}))}))},e.useChat=l,e.useGlobalChat=c}));
//# sourceMappingURL=index.min.js.map