klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 13:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean-up some code on homepage and disable initial card animations because of jitter

Browse Source
This commit is contained in:
sabaimran
2025-01-08 22:06:54 -08:00
parent 9ce9f02886
commit c448c49811
2 changed files with 113 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/interface/web/app/components/suggestions/suggestionCard.tsx
View File

@@ -20,7 +20,7 @@ interface StepTwoSuggestionCardProps {
} }
export function StepOneSuggestionCard(data: StepOneSuggestionCardProps) { export function StepOneSuggestionCard(data: StepOneSuggestionCardProps) {
const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer md:p-2 animate-fade-in-up`; const cardClassName = `${styles.card} md:w-full md:h-fit sm:w-full h-fit md:w-[200px] cursor-pointer md:p-2`;
const descriptionClassName = `${styles.text} dark:text-white`; const descriptionClassName = `${styles.text} dark:text-white`;
const cardContent = ( const cardContent = (

178
src/interface/web/app/page.tsx
View File

@@ -3,7 +3,7 @@ import "./globals.css";
import styles from "./page.module.css"; import styles from "./page.module.css";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState, useMemo } from "react";
import useSWR from "swr"; import useSWR from "swr";
import { ArrowsVertical } from "@phosphor-icons/react"; import { ArrowsVertical } from "@phosphor-icons/react";
@@ -60,6 +60,104 @@ interface ChatBodyDataProps {
isLoadingUserConfig: boolean; isLoadingUserConfig: boolean;
} }
function AgentCards({
agents,
agentIcons,
selectedAgent,
isPopoverOpen,
debouncedHoveredAgent,
setHoveredAgent,
setIsPopoverOpen,
setSelectedAgent,
chatInputRef,
openAgentEditCard,
userConfig,
isMobileWidth,
}: {
agents: AgentData[];
agentIcons: JSX.Element[];
selectedAgent: string | null;
isPopoverOpen: boolean;
debouncedHoveredAgent: string | null;
setHoveredAgent: (agent: string | null) => void;
setIsPopoverOpen: (open: boolean) => void;
setSelectedAgent: (agent: string | null) => void;
chatInputRef: React.RefObject<HTMLTextAreaElement>;
openAgentEditCard: (slug: string) => void;
userConfig: UserConfig | null;
isMobileWidth?: boolean;
}) {
return (
<ScrollArea className="w-full max-w-[600px] mx-auto">
<div className="flex pb-2 gap-2 items-center justify-center">
{agents.map((agent, index) => (
<Popover
key={`${index}-${agent.slug}`}
open={isPopoverOpen && debouncedHoveredAgent === agent.slug}
onOpenChange={(open) => {
if (!open) {
setHoveredAgent(null);
setIsPopoverOpen(false);
}
}}
>
<PopoverTrigger asChild>
<Card
className={`${
selectedAgent === agent.slug
? convertColorToBorderClass(agent.color)
: "border-stone-100 dark:border-neutral-700 text-muted-foreground"
}
hover:cursor-pointer rounded-lg px-2 py-2`}
onDoubleClick={() => openAgentEditCard(agent.slug)}
onClick={() => {
setSelectedAgent(agent.slug);
chatInputRef.current?.focus();
setHoveredAgent(null);
setIsPopoverOpen(false);
}}
onMouseEnter={() => setHoveredAgent(agent.slug)}
onMouseLeave={() => {
setHoveredAgent(null);
setIsPopoverOpen(false);
}}
>
<CardTitle className="text-center text-md font-medium flex justify-center items-center whitespace-nowrap">
{agentIcons[index]} {agent.name}
</CardTitle>
</Card>
</PopoverTrigger>
<PopoverContent
className="w-80 p-0 border-none bg-transparent shadow-none"
onMouseLeave={() => {
setHoveredAgent(null);
setIsPopoverOpen(false);
}}
>
<AgentCard
data={agent}
userProfile={null}
isMobileWidth={isMobileWidth || false}
showChatButton={false}
editCard={false}
filesOptions={[]}
selectedChatModelOption=""
agentSlug=""
isSubscribed={isUserSubscribed(userConfig)}
setAgentChangeTriggered={() => {}}
modelOptions={[]}
inputToolOptions={{}}
outputModeOptions={{}}
/>
</PopoverContent>
</Popover>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
);
}
function ChatBodyData(props: ChatBodyDataProps) { function ChatBodyData(props: ChatBodyDataProps) {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const [prefillMessage, setPrefillMessage] = useState(""); const [prefillMessage, setPrefillMessage] = useState("");
@@ -223,73 +321,19 @@ function ChatBodyData(props: ChatBodyDataProps) {
</h1> </h1>
</div> </div>
{!props.isMobileWidth && ( {!props.isMobileWidth && (
<ScrollArea className="w-full max-w-[600px] mx-auto"> <AgentCards
<div className="flex pb-2 gap-2 items-center justify-center"> agents={agents}
{agents.map((agent, index) => ( agentIcons={agentIcons}
<Popover selectedAgent={selectedAgent}
key={`${index}-${agent.slug}`} isPopoverOpen={isPopoverOpen}
open={isPopoverOpen && debouncedHoveredAgent === agent.slug} debouncedHoveredAgent={debouncedHoveredAgent}
onOpenChange={(open) => { setHoveredAgent={setHoveredAgent}
if (!open) { setIsPopoverOpen={setIsPopoverOpen}
setHoveredAgent(null); setSelectedAgent={setSelectedAgent}
setIsPopoverOpen(false); chatInputRef={chatInputRef}
} openAgentEditCard={openAgentEditCard}
}} userConfig={props.userConfig}
>
<PopoverTrigger asChild>
<Card
className={`${
selectedAgent === agent.slug
? convertColorToBorderClass(agent.color)
: "border-stone-100 dark:border-neutral-700 text-muted-foreground"
}
hover:cursor-pointer rounded-lg px-2 py-2`}
onDoubleClick={() => openAgentEditCard(agent.slug)}
onClick={() => {
setSelectedAgent(agent.slug);
chatInputRef.current?.focus();
setHoveredAgent(null);
setIsPopoverOpen(false);
}}
onMouseEnter={() => setHoveredAgent(agent.slug)}
onMouseLeave={() => {
setHoveredAgent(null);
setIsPopoverOpen(false);
}}
>
<CardTitle className="text-center text-md font-medium flex justify-center items-center whitespace-nowrap">
{agentIcons[index]} {agent.name}
</CardTitle>
</Card>
</PopoverTrigger>
<PopoverContent
className="w-80 p-0 border-none bg-transparent shadow-none"
onMouseLeave={() => {
setHoveredAgent(null);
setIsPopoverOpen(false);
}}
>
<AgentCard
data={agent}
userProfile={null}
isMobileWidth={props.isMobileWidth || false}
showChatButton={false}
editCard={false}
filesOptions={[]}
selectedChatModelOption=""
agentSlug=""
isSubscribed={isUserSubscribed(props.userConfig)}
setAgentChangeTriggered={() => {}}
modelOptions={[]}
inputToolOptions={{}}
outputModeOptions={{}}
/> />
</PopoverContent>
</Popover>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
)} )}
</div> </div>
<div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-full max-w-screen-md"}`}> <div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-full max-w-screen-md"}`}>