JanetFrontEnd/src/ChatBoxProps.js

import React, { useState, useEffect, useRef } from "react";
import "./style.css";
import ChatBoxMessages from "./ChatMessages.js";

const ChatBoxProps = (props) => {
  const { visible, updateNeedForm, messages, updateMessages, token } = props.props;
  const [inputValue, setInputValue] = useState("");
  const backendUrl = '/api';
  const [clicked, setClicked] = useState(false);
  const [timer, setTimer] = useState(0);
  const [first, setFirst] = useState(true);
  const [busy, setBusy] = useState(false);
  const tick = useRef()  

  useEffect(() => {
    if (first){
      fetch(backendUrl + '/predict', {
            method: 'POST',
            body: JSON.stringify({ message: "<HELP_ON_START>", token: token }),
            mode: 'cors',
            headers: {
           'Content-Type': 'application/json'
           },
      }).then(r => r.json()).then(r => {
      let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: "", typing:false};
      updateMessages(msg2);
      }).catch((error) => {
        console.error('Error:', error);
        let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false, query: "", cand: "", history: "", modQuery: ""};
      	updateMessages(msg3);
      });
      
      setFirst((first) => false);
    }
    if(!clicked && !busy){
      tick.current = setInterval(() => {  
        setTimer((timer) => timer + 1);
      }, 1000);

      if(timer >= 300){
        fetch(backendUrl + '/predict', {
            method: 'POST',
            body: JSON.stringify({ message: "<RECOMMEND_ON_IDLE>", token: token }),
            mode: 'cors',
            headers: {
           'Content-Type': 'application/json'
           },
      }).then(r => r.json()).then(r => {
      let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: "", typing:false};
      updateMessages(msg2);
      }).catch((error) => {
        console.error('Error:', error);
	let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false, query: "", cand: "", history: "", modQuery: ""};
      	updateMessages(msg3);
      });
      
        setTimer((timer) => 0);
        clearInterval(tick.current);
      }
    }
    else {
      setTimer((timer) => 0);
      setClicked((clicked) => false);
      clearInterval(tick.current);
    }
    return () => clearInterval(tick.current);
  }, [clicked, timer, first]);

  
  function handleKeyDown(event) {
    if (event.key === "Enter") {
      onSend(inputValue);
    }
  }

  function onSend(text) {
    if (inputValue === "") {
      return;
    }
    setClicked((clicked) => true);
    setInputValue("");
    setBusy((busy) => true);
    let msg1 = { name: "User", message: inputValue, typing:false, query: "", cand: "", history: "", modQuery: "" };
    updateMessages(msg1);
    let msgTemp = {name: "Janet", message: "I am thinking...", typing:true, query: "", cand: "", history: "", modQuery: ""};
    updateMessages(msgTemp);
   
    fetch(backendUrl + '/predict', {
      method: 'POST',
      body: JSON.stringify({ message: inputValue, token: token }),
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(r => r.json())
    .then(r => {
      let msg2 = { name: "Janet", message: r.answer, query: r.query, cand: r.cand, history: r.history, modQuery: r.modQuery, typing:false};
      updateMessages(msg2);
      updateNeedForm(true);
      setBusy((busy) => false);
    }).catch((error) => {
      console.error('Error:', error);
      let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false, query: "", cand: "", history: "", modQuery: ""};
      updateMessages(msg3);
      //updateMessages(msg3);
      setBusy((busy) => false);
    });
  }

  function handleInputChange(event) {
    setInputValue(event.target.value);
  }

  return (
    <div
      className="chatbox__support"
      style={{
        ...{ opacity: visible ? "1" : "0" },
        ...{ zIndex: visible ? "123456" : "-123456" },
        ...{
          transform: visible ? "translateY(-40px)" : "translateY(0px)"
        }
      }}
    >
      <div className="chatbox__header">
        <div className="chatbox__image--header">
          <img
            src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-5--v1.png"
            alt=""
          />
        </div>
        <div className="chatbox__content--header">
          <h4 className="chatbox__heading--header">Janet</h4>
          <p className="chatbox__description--header">
            Hi, it's Janet. I am here to help you in utilizing the VRE.
          </p>
        </div>
      </div>
      <ChatBoxMessages messages={messages} />
      <div className="chatbox__footer">
        <input
          type="text"
          placeholder="Write a message..."
          value={inputValue}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
        />
        <button className="chatbox__send--footer send__button" onClick={onSend}>
          Send
        </button>
      </div>
    </div>
  );
};

export default ChatBoxProps;