From dc17272f7098e7fc7369e4c3b58b91ee9e04021a Mon Sep 17 00:00:00 2001 From: sabaimran Date: Sun, 22 Dec 2024 09:01:09 -0800 Subject: [PATCH 1/6] Fix some spacing in the nav menu --- src/interface/web/app/components/navMenu/navMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx index 7e780146..d6bfd85c 100644 --- a/src/interface/web/app/components/navMenu/navMenu.tsx +++ b/src/interface/web/app/components/navMenu/navMenu.tsx @@ -106,13 +106,13 @@ export default function NavMenu({ sideBarIsOpen }: NavMenuProps) { > - {userData?.username[0].toUpperCase()} + {userData.username[0].toUpperCase()} {sideBarIsOpen && ( <>

{userData?.username}

- + )} From 9f84f5dcc713ce35032f213e6dcbb561dadb7f40 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Sun, 22 Dec 2024 09:18:05 -0800 Subject: [PATCH 2/6] Give more breathing space to the sidebar footer --- src/interface/web/app/components/appSidebar/appSidebar.tsx | 2 +- src/interface/web/app/layout.tsx | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/interface/web/app/components/appSidebar/appSidebar.tsx b/src/interface/web/app/components/appSidebar/appSidebar.tsx index 811eb799..45aba3cf 100644 --- a/src/interface/web/app/components/appSidebar/appSidebar.tsx +++ b/src/interface/web/app/components/appSidebar/appSidebar.tsx @@ -68,7 +68,7 @@ export function AppSidebar(props: AppSidebarProps) { useSidebar(); return ( - + diff --git a/src/interface/web/app/layout.tsx b/src/interface/web/app/layout.tsx index 8fb49fc1..3d2cd4f7 100644 --- a/src/interface/web/app/layout.tsx +++ b/src/interface/web/app/layout.tsx @@ -3,9 +3,6 @@ import { noto_sans, noto_sans_arabic } from "@/app/fonts"; import "./globals.css"; import { ContentSecurityPolicy } from "./common/layoutHelper"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; -import { AppSidebar } from "@/app/components/appSidebar/appSidebar"; - export const metadata: Metadata = { title: "Khoj AI - Ask Anything", description: From 60f80548a47bc66a999a16cfc4728c3e8e3e331c Mon Sep 17 00:00:00 2001 From: sabaimran Date: Sun, 22 Dec 2024 09:21:40 -0800 Subject: [PATCH 3/6] Remove unused span text --- src/interface/web/app/components/appSidebar/appSidebar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/interface/web/app/components/appSidebar/appSidebar.tsx b/src/interface/web/app/components/appSidebar/appSidebar.tsx index 45aba3cf..590fb842 100644 --- a/src/interface/web/app/components/appSidebar/appSidebar.tsx +++ b/src/interface/web/app/components/appSidebar/appSidebar.tsx @@ -82,7 +82,6 @@ export function AppSidebar(props: AppSidebarProps) { - Khoj )} From 0fefbac89f9fba954e22305661571318e48a6a50 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Sun, 22 Dec 2024 09:58:21 -0800 Subject: [PATCH 4/6] Improve sidebar experience for not logged in state --- .../allConversations/allConversations.tsx | 12 +++---- .../app/components/appSidebar/appSidebar.tsx | 36 +++++++++++++++++-- .../web/app/components/navMenu/navMenu.tsx | 2 +- 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/interface/web/app/components/allConversations/allConversations.tsx b/src/interface/web/app/components/allConversations/allConversations.tsx index 29c43e48..52c6806e 100644 --- a/src/interface/web/app/components/allConversations/allConversations.tsx +++ b/src/interface/web/app/components/allConversations/allConversations.tsx @@ -883,13 +883,9 @@ const fetchChatHistory = async (url: string) => { }; export const useChatSessionsFetchRequest = (url: string) => { - const { data, error } = useSWR(url, fetchChatHistory); + const { data, isLoading, error } = useSWR(url, fetchChatHistory); - return { - data, - isLoading: !error && !data, - isError: error, - }; + return { data, isLoading, error }; }; interface SidePanelProps { @@ -965,10 +961,12 @@ export default function AllConversations(props: SidePanelProps) { return ( - Conversations
{authenticatedData && ( <> + + Conversations +
diff --git a/src/interface/web/app/components/appSidebar/appSidebar.tsx b/src/interface/web/app/components/appSidebar/appSidebar.tsx index 590fb842..d80314b9 100644 --- a/src/interface/web/app/components/appSidebar/appSidebar.tsx +++ b/src/interface/web/app/components/appSidebar/appSidebar.tsx @@ -20,9 +20,12 @@ import { Gear } from "@phosphor-icons/react/dist/ssr"; import { Plus } from "@phosphor-icons/react"; import { useEffect, useState } from "react"; import AllConversations from "../allConversations/allConversations"; -import NavMenu from "../navMenu/navMenu"; +import FooterMenu from "../navMenu/navMenu"; import { useSidebar } from "@/components/ui/sidebar"; import { useIsMobileWidth } from "@/app/common/utils"; +import { UserPlusIcon } from "lucide-react"; +import { useAuthenticatedData } from "@/app/common/auth"; +import LoginPrompt from "../loginPrompt/loginPrompt"; // Menu items. const items = [ @@ -63,10 +66,19 @@ interface AppSidebarProps { export function AppSidebar(props: AppSidebarProps) { const isMobileWidth = useIsMobileWidth(); + const { data, isLoading, error } = useAuthenticatedData(); const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } = useSidebar(); + const [showLoginPrompt, setShowLoginPrompt] = useState(false); + + useEffect(() => { + if (!isLoading && !data) { + setShowLoginPrompt(true); + } + }, [isLoading, data]); + return ( @@ -89,9 +101,29 @@ export function AppSidebar(props: AppSidebarProps) { + {showLoginPrompt && ( + setShowLoginPrompt(isOpen)} + isMobileWidth={isMobileWidth} + /> + )} + {!isLoading && !data && ( + + setShowLoginPrompt(true)} + > +
+ + Sign up to get started +
+ + + )} {items.map((item) => ( @@ -116,7 +148,7 @@ export function AppSidebar(props: AppSidebarProps) { - + ); diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx index d6bfd85c..434a9e2e 100644 --- a/src/interface/web/app/components/navMenu/navMenu.tsx +++ b/src/interface/web/app/components/navMenu/navMenu.tsx @@ -43,7 +43,7 @@ interface NavMenuProps { sideBarIsOpen: boolean; } -export default function NavMenu({ sideBarIsOpen }: NavMenuProps) { +export default function FooterMenu({ sideBarIsOpen }: NavMenuProps) { const { data: userData, error: authenticationError, From 7032ccf130e824e55e8b608745a42ba341a4ba61 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Sun, 22 Dec 2024 10:01:15 -0800 Subject: [PATCH 5/6] Show create agent button when not logged in agents page --- src/interface/web/app/agents/page.tsx | 60 ++++++++++++++------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx index 079006f7..a31c2901 100644 --- a/src/interface/web/app/agents/page.tsx +++ b/src/interface/web/app/agents/page.tsx @@ -300,35 +300,37 @@ export default function Agents() {

Agents

- {authenticatedData && ( - - )} +
{showLoginPrompt && ( From 798837378f48783e65e7405603004d7024efa21f Mon Sep 17 00:00:00 2001 From: sabaimran Date: Sun, 22 Dec 2024 11:02:50 -0800 Subject: [PATCH 6/6] Improve mobile friendliness and highlight missing necessary data --- src/interface/web/app/agents/page.tsx | 6 ++- .../app/components/agentCard/agentCard.tsx | 38 ++++++++++--------- 2 files changed, 25 insertions(+), 19 deletions(-) diff --git a/src/interface/web/app/agents/page.tsx b/src/interface/web/app/agents/page.tsx index a31c2901..89deb663 100644 --- a/src/interface/web/app/agents/page.tsx +++ b/src/interface/web/app/agents/page.tsx @@ -140,7 +140,11 @@ function CreateAgentCard(props: CreateAgentCardProps) { Create Agent
- + Create Agent {!props.userProfile && showLoginPrompt && ( @@ -535,6 +535,8 @@ export function AgentModificationForm(props: AgentModificationFormProps) { const basicFields = [ { name: "name", label: "Name" }, { name: "persona", label: "Personality" }, + { name: "color", label: "Color" }, + { name: "icon", label: "Icon" }, ]; const toolsFields = [ @@ -545,17 +547,15 @@ export function AgentModificationForm(props: AgentModificationFormProps) { const knowledgeBaseFields = [{ name: "files", label: "Knowledge Base" }]; const customizationFields = [ - { name: "color", label: "Color" }, - { name: "icon", label: "Icon" }, { name: "chat_model", label: "Chat Model" }, { name: "privacy_level", label: "Privacy Level" }, ]; const formGroups = [ - { fields: basicFields, label: "Basic Settings", tabName: "basic" }, - { fields: customizationFields, label: "Customization & Access", tabName: "customize" }, - { fields: knowledgeBaseFields, label: "Knowledge Base", tabName: "knowledge" }, - { fields: toolsFields, label: "Tools Settings", tabName: "tools" }, + { fields: basicFields, label: "1. Basic Settings", tabName: "basic" }, + { fields: customizationFields, label: "2. Model & Privacy", tabName: "customize" }, + { fields: knowledgeBaseFields, label: "3. Knowledge Base", tabName: "knowledge" }, + { fields: toolsFields, label: "4. Tools", tabName: "tools" }, ]; const fileInputRef = useRef(null); @@ -754,7 +754,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) { control={props.form.control} name="chat_model" render={({ field }) => ( - + Chat Model {!props.isSubscribed ? ( @@ -801,7 +801,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) { control={props.form.control} name="privacy_level" render={({ field }) => ( - +
Privacy Level
 @@ -858,7 +858,7 @@ export function AgentModificationForm(props: AgentModificationFormProps) { control={props.form.control} name="color" render={({ field }) => ( - + Color @@ -928,12 +928,12 @@ export function AgentModificationForm(props: AgentModificationFormProps) { control={props.form.control} name="persona" render={({ field }) => ( - + Personality What is the personality, thought process, or tuning of this - agent? Get creative; this is how you can influence the agent - constitution. + agent? This is where you can provide any instructions to the + agent.