update ui

src/css/toc.css

@@ -150,6 +150,7 @@
 }
 
 .chat .chat-head {
+  position: relative;
   display: flex;
   align-items: center;
   padding: 0 1.5rem;
@@ -158,6 +159,110 @@
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   color: var(--color-white);
+  margin-bottom: 40px;
+}
+
+.chat .chat-head .model {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  width: 100%;
+  height: 50px;
+  background-color: #fff;
+  top: 80px;
+  left: 0;
+  padding: 0 1rem;
+}
+
+#model-toggle {
+  color: var(--color-bwg-main);
+  font-weight: 600;
+  background: url(../img/chevron.svg) no-repeat;
+  background-position: right 0.5rem top 50%;
+  background-size: auto 0.65em;
+  outline: none;
+  border: none;
+  line-height: inherit;
+  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 {
+  background-color: #f1f1f1;
+}
+
+#model-popover {
+  inset: auto;
+  list-style: none;
+  border-radius: 6px;
+  border: none;
+  font-weight: 500;
+  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);
+}
+
+#model-popover li {
+  font-size: 14px;
+  padding: 0.5rem;
+  cursor: pointer;
+  border-radius: 6px;
+}
+
+#model-popover li:hover {
+  background-color: #f1f1f1;
+}
+
+.chat-head .model .tooltip {
+  position: relative;
+  cursor: pointer;
+  line-height: 10px;
+}
+
+.chat-head .model .tooltip .tooltip-text {
+  visibility: hidden;
+  width: 280px;
+  background-color: #fff;
+  color: #222;
+  text-align: center;
+  border-radius: 6px;
+  padding: 10px;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: normal;
+  box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
+
+  position: absolute;
+  z-index: 999;
+  bottom: 130%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  /* Fade in tooltip */
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.chat-head .model .tooltip .tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #fff transparent transparent transparent;
+}
+
+.chat-head .model .tooltip:hover .tooltip-text {
+  cursor: pointer;
+  visibility: visible;
+  opacity: 1;
 }
 
 .chat-logo {

src/js/08-chat.js

@@ -17,7 +17,7 @@
   let isWriting = false
   let isPause = false
   const pathname = window.location.pathname.split('/')?.[3] || ''
-  let docType = pathname !== 'swlab-docs' ? pathname : '' // 선택된 제품 유형을 저장할 변수
+  let docType = '' // 선택된 제품 유형을 저장할 변수
 
   const openIconPath = `
     <path stroke-linecap="round" stroke-linejoin="round"
@@ -57,31 +57,29 @@
     </path>
   `
 
-  function initializeChat () {
-    if (!INIT) {
-      const messageItem = document.createElement('pre')
-      const productList = document.createElement('ul') // ul 요소 생성
-      const products = ['BXM', 'BXCM', 'BXCP', 'BXI']
+  document.querySelectorAll('#model-popover li').forEach((item) => {
+    item.addEventListener('click', function () {
+      const selectedProduct = this.textContent
+      docType = selectedProduct
 
-      messageItem.className = 'message ai'
-      messageItem.textContent = pathname === 'swlab-docs'
-        ? '뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다. 어떤 제품 가이드에 대한 질문을 하시겠습니까?'
-        : `뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다. ${pathname.toUpperCase()}제품 가이드에 대한 질문을 해주세요.`
-      chatBody.appendChild(messageItem)
+      const modelToggleButton = document.getElementById('model-toggle')
+      modelToggleButton.textContent = selectedProduct
+
+      const popover = document.getElementById('model-popover')
+      if (popover) {
+        popover.hidePopover()
+      }
 
-      if (pathname === 'swlab-docs') {
-        products.forEach((product) => {
-          const productItem = document.createElement('li')
-          productItem.textContent = product
-          productItem.addEventListener('click', () => {
-            docType = product // 클릭한 제품명을 docType에 저장
-            createAiMessage(`${docType} 가이드에 대한 도움을 드리겠습니다.`)
+      createAiMessage(`${docType} 매뉴얼 가이드에 대한 도움을 드리겠습니다.`)
     })
-          productList.appendChild(productItem)
   })
 
-        chatBody.appendChild(productList)
-      }
+  function initializeChat () {
+    if (!INIT) {
+      const messageItem = document.createElement('pre')
+      messageItem.className = 'message ai'
+      messageItem.textContent = '제품 매뉴얼에 대해 도움을 드리는 뱅크웨어글로벌 소프트웨어 연구소 챗봇입니다. 무엇을 도와드릴까요?'
+      chatBody.appendChild(messageItem)
 
       INIT = true
 
@@ -172,7 +170,7 @@
       chatBody.scrollTop = chatBody.scrollHeight
 
       if (!docType) {
-        createAiMessage('가이드 도움에 필요한 제품을 선택해주세요.')
+        createAiMessage('매뉴얼 가이드 도움에 필요한 제품을 선택해주세요.')
         return
       }
 
@@ -268,8 +266,9 @@
   function createAiMessage (message) {
     const messageItem = document.createElement('pre')
     messageItem.className = 'message ai'
-    messageItem.textContent = message
     chatBody.appendChild(messageItem)
+
+    typeEffect(messageItem, message, 30)
     chatBody.scrollTop = chatBody.scrollHeight
   }
 })()

src/partials/toc.hbs

@@ -17,6 +17,21 @@
           <path d="m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22 13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"></path>
         </svg>
       </div>
+      <div class="model">
+        <button id="model-toggle" popovertarget="model-popover">Products</button>
+        <ul id="model-popover" popover>
+          <li>BXM</li>
+          <li>BCXM</li>
+          <li>BXCP</li>
+          <li>BXI</li>
+        </ul>
+        <div class="tooltip">
+          <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>
+        </div>
+      </div>
     </div>
     <div class="chat-body"></div>
     <form class="chat-area">