Skip to content

Commit

Permalink
Clean-up some code on homepage and disable initial card animations be…
Browse files Browse the repository at this point in the history 
…cause of jitter
  • Loading branch information
@sabaimran
sabaimran committed Jan 9, 2025
1 parent 9ce9f02 commit c448c49
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 69 deletions.
2 changes: 1 addition & 1 deletion src/interface/web/app/components/suggestions/suggestionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down
180 changes: 112 additions & 68 deletions src/interface/web/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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("");
Expand Down Expand Up @@ -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"}`}>
Expand Down

0 comments on commit c448c49

Please sign in to comment.