mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-08 21:29:12 +00:00
Add back hover state with collapsed references
This commit is contained in:
sabaimran
@@ -31,6 +31,7 @@ import {
|
|||||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||||
import DOMPurify from "dompurify";
|
import DOMPurify from "dompurify";
|
||||||
import { getIconFromFilename } from "@/app/common/iconUtils";
|
import { getIconFromFilename } from "@/app/common/iconUtils";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
interface NotesContextReferenceData {
|
interface NotesContextReferenceData {
|
||||||
title: string;
|
title: string;
|
||||||
@@ -68,18 +69,25 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
|
|||||||
<Card
|
<Card
|
||||||
onMouseEnter={() => setIsHovering(true)}
|
onMouseEnter={() => setIsHovering(true)}
|
||||||
onMouseLeave={() => setIsHovering(false)}
|
onMouseLeave={() => setIsHovering(false)}
|
||||||
className={`${props.showFullContent ? "w-auto" : "w-[200px]"} overflow-hidden break-words text-balance rounded-lg border-none p-2 bg-muted`}
|
className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2`}
|
||||||
>
|
>
|
||||||
<h3
|
{
|
||||||
className={`${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground}`}
|
!props.showFullContent ?
|
||||||
>
|
<SimpleIcon type="notes" key={`${props.title}`} />
|
||||||
{fileIcon}
|
:
|
||||||
{props.showFullContent ? props.title : fileName}
|
<>
|
||||||
</h3>
|
<h3
|
||||||
<p
|
className={`${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground}`}
|
||||||
className={`text-sm ${props.showFullContent ? "overflow-x-auto block" : "overflow-hidden line-clamp-2"}`}
|
>
|
||||||
dangerouslySetInnerHTML={{ __html: snippet }}
|
{fileIcon}
|
||||||
></p>
|
{props.showFullContent ? props.title : fileName}
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className={`text-sm overflow-x-auto block`}
|
||||||
|
dangerouslySetInnerHTML={{ __html: snippet }}
|
||||||
|
></p>
|
||||||
|
</>
|
||||||
|
}
|
||||||
</Card>
|
</Card>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-[400px] mx-2">
|
<PopoverContent className="w-[400px] mx-2">
|
||||||
@@ -204,25 +212,30 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
|
|||||||
<Card
|
<Card
|
||||||
onMouseEnter={() => setIsHovering(true)}
|
onMouseEnter={() => setIsHovering(true)}
|
||||||
onMouseLeave={() => setIsHovering(false)}
|
onMouseLeave={() => setIsHovering(false)}
|
||||||
className={`${props.showFullContent ? "w-auto" : "w-[200px]"} overflow-hidden break-words text-balance rounded-lg border-none p-2 bg-muted`}
|
className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2`}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col px-1">
|
{
|
||||||
<div className="flex items-center gap-2">
|
!props.showFullContent ?
|
||||||
{fileIcon}
|
<SimpleIcon type="code" key={`code-${props.code}`} />
|
||||||
<h3
|
:
|
||||||
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground flex-grow`}
|
<div className="flex flex-col px-1">
|
||||||
>
|
<div className="flex items-center gap-2">
|
||||||
code {props.output_files?.length > 0 ? "artifacts" : ""}
|
{fileIcon}
|
||||||
</h3>
|
<h3
|
||||||
</div>
|
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground flex-grow`}
|
||||||
<pre
|
>
|
||||||
className={`text-xs pb-2 ${props.showFullContent ? "block overflow-x-auto" : props.output_files?.length > 0 ? "hidden" : "overflow-hidden line-clamp-3"}`}
|
code {props.output_files?.length > 0 ? "artifacts" : ""}
|
||||||
>
|
</h3>
|
||||||
{sanitizedCodeSnippet}
|
</div>
|
||||||
</pre>
|
<pre
|
||||||
{props.output_files?.length > 0 &&
|
className={`text-xs pb-2 ${props.showFullContent ? "block overflow-x-auto" : props.output_files?.length > 0 ? "hidden" : "overflow-hidden line-clamp-3"}`}
|
||||||
renderOutputFiles(props.output_files, false)}
|
>
|
||||||
</div>
|
{sanitizedCodeSnippet}
|
||||||
|
</pre>
|
||||||
|
{props.output_files?.length > 0 &&
|
||||||
|
renderOutputFiles(props.output_files, false)}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</Card>
|
</Card>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-[400px] mx-2">
|
<PopoverContent className="w-[400px] mx-2">
|
||||||
@@ -299,35 +312,37 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
|
|||||||
<Card
|
<Card
|
||||||
onMouseEnter={handleMouseEnter}
|
onMouseEnter={handleMouseEnter}
|
||||||
onMouseLeave={handleMouseLeave}
|
onMouseLeave={handleMouseLeave}
|
||||||
className={`${props.showFullContent ? "w-auto" : "w-[200px]"} overflow-hidden break-words text-balance rounded-lg border-none p-2 bg-muted`}
|
className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2`}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col">
|
{
|
||||||
<a
|
!props.showFullContent ?
|
||||||
href={props.link}
|
<SimpleIcon type="online" key={props.title} link={props.link} />
|
||||||
target="_blank"
|
:
|
||||||
rel="noreferrer"
|
<div className="flex flex-col">
|
||||||
className="!no-underline px-1"
|
{
|
||||||
>
|
<Link href={props.link}>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<img src={favicon} alt="" className="!w-4 h-4 flex-shrink-0" />
|
<img src={favicon} alt="" className="!w-4 h-4 flex-shrink-0" />
|
||||||
|
<h3
|
||||||
|
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground flex-grow`}
|
||||||
|
>
|
||||||
|
{domain}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
}
|
||||||
<h3
|
<h3
|
||||||
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground flex-grow`}
|
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} font-bold`}
|
||||||
>
|
>
|
||||||
{domain}
|
{props.title}
|
||||||
</h3>
|
</h3>
|
||||||
|
<p
|
||||||
|
className={`overflow-hidden text-sm ${props.showFullContent ? "block" : "line-clamp-2"}`}
|
||||||
|
>
|
||||||
|
{props.description}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<h3
|
}
|
||||||
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} font-bold`}
|
|
||||||
>
|
|
||||||
{props.title}
|
|
||||||
</h3>
|
|
||||||
<p
|
|
||||||
className={`overflow-hidden text-sm ${props.showFullContent ? "block" : "line-clamp-2"}`}
|
|
||||||
>
|
|
||||||
{props.description}
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</Card>
|
</Card>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-[400px] mx-2">
|
<PopoverContent className="w-[400px] mx-2">
|
||||||
@@ -609,17 +624,29 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
|
|||||||
<SheetTrigger className="text-balance w-auto md:w-[200px] justify-start overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center m-0 inline-flex">
|
<SheetTrigger className="text-balance w-auto md:w-[200px] justify-start overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center m-0 inline-flex">
|
||||||
{codeDataToShow.map((code, index) => {
|
{codeDataToShow.map((code, index) => {
|
||||||
return (
|
return (
|
||||||
<SimpleIcon type="code" key={`code-${index}`} />
|
<CodeContextReferenceCard
|
||||||
|
showFullContent={false}
|
||||||
|
{...code}
|
||||||
|
key={`code-${index}`}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{notesDataToShow.map((note, index) => {
|
{notesDataToShow.map((note, index) => {
|
||||||
return (
|
return (
|
||||||
<SimpleIcon type="notes" key={`${note.title}-${index}`} />
|
<NotesContextReferenceCard
|
||||||
|
showFullContent={false}
|
||||||
|
{...note}
|
||||||
|
key={`${note.title}-${index}`}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{onlineDataToShow.map((online, index) => {
|
{onlineDataToShow.map((online, index) => {
|
||||||
return (
|
return (
|
||||||
<SimpleIcon type="online" key={`${online.title}-${index}`} link={online.link} />
|
<GenericOnlineReferenceCard
|
||||||
|
showFullContent={false}
|
||||||
|
{...online}
|
||||||
|
key={`${online.title}-${index}`}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<ArrowRight className="m-0" />
|
<ArrowRight className="m-0" />
|
||||||
|
|||||||
Reference in New Issue
Block a user