update chatbot ui

src/css/toc.css

@@ -126,7 +126,7 @@
   position: fixed;
   z-index: 1000;
   right: 10px;
-  bottom: 100px;
+  bottom: 85px;
   width: 415px;
   height: 600px;
   /* overflow: hidden; */
@@ -183,6 +183,42 @@
   height: 420px;
   border-bottom: 1px solid var(--color-bwg-main);
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.chat .chat-body .message {
+  font-size: 13px;
+  max-width: 70%;
+  padding: 0.8rem;
+  border-radius: 6px;
+  word-break: break-word;
+  white-space: pre-wrap;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.chat .chat-body .message.user {
+  align-self: flex-end;
+  background-color: var(--color-bwg-main);
+  color:#fff;
+}
+
+.chat .chat-body .message.ai {
+  align-self: flex-start;
+  background-color: var(--color-blue-50);
+  text-align: left;
+}
+
+.chat .chat-body .chat-loader {
+  display: flex;
+  background-color: var(--color-blue-50);
+  align-items: center;
+  padding-left: 1.5rem;
+  width: 65px;
+  min-height: 50px;
+  border-radius: 6px;
 }
 
 .chat .chat-area {
@@ -216,7 +252,7 @@
   height: 70px;
 }
 
-.chat .chat-area .chat-btn-area .send-btn {
+#send-btn {
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -227,7 +263,7 @@
   background-color: var(--color-bwg-main);
 }
 
-.chat .chat-area .chat-btn-area .send-btn:active {
+#send-btn:active {
   opacity: 0.7;
   transition: 0.3ms ease;
 }
@@ -235,3 +271,17 @@
 .chat .chat-area .chat-btn-area .send-btn svg{
   margin-left: 2px;
 }
+
+.loader {
+  width: 10px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  animation: l5 1s infinite linear alternate;
+}
+
+@keyframes l5 {
+    0%  {box-shadow: 15px 0 #000, -15px 0 #0002;background: #000 }
+    33% {box-shadow: 15px 0 #000, -15px 0 #0002;background: #0002}
+    66% {box-shadow: 15px 0 #0002,-15px 0 #000; background: #0002}
+    100%{box-shadow: 15px 0 #0002,-15px 0 #000; background: #000 }
+}

src/js/08-chat.js

@@ -4,8 +4,13 @@
   const chatButton = document.querySelector('.sidebar .chat-btn')
   const chat = document.querySelector('.sidebar .chat')
   const chatIcon = document.querySelector('.sidebar .chat-btn svg')
+  const chatTextArea = document.getElementById('chat-input')
+  const sendButton = document.getElementById('send-btn')
+  const chatBody = document.querySelector('.sidebar .chat .chat-body')
+
+  let INIT = false
+  let isComposing = false
 
-  // 기본 아이콘과 변경할 아이콘의 SVG 경로 데이터
   const openIconPath = `
     <path stroke-linecap="round" stroke-linejoin="round"
       d="M7.188 10a.312.312 0 1 1-.625 0
@@ -22,6 +27,43 @@
       d="M6 18 18 6M6 6l12 12"></path>
   `
 
+  function initializeChat() {
+    if (!INIT) {
+      const messageItem = document.createElement('pre')
+      messageItem.className = 'message ai'
+      messageItem.textContent = '뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다. 무엇을 도와드릴까요?'
+      chatBody.appendChild(messageItem)
+      INIT = true
+
+      // Composition events
+      chatTextArea.addEventListener('compositionstart', () => {
+        isComposing = true
+      })
+
+      chatTextArea.addEventListener('compositionend', () => {
+        isComposing = false
+      })
+
+      // Keydown event
+      chatTextArea.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' && !e.shiftKey && !isComposing) {
+          e.preventDefault() // Prevent the default action of Enter (which is to create a new line)
+          const { value } = e.target
+          if (value.trim() !== '') {
+            addMessageToChatBody(value)
+            chatTextArea.value = ''
+          }
+        }
+      })
+
+      sendButton.addEventListener('click', () => {
+        const message = chatTextArea.value
+        addMessageToChatBody(message)
+        chatTextArea.value = ''
+      })
+    }
+  }
+
   chatButton.addEventListener('click', () => {
     chat.classList.toggle('show')
 
@@ -36,5 +78,37 @@
       chatIcon.setAttribute('stroke', '#0072ce')
       chatIcon.setAttribute('viewBox', '0 0 20 20')
     }
+
+    if (!INIT) {
+      initializeChat()
+    }
   })
+
+  function addMessageToChatBody(message) {
+    if (message.trim() !== '') {
+      const user = document.createElement('pre')
+      user.className = 'message user'
+      user.textContent = message
+      chatBody.appendChild(user)
+      chatBody.scrollTop = chatBody.scrollHeight
+
+      const chatLoader = document.createElement('div')
+      chatLoader.className = 'chat-loader'
+      const loader = document.createElement('div')
+      loader.className = 'loader'
+      chatLoader.appendChild(loader)
+      chatBody.appendChild(chatLoader)
+      chatBody.scrollTop = chatBody.scrollHeight
+
+      setTimeout(() => {
+        chatBody.removeChild(chatLoader)
+
+        const ai = document.createElement('pre')
+        ai.className = 'message ai'
+        ai.textContent = '지금은 답해드릴 수 없어요.'
+        chatBody.appendChild(ai)
+        chatBody.scrollTop = chatBody.scrollHeight
+      }, 3000)
+    }
+  }
 })()

src/partials/toc.hbs

@@ -13,18 +13,16 @@
         <span class="chat-logo-title sub">Bankware Global</span>
       </div>
     </div>
-    <div class="chat-body">
-
-    </div>
-    <div class="chat-area">
+    <div class="chat-body"></div>
+    <form class="chat-area">
       <textarea id="chat-input" placeholder="무엇을 도와드릴까요?"></textarea>
       <div class="chat-btn-area">
-        <div class="send-btn">
+        <div id="send-btn">
           <svg data-slot="icon" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20">
             <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z"></path>
           </svg>
         </div>
       </div>
-    </div>
+    </form>
   </div>
 </aside>