[Node] Dialogflow API를 활용한 챗봇 사이트 - 3. TextQuery Function, EventQuery Function

★ 이 부분은 앞서 만들었던 TextQuery Route와 EventQuery Route 등의 서버 부분과 응답하는 React 부분으로 필요에 의해 생략 가능합니다!

1. 전체 코드

// Chatbot.js

import React, { useEffect } from "react";
import Axios from "axios";

function Chatbot() {
  useEffect(() => {
    eventQuery("greeting");  // Dialogflow에 등록해둔 Event
  }, []);

  // Text Query
  const textQuery = async (text) => {
    // 내가 보낸 메세지 보관
    let conversation = {
      who: "user",
      content: {
        text: {
          text: text,
        },
      },
    };

    // chatbot이 보낸 메세지 보관
    const textQueryVariables = {
      text: text,
    };

    try {
      // text query route에 request 전송
      const response = await Axios.post(
        "api/dialogflow/textQuery",
        textQueryVariables
      );
      const content = response.data.fulfillmentMessages[0];

      conversation = {
        who: "bot",
        content: {
          text: {
            text: content,
          },
        },
      };

      console.log(conversation);
    } catch (error) {
      conversation = {
        who: "bot",
        content: {
          text: {
            text: "Error juse occured, please check the problem",
          },
        },
      };
      console.log(conversation);
    }
  };

  // Event Query
  const eventQuery = async (event) => {
    const eventQueryVariables = {
      event,
    };

    try {
      const response = await Axios.post(
        "api/dialogflow/eventQuery",
        eventQueryVariables
      );
      const content = response.data.fulfillmentMessages[0];

      let conversation = {
        who: "bot",
        content: {
          text: {
            text: content,
          },
        },
      };

      console.log(conversation);
    } catch (error) {
      let conversation = {
        who: "bot",
        content: {
          text: {
            text: "Error juse occured, please check the problem",
          },
        },
      };
      console.log(conversation);
    }
  };

  const keyPressHandler = (e) => {
    if (e.key === "Enter") {
      if (!e.target.value) {
        return alert("you need to type something first");
      }
      // text query route로 request 전송
      textQuery(e.target.value);
      e.target.value = "";
    }
  };
  return (
    <div
      style={{
        height: 700,
        width: 700,
        border: "3px solid black",
        borderRadius: "7px",
      }}
    >
      <div style={{ height: 639, width: "100%", overflow: "auto" }}></div>

      <input
        style={{
          margin: 0,
          width: "98.5%",
          height: 50,
          borderRadius: "4px",
          padding: "5px",
          fontSize: "1rem",
        }}
        placeholder="Send a message..."
        onKeyDown={keyPressHandler}
        type="text"
      />
    </div>
  );
}
export default Chatbot;

 

2. 결과 🎉

---

★ 따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기 강의를 참고합니다.