Improve showing status message on saving config via web interface

- Show success/failure status message much closer to the save button Previously status message was shown on top of the page, which wasn't always in view and wasn't easily seen - Improve the status message to more clearly show next steps on success
khoj-ai · Jun 24, 2023 · 946af08 · 946af08
1 parent 40d1abf
commit 946af08
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/khoj/interface/web/content_type_github_input.html b/src/khoj/interface/web/content_type_github_input.html
@@ -7,7 +7,6 @@ <h2 class="section-title">
             <span class="card-title-text">Github</span>
         </h2>
         <form>
-            <div id="success" style="display: none;"></div>
             <table>
                 <tr>
                     <td>
@@ -63,6 +62,7 @@ <h4>You probably don't need to edit these.</h4>
                 </tr>
             </table>
             <div class="section">
+                <div id="success" style="display: none;"></div>
                 <button id="submit" type="submit">Save</button>
             </div>
         </form>
@@ -96,7 +96,7 @@ <h4>You probably don't need to edit these.</h4>
         .then(response => response.json())
         .then(data => {
             if (data["status"] == "ok") {
-                document.getElementById("success").innerHTML = "✅ Successfully updated. Go to <a href='/config'>your settings</a> to regenerate your index.";
+                document.getElementById("success").innerHTML = "✅ Successfully updated. Click Configure on your <a href='/config'>settings page</a> to complete your Khoj setup.";
                 document.getElementById("success").style.display = "block";
             } else {
                 document.getElementById("success").innerHTML = "⚠️ Failed to update settings.";

diff --git a/src/khoj/interface/web/content_type_input.html b/src/khoj/interface/web/content_type_input.html
@@ -72,8 +72,10 @@ <h4>You probably don't need to edit these.</h4>
                     </td>
                 </tr>
             </table>
-            <div id="success" style="display: none;" ></div>
-            <button id="submit" type="submit">Save</button>
+            <div class="section">
+                <div id="success" style="display: none;" ></div>
+                <button id="submit" type="submit">Save</button>
+            </div>
         </form>
     </div>
 </div>
@@ -145,7 +147,7 @@ <h4>You probably don't need to edit these.</h4>
         .then(response => response.json())
         .then(data => {
             if (data["status"] == "ok") {
-                document.getElementById("success").innerHTML = "✅ Successfully updated. Go to <a href='/config'>your settings</a> to regenerate your index.";
+                document.getElementById("success").innerHTML = "✅ Successfully updated. Click Configure on your <a href='/config'>settings page</a> to complete your Khoj setup.";
                 document.getElementById("success").style.display = "block";
             } else {
                 document.getElementById("success").innerHTML = "⚠️ Failed to update settings.";

diff --git a/src/khoj/interface/web/processor_conversation_input.html b/src/khoj/interface/web/processor_conversation_input.html
@@ -7,7 +7,6 @@ <h2 class="section-title">
             <span class="card-title-text">Chat</span>
         </h2>
         <form id="config-form">
-            <div id="success" style="display: none;" ></div>
             <table>
                 <tr>
                     <td>
@@ -47,7 +46,10 @@ <h4>You probably don't need to edit these.</h4>
                     </td>
                 </tr>
             </table>
-            <button id="submit" type="submit">Save</button>
+            <div class="section">
+                <div id="success" style="display: none;" ></div>
+                <button id="submit" type="submit">Save</button>
+            </div>
         </form>
     </div>
 </div>
@@ -74,7 +76,7 @@ <h4>You probably don't need to edit these.</h4>
         .then(response => response.json())
         .then(data => {
             if (data["status"] == "ok") {
-                document.getElementById("success").innerHTML = "✅ Successfully updated. Go to <a href='/config'>your settings</a> to regenerate your index.";
+                document.getElementById("success").innerHTML = "✅ Successfully updated. Click Configure on your <a href='/config'>settings page</a> to complete your Khoj setup.";
                 document.getElementById("success").style.display = "block";
             } else {
                 document.getElementById("success").innerHTML = "⚠️ Failed to update settings.";