update chatbot & ui

src/css/toc.css

@@ -173,7 +173,21 @@
   left: 0;
   padding: 0 1rem;
 }
-/* stylelint-disable */
+
+.chat .chat-head .model .backdrop {
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.chat .chat-head .model .backdrop.is-active {
+  display: block;
+}
+
 #model-toggle {
   color: var(--color-bwg-main);
   font-weight: 600;
@@ -186,7 +200,6 @@
   padding: 0.5rem 1.5rem 0.5rem 0.75rem;
   border-radius: 0.5rem;
   transition: all 0.15s ease-in-out;
-  anchor-name: --anchor-el;
 }
 
 #model-toggle:hover {
@@ -194,7 +207,7 @@
 }
 
 #model-popover {
-  inset: auto;
+  display: none;
   list-style: none;
   border-radius: 6px;
   border: none;
@@ -202,15 +215,22 @@
   width: 115px;
   box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
   position: absolute;
-  position-anchor: --anchor-el;
-  top: anchor(bottom);
-  left: anchor(left);
+  top: 45px;
+  background-color: #fff;
+  padding: 0.25em;
+  margin: 0;
+  z-index: 3;
+}
+
+#model-popover.show {
+  display: block;
 }
 
 #model-popover li {
   font-size: 14px;
   padding: 0.5rem;
   cursor: pointer;
+  color: #222;
   border-radius: 6px;
 }
 
@@ -324,7 +344,7 @@
 }
 
 .chat .chat-body .message {
-  font-size: 13px;
+  font-size: 16px;
   max-width: 70%;
   padding: 0.8rem;
   border-radius: 6px;

src/js/08-chat.js

@@ -10,6 +10,9 @@
   const stopButton = document.getElementById('stop-btn')
   const chatBody = document.querySelector('.sidebar .chat .chat-body')
   const expandButton = document.querySelector('#expand-btn svg')
+  const productButton = document.getElementById('model-toggle')
+  const productList = document.getElementById('model-popover')
+  const backdrop = document.querySelector('.model .backdrop')
 
   let INIT = false
   let isComposing = false
@@ -56,21 +59,90 @@
     </path>
   `
 
+  chatButton.addEventListener('click', () => {
+    chat.classList.toggle('show')
+
+    if (chat.classList.contains('show')) {
+      chat.classList.add('expand')
+      chatIcon.innerHTML = closeIconPath
+      chatIcon.setAttribute('fill', 'none')
+      chatIcon.setAttribute('stroke', '#fff')
+      chatIcon.setAttribute('viewBox', '0 -1 24 24')
+
+      expandButton.classList.add('expand')
+      expandButton.innerHTML = collapseIconPath
+      expandButton.setAttribute('fill', '#fff')
+      expandButton.setAttribute('viewBox', '0 0 20 20')
+    } else {
+      chatIcon.innerHTML = openIconPath
+      chatIcon.setAttribute('fill', '#fff')
+      chatIcon.setAttribute('stroke', '#0072ce')
+      chatIcon.setAttribute('viewBox', '0 0 20 20')
+
+      expandButton.classList.remove('expand')
+      expandButton.innerHTML = expandIconPath
+      expandButton.setAttribute('fill', '#fff')
+      expandButton.setAttribute('viewBox', '0 0 20 20')
+    }
+
+    if (!INIT) {
+      initializeChat()
+    }
+  })
+
+  expandButton.addEventListener('click', () => {
+    expandButton.classList.toggle('expand')
+
+    if (expandButton.classList.contains('expand')) {
+      expandButton.innerHTML = collapseIconPath
+      expandButton.setAttribute('fill', '#fff')
+      expandButton.setAttribute('viewBox', '0 0 20 20')
+      chat.classList.add('expand')
+    } else {
+      expandButton.innerHTML = expandIconPath
+      expandButton.setAttribute('fill', '#fff')
+      expandButton.setAttribute('viewBox', '0 0 20 20')
+      chat.classList.remove('expand')
+    }
+  })
+
+  productButton.addEventListener('click', () => {
+    if (productList.classList.contains('show')) {
+      productList.classList.remove('show')
+      backdrop.classList.remove('is-active')
+    } else {
+      productList.classList.add('show')
+      backdrop?.classList.add('is-active')
+    }
+  })
+
+  backdrop.addEventListener('click', () => {
+    if (backdrop.classList.contains('is-active')) {
+      productList.classList.remove('show')
+      backdrop.classList.remove('is-active')
+    } else {
+      productList.classList.add('show')
+      backdrop.classList.add('is-active')
+    }
+  })
+
   document.querySelectorAll('#model-popover li').forEach((item) => {
     item.addEventListener('click', function () {
       const selectedProduct = this.textContent
-      docType = selectedProduct
+      docType = selectedProduct === '전체' ? 'all' : selectedProduct
+      productList.classList.remove('show')
+      backdrop.classList.remove('is-active')
 
-      const modelToggleButton = document.getElementById('model-toggle')
-      modelToggleButton.textContent = selectedProduct
+      productButton.textContent = selectedProduct
 
-      const popover = document.getElementById('model-popover')
-      if (popover) {
-        popover.hidePopover()
-      }
+      const message = docType === 'all'
+        ? '전체 제품을 대상으로 매뉴얼 가이드를 제공해 드리겠습니다. 제품 선택 시 더 정확한 정보를 확인할 수 있습니다.'
+        : `${docType.toUpperCase()} 매뉴얼 가이드에 대한 도움을 드리겠습니다.`
 
-      isWriting = true
-      createAiMessage(`${docType} 매뉴얼 가이드에 대한 도움을 드리겠습니다.`)
+      if (!isWriting && !isLoading) {
+        isWriting = true
+        createAiMessage(message)
+      }
     })
   })
 
@@ -78,7 +150,7 @@
     if (!INIT) {
       const messageItem = document.createElement('pre')
       messageItem.className = 'message ai'
-      messageItem.textContent = '제품 매뉴얼에 대해 도움을 드리는 뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다. 무엇을 도와드릴까요?'
+      messageItem.textContent = '제품 매뉴얼 가이드에 대한 도움을 드리겠습니다. 제품 선택 시 더 정확한 답변을 제공해 드립니다.'
       chatBody.appendChild(messageItem)
 
       INIT = true
@@ -118,42 +190,6 @@
     }
   }
 
-  chatButton.addEventListener('click', () => {
-    chat.classList.toggle('show')
-
-    if (chat.classList.contains('show')) {
-      chatIcon.innerHTML = closeIconPath
-      chatIcon.setAttribute('fill', 'none')
-      chatIcon.setAttribute('stroke', '#fff')
-      chatIcon.setAttribute('viewBox', '0 -1 24 24')
-    } else {
-      chatIcon.innerHTML = openIconPath
-      chatIcon.setAttribute('fill', '#fff')
-      chatIcon.setAttribute('stroke', '#0072ce')
-      chatIcon.setAttribute('viewBox', '0 0 20 20')
-    }
-
-    if (!INIT) {
-      initializeChat()
-    }
-  })
-
-  expandButton.addEventListener('click', () => {
-    expandButton.classList.toggle('expand')
-
-    if (expandButton.classList.contains('expand')) {
-      expandButton.innerHTML = collapseIconPath
-      expandButton.setAttribute('fill', '#fff')
-      expandButton.setAttribute('viewBox', '0 0 20 20')
-      chat.classList.add('expand')
-    } else {
-      expandButton.innerHTML = expandIconPath
-      expandButton.setAttribute('fill', '#fff')
-      expandButton.setAttribute('viewBox', '0 0 20 20')
-      chat.classList.remove('expand')
-    }
-  })
-
   function handleUserMessage (message) {
     if (message.trim() !== '') {
       addMessageToChatBody(message)
@@ -169,12 +205,6 @@
       chatBody.appendChild(user)
       chatBody.scrollTop = chatBody.scrollHeight
 
-      if (!docType) {
-        isWriting = true
-        createAiMessage('매뉴얼 가이드 도움에 필요한 제품을 선택해주세요.')
-        return
-      }
-
       const chatLoader = document.createElement('div')
       chatLoader.className = 'chat-loader'
       const loader = document.createElement('div')

src/partials/toc.hbs

@@ -18,10 +18,12 @@
         </svg>
       </div>
       <div class="model">
-        <button id="model-toggle" popovertarget="model-popover">Products</button>
-        <ul id="model-popover" popover>
+        <div class="backdrop"></div>
+        <button id="model-toggle">전체</button>
+        <ul id="model-popover">
+          <li>전체</li>
           <li>BXM</li>
-          <li>BCXM</li>
+          <li>BXCM</li>
           <li>BXCP</li>
           <li>BXI</li>
         </ul>
@@ -29,7 +31,7 @@
           <svg class="w-[22px] h-[22px] text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
             <path stroke="#7d7d7d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
           </svg>
-          <span class="tooltip-text">제품 매뉴얼에 대한 더 정확한 답변을 위해 제품 선택이 필요합니다.</span>
+          <span class="tooltip-text">제품 선택 시 더 정확한 매뉴얼 가이드를 제공해드립니다.</span>
         </div>
       </div>
     </div>