[React] react-chatbot-kit 이용하여 챗봇 UI 구현하기

728x90
반응형

react-chatbot-kit 이용하여 챗봇 UI 구현하기

이전 글: [React] Vite + React로 프로젝트 시작하기

Vite+React 프로젝트에서 react-chatbot-kit 라이브러리를 이용해서 챗봇 기능을 구현하기로 하였다.
기본적으로는 작은 크기의 화면으로 뜨는 챗봇인데, CSS를 커스터마이징 하면 늘릴 수 있을 것이라 생각했다. (생각보다 쉽지 않았다..)

공식 문서 참고

css 커스터마이징

 

내 프로젝트에서는 이런 식으로 활용하였다.
깃허브 레포: https://github.com/SWSchool-Straight/Chatbot_FE.git

src/styles/chatbot-custom.css

.react-chatbot-kit-chat-container {
  width: 100%; /* 부모의 너비를 가득 채움 */
  height: 100%; /* 부모의 높이를 가득 채움 */
  min-height: 700px !important;  /* 최소 높이 설정 */
  display: flex;
  flex-direction: column; /* 필요에 따라 설정 */
  position: relative; /* 자식 요소의 절대 위치 기준점 */
}

.react-chatbot-kit-chat-inner-container {
  height: 100% !important;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column; /* 세로로 쌓기 */
  justify-content: space-between; /* 메시지 영역과 입력창을 위아래로 배치 */
  position: relative; /* 상대 위치 설정 */
}

/* 메시지 영역 크기 조정 */
.react-chatbot-kit-chat-bot-message-container {
  display: flex;
  align-items: flex-start; /* 메시지 박스를 왼쪽 정렬 */
  width: fit-content;
}

.react-chatbot-kit-chat-message-container {
  flex: 1; /* 남은 공간을 모두 차지하도록 설정 */
  min-height: 0; /* 최소 높이를 0으로 설정하여 스크롤이 정상 작동하도록 함 */
  max-height: calc(100vh - 300px);
  overflow-y: auto !important;
  margin-bottom: 5px; /* 입력창과의 간격 */
}

/* 입력창 컨테이너 크기 조정 */
.react-chatbot-kit-chat-input-container {
  width: 100%;
  display: flex; /* Flexbox로 정렬 */
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  padding: 10px 0px; 
  background-color: #f9f9f9; /* 배경색 추가 */
  border-top: 1px solid #ccc; /* 상단 구분선 */
  flex-shrink: 0; /* 크기가 줄어들지 않도록 설정 */
  position: relative; /* 상대 위치 설정 */
}

.react-chatbot-kit-chat-input {
  flex: 1;
  max-width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  margin-right: 10px;
}

.react-chatbot-kit-chat-input-form {
  display: flex; /* Flexbox로 정렬 */
  justify-content: center;
}

.react-chatbot-kit-chat-input::placeholder {
  color: #aaa;
}

/* 전송 버튼 스타일링 */
.react-chatbot-kit-chat-btn-send {
  max-width: 70px;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  justify-content: center;
}

.react-chatbot-kit-chat-btn-send:hover {
  background-color: #0056b3;
}

.react-chatbot-kit-chat-bot-message {
  justify-content: left;
  width: fit-content;
  max-width: 700px;
  white-space: pre-line;  /* 줄바꿈 허용 */
}

 

위의 스크린샷처럼 대시보드처럼 하는 건 이 글에 담았다!

[Web] MUI Toolpad Core를 이용한 대시보드 페이지 만들기(Vite+React)

 

챗봇 답변 줄바꿈 허용

css 수정에서 줄바꿈 허용 추가

.react-chatbot-kit-chat-bot-message {
  justify-content: left;
  width: fit-content;
  max-width: 700px;
  white-space: pre-line;  /* 줄바꿈 허용 */
}

728x90
반응형