chatbot-test-william
Version:
A flexible and customizable React chat component that supports context-aware conversations and document processing
2 lines • 15.7 kB
JavaScript
/*! For license information please see chatbot-test-william.min.js.LICENSE.txt */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ChatbotTest=t(require("React"),require("ReactDOM")):e.ChatbotTest=t(e.React,e.ReactDOM)}(this,((e,t)=>(()=>{"use strict";var r={20:(e,t,r)=>{var n=r(883),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),c=Object.prototype.hasOwnProperty,i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function s(e,t,r){var n,a={},s=null,u=null;for(n in void 0!==r&&(s=""+r),void 0!==t.key&&(s=""+t.key),void 0!==t.ref&&(u=t.ref),t)c.call(t,n)&&!l.hasOwnProperty(n)&&(a[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===a[n]&&(a[n]=t[n]);return{$$typeof:o,type:e,key:s,ref:u,props:a,_owner:i.current}}t.Fragment=a,t.jsx=s,t.jsxs=s},338:(e,t,r)=>{var n=r(845);t.createRoot=n.createRoot,t.hydrateRoot=n.hydrateRoot},845:e=>{e.exports=t},848:(e,t,r)=>{e.exports=r(20)},883:t=>{t.exports=e}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return r[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var a=o(848),c=o(883),i=o.n(c),l=o(338),s={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},u=c.createContext&&c.createContext(s),h=["attr","size","title"];function f(){return f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},f.apply(this,arguments)}function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){var n,o,a,c;n=e,o=t,a=r[t],(o="symbol"==typeof(c=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o))?c:c+"")in n?Object.defineProperty(n,o,{value:a,enumerable:!0,configurable:!0,writable:!0}):n[o]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function v(e){return e&&e.map(((e,t)=>c.createElement(e.tag,d({key:t},e.attr),v(e.child))))}function y(e){return t=>c.createElement(m,f({attr:d({},e.attr)},t),v(e.child))}function m(e){var t=t=>{var r,{attr:n,size:o,title:a}=e,i=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r={};for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){if(t.indexOf(n)>=0)continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,h),l=o||t.size||"1em";return t.className&&(r=t.className),e.className&&(r=(r?r+" ":"")+e.className),c.createElement("svg",f({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},t.attr,n,i,{className:r,style:d(d({color:e.color||t.color},t.style),e.style),height:l,width:l,xmlns:"http://www.w3.org/2000/svg"}),a&&c.createElement("title",null,a),e.children)};return void 0!==u?c.createElement(u.Consumer,null,(e=>t(e))):t(s)}function b(e){return y({tag:"svg",attr:{t:"1569682613478",viewBox:"0 0 1024 1024",version:"1.1"},child:[{tag:"path",attr:{d:"M852 64H172c-17.7 0-32 14.3-32 32v660c0 17.7 14.3 32 32 32h680c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zM300 328c0-33.1 26.9-60 60-60s60 26.9 60 60-26.9 60-60 60-60-26.9-60-60z m372 248c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-60c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v60z m-8-188c-33.1 0-60-26.9-60-60s26.9-60 60-60 60 26.9 60 60-26.9 60-60 60zM799 864H225c-13.8 0-25 14.3-25 32v56c0 4.4 2.8 8 6.2 8h611.5c3.4 0 6.2-3.6 6.2-8v-56c0.1-17.7-11.1-32-24.9-32z"},child:[]}]})(e)}function g(e){return y({tag:"svg",attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M332.64 64.58C313.18 43.57 286 32 256 32c-30.16 0-57.43 11.5-76.8 32.38-19.58 21.11-29.12 49.8-26.88 80.78C156.76 206.28 203.27 256 256 256s99.16-49.71 103.67-110.82c2.27-30.7-7.33-59.33-27.03-80.6zM432 480H80a31 31 0 0 1-24.2-11.13c-6.5-7.77-9.12-18.38-7.18-29.11C57.06 392.94 83.4 353.61 124.8 326c36.78-24.51 83.37-38 131.2-38s94.42 13.5 131.2 38c41.4 27.6 67.74 66.93 76.18 113.75 1.94 10.73-.68 21.34-7.18 29.11A31 31 0 0 1 432 480z"},child:[]}]})(e)}var x=function(){return x=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},x.apply(this,arguments)};function w(e){var t,r,n="user"===e.message.role,o="message-bubble ".concat(n?"message-bubble-user":"message-bubble-ai"),c=n?null!==(t=e.humanIcon)&&void 0!==t?t:(0,a.jsx)(g,{}):null!==(r=e.aiIcon)&&void 0!==r?r:(0,a.jsx)(b,{});return(0,a.jsxs)("div",x({className:o},{children:[(0,a.jsx)("div",x({className:"message-prefix"},{children:c})),(0,a.jsx)("div",x({className:"message-content"},{children:(0,a.jsx)("span",{children:e.message.content})}))]}))}function j(e){return y({tag:"svg",attr:{viewBox:"0 0 640 512"},child:[{tag:"path",attr:{d:"M320 0c17.7 0 32 14.3 32 32l0 64 120 0c39.8 0 72 32.2 72 72l0 272c0 39.8-32.2 72-72 72l-304 0c-39.8 0-72-32.2-72-72l0-272c0-39.8 32.2-72 72-72l120 0 0-64c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224l16 0 0 192-16 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-16 0 0-192 16 0z"},child:[]}]})(e)}function O(e,t){return r=this,n=void 0,a=function(){var r,n;return function(e,t){var r,n,o,a,c={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function i(i){return function(l){return function(i){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,i[0]&&(c=0)),c;)try{if(r=1,n&&(o=2&i[0]?n.return:i[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,i[1])).done)return o;switch(n=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return c.label++,{value:i[1],done:!1};case 5:c.label++,n=i[1],i=[0];continue;case 7:i=c.ops.pop(),c.trys.pop();continue;default:if(!((o=(o=c.trys).length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){c=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){c.label=i[1];break}if(6===i[0]&&c.label<o[1]){c.label=o[1],o=i;break}if(o&&c.label<o[2]){c.label=o[2],c.ops.push(i);break}o[2]&&c.ops.pop(),c.trys.pop();continue}i=t.call(e,c)}catch(e){i=[6,e],n=0}finally{r=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,l])}}}(this,(function(o){switch(o.label){case 0:return o.trys.push([0,3,,4]),[4,fetch(e,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message:t})})];case 1:if(!(r=o.sent()).ok)throw new Error("Failed to fetch response from backend");return[4,r.json()];case 2:return[2,o.sent().response];case 3:return n=o.sent(),console.error("Error fetching chatbot response:",n),[2,"I'm having trouble responding right now. Please try again later."];case 4:return[2]}}))},new((o=Promise)||(o=Promise))((function(e,t){function c(e){try{l(a.next(e))}catch(e){t(e)}}function i(e){try{l(a.throw(e))}catch(e){t(e)}}function l(t){var r;t.done?e(t.value):(r=t.value,r instanceof o?r:new o((function(e){e(r)}))).then(c,i)}l((a=a.apply(r,n||[])).next())}));var r,n,o,a}function I(e){return y({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"},child:[]}]})(e)}function k(e){return y({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z"},child:[]},{tag:"path",attr:{d:"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"},child:[]}]})(e)}var z=function(){return z=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},z.apply(this,arguments)},P=function(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))};function E(e){var t=(0,c.useRef)(null),r=(0,c.useState)(!1),n=r[0],o=r[1],i=(0,c.useState)("light"),l=i[0],s=i[1],u=(0,c.useState)([]),h=u[0],f=u[1],p=(0,c.useState)(""),d=p[0],v=p[1],y=(0,c.useState)(!1),m=y[0],b=y[1];(0,c.useEffect)((function(){var e=window.matchMedia("(prefers-color-scheme: dark)"),t=function(e){return s(e.matches?"dark":"light")};return e.addEventListener("change",t),s(e.matches?"dark":"light"),function(){return e.removeEventListener("change",t)}}),[]);var g=window.innerWidth<=768,x={flex:1,flexDirection:"column",overflow:"hidden",backgroundColor:"dark"===l?"#333333":"white",color:"dark"===l?"#fff":"#000",position:"fixed",bottom:g?"160px":"100px",right:g?"60px":"40px",borderRadius:"10px",width:g?"90%":"400px"},E=e.endpoint,S=e.placeholder,M=e.aiIcon,D=e.humanIcon,N=e.chatIcon,C=e.titleText,R=e.initialMessage,_=(0,c.useState)({});return _[0],_[1],(0,c.useEffect)((function(){h.length||h.push({id:"initial",content:R||"Hi, how may I help you?",createdAt:new Date(Date.now()),role:"assistant"})}),[]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("button",z({className:"chat-button",onClick:function(){return o(!n)}},{children:null!=N?N:(0,a.jsx)(j,{})})),(0,a.jsxs)("div",z({style:x},{children:[n&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",z({className:"chat-header",style:{display:"flex",justifyContent:"space-between",alignItems:"center"}},{children:[(0,a.jsx)("div",{children:C}),(0,a.jsx)("div",z({style:{display:"flex",gap:"8px",alignItems:"center"}},{children:(0,a.jsx)("button",z({onClick:function(){s((function(e){return"light"===e?"dark":"light"}))},className:"theme-toggle-button"},{children:(0,a.jsx)("div",z({className:"dark"===l?"icon-wrapper":"icon-wrapper dark-mode"},{children:"dark"===l?(0,a.jsx)(k,{}):(0,a.jsx)(I,{})}))}))}))]})),(0,a.jsx)("div",z({className:"chat-container"},{children:(0,a.jsx)("div",z({ref:t},{children:h.length>0?P([],h,!0).map((function(e,t){return(0,a.jsx)(w,{message:e,aiIcon:M,humanIcon:D},e.id)})):""}))}))]}),n&&(0,a.jsx)("form",z({onSubmit:function(e){return t=this,r=void 0,o=function(){var t,r,n,o,a;return function(e,t){var r,n,o,a,c={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function i(i){return function(l){return function(i){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,i[0]&&(c=0)),c;)try{if(r=1,n&&(o=2&i[0]?n.return:i[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,i[1])).done)return o;switch(n=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return c.label++,{value:i[1],done:!1};case 5:c.label++,n=i[1],i=[0];continue;case 7:i=c.ops.pop(),c.trys.pop();continue;default:if(!((o=(o=c.trys).length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){c=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){c.label=i[1];break}if(6===i[0]&&c.label<o[1]){c.label=o[1],o=i;break}if(o&&c.label<o[2]){c.label=o[2],c.ops.push(i);break}o[2]&&c.ops.pop(),c.trys.pop();continue}i=t.call(e,c)}catch(e){i=[6,e],n=0}finally{r=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,l])}}}(this,(function(c){switch(c.label){case 0:if(e.preventDefault(),""===d.trim())return[2];t={id:crypto.randomUUID(),content:d,createdAt:new Date(Date.now()),role:"user"},f((function(e){return P(P([],e,!0),[t],!1)})),v(""),b(!0),c.label=1;case 1:return c.trys.push([1,3,4,5]),[4,O(E,t.content)];case 2:return(r=c.sent())&&(n={id:"bot"+crypto.randomUUID(),content:r,createdAt:new Date(Date.now()),role:"assistant"},f((function(e){return P(P([],e,!0),[n],!1)}))),[3,5];case 3:return o=c.sent(),console.error("Error fetching chatbot response:",o),a={id:"bot-error"+crypto.randomUUID(),content:"I'm having trouble responding right now. Please try again later.",createdAt:new Date(Date.now()),role:"assistant"},f((function(e){return P(P([],e,!0),[a],!1)})),[3,5];case 4:return b(!1),[7];case 5:return[2]}}))},new((n=void 0)||(n=Promise))((function(e,a){function c(e){try{l(o.next(e))}catch(e){a(e)}}function i(e){try{l(o.throw(e))}catch(e){a(e)}}function l(t){var r;t.done?e(t.value):(r=t.value,r instanceof n?r:new n((function(e){e(r)}))).then(c,i)}l((o=o.apply(t,r||[])).next())}));var t,r,n,o},className:"form-container"},{children:(0,a.jsxs)("div",z({className:"chat-input"},{children:[(0,a.jsx)("textarea",{className:"input-field",value:d,placeholder:null!=S?S:"Type your message here...",onChange:function(e){v(e.target.value);var t=parseInt(window.getComputedStyle(e.target).lineHeight),r=e.target.scrollHeight;if(r>t&&r>32){var n=Math.min(r,96);e.target.style.height="".concat(n,"px")}else e.target.style.height="32px"},onKeyDown:function(e){if("Enter"===e.key&&!e.shiftKey){e.preventDefault();var t=e.currentTarget.form;t&&t.requestSubmit()}},rows:1,style:{height:"32px"}}),(0,a.jsx)("button",z({type:"submit",className:"submit-button"},{children:m?(0,a.jsx)("div",z({role:"status",className:"flex justify-center"},{children:(0,a.jsx)("span",{children:"Loading..."})})):"Send"}))]}))}))]}))]})}var S=window.chatConfig||{};return l.createRoot(document.getElementById("root")).render((0,a.jsx)(i().StrictMode,{children:(0,a.jsx)((function(e){var t=e.endpoint,r=e.uploadEndpoint,n=e.showUpload,o=e.aiIcon,c=e.titleText,i=e.placeholder,l=e.humanIcon,s=e.chatIcon;return(0,a.jsx)(E,{endpoint:t||"http://localhost:8000/chatbot",uploadEndpoint:r,showUpload:n,aiIcon:o,humanIcon:l,chatIcon:s,placeholder:i||"Ask a question...",titleText:c||"Chatbot"})}),{endpoint:S.endpoint,aiIcon:S.aiIcon,titleText:S.titleText,placeholder:S.placeholder,humanIcon:S.humanIcon,chatIcon:S.chatIcon,showUpload:!0})})),{}})()));