test chatbot

src/js/08-chat.js

@@ -171,6 +171,11 @@
 
       isLoading = true
 
+      const messageItem = document.createElement('pre')
+      messageItem.className = 'message ai'
+      chatBody.appendChild(messageItem)
+      chatBody.scrollTop = chatBody.scrollHeight
+
       const payload = {
         question: message,
         docsType: docType.toLowerCase(),
@@ -184,10 +189,27 @@
         body: JSON.stringify(payload),
       })
         .then((response) => {
-          console.log(response) // response 확인 테스트
+          const reader = response.body?.getReader()
+          const decoder = new TextDecoder('utf-8')
+
+          function readStream() {
+            return reader?.read().then(({ done, value }) => {
+              if (done) {
+                isLoading = false
+                return
+              }
+              const chunk = decoder.decode(value, { stream: true })
+              messageItem.textContent += chunk
+              chatBody.scrollTop = chatBody?.scrollHeight
+              return readStream()
+            })
+          }
+
+          return readStream()
         })
         .catch((error) => {
           console.error('Chatbot Error', error)
+          isLoading = false
         })
 
       // const chatLoader = document.createElement('div')