feat : 질문 했는데 해당 상품이 존재 할경우 챗봇에 노출 되도록

maie421 · Jan 3, 2024 · 2f88e89 · 2f88e89
1 parent 34f751c
commit 2f88e89
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 12 deletions.
diff --git a/web/static/js/chat_gpt.js b/web/static/js/chat_gpt.js
@@ -30,6 +30,38 @@ function addMessage(content, isUser) {
   chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
+function addProductElement(productData) {
+    let chatMessages = document.getElementById('chat-messages');
+    let newDiv = document.createElement('div');
+    newDiv.className = 'd-flex mb-4';
+    newDiv.style.width = '50px';
+    newDiv.style.marginLeft = '19px';
+
+    let discount_rate = Math.round(productData.discount_rate);
+    let increase_rate = Math.round(productData.increase_rate);
+
+    newDiv.innerHTML = `
+        <div class="col mb-3">
+            <a href="/product?pid=5071428226">
+                <div class="card h-100">
+                    <img class="card-img-top" src="${productData.image}" alt="${productData.name}">
+                    <div class="card-body p-4">
+                        <div class="text-center">
+                            <h5 class="fw-bolder two-line-text">${productData.name}</h5>
+                            ${discount_rate > 0 ? `<span class="discount-box" style="background-color: red;">▼ ${discount_rate}%</span>` : ''}
+                            ${increase_rate > 0 ? `<span class="discount-box" style="background-color: #14AF40;">▲ ${increase_rate}%</span>` : ''}
+                            ${productData.avg_price}원
+                        </div>
+                    </div>
+                </div>
+            </a>
+        </div>
+    `;
+
+    chatMessages.insertBefore(newDiv, chatMessages.firstChild);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
 async function fetchAIResponse(prompt) {
     const requestOptions = {
         method: 'POST',
@@ -91,14 +123,13 @@ sendButton.addEventListener('click', async () => {
     const productResponse = await fetchProductResponse(message);
     let productData = productResponse['products']['0'];
     if (productData !== undefined)
-        addMessage(`/product?pid=${productData['product_id']}`, false);
-        console.log(productData);
-});
-userInput.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') {
-        sendButton.click();
-    }
+        addProductElement(productData);
 });
+// userInput.addEventListener('keydown', (event) => {
+//     if (event.key === 'Enter') {
+//         sendButton.click();
+//     }
+// });
 
 document.getElementById('open-chat').addEventListener('click', function() {
    var chatContainer = document.getElementById('chat-container');

diff --git a/web/templates/aiSearch.html b/web/templates/aiSearch.html
@@ -1,13 +1,13 @@
 <section>
     <div class="container px-4 px-lg-5 d-flex justify-content-center">
         <div id="chat-container">
-             <div id="chat-messages">
-             </div>
-             <div id="user-input">
-                <input type="text" placeholder="메시지를 입력하세요..." />
-             <button>전송</button>
+            <div id="chat-messages">
             </div>
+            <div id="user-input">
+                <input type="text" placeholder="메시지를 입력하세요..."/>
+                <button>전송</button>
             </div>
         </div>
     </div>
+    </div>
 </section>