@defra/flood-webchat 0.0.1-beta.49 → 0.0.1-beta.50

package/dist/client.js

@@ -1 +1 @@
-(()=>{"use strict";var e={n:t=>{var a=t&&t.__esModule?()=>t.default:()=>t;return e.d(a,{a}),a},d:(t,a)=>{for(var n in a)e.o(a,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:a[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{init:()=>J});const a=require("react");var n=e.n(a);const l=require("react-dom/client"),o=require("@nice-devone/nice-cxone-chat-web-sdk"),r=(...e)=>e.filter((e=>e&&"string"==typeof e)).join(" "),c=require("react-dom"),s=require("luxon"),i=e=>({id:e.id,text:e.messageContent?.text,createdAt:new Date(e.createdAt),user:e.authorEndUserIdentity?.fullName?.trim()||null,assignee:e.authorUser?.firstName||null,direction:e.direction}),u=e=>{const t=s.DateTime.local();t.setZone("Europe/London");let a=`Floodline webchat transcript, ${t.toFormat("HH:mm:ss a, dd LLLL yyyy")}\n\n`;for(const t of e){const{text:e,direction:n,user:l,assignee:o,createdAt:r}=t,c="inbound"===n?l:`${o} (Floodline adviser)`;a+=`[${s.DateTime.fromJSDate(new Date(r)).setZone("Europe/London").toFormat("HH:mm:ss a, dd LLLL yyyy")}] ${c}: \n${e}\n\n`}return a=a.replace(/<a\b[^>]*>/i,"").replace(/<\/a>/i,""),encodeURIComponent(a)},d="webchat_settings",m="webchat_customer_id",g="webchat_thread_id",E={SET_CHAT_VISIBILITY:(e,t)=>({...e,isChatOpen:t}),SET_AVAILABILITY:(e,t)=>({...e,availability:t}),SET_SETTINGS:(e,t)=>(t?window.localStorage.setItem(d,JSON.stringify(t)):window.localStorage.removeItem(d),{...e,settings:t}),SET_CUSTOMER_ID:(e,t)=>(t?window.localStorage.setItem(m,t):window.localStorage.removeItem(m),{...e,customerId:t}),SET_THREAD_ID:(e,t)=>(t?window.localStorage.setItem(g,t):window.localStorage.removeItem(g),{...e,threadId:t}),SET_THREAD:(e,t)=>({...e,thread:t}),SET_MESSAGE:(e,t)=>({...e,message:i(t),messages:[...e.messages,i(t)]}),SET_MESSAGES:(e,t)=>{return{...e,messages:(a=t,a.map((e=>i(e)))).reverse()};var a},SET_AGENT:(e,t)=>({...e,agent:t}),SET_AGENT_TYPING:(e,t)=>({...e,isAgentTyping:t}),SET_AGENT_STATUS:(e,t)=>({...e,agentStatus:t}),SET_UNSEEN_COUNT:(e,t)=>({...e,unseenCount:t}),SET_INSTIGATOR_ID:(e,t)=>({...e,instigatorId:t}),SET_LIVE_REGION_TEXT:(e,t)=>({...e,liveRegionText:t}),TOGGLE_IS_MOBILE:(e,t)=>({...e,isMobile:t}),TOGGLE_IS_KEYBOARD:(e,t)=>({...e,isKeyboard:t})},h={availability:null,customerId:null,threadId:null,thread:null,messages:[],unseenCount:0,instigatorId:null,agent:null,agentStatus:null,isAgentTyping:!1,isChatOpen:!1,isMobile:window.matchMedia("(max-width: 640px)").matches,isKeyboard:!1,settings:{audio:!0,scroll:!0}},w=(e,t)=>{const{type:a,payload:n}=t,l=E[a];return l?l.bind(void 0,e,n)():e},v=(0,a.createContext)(h),y=({sdk:e,availability:t,playSound:l,children:r})=>{const[c,s]=(0,a.useReducer)(w,h),i=e=>{s({type:"SET_AGENT",payload:e.detail.data.inboxAssignee}),s({type:"SET_AGENT_STATUS",payload:e.detail.data.contact.status}),s({type:"SET_UNSEEN_COUNT",payload:e.detail.data.contact.customerStatistics.unseenMessagesCount})},u=e=>{s({type:"SET_AGENT",payload:e.detail.data.inboxAssignee}),s({type:"SET_AGENT_STATUS",payload:e.detail.data.case.status})},E=()=>{s({type:"SET_AGENT_TYPING",payload:!0})},y=()=>{s({type:"SET_AGENT_TYPING",payload:!1}),s({type:"SET_LIVE_REGION_TEXT"})},b=e=>{s({type:"SET_MESSAGE",payload:e.detail.data.message}),s({type:"SET_AGENT_STATUS",payload:e.detail.data.case.status}),s({type:"SET_UNSEEN_COUNT",payload:e.detail.data.case.customerStatistics.unseenMessagesCount}),JSON.parse(window.localStorage.getItem(d)).audio&&"outbound"===e.detail.data.message.direction&&l&&l()},f=e=>{s({type:"SET_AGENT_STATUS",payload:e.detail.data.case.status})},p=e=>{s({type:"TOGGLE_IS_MOBILE",payload:e.matches})},k=()=>{s({type:"TOGGLE_IS_KEYBOARD",payload:!0})},_=()=>{s({type:"TOGGLE_IS_KEYBOARD",payload:!1})};(0,a.useEffect)((()=>(e.onChatEvent(o.ChatEvent.LIVECHAT_RECOVERED,i),e.onChatEvent(o.ChatEvent.MESSAGE_CREATED,b),e.onChatEvent(o.ChatEvent.AGENT_TYPING_STARTED,E),e.onChatEvent(o.ChatEvent.AGENT_TYPING_ENDED,y),e.onChatEvent(o.ChatEvent.ASSIGNED_AGENT_CHANGED,u),e.onChatEvent(o.ChatEvent.CONTACT_STATUS_CHANGED,f),window.matchMedia("(max-width: 640px)").addEventListener("change",p),window.addEventListener("keydown",k),window.addEventListener("pointerdown",_),()=>{window.removeEventListener("change",p),window.removeEventListener("keydown",k),window.removeEventListener("pointerdown",_)})),[e]),(0,a.useEffect)((()=>{s({type:"SET_AVAILABILITY",payload:t}),N(window.localStorage.getItem(m)),T(window.localStorage.getItem(g)),A(JSON.parse(window.localStorage.getItem(d))||c.settings)}),[]),(0,a.useEffect)((()=>{"#webchat"===window.location.hash&&S(!0);const e=()=>{"#webchat"===window.location.hash?S(!0):S(!1)};return window.addEventListener("popstate",e),()=>{window.removeEventListener("popstate",e)}}),[]);const S=e=>{s({type:"SET_CHAT_VISIBILITY",payload:e})},N=e=>{s({type:"SET_CUSTOMER_ID",payload:e})},T=e=>{s({type:"SET_THREAD_ID",payload:e})},C=e=>{s({type:"SET_THREAD",payload:e})},I=e=>{s({type:"SET_MESSAGES",payload:e})},A=e=>{s({type:"SET_SETTINGS",payload:e})},L=e=>{s({type:"SET_UNSEEN_COUNT",payload:e})},x=e=>{s({type:"SET_INSTIGATOR_ID",payload:e})},D=e=>{s({type:"SET_LIVE_REGION_TEXT",payload:e})},G=(0,a.useMemo)((()=>({...c,sdk:e,setSettings:A,setCustomerId:N,setThreadId:T,setThread:C,setMessages:I,setUnseenCount:L,setChatVisibility:S,setInstigatorId:x,setLiveRegionText:D,onLiveChatRecovered:i,onAssignedAgentChanged:u,onAgentTypingStarted:E,onAgentTypingEnded:y,onMessageCreated:b,onContactStatusChanged:f})));return n().createElement(v.Provider,{value:G},r)},b=()=>(0,a.useContext)(v),f=()=>{const e=window.location.href.split("#")[0];window.history.pushState({history:!0},null,`${e}#webchat`)},p=()=>{if(window.history.state?.history)return window.history.back();const e=window.location.href.split("#")[0];return window.history.replaceState(null,null,e)};function k(){const{thread:e,threadId:t,setChatVisibility:a,setUnseenCount:l,isMobile:o}=b(),r=n=>{n.preventDefault(),a(!1),p(),t&&(e?.lastMessageSeen(),l(0))},c=n().createElement("button",{className:"wc-header__back","aria-label":"Close the webchat",onClick:r},n().createElement("svg",{"aria-hidden":"true",focusable:"false",width:"20",height:"20",viewBox:"0 0 20 20"},n().createElement("path",{d:"M4.828,11L12.314,18.485L10.899,19.899L1,10L10.899,0.101L12.314,1.515L4.828,9L19,9L19,11L4.828,11Z",fill:"currentColor"}))),s=n().createElement("button",{className:"wc-header__close","aria-label":"Close the webchat",onClick:r},n().createElement("svg",{"aria-hidden":"true",focusable:"false",width:"20",height:"20",viewBox:"0 0 20 20"},n().createElement("path",{d:"M10,8.6L15.6,3L17,4.4L11.4,10L17,15.6L15.6,17L10,11.4L4.4,17L3,15.6L8.6,10L3,4.4L4.4,3L10,8.6Z",fill:"currentColor"}))),i=n().createElement("button",{className:"wc-header__hide","aria-label":"Minimise the webchat",onClick:r},n().createElement("svg",{"aria-hidden":"true",focusable:"false",width:"20",height:"20",viewBox:"0 0 20 20"},n().createElement("path",{d:"M10 14.4l-7-7L4.4 6l5.6 5.6L15.6 6 17 7.4l-7 7z",fill:"currentColor"}))),u=o&&window.history.state,d=o&&!window.history.state;let m=s;return t&&(m=i,d&&(m=i)),!t&&d&&(m=s),u&&(m=null),n().createElement("div",{className:"wc-header"},u?c:null,n().createElement("h2",{id:"wc-header",className:"wc-header__title"},"Floodline webchat"),m)}function _({onContinue:e}){return n().createElement(n().Fragment,null,n().createElement(k,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("h3",{id:"wc-subtitle",className:"wc-heading","aria-live":"polite"},"What you can use webchat for"),n().createElement("p",null,"Webchat lets you talk directly to a Floodline adviser."),n().createElement("p",null,"You can use webchat to get:"),n().createElement("ul",{className:"wc-list"},n().createElement("li",null,"current flood warnings and alerts in your area"),n().createElement("li",null,"information on the flood warning service"),n().createElement("li",null,"advice on what to do before, during and after a flood")),n().createElement("p",null,"There are other ways to ",n().createElement("a",{className:"govuk-link",href:"https://www.gov.uk/sign-up-for-flood-warnings",target:"_blank",rel:"noreferrer"},"sign up for flood warnings")," and ",n().createElement("a",{className:"govuk-link",href:"https://www.fws.environment-agency.gov.uk/app/olr/login",target:"_blank",rel:"noreferrer"},"manage your flood warnings account"),"."),n().createElement("p",null,"Do not use webchat to ",n().createElement("a",{className:"govuk-link",href:"https://www.gov.uk/report-flood-cause",target:"_blank",rel:"noreferrer"},"report a flood"),"."),n().createElement("button",{className:"govuk-button wc-button govuk-!-margin-top-1","data-module":"govuk-button",onClick:e},"Continue"),n().createElement("h3",{className:"wc-heading"},"Other flood information"),n().createElement("p",null,"Call Floodline for all other flood and flood warning information."),n().createElement("p",null,n().createElement("strong",null,"Floodline helpline"),n().createElement("br",null),"Telephone: 0345 988 1188",n().createElement("br",null),"Textphone: 0345 602 6340",n().createElement("br",null),"Open 24 hours a day, 7 days a week",n().createElement("br",null),n().createElement("a",{className:"govuk-link",href:"https://gov.uk/call-charges",target:"_blank",rel:"noreferrer"},"Find out more about call charges")))))}const S=require("uuid"),N=e=>{const t=async()=>e.authorize();return{connect:t,fetchCustomerId:async()=>{const e=await t();return e?.consumerIdentity.idOnExternalPlatform},fetchThread:async a=>(await t(),e.getThread(a)),fetchMessages:async(e,a)=>{await t();const n=await e.recover(a),l=[];let o=n.messages;for(;o.length;){o.map((e=>l.push(e)));try{o=(await e.loadMoreMessages()).data.messages}catch(e){o=[]}}return l}}},T=({errors:e})=>{const t=Object.keys(e),a=e=>{e.preventDefault();const t=e.target.getAttribute("data-key");document.querySelector(`#wc-${t}`).focus()};return 0===t.length?null:n().createElement("div",{className:"govuk-error-summary govuk-!-static-margin-bottom-7","data-module":"govuk-error-summary",tabIndex:"-1"},n().createElement("div",{role:"alert"},n().createElement("h2",{id:"wc-error",className:"wc-error-summary__title govuk-error-summary__title"},"There is a problem"),n().createElement("div",{className:"govuk-error-summary__body"},n().createElement("ul",{className:"govuk-list govuk-error-summary__list wc-error-summary__list"},t.map((t=>n().createElement("li",{key:t},n().createElement("a",{href:"#","data-key":t,onClick:a},e[t]))))))))},C=500;function I({onPreChatScreen:e}){const{sdk:t,setCustomerId:l,setThreadId:o,setThread:c,setLiveRegionText:s}=b(),{fetchCustomerId:i,fetchThread:u}=N(t),[d,m]=(0,a.useState)({}),[g,E]=(0,a.useState)(0),[h,w]=(0,a.useState)(!1),v=(0,a.useRef)(),y=(0,a.useRef)(),f=C>=g;let p=`You have ${C-g} characters remaining`;f||(p=`You have ${g-C} characters too many`),(0,a.useEffect)((()=>{Object.keys(d).length&&document.querySelector(".govuk-error-summary")?.focus()}),[d]);const _=h?"Requesting...":"Request chat";return(0,a.useEffect)((()=>{h&&s(_)}),[h]),n().createElement(n().Fragment,null,n().createElement(k,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("a",{href:"#",className:"wc-back-link govuk-back-link",onClick:e},"What you can use webchat for"),n().createElement(T,{errors:d}),n().createElement("h3",{id:"wc-subtitle",className:"wc-heading","aria-live":"polite"},"Your name and question"),n().createElement("form",null,n().createElement("div",{className:r("wc-form-group","govuk-form-group",d.name&&"govuk-form-group--error")},n().createElement("label",{className:"wc-label govuk-label",htmlFor:"wc-name"},"Your name"),d.name&&n().createElement("p",{className:"govuk-error-message"},n().createElement("span",{className:"govuk-visually-hidden"},"Error:")," ",d.name),n().createElement("input",{ref:v,className:r("wc-input","govuk-input",d.name&&"govuk-input--error"),id:"wc-name",name:"name",type:"text","data-testid":"request-chat-user-name"})),n().createElement("div",{className:"wc-form-group govuk-character-count","data-module":"govuk-character-count","data-maxlength":"500"},n().createElement("div",{className:r("govuk-form-group",d.question&&"govuk-form-group--error")},n().createElement("label",{className:"wc-label govuk-label",htmlFor:"wc-question"},"Your question"),d.question&&n().createElement("p",{className:"govuk-error-message"},n().createElement("span",{className:"govuk-visually-hidden"},"Error:"),d.question),n().createElement("textarea",{ref:y,id:"wc-question",name:"question",rows:"5","aria-describedby":"wc-question-info",onChange:e=>{E(e.target.value.length)},className:r("wc-textarea","govuk-textarea","govuk-js-character-count",!f||d.question?"govuk-textarea--error":""),"data-testid":"request-chat-user-question"}),n().createElement("div",{id:"wc-question-info",className:"wc-hint govuk-hint govuk-char-count__msg",style:{color:f?"":"#d4351c"},"aria-hidden":"true"},p),n().createElement("div",{className:"govuk-character-count__sr-status govuk-visually-hidden","aria-live":"polite"},p))),n().createElement("div",{className:"wc-inset-text govuk-inset-text"},"By selecting 'Request chat' you agree to the terms of our ",n().createElement("a",{href:"https://check-for-flooding.service.gov.uk/privacy-notice",target:"_blank",rel:"noreferrer",className:"govuk-link"},"privacy notice"),"."),n().createElement("button",{className:"wc-button govuk-button govuk-!-margin-top-1","data-module":"govuk-button",onClick:async e=>{if(e.preventDefault(),h)return;const a={};if(0===v.current.value.length&&(a.name="Enter your name"),0===y.current.value.length&&(a.question="Enter your question"),y.current.value.length>C&&(a.question="Your question must be 500 characters or less"),0===Object.keys(a).length)try{w(!0);const e=S.v4(),a=await i(),n=await u(e);t.getCustomer().setName(v.current.value),await n.startChat(y.current.value||"Begin conversation"),l(a),o(e),c(n),n.setCustomField("threadid",e)}catch(e){console.log("[Request chat Error]",e)}m(a)},"aria-disabled":h},_)))))}function A({children:e}){return n().createElement("div",{className:"wc-footer"},e)}function L({message:e,previousMessage:t}){const a="outbound"===e.direction,l=e?.direction===t?.direction;return n().createElement("li",{className:r("wc-chat__message",a?"outbound":"inbound")},n().createElement("div",{className:"wc-chat__from"},l?null:n().createElement("span",null,a?e.assignee:"You"),n().createElement("span",{className:"govuk-visually-hidden"},":")),n().createElement("div",{className:r("wc-chat__text",a?"outbound":"inbound")},e.text))}const x=(e,t)=>{(0,a.useEffect)((()=>{if(e){e.style.height="0px";const t=e.scrollHeight;e.style.height=`${t}px`}}),[e,t])},D=(e,t,a)=>{if("UNAVAILABLE"===e)return"Webchat is not currently available";if(!t)return"Connecting to Floodline";switch(t){case"closed":case"resolved":return a?`${a} ended the session`:"Session ended by advisor";default:return a?`You are speaking with ${a}`:"No advisers currently available"}};function G({onEndChatScreen:e,onSettingsScreen:t}){const{availability:l,thread:o,messages:r,agent:c,agentStatus:s,isAgentTyping:i,isChatOpen:d,settings:m,isKeyboard:g,setLiveRegionText:E}=b(),[h,w]=(0,a.useState)(""),[v,y]=(0,a.useState)(!1),f=(0,a.useRef)();x(f.current,h),(0,a.useEffect)((()=>{if(m.scroll&&0!==r.length){const e=document.querySelector(".wc-body");e.scrollTop=e.scrollHeight}}),[r,i]),(0,a.useEffect)((()=>{const e=document.querySelector(".wc-form__label");0===h.length?e.classList.remove("govuk-visually-hidden"):e.classList.add("govuk-visually-hidden")}),[h]);const p=c?.nickname||c?.firstName,_=D(l,s,p);(0,a.useEffect)((()=>(_&&E(`Floodline webchat - ${_}`),()=>{E()})),[_]),(0,a.useEffect)((()=>(i&&d&&E(`${p} is typing...`),()=>{E()})),[i,d]),(0,a.useEffect)((()=>{const e=r[r.length-1];return"closed"!==s&&"outbound"===e?.direction&&E(`${p} said: ${e.text}`),()=>{E()}}),[r]);const S=()=>{if(0!==f.current.value.length&&"closed"!==s){try{const e=f.current.value.trim();o.sendTextMessage(e),E(`You said: ${e}`)}catch(e){console.log("[Chat Error] sendMessage",e)}w("")}},N=()=>{const e=u(r);document.querySelector("#transcript-download").setAttribute("href",`data:text/plain;charset=utf-8,${e}`)},T=a=>{if("Enter"===a.key&&!a.shiftKey)switch(a.target.id){case"text-area":a.preventDefault(),S();break;case"end-chat":e(a);break;case"wc-settings":t(a);break;case"transcript-download":N()}" "===a.key&&("end-chat"===a.target.id&&e(a),"wc-settings"===a.target.id&&t(a))};return n().createElement(n().Fragment,null,n().createElement(k,null),n().createElement("div",{className:"wc-status"},n().createElement("p",{className:"wc-status__availability"},_),n().createElement("a",{id:"end-chat",className:"wc-status__link",href:"#","data-module":"govuk-button",role:"button",onClick:e,onKeyDown:T},"End chat")),n().createElement("div",{className:"wc-body",tabIndex:"0"},n().createElement("ul",{className:"wc-chat"},r.length?r.map(((e,t)=>n().createElement(L,{key:e.id,message:e,previousMessage:r[t-1]}))):null,i?n().createElement("li",{className:"wc-chat__message outbound"},n().createElement("div",{className:"wc-chat__from"},p," is typing"),n().createElement("div",{className:"wc-chat__text outbound"},n().createElement("svg",{width:"28",height:"16",x:"0px",y:"0px",viewBox:"0 0 28 16"},n().createElement("circle",{stroke:"none",cx:"3",cy:"8",r:"3",fill:"currentColor"}),n().createElement("circle",{stroke:"none",cx:"14",cy:"8",r:"3",fill:"currentColor"}),n().createElement("circle",{stroke:"none",cx:"25",cy:"8",r:"3",fill:"currentColor"})))):null)),n().createElement(A,null,n().createElement("form",{className:"wc-form"+(v?" wc-focus-within":""),noValidate:!0,onSubmit:e=>{e.preventDefault(),S()}},n().createElement("label",{className:"govuk-label wc-form__label",htmlFor:"wc-form-textarea"},"Your message",n().createElement("span",{className:"govuk-visually-hidden"}," (enter key submits)")),n().createElement("textarea",{ref:f,rows:"1","aria-required":"true",className:"wc-form__textarea",id:"text-area",name:"message",onChange:e=>{w(e.target?.value)},onKeyDown:T,onFocus:()=>{y(g)},onBlur:()=>{y(!1)},value:h}),n().createElement("input",{type:"submit",className:"wc-form__button govuk-button",value:"Send","data-prevent-double-click":"true"})),n().createElement("div",{className:"wc-footer__settings"},n().createElement("a",{href:"#",id:"wc-settings",className:"wc-footer__settings-link","data-module":"govuk-button",onKeyDown:T,onClick:t},"Settings"),n().createElement("a",{href:"#",id:"transcript-download",className:"wc-footer__settings-link","data-module":"govuk-button",download:"floodline-webchat-transcript.txt",onKeyDown:T,onClick:N},"Save chat"))))}function q(){return n().createElement(n().Fragment,null,n().createElement(k,null),n().createElement("div",{className:"wc-body"},n().createElement("h3",{id:"wc-subtitle",className:"govuk-heading-m"},"Webchat is currently not available"),n().createElement("p",{className:"govuk-body-s"},"Try again later, or call Floodline:"),n().createElement("p",{className:"govuk-body-s"},n().createElement("strong",null,"Floodline helpline"),n().createElement("br",null),"Telephone: 0345 988 1188",n().createElement("br",null),"Textphone: 0345 602 6340",n().createElement("br",null),"Open 24 hours a day, 7 days a week",n().createElement("br",null),n().createElement("a",{className:"govuk-link",href:"https://gov.uk/call-charges"},"Find out more about call charges")),n().createElement("p",{className:"govuk-body-s"},"We're running webchat as a trial, it will not always be available.")))}function O({onChatScreen:e,onEndChatConfirm:t}){const{setCustomerId:l,setThreadId:o,setMessages:r,agentStatus:c,thread:s,threadId:i,setUnseenCount:u,isKeyboard:d}=b(),m=async e=>{e.preventDefault(),window.localStorage.setItem("tmpThreadId",i),o(),r([]),l(),s.lastMessageSeen(),u(0),"closed"!==c&&s.endChat(),t(e)};(0,a.useEffect)((()=>{d&&setTimeout((()=>{document.querySelector("#confirm-endchat").focus()}),10)}),[]);const g=t=>{"Enter"!==t.key&&" "!==t.key||"confirm-endchat"!==t.target.id||m(t),"Enter"!==t.key&&" "!==t.key||"resume-chat"!==t.target.id||e(t)};return n().createElement(n().Fragment,null,n().createElement(k,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("h3",{id:"wc-subtitle",className:"wc-heading","aria-live":"polite"},"Are you sure you want to end the chat?"),n().createElement("div",{className:"govuk-button-group"},n().createElement("a",{id:"confirm-endchat",href:"#endChat",role:"button",className:"wc-button govuk-button","data-module":"govuk-button",onClick:m,onKeyDown:g},"Yes, end chat"),n().createElement("a",{id:"resume-chat",href:"#resumeChat",role:"button",className:"wc-link govuk-link","data-module":"govuk-button",onClick:e,onKeyDown:g},"No, resume chat")))))}function M({onCancel:e}){const{settings:t,setSettings:l}=b(),[o,r]=(0,a.useState)(t.audio),[c,s]=(0,a.useState)(t.scroll),i=t=>{t.preventDefault(),l({audio:o,scroll:c}),e(t)},u=t=>{"Enter"!==t.key&&" "!==t.key||"settings-save"!==t.target.id?"Enter"!==t.key&&" "!==t.key||"settings-cancel"!==t.target.id||e(t):i(t)};return n().createElement(n().Fragment,null,n().createElement(k,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("fieldset",{className:"govuk-fieldset govuk-!-margin-bottom-4"},n().createElement("legend",{className:"govuk-fieldset__legend govuk-fieldset__legend"},n().createElement("h3",{id:"wc-subtitle",className:"wc-heading"},"Change settings")),n().createElement("div",{className:"govuk-checkboxes govuk-checkboxes--small","data-module":"govuk-checkboxes"},n().createElement("div",{className:"govuk-checkboxes__item"},n().createElement("input",{id:"audio",name:"audio",type:"checkbox",value:"audio",className:"govuk-checkboxes__input",defaultChecked:o,onChange:()=>r(!o)}),n().createElement("label",{className:"wc-label govuk-label govuk-checkboxes__label",htmlFor:"audio"},"Play a sound when receiving a new message")),n().createElement("div",{className:"govuk-checkboxes__item"},n().createElement("input",{id:"scroll",name:"scroll",type:"checkbox",value:"scroll",className:"govuk-checkboxes__input",defaultChecked:c,onChange:()=>s(!c)}),n().createElement("label",{className:"wc-label govuk-label govuk-checkboxes__label",htmlFor:"scroll"},"Scroll automatically to a new message")))),n().createElement("div",{className:"govuk-button-group"},n().createElement("a",{id:"settings-save",href:"#",className:"wc-button govuk-button","data-module":"govuk-button",role:"button",onClick:i,onKeyDown:u},"Save"),n().createElement("a",{id:"settings-cancel",href:"#",className:"wc-link govuk-link","data-module":"govuk-button",role:"button",onClick:e,onKeyDown:u},"Cancel")))))}function R({onCancel:e}){const t=()=>{const e=window.localStorage.getItem("tmpThreadId");window.location.href=`https://defragroup.eu.qualtrics.com/jfe/form/SV_8dgFSJcxxIfqx5Y?Id=${e}&Source=${window.location.href}`,window.localStorage.removeItem("tmpThreadId")},a=async t=>{window.localStorage.removeItem("tmpThreadId"),e(t)},l=e=>{"Enter"!==e.key&&" "!==e.key||("feedback-close"===e.target.id&&a(e),"feedback-send"===e.target.id&&t())};return n().createElement(n().Fragment,null,n().createElement(k,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("h3",{id:"wc-subtitle",className:"wc-heading"},"Give feedback on Floodline webchat"),n().createElement("p",null,"We're running webchat as a trial. you can ",n().createElement("a",{id:"feedback-send",className:"govuk-link",href:"#",target:"_blank",rel:"noreferrer",onKeyDown:l,onClick:t},"give feedback")," to help us improve it."),n().createElement("p",null,n().createElement("a",{id:"feedback-close",className:"wc-link govuk-link",href:"#","data-module":"govuk-button",role:"button",onKeyDown:l,onClick:a},"Close")))))}const F=require("lodash.debounce");var U=e.n(F);const B=()=>{const{agentStatus:e,liveRegionText:t,setLiveRegionText:l}=b(),[o,r]=(0,a.useState)(),[c,s]=(0,a.useState)(),i="closed"===e||null===e,u=()=>{r(),s()},d=(0,a.useCallback)(U()((e=>{o?s(e):r(e)}),2e3),[o,c]);return(0,a.useEffect)((()=>(t&&(u(),d(t)),i&&(u(),l()),()=>{u(),l()})),[t]),n().createElement(n().Fragment,null,n().createElement("div",{className:"wc-live",role:"status","aria-atomic":"true"},o),n().createElement("div",{className:"wc-live",role:"status","aria-atomic":"true"},c))},Y="aria-hidden",K="data-wc-inert",V=e=>{for(const t of document.body.children)"wc-panel"!==t.id&&(e&&!t.getAttribute(Y)?(t.setAttribute(Y,"true"),t.setAttribute(K,"")):t.hasAttribute(K)&&(t.removeAttribute(Y),t.removeAttribute(K)))},$=e=>{const[t,n]=(0,a.useState)([]),l=(0,a.useCallback)((e=>{const a=document.querySelector("#wc-panel");"Tab"===e.key&&(a&&!document.activeElement.closest("#wc-panel")&&a.focus(),e.shiftKey?(document.activeElement===t[0]||document.activeElement===document.querySelector("#wc-panel"))&&(t[t.length-1].focus(),e.preventDefault()):document.activeElement===t[t.length-1]&&(t[0].focus(),e.preventDefault()))}),[t]);(0,a.useEffect)((()=>{n((()=>{const e=document.body.querySelectorAll(["#wc-panel a:not([disabled])","#wc-panel button:not([disabled])","#wc-panel select:not([disabled])","#wc-panel input:not([disabled])","#wc-panel textarea:not([disabled])",'#wc-panel *[tabindex="0"]:not([disabled])'].join(","));return Array.from(e).filter((e=>!e.closest("[hidden]")&&!e.closest('[aria-hidden="true"]')))})())}),[e]),(0,a.useEffect)((()=>(V(!0),document.querySelector("#wc-panel").focus(),document.addEventListener("keydown",l),()=>{V(),document.removeEventListener("keydown",l)})),[t])};function H(){const{sdk:e,availability:t,instigatorId:l,thread:o,threadId:s,setThread:i,setThreadId:u,setChatVisibility:d,setMessages:m,setUnseenCount:g,isMobile:E,isKeyboard:h}=b(),{fetchThread:w,fetchMessages:v}=N(e),[y,f]=(0,a.useState)(s?2:0);$(y);const k=(0,a.useCallback)((e=>{"Escape"!==e.key&&"Esc"!==e.key||(s&&(o?.lastMessageSeen(),g(0)),d(!1),p())}),[o,s,g,d]);(0,a.useEffect)((()=>()=>{document.getElementById(l)?.focus()}),[]),(0,a.useEffect)((()=>(document.body.classList.remove("wc-u-hidden"),document.getElementsByTagName("html")[0].classList.add("wc-u-html"),document.body.classList.add("wc-u-body"),()=>{document.getElementsByTagName("html")[0].classList.remove("wc-u-html"),document.body.classList.remove("wc-u-body")})),[E]),(0,a.useEffect)((()=>(document.addEventListener("keydown",k),()=>{document.removeEventListener("keydown",k)})),[k,d]),(0,a.useEffect)((()=>{s&&(o?(o.lastMessageSeen(),g(0),f(2)):(async()=>{try{const e=await w(s);i(e);const t=await v(e,s);m(t)}catch(e){console.log("[Chat Error] fetchThread",e),u(),i(),f(0)}})())}),[o,s]);const S=e=>t=>{t.preventDefault(),f(e)},T=S(0),C=S(1),A=S(2),L=S(3),x=S(4),D=S(5);let F;switch(y){case 0:default:F=n().createElement(_,{onContinue:C});break;case 1:F=n().createElement(I,{onPreChatScreen:T});break;case 2:F=n().createElement(G,{onSettingsScreen:D,onEndChatScreen:L});break;case 3:F=n().createElement(O,{onChatScreen:A,onEndChatConfirm:x});break;case 4:F=n().createElement(R,{onCancel:()=>{d(!1),p()}});break;case 5:F=n().createElement(M,{onCancel:A})}"UNAVAILABLE"===t&&(F=n().createElement(q,null));const U=n().createElement("div",{id:"wc-panel",role:"dialog",className:r("wc-panel",h&&"wc-focus-visible"),tabIndex:"-1","aria-modal":"true","aria-labelledby":"wc-header wc-subtitle"},n().createElement("div",{className:"wc-panel__inner"},F),n().createElement(B,null));return n().createElement(n().Fragment,null,(0,c.createPortal)(U,document.body))}const P=()=>{const{threadId:e,setInstigatorId:t}=b();if(!e)return null;const a=document.getElementById("webchat-skip-link-container");return a?n().createElement(n().Fragment,null,(0,c.createPortal)(n().createElement("a",{id:"webchat-skip-link",href:"#webchat",className:"govuk-skip-link","data-module":"govuk-skip-link",onClick:e=>{e.preventDefault(),t(e.target.id),window.location.hash="#webchat"},"data-wc-skiplink":!0,"data-wc-open-btn":!0},"Skip to webchat"),a)):null};function j(){const{availability:e,isChatOpen:t,setChatVisibility:l,unseenCount:o,threadId:c,setUnseenCount:s,setInstigatorId:i,setLiveRegionText:u}=b(),d=(0,a.useRef)(),m=o>0&&!t,g=o>1?"new messages":"new message",E=e=>{e.preventDefault(),s(0),l(!t),i(e.target.id),t?p():f()},h=e=>{" "===e.key&&e.preventDefault()},w=e=>{" "===e.key&&(s(0),l(!t))};switch((0,a.useEffect)((()=>(m&&u(`Floodline webchat - ${o} ${g}`),()=>{u()})),[o,t]),(0,a.useEffect)((()=>{const a=()=>{if(!c)return;if("AVAILABLE"!==e)return;const a=d.current.parentElement.getBoundingClientRect().top+35>(window.innerHeight||document.documentElement.clientHeight),n=!t&&a;document.documentElement.classList.toggle("wc-u-scroll-padding",n),document.body.classList.toggle("wc-u-scroll-padding",n),d.current.classList.toggle("wc-availability--fixed",n)};return document.addEventListener("scroll",a),a(),()=>{document.removeEventListener("scroll",a)}}),[c,t,e]),e){case"AVAILABLE":return n().createElement(n().Fragment,null,n().createElement("div",{className:r("wc-availability",t&&"wc-open"),ref:d},n().createElement("div",{className:"wc-availability__inner"},n().createElement("a",{id:"webchat-start-chat-link",className:"wc-availability__link",href:"#webchat",draggable:"false",onClick:E,onKeyUp:w,onKeyDown:h,role:"button","data-module":"govuk-button"},c?n().createElement(n().Fragment,null,"Show chat"):n().createElement(n().Fragment,null,"Start chat"),m?n().createElement("span",{className:"wc-availability__unseen"},o,n().createElement("span",{className:"govuk-visually-hidden"}," ",g)):null))),t?n().createElement(H,null):n().createElement(B,null),n().createElement(P,null));case"EXISTING":case"UNAVAILABLE":return n().createElement("p",{className:"govuk-body"},"When it is available, a 'start chat' link will appear.");default:return n().createElement("p",{className:"govuk-body"},"Checking availability")}}const W=async e=>{const t=new(window.AudioContext||window.webkitAudioContext);if("suspended"===t.state){const e=["touchstart","touchend","mousedown","wheel","keydown","click"],a=n=>{e.forEach((e=>{document.body.removeEventListener(e,a)})),t.resume()};e.forEach((e=>{document.body.addEventListener(e,a,!1)}))}const a=await fetch(e),n=await a.arrayBuffer(),l=await t.decodeAudioData(n);return()=>{const e=t.createBufferSource();e.buffer=l,e.connect(t.destination),e.start()}};async function J(e,t){const a=new o.ChatSdk({brandId:t.brandId,channelId:t.channelId,customerId:window.localStorage.getItem(m)||"",environment:t.environment}),r=(0,l.createRoot)(e);let c,s;try{const e=await async function(e){const t=await fetch(e);return{availability:(await t.json()).availability||"UNAVAILABLE"}}(t.availabilityEndpoint);s=await W(t.audioUrl),c=e.availability}catch(e){c="UNAVAILABLE"}r.render(n().createElement(y,{sdk:a,availability:c,playSound:s},n().createElement(j,null)))}module.exports=t})();
+(()=>{"use strict";var e={n:t=>{var a=t&&t.__esModule?()=>t.default:()=>t;return e.d(a,{a}),a},d:(t,a)=>{for(var n in a)e.o(a,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:a[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{init:()=>Q});const a=require("react");var n=e.n(a);const l=require("react-dom/client"),o=require("@nice-devone/nice-cxone-chat-web-sdk"),r=(...e)=>e.filter((e=>e&&"string"==typeof e)).join(" "),c=require("react-dom"),s=require("luxon"),i=require("html-react-parser");var u=e.n(i);const d=/(?:www|https?)[^\s]+/gi,m=e=>(e.match(d)&&(e=e.replace(d,(e=>`<a class="govuk-link" href="${e}" target="_blank" rel="noreferrer">${e.replace(/https?:\/\//gi,"")}</a>`))),u()(e)),g=e=>({id:e.id,text:e.messageContent?.text,createdAt:new Date(e.createdAt),user:e.authorEndUserIdentity?.fullName?.trim()||null,assignee:e.authorUser?.firstName||null,direction:e.direction}),h=e=>{const t=s.DateTime.local();t.setZone("Europe/London");let a=`Floodline webchat transcript, ${t.toFormat("HH:mm:ss a, dd LLLL yyyy")}\n\n`;for(const t of e){const{text:e,direction:n,user:l,assignee:o,createdAt:r}=t,c="inbound"===n?l:`${o} (Floodline adviser)`;a+=`[${s.DateTime.fromJSDate(new Date(r)).setZone("Europe/London").toFormat("HH:mm:ss a, dd LLLL yyyy")}] ${c}: \n${e}\n\n`}return a=a.replace(/<a\b[^>]*>/i,"").replace(/<\/a>/i,""),encodeURIComponent(a)},E="webchat_settings",w="webchat_customer_id",v="webchat_thread_id",b={SET_CHAT_VISIBILITY:(e,t)=>({...e,isChatOpen:t}),SET_AVAILABILITY:(e,t)=>({...e,availability:t}),SET_SETTINGS:(e,t)=>(t?window.localStorage.setItem(E,JSON.stringify(t)):window.localStorage.removeItem(E),{...e,settings:t}),SET_CUSTOMER_ID:(e,t)=>(t?window.localStorage.setItem(w,t):window.localStorage.removeItem(w),{...e,customerId:t}),SET_THREAD_ID:(e,t)=>(t?window.localStorage.setItem(v,t):window.localStorage.removeItem(v),{...e,threadId:t}),SET_THREAD:(e,t)=>({...e,thread:t}),SET_MESSAGE:(e,t)=>({...e,message:g(t),messages:[...e.messages,g(t)]}),SET_MESSAGES:(e,t)=>{return{...e,messages:(a=t,a.map((e=>g(e)))).reverse()};var a},SET_AGENT:(e,t)=>({...e,agent:t}),SET_AGENT_TYPING:(e,t)=>({...e,isAgentTyping:t}),SET_AGENT_STATUS:(e,t)=>({...e,agentStatus:t}),SET_UNSEEN_COUNT:(e,t)=>({...e,unseenCount:t}),SET_INSTIGATOR_ID:(e,t)=>({...e,instigatorId:t}),SET_LIVE_REGION_TEXT:(e,t)=>({...e,liveRegionText:t}),TOGGLE_IS_MOBILE:(e,t)=>({...e,isMobile:t}),TOGGLE_IS_KEYBOARD:(e,t)=>({...e,isKeyboard:t})},y={availability:null,customerId:null,threadId:null,thread:null,messages:[],unseenCount:0,instigatorId:null,agent:null,agentStatus:null,isAgentTyping:!1,isChatOpen:!1,isMobile:window.matchMedia("(max-width: 640px)").matches,isKeyboard:!1,settings:{audio:!0,scroll:!0}},f=(e,t)=>{const{type:a,payload:n}=t,l=b[a];return l?l.bind(void 0,e,n)():e},p=(0,a.createContext)(y),k=({sdk:e,availability:t,playSound:l,children:r})=>{const[c,s]=(0,a.useReducer)(f,y),i=e=>{s({type:"SET_AGENT",payload:e.detail.data.inboxAssignee}),s({type:"SET_AGENT_STATUS",payload:e.detail.data.contact.status}),s({type:"SET_UNSEEN_COUNT",payload:e.detail.data.contact.customerStatistics.unseenMessagesCount})},u=e=>{s({type:"SET_AGENT",payload:e.detail.data.inboxAssignee}),s({type:"SET_AGENT_STATUS",payload:e.detail.data.case.status})},d=()=>{s({type:"SET_AGENT_TYPING",payload:!0})},m=()=>{s({type:"SET_AGENT_TYPING",payload:!1}),s({type:"SET_LIVE_REGION_TEXT"})},g=e=>{s({type:"SET_MESSAGE",payload:e.detail.data.message}),s({type:"SET_AGENT_STATUS",payload:e.detail.data.case.status}),s({type:"SET_UNSEEN_COUNT",payload:e.detail.data.case.customerStatistics.unseenMessagesCount}),JSON.parse(window.localStorage.getItem(E)).audio&&"outbound"===e.detail.data.message.direction&&l&&l()},h=e=>{s({type:"SET_AGENT_STATUS",payload:e.detail.data.case.status})},b=e=>{s({type:"TOGGLE_IS_MOBILE",payload:e.matches})},k=()=>{s({type:"TOGGLE_IS_KEYBOARD",payload:!0})},_=()=>{s({type:"TOGGLE_IS_KEYBOARD",payload:!1})};(0,a.useEffect)((()=>(e.onChatEvent(o.ChatEvent.LIVECHAT_RECOVERED,i),e.onChatEvent(o.ChatEvent.MESSAGE_CREATED,g),e.onChatEvent(o.ChatEvent.AGENT_TYPING_STARTED,d),e.onChatEvent(o.ChatEvent.AGENT_TYPING_ENDED,m),e.onChatEvent(o.ChatEvent.ASSIGNED_AGENT_CHANGED,u),e.onChatEvent(o.ChatEvent.CONTACT_STATUS_CHANGED,h),window.matchMedia("(max-width: 640px)").addEventListener("change",b),window.addEventListener("keydown",k),window.addEventListener("pointerdown",_),()=>{window.removeEventListener("change",b),window.removeEventListener("keydown",k),window.removeEventListener("pointerdown",_)})),[e]),(0,a.useEffect)((()=>{s({type:"SET_AVAILABILITY",payload:t}),N(window.localStorage.getItem(w)),T(window.localStorage.getItem(v)),A(JSON.parse(window.localStorage.getItem(E))||c.settings)}),[]),(0,a.useEffect)((()=>{"#webchat"===window.location.hash&&S(!0);const e=()=>{"#webchat"===window.location.hash?S(!0):S(!1)};return window.addEventListener("popstate",e),()=>{window.removeEventListener("popstate",e)}}),[]);const S=e=>{s({type:"SET_CHAT_VISIBILITY",payload:e})},N=e=>{s({type:"SET_CUSTOMER_ID",payload:e})},T=e=>{s({type:"SET_THREAD_ID",payload:e})},C=e=>{s({type:"SET_THREAD",payload:e})},I=e=>{s({type:"SET_MESSAGES",payload:e})},A=e=>{s({type:"SET_SETTINGS",payload:e})},L=e=>{s({type:"SET_UNSEEN_COUNT",payload:e})},x=e=>{s({type:"SET_INSTIGATOR_ID",payload:e})},D=e=>{s({type:"SET_LIVE_REGION_TEXT",payload:e})},G=(0,a.useMemo)((()=>({...c,sdk:e,setSettings:A,setCustomerId:N,setThreadId:T,setThread:C,setMessages:I,setUnseenCount:L,setChatVisibility:S,setInstigatorId:x,setLiveRegionText:D,onLiveChatRecovered:i,onAssignedAgentChanged:u,onAgentTypingStarted:d,onAgentTypingEnded:m,onMessageCreated:g,onContactStatusChanged:h})));return n().createElement(p.Provider,{value:G},r)},_=()=>(0,a.useContext)(p),S=()=>{const e=window.location.href.split("#")[0];window.history.pushState({history:!0},null,`${e}#webchat`)},N=()=>{if(window.history.state?.history)return window.history.back();const e=window.location.href.split("#")[0];return window.history.replaceState(null,null,e)};function T(){const{thread:e,threadId:t,setChatVisibility:a,setUnseenCount:l,isMobile:o}=_(),r=n=>{n.preventDefault(),a(!1),N(),t&&(e?.lastMessageSeen(),l(0))},c=n().createElement("button",{className:"wc-header__back","aria-label":"Close the webchat",onClick:r},n().createElement("svg",{"aria-hidden":"true",focusable:"false",width:"20",height:"20",viewBox:"0 0 20 20"},n().createElement("path",{d:"M4.828,11L12.314,18.485L10.899,19.899L1,10L10.899,0.101L12.314,1.515L4.828,9L19,9L19,11L4.828,11Z",fill:"currentColor"}))),s=n().createElement("button",{className:"wc-header__close","aria-label":"Close the webchat",onClick:r},n().createElement("svg",{"aria-hidden":"true",focusable:"false",width:"20",height:"20",viewBox:"0 0 20 20"},n().createElement("path",{d:"M10,8.6L15.6,3L17,4.4L11.4,10L17,15.6L15.6,17L10,11.4L4.4,17L3,15.6L8.6,10L3,4.4L4.4,3L10,8.6Z",fill:"currentColor"}))),i=n().createElement("button",{className:"wc-header__hide","aria-label":"Minimise the webchat",onClick:r},n().createElement("svg",{"aria-hidden":"true",focusable:"false",width:"20",height:"20",viewBox:"0 0 20 20"},n().createElement("path",{d:"M10 14.4l-7-7L4.4 6l5.6 5.6L15.6 6 17 7.4l-7 7z",fill:"currentColor"}))),u=o&&window.history.state,d=o&&!window.history.state;let m=s;return t&&(m=i,d&&(m=i)),!t&&d&&(m=s),u&&(m=null),n().createElement("div",{className:"wc-header"},u?c:null,n().createElement("h2",{id:"wc-header",className:"wc-header__title"},"Floodline webchat"),m)}function C({onContinue:e}){return n().createElement(n().Fragment,null,n().createElement(T,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("h3",{id:"wc-subtitle",className:"wc-heading","aria-live":"polite"},"What you can use webchat for"),n().createElement("p",null,"Webchat lets you talk directly to a Floodline adviser."),n().createElement("p",null,"You can use webchat to get:"),n().createElement("ul",{className:"wc-list"},n().createElement("li",null,"current flood warnings and alerts in your area"),n().createElement("li",null,"information on the flood warning service"),n().createElement("li",null,"advice on what to do before, during and after a flood")),n().createElement("p",null,"There are other ways to ",n().createElement("a",{className:"govuk-link",href:"https://www.gov.uk/sign-up-for-flood-warnings",target:"_blank",rel:"noreferrer"},"sign up for flood warnings")," and ",n().createElement("a",{className:"govuk-link",href:"https://www.fws.environment-agency.gov.uk/app/olr/login",target:"_blank",rel:"noreferrer"},"manage your flood warnings account"),"."),n().createElement("p",null,"Do not use webchat to ",n().createElement("a",{className:"govuk-link",href:"https://www.gov.uk/report-flood-cause",target:"_blank",rel:"noreferrer"},"report a flood"),"."),n().createElement("button",{className:"govuk-button wc-button govuk-!-margin-top-1","data-module":"govuk-button",onClick:e},"Continue"),n().createElement("h3",{className:"wc-heading"},"Other flood information"),n().createElement("p",null,"Call Floodline for all other flood and flood warning information."),n().createElement("p",null,n().createElement("strong",null,"Floodline helpline"),n().createElement("br",null),"Telephone: 0345 988 1188",n().createElement("br",null),"Textphone: 0345 602 6340",n().createElement("br",null),"Open 24 hours a day, 7 days a week",n().createElement("br",null),n().createElement("a",{className:"govuk-link",href:"https://gov.uk/call-charges",target:"_blank",rel:"noreferrer"},"Find out more about call charges")))))}const I=require("uuid"),A=e=>{const t=async()=>e.authorize();return{connect:t,fetchCustomerId:async()=>{const e=await t();return e?.consumerIdentity.idOnExternalPlatform},fetchThread:async a=>(await t(),e.getThread(a)),fetchMessages:async(e,a)=>{await t();const n=await e.recover(a),l=[];let o=n.messages;for(;o.length;){o.map((e=>l.push(e)));try{o=(await e.loadMoreMessages()).data.messages}catch(e){o=[]}}return l}}},L=({errors:e})=>{const t=Object.keys(e),a=e=>{e.preventDefault();const t=e.target.getAttribute("data-key");document.querySelector(`#wc-${t}`).focus()};return 0===t.length?null:n().createElement("div",{className:"govuk-error-summary govuk-!-static-margin-bottom-7","data-module":"govuk-error-summary",tabIndex:"-1"},n().createElement("div",{role:"alert"},n().createElement("h2",{id:"wc-error",className:"wc-error-summary__title govuk-error-summary__title"},"There is a problem"),n().createElement("div",{className:"govuk-error-summary__body"},n().createElement("ul",{className:"govuk-list govuk-error-summary__list wc-error-summary__list"},t.map((t=>n().createElement("li",{key:t},n().createElement("a",{href:"#","data-key":t,onClick:a},e[t]))))))))},x=500;function D({onPreChatScreen:e}){const{sdk:t,setCustomerId:l,setThreadId:o,setThread:c,setLiveRegionText:s}=_(),{fetchCustomerId:i,fetchThread:u}=A(t),[d,m]=(0,a.useState)({}),[g,h]=(0,a.useState)(0),[E,w]=(0,a.useState)(!1),v=(0,a.useRef)(),b=(0,a.useRef)(),y=x>=g;let f=`You have ${x-g} characters remaining`;y||(f=`You have ${g-x} characters too many`),(0,a.useEffect)((()=>{Object.keys(d).length&&document.querySelector(".govuk-error-summary")?.focus()}),[d]);const p=E?"Requesting...":"Request chat";return(0,a.useEffect)((()=>{E&&s(p)}),[E]),n().createElement(n().Fragment,null,n().createElement(T,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("a",{href:"#",className:"wc-back-link govuk-back-link",onClick:e},"What you can use webchat for"),n().createElement(L,{errors:d}),n().createElement("h3",{id:"wc-subtitle",className:"wc-heading","aria-live":"polite"},"Your name and question"),n().createElement("form",null,n().createElement("div",{className:r("wc-form-group","govuk-form-group",d.name&&"govuk-form-group--error")},n().createElement("label",{className:"wc-label govuk-label",htmlFor:"wc-name"},"Your name"),d.name&&n().createElement("p",{className:"govuk-error-message"},n().createElement("span",{className:"govuk-visually-hidden"},"Error:")," ",d.name),n().createElement("input",{ref:v,className:r("wc-input","govuk-input",d.name&&"govuk-input--error"),id:"wc-name",name:"name",type:"text","data-testid":"request-chat-user-name"})),n().createElement("div",{className:"wc-form-group govuk-character-count","data-module":"govuk-character-count","data-maxlength":"500"},n().createElement("div",{className:r("govuk-form-group",d.question&&"govuk-form-group--error")},n().createElement("label",{className:"wc-label govuk-label",htmlFor:"wc-question"},"Your question"),d.question&&n().createElement("p",{className:"govuk-error-message"},n().createElement("span",{className:"govuk-visually-hidden"},"Error:"),d.question),n().createElement("textarea",{ref:b,id:"wc-question",name:"question",rows:"5","aria-describedby":"wc-question-info",onChange:e=>{h(e.target.value.length)},className:r("wc-textarea","govuk-textarea","govuk-js-character-count",!y||d.question?"govuk-textarea--error":""),"data-testid":"request-chat-user-question"}),n().createElement("div",{id:"wc-question-info",className:"wc-hint govuk-hint govuk-char-count__msg",style:{color:y?"":"#d4351c"},"aria-hidden":"true"},f),n().createElement("div",{className:"govuk-character-count__sr-status govuk-visually-hidden","aria-live":"polite"},f))),n().createElement("div",{className:"wc-inset-text govuk-inset-text"},"By selecting 'Request chat' you agree to the terms of our ",n().createElement("a",{href:"https://check-for-flooding.service.gov.uk/privacy-notice",target:"_blank",rel:"noreferrer",className:"govuk-link"},"privacy notice"),"."),n().createElement("button",{className:"wc-button govuk-button govuk-!-margin-top-1","data-module":"govuk-button",onClick:async e=>{if(e.preventDefault(),E)return;const a={};if(0===v.current.value.length&&(a.name="Enter your name"),0===b.current.value.length&&(a.question="Enter your question"),b.current.value.length>x&&(a.question="Your question must be 500 characters or less"),0===Object.keys(a).length)try{w(!0);const e=I.v4(),a=await i(),n=await u(e);t.getCustomer().setName(v.current.value),await n.startChat(b.current.value||"Begin conversation"),l(a),o(e),c(n),n.setCustomField("threadid",e)}catch(e){console.log("[Request chat Error]",e)}m(a)},"aria-disabled":E},p)))))}function G({children:e}){return n().createElement("div",{className:"wc-footer"},e)}function q({message:e,previousMessage:t}){const a="outbound"===e.direction,l=e?.direction===t?.direction;return n().createElement("li",{className:r("wc-chat__message",a?"outbound":"inbound")},n().createElement("div",{className:"wc-chat__from"},l?null:n().createElement("span",{className:r(a?"outbound":"inbound")},a?e.assignee:"You"),n().createElement("span",{className:"govuk-visually-hidden"},":")),n().createElement("div",{className:r("wc-chat__text",a?"outbound":"inbound")},m(e.text)))}const O=(e,t)=>{(0,a.useEffect)((()=>{if(e){e.style.height="0px";const t=e.scrollHeight;e.style.height=`${t}px`}}),[e,t])},M=(e,t,a)=>{if("UNAVAILABLE"===e)return"Webchat is not currently available";if(!t)return"Connecting to Floodline";switch(t){case"closed":case"resolved":return a?`${a} ended the session`:"Session ended by advisor";default:return a?`You are speaking with ${a}`:"Waiting for an adviser"}};function R({onEndChatScreen:e,onSettingsScreen:t}){const{availability:l,thread:o,messages:r,agent:c,agentStatus:s,isAgentTyping:i,isChatOpen:u,settings:d,isKeyboard:m,setLiveRegionText:g}=_(),[E,w]=(0,a.useState)(""),[v,b]=(0,a.useState)(!1),y=(0,a.useRef)();O(y.current,E),(0,a.useEffect)((()=>{if(d.scroll&&0!==r.length){const e=document.querySelector(".wc-body");e.scrollTop=e.scrollHeight}}),[r,i]),(0,a.useEffect)((()=>{const e=document.querySelector(".wc-form__label");0===E.length?e.classList.remove("govuk-visually-hidden"):e.classList.add("govuk-visually-hidden")}),[E]);const f=c?.nickname||c?.firstName,p=M(l,s,f);(0,a.useEffect)((()=>(p&&g(`Floodline webchat - ${p}`),()=>{g()})),[p]),(0,a.useEffect)((()=>(i&&u&&g(`${f} is typing...`),()=>{g()})),[i,u]),(0,a.useEffect)((()=>{const e=r[r.length-1];return"closed"!==s&&"outbound"===e?.direction&&g(`${f} said: ${e.text}`),()=>{g()}}),[r]);const k=()=>{if(0!==y.current.value.length&&"closed"!==s){try{const e=y.current.value.trim();o.sendTextMessage(e),g(`You said: ${e}`)}catch(e){console.log("[Chat Error] sendMessage",e)}w("")}},S=()=>{const e=h(r);document.querySelector("#transcript-download").setAttribute("href",`data:text/plain;charset=utf-8,${e}`)},N=a=>{if("Enter"===a.key&&!a.shiftKey)switch(a.target.id){case"text-area":a.preventDefault(),k();break;case"end-chat":e(a);break;case"wc-settings":t(a);break;case"transcript-download":S()}" "===a.key&&("end-chat"===a.target.id&&e(a),"wc-settings"===a.target.id&&t(a))};return n().createElement(n().Fragment,null,n().createElement(T,null),n().createElement("div",{className:"wc-status"},n().createElement("p",{className:"wc-status__availability"},p),n().createElement("a",{id:"end-chat",className:"wc-status__link",href:"#","data-module":"govuk-button",role:"button",onClick:e,onKeyDown:N},"End chat")),n().createElement("div",{className:"wc-body",tabIndex:"0"},n().createElement("ul",{className:"wc-chat"},r.length?r.map(((e,t)=>n().createElement(q,{key:e.id,message:e,previousMessage:r[t-1]}))):null,i?n().createElement("li",{className:"wc-chat__message outbound"},n().createElement("div",{className:"wc-chat__from"},f," is typing"),n().createElement("div",{className:"wc-chat__text outbound"},n().createElement("svg",{width:"28",height:"16",x:"0px",y:"0px",viewBox:"0 0 28 16"},n().createElement("circle",{stroke:"none",cx:"3",cy:"8",r:"3",fill:"currentColor"}),n().createElement("circle",{stroke:"none",cx:"14",cy:"8",r:"3",fill:"currentColor"}),n().createElement("circle",{stroke:"none",cx:"25",cy:"8",r:"3",fill:"currentColor"})))):null)),n().createElement(G,null,n().createElement("form",{className:"wc-form"+(v?" wc-focus-within":""),noValidate:!0,onSubmit:e=>{e.preventDefault(),k()}},n().createElement("label",{className:"govuk-label wc-form__label",htmlFor:"wc-form-textarea"},"Your message",n().createElement("span",{className:"govuk-visually-hidden"}," (enter key submits)")),n().createElement("textarea",{ref:y,rows:"1","aria-required":"true",className:"wc-form__textarea",id:"text-area",name:"message",onChange:e=>{w(e.target?.value)},onKeyDown:N,onFocus:()=>{b(m)},onBlur:()=>{b(!1)},value:E}),n().createElement("input",{type:"submit",className:"wc-form__button govuk-button",value:"Send","data-prevent-double-click":"true"})),n().createElement("div",{className:"wc-footer__settings"},n().createElement("a",{href:"#",id:"wc-settings",className:"wc-footer__settings-link","data-module":"govuk-button",onKeyDown:N,onClick:t},"Settings"),n().createElement("a",{href:"#",id:"transcript-download",className:"wc-footer__settings-link","data-module":"govuk-button",download:"floodline-webchat-transcript.txt",onKeyDown:N,onClick:S},"Save chat"))))}function F(){return n().createElement(n().Fragment,null,n().createElement(T,null),n().createElement("div",{className:"wc-body"},n().createElement("h3",{id:"wc-subtitle",className:"govuk-heading-m"},"Webchat is currently not available"),n().createElement("p",{className:"govuk-body-s"},"Try again later, or call Floodline:"),n().createElement("p",{className:"govuk-body-s"},n().createElement("strong",null,"Floodline helpline"),n().createElement("br",null),"Telephone: 0345 988 1188",n().createElement("br",null),"Textphone: 0345 602 6340",n().createElement("br",null),"Open 24 hours a day, 7 days a week",n().createElement("br",null),n().createElement("a",{className:"govuk-link",href:"https://gov.uk/call-charges"},"Find out more about call charges")),n().createElement("p",{className:"govuk-body-s"},"We're running webchat as a trial, it will not always be available.")))}function U({onChatScreen:e,onEndChatConfirm:t}){const{setCustomerId:l,setThreadId:o,setMessages:r,agentStatus:c,thread:s,threadId:i,setUnseenCount:u,isKeyboard:d}=_(),m=async e=>{e.preventDefault(),window.localStorage.setItem("tmpThreadId",i),o(),r([]),l(),s.lastMessageSeen(),u(0),"closed"!==c&&s.endChat(),t(e)};(0,a.useEffect)((()=>{d&&setTimeout((()=>{document.querySelector("#confirm-endchat").focus()}),10)}),[]);const g=t=>{"Enter"!==t.key&&" "!==t.key||"confirm-endchat"!==t.target.id||m(t),"Enter"!==t.key&&" "!==t.key||"resume-chat"!==t.target.id||e(t)};return n().createElement(n().Fragment,null,n().createElement(T,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("h3",{id:"wc-subtitle",className:"wc-heading","aria-live":"polite"},"Are you sure you want to end the chat?"),n().createElement("div",{className:"govuk-button-group"},n().createElement("a",{id:"confirm-endchat",href:"#endChat",role:"button",className:"wc-button govuk-button","data-module":"govuk-button",onClick:m,onKeyDown:g},"Yes, end chat"),n().createElement("a",{id:"resume-chat",href:"#resumeChat",role:"button",className:"wc-link govuk-link","data-module":"govuk-button",onClick:e,onKeyDown:g},"No, resume chat")))))}function B({onCancel:e}){const{settings:t,setSettings:l}=_(),[o,r]=(0,a.useState)(t.audio),[c,s]=(0,a.useState)(t.scroll),i=t=>{t.preventDefault(),l({audio:o,scroll:c}),e(t)},u=t=>{"Enter"!==t.key&&" "!==t.key||"settings-save"!==t.target.id?"Enter"!==t.key&&" "!==t.key||"settings-cancel"!==t.target.id||e(t):i(t)};return n().createElement(n().Fragment,null,n().createElement(T,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("fieldset",{className:"govuk-fieldset govuk-!-margin-bottom-4"},n().createElement("legend",{className:"govuk-fieldset__legend govuk-fieldset__legend"},n().createElement("h3",{id:"wc-subtitle",className:"wc-heading"},"Change settings")),n().createElement("div",{className:"govuk-checkboxes govuk-checkboxes--small","data-module":"govuk-checkboxes"},n().createElement("div",{className:"govuk-checkboxes__item"},n().createElement("input",{id:"audio",name:"audio",type:"checkbox",value:"audio",className:"govuk-checkboxes__input",defaultChecked:o,onChange:()=>r(!o)}),n().createElement("label",{className:"wc-label govuk-label govuk-checkboxes__label",htmlFor:"audio"},"Play a sound when receiving a new message")),n().createElement("div",{className:"govuk-checkboxes__item"},n().createElement("input",{id:"scroll",name:"scroll",type:"checkbox",value:"scroll",className:"govuk-checkboxes__input",defaultChecked:c,onChange:()=>s(!c)}),n().createElement("label",{className:"wc-label govuk-label govuk-checkboxes__label",htmlFor:"scroll"},"Scroll automatically to a new message")))),n().createElement("div",{className:"govuk-button-group"},n().createElement("a",{id:"settings-save",href:"#",className:"wc-button govuk-button","data-module":"govuk-button",role:"button",onClick:i,onKeyDown:u},"Save"),n().createElement("a",{id:"settings-cancel",href:"#",className:"wc-link govuk-link","data-module":"govuk-button",role:"button",onClick:e,onKeyDown:u},"Cancel")))))}function Y({onCancel:e}){const t=()=>{const e=window.localStorage.getItem("tmpThreadId");window.location.href=`https://defragroup.eu.qualtrics.com/jfe/form/SV_8dgFSJcxxIfqx5Y?Id=${e}&Source=${window.location.href}`,window.localStorage.removeItem("tmpThreadId")},a=async t=>{window.localStorage.removeItem("tmpThreadId"),e(t)},l=e=>{"Enter"!==e.key&&" "!==e.key||("feedback-close"===e.target.id&&a(e),"feedback-send"===e.target.id&&t())};return n().createElement(n().Fragment,null,n().createElement(T,null),n().createElement("div",{className:"wc-body"},n().createElement("div",{className:"wc-content"},n().createElement("h3",{id:"wc-subtitle",className:"wc-heading"},"Give feedback on Floodline webchat"),n().createElement("p",null,"We're running webchat as a trial. you can ",n().createElement("a",{id:"feedback-send",className:"govuk-link",href:"#",target:"_blank",rel:"noreferrer",onKeyDown:l,onClick:t},"give feedback")," to help us improve it."),n().createElement("p",null,n().createElement("a",{id:"feedback-close",className:"wc-link govuk-link",href:"#","data-module":"govuk-button",role:"button",onKeyDown:l,onClick:a},"Close")))))}const $=require("lodash.debounce");var K=e.n($);const V=()=>{const{agentStatus:e,liveRegionText:t,setLiveRegionText:l}=_(),[o,r]=(0,a.useState)(),[c,s]=(0,a.useState)(),i="closed"===e||null===e,u=()=>{r(),s()},d=(0,a.useCallback)(K()((e=>{o?s(e):r(e)}),2e3),[o,c]);return(0,a.useEffect)((()=>(t&&(u(),d(t)),i&&(u(),l()),()=>{u(),l()})),[t]),n().createElement(n().Fragment,null,n().createElement("div",{className:"wc-live",role:"status","aria-atomic":"true"},o),n().createElement("div",{className:"wc-live",role:"status","aria-atomic":"true"},c))},H="aria-hidden",P="data-wc-inert",j=e=>{for(const t of document.body.children)"wc-panel"!==t.id&&(e&&!t.getAttribute(H)?(t.setAttribute(H,"true"),t.setAttribute(P,"")):t.hasAttribute(P)&&(t.removeAttribute(H),t.removeAttribute(P)))},W=e=>{const[t,n]=(0,a.useState)([]),l=(0,a.useCallback)((e=>{const a=document.querySelector("#wc-panel");"Tab"===e.key&&(a&&!document.activeElement.closest("#wc-panel")&&a.focus(),e.shiftKey?(document.activeElement===t[0]||document.activeElement===document.querySelector("#wc-panel"))&&(t[t.length-1].focus(),e.preventDefault()):document.activeElement===t[t.length-1]&&(t[0].focus(),e.preventDefault()))}),[t]);(0,a.useEffect)((()=>{n((()=>{const e=document.body.querySelectorAll(["#wc-panel a:not([disabled])","#wc-panel button:not([disabled])","#wc-panel select:not([disabled])","#wc-panel input:not([disabled])","#wc-panel textarea:not([disabled])",'#wc-panel *[tabindex="0"]:not([disabled])'].join(","));return Array.from(e).filter((e=>!e.closest("[hidden]")&&!e.closest('[aria-hidden="true"]')))})())}),[e]),(0,a.useEffect)((()=>(j(!0),document.querySelector("#wc-panel").focus(),document.addEventListener("keydown",l),()=>{j(),document.removeEventListener("keydown",l)})),[t])};function J(){const{sdk:e,availability:t,instigatorId:l,thread:o,threadId:s,setThread:i,setThreadId:u,setChatVisibility:d,setMessages:m,setUnseenCount:g,isMobile:h,isKeyboard:E}=_(),{fetchThread:w,fetchMessages:v}=A(e),[b,y]=(0,a.useState)(s?2:0);W(b);const f=(0,a.useCallback)((e=>{"Escape"!==e.key&&"Esc"!==e.key||(s&&(o?.lastMessageSeen(),g(0)),d(!1),N())}),[o,s,g,d]);(0,a.useEffect)((()=>()=>{document.getElementById(l)?.focus()}),[]),(0,a.useEffect)((()=>(document.body.classList.remove("wc-u-hidden"),document.getElementsByTagName("html")[0].classList.add("wc-u-html"),document.body.classList.add("wc-u-body"),()=>{document.getElementsByTagName("html")[0].classList.remove("wc-u-html"),document.body.classList.remove("wc-u-body")})),[h]),(0,a.useEffect)((()=>(document.addEventListener("keydown",f),()=>{document.removeEventListener("keydown",f)})),[f,d]),(0,a.useEffect)((()=>{s&&(o?(o.lastMessageSeen(),g(0),y(2)):(async()=>{try{const e=await w(s);i(e);const t=await v(e,s);m(t)}catch(e){console.log("[Chat Error] fetchThread",e),u(),i(),y(0)}})())}),[o,s]);const p=e=>t=>{t.preventDefault(),y(e)},k=p(0),S=p(1),T=p(2),I=p(3),L=p(4),x=p(5);let G;switch(b){case 0:default:G=n().createElement(C,{onContinue:S});break;case 1:G=n().createElement(D,{onPreChatScreen:k});break;case 2:G=n().createElement(R,{onSettingsScreen:x,onEndChatScreen:I});break;case 3:G=n().createElement(U,{onChatScreen:T,onEndChatConfirm:L});break;case 4:G=n().createElement(Y,{onCancel:()=>{d(!1),N()}});break;case 5:G=n().createElement(B,{onCancel:T})}"UNAVAILABLE"===t&&(G=n().createElement(F,null));const q=n().createElement("div",{id:"wc-panel",role:"dialog",className:r("wc-panel",E&&"wc-focus-visible"),tabIndex:"-1","aria-modal":"true","aria-labelledby":"wc-header wc-subtitle"},n().createElement("div",{className:"wc-panel__inner"},G),n().createElement(V,null));return n().createElement(n().Fragment,null,(0,c.createPortal)(q,document.body))}const X=()=>{const{threadId:e,setInstigatorId:t}=_();if(!e)return null;const a=document.getElementById("webchat-skip-link-container");return a?n().createElement(n().Fragment,null,(0,c.createPortal)(n().createElement("a",{id:"webchat-skip-link",href:"#webchat",className:"govuk-skip-link","data-module":"govuk-skip-link",onClick:e=>{e.preventDefault(),t(e.target.id),window.location.hash="#webchat"},"data-wc-skiplink":!0,"data-wc-open-btn":!0},"Skip to webchat"),a)):null};function Z(){const{availability:e,isChatOpen:t,setChatVisibility:l,unseenCount:o,threadId:c,setUnseenCount:s,setInstigatorId:i,setLiveRegionText:u}=_(),d=(0,a.useRef)(),m=o>0&&!t,g=o>1?"new messages":"new message",h=e=>{e.preventDefault(),s(0),l(!t),i(e.target.id),t?N():S()},E=e=>{" "===e.key&&e.preventDefault()},w=e=>{" "===e.key&&(s(0),l(!t))};switch((0,a.useEffect)((()=>(m&&u(`Floodline webchat - ${o} ${g}`),()=>{u()})),[o,t]),(0,a.useEffect)((()=>{const a=()=>{if(!c)return;if("AVAILABLE"!==e)return;const a=d.current.parentElement.getBoundingClientRect().top+35>(window.innerHeight||document.documentElement.clientHeight),n=!t&&a;document.documentElement.classList.toggle("wc-u-scroll-padding",n),document.body.classList.toggle("wc-u-scroll-padding",n),d.current.classList.toggle("wc-availability--fixed",n)};return document.addEventListener("scroll",a),a(),()=>{document.removeEventListener("scroll",a)}}),[c,t,e]),e){case"AVAILABLE":return n().createElement(n().Fragment,null,n().createElement("div",{className:r("wc-availability",t&&"wc-open"),ref:d},n().createElement("div",{className:"wc-availability__inner"},n().createElement("a",{id:"webchat-start-chat-link",className:"wc-availability__link",href:"#webchat",draggable:"false",onClick:h,onKeyUp:w,onKeyDown:E,role:"button","data-module":"govuk-button"},c?n().createElement(n().Fragment,null,"Show chat"):n().createElement(n().Fragment,null,"Start chat"),m?n().createElement("span",{className:"wc-availability__unseen"},o,n().createElement("span",{className:"govuk-visually-hidden"}," ",g)):null))),t?n().createElement(J,null):n().createElement(V,null),n().createElement(X,null));case"EXISTING":case"UNAVAILABLE":return n().createElement("p",{className:"govuk-body"},"When it is available, a 'start chat' link will appear.");default:return n().createElement("p",{className:"govuk-body"},"Checking availability")}}const z=async e=>{const t=new(window.AudioContext||window.webkitAudioContext);if("suspended"===t.state){const e=["touchstart","touchend","mousedown","wheel","keydown","click"],a=n=>{e.forEach((e=>{document.body.removeEventListener(e,a)})),t.resume()};e.forEach((e=>{document.body.addEventListener(e,a,!1)}))}const a=await fetch(e),n=await a.arrayBuffer(),l=await t.decodeAudioData(n);return()=>{const e=t.createBufferSource();e.buffer=l,e.connect(t.destination),e.start()}};async function Q(e,t){const a=new o.ChatSdk({brandId:t.brandId,channelId:t.channelId,customerId:window.localStorage.getItem(w)||"",environment:t.environment}),r=(0,l.createRoot)(e);let c,s;try{const e=await async function(e){const t=await fetch(e);return{availability:(await t.json()).availability||"UNAVAILABLE"}}(t.availabilityEndpoint);s=await z(t.audioUrl),c=e.availability}catch(e){c="UNAVAILABLE"}r.render(n().createElement(k,{sdk:a,availability:c,playSound:s},n().createElement(Z,null)))}module.exports=t})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-beta.49",
+  "version": "0.0.1-beta.50",
   "description": "",
   "main": "dist/server.js",
   "browser": "dist/client.js",
@@ -62,6 +62,7 @@
   "dependencies": {
     "@nice-devone/nice-cxone-chat-web-sdk": "^1.3.0",
     "axios": "^1.5.0",
+    "html-react-parser": "^5.1.8",
     "jwt-decode": "^3.1.2",
     "lodash.debounce": "^4.0.8",
     "luxon": "^3.4.3",

package/src/client/components/chat/chat.scss

@@ -59,7 +59,16 @@
   padding: 0;
 
   &__message {
+    display: flex;
+    flex-direction: column;
     margin: 5px 15px 0;
+    max-width: 80%;
+    width: fit-content;
+
+    &.inbound {
+     margin-left: auto;
+    }
+
     @include mq ($from: tablet) {
       margin-left: 10px;
       margin-right: 10px;
@@ -68,10 +77,6 @@
     &:first-child {
       padding-top: 15px;
     }
-
-    &.inbound {
-      text-align: right;
-    }
   }
 
   &__from {
@@ -79,6 +84,11 @@
     color: govuk-colour('dark-grey');
     margin-top: 2px;
     margin-bottom: 2px;
+
+    .inbound {
+      display: block;
+      text-align: right;
+    }
   }
 
   &__text {
@@ -97,6 +107,14 @@
       color: govuk-colour('white');
       background-color: govuk-colour('blue');
       border-radius: 10px 0 10px 10px;
+
+      .govuk-link:visited {
+        color: govuk-colour('white');
+      }
+
+      .govuk-link:focus {
+        color: govuk-colour('black');
+      }
     }
 
     &.outbound {

package/src/client/components/message/message.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { classnames } from '../../lib/classnames'
+import { formatMessage } from '../../lib/transform-messages'
 
 export function Message ({ message, previousMessage }) {
   const outbound = message.direction === 'outbound'
@@ -9,11 +10,11 @@ export function Message ({ message, previousMessage }) {
   return (
     <li className={classnames('wc-chat__message', outbound ? 'outbound' : 'inbound')}>
       <div className='wc-chat__from'>
-        {messageOwnerSameAsPrevious ? null : <span>{outbound ? message.assignee : 'You'}</span>}
+        {messageOwnerSameAsPrevious ? null : <span className={classnames(outbound ? 'outbound' : 'inbound')}>{outbound ? message.assignee : 'You'}</span>}
         <span className='govuk-visually-hidden'>:</span>
       </div>
       <div className={classnames('wc-chat__text', outbound ? 'outbound' : 'inbound')}>
-        {message.text}
+        {formatMessage(message.text)}
       </div>
     </li>
   )

package/src/client/lib/agent-status-headline.js

@@ -12,6 +12,6 @@ export const agentStatusHeadline = (availability, agentStatus, agentName) => {
     case 'resolved':
       return agentName ? `${agentName} ended the session` : 'Session ended by advisor'
     default:
-      return agentName ? `You are speaking with ${agentName}` : 'No advisers currently available'
+      return agentName ? `You are speaking with ${agentName}` : 'Waiting for an adviser'
   }
 }

package/src/client/lib/transform-messages.js

@@ -1,4 +1,17 @@
 import { DateTime } from 'luxon'
+import parse from 'html-react-parser'
+
+const websiteRegex = /(?:www|https?)[^\s]+/gi
+
+export const formatMessage = message => {
+  if (message.match(websiteRegex)) {
+    message = message.replace(websiteRegex, link => {
+      return `<a class="govuk-link" href="${link}" target="_blank" rel="noreferrer">${link.replace(/https?:\/\//gi, '')}</a>`
+    })
+  }
+
+  return parse(message)
+}
 
 export const transformMessage = message => {
   return {