@d19n/webchat 1.0.6 → 1.1.1

package/dist/src/TwilioChat/components/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sources":["../../../../src/TwilioChat/components/Message.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, memo, useRef } from \"react\";\nimport ChatGlobalContext from \"../../context/ChatGlobalContext\";\nimport icoYouFibre from '../../assets/images/favicon.svg';\nimport linkifyHtml from 'linkify-html';\nimport { Col, Row } from 'react-bootstrap';\nimport { DebounceInput } from 'react-debounce-input';\nimport { BsFiletypePdf } from \"react-icons/bs\";\nimport { BsFiletypeTxt } from \"react-icons/bs\";\nimport { BsFiletypeMp4 } from \"react-icons/bs\";\nimport { BsFiletypeMp3 } from \"react-icons/bs\";\n\nimport moment from 'moment';\nimport { validateForm, validateFormInput } from \"../../utils/validate\";\nimport { chatLocalStorage, loadZipCodesAsync } from \"../../services/chatService\";\nimport EventPost from \"./styled/EventPost\";\nimport MyPost from \"./styled/MyPost\";\nimport YFPost from \"./styled/YFPost\";\n\ninterface Item {\n    createdAt: string;\n    from?: string | null;\n    files?: string | null;\n    message: string | null;\n    form: FormType | null;\n    messageId: string;\n    fromId: string;\n    senderType: string;\n}\n\ninterface FormType {\n    type: string;\n    value: Array<{ title: string; action: string; placeholder?: string | null; type?: string; required?: boolean; options?:object }>;\n}\n\ntype Props = {\n    item: Item,\n    buttonAction: any,\n    setChatForm: any,\n};\n\ninterface Result {\n  available: boolean | null;\n  salesStatus: boolean | null;\n  loading: boolean;\n  data: Array<{ label: string; value: string; }> | null;\n}\n\nconst Message = ({item, buttonAction, setChatForm }:Props) => {\n    const gContext: any = useContext(ChatGlobalContext);\n    \n    const formRef = useRef<any>(null);\n    let [formValues, setFormValues] = useState({});\n    const [postCode, setPostCode] = useState('');\n    const [postCodeAddress, setPostCodeAddress] = useState('');\n    const [invalidFields, setInvalidFields] =useState<Set<string>>(new Set());\n    const [searchResult, setSearchResult] = useState<Result>({\n        available: false,\n        salesStatus: null,\n        loading: false,\n        data: null,\n    });\n    \n    useEffect(() => {      \n      setFormValues({});\n      setPostCode('');\n      formRef.current = null;\n      setSearchResult({\n        ...searchResult,\n        data: null,\n        loading: false,\n      });\n    }, [item]);\n    \n    useEffect(() => {      \n      postCode.length > 0\n        ? loadOptionsAsync(postCode)\n        : setSearchResult({\n          ...searchResult,\n          data: null,\n        });\n    }, [postCode]);\n\n    const loadOptionsAsync = async(input) => {\n      setSearchResult({\n        ...searchResult,\n        data: null,\n        loading: true,\n      });\n      updateFormValues('address', 'text', null);\n      try {\n        const zipList = await loadZipCodesAsync(input);        \n        setSearchResult({\n          ...searchResult,\n          loading: false,\n          data: zipList,\n        });\n      } catch (error) { console.error('Error fetching ZIP codes:', error); }\n    };\n\n    const updateFormValues = (action, type, value) => {\n      formValues[action] = value;\n      const tmpInvalidFields = invalidFields;\n      validateFormInput(type, value)?tmpInvalidFields.delete(action):tmpInvalidFields.add(action); \n      setInvalidFields(tmpInvalidFields);   \n      setFormValues({...formValues});\n      setChatForm({...formValues});\n    };\n\n    const getIcon = (url:string) => {\n      if(url && typeof window !== 'undefined'){\n        const extension = url.split('.').pop()?.toLocaleLowerCase();\n        const openFile = () => {\n          if (typeof window !== 'undefined') {\n            window.open(url,'_blank');\n          }\n        };\n        switch(extension){\n          case 'pdf': return <BsFiletypePdf className='file' onClick={openFile}/>; break;\n          case 'txt': return <BsFiletypeTxt className='file' onClick={openFile}/>; break;\n          case 'mp4': return <BsFiletypeMp4 className='file' onClick={openFile}/>; break;\n          case 'mp3': return <BsFiletypeMp3 className='file' onClick={openFile}/>; break;\n          case 'svg': return <InlineSvg className='file' url={url} onClick={openFile} />; break;\n          default: return <img className='file' src={url} onClick={() => gContext?.goSetTwilioChat({...gContext?.twilioChat, lightboxUrl: url})} />; break;\n        }\n      }\n    };\n\n    const InlineSvg = ({ url, ...props }) => {\n      const [svgContent, setSvgContent] = useState<string | null>(null);  \n      useEffect(() => {\n        const fetchSvg = async () => {\n          try {\n            const response = await fetch(url);\n            const svgText = await response.text();\n            setSvgContent(svgText);\n          } catch (error) {\n            console.error(\"Error loading SVG:\", error);\n          }\n        };  \n        fetchSvg();\n      }, [url]);  \n      return (\n        <div {...props}\n          dangerouslySetInnerHTML={{ __html: svgContent || \"\" }}\n          aria-hidden=\"true\"\n        />\n      );\n    };\n\n    const agentMessage = (item) => {\n      return <>\n        <YFPost key={item.messageId}>\n          <img src={icoYouFibre} />\n          <Col className='p-0 m-0'>\n            <div>\n              {item.message && <span dangerouslySetInnerHTML={{ __html: linkifyHtml(item.message, { target: \"_blank\" }).replaceAll(/\\r\\n|\\n/g, \"<br />\") }} />}\n            </div>\n            {Array.isArray(item.files) && item.files.length > 0 &&  <div className='files'>\n              {item.files.map((file) => getIcon(file.url))}\n            </div>}\n            <Row className='flex justify-between w-100 p-0 m-0 mt-1'>\n              <small dangerouslySetInnerHTML={{ __html: item.from }} />\n              { item.createdAt && <small className='pt-1'>{moment(item.createdAt).format('HH:mm')}</small> }\n            </Row>\n          </Col>\n        </YFPost>\n      </>\n    };\n  \n    const customerMessage = (item) => {\n      return <>\n        <MyPost key={item.messageId}>\n          { !item.form && <>\n            {item.message && <span dangerouslySetInnerHTML={{ __html: linkifyHtml(item.message, { target: \"_blank\" }).replaceAll(/\\r\\n|\\n/g, \"<br />\") }} />}\n            {Array.isArray(item.files) && item.files.length > 0 &&  <div className='files'>\n              {item.files.map((file) => getIcon(file.url))}\n            </div>}\n            <Row className='flex justify-between w-100 p-0 m-0'>\n            {item.from === 'Client' ? <small>Client</small> : <small dangerouslySetInnerHTML={{ __html: item.from }} /> }\n            { item.createdAt && <small className='pt-1'>{moment(item.createdAt).format('HH:mm')}</small> }\n            </Row></>}\n          { item.form?.type === \"buttons\" &&  <>\n            { item.form?.value.map((itm, i) => <button key={i} onClick={() => buttonAction(itm.action)} dangerouslySetInnerHTML={{ __html: itm.title }} />)}\n          </>}\n          { item.form?.type === \"form\" &&  <form ref={formRef} method='get' action='javascript:void(0);'>\n            <div className='flex flex-column gap-5'>\n              { item.form?.value.map((itm, i) => <>                \n                { itm?.type !== 'button' ? <><div dangerouslySetInnerHTML={{ __html: itm.title }} className='mt-7 mb-2' />\n                { (itm?.type === 'number' || itm?.type === 'email' || itm?.type === 'text') && \n                <input\n                  onChange={(e) => updateFormValues(itm.action, itm?.type, e.target.value)}\n                  value={formValues[itm.action]}\n                  placeholder={itm.placeholder}\n                  maxLength={250}\n                  {...(itm?.required && { required: true })}\n                  {...(invalidFields.has(itm.action) && { className: 'invalid' })}\n                  {...(itm?.type === 'number' && { step: \"0.01\", min: 0, max: 1000000 })}\n                  type={itm?.type}\n                  key={i}\n                />}\n                { itm?.type === 'zip' && <>\n                  <DebounceInput\n                    required\n                    type=\"text\"\n                    placeholder={itm.placeholder}\n                    debounceTimeout={700}\n                    value={postCode}\n                    onChange={e => {\n                      setPostCode(e.target.value);\n                      setPostCodeAddress('');\n                      updateFormValues(itm.action, 'text', '/');\n                    }}\n                  />\n                  {postCode && <select\n                    required\n                    disabled={searchResult.data === null}\n                    defaultValue={itm.action}\n                    value={postCodeAddress}\n                    onChange={(e) => {\n                      setPostCodeAddress((e.target as HTMLSelectElement).value);\n                      updateFormValues(itm.action, 'select', (e.target as HTMLSelectElement).value);\n                    }}\n                    className={`mt-1 ${invalidFields.has(itm.action) && 'invalid'}`} key={i}>\n                      <option value={''} disabled selected>{searchResult.loading ? \"Loading...\" : !searchResult.data ? \"\" : \"Select your Address\"}</option>\n                      {searchResult.data && searchResult.data.map(item => (\n                        <option value={item.label}>\n                        {item.label as String}\n                      </option>\n                    ))}\n                  </select>}\n                  </>\n                }\n                { itm?.type === 'select' && <select required onChange={(e) => updateFormValues(itm.action, itm?.type, e.target.value)} defaultValue={formValues[itm.action]} value={formValues[itm.action]} key={i}>\n                    <option disabled selected hidden></option>\n                    {itm?.options && Object.entries(itm?.options).map(([key, title]) => (\n                      <option key={key} value={key}>\n                        {title as String}\n                      </option>\n                    ))}\n                  </select>\n                }\n                </> : \n                <button type='submit' {...(invalidFields.size > 0  ? { disabled: true } : {disabled: false})} style={{marginTop: '15px'}}\n                  onClick={(e) => {\n                    const valid:boolean = validateForm(item.form?.value, formValues) || false;\n                    invalidFields.size === 0 && buttonAction(itm.action);\n                    const target = e.target as HTMLButtonElement\n                    target.disabled = valid;\n                  }} >Start Chat</button>}\n                  \n              </>)}\n            </div>\n          </form>}\n        </MyPost>\n      </>\n    };\n  \n    const eventMessage = (item) => {\n      return <>\n        <EventPost key={item.messageId}>\n          <img src={icoYouFibre} /> {item.message && <span dangerouslySetInnerHTML={{ __html: item.message.replaceAll(/\\r\\n|\\n/g, \"<br />\") }} />}\n        </EventPost>\n      </>\n    };\n\n    switch(item.senderType){\n      case \"AGENT\": return agentMessage(item);\n      case \"CUSTOMER\": return customerMessage(item);\n      case \"EVENT\": return eventMessage(item);\n      default: return customerMessage(item);\n    }\n};\n\nexport default Message;"],"names":["Message","_a","item","buttonAction","setChatForm","gContext","useContext","ChatGlobalContext","formRef","useRef","_b","useState","formValues","setFormValues","_c","postCode","setPostCode","_d","postCodeAddress","setPostCodeAddress","_e","Set","invalidFields","setInvalidFields","_f","available","salesStatus","loading","data","searchResult","setSearchResult","useEffect","current","__assign","length","loadOptionsAsync","input","__awaiter","updateFormValues","loadZipCodesAsync","zipList","sent","console","error","error_1","action","type","value","tmpInvalidFields","validateFormInput","delete","add","getIcon","url","window","openFile","open","split","pop","toLocaleLowerCase","React","createElement","BsFiletypePdf","className","onClick","BsFiletypeTxt","BsFiletypeMp4","BsFiletypeMp3","InlineSvg","src","goSetTwilioChat","twilioChat","lightboxUrl","props","__rest","svgContent","setSvgContent","fetch","text","svgText","error_2","dangerouslySetInnerHTML","__html","customerMessage","Fragment","MyPost","key","messageId","form","message","linkifyHtml","target","replaceAll","Array","isArray","files","map","file","Row","from","createdAt","moment","format","itm","i","title","ref","method","onChange","e","placeholder","maxLength","required","has","step","min","max","DebounceInput","debounceTimeout","disabled","defaultValue","selected","label","hidden","options","Object","entries","size","style","marginTop","valid","validateForm","senderType","YFPost","icoYouFibre","Col","agentMessage","EventPost","eventMessage"],"mappings":"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"}

package/dist/src/TwilioChat/components/MessageList.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as t,__rest as e,__assign as n,__spreadArray as l,__awaiter as o,__generator as i}from"../../../node_modules/tslib/tslib.es6.js";import a,{useContext as r,useState as s,useRef as c,useEffect as u}from"react";import d from"../../../node_modules/styled-components/dist/styled-components.browser.esm.js";import h from"../../context/ChatGlobalContext.js";import v from"./Message.js";import m from"../../../_virtual/moment.js";import{defaultMessages as C,initialTwilioChatState as f,userTypeLabels as g,categories as w,yesAccountHolder as p,notAccountHolder as b,newAccountHolder as y}from"../../utils/chats.js";import{connectToWebsocket as T,scrollToBottom as I,didAgentPost as E,getFiles as _,sendMessage as U,createConversation as S,getToken as x}from"../../services/chatService.js";import A from"./TypingIndicator.js";import O from"./styled/ChatContentList.js";import j from"./styled/Splitter.js";import D from"../../../node_modules/uuid/dist/esm-browser/v4.js";var N,k,L=function(t){e(t,[]);var d=r(h),N=s(null),k=N[0],L=N[1],M=s({}),V=M[0],W=M[1],B=s(C),H=B[0],z=B[1],G=c(H),P=c(null),Y=s(!0),q=Y[0];Y[1];var J,K=c([]),Q=s(null),X=Q[0],Z=Q[1],$=s(!1),tt=$[0],et=$[1];u(function(){},[]),u(function(){var t,e,n;if(null==d?void 0:d.twilioChat.chatUserId){var l=k||D();L(l),localStorage.setItem("chatSessionId",l),P.current||(P.current=T(l)),null===(t=P.current)||void 0===t||t.on("connect",function(){console.log("Connected to WebSocket server")}),null===(e=P.current)||void 0===e||e.on("connect_error",function(t){console.log("Connect error due to ".concat(t.message)),P.current=null,P.current=T(null==d?void 0:d.twilioChat.chatUserId)}),null===(n=P.current)||void 0===n||n.on("disconnect",function(t){console.log("Disconnected: ".concat(t)),P.current=null,P.current=T(null==d?void 0:d.twilioChat.chatUserId)})}else z(C)},[null==d?void 0:d.twilioChat.chatUserId]),u(function(){var t;(null==d?void 0:d.twilioChat.chatCaseId)&&(P.current&&(null==d?void 0:d.twilioChat.chatCaseId)&&P.current.emit("joinRoom",null==d?void 0:d.twilioChat.chatCaseId),P.current&&!P.current.listeners("case-event-".concat(null==d?void 0:d.twilioChat.chatCaseId)).length&&(null===(t=P.current)||void 0===t||t.on("case-event-".concat(null==d?void 0:d.twilioChat.chatCaseId),function(t){var e,l;switch(t.type){case"CASE_UPDATED":d.twilioChat.agentId=null===(e=t.data.properties)||void 0===e?void 0:e.OwnerId;break;case"CONVERSATION_CLOSED":null==d||d.goSetTwilioChat(n(n({},f),{openChat:null==d?void 0:d.twilioChat.openChat,fullscreen:null==d?void 0:d.twilioChat.fullscreen,side:null==d?void 0:d.twilioChat.side,chatClosing:"CUSTOMER"!==t.data.properties.ClosedBy})),(null==d?void 0:d.twilioChat.chatCaseId)&&(null===(l=null==P?void 0:P.current)||void 0===l||l.emit("leaveRoom",null==d?void 0:d.twilioChat.chatCaseId));break;case"MESSAGE_CREATED":ot(t.data)}})))},[null==d?void 0:d.twilioChat.chatCaseId]),u(function(){var t;X&&(G.current=null===(t=G.current)||void 0===t?void 0:t.filter(function(t){return!t.form}),z(G.current),I(),setTimeout(function(){var t=Array.from(new Map(l([X],G.current,!0).map(function(t){return[t.messageId,t]})).values());G.current=t;var e=n(n({},null==d?void 0:d.twilioChat),{messages:t,chatUnreaded:(null==d?void 0:d.twilioChat.chatConversationId)&&(!(null==d?void 0:d.twilioChat.openChat)||!(null==d?void 0:d.twilioChat.visibilityChange)),typingAgent:!1,agentId:null==d?void 0:d.twilioChat.agentId,lastTimeActive:Date.now()});E(H)&&(e=n(n({},e),{lastTimeActive:Date.now()})),null==d||d.goSetTwilioChat(e),I(),Z(null)},500))},[X]),u(function(){z(null==d?void 0:d.twilioChat.messages),G.current=null==d?void 0:d.twilioChat.messages},[null==d?void 0:d.twilioChat.messages]),u(function(){tt&&K.current.length>0&&!J?J=setInterval(function(){var t=[K.current[0],K.current.slice(1)||[]],e=t[0],n=t[1];K.current=n,Z(e),I(),0===K.current.length&&(et(!1),clearInterval(J))},600):tt||(et(!1),clearInterval(J))},[tt]);var nt=function(t){((null==d?void 0:d.twilioChat.chatActive)||(null==d?void 0:d.twilioChat.chatCaseId))&&setTimeout(function(){switch(t){case"new_customer":null==d||d.goSetTwilioChat(n(n({},null==d?void 0:d.twilioChat),{chatUserType:"NEW_CUSTOMER"})),K.current=y,et(!0);break;case"not_customer":null==d||d.goSetTwilioChat(n(n({},null==d?void 0:d.twilioChat),{chatUserType:"NOT_ACCOUNT_HOLDER"})),K.current=b,et(!0);break;case"old_customer":null==d||d.goSetTwilioChat(n(n({},null==d?void 0:d.twilioChat),{chatUserType:"ACCOUNT_HOLDER"})),K.current=p,et(!0);break;case"submit_form":V.full_name&&V.address&&"/"!==V.address&&V.email&&(null==d?void 0:d.twilioChat.chatUserType)&&("ACCOUNT_HOLDER"===(null==d?void 0:d.twilioChat.chatUserType)&&void 0!==V.last_bill||"ACCOUNT_HOLDER"!==(null==d?void 0:d.twilioChat.chatUserType))&&V.category&&lt("<b>".concat(g[null==d?void 0:d.twilioChat.chatUserType],"</b><br /><b>Full name</b>: ").concat(V.full_name,"<br /><b>Email</b>: ").concat(V.email,"<br /><b>Address</b>: ").concat(V.address,"<br />").concat(void 0!==V.last_bill?"<b>What was the total value of your last bill</b>: "+V.last_bill+"<br />":"","<b>What do you need help with today</b>: ").concat(w[V.category]))}},500)},lt=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return o(void 0,l([],t,!0),void 0,function(t){var e,l,o,a,r,s,c,u,h,v,m;return void 0===t&&(t=""),i(this,function(i){switch(i.label){case 0:return null==d||d.goSetTwilioChat(n(n({},null==d?void 0:d.twilioChat),{chatLoading:!0,chatUsername:V.full_name,chatEmail:V.email,chatCategory:V.category,chatAddress:V.address,chatLastBill:V.last_bill,visibilityChange:!0})),[4,x(V.email)];case 1:return(e=i.sent())?(null==d||d.goSetTwilioChat(n(n({},null==d?void 0:d.twilioChat),{token:e})),[4,S(V.full_name,V.email,V.address,V.last_bill,null==d?void 0:d.twilioChat.chatUserType,V.category,q)]):[3,3];case 2:return(l=i.sent())&&(o={},o=409===(null==l?void 0:l.statusCode)?(null===(a=null==l?void 0:l.data)||void 0===a?void 0:a.body)?{outage:!0,outageMessage:null===(r=null==l?void 0:l.data)||void 0===r?void 0:r.body,outageTitle:null===(s=null==l?void 0:l.data)||void 0===s?void 0:s.header,allowCreateChat:null===(c=null==l?void 0:l.data)||void 0===c?void 0:c.allowCreateChat}:{outage:!0,outageMessage:null==l?void 0:l.message,outageTitle:"Chat not available",allowCreateChat:!1}:201===(null==l?void 0:l.statusCode)&&(null==l?void 0:l.data)?{logged:!0,chatUserId:null===(u=null==l?void 0:l.data)||void 0===u?void 0:u.participantId,chatUsername:V.full_name,chatConversationId:null===(h=null==l?void 0:l.data)||void 0===h?void 0:h.conversationId,token:null===(v=null==l?void 0:l.data)||void 0===v?void 0:v.caseId,chatCaseId:null===(m=null==l?void 0:l.data)||void 0===m?void 0:m.caseId,messages:[],visibilityChange:!0}:{outage:!0,outageMessage:"Please try later, chat is not available at the moment.",outageTitle:"Chat not available",allowCreateChat:!1},null==d||d.goSetTwilioChat(n(n({},null==d?void 0:d.twilioChat),o)),it({id:"".concat(Date.now(),"-0000-0000-0000-000000000000"),type:"EVENT",title:"Waiting for the agent to join the chat."},null),U(t)),[3,4];case 3:null==d||d.goSetTwilioChat(n(n({},null==d?void 0:d.twilioChat),{chatLoading:!1})),i.label=4;case 4:return[2]}})})},ot=function(t,e){return o(void 0,void 0,void 0,function(){var e,n;return i(this,function(l){switch(l.label){case 0:if(!t||(null==d?void 0:d.twilioChat.messages.some(function(e){return e.messageId===t.id})))return[3,6];l.label=1;case 1:return l.trys.push([1,5,,6]),t.properties.Files?[4,_(t.properties.Files)]:[3,3];case 2:return e=l.sent(),0===Object.keys(e).length&&(e=null),it(t,e),[3,4];case 3:it(t,[]),l.label=4;case 4:return[3,6];case 5:return n=l.sent(),console.error("Error fetching message:",n),[3,6];case 6:return[2]}})})},it=function(t,e,n){var o={senderType:"EVENT"!==t.type?t.properties.SenderType:t.type,createdAt:m(new Date).format(),from:"EVENT"!==t.type?t.properties.From:t.type,message:"EVENT"!==t.type?t.properties.Body:t.title,form:null,files:e,messageId:t.id,fromId:"EVENT"!==t.type?t.createdBy.id:"YouFibre"};I(),K.current=l(l([],K.current,!0),[o],!1),et(!0)};return a.createElement(R,null,a.createElement(O,{id:"ChatContentList"},P.current&&a.createElement(A,{sc:P}),X&&a.createElement(a.Fragment,null,a.createElement(F,null,a.createElement(j,null),a.createElement(v,{item:X,buttonAction:nt,setChatForm:W}))),H&&H.map(function(t,e){return a.createElement(a.Fragment,null,t.senderType&&a.createElement(v,{item:t,buttonAction:nt,setChatForm:W}),Object.keys(H).length-1!==e&&a.createElement(j,null))})))},R=d.div(N||(N=t(["\n  width: 100%;\n  flex: 1;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column-reverse;\n"],["\n  width: 100%;\n  flex: 1;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column-reverse;\n"]))),F=d.div(k||(k=t(["\n  &, .animation {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    position: inherit;\n    margin-bottom: -64px;\n    animation: slideIn .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n  }\n  @keyframes slideIn {\n    from {\n      margin-bottom: -64px;\n    }\n    to {\n      margin-bottom: 0px;\n    }\n  }\n"],["\n  &, .animation {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    position: inherit;\n    margin-bottom: -64px;\n    animation: slideIn .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n  }\n  @keyframes slideIn {\n    from {\n      margin-bottom: -64px;\n    }\n    to {\n      margin-bottom: 0px;\n    }\n  }\n"])));export{L as default};
+//# sourceMappingURL=MessageList.js.map

package/dist/src/TwilioChat/components/MessageList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.js","sources":["../../../../src/TwilioChat/components/MessageList.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from \"react\";\nimport { io, Socket } from 'socket.io-client';\nimport styled from 'styled-components';\nimport ChatGlobalContext from \"../../context/ChatGlobalContext\";\nimport Message from \"./Message\";\nimport moment from 'moment';\nimport { categories, defaultMessages, initialTwilioChatState, newAccountHolder, notAccountHolder, userTypeLabels, yesAccountHolder } from \"../../utils/chats\";\nimport { connectToWebsocket, createConversation, didAgentPost, getAllMessages, getFiles, getToken, scrollToBottom, sendMessage } from \"../../services/chatService\";\nimport { v4 as uuidv4 } from 'uuid';\nimport TypingIndicator from \"./TypingIndicator\";\nimport ChatContentList from \"./styled/ChatContentList\";\nimport Splitter from \"./styled/Splitter\";\n\ninterface Message {\n  createdAt: string;\n  from?: string | null;\n  files?: string | null;\n  message: string | null;\n  form: FormType | null;\n  messageId: string;\n  fromId: string;\n  senderType: string;\n}\n\ninterface FormType {\n  type: string;\n  value: Array<{ title: string; action: string; placeholder?: string | null; type?: string; required?: boolean; options?:object }>;\n}\n  \ntype UserType = 'NEW_CUSTOMER' | 'ACCOUNT_HOLDER' | 'NOT_ACCOUNT_HOLDER';\n\nconst MessageList = ({...props}) => {\n  const gContext: any = useContext(ChatGlobalContext);\n  const [chatSessionId, setChatSessionId] = useState<string | null>(null);\n  const [chatForm, setChatForm] = useState<{ [key: string]: any }>({});\n  const [messages, setMessages] = useState<Message[]>(defaultMessages);\n  const messagesRef = useRef<Message[]>(messages);\n  const sc = useRef<Socket | null>(null);\n\n  const [allowCreateChat, setAllowCreateChat] = useState(true);\n  const messageRef = useRef<Message[]>([]);\n  const [message, setMessage] = useState<Message|null>(null);\n  const [newMessage, setNewMessage] = useState<boolean>(false);\n\n  useEffect(() => {\n \n  }, []);\n  \n  useEffect(() => {\n    if(gContext?.twilioChat.chatUserId){\n      const tmpUUID = chatSessionId || uuidv4();\n      setChatSessionId(tmpUUID);\n      localStorage.setItem('chatSessionId', tmpUUID);  \n      if(!sc.current) sc.current = connectToWebsocket(tmpUUID);\n      sc.current?.on('connect', () => {\n        console.log('Connected to WebSocket server');\n      });\n      sc.current?.on(\"connect_error\", (err) => {\n        console.log(`Connect error due to ${err.message}`);\n        sc.current = null;\n        sc.current = connectToWebsocket(gContext?.twilioChat.chatUserId);\n      });  \n      sc.current?.on(\"disconnect\", (reason) => {\n        console.log(`Disconnected: ${reason}`);\n        sc.current = null;\n        sc.current = connectToWebsocket(gContext?.twilioChat.chatUserId);\n      });\n    } else {\n      setMessages(defaultMessages);\n    }\n  }, [gContext?.twilioChat.chatUserId]);\n  \n  useEffect(() => {\n    if(gContext?.twilioChat.chatCaseId){\n      // Subscribe to room with Case ID\n      sc.current && gContext?.twilioChat.chatCaseId && sc.current.emit(\"joinRoom\", gContext?.twilioChat.chatCaseId);  \n      // Listen events only for our Case/Conversation\n      sc.current && !sc.current.listeners(`case-event-${gContext?.twilioChat.chatCaseId}`).length && sc.current?.on(`case-event-${gContext?.twilioChat.chatCaseId}`, (data) => {    \n        switch(data.type){\n          case \"CASE_UPDATED\": \n            gContext.twilioChat.agentId = data.data.properties?.OwnerId;\n            // gContext?.goSetTwilioChat({...gContext?.twilioChat, agentId: gContext?.twilioChat.agentId});\n            break;\n          case \"CONVERSATION_CLOSED\":\n            gContext?.goSetTwilioChat({\n              ...initialTwilioChatState,\n              openChat: gContext?.twilioChat.openChat,\n              fullscreen: gContext?.twilioChat.fullscreen,\n              side: gContext?.twilioChat.side,\n              chatClosing: data.data.properties.ClosedBy !== 'CUSTOMER'\n            });\n            gContext?.twilioChat.chatCaseId && sc?.current?.emit(\"leaveRoom\", gContext?.twilioChat.chatCaseId);\n            break;\n          case \"MESSAGE_CREATED\": receiveMessage(data.data, true); break;\n          default: break;\n        }\n      });\n    }\n  }, [gContext?.twilioChat.chatCaseId]);\n  \n  useEffect(() => {\n    if(message){\n      messagesRef.current = messagesRef.current?.filter(item => !item.form);\n      setMessages(messagesRef.current);\n      scrollToBottom();\n      setTimeout(() => {\n        // Merge new messages with existing ones with unique messageId\n        const tmpMessages = Array.from(new Map([message, ...messagesRef.current].map(item => [item.messageId, item])).values());\n        messagesRef.current = tmpMessages;\n        let tmpState = {\n          ...gContext?.twilioChat, \n          messages: tmpMessages, \n          chatUnreaded: gContext?.twilioChat.chatConversationId && (!gContext?.twilioChat.openChat || !gContext?.twilioChat.visibilityChange),\n          typingAgent: false, \n          agentId: gContext?.twilioChat.agentId, \n          lastTimeActive: Date.now()\n        };\n        // Check if Agent has posted to start timer\n        if(didAgentPost(messages)){ \n          tmpState = {...tmpState, lastTimeActive: Date.now()};\n        }          \n        gContext?.goSetTwilioChat(tmpState);\n        scrollToBottom();\n        setMessage(null);\n      }, 500);\n    }\n  }, [message]);\n  \n  useEffect(() => {\n    setMessages(gContext?.twilioChat.messages);\n    messagesRef.current = gContext?.twilioChat.messages;\n  }, [gContext?.twilioChat.messages]);\n  \n  let newMessageInterval:any;\n  \n  useEffect(() => {\n    // Buffer for new messages\n    if(newMessage && messageRef.current.length > 0 && !newMessageInterval){\n      newMessageInterval = setInterval(() => {\n        const [first, rest] = [messageRef.current[0], messageRef.current.slice(1) || []];\n        messageRef.current = rest;\n        setMessage(first);\n        scrollToBottom();\n        if(messageRef.current.length === 0){\n          setNewMessage(false);\n          clearInterval(newMessageInterval);\n        }\n      }, 600);   \n    } else if (!newMessage) {\n      setNewMessage(false);\n      clearInterval(newMessageInterval);\n    } else {\n\n    }\n  }, [newMessage]);\n    \n  const buttonAction = (action) => {\n    if(gContext?.twilioChat.chatActive || gContext?.twilioChat.chatCaseId){\n      setTimeout(() => {\n        switch(action){\n          case 'new_customer': \n            gContext?.goSetTwilioChat({...gContext?.twilioChat, chatUserType: 'NEW_CUSTOMER'});\n            messageRef.current = newAccountHolder;\n            setNewMessage(true);\n            break;\n          case 'not_customer': \n            gContext?.goSetTwilioChat({...gContext?.twilioChat, chatUserType: 'NOT_ACCOUNT_HOLDER'});\n            messageRef.current = notAccountHolder;\n            setNewMessage(true);\n            break;\n          case 'old_customer': \n            gContext?.goSetTwilioChat({...gContext?.twilioChat, chatUserType: 'ACCOUNT_HOLDER'});\n            messageRef.current = yesAccountHolder;\n            setNewMessage(true);\n            break;\n          case 'submit_form':\n              chatForm.full_name && \n              chatForm.address && chatForm.address !== '/' && \n              chatForm.email && \n              gContext?.twilioChat.chatUserType && \n              (((gContext?.twilioChat.chatUserType === \"ACCOUNT_HOLDER\") && typeof chatForm.last_bill !== \"undefined\") || (gContext?.twilioChat.chatUserType !== \"ACCOUNT_HOLDER\")) &&\n              chatForm.category && \n              submitForm(`<b>${userTypeLabels[gContext?.twilioChat.chatUserType]}</b><br /><b>Full name</b>: ${chatForm.full_name}<br /><b>Email</b>: ${chatForm.email}<br /><b>Address</b>: ${chatForm.address}<br />${(typeof chatForm.last_bill !== 'undefined')?'<b>What was the total value of your last bill</b>: '+chatForm.last_bill+'<br />':''}<b>What do you need help with today</b>: ${categories[chatForm.category]}`);\n            break;\n          default: break;\n        }\n      }, 500);\n    }\n  };\n\n  const submitForm = async (message:string = '') => { \n    gContext?.goSetTwilioChat({...gContext?.twilioChat, \n      chatLoading: true,\n      chatUsername: chatForm.full_name,\n      chatEmail: chatForm.email,\n      chatCategory: chatForm.category,\n      chatAddress: chatForm.address,\n      chatLastBill: chatForm.last_bill,\n      visibilityChange: true\n    });\n\n    // Create Token  \n    const tmpToken = await getToken(chatForm.email);\n    if(tmpToken){\n      gContext?.goSetTwilioChat({...gContext?.twilioChat, \n        token: tmpToken\n      });\n      // Create Conversation      \n      const tmpConversation = await createConversation(\n        chatForm.full_name,\n        chatForm.email,\n        chatForm.address,\n        chatForm.last_bill,\n        gContext?.twilioChat.chatUserType,\n        chatForm.category,\n        allowCreateChat\n      );\n      if(tmpConversation){\n        let tmpMessage:any = {};\n        if (tmpConversation?.statusCode === 409) {\n          tmpMessage = tmpConversation?.data?.body ? {\n              outage: true,\n              outageMessage: tmpConversation?.data?.body,\n              outageTitle: tmpConversation?.data?.header,\n              allowCreateChat: tmpConversation?.data?.allowCreateChat,\n            } : {\n              outage: true,\n              outageMessage: tmpConversation?.message,\n              outageTitle: 'Chat not available',\n              allowCreateChat: false,\n            };\n        } else if (tmpConversation?.statusCode === 201 && tmpConversation?.data) {\n          tmpMessage = {\n            logged: true,\n            chatUserId: tmpConversation?.data?.participantId,\n            chatUsername: chatForm.full_name,\n            chatConversationId: tmpConversation?.data?.conversationId,\n            token: tmpConversation?.data?.caseId,\n            chatCaseId: tmpConversation?.data?.caseId,\n            messages: [],\n            visibilityChange: true\n          };\n        } else {\n          tmpMessage = {\n            outage: true,\n            outageMessage: 'Please try later, chat is not available at the moment.',\n            outageTitle: 'Chat not available',\n            allowCreateChat: false,\n          };\n        }\n        gContext?.goSetTwilioChat({...gContext?.twilioChat, ...tmpMessage});\n        updateMessage({\n          id: `${Date.now()}-0000-0000-0000-000000000000`,\n          type: 'EVENT',\n          title: 'Waiting for the agent to join the chat.'},\n          null, true);\n        sendMessage(message);        \n      }    \n    } else {\n      gContext?.goSetTwilioChat({...gContext?.twilioChat, chatLoading: false});\n    }\n  };\n  \n  const receiveMessage = async (data:any, resetTimer:boolean) => {\n    if(data && !gContext?.twilioChat.messages.some(obj => obj.messageId === data.id)){\n      try{\n        if(data.properties.Files){\n          let tmpFiles:any = await getFiles(data.properties.Files);\n          if(Object.keys(tmpFiles).length === 0) tmpFiles = null;\n          updateMessage(data, tmpFiles, resetTimer);\n        } else {\n          updateMessage(data, [], resetTimer);\n        }\n      } catch (error) {\n        console.error('Error fetching message:', error);\n      }\n    }\n  };\n\n  const updateMessage = (data: any, files:any, resetTimer:boolean) => {\n    let tmpMessage:Message = {\n      senderType: data.type !== 'EVENT' ? data.properties.SenderType : data.type,\n      createdAt: moment(new Date()).format(),\n      from: data.type !== 'EVENT' ? data.properties.From : data.type,\n      message: data.type !== 'EVENT' ? data.properties.Body : data.title,\n      form: null,\n      files: files,\n      messageId: data.id,\n      fromId: data.type !== 'EVENT' ? data.createdBy.id : \"YouFibre\"\n    };\n    scrollToBottom();\n    messageRef.current = [ ...messageRef.current, tmpMessage];\n    setNewMessage(true);\n  };\n\n  return (\n    <ChatArea>\n      <ChatContentList id='ChatContentList'>\n        { sc.current && <TypingIndicator sc={sc} /> }\n        { message && <><Animation>   \n          <Splitter />     \n            {/* { (Object.keys(message).length - 1) !== i  && <Splitter /> }   */}\n            <Message item={message} buttonAction={buttonAction} setChatForm={setChatForm} />\n          </Animation></>\n        }\n        { messages && messages.map((item, index) => \n          <>\n          { item.senderType && <Message item={item} buttonAction={buttonAction} setChatForm={setChatForm} /> }\n          { (Object.keys(messages).length - 1) !== index  && <Splitter /> }\n          </>\n        )}\n      </ChatContentList>\n    </ChatArea>\n  );\n};\n\nconst ChatArea = styled.div`\n  width: 100%;\n  flex: 1;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst Animation = styled.div`\n  &, .animation {\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    position: inherit;\n    margin-bottom: -64px;\n    animation: slideIn .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n  }\n  @keyframes slideIn {\n    from {\n      margin-bottom: -64px;\n    }\n    to {\n      margin-bottom: 0px;\n    }\n  }\n`;\n\nexport default MessageList;\n"],"names":["MessageList","_a","__rest","gContext","useContext","ChatGlobalContext","_b","useState","chatSessionId","setChatSessionId","_c","chatForm","setChatForm","_d","defaultMessages","messages","setMessages","messagesRef","useRef","sc","_e","allowCreateChat","newMessageInterval","messageRef","_f","message","setMessage","_g","newMessage","setNewMessage","useEffect","twilioChat","chatUserId","tmpUUID","uuidv4","localStorage","setItem","current","connectToWebsocket","on","console","log","err","concat","reason","chatCaseId","emit","listeners","length","data","type","agentId","properties","OwnerId","goSetTwilioChat","__assign","initialTwilioChatState","openChat","fullscreen","side","chatClosing","ClosedBy","receiveMessage","filter","item","form","scrollToBottom","setTimeout","tmpMessages","Array","from","Map","__spreadArray","map","messageId","values","tmpState","chatUnreaded","chatConversationId","visibilityChange","typingAgent","lastTimeActive","Date","now","didAgentPost","setInterval","slice","first","rest","clearInterval","buttonAction","action","chatActive","chatUserType","newAccountHolder","notAccountHolder","yesAccountHolder","full_name","address","email","last_bill","category","submitForm","userTypeLabels","categories","chatLoading","chatUsername","chatEmail","chatCategory","chatAddress","chatLastBill","getToken","tmpToken","_j","sent","token","createConversation","tmpConversation","tmpMessage","statusCode","body","outage","outageMessage","outageTitle","header","logged","participantId","conversationId","caseId","_h","updateMessage","id","title","sendMessage","resetTimer","__awaiter","some","obj","Files","getFiles","tmpFiles","Object","keys","error","error_1","files","senderType","SenderType","createdAt","moment","format","From","Body","fromId","createdBy","React","ChatArea","createElement","ChatContentList","TypingIndicator","Fragment","Animation","Splitter","Message","index","styled","div","templateObject_1","__makeTemplateObject","templateObject_2"],"mappings":"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"}

package/dist/src/TwilioChat/components/NotificationBar.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{useContext as e,useState as o,useEffect as a}from"react";import i from"../../../node_modules/styled-components/dist/styled-components.browser.esm.js";import r from"../../context/ChatGlobalContext.js";import{IoIosCloseCircleOutline as p}from"../../../node_modules/react-icons/io/index.js";import s from"axios";import l from"../../../_virtual/react-markdown.js";import x from"../../../_virtual/index2.js";var m,c,d=i.div(m||(m=n(["\n    background-color: #f9423a;\n    width: 100%;\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n"],["\n    background-color: #f9423a;\n    width: 100%;\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n"]))),g=i.div(c||(c=n(["\n    position: relative;\n    margin: 0px auto;\n    width: calc(100% - 10px);\n    padding: 0px 5px;\n    max-width: 1338px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center; \n    align-content: center;\n    flex-direction: row;\n    gap: 10px;\n    small { p { \n        color: #000000 !important; \n        margin: 0px !important;\n        flex: 1;\n        text-align: center;\n        font-size: 14px !important;\n        font-weight: 400;\n        line-height: 21px !important;\n    }}\n    span {\n        color: #000000;\n        marging: 0px;\n        padding: 0px;\n        cursor: pointer;\n        transition: all 0.3s ease-in-out;\n        svg { transition: all 0.3s ease-in-out; }\n        &:hover {\n            color: #ffffff;\n            svg { transform: rotate(-90deg); }\n        }\n    }\n"],["\n    position: relative;\n    margin: 0px auto;\n    width: calc(100% - 10px);\n    padding: 0px 5px;\n    max-width: 1338px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center; \n    align-content: center;\n    flex-direction: row;\n    gap: 10px;\n    small { p { \n        color: #000000 !important; \n        margin: 0px !important;\n        flex: 1;\n        text-align: center;\n        font-size: 14px !important;\n        font-weight: 400;\n        line-height: 21px !important;\n    }}\n    span {\n        color: #000000;\n        marging: 0px;\n        padding: 0px;\n        cursor: pointer;\n        transition: all 0.3s ease-in-out;\n        svg { transition: all 0.3s ease-in-out; }\n        &:hover {\n            color: #ffffff;\n            svg { transform: rotate(-90deg); }\n        }\n    }\n"]))),f=function(){var n=e(r),i=o(null),m=i[0],c=i[1],f=o(!0),u=f[0],h=f[1];return a(function(){s.get("https://strapi.youfibre.com/api/information").then(function(t){n.setAppMessages(t.data.data)}).catch(function(t){n.setAppMessages(null)})},[]),a(function(){var t,e;c((null===(t=null==n?void 0:n.appMessages)||void 0===t?void 0:t.chat_banner_toggle)?null===(e=null==n?void 0:n.appMessages)||void 0===e?void 0:e.chat_banner_text:"")},[n.appMessages]),t.createElement(t.Fragment,null,m&&u&&t.createElement(d,{className:"text-white p-1"},t.createElement(g,null,t.createElement("small",null,t.createElement(l,{plugins:[x],className:"p-0",source:m,linkTarget:"_blank"})),t.createElement("span",{onClick:function(){return h(!1)}},t.createElement(p,null)))))};export{f as default};
+//# sourceMappingURL=NotificationBar.js.map

package/dist/src/TwilioChat/components/NotificationBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBar.js","sources":["../../../../src/TwilioChat/components/NotificationBar.tsx"],"sourcesContent":["import React, { useEffect, useState, useContext } from 'react';\nimport styled, { keyframes, css } from \"styled-components\";\nimport ChatGlobalContext from \"../../context/ChatGlobalContext\";\nimport { IoIosCloseCircleOutline } from \"react-icons/io\";\nimport axios from 'axios';\nimport ReactMarkdown from 'react-markdown'\nimport gfm from 'remark-gfm';\n\nconst Bar = styled.div`\n    background-color: #f9423a;\n    width: 100%;\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n`;\n\nconst Content = styled.div`\n    position: relative;\n    margin: 0px auto;\n    width: calc(100% - 10px);\n    padding: 0px 5px;\n    max-width: 1338px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center; \n    align-content: center;\n    flex-direction: row;\n    gap: 10px;\n    small { p { \n        color: #000000 !important; \n        margin: 0px !important;\n        flex: 1;\n        text-align: center;\n        font-size: 14px !important;\n        font-weight: 400;\n        line-height: 21px !important;\n    }}\n    span {\n        color: #000000;\n        marging: 0px;\n        padding: 0px;\n        cursor: pointer;\n        transition: all 0.3s ease-in-out;\n        svg { transition: all 0.3s ease-in-out; }\n        &:hover {\n            color: #ffffff;\n            svg { transform: rotate(-90deg); }\n        }\n    }\n`;\n\nconst NotificationBar = () => {\n    const gContext: any = useContext(ChatGlobalContext);\n    const [message, setMessage] = useState<string|null>(null);\n    const [showBar, setShowBar] = useState<boolean>(true);\n\n    useEffect(() => {\n        axios.get(`https://strapi.youfibre.com/api/information`)\n            .then(function (response) {\n                gContext.setAppMessages(response.data.data);\n            })\n            .catch(function (error) {\n                gContext.setAppMessages(null);\n            });\n    }, []);\n\n    useEffect(() => {\n        setMessage(gContext?.appMessages?.chat_banner_toggle ? gContext?.appMessages?.chat_banner_text : '');\n    }, [gContext.appMessages]);\n    \n    return (\n        <>\n            {message && showBar && <Bar className=\"text-white p-1\">\n                <Content>\n                    <small><ReactMarkdown plugins={[gfm]} className=\"p-0\" source={message} linkTarget=\"_blank\" /></small>\n                    <span onClick={() => setShowBar(false)}><IoIosCloseCircleOutline /></span>\n                </Content>\n            </Bar>}\n        </>\n    );\n};\n\nexport default NotificationBar;"],"names":["Bar","styled","div","templateObject_1","__makeTemplateObject","Content","templateObject_2","NotificationBar","gContext","useContext","ChatGlobalContext","_a","useState","message","setMessage","_b","showBar","setShowBar","useEffect","axios","get","then","response","setAppMessages","data","catch","error","appMessages","chat_banner_toggle","chat_banner_text","React","createElement","Fragment","className","ReactMarkdown","plugins","gfm","source","linkTarget","onClick","IoIosCloseCircleOutline"],"mappings":"6eAQA,QAAMA,EAAMC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,0OAAA,CAAA,6OAQhBC,EAAUJ,EAAOC,IAAGI,IAAAA,EAAAF,EAAA,CAAA,i1BAAA,CAAA,o1BAmCpBG,EAAkB,WACpB,IAAMC,EAAgBC,EAAWC,GAC3BC,EAAwBC,EAAsB,MAA7CC,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GACpBI,EAAwBH,GAAkB,GAAzCI,EAAOD,EAAA,GAAEE,EAAUF,EAAA,GAgB1B,OAdAG,EAAU,WACNC,EAAMC,IAAI,+CACLC,KAAK,SAAUC,GACZd,EAASe,eAAeD,EAASE,KAAKA,KAC1C,GACCC,MAAM,SAAUC,GACblB,EAASe,eAAe,KAC5B,EACR,EAAG,IAEHL,EAAU,mBACNJ,GAAgC,QAArBH,EAAAH,aAAQ,EAARA,EAAUmB,mBAAW,IAAAhB,OAAA,EAAAA,EAAEiB,oBAA0C,QAArBb,EAAAP,aAAQ,EAARA,EAAUmB,mBAAW,IAAAZ,OAAA,EAAAA,EAAEc,iBAAmB,GACrG,EAAG,CAACrB,EAASmB,cAGTG,EAAAC,cAAAD,EAAAE,SAAA,KACKnB,GAAWG,GAAWc,EAAAC,cAAC/B,EAAG,CAACiC,UAAU,kBAClCH,EAAAC,cAAC1B,EAAO,KACJyB,EAAAC,cAAA,QAAA,KAAOD,EAAAC,cAACG,GAAcC,QAAS,CAACC,GAAMH,UAAU,MAAMI,OAAQxB,EAASyB,WAAW,YAClFR,EAAAC,cAAA,OAAA,CAAMQ,QAAS,WAAM,OAAAtB,GAAW,EAAX,GAAmBa,EAAAC,cAACS,EAAuB,SAKpF"}

package/dist/src/TwilioChat/components/TypingIndicator.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{useContext as e,useState as o,useEffect as i}from"react";import l from"../../../node_modules/styled-components/dist/styled-components.browser.esm.js";import r from"../../context/ChatGlobalContext.js";var a,d=function(n){var l,a=n.sc,d=e(r),c=o(!1),p=c[0],f=c[1];return i(function(){var n;a.current&&(null==d?void 0:d.twilioChat.chatCaseId)&&(a.current.emit("joinRoom",null==d?void 0:d.twilioChat.chatCaseId),!a.current.listeners("web-chat-input-".concat(null==d?void 0:d.twilioChat.chatCaseId)).length&&(null===(n=a.current)||void 0===n||n.on("web-chat-input-".concat(null==d?void 0:d.twilioChat.chatCaseId),function(n){"AGENT"===n.sender&&f(!0)})))},[a,null==d?void 0:d.twilioChat.chatCaseId]),i(function(){p&&(f(!0),l=setTimeout(function(){f(!1),clearTimeout(l)},3e3))},[p]),p?t.createElement(s,null,t.createElement("small",null,"Agent is typing...")):null},s=l.div(a||(a=n(["\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  small {\n    position: absolute;\n    margin: 0px 3px 0px 0px;\n    font-size: 11px !important;\n    font-weight: 100;\n    line-height: 13px;\n    color: #015e9c;\n    background-color: #ddf0fc;\n    border: 1px solid #ffffff;\n    border-radius: 100px;\n    padding: 5px 15px;\n    z-index: 50;\n  }\n"],["\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  small {\n    position: absolute;\n    margin: 0px 3px 0px 0px;\n    font-size: 11px !important;\n    font-weight: 100;\n    line-height: 13px;\n    color: #015e9c;\n    background-color: #ddf0fc;\n    border: 1px solid #ffffff;\n    border-radius: 100px;\n    padding: 5px 15px;\n    z-index: 50;\n  }\n"])));export{d as default};
+//# sourceMappingURL=TypingIndicator.js.map

package/dist/src/TwilioChat/components/TypingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypingIndicator.js","sources":["../../../../src/TwilioChat/components/TypingIndicator.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState } from \"react\";\nimport styled from 'styled-components';\nimport ChatGlobalContext from \"../../context/ChatGlobalContext\";\n\nconst TypingIndicator = ({sc}) => {\n  const gContext: any = useContext(ChatGlobalContext);\n  const [typingAgent, setTypingAgent] = useState(false);\n\n  useEffect(() =>{\n    if(sc.current && gContext?.twilioChat.chatCaseId){\n      sc.current.emit(\"joinRoom\", gContext?.twilioChat.chatCaseId);  \n      !sc.current.listeners(`web-chat-input-${gContext?.twilioChat.chatCaseId}`).length && sc.current?.on(`web-chat-input-${gContext?.twilioChat.chatCaseId}`, (data) => {\n        if(data.sender === \"AGENT\"){\n          setTypingAgent(true);\n        }\n      });\n    }\n  }, [sc, gContext?.twilioChat.chatCaseId]);\n  \n  let typingTimeout:any;\n  \n  useEffect(() => {\n    if(typingAgent){\n      setTypingAgent(true);\n      typingTimeout = setTimeout(() => {\n        setTypingAgent(false);\n        clearTimeout(typingTimeout);\n      }, 3000);   \n    }\n  }, [typingAgent]);\n\n  return ( typingAgent ? <Agent><small>Agent is typing...</small></Agent> : null );\n};\n\nexport default TypingIndicator;\n\nconst Agent = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  small {\n    position: absolute;\n    margin: 0px 3px 0px 0px;\n    font-size: 11px !important;\n    font-weight: 100;\n    line-height: 13px;\n    color: #015e9c;\n    background-color: #ddf0fc;\n    border: 1px solid #ffffff;\n    border-radius: 100px;\n    padding: 5px 15px;\n    z-index: 50;\n  }\n`;"],"names":["TypingIndicator","_a","typingTimeout","sc","gContext","useContext","ChatGlobalContext","_b","useState","typingAgent","setTypingAgent","useEffect","current","twilioChat","chatCaseId","emit","listeners","length","on","data","sender","setTimeout","clearTimeout","React","Agent","createElement","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"kSAIA,MAAMA,EAAkB,SAACC,GAAC,IAepBC,EAfoBC,EAAEF,EAAAE,GACpBC,EAAgBC,EAAWC,GAC3BC,EAAgCC,GAAS,GAAxCC,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAyBlC,OAvBAI,EAAU,iBACLR,EAAGS,UAAWR,eAAAA,EAAUS,WAAWC,cACpCX,EAAGS,QAAQG,KAAK,WAAYX,eAAAA,EAAUS,WAAWC,aAChDX,EAAGS,QAAQI,UAAU,yBAAkBZ,aAAQ,EAARA,EAAUS,WAAWC,aAAcG,iBAAUhB,EAAAE,EAAGS,wBAASM,GAAG,yBAAkBd,eAAAA,EAAUS,WAAWC,YAAc,SAACK,GACrI,UAAhBA,EAAKC,QACNV,GAAe,EAEnB,IAEJ,EAAG,CAACP,EAAIC,eAAAA,EAAUS,WAAWC,aAI7BH,EAAU,WACLF,IACDC,GAAe,GACfR,EAAgBmB,WAAW,WACzBX,GAAe,GACfY,aAAapB,EACf,EAAG,KAEP,EAAG,CAACO,IAEKA,EAAcc,gBAACC,EAAK,KAACD,EAAAE,cAAA,QAAA,KAAA,uBAA4C,IAC5E,EAIMD,EAAQE,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yXAAA,CAAA"}

package/dist/src/TwilioChat/components/Widget.js

@@ -0,0 +1,2 @@
+import{__rest as l,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import i,{useContext as t,useState as e,useEffect as a}from"react";import n from"../../context/ChatGlobalContext.js";import d from"../../assets/images/chat.svg.js";import u from"../../assets/images/ico-close.png.js";import v from"./styled/WidgetButton.js";var s=function(s){var r,c,h;l(s,[]);var m=t(n),C=e(!1),f=C[0],p=C[1],w=e(!1),g=w[0],j=w[1];a(function(){var l;p(null===(l=null==m?void 0:m.twilioChat)||void 0===l?void 0:l.openChat)},[null===(r=null==m?void 0:m.twilioChat)||void 0===r?void 0:r.openChat]),a(function(){var l;j(null===(l=null==m?void 0:m.twilioChat)||void 0===l?void 0:l.fullscreen)},[null===(c=null==m?void 0:m.twilioChat)||void 0===c?void 0:c.fullscreen]);return i.createElement(v,{onClick:function(){return function(){var l,i,t,e,a;(null===(l=null==m?void 0:m.twilioChat)||void 0===l?void 0:l.chatClosing)&&(null==m||m.goResetTwilioChat());var n=o(o({},null==m?void 0:m.twilioChat),{openChat:!(null===(i=null==m?void 0:m.twilioChat)||void 0===i?void 0:i.openChat),outage:!(null==m?void 0:m.twilioChat.outage)});!(null===(t=null==m?void 0:m.twilioChat)||void 0===t?void 0:t.openChat)&&(null===(e=null==m?void 0:m.twilioChat)||void 0===e?void 0:e.chatUnreaded)&&(n=o(o({},n),{chatUnreaded:!1})),(null===(a=null==m?void 0:m.twilioChat)||void 0===a?void 0:a.messages)&&(null==m||m.goSetTwilioChat(n))}()},className:"YFChat ".concat(f?"open":""," ").concat(g?"fullscreen":"")},i.createElement("img",{src:d,className:"icon-default"}),i.createElement("img",{src:u,className:"icon-hover"}),(null===(h=null==m?void 0:m.twilioChat)||void 0===h?void 0:h.chatUnreaded)&&i.createElement("small",{className:"unread"},"1"))};export{s as default};
+//# sourceMappingURL=Widget.js.map

package/dist/src/TwilioChat/components/Widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.js","sources":["../../../../src/TwilioChat/components/Widget.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect } from \"react\";\nimport ChatGlobalContext from \"../../context/ChatGlobalContext\";\nimport icoChat from '../../assets/images/chat.svg';\nimport icoCloseChat from '../../assets/images/ico-close.png';\nimport WidgetButton from \"./styled/WidgetButton\";\n\nconst Widget = ({...props}) => {\n    const gContext: any = useContext(ChatGlobalContext);\n\n    const [openChat, setOpenChat] = useState(false);\n    const [fullscreen, setFullscreen] = useState(false);\n  \n    useEffect(() => {\n        setOpenChat(gContext?.twilioChat?.openChat);\n    }, [gContext?.twilioChat?.openChat]);\n  \n    useEffect(() => {\n        setFullscreen(gContext?.twilioChat?.fullscreen);\n    }, [gContext?.twilioChat?.fullscreen]);\n          \n    const chatToggle = () => {\n        gContext?.twilioChat?.chatClosing && gContext?.goResetTwilioChat();\n        let tmpState = {...gContext?.twilioChat, openChat: !gContext?.twilioChat?.openChat, outage: !gContext?.twilioChat.outage};\n        if(!gContext?.twilioChat?.openChat && gContext?.twilioChat?.chatUnreaded) tmpState = {...tmpState, chatUnreaded: false};\n        gContext?.twilioChat?.messages && gContext?.goSetTwilioChat(tmpState);\n    };\n\n    return (\n        <WidgetButton onClick={() => chatToggle()} className={`YFChat ${openChat ? 'open' : ''} ${fullscreen?'fullscreen':''}`}>\n          <img src={icoChat} className='icon-default' />\n          <img src={icoCloseChat} className='icon-hover' />\n          {gContext?.twilioChat?.chatUnreaded && <small className='unread'>1</small>}\n        </WidgetButton>\n    );\n};\n\nexport default Widget;"],"names":["Widget","_a","__rest","gContext","useContext","ChatGlobalContext","_e","useState","openChat","setOpenChat","_f","fullscreen","setFullscreen","useEffect","twilioChat","_b","_c","React","createElement","WidgetButton","onClick","chatClosing","goResetTwilioChat","tmpState","__assign","outage","_d","chatUnreaded","messages","goSetTwilioChat","chatToggle","className","concat","src","icoChat","icoCloseChat"],"mappings":"gVAMA,IAAMA,EAAS,SAACC,aAASC,EAAAD,EAAT,IACZ,IAAME,EAAgBC,EAAWC,GAE3BC,EAA0BC,GAAS,GAAlCC,EAAQF,EAAA,GAAEG,EAAWH,EAAA,GACtBI,EAA8BH,GAAS,GAAtCI,EAAUD,EAAA,GAAEE,EAAaF,EAAA,GAEhCG,EAAU,iBACNJ,EAAgC,QAApBR,EAAAE,aAAQ,EAARA,EAAUW,kBAAU,IAAAb,OAAA,EAAAA,EAAEO,SACtC,EAAG,CAAqB,QAApBO,EAAAZ,aAAQ,EAARA,EAAUW,kBAAU,IAAAC,OAAA,EAAAA,EAAEP,WAE1BK,EAAU,iBACND,EAAkC,QAApBX,EAAAE,aAAQ,EAARA,EAAUW,kBAAU,IAAAb,OAAA,EAAAA,EAAEU,WACxC,EAAG,CAAqB,QAApBK,EAAAb,aAAQ,EAARA,EAAUW,kBAAU,IAAAE,OAAA,EAAAA,EAAEL,aAS1B,OACIM,EAAAC,cAACC,EAAY,CAACC,QAAS,WAAM,OARd,0BACK,QAApBnB,EAAAE,eAAAA,EAAUW,sBAAUb,OAAA,EAAAA,EAAEoB,eAAelB,SAAAA,EAAUmB,qBAC/C,IAAIC,EAAQC,EAAAA,EAAA,CAAA,EAAOrB,aAAQ,EAARA,EAAUW,YAAU,CAAEN,qBAAWL,aAAQ,EAARA,EAAUW,iCAAYN,UAAUiB,SAAStB,aAAQ,EAARA,EAAUW,WAAWW,YAC1F,QAApBT,EAAAb,aAAQ,EAARA,EAAUW,kBAAU,IAAAE,OAAA,EAAAA,EAAER,YAAgC,QAApBkB,EAAAvB,aAAQ,EAARA,EAAUW,kBAAU,IAAAY,OAAA,EAAAA,EAAEC,gBAAcJ,SAAeA,GAAQ,CAAEI,cAAc,MAC7F,QAApBrB,EAAAH,eAAAA,EAAUW,kBAAU,IAAAR,OAAA,EAAAA,EAAEsB,YAAYzB,SAAAA,EAAU0B,gBAAgBN,GAChE,CAGiCO,EAAA,EAAcC,UAAW,UAAAC,OAAUxB,EAAW,OAAS,GAAE,KAAAwB,OAAIrB,EAAW,aAAa,KAChHM,EAAAC,cAAA,MAAA,CAAKe,IAAKC,EAASH,UAAU,iBAC7Bd,EAAAC,cAAA,MAAA,CAAKe,IAAKE,EAAcJ,UAAU,gBACb,UAApB5B,aAAQ,EAARA,EAAUW,sBAAUY,OAAA,EAAAA,EAAEC,eAAgBV,yBAAOc,UAAU,UAAQ,KAG1E"}

package/dist/src/TwilioChat/components/styled/ChatContent.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import e from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var i,o=e.div(i||(i=n(["\n    display: flex;\n    flex-direction: column;\n    background-color: #ffffff;\n    width: 350px;\n    height: 550px;\n    border-radius: 5px;\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    max-width: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    transition: max-height 0.5s ease-in-out;\n    &.show {\n        max-width: 350px;\n        max-height: 540px;\n    }\n    .cover {\n        background: rgba(255, 255, 255, 0.2);\n        position: absolute;\n        z-index: 92;\n        padding: 16px;\n        width: 100%;\n        height: calc(100% - 65px);\n        border-radius: 5px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        -webkit-user-select: none;\n        user-select: none;\n        text-align: center;\n        &.closed {\n            background: rgba(255, 255, 255, 0.9);\n            button { margin-top: 24px; }\n        }\n        &.upload {\n            background: rgba(9, 222, 158, 0.9);\n            button { margin-top: 24px; }\n        }\n        span { \n            font-size: 16px !important;  \n            line-height: 24px !important; \n            a {\n                text-decoration: underline;\n            }\n        }\n        animation: showCover .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n        \n        @keyframes showCover {\n        from {\n            opacity: 0;\n        }\n        to {\n            opacity: 1;\n        }\n        }\n    }\n    .files {\n        margin: 8px;\n        border-radius: 5px;\n        background-color: #c1f7e7;\n        padding: 0px;\n        overlay: none;\n        display: flex;  \n        flex-direction: column;\n        justify-content: center;\n        gap: 0px;\n        .file {\n        display: flex;\n        flex-direction: row;\n        border-radius: 3px;\n        justify-content: space-between;\n        align-items: center;\n        margin: 0.32px;\n        padding: 0.32px 8px;\n        gap: 16px;\n        &:hover {\n            background-color: #ffffff;\n        }\n        .fileName {\n            font-size: 11px !important;\n            line-height: 13px;\n            word-break: keep-all;\n            display: block;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n        .action {\n            width: 13px;\n            height: 13px;\n            opacity: 0.7;\n            cursor: pointer;\n            &:hover {\n            opacity: 1;\n            }\n        }\n\n        }\n    }\n    &.fullscreen {\n        max-width: 100% !important;\n        max-height: 100% !important;\n        position: fixed;\n        left: 0px;\n        top: 0px;\n        width: 100%;\n        height: 100%;\n        border-radius: 0px;\n        // @media (max-width: 768px) {\n        //   #listOfMessages {\n        //     max-height: calc(100vh - 210px);\n        //   }\n        //   .chat-content-container {\n        //     padding-bottom: 4rem;\n        //   }\n        // }\n        .cover {\n            &.closed {\n                height: 100%;\n            }\n        }\n    }\n    @media (max-width: 576px) {\n        position: fixed;\n        z-index: 100;\n        bottom: 0px;\n        right: 0px;\n        width: 100%;\n        height: 100%;\n        border-radius: 0px;\n        &.show {\n        max-width: 100%;\n        max-height: 100%;\n        }\n        .cover {\n        &.closed, &.upload {\n            height: 100%;\n        }\n        }\n    }\n"],["\n    display: flex;\n    flex-direction: column;\n    background-color: #ffffff;\n    width: 350px;\n    height: 550px;\n    border-radius: 5px;\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    max-width: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    transition: max-height 0.5s ease-in-out;\n    &.show {\n        max-width: 350px;\n        max-height: 540px;\n    }\n    .cover {\n        background: rgba(255, 255, 255, 0.2);\n        position: absolute;\n        z-index: 92;\n        padding: 16px;\n        width: 100%;\n        height: calc(100% - 65px);\n        border-radius: 5px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        -webkit-user-select: none;\n        user-select: none;\n        text-align: center;\n        &.closed {\n            background: rgba(255, 255, 255, 0.9);\n            button { margin-top: 24px; }\n        }\n        &.upload {\n            background: rgba(9, 222, 158, 0.9);\n            button { margin-top: 24px; }\n        }\n        span { \n            font-size: 16px !important;  \n            line-height: 24px !important; \n            a {\n                text-decoration: underline;\n            }\n        }\n        animation: showCover .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n        \n        @keyframes showCover {\n        from {\n            opacity: 0;\n        }\n        to {\n            opacity: 1;\n        }\n        }\n    }\n    .files {\n        margin: 8px;\n        border-radius: 5px;\n        background-color: #c1f7e7;\n        padding: 0px;\n        overlay: none;\n        display: flex;  \n        flex-direction: column;\n        justify-content: center;\n        gap: 0px;\n        .file {\n        display: flex;\n        flex-direction: row;\n        border-radius: 3px;\n        justify-content: space-between;\n        align-items: center;\n        margin: 0.32px;\n        padding: 0.32px 8px;\n        gap: 16px;\n        &:hover {\n            background-color: #ffffff;\n        }\n        .fileName {\n            font-size: 11px !important;\n            line-height: 13px;\n            word-break: keep-all;\n            display: block;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n        .action {\n            width: 13px;\n            height: 13px;\n            opacity: 0.7;\n            cursor: pointer;\n            &:hover {\n            opacity: 1;\n            }\n        }\n\n        }\n    }\n    &.fullscreen {\n        max-width: 100% !important;\n        max-height: 100% !important;\n        position: fixed;\n        left: 0px;\n        top: 0px;\n        width: 100%;\n        height: 100%;\n        border-radius: 0px;\n        // @media (max-width: 768px) {\n        //   #listOfMessages {\n        //     max-height: calc(100vh - 210px);\n        //   }\n        //   .chat-content-container {\n        //     padding-bottom: 4rem;\n        //   }\n        // }\n        .cover {\n            &.closed {\n                height: 100%;\n            }\n        }\n    }\n    @media (max-width: 576px) {\n        position: fixed;\n        z-index: 100;\n        bottom: 0px;\n        right: 0px;\n        width: 100%;\n        height: 100%;\n        border-radius: 0px;\n        &.show {\n        max-width: 100%;\n        max-height: 100%;\n        }\n        .cover {\n        &.closed, &.upload {\n            height: 100%;\n        }\n        }\n    }\n"])));export{o as default};
+//# sourceMappingURL=ChatContent.js.map

package/dist/src/TwilioChat/components/styled/ChatContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContent.js","sources":["../../../../../src/TwilioChat/components/styled/ChatContent.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst ChatContent = styled.div`\n    display: flex;\n    flex-direction: column;\n    background-color: #ffffff;\n    width: 350px;\n    height: 550px;\n    border-radius: 5px;\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    max-width: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    transition: max-height 0.5s ease-in-out;\n    &.show {\n        max-width: 350px;\n        max-height: 540px;\n    }\n    .cover {\n        background: rgba(255, 255, 255, 0.2);\n        position: absolute;\n        z-index: 92;\n        padding: 16px;\n        width: 100%;\n        height: calc(100% - 65px);\n        border-radius: 5px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        -webkit-user-select: none;\n        user-select: none;\n        text-align: center;\n        &.closed {\n            background: rgba(255, 255, 255, 0.9);\n            button { margin-top: 24px; }\n        }\n        &.upload {\n            background: rgba(9, 222, 158, 0.9);\n            button { margin-top: 24px; }\n        }\n        span { \n            font-size: 16px !important;  \n            line-height: 24px !important; \n            a {\n                text-decoration: underline;\n            }\n        }\n        animation: showCover .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n        \n        @keyframes showCover {\n        from {\n            opacity: 0;\n        }\n        to {\n            opacity: 1;\n        }\n        }\n    }\n    .files {\n        margin: 8px;\n        border-radius: 5px;\n        background-color: #c1f7e7;\n        padding: 0px;\n        overlay: none;\n        display: flex;  \n        flex-direction: column;\n        justify-content: center;\n        gap: 0px;\n        .file {\n        display: flex;\n        flex-direction: row;\n        border-radius: 3px;\n        justify-content: space-between;\n        align-items: center;\n        margin: 0.32px;\n        padding: 0.32px 8px;\n        gap: 16px;\n        &:hover {\n            background-color: #ffffff;\n        }\n        .fileName {\n            font-size: 11px !important;\n            line-height: 13px;\n            word-break: keep-all;\n            display: block;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n        .action {\n            width: 13px;\n            height: 13px;\n            opacity: 0.7;\n            cursor: pointer;\n            &:hover {\n            opacity: 1;\n            }\n        }\n\n        }\n    }\n    &.fullscreen {\n        max-width: 100% !important;\n        max-height: 100% !important;\n        position: fixed;\n        left: 0px;\n        top: 0px;\n        width: 100%;\n        height: 100%;\n        border-radius: 0px;\n        // @media (max-width: 768px) {\n        //   #listOfMessages {\n        //     max-height: calc(100vh - 210px);\n        //   }\n        //   .chat-content-container {\n        //     padding-bottom: 4rem;\n        //   }\n        // }\n        .cover {\n            &.closed {\n                height: 100%;\n            }\n        }\n    }\n    @media (max-width: 576px) {\n        position: fixed;\n        z-index: 100;\n        bottom: 0px;\n        right: 0px;\n        width: 100%;\n        height: 100%;\n        border-radius: 0px;\n        &.show {\n        max-width: 100%;\n        max-height: 100%;\n        }\n        .cover {\n        &.closed, &.upload {\n            height: 100%;\n        }\n        }\n    }\n`;\n\nexport default ChatContent;"],"names":["ChatContent","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,4lHAAA,CAAA"}

package/dist/src/TwilioChat/components/styled/ChatContentList.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import o from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var t,e=o.div(t||(t=n(["\n  width: calc(100% - 16px);\n  max-width: 700px;\n  position: relative;\n  margin: 0px auto;\n  padding: 8px 8px 29px 8px;\n  color: #000000;\n  flex: 1;\n  display: flex;\n  flex-direction: column-reverse;\n  text-align: left !important;\n  .chat-content-container {\n    padding-bottom: 29px;\n  }\n  button {\n    display: block;\n    background-color: #c1f7e7;\n    flex: 0;\n    padding: 5px;\n    border-radius: 5px;\n    color: #263238;\n    font-weight: 100;\n    font-size: 16px;\n    line-height: 24px;\n    font-weight: 100;\n    min-width: 40%;\n    border: 2px solid #08DE9E;\n    cursor: pointer;\n    &:hover {\n      background-color: #08DE9E;\n    }\n  }\n"],["\n  width: calc(100% - 16px);\n  max-width: 700px;\n  position: relative;\n  margin: 0px auto;\n  padding: 8px 8px 29px 8px;\n  color: #000000;\n  flex: 1;\n  display: flex;\n  flex-direction: column-reverse;\n  text-align: left !important;\n  .chat-content-container {\n    padding-bottom: 29px;\n  }\n  button {\n    display: block;\n    background-color: #c1f7e7;\n    flex: 0;\n    padding: 5px;\n    border-radius: 5px;\n    color: #263238;\n    font-weight: 100;\n    font-size: 16px;\n    line-height: 24px;\n    font-weight: 100;\n    min-width: 40%;\n    border: 2px solid #08DE9E;\n    cursor: pointer;\n    &:hover {\n      background-color: #08DE9E;\n    }\n  }\n"])));export{e as default};
+//# sourceMappingURL=ChatContentList.js.map

package/dist/src/TwilioChat/components/styled/ChatContentList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatContentList.js","sources":["../../../../../src/TwilioChat/components/styled/ChatContentList.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst ChatContentList = styled.div`\n  width: calc(100% - 16px);\n  max-width: 700px;\n  position: relative;\n  margin: 0px auto;\n  padding: 8px 8px 29px 8px;\n  color: #000000;\n  flex: 1;\n  display: flex;\n  flex-direction: column-reverse;\n  text-align: left !important;\n  .chat-content-container {\n    padding-bottom: 29px;\n  }\n  button {\n    display: block;\n    background-color: #c1f7e7;\n    flex: 0;\n    padding: 5px;\n    border-radius: 5px;\n    color: #263238;\n    font-weight: 100;\n    font-size: 16px;\n    line-height: 24px;\n    font-weight: 100;\n    min-width: 40%;\n    border: 2px solid #08DE9E;\n    cursor: pointer;\n    &:hover {\n      background-color: #08DE9E;\n    }\n  }\n`;\n\nexport default ChatContentList;"],"names":["ChatContentList","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAAkBC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,uqBAAA,CAAA"}

package/dist/src/TwilioChat/components/styled/ChatWrapper.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import t from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var i,e=t.div(i||(i=n(["\nposition: fixed;\nbottom: 40px;\nz-index: 202;\ndisplay: flex;\nflex-direction: column;\nalign-items: end;\ngap: 15px;\nmax-width: 350px;\n&.left {\n    align-items: start;\n    left: 40px;\n}\n&.right {\n    align-items: end;\n    right: 40px;\n}\n"],["\nposition: fixed;\nbottom: 40px;\nz-index: 202;\ndisplay: flex;\nflex-direction: column;\nalign-items: end;\ngap: 15px;\nmax-width: 350px;\n&.left {\n    align-items: start;\n    left: 40px;\n}\n&.right {\n    align-items: end;\n    right: 40px;\n}\n"])));export{e as default};
+//# sourceMappingURL=ChatWrapper.js.map

package/dist/src/TwilioChat/components/styled/ChatWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatWrapper.js","sources":["../../../../../src/TwilioChat/components/styled/ChatWrapper.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst ChatWrapper = styled.div`\nposition: fixed;\nbottom: 40px;\nz-index: 202;\ndisplay: flex;\nflex-direction: column;\nalign-items: end;\ngap: 15px;\nmax-width: 350px;\n&.left {\n    align-items: start;\n    left: 40px;\n}\n&.right {\n    align-items: end;\n    right: 40px;\n}\n`;\n\nexport default ChatWrapper;"],"names":["ChatWrapper","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,+PAAA,CAAA"}

package/dist/src/TwilioChat/components/styled/EventPost.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import e from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var t,i=e.div(t||(t=n(["\n    width: calc(100% - 10px);\n    padding: 5px;\n    flex: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 5px;\n    img {\n        flex: 0;\n        width: 40px;\n        height: 40px;\n    }\n    span {\n        display: block;\n        background-color: #00468b;\n        flex: 1;\n        padding: 5px 15px;\n        max-width: 80%;\n        border-radius: 5px;\n        color: #ffffff;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 100;\n        text-align: center;\n        flex-wrap: wrap;\n        word-break: break-word;\n        b {\n        font-weight: 900;\n        }\n    }\n"],["\n    width: calc(100% - 10px);\n    padding: 5px;\n    flex: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 5px;\n    img {\n        flex: 0;\n        width: 40px;\n        height: 40px;\n    }\n    span {\n        display: block;\n        background-color: #00468b;\n        flex: 1;\n        padding: 5px 15px;\n        max-width: 80%;\n        border-radius: 5px;\n        color: #ffffff;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 100;\n        text-align: center;\n        flex-wrap: wrap;\n        word-break: break-word;\n        b {\n        font-weight: 900;\n        }\n    }\n"])));export{i as default};
+//# sourceMappingURL=EventPost.js.map

package/dist/src/TwilioChat/components/styled/EventPost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventPost.js","sources":["../../../../../src/TwilioChat/components/styled/EventPost.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst EventPost = styled.div`\n    width: calc(100% - 10px);\n    padding: 5px;\n    flex: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 5px;\n    img {\n        flex: 0;\n        width: 40px;\n        height: 40px;\n    }\n    span {\n        display: block;\n        background-color: #00468b;\n        flex: 1;\n        padding: 5px 15px;\n        max-width: 80%;\n        border-radius: 5px;\n        color: #ffffff;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 100;\n        text-align: center;\n        flex-wrap: wrap;\n        word-break: break-word;\n        b {\n        font-weight: 900;\n        }\n    }\n`;\n\nexport default EventPost;"],"names":["EventPost","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAAYC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,wrBAAA,CAAA"}

package/dist/src/TwilioChat/components/styled/Header.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import o from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var t,r=o.div(t||(t=n(["\n    background-color: #08DE9E;\n    width: calc(100% - 30px);\n    padding: 15px;\n    color: #ffffff;\n    flex: 0;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 15px;\n    -webkit-box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n    box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n    z-index: 91;\n    img {\n        width: 40px;\n        height: 40px;\n        -object-fit: fill;\n        object-fit: fill;\n        padding: 7px;\n        border-radius: 200px;\n        cursor: pointer;\n        background-color: #FFFFFF;\n        &.close {\n            display: none;\n            background-color: transparent;\n        }\n    }\n    button {\n        border: none;\n        width: auto;\n        font-family: 'DM Sans' !important;\n        background-color: #ffffff !important;\n        color: #07131e !important;\n        font-size: 15px !important;\n        font-weight: 100 !important;\n        padding: 4px 24px 4px 24px !important;\n        border-radius: 100px !important;\n        transition: all 0.3s ease-in-out 0s;\n        &:hover {\n            background-color: #36d093 !important;\n        }\n    }\n    a {\n        color: #000000;\n        text-decoration: none;\n        width: auto;\n        &:hover {\n            text-decoration: none !important;\n            cursor: pointer;\n        }\n    }\n    span {\n        padding: 0px;\n    }\n    @media (max-width: 576px) {\n        img {\n            &.close {\n                display: block;\n            }\n        }\n    }\n"],["\n    background-color: #08DE9E;\n    width: calc(100% - 30px);\n    padding: 15px;\n    color: #ffffff;\n    flex: 0;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 15px;\n    -webkit-box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n    box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n    z-index: 91;\n    img {\n        width: 40px;\n        height: 40px;\n        -object-fit: fill;\n        object-fit: fill;\n        padding: 7px;\n        border-radius: 200px;\n        cursor: pointer;\n        background-color: #FFFFFF;\n        &.close {\n            display: none;\n            background-color: transparent;\n        }\n    }\n    button {\n        border: none;\n        width: auto;\n        font-family: 'DM Sans' !important;\n        background-color: #ffffff !important;\n        color: #07131e !important;\n        font-size: 15px !important;\n        font-weight: 100 !important;\n        padding: 4px 24px 4px 24px !important;\n        border-radius: 100px !important;\n        transition: all 0.3s ease-in-out 0s;\n        &:hover {\n            background-color: #36d093 !important;\n        }\n    }\n    a {\n        color: #000000;\n        text-decoration: none;\n        width: auto;\n        &:hover {\n            text-decoration: none !important;\n            cursor: pointer;\n        }\n    }\n    span {\n        padding: 0px;\n    }\n    @media (max-width: 576px) {\n        img {\n            &.close {\n                display: block;\n            }\n        }\n    }\n"])));export{r as default};
+//# sourceMappingURL=Header.js.map

package/dist/src/TwilioChat/components/styled/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../src/TwilioChat/components/styled/Header.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst Header = styled.div`\n    background-color: #08DE9E;\n    width: calc(100% - 30px);\n    padding: 15px;\n    color: #ffffff;\n    flex: 0;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 15px;\n    -webkit-box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n    box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n    z-index: 91;\n    img {\n        width: 40px;\n        height: 40px;\n        -object-fit: fill;\n        object-fit: fill;\n        padding: 7px;\n        border-radius: 200px;\n        cursor: pointer;\n        background-color: #FFFFFF;\n        &.close {\n            display: none;\n            background-color: transparent;\n        }\n    }\n    button {\n        border: none;\n        width: auto;\n        font-family: 'DM Sans' !important;\n        background-color: #ffffff !important;\n        color: #07131e !important;\n        font-size: 15px !important;\n        font-weight: 100 !important;\n        padding: 4px 24px 4px 24px !important;\n        border-radius: 100px !important;\n        transition: all 0.3s ease-in-out 0s;\n        &:hover {\n            background-color: #36d093 !important;\n        }\n    }\n    a {\n        color: #000000;\n        text-decoration: none;\n        width: auto;\n        &:hover {\n            text-decoration: none !important;\n            cursor: pointer;\n        }\n    }\n    span {\n        padding: 0px;\n    }\n    @media (max-width: 576px) {\n        img {\n            &.close {\n                display: block;\n            }\n        }\n    }\n`;\n\nexport default Header;"],"names":["Header","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAASC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,sgDAAA,CAAA"}

package/dist/src/TwilioChat/components/styled/InputForm.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import o from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var e,r=o.form(e||(e=n(["\n    background-color: #f4f7f9;\n    width: 100%;\n    flex: 0;\n    \n    .wrapper {\n        width: calc(100% - 10px);\n        max-width: 700px;\n        position: relative;\n        margin: 0px auto;\n        flex: 0;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 10px;\n        padding: 5px;\n        .action {\n            width: 21px;\n            height: 21px;\n            cursor: pointer;\n            opacity: 0.7;\n            -webkit-user-select: none;\n            user-select: none;\n            &:hover {\n            opacity: 0.7;\n            }\n        }\n        input {\n            background-color: rgba(0,0,0,0);\n            border: none;\n            border-bottom: 1px solid rgba(0,0,0,0);\n            outline: 0px;\n            padding: 0px;\n            margin-left: 15px;\n            font-size: 14px;\n            font-weight: 100;\n            flex: 1;\n            &.invalid {\n            border-bottom: 1px solid red;\n            }\n        }\n        button {\n            min-width: 90px;\n            background-color: #09de9e;\n            flex: 0;\n            font-size: 16px;\n            &:hover {\n            background-color: #08c98f;\n            }\n            &:disabled, &:disabled:hover {\n            background-color: rgba(0,0,0,0.05);\n            color: #aabbcc !important;\n            }\n        }\n    }\n    @media (max-width: 576px) {\n        padding: 15px;\n    }\n"],["\n    background-color: #f4f7f9;\n    width: 100%;\n    flex: 0;\n    \n    .wrapper {\n        width: calc(100% - 10px);\n        max-width: 700px;\n        position: relative;\n        margin: 0px auto;\n        flex: 0;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 10px;\n        padding: 5px;\n        .action {\n            width: 21px;\n            height: 21px;\n            cursor: pointer;\n            opacity: 0.7;\n            -webkit-user-select: none;\n            user-select: none;\n            &:hover {\n            opacity: 0.7;\n            }\n        }\n        input {\n            background-color: rgba(0,0,0,0);\n            border: none;\n            border-bottom: 1px solid rgba(0,0,0,0);\n            outline: 0px;\n            padding: 0px;\n            margin-left: 15px;\n            font-size: 14px;\n            font-weight: 100;\n            flex: 1;\n            &.invalid {\n            border-bottom: 1px solid red;\n            }\n        }\n        button {\n            min-width: 90px;\n            background-color: #09de9e;\n            flex: 0;\n            font-size: 16px;\n            &:hover {\n            background-color: #08c98f;\n            }\n            &:disabled, &:disabled:hover {\n            background-color: rgba(0,0,0,0.05);\n            color: #aabbcc !important;\n            }\n        }\n    }\n    @media (max-width: 576px) {\n        padding: 15px;\n    }\n"])));export{r as default};
+//# sourceMappingURL=InputForm.js.map

package/dist/src/TwilioChat/components/styled/InputForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputForm.js","sources":["../../../../../src/TwilioChat/components/styled/InputForm.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst InputForm = styled.form`\n    background-color: #f4f7f9;\n    width: 100%;\n    flex: 0;\n    \n    .wrapper {\n        width: calc(100% - 10px);\n        max-width: 700px;\n        position: relative;\n        margin: 0px auto;\n        flex: 0;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        gap: 10px;\n        padding: 5px;\n        .action {\n            width: 21px;\n            height: 21px;\n            cursor: pointer;\n            opacity: 0.7;\n            -webkit-user-select: none;\n            user-select: none;\n            &:hover {\n            opacity: 0.7;\n            }\n        }\n        input {\n            background-color: rgba(0,0,0,0);\n            border: none;\n            border-bottom: 1px solid rgba(0,0,0,0);\n            outline: 0px;\n            padding: 0px;\n            margin-left: 15px;\n            font-size: 14px;\n            font-weight: 100;\n            flex: 1;\n            &.invalid {\n            border-bottom: 1px solid red;\n            }\n        }\n        button {\n            min-width: 90px;\n            background-color: #09de9e;\n            flex: 0;\n            font-size: 16px;\n            &:hover {\n            background-color: #08c98f;\n            }\n            &:disabled, &:disabled:hover {\n            background-color: rgba(0,0,0,0.05);\n            color: #aabbcc !important;\n            }\n        }\n    }\n    @media (max-width: 576px) {\n        padding: 15px;\n    }\n`;\n\n\nexport default InputForm;"],"names":["InputForm","styled","form","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAAYC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,88CAAA,CAAA"}

package/dist/src/TwilioChat/components/styled/MyPost.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import e from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var i,o=e.div(i||(i=n(["\n    width: calc(100% - 10px);\n    padding: 5px;\n    flex: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n    img {\n        flex: 0;\n        width: 40px;\n        height: 40px;\n        opacity: 0;\n    }\n    span, button {\n        display: block;\n        background-color: #c1f7e7;\n        flex: 0;\n        padding: 5px;\n        border-radius: 5px;\n        color: #263238;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 100;\n        min-width: 40%;\n        word-break: break-word;\n        b {\n        font-weight: 900;\n        }\n        a, a:visited, a:active {\n        font-size: 16px !important;\n        text-decoration: underline;\n        color: #397040;\n        }\n    }\n    input, select {\n        font-size: 14px;\n        border: 1px solid #d5d5d5;\n        border-radius: 5px;\n        padding: 1px 4px;\n        height: 30px;\n        outline: none;\n        &.invalid {\n        border-bottom: 1px solid red;\n        }\n        &:focus{\n        border-radius: 5px;\n        }\n        &:disabled{\n        border: 1px solid #d9d9d9;\n        }\n    }\n    select {\n        cursor: pointer;\n        background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 98% 50%;\n        -moz-appearance: none; \n        -webkit-appearance: none; \n        appearance: none;\n    }\n    .loader {\n        opacity: 1;\n    }\n    button {\n        border: 1px solid #08DE9E;\n        cursor: pointer;\n        &:hover {\n        background-color: #08DE9E;\n        }\n        &:disabled, &:disabled:hover {\n        border: 1px solid #e1e1e1;\n        background-color: #e1e1e1;\n        cursor: default;\n        }\n    }\n    small {\n        font-size: 11px !important;\n        font-weight: 100;\n        line-height: 13px;\n        color: #bcc8d0;\n    }\n    .action {\n        width: 13px;\n        height: 13px;\n        opacity: 0.5;\n    }\n    .files {\n        margin: 0px !important;\n        border-radius: 5px;\n        background-color: #f4f7f9 !important;;\n        padding: 0px;\n        overlay: none;\n        display: flex;\n        flex-direction: row !important;\n        flex-wrap: wrap !important;\n        align-content: flex-start !important;\n        justify-content: space-evenly !important;\n        align-items: flex-start !important;\n        .file{\n        width: 130px;\n        height: 130px;\n        object-fit: contain;\n        opacity: 1;\n        cursor: pointer;\n        }\n    }\n"],["\n    width: calc(100% - 10px);\n    padding: 5px;\n    flex: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n    img {\n        flex: 0;\n        width: 40px;\n        height: 40px;\n        opacity: 0;\n    }\n    span, button {\n        display: block;\n        background-color: #c1f7e7;\n        flex: 0;\n        padding: 5px;\n        border-radius: 5px;\n        color: #263238;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 100;\n        min-width: 40%;\n        word-break: break-word;\n        b {\n        font-weight: 900;\n        }\n        a, a:visited, a:active {\n        font-size: 16px !important;\n        text-decoration: underline;\n        color: #397040;\n        }\n    }\n    input, select {\n        font-size: 14px;\n        border: 1px solid #d5d5d5;\n        border-radius: 5px;\n        padding: 1px 4px;\n        height: 30px;\n        outline: none;\n        &.invalid {\n        border-bottom: 1px solid red;\n        }\n        &:focus{\n        border-radius: 5px;\n        }\n        &:disabled{\n        border: 1px solid #d9d9d9;\n        }\n    }\n    select {\n        cursor: pointer;\n        background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 98% 50%;\n        -moz-appearance: none; \n        -webkit-appearance: none; \n        appearance: none;\n    }\n    .loader {\n        opacity: 1;\n    }\n    button {\n        border: 1px solid #08DE9E;\n        cursor: pointer;\n        &:hover {\n        background-color: #08DE9E;\n        }\n        &:disabled, &:disabled:hover {\n        border: 1px solid #e1e1e1;\n        background-color: #e1e1e1;\n        cursor: default;\n        }\n    }\n    small {\n        font-size: 11px !important;\n        font-weight: 100;\n        line-height: 13px;\n        color: #bcc8d0;\n    }\n    .action {\n        width: 13px;\n        height: 13px;\n        opacity: 0.5;\n    }\n    .files {\n        margin: 0px !important;\n        border-radius: 5px;\n        background-color: #f4f7f9 !important;;\n        padding: 0px;\n        overlay: none;\n        display: flex;\n        flex-direction: row !important;\n        flex-wrap: wrap !important;\n        align-content: flex-start !important;\n        justify-content: space-evenly !important;\n        align-items: flex-start !important;\n        .file{\n        width: 130px;\n        height: 130px;\n        object-fit: contain;\n        opacity: 1;\n        cursor: pointer;\n        }\n    }\n"])));export{o as default};
+//# sourceMappingURL=MyPost.js.map

package/dist/src/TwilioChat/components/styled/MyPost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyPost.js","sources":["../../../../../src/TwilioChat/components/styled/MyPost.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst MyPost = styled.div`\n    width: calc(100% - 10px);\n    padding: 5px;\n    flex: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n    img {\n        flex: 0;\n        width: 40px;\n        height: 40px;\n        opacity: 0;\n    }\n    span, button {\n        display: block;\n        background-color: #c1f7e7;\n        flex: 0;\n        padding: 5px;\n        border-radius: 5px;\n        color: #263238;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 100;\n        min-width: 40%;\n        word-break: break-word;\n        b {\n        font-weight: 900;\n        }\n        a, a:visited, a:active {\n        font-size: 16px !important;\n        text-decoration: underline;\n        color: #397040;\n        }\n    }\n    input, select {\n        font-size: 14px;\n        border: 1px solid #d5d5d5;\n        border-radius: 5px;\n        padding: 1px 4px;\n        height: 30px;\n        outline: none;\n        &.invalid {\n        border-bottom: 1px solid red;\n        }\n        &:focus{\n        border-radius: 5px;\n        }\n        &:disabled{\n        border: 1px solid #d9d9d9;\n        }\n    }\n    select {\n        cursor: pointer;\n        background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 98% 50%;\n        -moz-appearance: none; \n        -webkit-appearance: none; \n        appearance: none;\n    }\n    .loader {\n        opacity: 1;\n    }\n    button {\n        border: 1px solid #08DE9E;\n        cursor: pointer;\n        &:hover {\n        background-color: #08DE9E;\n        }\n        &:disabled, &:disabled:hover {\n        border: 1px solid #e1e1e1;\n        background-color: #e1e1e1;\n        cursor: default;\n        }\n    }\n    small {\n        font-size: 11px !important;\n        font-weight: 100;\n        line-height: 13px;\n        color: #bcc8d0;\n    }\n    .action {\n        width: 13px;\n        height: 13px;\n        opacity: 0.5;\n    }\n    .files {\n        margin: 0px !important;\n        border-radius: 5px;\n        background-color: #f4f7f9 !important;;\n        padding: 0px;\n        overlay: none;\n        display: flex;\n        flex-direction: row !important;\n        flex-wrap: wrap !important;\n        align-content: flex-start !important;\n        justify-content: space-evenly !important;\n        align-items: flex-start !important;\n        .file{\n        width: 130px;\n        height: 130px;\n        object-fit: contain;\n        opacity: 1;\n        cursor: pointer;\n        }\n    }\n`;\n\nexport default MyPost;"],"names":["MyPost","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAASC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,47FAAA,CAAA"}

package/dist/src/TwilioChat/components/styled/Splitter.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import o from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var t,e=o.div(t||(t=n(["\n  display: block;\n  width: 100%;\n  height: 1px;\n  border-top: 1px solid rgb(223, 225, 227);\n  content: '';\n  margin: 8px 0;\n"],["\n  display: block;\n  width: 100%;\n  height: 1px;\n  border-top: 1px solid rgb(223, 225, 227);\n  content: '';\n  margin: 8px 0;\n"])));export{e as default};
+//# sourceMappingURL=Splitter.js.map

package/dist/src/TwilioChat/components/styled/Splitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.js","sources":["../../../../../src/TwilioChat/components/styled/Splitter.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst Splitter = styled.div`\n  display: block;\n  width: 100%;\n  height: 1px;\n  border-top: 1px solid rgb(223, 225, 227);\n  content: '';\n  margin: 8px 0;\n`;\n\nexport default Splitter;"],"names":["Splitter","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAAWC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,wIAAA,CAAA"}

package/dist/src/TwilioChat/components/styled/WidgetButton.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import o from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var e,t=o.div(e||(e=n(["\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: #08DE9E;\n    width: 50px;\n    height: 50px;\n    border-radius: 100px;\n    cursor: pointer;\n    -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -webkit-user-select: none;\n    user-select: none;  \n    img {\n        position: absolute;\n        -moz-transition: all 0.3s ease;\n        transition: all 0.3s ease;\n        &.icon-hover {\n        width: 15px;\n        height: 15px;\n            transform: rotate(180deg) scale(.5);\n            opacity: 0;\n        }\n        &.icon-default {\n        width: 20px;\n        height: 20px;\n            transform: rotate(0deg) scale(1);\n            opacity: 1;\n        }\n    }\n    &:hover {\n        -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n        -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n        box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    }\n    &.open {\n        .icon-hover {\n            transform: rotate(0deg) scale(1);\n            opacity: 1;\n        }\n        .icon-default {\n            transform: rotate(180deg) scale(.5);\n            opacity: 0;\n        }\n    }\n    &.fullscreen {\n        display: none;\n    }\n    .unread {\n        background-color: red;\n        padding: 3px;\n        display: flex;\n        width: 20px;\n        height: 20px;\n        aspect-ratio: 1 / 1;\n        border-radius: 200px;\n        color: #ffffff;\n        position: absolute;\n        top: -4px;\n        right: -2px;\n        font-size: 11px !important;\n        line-height: 8px !important;\n        flex-direction: row;\n        align-content: center;\n        justify-content: center;\n        align-items: center;\n        -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n        -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n        box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n        animation: pulseAnimation 1.5s infinite;\n        @keyframes pulseAnimation {\n            0% {\n                transform: scale(1);\n            }\n            50% {\n                transform: scale(1.1);\n            }\n            100% {\n                transform: scale(1);\n            }\n        }\n    }\n"],["\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: #08DE9E;\n    width: 50px;\n    height: 50px;\n    border-radius: 100px;\n    cursor: pointer;\n    -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -webkit-user-select: none;\n    user-select: none;  \n    img {\n        position: absolute;\n        -moz-transition: all 0.3s ease;\n        transition: all 0.3s ease;\n        &.icon-hover {\n        width: 15px;\n        height: 15px;\n            transform: rotate(180deg) scale(.5);\n            opacity: 0;\n        }\n        &.icon-default {\n        width: 20px;\n        height: 20px;\n            transform: rotate(0deg) scale(1);\n            opacity: 1;\n        }\n    }\n    &:hover {\n        -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n        -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n        box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    }\n    &.open {\n        .icon-hover {\n            transform: rotate(0deg) scale(1);\n            opacity: 1;\n        }\n        .icon-default {\n            transform: rotate(180deg) scale(.5);\n            opacity: 0;\n        }\n    }\n    &.fullscreen {\n        display: none;\n    }\n    .unread {\n        background-color: red;\n        padding: 3px;\n        display: flex;\n        width: 20px;\n        height: 20px;\n        aspect-ratio: 1 / 1;\n        border-radius: 200px;\n        color: #ffffff;\n        position: absolute;\n        top: -4px;\n        right: -2px;\n        font-size: 11px !important;\n        line-height: 8px !important;\n        flex-direction: row;\n        align-content: center;\n        justify-content: center;\n        align-items: center;\n        -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n        -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n        box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n        animation: pulseAnimation 1.5s infinite;\n        @keyframes pulseAnimation {\n            0% {\n                transform: scale(1);\n            }\n            50% {\n                transform: scale(1.1);\n            }\n            100% {\n                transform: scale(1);\n            }\n        }\n    }\n"])));export{t as default};
+//# sourceMappingURL=WidgetButton.js.map

package/dist/src/TwilioChat/components/styled/WidgetButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetButton.js","sources":["../../../../../src/TwilioChat/components/styled/WidgetButton.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst WidgetButton = styled.div`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: #08DE9E;\n    width: 50px;\n    height: 50px;\n    border-radius: 100px;\n    cursor: pointer;\n    -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -webkit-user-select: none;\n    user-select: none;  \n    img {\n        position: absolute;\n        -moz-transition: all 0.3s ease;\n        transition: all 0.3s ease;\n        &.icon-hover {\n        width: 15px;\n        height: 15px;\n            transform: rotate(180deg) scale(.5);\n            opacity: 0;\n        }\n        &.icon-default {\n        width: 20px;\n        height: 20px;\n            transform: rotate(0deg) scale(1);\n            opacity: 1;\n        }\n    }\n    &:hover {\n        -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n        -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n        box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    }\n    &.open {\n        .icon-hover {\n            transform: rotate(0deg) scale(1);\n            opacity: 1;\n        }\n        .icon-default {\n            transform: rotate(180deg) scale(.5);\n            opacity: 0;\n        }\n    }\n    &.fullscreen {\n        display: none;\n    }\n    .unread {\n        background-color: red;\n        padding: 3px;\n        display: flex;\n        width: 20px;\n        height: 20px;\n        aspect-ratio: 1 / 1;\n        border-radius: 200px;\n        color: #ffffff;\n        position: absolute;\n        top: -4px;\n        right: -2px;\n        font-size: 11px !important;\n        line-height: 8px !important;\n        flex-direction: row;\n        align-content: center;\n        justify-content: center;\n        align-items: center;\n        -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n        -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n        box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n        animation: pulseAnimation 1.5s infinite;\n        @keyframes pulseAnimation {\n            0% {\n                transform: scale(1);\n            }\n            50% {\n                transform: scale(1.1);\n            }\n            100% {\n                transform: scale(1);\n            }\n        }\n    }\n`;\n\nexport default WidgetButton;"],"names":["WidgetButton","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAAeC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,+1EAAA,CAAA"}

package/dist/src/TwilioChat/components/styled/YFPost.js

@@ -0,0 +1,2 @@
+import{__makeTemplateObject as n}from"../../../../node_modules/tslib/tslib.es6.js";import t from"../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";var o,i=t.div(o||(o=n(["\n    width: calc(100% - 10px);\n    padding: 5px;\n    flex: 0;\n    display: flex;\n    gap: 15px;\n    img {\n        flex: 0;\n        width: 40px;\n        height: 40px;\n        -object-fit: fill;\n        object-fit: fill;\n        border-radius: 200px;\n        padding: 9px;\n        background-color: #ddf0fc;\n    }\n    span {\n        color: #263238;\n        background-color: #ddf0fc;\n        flex: 1;\n        padding: 16px;\n        border-radius: 5px;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 100;\n        display: block;\n        word-break: break-word;\n        a, a:visited, a:active {\n        font-size: 16px !important;\n        text-decoration: underline;\n        color: #005095;\n        }\n    }\n    button {\n        border: 2px solid #08DE9E;\n        cursor: pointer;\n        &:hover {\n        background-color: #08DE9E;\n        }\n    }\n    small {\n        font-size: 11px !important;\n        font-weight: 100;\n        line-height: 13px;\n        color: #bcc8d0;\n    }\n    .action {\n        width: 13px;\n        height: 13px;\n        opacity: 0.5;\n    }\n    .files {\n        margin: 0.3rem 0px 0px 0px !important;\n        border-radius: 5px;\n        background-color: #f4f7f9 !important;;\n        padding: 0px;\n        overlay: none;\n        display: flex;\n        flex-direction: row !important;\n        flex-wrap: wrap !important;\n        align-content: flex-start !important;\n        justify-content: space-evenly !important;\n        align-items: flex-start !important;\n        .file{\n        width: 130px;\n        height: 130px;\n        object-fit: contain;\n        opacity: 1;\n        cursor: pointer;\n        }\n    }\n"],["\n    width: calc(100% - 10px);\n    padding: 5px;\n    flex: 0;\n    display: flex;\n    gap: 15px;\n    img {\n        flex: 0;\n        width: 40px;\n        height: 40px;\n        -object-fit: fill;\n        object-fit: fill;\n        border-radius: 200px;\n        padding: 9px;\n        background-color: #ddf0fc;\n    }\n    span {\n        color: #263238;\n        background-color: #ddf0fc;\n        flex: 1;\n        padding: 16px;\n        border-radius: 5px;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 100;\n        display: block;\n        word-break: break-word;\n        a, a:visited, a:active {\n        font-size: 16px !important;\n        text-decoration: underline;\n        color: #005095;\n        }\n    }\n    button {\n        border: 2px solid #08DE9E;\n        cursor: pointer;\n        &:hover {\n        background-color: #08DE9E;\n        }\n    }\n    small {\n        font-size: 11px !important;\n        font-weight: 100;\n        line-height: 13px;\n        color: #bcc8d0;\n    }\n    .action {\n        width: 13px;\n        height: 13px;\n        opacity: 0.5;\n    }\n    .files {\n        margin: 0.3rem 0px 0px 0px !important;\n        border-radius: 5px;\n        background-color: #f4f7f9 !important;;\n        padding: 0px;\n        overlay: none;\n        display: flex;\n        flex-direction: row !important;\n        flex-wrap: wrap !important;\n        align-content: flex-start !important;\n        justify-content: space-evenly !important;\n        align-items: flex-start !important;\n        .file{\n        width: 130px;\n        height: 130px;\n        object-fit: contain;\n        opacity: 1;\n        cursor: pointer;\n        }\n    }\n"])));export{i as default};
+//# sourceMappingURL=YFPost.js.map

package/dist/src/TwilioChat/components/styled/YFPost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YFPost.js","sources":["../../../../../src/TwilioChat/components/styled/YFPost.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from 'styled-components';\n\nconst YFPost = styled.div`\n    width: calc(100% - 10px);\n    padding: 5px;\n    flex: 0;\n    display: flex;\n    gap: 15px;\n    img {\n        flex: 0;\n        width: 40px;\n        height: 40px;\n        -object-fit: fill;\n        object-fit: fill;\n        border-radius: 200px;\n        padding: 9px;\n        background-color: #ddf0fc;\n    }\n    span {\n        color: #263238;\n        background-color: #ddf0fc;\n        flex: 1;\n        padding: 16px;\n        border-radius: 5px;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 100;\n        display: block;\n        word-break: break-word;\n        a, a:visited, a:active {\n        font-size: 16px !important;\n        text-decoration: underline;\n        color: #005095;\n        }\n    }\n    button {\n        border: 2px solid #08DE9E;\n        cursor: pointer;\n        &:hover {\n        background-color: #08DE9E;\n        }\n    }\n    small {\n        font-size: 11px !important;\n        font-weight: 100;\n        line-height: 13px;\n        color: #bcc8d0;\n    }\n    .action {\n        width: 13px;\n        height: 13px;\n        opacity: 0.5;\n    }\n    .files {\n        margin: 0.3rem 0px 0px 0px !important;\n        border-radius: 5px;\n        background-color: #f4f7f9 !important;;\n        padding: 0px;\n        overlay: none;\n        display: flex;\n        flex-direction: row !important;\n        flex-wrap: wrap !important;\n        align-content: flex-start !important;\n        justify-content: space-evenly !important;\n        align-items: flex-start !important;\n        .file{\n        width: 130px;\n        height: 130px;\n        object-fit: contain;\n        opacity: 1;\n        cursor: pointer;\n        }\n    }\n`;\n\nexport default YFPost;"],"names":["YFPost","styled","div","templateObject_1","__makeTemplateObject"],"mappings":"mLAGA,MAAMA,EAASC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,msDAAA,CAAA"}

package/dist/src/TwilioChat/index.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as e,__awaiter as n,__assign as t,__generator as o,__spreadArray as r}from"../../node_modules/tslib/tslib.es6.js";import a,{useContext as i,useRef as l,useState as c,useEffect as s}from"react";import{io as d}from"../../node_modules/socket.io-client/build/esm/index.js";import u from"../../_virtual/browser.js";import m from"../../node_modules/styled-components/dist/styled-components.browser.esm.js";import p from"../context/GlobalContext.js";import g from"../../node_modules/linkify-html/dist/linkify-html.js";import f from"./Chat.js";import h from"../../_virtual/moment.js";import{toastrMsg as x}from"../utils/alert.js";import v from"../NotificationBar/index.js";import{isStagingOrDevelopment as b}from"../utils/helperFn.js";import{d as w}from"../../_virtual/index.js";import y,{setConfig as I}from"../api/api.js";import S from"axios";import{useDropzone as E}from"../../node_modules/react-dropzone/dist/es/index.js";import"../assets/styles/fonts.css.js";import"../assets/styles/app.scss.js";import C from"../../node_modules/uuid/dist/esm-browser/v4.js";import k from"../../node_modules/react-bootstrap/esm/Row.js";var N,T,_,A,O,M,U,D,R,L=new URL("./assets/images/svg/favicon.svg",import.meta.url),j=new URL("./assets/images/svg/chat.svg",import.meta.url),F=new URL("./assets/images/png/ico-close.png",import.meta.url),z=new URL("./assets/images/gif/loader-transparent.gif",import.meta.url),W=new URL("./assets/images/svg/youfibre-upload.svg",import.meta.url),B=new URL("./assets/images/svg/close.svg",import.meta.url),G=new URL("./assets/audio/notification.wav",import.meta.url),P=m.div(N||(N=e(["\n  width: 100%;\n  max-width: 700px;\n  height: 100%;\n  position: relative;\n  margin: 0px auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  \n  &.direction-column-reverse { flex-direction: column-reverse; }\n  &.content-end { justify-content: end; }\n\n"],["\n  width: 100%;\n  max-width: 700px;\n  height: 100%;\n  position: relative;\n  margin: 0px auto;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  \n  &.direction-column-reverse { flex-direction: column-reverse; }\n  &.content-end { justify-content: end; }\n\n"]))),Y=m(P)(T||(T=e(["\n  overflow-y: auto;\n"],["\n  overflow-y: auto;\n"]))),V=m.div(_||(_=e(["\n  position: fixed;\n  bottom: 40px;\n  right: 40px;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: 15px;\n"],["\n  position: fixed;\n  bottom: 40px;\n  right: 40px;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: 15px;\n"]))),H=m.div(A||(A=e(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #08DE9E;\n  width: 50px;\n  height: 50px;\n  border-radius: 100px;\n  cursor: pointer;\n  -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -webkit-user-select: none;\n  user-select: none;  \n  img {\n    position: absolute;\n    -moz-transition: all 0.3s ease;\n    transition: all 0.3s ease;\n\t\t&.icon-hover {\n      width: 15px;\n      height: 15px;\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n\t\t&.icon-default {\n      width: 20px;\n      height: 20px;\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n  }\n  &:hover {\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  }\n  &.open {\n\t\t.icon-hover {\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t.icon-default {\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n  }\n  &.fullscreen {\n    display: none;\n  }\n\n  .unread {\n    background-color: red;\n    padding: 3px;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    aspect-ratio: 1 / 1;\n    border-radius: 200px;\n    color: #ffffff;\n    position: absolute;\n    top: -4px;\n    right: -2px;\n    font-size: 11px !important;\n    line-height: 0.5rem !important;\n    flex-direction: row;\n    align-content: center;\n    justify-content: center;\n    align-items: center;\n    -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    animation: pulseAnimation 1.5s infinite;\n    @keyframes pulseAnimation {\n      0% {\n        transform: scale(1);\n      }\n      50% {\n        transform: scale(1.1);\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  }\n"],["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #08DE9E;\n  width: 50px;\n  height: 50px;\n  border-radius: 100px;\n  cursor: pointer;\n  -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n  -webkit-user-select: none;\n  user-select: none;  \n  img {\n    position: absolute;\n    -moz-transition: all 0.3s ease;\n    transition: all 0.3s ease;\n\t\t&.icon-hover {\n      width: 15px;\n      height: 15px;\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n\t\t&.icon-default {\n      width: 20px;\n      height: 20px;\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n  }\n  &:hover {\n    -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n    box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  }\n  &.open {\n\t\t.icon-hover {\n\t\t\ttransform: rotate(0deg) scale(1);\n\t\t\topacity: 1;\n\t\t}\n\t\t.icon-default {\n\t\t\ttransform: rotate(180deg) scale(.5);\n\t\t\topacity: 0;\n\t\t}\n  }\n  &.fullscreen {\n    display: none;\n  }\n\n  .unread {\n    background-color: red;\n    padding: 3px;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    aspect-ratio: 1 / 1;\n    border-radius: 200px;\n    color: #ffffff;\n    position: absolute;\n    top: -4px;\n    right: -2px;\n    font-size: 11px !important;\n    line-height: 0.5rem !important;\n    flex-direction: row;\n    align-content: center;\n    justify-content: center;\n    align-items: center;\n    -webkit-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    -moz-box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    box-shadow: 2px 1px 8px 0px rgba(0, 0, 0, 0.27);\n    animation: pulseAnimation 1.5s infinite;\n    @keyframes pulseAnimation {\n      0% {\n        transform: scale(1);\n      }\n      50% {\n        transform: scale(1.1);\n      }\n      100% {\n        transform: scale(1);\n      }\n    }\n  }\n"]))),q=m.div(O||(O=e(["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  width: 350px;\n  height: 550px;\n  border-radius: 5px;\n  -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  max-width: 0px;\n  max-height: 0px;\n  overflow: hidden;\n  transition: max-height 0.5s ease-in-out;\n  &.show {\n    max-width: 350px;\n    max-height: 540px;\n  }\n  .cover {\n    background: rgba(255, 255, 255, 0.2);\n    position: absolute;\n    z-index: 92;\n    padding: 14px;\n    width: calc(100% - 28px);\n    height: calc(100% - 93px);\n    border-radius: 5px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    -webkit-user-select: none;\n    user-select: none;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    &.closed {\n      background: rgba(255, 255, 255, 0.9);\n      button { margin-top: 2rem; }\n    }\n    &.upload {\n      background: rgba(9, 222, 158, 0.9);\n      button { margin-top: 2rem; }\n    }\n    animation: showCover .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n      \n    @keyframes showCover {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n  }\n  .files {\n    margin: 0.5rem;\n    border-radius: 5px;\n    background-color: #c1f7e7;\n    padding: 0rem;\n    overlay: none;\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 0rem;\n    .file {\n      display: flex;\n      flex-direction: row;\n      border-radius: 3px;\n      justify-content: space-between;\n      align-items: center;\n      margin: 0.2rem;\n      padding: 0.2rem 0.5rem;\n      gap: 14px;\n      &:hover {\n        background-color: #ffffff;\n      }\n      .fileName {\n        font-size: 11px !important;\n        line-height: 12px;\n        word-break: keep-all;\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .action {\n        width: 12px;\n        height: 12px;\n        opacity: 0.7;\n        cursor: pointer;\n        &:hover {\n          opacity: 1;\n        }\n      }\n\n    }\n  }\n  &.fullscreen {\n    max-width: 100% !important;\n    max-height: 100% !important;\n    position: fixed;\n    left: 0px;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    // @media (max-width: 768px) {\n    //   #listOfMessages {\n    //     max-height: calc(100vh - 210px);\n    //   }\n    //   .chat-content-container {\n    //     padding-bottom: 4rem;\n    //   }\n    // }\n    .cover {\n        &.closed {\n            height: 100%;\n        }\n    }\n  }\n  @media (max-width: 576px) {\n    position: fixed;\n    z-index: 100;\n    bottom: 0px;\n    right: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    &.show {\n      max-width: 100%;\n      max-height: 100%;\n    }\n    .cover {\n      &.closed, &.upload {\n        height: 100%;\n      }\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  width: 350px;\n  height: 550px;\n  border-radius: 5px;\n  -webkit-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  -moz-box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.35);\n  max-width: 0px;\n  max-height: 0px;\n  overflow: hidden;\n  transition: max-height 0.5s ease-in-out;\n  &.show {\n    max-width: 350px;\n    max-height: 540px;\n  }\n  .cover {\n    background: rgba(255, 255, 255, 0.2);\n    position: absolute;\n    z-index: 92;\n    padding: 14px;\n    width: calc(100% - 28px);\n    height: calc(100% - 93px);\n    border-radius: 5px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    -webkit-user-select: none;\n    user-select: none;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    &.closed {\n      background: rgba(255, 255, 255, 0.9);\n      button { margin-top: 2rem; }\n    }\n    &.upload {\n      background: rgba(9, 222, 158, 0.9);\n      button { margin-top: 2rem; }\n    }\n    animation: showCover .4s cubic-bezier(0.41, 0.39, 0.53, 1.38) forwards;\n      \n    @keyframes showCover {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n  }\n  .files {\n    margin: 0.5rem;\n    border-radius: 5px;\n    background-color: #c1f7e7;\n    padding: 0rem;\n    overlay: none;\n    display: flex;  \n    flex-direction: column;\n    justify-content: center;\n    gap: 0rem;\n    .file {\n      display: flex;\n      flex-direction: row;\n      border-radius: 3px;\n      justify-content: space-between;\n      align-items: center;\n      margin: 0.2rem;\n      padding: 0.2rem 0.5rem;\n      gap: 14px;\n      &:hover {\n        background-color: #ffffff;\n      }\n      .fileName {\n        font-size: 11px !important;\n        line-height: 12px;\n        word-break: keep-all;\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .action {\n        width: 12px;\n        height: 12px;\n        opacity: 0.7;\n        cursor: pointer;\n        &:hover {\n          opacity: 1;\n        }\n      }\n\n    }\n  }\n  &.fullscreen {\n    max-width: 100% !important;\n    max-height: 100% !important;\n    position: fixed;\n    left: 0px;\n    top: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    // @media (max-width: 768px) {\n    //   #listOfMessages {\n    //     max-height: calc(100vh - 210px);\n    //   }\n    //   .chat-content-container {\n    //     padding-bottom: 4rem;\n    //   }\n    // }\n    .cover {\n        &.closed {\n            height: 100%;\n        }\n    }\n  }\n  @media (max-width: 576px) {\n    position: fixed;\n    z-index: 100;\n    bottom: 0px;\n    right: 0px;\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    &.show {\n      max-width: 100%;\n      max-height: 100%;\n    }\n    .cover {\n      &.closed, &.upload {\n        height: 100%;\n      }\n    }\n  }\n"]))),J=m.div(M||(M=e(["\n  background-color: #08DE9E;\n  width: calc(100% - 30px);\n  padding: 15px;\n  color: #ffffff;\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 15px;\n  -webkit-box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  z-index: 91;\n  img {\n    width: 30px;\n    height: 30px;\n    -object-fit: fill;\n    object-fit: fill;\n    padding: 7px;\n    border-radius: 200px;\n    cursor: pointer;\n    background-color: #FFFFFF;\n    &.close {\n      display: none;\n      background-color: transparent;\n    }\n  }\n  button {\n    font-size: 0.9rem;\n  }\n  a {\n    &:hover {\n      text-decoration: none !important;\n      cursor: pointer;\n    }\n  }\n  span {\n    padding: 0px;\n  }\n  @media (max-width: 576px) {\n    img {\n      &.close {\n        display: block;\n      }\n    }\n  }\n"],["\n  background-color: #08DE9E;\n  width: calc(100% - 30px);\n  padding: 15px;\n  color: #ffffff;\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 15px;\n  -webkit-box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  box-shadow: -2px 2px 5px 1px rgba(0,0,0,0.2);\n  z-index: 91;\n  img {\n    width: 30px;\n    height: 30px;\n    -object-fit: fill;\n    object-fit: fill;\n    padding: 7px;\n    border-radius: 200px;\n    cursor: pointer;\n    background-color: #FFFFFF;\n    &.close {\n      display: none;\n      background-color: transparent;\n    }\n  }\n  button {\n    font-size: 0.9rem;\n  }\n  a {\n    &:hover {\n      text-decoration: none !important;\n      cursor: pointer;\n    }\n  }\n  span {\n    padding: 0px;\n  }\n  @media (max-width: 576px) {\n    img {\n      &.close {\n        display: block;\n      }\n    }\n  }\n"]))),K=m.div(U||(U=e(["\n  width: 100%;\n  padding: 0;\n  color: #000000;\n  flex: 1;\n  display: flex;\n  flex-direction: column-reverse;\n  overflow-x: hidden;\n  .chat-content-container {\n    padding-bottom: 1.8rem;\n  }\n  button {\n    display: block;\n    background-color: #c1f7e7;\n    flex: 0;\n    padding: 5px;\n    border-radius: 5px;\n    color: #263238;\n    font-weight: 100;\n    font-size: 1rem;\n    line-height: 18px;\n    font-weight: 100;\n    min-width: 40%;\n    border: 2px solid #08DE9E;\n    cursor: pointer;\n    &:hover {\n      background-color: #08DE9E;\n    }\n  }\n  @media (max-width: 768px) {\n    overflow-y: hidden;\n    .chat-content-container {\n      overflow-y: auto;\n      // padding-bottom: 0;\n    }\n  }\n"],["\n  width: 100%;\n  padding: 0;\n  color: #000000;\n  flex: 1;\n  display: flex;\n  flex-direction: column-reverse;\n  overflow-x: hidden;\n  .chat-content-container {\n    padding-bottom: 1.8rem;\n  }\n  button {\n    display: block;\n    background-color: #c1f7e7;\n    flex: 0;\n    padding: 5px;\n    border-radius: 5px;\n    color: #263238;\n    font-weight: 100;\n    font-size: 1rem;\n    line-height: 18px;\n    font-weight: 100;\n    min-width: 40%;\n    border: 2px solid #08DE9E;\n    cursor: pointer;\n    &:hover {\n      background-color: #08DE9E;\n    }\n  }\n  @media (max-width: 768px) {\n    overflow-y: hidden;\n    .chat-content-container {\n      overflow-y: auto;\n      // padding-bottom: 0;\n    }\n  }\n"]))),Z=m.form(D||(D=e(["\n  background-color: #f4f7f9;\n  width: calc(100% - 10px);\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  padding: 5px;\n  .action {\n    width: 1.3rem;\n    height: 1.3rem;\n    cursor: pointer;\n    opacity: 0.7;\n    -webkit-user-select: none;\n    user-select: none;\n    &:hover {\n      opacity: 0.7;\n    }\n  }\n  input {\n    background-color: rgba(0,0,0,0);\n    border: none;\n    border-bottom: 1px solid rgba(0,0,0,0);\n    outline: 0px;\n    padding: 0px;\n    margin-left: 15px;\n    font-size: 0.9rem;\n    font-weight: 100;\n    flex: 1;\n    &.invalid {\n      border-bottom: 1px solid red;\n    }\n  }\n  button {\n    min-width: 90px;\n    background-color: #09de9e;\n    flex: 0;\n    font-size: 0.9rem;\n    &:hover {\n      background-color: #08c98f;\n    }\n    &:disabled, &:disabled:hover {\n      background-color: rgba(0,0,0,0.05);\n      color: #aabbcc !important;\n    }\n  }\n"],["\n  background-color: #f4f7f9;\n  width: calc(100% - 10px);\n  flex: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  padding: 5px;\n  .action {\n    width: 1.3rem;\n    height: 1.3rem;\n    cursor: pointer;\n    opacity: 0.7;\n    -webkit-user-select: none;\n    user-select: none;\n    &:hover {\n      opacity: 0.7;\n    }\n  }\n  input {\n    background-color: rgba(0,0,0,0);\n    border: none;\n    border-bottom: 1px solid rgba(0,0,0,0);\n    outline: 0px;\n    padding: 0px;\n    margin-left: 15px;\n    font-size: 0.9rem;\n    font-weight: 100;\n    flex: 1;\n    &.invalid {\n      border-bottom: 1px solid red;\n    }\n  }\n  button {\n    min-width: 90px;\n    background-color: #09de9e;\n    flex: 0;\n    font-size: 0.9rem;\n    &:hover {\n      background-color: #08c98f;\n    }\n    &:disabled, &:disabled:hover {\n      background-color: rgba(0,0,0,0.05);\n      color: #aabbcc !important;\n    }\n  }\n"]))),Q=m.div(R||(R=e(["\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  small {\n    position: absolute;\n    margin-top: -1.6rem;\n    margin-right: 14px;\n    font-size: 11px !important;\n    font-weight: 100;\n    line-height: 12px;\n    color: #015e9c;\n    background-color: #ddf0fc;\n    border: 1px solid #ffffff;\n    border-radius: 100px;\n    padding: 5px 15px;\n    z-index: 50;\n  }\n"],["\n  width: 100%;\n  display: flex;\n  flex-direction: row-reverse;\n  small {\n    position: absolute;\n    margin-top: -1.6rem;\n    margin-right: 14px;\n    font-size: 11px !important;\n    font-weight: 100;\n    line-height: 12px;\n    color: #015e9c;\n    background-color: #ddf0fc;\n    border: 1px solid #ffffff;\n    border-radius: 100px;\n    padding: 5px 15px;\n    z-index: 50;\n  }\n"]))),X=function(e){var m,N=e.host,T=e.clientId,_=e.clientSecret,A=e.customToken,O=e.websocketUrl;e.postcodeSchemaId,e.source;var M=e.fullscreen,U=void 0!==M&&M,D=i(p),R=l(null),X=c(!1),$=X[0],ee=X[1],ne=c(null),te=ne[0],oe=ne[1],re=c(!1),ae=re[0],ie=re[1],le=c(null);le[0];var ce=le[1],se=c(null),de=se[0],ue=se[1],me=c(null),pe=me[0],ge=me[1],fe=c(!1),he=fe[0],xe=fe[1],ve=c(!1),be=ve[0],we=ve[1],ye=c(!1),Ie=ye[0],Se=ye[1],Ee=c(U),Ce=Ee[0],ke=Ee[1],Ne=c({}),Te=Ne[0],_e=Ne[1],Ae=c(""),Oe=Ae[0],Me=Ae[1],Ue=c(null),De=Ue[0],Re=Ue[1],Le=c(null),je=Le[0],Fe=Le[1],ze=c(null),We=ze[0],Be=ze[1],Ge=c([]),Pe=Ge[0],Ye=Ge[1],Ve=c(!1),He=Ve[0],qe=Ve[1],Je=c(!1),Ke=Je[0],Ze=Je[1],Qe=c(null),Xe=Qe[0],$e=Qe[1],en=c(!1),nn=en[0],tn=en[1],on=c(null),rn=on[0],an=on[1],ln=c(!1),cn=ln[0],sn=ln[1],dn=c(!0),un=dn[0],mn=dn[1],pn=c(null),gn=pn[0],fn=pn[1],hn=c(!1),xn=hn[0],vn=hn[1],bn=c(-1),wn=bn[0],yn=bn[1],In=l("");l(0);var Sn=l(null),En=l(Ce),Cn=l(!0),kn=["jpg","jpeg","png","pdf","gif","txt","mp4","mp3"],Nn=w.useTime({interval:1}).seconds,Tn=c(!1),_n=Tn[0],An=Tn[1],On=l(null),Mn=[{createdAt:h(new Date).format(),message:null,fromId:"Client",senderType:"CUSTOMER",form:{type:"buttons",value:[{title:"I am the account holder",action:"old_customer"},{title:"I am not the account holder",action:"not_customer"},{title:"I am new here",action:"new_customer"}]},messageId:"1"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"Welcome to YouFibre!<br />We're going to ask you some questions to ensure we get you through to the right team, so please bear with us!<br />Are you the account holder?",form:null,messageId:"0"}],Un={SALES:"Sales",TECH_SUPPORT:"Tech Support",INSTALLS_AND_SERVICE_VISITS:"Installs & Service Visits",MANAGE_MY_ACCOUNT:"Manage My Account",BILLING:"Billing",CANCELLATION:"Cancellation",COMPLAINT:"Complaint"},Dn={NEW_CUSTOMER:"New customer",ACCOUNT_HOLDER:"Account holder",NOT_ACCOUNT_HOLDER:"Not the account holder"},Rn=c(Mn),Ln=Rn[0],jn=Rn[1],Fn=c(null),zn=Fn[0],Wn=Fn[1],Bn=l(Ln),Gn=l(null),Pn=l(null),Yn=function(){try{Gn.current&&Gn.current.scrollIntoView({behavior:"smooth"})}catch(e){}};s(function(){if("undefined"!=typeof document&&"undefined"!=typeof window){if(xn&&-1!==wn){localStorage.getItem("title")||localStorage.setItem("title","undefined"!=typeof document&&document.getElementsByTagName("title")[0].textContent||"");return Sn.current=window.setInterval(function(){var e=In.current;if(e){var n=(wn+1)%e.length;document.title=e.slice(n)+" "+e.slice(0,n),yn(n)}},200),function(){Sn.current&&clearInterval(Sn.current)}}Sn.current=null,In.current=""}},[wn]),s(function(){I(N,T,_,A),S.get("https://strapi.youfibre.com/api/information").then(function(e){D.setAppMessages(e.data)}).catch(function(e){D.setAppMessages(null)}),Jn();var e="undefined"!=typeof window?window.location.href:"",n=new MutationObserver(function(){"undefined"!=typeof window&&e!==window.location.href&&(e=window.location.href,Jn())});return"undefined"!=typeof document&&n.observe(document.body,{childList:!0,subtree:!0}),function(){return n.disconnect()}},[]),s(function(){fn(D.appMessages),mn(!qn())},[D.appMessages]),s(function(){mn(!qn())},[Nn]),s(function(){!un&&!pe&&nt()},[un]);var Vn=(new Date).toLocaleString("en-GB",{timeZone:"Europe/London",hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1}),Hn=function(e){if(e){var n=e.split(":").map(Number);return 3600*n[0]+60*n[1]+n[2]}},qn=function(){var e,n,t,o,r;if((null===(e=D.appMessages)||void 0===e?void 0:e.chat_off_mode_toggle)&&Vn&&(null===(n=D.appMessages)||void 0===n?void 0:n.chat_off_mode_start)&&(null===(t=D.appMessages)||void 0===t?void 0:t.chat_off_mode_end)){var a=Hn(Vn),i=Hn(null===(o=D.appMessages)||void 0===o?void 0:o.chat_off_mode_start),l=Hn(null===(r=D.appMessages)||void 0===r?void 0:r.chat_off_mode_end);return i<l?a>=i&&a<l:a>=i||a<l}return!1},Jn=function(){"undefined"!=typeof window&&an(new URLSearchParams(window.location.search))};s(function(){if(""===(null==rn?void 0:rn.get("youFibreChat"))){n(void 0,void 0,void 0,function(){return o(this,function(e){switch(e.label){case 0:return[4,new Promise(function(e){var n;localStorage.setItem("chatUsername",rn.get("chatUsername")),localStorage.setItem("chatUserId",rn.get("chatUserId")),localStorage.setItem("chatSessionId",rn.get("chatSessionId")),localStorage.setItem("conversationId",rn.get("conversationId")),localStorage.setItem("caseId",rn.get("caseId")),localStorage.setItem("participantId",rn.get("participantId")),Re(rn.get("participantId")),D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:t(t({},(null===(n=D.goGetRegistrationData())||void 0===n?void 0:n.twilioChat)||null),{chatUsername:rn.get("chatUsername")||null,chatSessionId:rn.get("chatSessionId")||null,chatUserId:rn.get("chatUserId")||null,conversationId:rn.get("conversationId")||null,caseId:rn.get("caseId")||null,participantId:rn.get("participantId")||null})})),e()})];case 1:return e.sent(),Kn(),[2]}})})}else rn&&0===Object.keys(rn).length&&Kn()},[rn]);var Kn=function(){n(void 0,void 0,void 0,function(){var e,n,r,a,i;return o(this,function(o){switch(o.label){case 0:if(!localStorage.getItem("conversationId"))return[3,4];o.label=1;case 1:return o.trys.push([1,3,,4]),[4,y.get("ChatModule/v1.0/gateway/conversation/".concat(localStorage.getItem("conversationId")))];case 2:return(e=o.sent())?("CLOSED"===(null===(a=null===(r=null==e?void 0:e.data)||void 0===r?void 0:r.properties)||void 0===a?void 0:a.Status)?nt():D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:t(t({},(null===(i=D.goGetRegistrationData())||void 0===i?void 0:i.twilioChat)||null),{chatUsername:localStorage.getItem("chatUsername")||null,chatSessionId:localStorage.getItem("chatSessionId")||null,chatUserId:localStorage.getItem("participantId")||null,conversationId:localStorage.getItem("conversationId")||null,caseId:localStorage.getItem("caseId")||null,participantId:localStorage.getItem("participantId")||null})})),xe(!1),[3,4]):(console.log("Can't check conversation!"),[2,null]);case 3:return n=o.sent(),console.log("Error fetching conversation status: ",n),[3,4];case 4:return[2]}})}),localStorage.removeItem("title"),ue(localStorage.getItem("conversationId")||null),ge(localStorage.getItem("caseId")||null),Re(localStorage.getItem("participantId")||null),On.current=localStorage.getItem("agentId")||null,$e(localStorage.getItem("chatSessionId")||null),localStorage.getItem("conversationId")&&localStorage.getItem("participantId")&&ie(!0),localStorage.getItem("chatUsername")&&Be(localStorage.getItem("chatUsername")),localStorage.getItem("chatUserType")&&Fe(localStorage.getItem("chatUserType")||"NEW_CUSTOMER"),_e({full_name:localStorage.getItem("chatUsername"),email:localStorage.getItem("chatEmail"),category:localStorage.getItem("chatCategory"),address:localStorage.getItem("chatAddress"),last_bill:localStorage.getItem("chatLastBill")}),localStorage.getItem("chatMessages")?jn(JSON.parse(localStorage.getItem("chatMessages")||"")):localStorage.setItem("chatMessages",JSON.stringify(Ln)),localStorage.getItem("conversationId")&&Zn(localStorage.getItem("conversationId")),document.addEventListener("visibilitychange",function(){var e;"visible"===document.visibilityState?(Cn.current=!0,"undefined"!=typeof document&&En.current&&localStorage.getItem("title")&&(vn(!1),yn(-1),sn(!1),document.title=localStorage.getItem("title")||"",null===(e=document.getElementById("inputMessage"))||void 0===e||e.focus(),setTimeout(function(){return localStorage.removeItem("title")},1e3)),localStorage.getItem("conversationId")&&Zn(localStorage.getItem("conversationId"))):Cn.current=!1})},Zn=function(e,t){return n(void 0,void 0,void 0,function(){var t,r,a,i;return o(this,function(l){switch(l.label){case 0:return l.trys.push([0,6,,7]),e?[4,y.get("NotificationModule/v2.0/records/Conversation/".concat(e,'/links?targetEntities=["Message"]'))]:[3,4];case 1:return(t=l.sent())?[4,Promise.all(null===(i=null==t?void 0:t.Message)||void 0===i?void 0:i.dbRecords.map(function(e){return n(void 0,void 0,void 0,function(){var n,t,r,a,i;return o(this,function(o){switch(o.label){case 0:return n={createdAt:null==e?void 0:e.createdAt,from:null===(t=null==e?void 0:e.properties)||void 0===t?void 0:t.From},[4,Xn(null===(r=null==e?void 0:e.properties)||void 0===r?void 0:r.Files)];case 1:return[2,(n.files=o.sent(),n.message=null===(a=null==e?void 0:e.properties)||void 0===a?void 0:a.Body,n.form=null,n.messageId=null==e?void 0:e.id,n.fromId=null===(i=null==e?void 0:e.createdBy)||void 0===i?void 0:i.id,n.senderType="EVENT"===e.type?"EVENT":e.properties.SenderType,n)]}})})}))]:[3,3];case 2:r=l.sent(),!En.current&&Object.keys(r).length>0&&sn(!0),r=r.sort(function(e,n){return new Date(n.createdAt).getTime()-new Date(e.createdAt).getTime()}),jn(r),localStorage.setItem("allMessages",JSON.stringify(r)),l.label=3;case 3:return[3,5];case 4:jn(Mn),l.label=5;case 5:return[3,7];case 6:return a=l.sent(),console.log("Error fetching messages:",a),[3,7];case 7:return[2]}})})};s(function(){"undefined"!=typeof document&&(U?(document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"):(document.body.style.overflow="",document.documentElement.style.overflow=""))},[U]);var Qn;s(function(){var e,n,t,o;if(De){var r=Xe||C();$e(r),localStorage.setItem("chatSessionId",r),Pn.current||(Pn.current=(void 0===(o=r)&&(o=null),d("".concat(O,"/ChatWebsocketModule/TwilioChatWebsocket/v1.0"),{path:"/ws",query:{clientId:o},reconnection:!0,reconnectionAttempts:1/0,reconnectionDelay:1e3,reconnectionDelayMax:5e3,timeout:1e4}))),null===(e=Pn.current)||void 0===e||e.on("connect",function(){console.log("Connected to WebSocket server")}),null===(n=Pn.current)||void 0===n||n.on("connect_error",function(e){console.log("Connect error due to ".concat(e.message)),Pn.current=null}),null===(t=Pn.current)||void 0===t||t.on("disconnect",function(e){console.log("Disconnected: ".concat(e)),Pn.current=null})}},[De]),s(function(){n(void 0,void 0,void 0,function(){var e,t;return o(this,function(r){return Pn.current&&pe&&(Pn.current.emit("joinRoom",pe),!Pn.current.listeners("case-event-".concat(pe)).length&&(null===(e=Pn.current)||void 0===e||e.on("case-event-".concat(pe),function(e){if(e.caseId===localStorage.getItem("caseId"))switch(e.type){case"CASE_UPDATED":On.current=e.data.properties.OwnerId,localStorage.setItem("agentId",On.current||"");break;case"CONVERSATION_CLOSED":Se(!0);break;case"MESSAGE_CREATED":$n(e.data)}})),!Pn.current.listeners("web-chat-input-".concat(pe)).length&&(null===(t=Pn.current)||void 0===t||t.on("web-chat-input-".concat(pe),function(e){return n(void 0,void 0,void 0,function(){return o(this,function(n){return e.caseId===pe&&"AGENT"===e.sender&&An(!0),[2]})})}))),[2]})})},[pe]),s(function(){n(void 0,void 0,void 0,function(){return o(this,function(e){try{Qn=!!_n&&setTimeout(function(){An(!1),clearTimeout(Qn)},1500)}catch(e){console.log("Error fetching data:",e)}return[2]})})},[_n]),s(function(){Bn.current=Ln},[Ln]),s(function(){n(void 0,void 0,void 0,function(){var e;return o(this,function(n){try{Ln.length&&pe&&Pn.current&&(null===(e=Pn.current)||void 0===e||e.emit("web-chat-input",{caseId:pe,conversationId:de,message:Oe,sender:"CUSTOMER"}))}catch(e){console.log("Error fetching data:",e)}return[2]})})},[Oe]);var Xn=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n(void 0,r([],e,!0),void 0,function(e){var n,t,a;return void 0===e&&(e=null),o(this,function(o){switch(o.label){case 0:return o.trys.push([0,4,,5]),n=[],e?[4,y.get("SchemaModule/v1.0/db/File/many?ids=".concat(e))]:[3,2];case 1:return(t=o.sent())?(Object.keys(t).length&&t.map(function(e){var t,o;n=r(r([],n,!0),[{id:(null==e?void 0:e.id)||"",type:(null===(t=null==e?void 0:e.properties)||void 0===t?void 0:t.Mimetype)||"",url:(null===(o=null==e?void 0:e.properties)||void 0===o?void 0:o.Url)||""}],!1)}),[2,0!==Object.keys(n).length?n:[]]):(console.log("Can't close conversation!"),[3,3]);case 2:return[2,[]];case 3:return[3,5];case 4:return a=o.sent(),console.log("Error fetching files:",a),[2,[]];case 5:return[2]}})})},$n=function(e){return n(void 0,void 0,void 0,function(){var n,t,r,a,i;return o(this,function(o){switch(o.label){case 0:if(!e||Bn.current.some(function(n){return n.messageId===e.id}))return[3,6];o.label=1;case 1:return o.trys.push([1,5,,6]),"CLOSED"===(null===(i=null===(a=null===(r=null==e?void 0:e.Conversation)||void 0===r?void 0:r.dbRecords[0])||void 0===a?void 0:a.properties)||void 0===i?void 0:i.Status)&&Se(!0),n=[],e.properties.Files?[4,Xn(e.properties.Files)]:[3,3];case 2:return n=o.sent(),0===Object.keys(n).length&&(n=null),et(e,n),[3,4];case 3:et(e,n),o.label=4;case 4:return[3,6];case 5:return t=o.sent(),console.log("Error fetching message:",t),[3,6];case 6:return[2]}})})},et=function(e,n){var t={senderType:"EVENT"!==e.type?e.properties.SenderType:e.type,createdAt:h(new Date).format(),from:"EVENT"!==e.type?e.properties.From:e.type,message:"EVENT"!==e.type?e.properties.Body:e.title,form:null,files:n,messageId:e.id,fromId:"EVENT"!==e.type?e.createdBy.id:"YouFibre"};En.current&&Cn.current||sn(!0),Wn(r(r([],zn||[],!0),[t],!1)),setTimeout(function(){Wn(null),jn(r([t],Bn.current,!0)),localStorage.setItem("chatMessages",JSON.stringify(r([t],Bn.current,!0))),xe(!1),Yn()},400)};s(function(){if("undefined"!=typeof document)if(localStorage.getItem("title")||localStorage.setItem("title","undefined"!=typeof document&&document.getElementsByTagName("title")[0].textContent||""),cn){var e=new Audio(G.toString());e.setAttribute("crossorigin","anonymous"),e.play().catch(function(e){console.log("User interaction required before playing sound")}),document.title="New message | YouFibre"}else document.title=localStorage.getItem("title")||"",Yn()},[cn]),s(function(){n(void 0,void 0,void 0,function(){var e;return o(this,function(n){try{"undefined"!=typeof window&&"undefined"!=typeof document&&(Ce?(window.innerWidth<577&&(document.body.style.overflow="hidden"),Sn.current&&clearInterval(Sn.current),localStorage.getItem("title")&&(document.title=localStorage.getItem("title")||""),vn(!1),yn(-1),sn(!1),null===(e=document.getElementById("inputMessage"))||void 0===e||e.focus(),setTimeout(function(){return localStorage.removeItem("title")},1e3)):(document.body.style.overflow="",tn(!1),Se(!1))),Yn(),En.current=Ce}catch(e){console.log("Error fetching data:",e)}return[2]})})},[Ce]);var nt=function(){Pn.current&&pe&&(Pn.current.emit("leaveRoom",pe),Pn.current.removeAllListeners()),ue(null),ge(null),Ye([]),Ze(!Ke),ee(!1),oe(null),R.current=null,localStorage.removeItem("chatEmail"),localStorage.removeItem("conversationId"),localStorage.removeItem("caseId"),localStorage.removeItem("participantId"),localStorage.removeItem("chatUsername"),localStorage.removeItem("twilio_token"),localStorage.removeItem("chatMessages"),localStorage.removeItem("chatUserType"),localStorage.removeItem("chatCategory"),localStorage.removeItem("chatAddress"),localStorage.removeItem("chatLastBill"),localStorage.removeItem("agentId"),localStorage.removeItem("chatSessionId"),Be(null),Fe(null),Re(null),_e({}),xe(!1),ie(!0),ce(null),On.current=null,Me(""),localStorage.setItem("chatMessages",JSON.stringify(Mn)),Wn(null),jn(Mn),Yn(),U&&ke(!0),D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:null}))},tt=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n(void 0,r([],e,!0),void 0,function(e){var t,r;return void 0===e&&(e=null),o(this,function(a){if(Oe.length>0||e||Object.keys(Pe).length>0){"undefined"!=typeof document&&(null===(r=document.getElementById("inputMessage"))||void 0===r||r.focus()),(t=new u).append("conversationSid",localStorage.getItem("conversationId")),t.append("message",Oe||e),t.append("from",localStorage.getItem("chatUsername")),t.append("sender","CUSTOMER"),Me(""),we(!0);try{Object.keys(Pe).length>0&&Pe.map(function(e){return n(void 0,void 0,void 0,function(){return o(this,function(n){return t.append("files",e),[2]})})})}catch(e){}try{y.post("ChatModule/v1.0/gateway/conversation/".concat(localStorage.getItem("conversationId"),"/message/send"),t,{headers:{"Content-Type":"multipart/form-data"}}).then(function(e){e?(Ye([]),ie(!0),we(!1),xe(!1)):(mn(!qn()),nt(),console.log("Conversation is closed"))}).catch(function(e){mn(!qn()),console.log("Send a Message:",e)})}catch(e){console.log("Error loading SVG:",e)}}return[2]})})},ot=function(){return n(void 0,void 0,void 0,function(){var e,r,a;return o(this,function(i){switch(i.label){case 0:return xe(!0),localStorage.setItem("chatUsername",Te.full_name),Be(Te.full_name),localStorage.setItem("chatEmail",Te.email),localStorage.setItem("chatCategory",Te.category),localStorage.setItem("chatAddress",Te.address),localStorage.setItem("chatLastBill",Te.last_bill),[4,(p=Te.email,n(void 0,void 0,void 0,function(){var e;return o(this,function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),[4,y.get("ChatModule/v1.0/gateway/token?identity=".concat(p,"&source=twilio"))];case 1:return[2,n.sent()||null];case 2:return e=n.sent(),console.log("Error fetching token:",e),[3,3];case 3:return[2]}})}))];case 1:return(e=i.sent())?(localStorage.setItem("twilio_token",e),ce(e),[4,(l=Te.full_name,c=Te.email,s=Te.address,d=Te.last_bill,u=je,m=Te.category,n(void 0,void 0,void 0,function(){var e,n;return o(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,y.post("ChatModule/v1.0/gateway/conversation/create",{source:"twilio",channel:"WEB_CHAT",identifier:c||null,DpaCustomerName:l||null,DpaCustomerEmail:c||null,DpaCustomerAddress:s||null,DpaCustomerLastBill:d||null,DpaCustomerType:u||null,DpaCustomerCategory:m||null})];case 1:return(e=t.sent())?[2,e||null]:(console.log("Can't create conversation!"),mn(!1),[2,null]);case 2:return n=t.sent(),mn(!1),x(n.message.replaceAll("OdinApiError:",""),"error"),[3,3];case 3:return[2]}})}))]):[3,3];case 2:return(r=i.sent())?(ie(!0),Re(null==r?void 0:r.participantId),localStorage.setItem("conversationId",null==r?void 0:r.conversationId),localStorage.setItem("caseId",null==r?void 0:r.caseId),localStorage.setItem("participantId",null==r?void 0:r.participantId),ge(null==r?void 0:r.caseId),ue(null==r?void 0:r.conversationId),D.goSetRegistrationData(t(t({},D.goGetRegistrationData()),{twilioChat:t(t({},null===(a=D.goGetRegistrationData())||void 0===a?void 0:a.twilioChat),{chatUsername:Te.full_name,chatSessionId:Xe,chatUserId:null==r?void 0:r.participantId,conversationId:null==r?void 0:r.conversationId,caseId:null==r?void 0:r.caseId,participantId:null==r?void 0:r.participantId})})),new Promise(function(e){jn(function(n){return e(),[]}),tt(R.current)}).then(function(){et({type:"EVENT",title:"Waiting for the agent to join the chat."},null)})):mn(!qn()),[3,4];case 3:xe(!1),i.label=4;case 4:return[2]}var l,c,s,d,u,m,p})})},rt=E({noClick:!0,noKeyboard:!0,onDrop:function(e){pe&&(e=(e=(e=e.filter(function(e){return e.size<10485760?e:x("Maximum file size is ".concat(10,"MB"),"error")})).filter(function(e){return kn.some(function(n){return e.name.endsWith(n)})?e:x("Unsupported File extension","error")})).filter(function(e){return 0===Object.keys(Pe.filter(function(n){return n.name===e.name})).length}),Object.keys(Pe).length+Object.keys(e).length<6?Ye(r(r([],Pe,!0),e,!0)):x("Maximum ".concat(5," files"),"warning"),qe(!1))}}),at=rt.getRootProps,it=rt.getInputProps,lt=rt.open;return a.createElement(a.Fragment,null,(void 0===process.env.GATSBY_TWILIO_CHAT_VERSION||"1"===process.env.GATSBY_TWILIO_CHAT_VERSION)&&a.createElement(V,null,a.createElement(q,t({className:"".concat(Ce?"show":""," ").concat(U?"fullscreen":"")},at(),{onDragOver:function(){return pe&&qe(!0)},onMouseLeave:function(){return qe(!1)}}),a.createElement(J,null,a.createElement(P,{className:"flex-center-justified"},a.createElement(k,{className:"p-0 m-0 flex-align-center"},a.createElement("div",{className:"flex-center-justified gap-5"},a.createElement("img",{src:L.toString(),alt:""}),a.createElement("span",{className:"dark-color"}," YouFibre"))),a.createElement(k,{className:"p-0 m-0 flex flex-align-center"},!de&&Object.keys(Ln).length>2&&a.createElement("button",{onClick:function(){return nt()},className:"small"},"Back"),de&&a.createElement("button",{onClick:function(){return tn(!0)},className:"small"},"End conversation"),!U&&a.createElement("img",{src:F.toString(),className:"close",onClick:function(){return ke(!Ce)},alt:""})))),a.createElement(v,{type:"chat"}),a.createElement(K,null,a.createElement(P,{className:"direction-column-reverse content-end chat-content-container"},a.createElement("div",{ref:Gn}),a.createElement(f,{messages:Ln,chatUsername:We,chatUserId:De,chatConversationId:de,resetFormValues:Ke,setChatForm:_e,buttonAction:function(e){if(un||pe||b())switch(e){case"new_customer":!function(){Fe("NEW_CUSTOMER"),localStorage.setItem("chatUserType","NEW_CUSTOMER");var e=r([{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:null,form:{type:"form",value:[{title:"Name",action:"full_name",placeholder:null,type:"text",required:!0},{title:"Email",action:"email",placeholder:null,type:"email",required:!0},{title:"Enter your Postcode",action:"address",placeholder:"Example: SW1 4EN",type:"zip",required:!0},{title:"What do you need help with today?",action:"category",placeholder:null,type:"select",required:!0,options:{SALES:"Sales",TECH_SUPPORT:"Tech Support",COMPLAINT:"Complaint"}},{title:"Submit",action:"submit_form",type:"button"}]},messageId:"3"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"We're so happy to hear from you! So that we can provide the best possible support, please provide us with the following information.",form:null,messageId:"2"},{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"Client",fromId:"Client",message:"I am new here",form:null,messageId:"1"}],Ln.slice(1),!0);Wn(r(r([],zn||[],!0),[e[0]],!1)),setTimeout(function(){Wn(null),jn(e)},400),localStorage.setItem("chatMessages",JSON.stringify(e))}();break;case"not_customer":!function(){Fe("NOT_ACCOUNT_HOLDER"),localStorage.setItem("chatUserType","NOT_ACCOUNT_HOLDER");var e=r([{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:null,form:{type:"form",value:[{title:"Name",action:"full_name",placeholder:null,type:"text",required:!0},{title:"Email",action:"email",placeholder:null,type:"email",required:!0},{title:"Enter your Postcode",action:"address",placeholder:"Example: SW1 4EN",type:"zip",required:!0},{title:"What do you need help with today?",action:"category",placeholder:null,type:"select",required:!0,options:{SALES:"Sales",TECH_SUPPORT:"Tech Support",COMPLAINT:"Complaint"}},{title:"Submit",action:"submit_form",type:"button"}]},messageId:"3"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"We're so happy to hear from you! So that we can provide the best possible support, please provide us with the following information.",form:null,messageId:"2"},{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"Client",fromId:"Client",message:"I am not the account holder",form:null,messageId:"1"}],Ln.slice(1),!0);Wn(r(r([],zn||[],!0),[e[0]],!1)),setTimeout(function(){Wn(null),jn(e)},400),localStorage.setItem("chatMessages",JSON.stringify(e))}();break;case"old_customer":!function(){Fe("ACCOUNT_HOLDER"),localStorage.setItem("chatUserType","ACCOUNT_HOLDER");var e=r([{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:null,form:{type:"form",value:[{title:"Name",action:"full_name",placeholder:null,type:"text",required:!0},{title:"Email",action:"email",placeholder:null,type:"email",required:!0},{title:"Enter your Postcode",action:"address",placeholder:"Example: SW1 4EN",type:"zip",required:!0},{title:"What was the total value of your last bill?",action:"last_bill",placeholder:"Total amount of your last bill",type:"number",required:!0},{title:"What do you need help with today?",action:"category",placeholder:null,type:"select",required:!0,options:{SALES:"Sales",TECH_SUPPORT:"Tech Support",INSTALLS_AND_SERVICE_VISITS:"Installs & Service Visits",MANAGE_MY_ACCOUNT:"Manage My Account",BILLING:"Billing",CANCELLATION:"Cancellation",COMPLAINT:"Complaint"}},{title:"Submit",action:"submit_form",type:"button"}]},messageId:"3"},{senderType:"AGENT",createdAt:h(new Date).format(),from:"YouFibre",fromId:"YouFibre",message:"We're so happy to hear from you! So that we can provide the best possible support, please provide us with the following information.",form:null,messageId:"2"},{senderType:"CUSTOMER",createdAt:h(new Date).format(),from:"Client",fromId:"Client",message:"I am the account holder",form:null,messageId:"1"}],Ln.slice(1),!0);Wn(r(r([],zn||[],!0),[e[0]],!1)),setTimeout(function(){Wn(null),jn(e)},400),localStorage.setItem("chatMessages",JSON.stringify(e))}();break;case"submit_form":Te.full_name&&Te.address&&"/"!==Te.address&&Te.email&&("ACCOUNT_HOLDER"===localStorage.getItem("chatUserType")&&void 0!==Te.last_bill||"ACCOUNT_HOLDER"!==localStorage.getItem("chatUserType"))&&Te.category&&je&&(R.current="<b>".concat(Dn[je],"</b><br /><b>Full name</b>: ").concat(Te.full_name,"<br /><b>Email</b>: ").concat(Te.email,"<br /><b>Address</b>: ").concat(Te.address,"<br />").concat(void 0!==Te.last_bill?"<b>What was the total value of your last bill</b>: "+Te.last_bill+"<br />":"","<b>What do you need help with today</b>: ").concat(Un[Te.category]),n(void 0,void 0,void 0,function(){var e;return o(this,function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),xe(!0),[4,y.get("SupportModule/v1.0/Case/outage/verify?contactEmailAddress=".concat(Te.email)).then(function(e){var n,t,o;return xe(!1),200===(null===(n=null==e?void 0:e.data)||void 0===n?void 0:n.statusCode)&&(null===(t=null==e?void 0:e.data)||void 0===t?void 0:t.data)?(ee(!0),oe(null===(o=null==e?void 0:e.data)||void 0===o?void 0:o.message),!0):(ot(),!1)}).catch(function(e){console.log("Outage Message:",e)})];case 1:return n.sent(),[3,3];case 2:return e=n.sent(),console.log("Error fetching outage: ",e),[3,3];case 3:return[2]}})}))}else nt()},newMessages:zn,chatActive:un,API:y}))),_n&&Ce&&a.createElement(Q,null,a.createElement("small",null,"Agent is typing...")),ae&&!Ie&&!(null===(m=Ln[0])||void 0===m?void 0:m.form)&&a.createElement(Z,{className:"".concat(U?"form-fullscreen":"")},a.createElement(Y,null,a.createElement("input",{id:"inputMessage",className:"",autoComplete:"off",maxLength:500,onChange:function(e){return Me(e.target.value)},value:Oe,type:"text",placeholder:"Write a reply..."}),a.createElement("input",t({},it())),a.createElement("img",{className:"action",alt:"Add attachment",src:W.toString(),onClick:function(){return lt()}}),a.createElement("button",{type:"submit",onClick:function(e){return function(e){e.preventDefault(),tt()}(e)},disabled:be||!1},be?a.createElement("img",{src:z.toString(),width:16,height:16}):"Send"))),Object.keys(Pe).length>0&&a.createElement("div",{className:"files"},Pe.map(function(e){return a.createElement("div",{className:"file",key:e.name},a.createElement("div",{className:"fileName"},e.name),a.createElement("img",{className:"action",src:B.toString(),onClick:function(){return n=e.name,t=Pe.filter(function(e){return e.name!==n}),void Ye(t);var n,t},alt:""}))})),He&&pe&&Ce&&a.createElement("div",{className:"cover dark-color upload"},a.createElement("h4",{className:"mb-10"},"Drag and drop your files here"),a.createElement("p",{className:"mb-10"},"Maximum ",5," files. Limit ",10,"MB per file."),a.createElement("p",null,"Supported files: ",kn&&kn.map(function(e,n){return!["mp4","mp3"].some(function(n){return n===e})&&(0===n?e:", ".concat(e))}))),he&&Ce&&a.createElement("div",{className:"cover"},a.createElement("img",{className:"make-it-white",src:z.toString(),width:14,height:14,alt:""})),Ie&&Ce&&a.createElement("div",{className:"cover dark-color closed"},a.createElement("h4",{className:"mb-10"},"Conversation is closed"),a.createElement("span",{className:"mb-10"},"This chat has now closed. If you need any help, feel free to start a new chat.",a.createElement("br",null),"We're always happy to assist you!"),a.createElement("button",{onClick:function(){Se(!1),nt()}},"Create new")),$&&te&&a.createElement("div",{className:"cover dark-color closed"},a.createElement("h4",{className:"mb-10"},"Outage in your area"),a.createElement("span",{className:"mb-10"},te),a.createElement("button",{onClick:function(){nt()},className:"blue-bg"},"Got It - Close Chat"),a.createElement("button",{onClick:function(){ee(!1),oe(null),ot()}},"Still Need Help - Start Chat")),nn&&Ce&&a.createElement("div",{className:"cover dark-color closed"},a.createElement("h4",{className:"mb-10"},"Close conversation"),a.createElement("span",{className:"mb-10"},"Are you sure you want to end this conversation?"),a.createElement("button",{onClick:function(){tn(!1)}},"Cancel"),a.createElement("button",{onClick:function(){tn(!1),function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];n(void 0,r([],e,!0),void 0,function(e){var n;return void 0===e&&(e="CUSTOMER"),o(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,y.post("ChatModule/v1.0/gateway/conversation/".concat(localStorage.getItem("conversationId"),"/close"),{closedBy:e})];case 1:return t.sent()?(nt(),[3,3]):(console.log("Can't close conversation!"),[2,null]);case 2:return n=t.sent(),console.log("Error closing conversation:",n),[3,3];case 3:return[2]}})})}("CUSTOMER"),nt()},className:"blue-bg"},"Confirm")),!un&&Ce&&!pe&&gn&&!b()&&a.createElement("div",{className:"cover dark-color closed"},a.createElement("h4",{className:"mb-10"},"Out of service"),a.createElement("span",{className:"mb-10",dangerouslySetInnerHTML:{__html:g(gn.chat_off_mode_text,{target:"_blank"}).replaceAll(/\r\n|\n/g,"<br />")}}),!U&&a.createElement("button",{onClick:function(){return ke(!1)}},"Close chat"))),a.createElement(H,{onClick:function(){return Ie&&(nt(),Se(!1)),ee(!$),void ke(!Ce)},className:"YFChat ".concat(Ce?"open":""," ").concat(U?"fullscreen":"")},a.createElement("img",{src:j.toString(),className:"icon-default",alt:""}),a.createElement("img",{src:F.toString(),className:"icon-hover",alt:""}),cn&&a.createElement("small",{className:"unread"},"1"))))};export{X as default};
+import{__assign as e,__awaiter as t,__spreadArray as n,__generator as o}from"../../node_modules/tslib/tslib.es6.js";import i,{useContext as r,useRef as l,useEffect as s}from"react";import a from"./components/Widget.js";import c,{ChatGlobalProvider as u}from"../context/ChatGlobalContext.js";import d from"./Chat.js";import{initialTwilioChatState as m,defaultMessages as v}from"../utils/chats.js";import h from"./components/styled/ChatWrapper.js";import{isConversationActive as f,findUnreadedMessages as g,chatLocalStorage as p,getAllMessages as y}from"../services/chatService.js";import"../assets/styles/fonts.css.js";import"../assets/styles/app.scss.js";var C=function(u){var C=u.fullscreen,b=void 0!==C&&C,w=u.side,S=void 0===w?"right":w,E=r(c),I=l([]);return s(function(){var i;b&&"undefined"!=typeof document&&(null===(i=document.getElementById("main_chat"))||void 0===i||i.remove());t(void 0,void 0,void 0,function(){var e;return o(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,f()];case 1:return"CLOSED"===t.sent()&&(null==E||E.goResetTwilioChat()),[3,3];case 2:return e=t.sent(),console.error("Error fetching is conversation active:",e),[3,3];case 3:return[2]}})});var r=function(){for(var i=[],r=0;r<arguments.length;r++)i[r]=arguments[r];return t(void 0,n([],i,!0),void 0,function(t){var n,i,r,l,s;return void 0===t&&(t=!1),o(this,function(o){switch(o.label){case 0:return o.trys.push([0,7,,8]),[4,p()];case 1:return n=o.sent(),p("chatConversationId")&&n?[4,y()]:[3,5];case 2:return(i=o.sent())?[4,g(I.current,i)]:[3,4];case 3:if(r=o.sent(),i&&n&&r)return l=e(t?e({},null==E?void 0:E.twilioChat):e(e({},m),n||[]),{messages:i,chatUnreaded:(null==E?void 0:E.twilioChat.chatConversationId)&&(!(null==E?void 0:E.twilioChat.openChat)||!(null==E?void 0:E.twilioChat.visibilityChange))&&Object.keys(r).length>1,fullscreen:b,side:S}),null==E||E.goSetTwilioChat(l),I.current=i,[2,l];o.label=4;case 4:return[3,6];case 5:return l=e(e(e({},m),n||[]),{chatUserType:null,openChat:!1,fullscreen:b,side:S}),null==E||E.goSetTwilioChat(l),I.current=v,[2,l];case 6:return[3,8];case 7:return s=o.sent(),console.error("Error fetching active conversation:",s),[3,8];case 8:return[2]}})})};r(),localStorage.removeItem("title"),document.addEventListener("visibilitychange",function(){return t(void 0,void 0,void 0,function(){var t,n;return o(this,function(o){switch(o.label){case 0:return[4,r()];case 1:return(t=o.sent())&&("undefined"!=typeof document&&"visible"===document.visibilityState?(localStorage.getItem("title")&&(document.title=localStorage.getItem("title")||""),null==E||E.goSetTwilioChat(e(e({},t),{visibilityChange:!0,chatUnreaded:!1})),document.title=localStorage.getItem("title")||"",null===(n=document.getElementById("inputMessage"))||void 0===n||n.focus(),setTimeout(function(){return localStorage.removeItem("title")},1e3),localStorage.getItem("conversationId")&&y()):"hidden"===document.visibilityState?null==E||E.goSetTwilioChat(e(e({},t),{visibilityChange:!1})):null==E||E.goSetTwilioChat(e(e({},t),{visibilityChange:!0}))),[2]}})})})},[]),s(function(){"undefined"!=typeof document&&(b?(document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"):(document.body.style.overflow="",document.documentElement.style.overflow=""))},[b]),i.createElement(h,{className:"chat-body ".concat(S||"right")},i.createElement(d,null),!b&&i.createElement(a,null))},b=function(t){return i.createElement(u,null,i.createElement(C,e({},t)))};export{b as default};
 //# sourceMappingURL=index.js.map