Add a notification banner to show temporary messages

src/khoj/interface/web/base_config.html

@@ -296,6 +296,20 @@
             height: 32px;
         }
 
+        div#notification-banner {
+            background-color: var(--primary);
+            border: 1px solid var(--primary-hover);
+            padding: 8px;
+            box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
+        }
+
+        div#notification-banner-parent {
+            position: fixed;
+            right: 0;
+            bottom: 0;
+            margin: 20px;
+        }
+
         select#search-models,
         select#chat-models {
             margin-bottom: 0;

src/khoj/interface/web/config.html

@@ -150,7 +150,7 @@
                 <div class="card-title-row">
                     <img class="card-icon" src="/static/assets/icons/matrix_blob.svg" alt="Chat">
                     <h3 class="card-title">
-                        Text Model
+                        Language
                     </h3>
                 </div>
                 <div class="card-description-row">
@@ -260,6 +260,10 @@
     {% endif %}
     <div class="section"></div>
     </div>
+    <div class="section" id="notification-banner-parent">
+        <div id="notification-banner"></div>
+    </div>
+</div>
 <script>
 
     function updateChatModel() {
@@ -307,6 +311,13 @@
                 saveSearchModelButton.innerHTML = "Error";
                 saveSearchModelButton.disabled = false;
             }
+
+            let notificationBanner = document.getElementById("notification-banner");
+            notificationBanner.innerHTML = "When updating the search model, be sure to delete all your data and reindex.";
+            notificationBanner.style.display = "block";
+            setTimeout(function() {
+                notificationBanner.style.display = "none";
+            }, 5000);
         })
     };