diff --git a/virtual_assistant.js b/virtual_assistant.js index 8e2bf46005984c76152af4644773efd4c8b2fe84..f5eaf9f3d10cdd2b29ab2447581bb00d4491c20b 100644 --- a/virtual_assistant.js +++ b/virtual_assistant.js @@ -1,4 +1,33 @@ -(function() { +function abc() { + + let total_data=[]; + let string=JSON.stringify(total_data); + + let get_total_data=sessionStorage.getItem("data"); + let data_array = JSON.parse(get_total_data); + + let get_received_data=sessionStorage.getItem("received"); + let received_array = JSON.parse(get_received_data); + + + if(data_array === null) + { + sessionStorage.setItem("data", string); + } + + if(received_array === null) + { + sessionStorage.setItem("received",string); + } + + + var toggle=sessionStorage.getItem("open"); + if(toggle === null) + { + sessionStorage.setItem("open",false); + } + + let cursor=document.createElement('img'); cursor.src='https://gitlab.pal.tech/ramakrishna.bapathu/images/-/raw/main/chatbot.jpg'; cursor.setAttribute('id','cursor'); @@ -22,17 +51,27 @@ chat.addEventListener('click', function handleClick(event) { if(element.className === 'chatbot_none') { element.className = 'chatbot_flex'; + sessionStorage.setItem("open",true); } else { element.className = 'chatbot_none'; + sessionStorage.setItem("open",false); } }); chatbot.appendChild(chat); let chatbot_container=document.createElement('div'); chatbot_container.setAttribute('id','chatbot-container'); -chatbot_container.className='chatbot_none'; + if(toggle) + { + chatbot_container.className='chatbot_flex'; + } + else + { + chatbot_container.className='chatbot_none'; + } + let header =document.createElement('div'); @@ -47,14 +86,48 @@ close_button.innerHTML='x'; close_button.addEventListener('click', function handleClick(event) { var element= document.getElementById('chatbot-container'); element.className = 'chatbot_none'; + sessionStorage.setItem("open",false); }); header.appendChild(close_button); header.appendChild(header_text); +let conversation_wrapper=document.createElement('div'); +conversation_wrapper.className='conversation-wrapper'; + let conversation=document.createElement('div'); conversation.setAttribute('id','conversation'); + + if(data_array !== null && data_array.length !== 0) + { + for(var i=0;i<data_array.length;i++) + { + var send = document.createElement('div'); + send.className='send'; + send.innerHTML=data_array[i]; + conversation.appendChild(send); + + var receive=document.createElement('receive'); + receive.className='receive'; + for(var k=0;k<received_array[i].length;k++) + { + var ele=document.createElement('div'); + ele.innerHTML=received_array[i][k]; + if(received_array[i][k] === '↓') + { + ele.className='arrow'; + } + receive.appendChild(ele); + } + + conversation.appendChild(receive); + } + } + + +conversation_wrapper.appendChild(conversation); + let footer=document.createElement('div'); footer.setAttribute('id','footer'); @@ -68,21 +141,29 @@ send_icon.src='https://gitlab.pal.tech/ramakrishna.bapathu/images/-/raw/main/sen send_icon.setAttribute('id','send'); send_icon.addEventListener('click', function handleClick(event){ - var value=document.getElementById('chat_value').value; - - var send = document.createElement('div'); -send.className='send'; -send.innerHTML=value; + var value=document.getElementById('chat_value').value; -var conversation=document.getElementById('conversation'); -conversation.appendChild(send); + let get_total_data=sessionStorage.getItem("data"); + let data_array = JSON.parse(get_total_data); + if(data_array === null) + { + data_array=[]; + } + data_array.push(value); + let string_array=JSON.stringify(data_array); + sessionStorage.setItem("data", string_array); - var element= document.getElementById('chatbot-container'); - element.className = 'chatbot_none'; + // var element= document.getElementById('chatbot-container'); + // element.className = 'chatbot_none'; + var send = document.createElement('div'); + send.className='send'; + send.innerHTML=value; + conversation.appendChild(send); + apicall(value); - apicall(value); + document.getElementById('chat_value').value=''; }); @@ -94,7 +175,7 @@ footer.appendChild(send_icon); chatbot_container.appendChild(header); -chatbot_container.appendChild(conversation); +chatbot_container.appendChild(conversation_wrapper); chatbot_container.appendChild(footer); chatbot.appendChild(chatbot_container); @@ -105,7 +186,7 @@ document.body.appendChild(chatbot); function apicall(value) { - var api='http://localhost:8000/query/'; + var api='http://iapps.pal.tech:9012/query/'; fetch(api, { method: 'POST', @@ -118,6 +199,43 @@ fetch(api, { .then(res => res.json()) .then(json =>{ path=json.path; + + var receive=document.createElement('div'); + receive.className='receive'; + var elem=document.createElement('div'); + elem.innerHTML="The path goes like the following:"; + receive.appendChild(elem); + + var temp=[]; + temp.push("The path goes like the following:"); + for(var i=0;i<path.length;i++) + { + var ele=document.createElement('div'); + ele.innerHTML=path[i].Category; + receive.appendChild(ele); + + + + temp.push(path[i].Category); + if(i !== path.length -1) + { + var ele1=document.createElement('div'); + ele1.innerHTML='↓'; + ele1.className='arrow'; + receive.appendChild(ele1); + + temp.push('↓'); + } + } + + if(received_array === null) + { + received_array=[]; + } + + received_array.push(temp); + sessionStorage.setItem("received",JSON.stringify(received_array)); + conversation.appendChild(receive); custom(); transition(); }) @@ -145,8 +263,30 @@ function recursive(element,next) if(element.CategoryType === 'Hover') { - let child=ele.getElementsByClassName('sub-menu')[0]; - child.style.display='block'; + + if(element.Category === 'What We Do') + { + let child=ele.getElementsByClassName('sub-menu')[0]; + child.style.display='block'; + + let wrap=ele.getElementsByClassName('wrap')[0]; + let wrap_child=wrap.childNodes; + + for(var c=0;c<wrap_child.length;c++) + { + if(wrap_child[c].nodeType === 1) + { + wrap_child[c].classList.remove('active'); + } + } + } + else + { + ele.classList.add('active'); + + ele.getElementsByClassName('sub-menu')[0].classList.add('active'); + } + } else if('PagePth' in element) { @@ -298,9 +438,8 @@ color: white; z-index: 2000; padding: 5px; } - -#conversation{ - background-color: white; +.conversation-wrapper{ + background-color: #f1f2f6; height: 85%; top: 15%; border-bottom-left-radius: 25px; @@ -309,6 +448,17 @@ display: flex; flex-direction: column; overflow: auto; position: relative; +padding: 4px; +} +#conversation{ +background-color: #f1f2f6; +height: 85%; +border-bottom-left-radius: 25px; +border-bottom-right-radius: 25px; +display: flex; +flex-direction: column; +overflow: auto; +position: relative; } #footer{ display: flex; @@ -322,14 +472,13 @@ input{ width: 89%; border: 1px solid #0177da; border-radius: 8px; -padding: 2px; +padding: 8px; } input:focus-visible{ outline: none; } #send{ -width: 30px; -height: 25px; +height: 30px; } .send { align-self: flex-end; @@ -337,16 +486,49 @@ margin: 2%; width: -moz-fit-content; width: fit-content; max-width: 200px; +background-color: #0177daba; +border-radius: 10px; +color: white; +padding: 8px; +padding-left: 10px; +padding-right: 10px; +font-size: 14px; +} +.receive{ + align-self: flex-start; +margin: 2%; +width: -moz-fit-content; +width: fit-content; +max-width: 200px; background-color: white; border-radius: 10px; color: #42506c; padding: 8px; padding-left: 10px; padding-right: 10px; +font-size: 14px; + + display: flex; + flex-direction: column; + gap: 2px; +} +#conversation::-webkit-scrollbar{ + width: 4px; +} +#conversation::-webkit-scrollbar-thumb { + background: grey; + border-radius: 10px; +} +.arrow{ + position: relative; + left: 30%; } `; customStyle.appendChild(document.createTextNode(customCSS)); document.head.appendChild(customStyle); console.log('Worked'); -})(); +} +if(window.document.readyState==="complete"){ + abc() +}