Add icon for Automation feature. Replace old icons for delete, new

src/khoj/interface/web/assets/icons/automation.svg

@@ -0,0 +1,37 @@
+<svg
+   width="800px"
+   height="800px"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     d="m 19.402765,19.007843 c 1.380497,-1.679442 2.307667,-4.013099 2.307667,-6.330999 C 21.710432,7.2551476 17.193958,2.86 11.622674,2.86 6.0513555,2.86 1.5349153,7.2551476 1.5349153,12.676844 c 0,5.421663 4.5164402,9.816844 10.0877587,9.816844 2.381867,0 4.570922,-0.803307 6.296712,-2.14673 z m -7.780091,1.925408 c -4.3394583,0 -8.6708434,-4.033489 -8.6708434,-8.256407 0,-4.2229187 4.3313851,-8.2564401 8.6708434,-8.2564401 4.339458,0 8.670809,4.2369112 8.670809,8.4598301 0,4.222918 -4.331351,8.053017 -8.670809,8.053017 z"
+     fill="#1c274c"
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     fill-opacity="1"
+     stroke-width="1.10519"
+     stroke-dasharray="none" />
+  <path
+     d="m 14.177351,11.200265 0.05184,2.153289"
+     stroke="#1c274c"
+     stroke-width="1.95702"
+     stroke-linecap="round" />
+  <path
+     d="m 9.271347,11.140946 0.051844,2.153289"
+     stroke="#1c274c"
+     stroke-width="1.95701"
+     stroke-linecap="round" />
+  <path
+     d="m 13.557051,1.4687179 c -1.779392,0.00605 -3.082184,0.01209 -3.6968064,0.018135"
+     stroke="#1c274c"
+     stroke-width="1.77333"
+     stroke-linecap="round" />
+  <path
+     d="M 20.342466,5.7144363 19.140447,6.8696139"
+     stroke="#1c274c"
+     stroke-width="1.95701"
+     stroke-linecap="round" />
+</svg>

src/khoj/interface/web/assets/icons/copy-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z"/></svg>

src/khoj/interface/web/assets/icons/delete.svg

@@ -0,0 +1,26 @@
+<svg
+   width="800px"
+   height="800px"
+   viewBox="0 0 24 24"
+   fill="none"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     d="M 2.8842937,6.1960452 H 21.225537"
+     stroke="#000000"
+     stroke-width="2.29266"
+     stroke-linecap="round"
+     stroke-linejoin="round" />
+  <path
+     d="M 5.1769491,9.6350283 7.1273225,20.362133 c 0.1982115,1.090158 1.1476689,1.8825 2.2556753,1.8825 h 5.3437782 c 1.10804,0 2.057543,-0.792456 2.255743,-1.8825 L 18.932881,9.6350283"
+     stroke="#000000"
+     stroke-width="2.29266"
+     stroke-linecap="round"
+     stroke-linejoin="round" />
+  <path
+     d="m 8.6159322,3.9033897 c 0,-1.266199 1.0264559,-2.2926552 2.2926548,-2.2926552 h 2.292656 c 1.266234,0 2.292655,1.0264562 2.292655,2.2926552 V 6.1960452 H 8.6159322 Z"
+     stroke="#000000"
+     stroke-width="2.29266"
+     stroke-linecap="round" />
+</svg>

src/khoj/interface/web/assets/icons/microphone-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M192 0C139 0 96 43 96 96V256c0 53 43 96 96 96s96-43 96-96V96c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 89.1 66.2 162.7 152 174.4V464H120c-13.3 0-24 10.7-24 24s10.7 24 24 24h72 72c13.3 0 24-10.7 24-24s-10.7-24-24-24H216V430.4c85.8-11.7 152-85.3 152-174.4V216c0-13.3-10.7-24-24-24s-24 10.7-24 24v40c0 70.7-57.3 128-128 128s-128-57.3-128-128V216z"/></svg>

src/khoj/interface/web/assets/icons/new.svg

@@ -0,0 +1,23 @@
+<svg
+   shape-rendering="geometricPrecision"
+   text-rendering="geometricPrecision"
+   image-rendering="optimizeQuality"
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   viewBox="0 0 512 512"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <ellipse
+     style="fill:none;;stroke:#000000;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     cx="256.91525"
+     cy="255.90652"
+     rx="229.04117"
+     ry="228.01408" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="m 256.81156,119.9742 0.54637,272.93295" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:50;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 112.29371,257.08475 H 399.09612" />
+</svg>

src/khoj/interface/web/assets/icons/trash-solid.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>

src/khoj/interface/web/base_config.html

@@ -257,6 +257,14 @@
             color: var(--leaf);
         }
 
+        img.automation-action-icon {
+            width: 16px;
+            padding-bottom: 2px;
+        }
+        img.automation-row-icon {
+            max-width: 24px;
+        }
+
         img.configured-icon {
             max-width: 16px;
         }

src/khoj/interface/web/chat.html

@@ -2137,6 +2137,10 @@ To get started, just start typing below. You can also type / to see a list of co
         img.text-to-image {
             max-width: 60%;
         }
+        h3 > img.text-to-image {
+            height: 24px;
+            vertical-align: sub;
+        }
 
         #chat-footer {
             padding: 0;

src/khoj/interface/web/config.html

@@ -276,8 +276,10 @@
         <h2 class="section-title">Automations</h2>
         <div id="automations" class="api-settings">
             <div class="card-title-row">
-                <img class="card-icon" src="/static/assets/icons/key.svg" alt="Automations">
+                <img class="card-icon" src="/static/assets/icons/automation.svg" alt="Automations">
-                <h3 class="card-title">Automations</h3>
+                <h3 class="card-title">
+                    <span>Automations</span>
+                </h3>
             </div>
             <div class="card-description-row">
                 <p id="tasks-settings-card-description" class="card-description">Manage your automations</p>
@@ -296,6 +298,7 @@
             </table>
             <div class="card-action-row">
                 <button class="card-button happy" id="create-automation">
+                    <img class="automation-action-icon" src="/static/assets/icons/new.svg" alt="Automations">
                     Create Automation
                 </button>
             </div>
@@ -607,13 +610,18 @@
     function copyAPIKey(token) {
         // Copy API key to clipboard
         navigator.clipboard.writeText(token);
-        // Flash the API key copied message
+        // Flash the API key copied icon
-        const copyApiKeyButton = document.getElementById(`api-key-${token}`);
+        const apiKeyColumn = document.getElementById(`api-key-${token}`);
-        original_html = copyApiKeyButton.innerHTML
+        const original_html = apiKeyColumn.innerHTML;
+        const copyApiKeyButton = document.getElementById(`api-key-copy-${token}`);
         setTimeout(function() {
-            copyApiKeyButton.innerHTML = "✅ Copied!";
+            copyApiKeyButton.src = "/static/assets/icons/copy-button-success.svg";
+            setTimeout(() => {
+                copyApiKeyButton.src = "/static/assets/icons/copy-button.svg";
+            }, 1000);
+            apiKeyColumn.innerHTML = "✅ Copied!";
             setTimeout(function() {
-                copyApiKeyButton.innerHTML = original_html;
+                apiKeyColumn.innerHTML = original_html;
             }, 1000);
         }, 100);
     }
@@ -641,8 +649,8 @@
                 <td><b>${tokenName}</b></td>
                 <td id="api-key-${token}">${truncatedToken}</td>
                 <td>
-                    <img onclick="copyAPIKey('${token}')" class="configured-icon api-key-action enabled" src="/static/assets/icons/copy-solid.svg" alt="Copy API Key" title="Copy API Key">
+                    <img id="api-key-copy-${token}" onclick="copyAPIKey('${token}')" class="configured-icon api-key-action enabled" src="/static/assets/icons/copy-button.svg" alt="Copy API Key" title="Copy API Key">
-                    <img onclick="deleteAPIKey('${token}')" class="configured-icon api-key-action enabled" src="/static/assets/icons/trash-solid.svg" alt="Delete API Key" title="Delete API Key">
+                    <img id="api-key-delete-${token}" onclick="deleteAPIKey('${token}')" class="configured-icon api-key-action enabled" src="/static/assets/icons/delete.svg" alt="Delete API Key" title="Delete API Key">
                 </td>
             </tr>
         `;
@@ -684,7 +692,7 @@
                 <td><b>${automationObj.query_to_run}</b></td>
                 <td id="automation-${automationId}" title="${automationNextRun}">${automationObj.schedule}</td>
                 <td>
-                    <img onclick="deleteAutomation('${automationId}')" class="configured-icon api-key-action enabled" src="/static/assets/icons/trash-solid.svg" alt="Delete Automation" title="Delete Automation">
+                    <img onclick="deleteAutomation('${automationId}')" class="automation-row-icon api-key-action enabled" src="/static/assets/icons/delete.svg" alt="Delete Automation" title="Delete Automation">
                 </td>
             </tr>
         `;

src/khoj/routers/api_chat.py

@@ -407,8 +407,10 @@ async def websocket_endpoint(
             # Remove /automated_task prefix from inferred_query
             unprefixed_query_to_run = re.sub(r"^\/automated_task\s*", "", query_to_run)
             # Create the automation response
+            scheme = "http" if not websocket.url.is_secure else "https"
+            automation_icon_url = f"{scheme}://{websocket.url.netloc}/static/assets/icons/automation.svg"
             llm_response = f"""
-            ### 🕒 Automation
+            ### ![]({automation_icon_url}) Created Automation
 - Subject: **{subject}**
 - Query to Run: "{unprefixed_query_to_run}"
 - Schedule: `{schedule}`
@@ -661,8 +663,10 @@ async def chat(
         # Remove /automated_task prefix from inferred_query
         unprefixed_query_to_run = re.sub(r"^\/automated_task\s*", "", query_to_run)
         # Create the Automation response
+        scheme = "http" if not request.url.is_secure else "https"
+        automation_icon_url = f"{scheme}://{request.url.netloc}/static/assets/icons/automation.svg"
         llm_response = f"""
-        ### 🕒 Automation
+        ### ![]({automation_icon_url}) Created Automation
 - Subject: **{subject}**
 - Query to Run: "{unprefixed_query_to_run}"
 - Schedule: `{schedule}`