sdy

create components

1 +import React, { useState, useEffect, useRef } from "react";
2 +import { connect } from "react-redux";
3 +
4 +import {userMessage, sendMessage, createSession} from "../../actions/action_watson";
5 +import store from "../../store";
6 +import axios from "axios";
7 +
8 +import Header from "../header/Header";
9 +
10 +const BotOptions = ({ option }) => {
11 + return (
12 + <div className={'msg label bot'}>{option.label}</div>
13 + );
14 +}
15 +
16 +const BotMsg = ({bot}) => {
17 + if (bot.response_type === 'text') {
18 + return (
19 + <div className={'msg bot'}>{bot.text}</div>
20 + );
21 + } else if (bot.response_type === 'option') {
22 + console.log("bot : ", bot);
23 + return (
24 + <>
25 + {bot.options.map((e, i) => (
26 + <BotOptions key={i} option={e} />
27 + ))}
28 + </>
29 + );
30 + } else if (bot.response_type === 'image') {
31 + return (
32 + <div className={'bot-image-box'}>
33 + <img src={bot.source} className={'bot-image'} />
34 + </div>
35 + );
36 + }
37 +}
38 +
39 +const Chat = ({ chat, userMsg, botMsg, botOption, userMessage, sendMessage }) => {
40 + const [message, setMessage] = useState("");
41 + const endOfMessages = useRef(null);
42 +
43 + const scrollToBottom = () => {
44 + endOfMessages.current.scrollIntoView({ behavior: "smooth" });
45 + };
46 + useEffect(scrollToBottom, [chat, userMsg, botMsg, botOption]);
47 +
48 + const handleClick = async (e) => {
49 + const code = e.keyCode || e.which;
50 +
51 + if (code === 13) {
52 + console.log(message);
53 + userMessage(message);
54 + sendMessage(message);
55 + setMessage("");
56 + }
57 + };
58 +
59 + // initial message
60 + useEffect(() => {
61 + if (!localStorage.session) {
62 + const makeSession = async () => {
63 + await store.dispatch(createSession());
64 + axios.defaults.headers.common["session_id"] = localStorage.session;
65 + console.log("send message before ");
66 + sendMessage("");
67 + console.log("send message after ");
68 + }
69 + makeSession().then(r => console.log(r)).catch(e => console.log(e));
70 + }
71 + }, []);
72 +
73 + console.log("chats : ", chat);
74 + console.log("userMsg : ", userMsg);
75 + console.log("botMsg : ", botMsg);
76 + console.log("botOptions : ", botOption);
77 +
78 + return (
79 + <div className="chat">
80 + <Header />
81 + <div className="historyContainer">
82 + {chat.map((e, i) => {
83 + if (e.type === 'bot') {
84 + return (
85 + <>
86 + {e.message.map((elem, idx) => (
87 + <BotMsg key={idx} bot={elem}/>
88 + ))}
89 + </>
90 + );
91 + } else if (e.type === 'user') {
92 + return (
93 + <div key={i} className={'msg user'}>{e.message}</div>
94 + )
95 + }
96 + })}
97 + <div ref={endOfMessages}></div>
98 + </div>
99 + <div className={'input'}>
100 + <input
101 + id="chatBox"
102 + onChange={(e) => setMessage(e.target.value)}
103 + onKeyPress={handleClick}
104 + value={message}
105 + placeholder={'type anything about corona'}
106 + />
107 + </div>
108 + </div>
109 + );
110 +};
111 +
112 +const mapStateToProps = (state) => ({
113 + chat: state.watson.messages,
114 + userMsg: state.watson.userMessages,
115 + botMsg: state.watson.botMessages,
116 + botOption: state.watson.botOptions
117 +});
118 +
119 +export default connect(mapStateToProps, { userMessage, sendMessage })(Chat);
1 +import React from "react";
2 +
3 +const Header = () => {
4 + return (
5 + <div className={'chat-header'}>
6 + <div className={'pic bot'}></div>
7 + <p>COVID - 19 Chat Bot</p>
8 + </div>
9 + );
10 +}
11 +
12 +export default Header;
1 +import React from "react";
2 +
3 +const Menu = () => {
4 + return (
5 + <div className="menu-box">
6 + <div className="menu-header">
7 + <div className="pic menu-icon"></div>
8 + <h2>Quick Link</h2>
9 + </div>
10 + <div className="menu-contents">
11 + <div className="menu-item">
12 + <div className="pic call"></div>
13 + <a href="tel:+821339">질병 관리청 콜센터 1339</a>
14 + </div>
15 + <div className="menu-item">
16 + <div className="pic mask"></div>
17 + <a href="http://ncov.mohw.go.kr/baroView4.do">코로나 예방 수칙</a>
18 + </div>
19 + <div className="menu-item">
20 + <div className="pic bar"></div>
21 + <a href="">확진현황 (axios )</a>
22 + </div>
23 + <div className="menu-item">
24 + <div className="pic vaccine"></div>
25 + <a href="https://ncv.kdca.go.kr/menu.es?mid=a10117030000">백신 접종 정보</a>
26 + </div>
27 + </div>
28 + </div>
29 + );
30 +}
31 +
32 +export default Menu;