opeanai api에게 내 정보를 물어보면 답이 돌아오는데 시간이 조금 걸려 사용자가 지루할 수 있다.
이를 해결하기 위해 로딩창을 만들어보기로 했다.
React Spinners (davidhu.io)
React Spinners
www.davidhu.io
우선 아래 코드로 설치해주고 위에 사이트에서 마음에 드는 로딩창을 가져오면 된다
npm i react-spinners --save
add react-spinners
-loading.js
npm i react-spinners --save
add react-spinners
mport React from 'react';
import {Oval} from "react-loader-spinner"; //수많은 스피너 중 저는 Oval 스피너 import하겠습니다
function Loading () {
return ( //import 한 스피너는 컴포넌트 형태로 사용가능
<Oval className="image" color='black' secondaryColor="black"/>
) ;
};
export default Loading;
.Loading.css
.Loading{
display: flex;
align-items: center;
justify-content: center;
color : "black";
height : 100px;
width : 100px;
}
-채팅창 전체 코드
import React, { useState, useRef, useEffect } from 'react';
import axios from 'axios';
import Loading from './loading'; // 파일 경로 및 대소문자 확인
const ChatGPT = () => {
const [inputValue, setInputValue] = useState('');
const [chatHistory, setChatHistory] = useState([]);
const [responseMessage, setResponseMessage] = useState('');
const [isTyping, setIsTyping] = useState(false);
const [isLoading, setIsLoading] = useState(false); // isLoading 상태를 정의합니다.
const chatHistoryRef = useRef(null); // 채팅 히스토리 엘리먼트에 대한 참조를 생성합니다.
const scrollToBottom = () => {
if (chatHistoryRef.current) {
chatHistoryRef.current.scrollTop = chatHistoryRef.current.scrollHeight;
}
};
useEffect(() => {
scrollToBottom(); // 컴포넌트가 마운트될 때마다 스크롤을 가장 아래로 이동합니다.
}, [chatHistory]);
const sendMessage = async () => {
setIsLoading(true); // 메시지 전송 시작 시 로딩 상태를 true로 설정합니다.
try {
const response = await axios.post('http://127.0.0.1:5000/sendMessage', {
user_input: inputValue
});
setResponseMessage(response.data.description);
setChatHistory(prevChat => [...prevChat, { text: inputValue, sender: 'user' }]);
setChatHistory(prevChat => [...prevChat, { text: response.data.description, sender: 'bot' }]);
console.log('Responsemessage:', response.data.description);
} catch (error) {
console.error('Error sending message:', error);
}
setInputValue('');
setIsTyping(false);
setIsLoading(false); // 메시지 전송 완료 시 로딩 상태를 false로 설정합니다.
scrollToBottom(); // 새로운 메시지가 추가될 때마다 스크롤을 가장 아래로 이동합니다.
};
const handleInputChange = (event) => {
setInputValue(event.target.value);
setIsTyping(true);
};
const handleKeyPress = (event) => {
if (event.key === 'Enter') {
sendMessage();
}
};
return (
<div className="chat-container">
{isLoading && (
<div className="loading-overlay">
<Loading />
<div className='ment'>AI에게 물어보는 중이랑께~</div>
</div>
)}
<div className="chat-history" ref={chatHistoryRef}>
{chatHistory.map((message, index) => (
<div key={index} className={`message ${message.sender}`}>
{message.text}
</div>
))}
{(chatHistory.length === 0) && (
<div className="messagebot">서찬에 대해 궁금한 것을 입력하세요<br />(질문은 최대 10개까지 가능합니다)</div>
)}
</div>
<div className="chat-input">
<input
type="text"
value={inputValue}
onChange={handleInputChange}
onKeyPress={handleKeyPress}
placeholder="메시지를 입력하세요..."
/>
<button onClick={sendMessage}>전송</button>
</div>
</div>
);
};
export default ChatGPT;
-로딩창
'Development > Front' 카테고리의 다른 글
| Front & Back 서버 연결(axios 실습) (0) | 2024.05.12 |
|---|---|
| Next.js 실습 (0) | 2024.05.05 |
| React 실습 (0) | 2024.04.28 |
| Typing Game 만들어보기(비동기 실습) (1) | 2024.04.28 |
