update chatbot

src/css/toc.css

@@ -307,7 +307,7 @@
 
 #send-btn {
   cursor: pointer;
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
   width: 40px;
@@ -316,11 +316,40 @@
   background-color: var(--color-bwg-main);
 }
 
-#send-btn:active {
+#stop-btn {
+  cursor: pointer;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--color-bwg-main);
+}
+
+#send-btn:active,
+#stop-btn:active {
   background-color: #005bb5;
   transition: 0.3ms ease;
 }
 
+#send-btn.active {
+  display: flex;
+}
+
+#stop-btn.active {
+  display: flex;
+}
+
+#stop-btn.active #send-btn {
+  display: none;
+}
+
+
+#send-btn.active #stop-btn {
+  display: none;
+}
+
 .chat .chat-area .chat-btn-area .send-btn svg {
   margin-left: 2px;
 }

src/js/08-chat.js

@@ -7,12 +7,15 @@
   const chatIcon = document.querySelector('.sidebar .chat-btn svg')
   const chatTextArea = document.getElementById('chat-input')
   const sendButton = document.getElementById('send-btn')
+  const stopButton = document.getElementById('stop-btn')
   const chatBody = document.querySelector('.sidebar .chat .chat-body')
   const expandButton = document.querySelector('#expand-btn svg')
 
   let INIT = false
   let isComposing = false
   let isLoading = false
+  let isWriting = false
+  let isPause = false
   const pathname = window.location.pathname.split('/')?.[3] || ''
   let docType = pathname !== 'swlab-docs' ? pathname : '' // 선택된 제품 유형을 저장할 변수
 
@@ -32,7 +35,6 @@
     d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12
     14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"></path>
   `
-
   const collapseIconPath = `
     <path
     d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L5.44 6.5H2.75a.75.75 0 0 0 0 1.5h4.5
@@ -44,7 +46,6 @@
     a.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 0v-2.69Z">
     </path>
   `
-
   const expandIconPath = `
     <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
@@ -95,7 +96,7 @@
 
       // Keydown event
       chatTextArea.addEventListener('keydown', function (e) {
-        if (e.key === 'Enter' && !e.shiftKey && !isComposing && !isLoading) {
+        if (e.key === 'Enter' && !e.shiftKey && !isComposing && !isLoading && !isWriting) {
           e.preventDefault() // Prevent the default action of Enter (which is to create a new line)
           const { value } = e.target
           if (value.trim() !== '') {
@@ -105,11 +106,17 @@
       })
 
       sendButton.addEventListener('click', () => {
-        if (!isLoading) {
+        if (!isLoading && !isWriting) {
           const message = chatTextArea.value
           handleUserMessage(message)
         }
       })
+
+      stopButton.addEventListener('click', () => {
+        isPause = true
+        stopButton.classList.remove('active')
+        sendButton.classList.add('active')
+      })
     }
   }
 
@@ -195,10 +202,15 @@
           const reader = response.body.getReader()
           const decoder = new TextDecoder('utf-8')
 
+          sendButton.classList.remove('active')
+          stopButton?.classList.add('active')
+
           const messageItem = document.createElement('pre')
           messageItem.className = 'message ai'
           chatBody.appendChild(messageItem) // 실제 메시지가 들어갈 자리
 
+          isWriting = true
+
           function readStream () {
             return reader.read().then(({ done, value }) => {
               if (done) {
@@ -232,11 +244,21 @@
     let index = 0
 
     function type () {
+      if (isPause) {
+        isPause = false
+        isWriting = false
+        return
+      }
+
       if (index < text.length) {
         element.textContent += text.charAt(index)
         chatBody.scrollTop = chatBody.scrollHeight
         index++
         setTimeout(type, speed) // 한글자씩 추가
+      } else {
+        sendButton.classList.add('active')
+        stopButton.classList.remove('active')
+        isWriting = false
       }
     }
 

src/partials/toc.hbs

@@ -22,9 +22,14 @@
     <form class="chat-area">
       <textarea id="chat-input" placeholder="무엇을 도와드릴까요?"></textarea>
       <div class="chat-btn-area">
-        <div id="send-btn">
-          <svg data-slot="icon" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20">
-            <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z"></path>
+        <div id="send-btn" class="active">
+          <svg data-slot="icon" fill="none" stroke-width="3" stroke="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"></path>
+          </svg>
+        </div>
+        <div id="stop-btn">
+          <svg data-slot="icon" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="18" height="18">
+            <path clip-rule="evenodd" fill-rule="evenodd" d="M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z"></path>
           </svg>
         </div>
       </div>