NikitolProject/miniperplx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve citation component

Browse Source
This commit is contained in:
zaidmukaddam 2024-08-26 13:16:00 +05:30
parent 3672f5c6bc
commit 4f4f7f7ae2
3 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/page.tsx
View File

@ -1241,28 +1241,39 @@ export default function Home() {
href: string; href: string;
children: React.ReactNode; children: React.ReactNode;
index: number; index: number;
citationText: string;
} }
const CitationComponent: React.FC<CitationComponentProps> = React.memo(({ href, index }) => { const CitationComponent: React.FC<CitationComponentProps> = React.memo(({ href, index, citationText }) => {
const faviconUrl = `https://www.google.com/s2/favicons?sz=128&domain=${new URL(href).hostname}`; const { hostname } = new URL(href);
const faviconUrl = `https://www.google.com/s2/favicons?sz=128&domain=${hostname}`;
return ( return (
<HoverCard key={index}> <HoverCard>
<HoverCardTrigger asChild> <HoverCardTrigger asChild>
<a <sup>
href={href} <a
target="_blank" href={href}
rel="noopener noreferrer" target="_blank"
className="cursor-help text-sm text-primary py-0.5 px-1.5 m-0 bg-secondary rounded-full no-underline" rel="noopener noreferrer"
> className="cursor-help text-sm text-primary py-0.5 px-1.5 m-0 bg-secondary rounded-full no-underline"
{index + 1} >
</a> {index + 1}
</a>
</sup>
</HoverCardTrigger> </HoverCardTrigger>
<HoverCardContent className="flex items-center gap-1 !p-0 !px-0.5 max-w-xs bg-card text-card-foreground !m-0 h-6 rounded-xl"> <HoverCardContent className="w-fit p-2 m-0">
<Image src={faviconUrl} alt="Favicon" width={16} height={16} className="w-4 h-4 flex-shrink-0 rounded-full" /> <div className="flex items-center justify-between mb-1 m-0">
<a href={href} target="_blank" rel="noopener noreferrer" className="text-sm text-primary no-underline truncate"> <a
{href} href={href}
</a> target="_blank"
rel="noopener noreferrer"
className="flex items-center m-0 h-8 hover:no-underline">
<Image src={faviconUrl} alt="Favicon" width={16} height={16} className="rounded-sm mr-2" />
<span className="text-sm">{hostname}</span>
</a>
</div>
<p className="text-sm font-medium m-0">{citationText}</p>
</HoverCardContent> </HoverCardContent>
</HoverCard> </HoverCard>
); );
@ -1290,7 +1301,11 @@ export default function Home() {
if (!href) return null; if (!href) return null;
const index = citationLinks.findIndex((link) => link.link === href); const index = citationLinks.findIndex((link) => link.link === href);
return index !== -1 ? ( return index !== -1 ? (
<CitationComponent href={href} index={index}> <CitationComponent
href={href}
index={index}
citationText={citationLinks[index].text}
>
{children} {children}
</CitationComponent> </CitationComponent>
) : ( ) : (

1
package.json
View File

@ -33,6 +33,7 @@
"clsx": "^2.1.1", "clsx": "^2.1.1",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"framer-motion": "^11.3.19", "framer-motion": "^11.3.19",
"katex": "^0.16.11",
"lucide-react": "^0.424.0", "lucide-react": "^0.424.0",
"next": "^14.2.5", "next": "^14.2.5",
"openai": "^4.56.0", "openai": "^4.56.0",

3
pnpm-lock.yaml
View File

@ -77,6 +77,9 @@ dependencies:
framer-motion: framer-motion:
specifier: ^11.3.19 specifier: ^11.3.19
version: 11.3.20(react-dom@18.3.1)(react@18.3.1) version: 11.3.20(react-dom@18.3.1)(react@18.3.1)
katex:
specifier: ^0.16.11
version: 0.16.11
lucide-react: lucide-react:
specifier: ^0.424.0 specifier: ^0.424.0
version: 0.424.0(react@18.3.1) version: 0.424.0(react@18.3.1)