update chat.js

src/js/08-chat.js

@@ -169,15 +169,16 @@
         return
       }
 
-      isLoading = true
+      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;
 
-      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
+
+      isLoading = true
 
       const payload = {
         question: message,
@@ -197,35 +198,54 @@
 
           const messageItem = document.createElement('pre')
           messageItem.className = 'message ai'
+          chatBody.appendChild(messageItem) // 실제 메시지가 들어갈 자리
 
           function readStream () {
             return reader.read().then(({ done, value }) => {
+              console.log(done, value)
               if (done) {
-                chatBody.removeChild(chatLoader)
                 isLoading = false
                 return
               }
+
               const chunk = decoder.decode(value, { stream: true })
-              console.log(chunk)
-              messageItem.textContent += chunk
-              chatBody.scrollTop = chatBody?.scrollHeight
+              console.log('chunk >>>>> ', chunk)
+
+              // 로더 제거 후 메시지 표시
+              if (chatLoader) chatBody.removeChild(chatLoader);
+
+              typeEffect(messageItem, chunk, 30)
+              chatBody.scrollTop = chatBody.scrollHeight
+
               return readStream()
             })
           }
 
-          chatBody.appendChild(messageItem)
-          chatBody.scrollTop = chatBody.scrollHeight
-
           return readStream()
         })
         .catch((error) => {
           console.error('Chatbot Error', error)
-          chatBody.removeChild(chatLoader)
           isLoading = false
         })
     }
   }
 
+  // 타이핑 효과 함수
+  function typeEffect (element, text, speed = 50) {
+    let index = 0
+
+    function type () {
+      if (index < text.length) {
+        element.textContent += text.charAt(index)
+        chatBody.scrollTop = chatBody.scrollHeight
+        index++
+        setTimeout(type, speed) // 한글자씩 추가
+      }
+    }
+
+    type()
+  }
+
   function createAiMessage (message) {
     const messageItem = document.createElement('pre')
     messageItem.className = 'message ai'