Fixes and Improvements Post Spring UX Release (#880)

- Auto focus on email input on login screen for smoother login experience - Use file icon associated with search page results. Improve search bar - Show logged in user's email in nav menu for context - Use previous icons with eyes for search, agents and automations items in nav menu
khoj-ai · Aug 5, 2024 · c23688e · c23688e
2 parents e9d6899 + a4388c5
commit c23688e
Show file tree

Hide file tree

Showing 7 changed files with 244 additions and 72 deletions.
diff --git a/src/interface/web/app/components/logo/khojLogo.tsx b/src/interface/web/app/components/logo/khojLogo.tsx
@@ -1,10 +1,11 @@
-export function KhojLogoType() {
+export function KhojLogoType({ className }: { className?: string }) {
+    const classes = className ?? "fill-zinc-950 dark:fill-zinc-300";
     return (
         <svg
             width="70"
             height="auto"
             viewBox="0 0 442 200"
-            className="fill-zinc-950 dark:fill-zinc-300"
+            className={`${classes}`}
             xmlns="http://www.w3.org/2000/svg"
         >
             <g clipPath="url(#clip0_45_75)">
@@ -45,13 +46,14 @@ export function KhojLogoType() {
     );
 }
 
-export function KhojLogo() {
+export function KhojLogo({ className }: { className?: string }) {
+    const classes = className ?? "fill-zinc-950 dark:fill-zinc-300";
     return (
         <svg
             width="200"
             height="200"
             viewBox="0 0 200 200"
-            className="fill-zinc-950 dark:fill-zinc-300"
+            className={`${classes}`}
             xmlns="http://www.w3.org/2000/svg"
         >
             <g clipPath="url(#clip0_45_75)">
@@ -87,3 +89,106 @@ export function KhojLogo() {
         </svg>
     );
 }
+
+export function KhojSearchLogo({ className }: { className?: string }) {
+    const classes = className ?? "w-6 h-6";
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            version="1.1"
+            viewBox="0 0 27 27"
+            fill="none"
+            className={classes}
+        >
+            <path
+                d="m 18.562765,17.147843 c 1.380497,-1.679442 2.307667,-4.013099 2.307667,-6.330999 C 20.870432,5.3951476 16.353958,1 10.782674,1 5.2113555,1 0.69491525,5.3951476 0.69491525,10.816844 c 0,5.421663 4.51644025,9.816844 10.08775875,9.816844 2.381867,0 4.570922,-0.803307 6.296712,-2.14673 0.508475,-0.508475 4.514633,4.192839 4.514633,4.192839 1.036377,1.008544 2.113087,-0.02559 1.07671,-1.034139 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="currentColor"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                fillOpacity="1"
+                strokeWidth="1.10519"
+                strokeDasharray="none"
+            />
+            <path
+                d="m 13.337351,9.3402647 0.05184,2.1532893"
+                stroke="currentColor"
+                strokeWidth="1.95702"
+                strokeLinecap="round"
+            />
+            <path
+                d="M 8.431347,9.2809457 8.483191,11.434235"
+                stroke="currentColor"
+                strokeWidth="1.95701"
+                strokeLinecap="round"
+            />
+        </svg>
+    );
+}
+
+export function KhojAutomationLogo({ className }: { className?: string }) {
+    const classes = className ?? "w-6 h-6";
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            version="1.1"
+            viewBox="0 0 27 27"
+            fill="none"
+            className={classes}
+        >
+            <path
+                d="m 20.503667,19.512812 c 1.498791,-1.721309 2.505409,-4.113142 2.505409,-6.488822 0,-5.556853 -4.903485,-10.0615654 -10.952165,-10.0615654 -6.0487172,0 -10.9521652,4.5047124 -10.9521652,10.0615654 0,5.556818 4.903448,10.061562 10.9521652,10.061562 2.585967,0 4.962599,-0.823331 6.836268,-2.200243 z m -8.446756,1.973405 c -4.7113005,0 -9.4138363,-4.134038 -9.4138363,-8.462227 0,-4.3281914 4.7025358,-8.4622628 9.4138363,-8.4622628 4.711301,0 9.4138,4.3425313 9.4138,8.6707228 0,4.328187 -4.702499,8.253767 -9.4138,8.253767 z"
+                fill="currentColor"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                fillOpacity="1"
+                strokeWidth="1.16584"
+                strokeDasharray="none"
+            />
+            <path
+                d="m 14.703831,11.557853 0.0553,2.175599"
+                stroke="currentColor"
+                strokeWidth="2.03174"
+                strokeLinecap="round"
+            />
+            <path
+                d="m 9.470316,11.497919 0.055305,2.175598"
+                stroke="currentColor"
+                strokeWidth="2.03172"
+                strokeLinecap="round"
+            />
+            <path
+                d="m 13.921987,2.0293778 c -1.700446,0.00578 -2.945437,0.011553 -3.53279,0.01733"
+                stroke="currentColor"
+                strokeWidth="1.69465"
+                strokeLinecap="round"
+            />
+            <path
+                d="m 21.395697,5.8423397 -1.28226,1.167146"
+                stroke="currentColor"
+                strokeWidth="2.03172"
+                strokeLinecap="round"
+            />
+        </svg>
+    );
+}
+
+export function KhojAgentLogo({ className }: { className?: string }) {
+    const classes = className ?? "w-6 h-6";
+    // Icon Source: AI by Palash Jain from <a href="https://thenounproject.com/browse/icons/term/ai/" target="_blank" title="AI Icons">Noun Project</a> (CC BY 3.0)
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            version="1.1"
+            viewBox="0 0 64 64"
+            fill="none"
+            className={classes}
+        >
+            <path
+                d="m 30.065286,2.6838408 c 0,-1.0516338 -0.536857,-0.2904639 -1.602626,-0.2904639 -1.065769,0 -2.256759,-0.7611699 -2.256759,0.2904639 v 4.7442407 c 0,0.019613 2.9e-4,0.03913 8.68e-4,0.058553 C 12.904724,8.2984689 2.0847457,17.487997 2.0847457,31.229969 c 0,3.541245 0.7282659,6.446979 2.1822891,8.775946 1.4616456,2.341058 3.5599931,3.944353 6.0242102,5.03229 4.798181,2.118273 11.240941,2.377047 17.844348,2.377047 6.603408,0 13.046168,-0.258774 17.844349,-2.377047 2.464217,-1.087937 4.562564,-2.691232 6.02421,-5.03229 1.454023,-2.328967 2.182289,-5.234701 2.182289,-8.775946 0,-13.741972 -10.819978,-22.9315001 -24.122023,-23.7433349 5.78e-4,-0.019422 8.68e-4,-0.03894 8.68e-4,-0.058553 z m -1.929693,8.5525432 c -12.474689,0 -22.1914625,8.103305 -22.1914625,19.993585 0,3.031408 0.6216504,5.19719 1.6087846,6.778396 0.9796083,1.568926 2.4136592,2.714368 4.3145029,3.553622 3.932038,1.735919 9.549855,2.044963 16.268175,2.044963 6.718321,0 12.336138,-0.309044 16.268176,-2.044963 1.900843,-0.839254 3.334894,-1.984696 4.314503,-3.553622 0.987134,-1.581206 1.608784,-3.746988 1.608784,-6.778396 0,-11.89028 -9.716773,-19.993585 -22.191463,-19.993585 z M 16.557439,22.66129 c 1.065769,0 1.929692,0.852488 1.929692,1.904151 v 5.712452 c 0,1.051663 -0.863923,1.904151 -1.929692,1.904151 -1.065769,0 -1.929692,-0.852488 -1.929692,-1.904151 v -5.712452 c 0,-1.051663 0.863923,-1.904151 1.929692,-1.904151 z m 22.191463,0 c 1.065769,0 1.929692,0.852488 1.929692,1.904151 v 5.712452 c 0,1.051663 -0.863923,1.904151 -1.929692,1.904151 -1.065769,0 -1.929693,-0.852488 -1.929693,-1.904151 v -5.712452 c 0,-1.051663 0.863924,-1.904151 1.929693,-1.904151 z M 8.2209746,53.949727 c 6.4574264,-1.16515 13.1131284,-1.774098 19.9146184,-1.774098 6.801587,0 13.457289,0.608948 19.914716,1.774098 1.048305,0.189177 2.053578,-0.496127 2.245293,-1.530557 0.191715,-1.034525 -0.502781,-2.026492 -1.551087,-2.215575 -6.685419,-1.206374 -13.573456,-1.836268 -20.608922,-1.836268 -7.035465,0 -13.923502,0.629894 -20.6088253,1.836268 -1.0484018,0.189083 -1.7428981,1.18105 -1.5511832,2.215575 0.1917149,1.03443 1.1969882,1.719734 2.2453901,1.530557 z"
+                fill="currentColor"
+                fillRule="evenodd"
+                clipRule="evenodd"
+            />
+        </svg>
+    );
+}
diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx
@@ -34,6 +34,7 @@ import {
     ArrowRight,
     UsersFour,
 } from "@phosphor-icons/react";
+import { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojLogo";
 
 export default function NavMenu() {
     const userData = useAuthenticatedData();
@@ -99,6 +100,12 @@ export default function NavMenu() {
                         )}
                     </DropdownMenuTrigger>
                     <DropdownMenuContent className="gap-2">
+                        <DropdownMenuItem className="w-full">
+                            <div className="flex flex-rows">
+                                <p className="font-semibold">{userData?.email}</p>
+                            </div>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
                         <DropdownMenuItem
                             onClick={() => setDarkMode(!darkMode)}
                             className="w-full cursor-pointer"
@@ -117,15 +124,15 @@ export default function NavMenu() {
                         <DropdownMenuItem>
                             <Link href="/agents" className="no-underline w-full">
                                 <div className="flex flex-rows">
-                                    <UsersFour className="w-6 h-6" />
+                                    <KhojAgentLogo className="w-6 h-6" />
                                     <p className="ml-3 font-semibold">Agents</p>
                                 </div>
                             </Link>
                         </DropdownMenuItem>
                         <DropdownMenuItem>
                             <Link href="/automations" className="no-underline w-full">
                                 <div className="flex flex-rows">
-                                    <Robot className="w-6 h-6" />
+                                    <KhojAutomationLogo className="w-6 h-6" />
                                     <p className="ml-3 font-semibold">Automations</p>
                                 </div>
                             </Link>
@@ -134,7 +141,7 @@ export default function NavMenu() {
                             <DropdownMenuItem>
                                 <Link href="/search" className="no-underline w-full">
                                     <div className="flex flex-rows">
-                                        <MagnifyingGlass className="w-6 h-6" />
+                                        <KhojSearchLogo className="w-6 h-6" />
                                         <p className="ml-3 font-semibold">Search</p>
                                     </div>
                                 </Link>
@@ -200,6 +207,12 @@ export default function NavMenu() {
                             )}
                         </MenubarTrigger>
                         <MenubarContent align="end" className="rounded-xl gap-2">
+                            <MenubarItem className="w-full">
+                                <div className="flex flex-rows">
+                                    <p className="font-semibold">{userData?.email}</p>
+                                </div>
+                            </MenubarItem>
+                            <MenubarSeparator className="dark:bg-white height-[2px] bg-black" />
                             <MenubarItem
                                 onClick={() => setDarkMode(!darkMode)}
                                 className="w-full hover:cursor-pointer"
@@ -218,15 +231,15 @@ export default function NavMenu() {
                             <MenubarItem>
                                 <Link href="/agents" className="no-underline w-full">
                                     <div className="flex flex-rows">
-                                        <UsersFour className="w-6 h-6" />
+                                        <KhojAgentLogo className="w-6 h-6" />
                                         <p className="ml-3 font-semibold">Agents</p>
                                     </div>
                                 </Link>
                             </MenubarItem>
                             <MenubarItem>
                                 <Link href="/automations" className="no-underline w-full">
                                     <div className="flex flex-rows">
-                                        <Robot className="w-6 h-6" />
+                                        <KhojAutomationLogo className="w-6 h-6" />
                                         <p className="ml-3 font-semibold">Automations</p>
                                     </div>
                                 </Link>
@@ -235,7 +248,7 @@ export default function NavMenu() {
                                 <MenubarItem>
                                     <Link href="/search" className="no-underline w-full">
                                         <div className="flex flex-rows">
-                                            <MagnifyingGlass className="w-6 h-6" />
+                                            <KhojSearchLogo className="w-6 h-6" />
                                             <p className="ml-3 font-semibold">Search</p>
                                         </div>
                                     </Link>

diff --git a/src/interface/web/app/search/page.tsx b/src/interface/web/app/search/page.tsx
@@ -20,8 +20,6 @@ import {
     ArrowRight,
     FileDashed,
     FileMagnifyingGlass,
-    Folder,
-    FolderOpen,
     GithubLogo,
     Lightbulb,
     LinkSimple,
@@ -31,6 +29,7 @@ import {
 } from "@phosphor-icons/react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
+import { getIconFromFilename } from "../common/iconUtils";
 
 interface AdditionalData {
     file: string;
@@ -87,14 +86,15 @@ function Note(props: NoteResultProps) {
     const fileName = isFileNameURL
         ? note.additional.heading
         : note.additional.file.split("/").pop();
+    const fileIcon = getIconFromFilename(fileName || ".txt", "h-4 w-4 inline mr-2");
 
     return (
         <Card className="bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border border-muted mb-4">
             <CardHeader>
-                <CardDescription className="p-1 border-muted border w-fit rounded-lg mb-2">
+                <CardTitle className="inline-flex gap-2">
                     {getNoteTypeIcon(note.additional.source)}
-                </CardDescription>
-                <CardTitle>{fileName}</CardTitle>
+                    {fileName}
+                </CardTitle>
             </CardHeader>
             <CardContent>
                 <div className="line-clamp-4 text-muted-foreground">{note.entry}</div>
@@ -118,8 +118,8 @@ function Note(props: NoteResultProps) {
                         {note.additional.file}
                     </a>
                 ) : (
-                    <div className="bg-muted p-1 text-sm rounded-lg text-muted-foreground">
-                        <FolderOpen className="inline m-2" />
+                    <div className="bg-muted p-2 text-sm rounded-lg text-muted-foreground">
+                        {fileIcon}
                         {note.additional.file}
                     </div>
                 )}
@@ -133,6 +133,8 @@ function focusNote(note: SearchResult) {
     const fileName = isFileNameURL
         ? note.additional.heading
         : note.additional.file.split("/").pop();
+    const fileIcon = getIconFromFilename(fileName || ".txt", "h-4 w-4 inline mr-2");
+
     return (
         <Card className="bg-secondary h-full shadow-sm rounded-lg bg-gradient-to-b from-background to-slate-50 dark:to-gray-950 border border-muted mb-4">
             <CardHeader>
@@ -150,7 +152,7 @@ function focusNote(note: SearchResult) {
                     </a>
                 ) : (
                     <div className="bg-muted p-3 text-sm rounded-lg text-muted-foreground flex items-center gap-2">
-                        <FolderOpen className="inline" />
+                        {fileIcon}
                         {note.additional.file}
                     </div>
                 )}
@@ -243,18 +245,21 @@ export default function Search() {
             <div className={`${styles.searchLayout}`}>
                 <div className="md:w-3/4 sm:w-full mx-auto pt-6 md:pt-8">
                     <div className="p-4 md:w-3/4 sm:w-full mx-auto">
-                        <div className="flex justify-between items-center border-2 border-muted p-2 gap-4 rounded-lg">
-                            <MagnifyingGlass className="inline m-2 h-4 w-4" />
+                        <div className="flex justify-between items-center border-2 border-muted p-1 gap-1 rounded-lg">
                             <Input
                                 autoFocus={true}
-                                className="border-none"
+                                className="border-none pl-4"
                                 onChange={(e) => setSearchQuery(e.currentTarget.value)}
                                 onKeyDown={(e) => e.key === "Enter" && search()}
                                 type="search"
                                 placeholder="Search Documents"
                             />
-                            <button className="px-4 rounded" onClick={() => search()}>
-                                Find
+                            <button
+                                className="px-2 gap-2 inline-flex items-center rounded border-l border-gray-300 hover:text-gray-500"
+                                onClick={() => search()}
+                            >
+                                <MagnifyingGlass className="h-4 w-4" />
+                                <span>Find</span>
                             </button>
                         </div>
                         {focusSearchResult && (