{"version":3,"sources":["media/message_8604180.png","index.js","ChatbotAPI.js"],"names":["module","exports","rootElement","document","getElementById","dataset","max_height","min_height","api","constructor","props","_this","this","GetChatbotResponse","async","threadId","message","arguments","length","undefined","myHeaders","Headers","current","append","renovationType","requestOptions","method","headers","body","JSON","stringify","redirect","apiurl","window","location","hostname","response","fetch","then","json","result","catch","error","console","run_id","sessionStorage","setItem","messages","renovation","value","handler","updateChatBody","updateMessagesAmount","sendMessageToChatBox","isOpen","height","parent","postMessage","style","bottom","setRenovationType","updateConversation","closeCurentConversation","Chatbot","useRef","isShown","setShown","useState","React","createElement","Fragment","ReactDOM","render"],"mappings":"4FAAAA,EAAAC,QAAA,01BCaA,MAAMC,EAAcC,SAASC,eAAe,QAC5CF,EAAYG,QAAQC,WAAa,IACjCJ,EAAYG,QAAQE,WAAa,IAEjC,MAAMC,EAAM,ICjBG,MAEbC,YAAYC,GAAO,IAAAC,EAAAC,UAQnBC,mBAAqBC,eAAOC,GAA2B,IAAjBC,EAAOC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,GAS9C,MAAMG,EAAY,IAAIC,QAElBN,EAASO,QAASF,EAAUG,OAAO,YAAaR,EAASO,SACxDF,EAAUG,OAAO,eAAgBZ,EAAKa,iBAEtCR,GAAWD,EAASO,SAASF,EAAUG,OAAO,eAAe,GAIlEH,EAAUG,OAAO,eAAgB,oBAEjC,MAAME,EAAiB,CACrBC,OAAQ,OACRC,QAASP,EACTQ,KAAMC,KAAKC,UAAU,CAAEd,YACvBe,SAAU,UAINC,GAAUC,OAAOC,SAASC,SAE5B,2FAGJ,IAAIC,QAAiBC,MAAML,EAAQP,GAChCa,KAAKF,GAAYA,EAASG,QAC1BD,KAAKE,GAAUA,GACfC,MAAMC,IACLC,QAAQD,MAAM,QAASA,KA+B3B,OA1BIN,GAAiC,YAArBA,EAASpB,UAEnBoB,EAASQ,QACXxB,EAAUG,OAAO,SAAUa,EAASQ,QAEpCR,QAAiBC,MAAML,EAAQP,GAC9Ba,KAAKF,GAAYA,EAASG,QAC1BD,KAAKE,GAAUA,GACfC,MAAMC,IACLC,QAAQD,MAAM,QAASA,MAIzBN,EAASpB,QAAU,0EAKnBoB,EAASrB,WACNA,EAASO,SAAWP,EAASO,UAAYc,EAASrB,WACrD8B,eAAeC,QAAQ,SAAUV,EAASrB,UAC1CA,EAASO,QAAUc,EAASrB,YAK3BC,GAAWoB,EAASW,UACrBF,eAAeC,QAAS,SAAUV,EAASrB,UAC3CA,EAASO,QAAUc,EAASrB,SACrBqB,EAASW,UAETX,EAASpB,QACT,CAACoB,EAASpB,SAGZ,MApFTJ,KAAKY,eAAiBd,EAAMsC,YAAc,UAG5CA,eAAeC,GACbrC,KAAKY,eAAiByB,IDUN,CAAED,WAAY,cAc5BE,EAAU,CACd1B,eAAgB,GAChB2B,eAAgBA,OAChBC,qBAAsBA,OACtBC,qBAAsBA,CAACC,EAAQC,KAG7BtB,OAAOuB,OAAOC,YAAY,CAAEH,UAAU,KAGlCA,EAAQpD,EAAYwD,MAAMH,OAASA,EAAS,MACxCrD,EAAYwD,MAAMH,OAAS,OAAQrD,EAAYwD,MAAMC,OAAS,MAGxEC,kBAAoBX,IAClBzC,EAAIwC,WAAaC,GAEnBY,mBAAoBA,OACpBC,wBAAyBA,QAuR3B,SAASC,IACUC,iBAAO,MACPA,iBAAO,MACJA,iBAAO,MAF3B,MAGOC,EAASC,GAAYC,oBAAS,GACrCjB,EAAQgB,SAAW,SA8BL,OAAQE,IAAAC,cAAAD,IAAAE,SAAA,MAiBxBC,IAASC,OAAOJ,IAAAC,cAACN,EAAO,MAAK7D","file":"static/js/main.cb03a71a.chunk.js","sourcesContent":["module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAaFJREFUWIXd17FrFEEUx/HPLmfUBVFsBLsQCGgQbBJbxdr0okKsU2p6rWysIpreJo1/gYWWFgEbMYIRLVIEBCWCnERzlxTjkWXdu929Y3fBL0yxO/Pe7zHvzfAm8i9zuIN5TONMau404hybNH38SH3v4gs28BybwwxPYA09HNQ0eniG43nir2sUzo5X2SDWGhQfjKcD8bmat31UOi7GQsEVFVYdxLgdY6EF8QHzsXDU2mKmg2QCB6t4P2QuwQrOj7BP4LvxiuhjiQDvF/j41sGxEo7ymMYS3g2ZT3CzwMdUhD1MjRnEpOxFwnls4xhCPxJy0Rqdkus28aui7wQXyiwsqvbVisJpnhT43i+T+2iCAIpse2Vr4AO6FcXLpKDbdhF+joUWqi22YnxtMYAXsK75ZuQAOzhJ6Af6DYv/wbX0VjxoULyLW3n5WBb6+bqE+3iJy2nR7EVxFjdwCacwg+t50WbYx1t8ws/U/9+OHiZvhPukMo+N3s6HODeO47IsDhHfwGydwgPuZYR7eGT8TqoyVx09XLb/fjfOFdwVXsf/F4fo90aivMgQCQAAAABJRU5ErkJggg==\"","import React, { useState, useEffect, useRef } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport BotMessage from \"./components/BotMessage\";\nimport UserMessage from \"./components/UserMessage\";\nimport Messages from \"./components/Messages\";\nimport Input from \"./components/Input\";\n\nimport API from \"./ChatbotAPI\";\n\nimport \"./styles.css\";\nimport Header from \"./components/Header\";\n\nconst rootElement = document.getElementById(\"root\");\nrootElement.dataset.max_height = 800;\nrootElement.dataset.min_height = 288;\n\nconst api = new API({ renovation: 'Basements' });\n\nconst renovations = {\n  'Basements': true,\n  'Bathrooms': true,\n  'Kitchens': true,\n  'Roofing': true,\n  'Windows': true,\n  'Doors': true,\n  'Flooring': true,\n  'Painting': true,\n  'Sunroom': true\n};\n\nconst handler = {\n  renovationType: '',\n  updateChatBody: () => {}, \n  updateMessagesAmount: () => {},\n  sendMessageToChatBox: (isOpen, height) => {\n\n    // console.log( 'sendMessageToChatBox', isOpen, height );\n    window.parent.postMessage({ isOpen }, '*');\n    // rootElement.style.height = chatRef.current.dataset.height + 'px';\n\n    if (isOpen) rootElement.style.height = height + 'px';\n    else  { rootElement.style.height = 'auto'; rootElement.style.bottom = '0';  }\n\n  },\n  setRenovationType: (value) => {\n    api.renovation = value;\n  },\n  updateConversation: () => {}, \n  closeCurentConversation: () => {}, \n};\n\nconst handleMessageEvent = (event) => {\n  const { chatRef, dragRef, setShown } = handler;\n  // console.log('handleMessageEvent', event.data );\n  if (event.data.deviceType) {\n    switch(event.data.deviceType) {\n      case 'mobile':\n        chatRef.current.classList.add('mobile');\n        dragRef.current.classList.add('mobile');\n\n         window.parent.postMessage({ mobileViewUpd: true }, '*');\n        break;\n      case 'desktop':\n        chatRef.current.classList.remove('mobile');\n        dragRef.current.classList.remove('mobile');\n\n         window.parent.postMessage({ mobileViewUpd: true }, '*');\n        break;\n      default:\n    }\n\n    setShown(true);\n\n  }\n  //  console.log('event.data.renovationType', event.data.renovationType);\n  if (event.data.renovationType && renovations[event.data.renovationType] && event.data.renovationType !== handler.renovationType) {\n    handler.renovationType = event.data.renovationType;\n    handler.setRenovationType(handler.renovationType);\n    // console.log('api.renovation', api);\n  }\n\n  if (event.data.max_height) {\n    rootElement.style.height = Number(event.data.max_height) - 24 + 'px';\n    rootElement.dataset.max_height = Number(event.data.max_height) - 24;\n\n    chatRef.current.style.height = chatRef.current.dataset.height + 'px';\n  }\n};\n\nasync function loadConversation(setMessages, messages, threadId) {\n  const response = await api.GetChatbotResponse(threadId);\n\n  if (response) {\n    const loadedMesages = [...response].reverse().map((item, index) => {\n      return item.role === 'user' \n      ? <UserMessage key={index+1} text={item.message} />\n      : <BotMessage\n          key={index+1}\n          fetchMessage={ async () => item.message }\n        />\n    });\n\n    sessionStorage.setItem('messages', JSON.stringify([...response].reverse()) );\n    const conversation = messages.concat(loadedMesages);\n    setMessages(conversation);\n\n\n\n    handler.updateMessagesAmount(conversation.length);\n  }\n};\n\nconst ChatBody = ({ chatRef, dragRef, dragRefMob }) => {\n\n  const [isOpen, setChatOpen] = useState(false);\n  const [messages, setMessages] = useState([\n    <BotMessage\n      key={0}\n      fetchMessage={ async () => (\n        `Hi, my name is Brian. I will help you to find anything related to our renovation services.\\n What is your Name?`\n      )}\n    />\n  ]);\n  const dragEvent = useRef(null);\n  const threadId = useRef(sessionStorage.getItem('chatId') || null);\n\n  useEffect(() => {\n\n    // handler.closeCurentConversation = () => {\n    //   sessionStorage.clear();\n    //   threadId.current = null;\n    //   setMessages([\n    //     <BotMessage\n    //       key={0}\n    //       fetchMessage={ async () => (\n    //         `Hi, my name is Brian. I will help you to find anything related to our renovation services.\\n What is your Name?`\n    //       )}\n    //     />\n    //   ]);\n    // };\n    if (threadId.current) {\n      const sessionSavedMessages = sessionStorage.getItem('messages');\n      // console.log('sessionSavedMessages init', Boolean(sessionSavedMessages));\n      if (sessionSavedMessages) {\n        const cnv = JSON.parse(sessionSavedMessages);\n        const loadedMesages = cnv.map((item, index) => {\n          return item.role === 'user' \n          ? <UserMessage key={index+1} text={item.message} />\n          : <BotMessage\n              key={index+1}\n              fetchMessage={ async () => item.message }\n            />\n        });\n        const conversation = messages.concat(loadedMesages);\n        // console.log('conversation', conversation);\n        setMessages(conversation);\n\n        handler.updateMessagesAmount(conversation.length);\n        // console.log('updateMessagesAmount');\n\n \n\n      } else if (messages.length === 1) {\n        loadConversation(setMessages, messages, threadId);\n      } \n\n    } else {\n      sessionStorage.removeItem('messages');\n      handler.updateMessagesAmount(messages.length);\n    }\n\n    handler.chatRef = chatRef;\n    handler.dragRef = dragRef;\n\n    window.addEventListener('message', handleMessageEvent);\n\n    if (!rootElement.dataset.height) rootElement.dataset.height = '456';\n    if (!chatRef.current.dataset.height) chatRef.current.dataset.height = '456';\n\n    if (dragRef.current) {\n      dragRef.current.addEventListener(\"mousedown\", (e) => {\n        // console.log('mousedown', chatRef.current.style.height);\n        if (!dragEvent.current) {\n          e.preventDefault();\n          e.stopPropagation();\n\n          dragEvent.current = e.screenY;\n          dragRef.current.style.opacity = '0.7';\n  \n          window.parent.postMessage({ isDrag: 'start' }, '*');\n        }\n      });\n\n      document.addEventListener(\"mousemove\", (e) => {\n        if (dragEvent.current && rootElement.dataset.max_height) {\n\n          const pixChange = dragEvent.current - e.screenY;\n\n          chatRef.current.dataset.height = Number(chatRef.current.dataset.height) + pixChange;\n          chatRef.current.style.height   = chatRef.current.dataset.height + 'px';\n          // console.log('height', chatRef.current.dataset.height, rootElement.dataset.min_height );\n\n            if (Number(chatRef.current.dataset.height) < Number(rootElement.dataset.min_height)) {\n\n              chatRef.current.dataset.height = rootElement.dataset.min_height;\n              chatRef.current.style.height = rootElement.dataset.min_height + 'px';\n\n  \n            } else if (Number(chatRef.current.dataset.height) > Number(rootElement.dataset.max_height)) {\n\n              chatRef.current.dataset.height = rootElement.dataset.max_height;\n              chatRef.current.style.height = rootElement.dataset.max_height + 'px';\n  \n            }\n            // console.log('mousemove', chatRef.current.style.height, chatRef.current.dataset.height, pixChange);\n\n\n          dragEvent.current = e.screenY;\n          \n        }\n      });\n\n      document.addEventListener(\"mouseup\", (e) => {\n        // console.log('mouseup', chatRef.current.style.height);\n        if (dragEvent.current) {\n          dragEvent.current = null;\n          dragRef.current.style.opacity = '1';\n          \n          window.parent.postMessage({ isDrag: 'end', height: chatRef.current.dataset.height }, '*');\n  \n          if (!chatRef.current.classList.contains('open')) {\n            setTimeout(() => {\n              rootElement.style.height = chatRef.current.dataset.height + 'px';\n            }, 0);\n          }\n\n        }\n\n      });\n      \n    } else {\n      // console.error('dragRef.current', dragRef.current);\n    }\n\n    window.parent.postMessage({ isInit: true }, '*');\n\n    return () => {\n      window.removeEventListener('message', handleMessageEvent);\n    };\n\n  }, []);\n\n\n\n\n  const send = async (text) => {\n    if (!text || text.length > 1000) return;\n\n    handler.updateConversation(true);\n   \n\n\n    const newMessages = messages.concat(      \n      <UserMessage key={messages.length + 1} text={text} />,\n      <BotMessage\n        key={messages.length + 2}\n        fetchMessage={ async () => {\n          // console.log('fetchMessage', threadId, text, messages );\n\n          const sessionSavedMessages = sessionStorage.getItem('messages');\n          // console.log('sessionSavedMessages', Boolean(sessionSavedMessages) );\n          if (sessionSavedMessages) {\n            const cnv = JSON.parse(sessionSavedMessages);\n            // console.log('cnv!', cnv );\n            let messageToShow;\n            \n            if (cnv.some((item, i) => {\n              if (item.message === text) {\n                messageToShow = cnv[i + 1] ? cnv[i + 1].message : text;\n                return true;\n              }\n            })) {\n              // console.log('same message!' );\n              return messageToShow;\n            }\n          } \n\n          const respond = await api.GetChatbotResponse(threadId, text);\n        \n          const cnv = sessionSavedMessages ? JSON.parse(sessionSavedMessages) : [];\n          cnv.push({ role: 'user', message: text }, { role: 'assistant', message: respond[0]});\n          sessionStorage.setItem('messages', JSON.stringify(cnv) );\n\n          return respond[0];\n        }}\n      />\n    );\n    // console.log('newMessages', newMessages );\n    setMessages(newMessages);\n\n    setTimeout(()=>{\n      const msgs = document.querySelector('.messages');\n      msgs.scrollTo(0, (msgs.childElementCount + 1) * 1000);\n    }, 0);\n\n  };\n\n  // useEffect(() => {\n  const updateChatBody = (isOpen) => {\n    setChatOpen(isOpen);\n  };\n  handler.updateChatBody = updateChatBody;\n  // }, []);\n\n  return (\n    <>\n      { isOpen \n        ? <>\n            <Messages messages={messages} />\n            <Input onSend={send} />\n          </> \n        : null\n      }\n    </>\n  );\n};\n\nfunction Chatbot() {\n  const chatRef  = useRef(null);\n  const dragRef  = useRef(null);\n  const dragRefMob  = useRef(null);\n  const [isShown, setShown] = useState(false);\n  handler.setShown = () => { \n    // if (!isShown) setShown(true); \n  };\n\n\n  const handleSizeHeight = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (!chatRef.current.classList.contains('openMob')) {\n      chatRef.current.classList.add('openMob');\n\n      chatRef.current.style.height = '100%';\n\n      rootElement.style.height = 'calc(100svh - 80px)';\n      rootElement.style.bottom = '-56px';\n      \n      window.parent.postMessage({ fullHgh: true }, '*');\n    } else {\n      chatRef.current.classList.remove('openMob');\n\n      chatRef.current.style.height = '456px';\n\n      rootElement.style.height = '456px';\n      rootElement.style.bottom = '0';\n      \n      window.parent.postMessage({ fullHgh: false }, '*');\n    }\n};\n\nif ('!isShown') return (<></>);\n\n  return (\n    <div ref={chatRef} className=\"chatbot closed\">\n        <div ref={dragRef} className=\"arrow-up\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" id=\"arrow-circle-down\" viewBox=\"0 0 24 24\"><g><path d=\"M0,11.96A1.492,1.492,0,0,1,.439,10.9L8.111,3.224a5.5,5.5,0,0,1,7.778,0L23.561,10.9a1.5,1.5,0,1,1-2.122,2.121L13.768,5.345a2.5,2.5,0,0,0-3.536,0h0L2.561,13.017A1.5,1.5,0,0,1,0,11.96Z\"/><path d=\"M0,21.5a1.5,1.5,0,0,1,.439-1.061L9.525,11.36a3.505,3.505,0,0,1,4.95,0l9.086,9.081a1.5,1.5,0,0,1-2.122,2.119l-9.085-9.086a.5.5,0,0,0-.707,0h0L2.561,22.56A1.5,1.5,0,0,1,0,21.5Z\"/></g></svg>\n        </div>\n        <div ref={dragRefMob} onClick={handleSizeHeight} className=\"arrow-up mob\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" id=\"arrow-circle-down\" viewBox=\"0 0 24 24\"><g><path d=\"M0,11.96A1.492,1.492,0,0,1,.439,10.9L8.111,3.224a5.5,5.5,0,0,1,7.778,0L23.561,10.9a1.5,1.5,0,1,1-2.122,2.121L13.768,5.345a2.5,2.5,0,0,0-3.536,0h0L2.561,13.017A1.5,1.5,0,0,1,0,11.96Z\"/><path d=\"M0,21.5a1.5,1.5,0,0,1,.439-1.061L9.525,11.36a3.505,3.505,0,0,1,4.95,0l9.086,9.081a1.5,1.5,0,0,1-2.122,2.119l-9.085-9.086a.5.5,0,0,0-.707,0h0L2.561,22.56A1.5,1.5,0,0,1,0,21.5Z\"/></g></svg>\n        </div>\n        <Header handler={handler} chatbox={chatRef}/>\n        <ChatBody chatRef={chatRef} dragRefMob={dragRefMob} dragRef={dragRef}/>\n    </div>\n  );\n}\n\n\nReactDOM.render(<Chatbot />, rootElement);\n","export default class API {\n\n  constructor(props) {\n    this.renovationType = props.renovation || 'options';\n  }\n\n  set renovation(value) {\n    this.renovationType = value;\n  }\n\n  GetChatbotResponse = async (threadId, message = '') => {\n    // return new Promise(function(resolve, reject) {\n    //   setTimeout(function() {\n    //     if (message === \"hi\") resolve(\"Welcome to chatbot!\");\n    //     else resolve(\"echo : \" + message);\n    //   }, 2000);\n    // });\n    // \"thread_9GE1aSGCXIXGucqQ2LzHMoRm\"\n    \n    const myHeaders = new Headers();\n\n    if (threadId.current) myHeaders.append(\"thread_id\", threadId.current);\n    else myHeaders.append(\"service_type\", this.renovationType);\n    // console.log('service_type', this.renovationType );\n    if (!message && threadId.current) myHeaders.append(\"show_thread\", true);\n    \n    // myHeaders.append(\"assistant_id\", \"\");\n    // myHeaders.append(\"run_id_test\", \"run_ctRRs0okW79dowwX2spOonwu\");\n    myHeaders.append(\"Content-Type\", \"application/json\");\n    \n    const requestOptions = {\n      method: 'POST',\n      headers: myHeaders,\n      body: JSON.stringify({ message }),\n      redirect: 'follow'\n    };\n\n    // https://cc9d40mrng.execute-api.us-east-1.amazonaws.com/CORS_updated/ChatBotConversation\n    const apiurl = (window.location.hostname === \"localhost\" && false)\n      ? \"http://localhost:3001/api/ai/assistant\"\n      : \"https://cc9d40mrng.execute-api.us-east-1.amazonaws.com/CORS_updated/ChatBotConversation\";\n\n    \n    let response = await fetch(apiurl, requestOptions)\n      .then(response => response.json())\n      .then(result => result)\n      .catch(error => {\n        console.error('error', error);\n      });\n\n\n\n    if (response && response.message === 'Timeout') {\n      \n      if (response.run_id) {\n        myHeaders.append(\"run_id\", response.run_id);\n\n        response = await fetch(apiurl, requestOptions)\n        .then(response => response.json())\n        .then(result => result)\n        .catch(error => {\n          console.error('error', error);\n        });\n\n      } else {\n        response.message = \"Sorry, we need more time to handel your query. Please try again later.\";\n      }\n\n    }\n\n    if (response.threadId) {\n      if (!threadId.current || threadId.current !== response.threadId) {\n        sessionStorage.setItem('chatId', response.threadId);\n        threadId.current = response.threadId;\n      }\n    }\n\n\n    if (!message && response.messages) {\n        sessionStorage.setItem( 'chatId', response.threadId );\n        threadId.current = response.threadId;\n        return response.messages;\n\n    } else if (response.message) {\n        return [response.message];\n        \n    } else {\n      return null;\n    }\n  }\n};\n\n"],"sourceRoot":""}