klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +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) {
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 cardContent = (

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

@@ -3,7 +3,7 @@ import "./globals.css";
import styles from "./page.module.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 { ArrowsVertical } from "@phosphor-icons/react";
@@ -60,6 +60,104 @@ interface ChatBodyDataProps {
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) {
const [message, setMessage] = useState("");
const [prefillMessage, setPrefillMessage] = useState("");
@@ -223,73 +321,19 @@ function ChatBodyData(props: ChatBodyDataProps) {
</h1>
</div>
{!props.isMobileWidth && (
<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={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>
<AgentCards
agents={agents}
agentIcons={agentIcons}
selectedAgent={selectedAgent}
isPopoverOpen={isPopoverOpen}
debouncedHoveredAgent={debouncedHoveredAgent}
setHoveredAgent={setHoveredAgent}
setIsPopoverOpen={setIsPopoverOpen}
setSelectedAgent={setSelectedAgent}
chatInputRef={chatInputRef}
openAgentEditCard={openAgentEditCard}
userConfig={props.userConfig}
/>
)}
</div>
<div className={`mx-auto ${props.isMobileWidth ? "w-full" : "w-full max-w-screen-md"}`}>