add chatLoader

src/js/08-chat.js

@@ -164,21 +164,25 @@
       chatBody.appendChild(user)
       chatBody.scrollTop = chatBody.scrollHeight
 
-      if (!docType) {
-        createAiMessage('가이드 도움에 필요한 제품을 선택해주세요.')
-        return
-      }
+      // if (!docType) {
+      //   createAiMessage('가이드 도움에 필요한 제품을 선택해주세요.')
+      //   return
+      // }
 
       isLoading = true
 
-      const messageItem = document.createElement('pre')
-      messageItem.className = 'message ai'
-      chatBody.appendChild(messageItem)
+      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 payload = {
         question: message,
-        docsType: docType.toLowerCase(),
+        // docsType: docType.toLowerCase(),
+        docsType: 'bxi',
       }
 
       fetch('https://docs.bxi.link/ask', {
@@ -192,9 +196,13 @@
           const reader = response.body?.getReader()
           const decoder = new TextDecoder('utf-8')
 
+          const messageItem = document.createElement('pre')
+          messageItem.className = 'message ai'
+
           function readStream () {
             return reader?.read().then(({ done, value }) => {
               if (done) {
+                chatBody.removeChild(chatLoader)
                 isLoading = false
                 return
               }
@@ -205,32 +213,16 @@
             })
           }
 
+          chatBody.appendChild(messageItem)
+          chatBody.scrollTop = chatBody.scrollHeight
+
           return readStream()
         })
         .catch((error) => {
           console.error('Chatbot Error', error)
+          chatBody.removeChild(chatLoader)
           isLoading = false
         })
-
-      // 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
-
-      //   isLoading = false
-      // }, 3000)
     }
   }