chatbot api test

src/css/toc.css

@@ -251,6 +251,29 @@
   border-radius: 6px;
 }
 
+.chat .chat-body > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 10px;
+  max-width: 70%;
+}
+
+.chat .chat-body > ul li {
+  cursor: pointer;
+  background-color: var(--color-blue-50);
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 700;
+  transition: 300ms ease;
+}
+
+.chat .chat-body > ul li:hover {
+  transform: translateY(-5px);
+}
+
 .chat .chat-area {
   display: flex;
   justify-content: center;

src/js/08-chat.js

@@ -12,6 +12,7 @@
   let INIT = false
   let isComposing = false
   let isLoading = false
+  let docType = '' // 선택된 제품 유형을 저장할 변수
 
   const openIconPath = `
     <path stroke-linecap="round" stroke-linejoin="round"
@@ -56,9 +57,25 @@
   function initializeChat () {
     if (!INIT) {
       const messageItem = document.createElement('pre')
+      const productList = document.createElement('ul') // ul 요소 생성
+      const products = ['BXM', 'BXCM', 'BXCP', 'BXI']
+
       messageItem.className = 'message ai'
-      messageItem.textContent = '뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다. 무엇을 도와드릴까요?'
+      messageItem.textContent = '뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다. 어떤 제품 가이드에 대한 질문을 하시겠습니까?'
       chatBody.appendChild(messageItem)
+
+      products.forEach(product => {
+        const productItem = document.createElement('li')
+        productItem.textContent = product
+        productItem.addEventListener('click', () => {
+          docType = product // 클릭한 제품명을 docType에 저장
+          createAiMessage(`${docType} 가이드에 대한 도움을 드리겠습니다.`)
+        })
+        productList.appendChild(productItem)
+      })
+
+      chatBody.appendChild(productList)
+
       INIT = true
 
       // Composition events
@@ -141,26 +158,59 @@
       chatBody.appendChild(user)
       chatBody.scrollTop = chatBody.scrollHeight
 
+      if (!docType) {
+        createAiMessage('가이드 도움에 필요한 제품을 선택해주세요.')
+        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
 
-      setTimeout(() => {
-        chatBody.removeChild(chatLoader)
+      const payload = {
+        question: message,
+        docsType: docType,
+      }
 
-        const ai = document.createElement('pre')
-        ai.className = 'message ai'
-        ai.textContent = '지금은 답해드릴 수 없어요.'
-        chatBody.appendChild(ai)
-        chatBody.scrollTop = chatBody.scrollHeight
+      fetch('/ask', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      })
+        .then((response) => {
+          console.log(response) // response 확인 테스트
+        })
+        .catch((error) => {
+          console.error('Chatbot Error', error)
+        })
 
-        isLoading = false
-      }, 3000)
+      // 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)
+    }
   }
+
+  function createAiMessage(message) {
+    const messageItem = document.createElement('pre')
+    messageItem.className = 'message ai'
+    messageItem.textContent = message
+    chatBody.appendChild(messageItem)
+    chatBody.scrollTop = chatBody.scrollHeight
   }
 })()