From f24d71c71cb9612ceeb2cce21de9e46880aeed6e Mon Sep 17 00:00:00 2001 From: sabaimran <65192171+sabaimran@users.noreply.github.com> Date: Sat, 13 Apr 2024 07:41:37 -0700 Subject: [PATCH] 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 | 30 ++++++++++++++- src/khoj/interface/web/agents.html | 39 ++++++++++++-------- src/khoj/interface/web/assets/icons/send.svg | 1 + src/khoj/interface/web/chat.html | 23 +++++++++++- src/khoj/interface/web/utils.html | 5 ++- 5 files changed, 76 insertions(+), 22 deletions(-) create mode 100644 src/khoj/interface/web/assets/icons/send.svg diff --git a/src/khoj/interface/web/agent.html b/src/khoj/interface/web/agent.html index 6e6a5ef7..71ace76f 100644 --- a/src/khoj/interface/web/agent.html +++ b/src/khoj/interface/web/agent.html @@ -24,7 +24,10 @@ Agent Avatar -
Personality
+
+ Personality + +

{{ agent.personality }}

@@ -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"; diff --git a/src/khoj/interface/web/agents.html b/src/khoj/interface/web/agents.html index 9408d2b0..21a5cda2 100644 --- a/src/khoj/interface/web/agents.html +++ b/src/khoj/interface/web/agents.html @@ -16,15 +16,15 @@
+
+

Agents

+ +
-
-

Agents

- -
{% for agent in agents %}
- +
{% 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; } } diff --git a/src/khoj/interface/web/assets/icons/send.svg b/src/khoj/interface/web/assets/icons/send.svg new file mode 100644 index 00000000..5605a3aa --- /dev/null +++ b/src/khoj/interface/web/assets/icons/send.svg @@ -0,0 +1 @@ + diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index 87d42fd6..c2f51ca5 100644 --- a/src/khoj/interface/web/chat.html +++ b/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"); diff --git a/src/khoj/interface/web/utils.html b/src/khoj/interface/web/utils.html index 82bc6518..f9372482 100644 --- a/src/khoj/interface/web/utils.html +++ b/src/khoj/interface/web/utils.html @@ -33,8 +33,9 @@ {% endif %}
{{ username }}
-
⚙️ Settings - 🔑 Logout + Settings + Help + Logout
{% endif %}