Improve the agents UX (#702)

- Make the chat buttons look more clickable
- Show agent name in new conversation message
- Add an icon to the CTA to send agent a message

src/khoj/interface/web/agent.html

@@ -24,7 +24,10 @@
                         <img id="agent-avatar" src="{{ agent.avatar }}" alt="Agent Avatar">
                         <input type="text" id="agent-name-input" value="{{ agent.name }}" {% if agent.creator_not_self %} disabled {% endif %}>
                     </div>
-                    <div id="agent-instructions">Personality</div>
+                    <div id="agent-instructions">
+                        Personality
+                        <button id="toggle-agent-tuning" onclick="toggleAgentTuning()">↓</button>
+                    </div>
                     <div id="agent-tuning">
                         <p>{{ agent.personality }}</p>
                     </div>
@@ -96,7 +99,7 @@
             padding: 10px;
             border: none;
             border-radius: 8px;
-            background-color: var(--primary);
+            background-color: var(--summer-sun);
             font: inherit;
             color: var(--main-text-color);
             cursor: pointer;
@@ -240,6 +243,17 @@
             border-radius: 50%;
         }
 
+        div#agent-tuning {
+            max-height: 1000px;
+            overflow: hidden;
+            transition: max-height 0.3s ease-in-out;
+        }
+
+        button#toggle-agent-tuning {
+            background-color: var(--primary) !important;
+            font-size: small !important;
+        }
+
         @media only screen and (min-width: 700px) {
             body {
                 grid-template-columns: auto min(70vw, 100%) auto;
@@ -266,6 +280,18 @@
             }
         }
 
+        function toggleAgentTuning() {
+            var agentTuning = document.getElementById('agent-tuning');
+            var toggleButton = document.getElementById('toggle-agent-tuning');
+            if (agentTuning.style.maxHeight === '0px') {
+                toggleButton.textContent = '↓';
+                agentTuning.style.maxHeight = '500px';
+            } else {
+                toggleButton.textContent = '↑';
+                agentTuning.style.maxHeight = '0px';
+            }
+        }
+
         // Show the agent-managed-by-admin paragraph if the agent is managed by the admin
         // compare agent.managed_by_admin as a lowercase string to "true"
         let isManagedByAdmin = "{{ agent.managed_by_admin }}".toLowerCase() === "true";

src/khoj/interface/web/agents.html

@@ -16,15 +16,15 @@
         <!-- {{ agents }} -->
 
         <div id="agents-list">
+            <div id="agents-header">
+                <h1 id="agents-list-title">Agents</h1>
+                <!-- <div id="create-agent">
+                    <a href="/agents/create"><svg class="new-convo-button" viewBox="0 0 35 35" fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M16 0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.032c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032zM23 15h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1z"></path>
+                    </svg></a>
+                </div> -->
+            </div>
             <div id="agents">
-                <div id="agents-header">
-                    <h1 id="agents-list-title">Agents</h1>
-                    <!-- <div id="create-agent">
-                        <a href="/agents/create"><svg class="new-convo-button" viewBox="0 0 35 35" fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M16 0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.032c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032zM23 15h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1z"></path>
-                        </svg></a>
-                    </div> -->
-                </div>
                 {% for agent in agents %}
                     <div class="agent">
                         <a href="/agent/{{ agent.slug }}">
@@ -39,7 +39,9 @@
                             <p>{{ agent.personality }}</p>
                         </div>
                         <div class="agent-info">
-                            <button onclick="openChat('{{ agent.slug }}')">Talk</button>
+                            <button onclick="openChat('{{ agent.slug }}')">
+                                <img class="send-icon" src="/static/assets/icons/send.svg" alt="Chat">
+                            </button>
                         </div>
                     </div>
                 {% endfor %}
@@ -104,10 +106,10 @@
         div.agent-info button {
             font-size: 24px;
             font-weight: bold;
-            padding: 10px;
+            padding: 4px;
             border: none;
             border-radius: 8px;
-            background-color: var(--primary);
+            background-color: var(--summer-sun);
             font: inherit;
             color: var(--main-text-color);
             cursor: pointer;
@@ -144,7 +146,8 @@
             align-items: center;
             padding: 20px;
             background-color: var(--frosted-background-color);
-            border-top: 1px solid var(--main-text-color);
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            border-radius: 8px;
         }
 
         div.agent-info {
@@ -153,14 +156,12 @@
 
         div#agents {
             display: grid;
-            grid-auto-flow: row;
             gap: 20px;
             padding: 20px;
-            background-color: var(--frosted-background-color);
-            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-            border-radius: 8px;
             width: 75%;
             margin-right: auto;
+            grid-auto-flow: row;
+            grid-template-columns: 1fr 1fr;
             margin-left: auto;
         }
 
@@ -169,6 +170,11 @@
             margin-left: 5px;
         }
 
+        img.send-icon {
+            width: 50px !important;
+            height: 50px !important;
+        }
+
         @media only screen and (min-width: 700px) {
             body {
                 grid-template-columns: auto min(70vw, 100%) auto;
@@ -183,6 +189,7 @@
                 width: 90%;
                 margin-right: auto;
                 margin-left: auto;
+                grid-template-columns: 1fr;
             }
 
         }

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

@@ -0,0 +1 @@
+<svg viewBox="-4.08 -4.08 32.16 32.16" fill="none" xmlns="http://www.w3.org/2000/svg" transform="rotate(0)" stroke="#000000" stroke-width="0.40800000000000003"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11 13L15.4564 8.5M11 13L6.38202 9.57695C5.7407 9.07229 5.94107 8.06115 6.72742 7.834L20 4L17.117 15.9189C16.9651 16.6489 16.0892 16.9637 15.5 16.5L13.5 15M11 13V18L13.5 15M11 13L13.5 15M7 20L9 18M4 19L8.5 14.5M4 15L6.5 12.5" stroke="#464455" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>

src/khoj/interface/web/chat.html

@@ -754,9 +754,11 @@ To get started, just start typing below. You can also type / to see a list of co
         function uploadDataForIndexing(file) {
             var dropzone = document.getElementById('chat-body');
 
-            if (!allowedExtensions.includes(file.type) && !allowedFileEndings.includes(file.name.split('.').pop())) {
+            if (!file || (!allowedExtensions.includes(file.type) && !allowedFileEndings.includes(file.name.split('.').pop()))) {
                 dropzone.classList.remove('dragover');
-                alert("Sorry, that file type is not yet supported");
+                if (file) {
+                    alert("Sorry, that file type is not yet supported");
+                }
                 var overlayText = document.getElementById("dropzone-overlay");
                 if (overlayText != null) {
                     overlayText.remove();
@@ -1090,6 +1092,7 @@ To get started, just start typing below. You can also type / to see a list of co
 
                     let agentMetadata = response.agent;
                     if (agentMetadata) {
+                        chatBody.innerHTML = "";
                         let agentName = agentMetadata.name;
                         let agentAvatar = agentMetadata.avatar;
                         let agentOwnedByUser = agentMetadata.isCreator;
@@ -1102,6 +1105,22 @@ To get started, just start typing below. You can also type / to see a list of co
                         agentAvatarElement.src = agentAvatar;
                         agentNameElement.textContent = agentName;
                         agentLinkElement.setAttribute("href", `/agent/${agentMetadata.slug}`);
+                        renderMessage(`Hello! I'm [${agentName}](/agent/${agentMetadata.slug}). I can:
+- 🧠 Answer general knowledge questions
+- 🔎 Get real-time answers from the internet
+- 📜 Find relevant info in your notes & documents
+- 💡 Be a sounding board for your ideas
+- 🌄 Generate images based on your context
+- 🎙️ Hear you talk (use the mic by the input box to say your message out loud)
+- 📚 Understand files you drag & drop here
+- 👩🏾‍🚀 Be tuned to your conversation needs via [agents](./agents)
+
+Get the Khoj [Desktop](https://khoj.dev/downloads), [Obsidian](https://docs.khoj.dev/clients/obsidian#setup), or [Emacs](https://docs.khoj.dev/clients/emacs#setup) app to keep your files in sync. You can manage all the files you've shared with me at any time by going to [your settings](/config/content-source/computer/).
+
+To get started, just start typing below. You can also type / to see a list of commands.
+
+**What's on your mind today?**
+                        `, "khoj")
 
                         if (agentOwnedByUser) {
                             let agentOwnedByUserElement = document.getElementById("agent-owned-by-user");

src/khoj/interface/web/utils.html

@@ -33,8 +33,9 @@
                     {% endif %}
                     <div id="khoj-nav-menu" class="khoj-nav-dropdown-content">
                         <div class="khoj-nav-username"> {{ username }} </div>
-                        <a id="settings-nav" class="khoj-nav" href="/config">⚙️ Settings</a>
-                        <a class="khoj-nav" href="/auth/logout">🔑 Logout</a>
+                        <a id="settings-nav" class="khoj-nav" href="/config">Settings</a>
+                        <a id="help-nav" class="khoj-nav" href="https://docs.khoj.dev" target="_blank">Help</a>
+                        <a class="khoj-nav" href="/auth/logout">Logout</a>
                     </div>
                 </div>
             {% endif %}