Showing
3 changed files
with
163 additions
and
0 deletions
client/src/components/chat/Chat.js
0 → 100644
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); |
client/src/components/header/Header.js
0 → 100644
client/src/components/menu/Menu.js
0 → 100644
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; |
-
Please register or login to post a comment