sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show output file not code on hover. Remove reference card title border

Browse source
This commit is contained in:
Debanjum 2024-11-11 16:59:53 -08:00
parent b970cfd4b3
commit 218eed83cd
1 changed files with 63 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
src/interface/web/app/components/referencePanel/referencePanel.tsx
View file

@ -77,7 +77,7 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
{props.showFullContent ? props.title : fileName} {props.showFullContent ? props.title : fileName}
</h3> </h3>
<p <p
className={`border-t mt-1 pt-1 text-sm ${props.showFullContent ? "overflow-x-auto block" : "overflow-hidden line-clamp-2"}`} className={`text-sm ${props.showFullContent ? "overflow-x-auto block" : "overflow-hidden line-clamp-2"}`}
dangerouslySetInnerHTML={{ __html: snippet }} dangerouslySetInnerHTML={{ __html: snippet }}
></p> ></p>
</Card> </Card>
@ -146,6 +146,57 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
}; };
const renderOutputFiles = (files: CodeContextFile[], hoverCard: boolean) => {
if (files?.length == 0) return null;
return (
<div
className={`${hoverCard || props.showFullContent ? "border-t mt-1 pt-1" : undefined}`}
>
{files.slice(0, props.showFullContent ? undefined : 1).map((file, index) => {
return (
<div key={`${file.filename}-${index}`}>
<h4 className="text-sm text-muted-foreground flex items-center">
<span
className={`overflow-hidden mr-2 font-bold ${props.showFullContent ? undefined : "line-clamp-1"}`}
>
{file.filename}
</span>
<button
className={`${hoverCard ? "hidden" : undefined}`}
onClick={(e) => {
e.preventDefault();
handleDownload(file);
}}
onMouseEnter={() => setIsDownloadHover(true)}
onMouseLeave={() => setIsDownloadHover(false)}
title={`Download file: ${file.filename}`}
>
<ArrowCircleDown
className={`w-4 h-4`}
weight={isDownloadHover ? "fill" : "regular"}
/>
</button>
</h4>
{file.filename.match(/\.(txt|org|md|csv|json)$/) ? (
<pre
className={`${props.showFullContent ? "block" : "line-clamp-2"} text-sm mt-1 p-1 bg-background rounded overflow-x-auto`}
>
{file.b64_data}
</pre>
) : file.filename.match(/\.(png|jpg|jpeg|webp)$/) ? (
<img
src={`data:image/${file.filename.split(".").pop()};base64,${file.b64_data}`}
alt={file.filename}
className="mt-1 max-h-32 rounded"
/>
) : null}
</div>
);
})}
</div>
);
};
return ( return (
<> <>
<Popover open={isHovering && !props.showFullContent} onOpenChange={setIsHovering}> <Popover open={isHovering && !props.showFullContent} onOpenChange={setIsHovering}>
@ -161,72 +212,15 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
<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"} text-muted-foreground flex-grow`}
> >
code artifacts code {props.output_files?.length > 0 ? "artifacts" : ""}
</h3> </h3>
</div> </div>
<pre <pre
className={`text-xs border-t mt-1 pt-1 ${props.showFullContent ? "block overflow-x-auto" : props.output_files?.length > 0 ? "hidden" : "overflow-hidden line-clamp-3"}`} className={`text-xs pb-2 ${props.showFullContent ? "block overflow-x-auto" : props.output_files?.length > 0 ? "hidden" : "overflow-hidden line-clamp-3"}`}
> >
{sanitizedCodeSnippet} {sanitizedCodeSnippet}
</pre> </pre>
{props.output_files?.length > 0 && ( {renderOutputFiles(props.output_files, false)}
<div className="border-t mt-1 pt-1">
{props.output_files
.slice(0, props.showFullContent ? undefined : 1)
.map((file, index) => {
return (
<div key={`${file.filename}-${index}`}>
<h4 className="text-sm text-muted-foreground flex items-center">
<span
className={`flex items-center overflow-hidden mr-2 font-bold`}
>
{file.filename}
</span>
<button
onClick={(e) => {
e.preventDefault();
handleDownload(file);
}}
onMouseEnter={() =>
setIsDownloadHover(true)
}
onMouseLeave={() =>
setIsDownloadHover(false)
}
title={`Download file: ${file.filename}`}
>
<ArrowCircleDown
className="w-4 h-4"
weight={
isDownloadHover
? "fill"
: "regular"
}
/>
</button>
</h4>
{file.filename.match(
/\.(txt|org|md|csv|json)$/,
) ? (
<pre
className={`${props.showFullContent ? "block" : "line-clamp-2"} text-sm mt-1 p-1 bg-background rounded overflow-x-auto`}
>
{file.b64_data}
</pre>
) : file.filename.match(
/\.(png|jpg|jpeg|webp)$/,
) ? (
<img
src={`data:image/${file.filename.split(".").pop()};base64,${file.b64_data}`}
alt={file.filename}
className="mt-1 max-h-32 rounded"
/>
) : null}
</div>
);
})}
</div>
)}
</div> </div>
</Card> </Card>
</PopoverTrigger> </PopoverTrigger>
@ -239,12 +233,15 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
<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"} text-muted-foreground flex-grow`}
> >
code code {props.output_files?.length > 0 ? "artifact" : ""}
</h3> </h3>
</div> </div>
<pre className={`text-xs border-t mt-1 pt-1 verflow-hidden line-clamp-10`}> {(props.output_files.length > 0 &&
{sanitizedCodeSnippet} renderOutputFiles(props.output_files?.slice(0, 1), true)) || (
</pre> <pre className="text-xs border-t mt-1 pt-1 verflow-hidden line-clamp-10">
{sanitizedCodeSnippet}
</pre>
)}
</Card> </Card>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
@ -319,7 +316,7 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
</h3> </h3>
</div> </div>
<h3 <h3
className={`border-t mt-1 pt-1 overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} font-bold`} className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} font-bold`}
> >
{props.title} {props.title}
</h3> </h3>