_includes/header.html

@@ -443,22 +443,25 @@ header h2 {
 
   <div class="CRChatbot">
     <button class="chatbot-toggler">
-      <span class="material-symbols-rounded">mode_comment</span>
+      <span class="material-symbols-rounded">search</span>
       <span class="material-symbols-outlined">close</span>
     </button>
     <div class="chatbot">
       <header>
-        <h2>Chatbot</h2>
+        <h2>Search</h2>
         <span class="close-btn material-symbols-outlined">close</span>
       </header>
       <ul class="chatbox">
         <li class="chat incoming">
-          <span class="material-symbols-outlined">smart_toy</span>
-          <p>Hi there 👋<br>How can I help you today?</p>
+          <span class="material-symbols-outlined"><img src="/assets/elements/icon_do.svg" style="height:25px; padding: 3px 3px 3px 3px;"></img></span>
+          <p>Search below for terms in the library of user-generated rules.
+            <br>You can also browse the templates." <a href="https://communityrule.info/templates/" target="_blank">templates.</a> 
+          </p>
+
         </li>
       </ul>
       <div class="chat-input">
-        <textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
+        <textarea placeholder="Enter keywords..." spellcheck="false" required></textarea>
         <span id="send-btn" class="material-symbols-rounded">send</span>
       </div>
     </div>
@@ -531,9 +534,13 @@ header h2 {
         fetch(apiUrl, requestOptions)
         .then(res => res.json())
         .then(data => {
-          console.log(data)
-          const community = data.community.replace(/\n/g, '').trim()
-          const responseMessage = `Following is the most suitable community rule we found based on description:\n${community} \n link: <a href="${data.link}" target="_blank">${data.link}</a>`;
+          // console.log(data)
+          let responseMessage = 'Here are the top 3 most suitable community rules we found based on your description:<br>';
+          data.forEach((item, index) => {
+            const community = item.community.replace(/\n/g, '').trim();
+            responseMessage += `${index + 1}. ${community}<br><a href="${item.link}" target="_blank">Learn more</a><br><br>`;
+          });
+
           messageElement.innerHTML = responseMessage;
 
         }).catch((err) => {