mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-11-27 17:35:07 +01:00
Align styling of reference panel card across code, docs, web results
- Add a border below heading - Show code snippet in pre block - Overflow-x when reference side panel open to allow seeing whole text via x-scroll - Align header, body position of reference cards with each other - Only show filename in doc reference cards at message bottom. Show full file path in hover and reference side panel
This commit is contained in:
Debanjum
parent
8e9f4262a9
commit
b970cfd4b3
1 changed files with 103 additions and 97 deletions
|
|
@ -57,6 +57,7 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
|
||||||
props.title || ".txt",
|
props.title || ".txt",
|
||||||
"w-6 h-6 text-muted-foreground inline-flex mr-2",
|
"w-6 h-6 text-muted-foreground inline-flex mr-2",
|
||||||
);
|
);
|
||||||
|
const fileName = props.title.split("/").pop() || props.title;
|
||||||
const snippet = extractSnippet(props);
|
const snippet = extractSnippet(props);
|
||||||
const [isHovering, setIsHovering] = useState(false);
|
const [isHovering, setIsHovering] = useState(false);
|
||||||
|
|
||||||
|
|
@ -67,30 +68,30 @@ 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 p-2 bg-muted border-none`}
|
className={`${props.showFullContent ? "w-auto" : "w-[200px]"} overflow-hidden break-words text-balance rounded-lg border-none p-2 bg-muted`}
|
||||||
>
|
>
|
||||||
<h3
|
<h3
|
||||||
className={`${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground}`}
|
className={`${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground}`}
|
||||||
>
|
>
|
||||||
{fileIcon}
|
{fileIcon}
|
||||||
{props.title}
|
{props.showFullContent ? props.title : fileName}
|
||||||
</h3>
|
</h3>
|
||||||
<p
|
<p
|
||||||
className={`${props.showFullContent ? "block" : "overflow-hidden line-clamp-2"}`}
|
className={`border-t mt-1 pt-1 text-sm ${props.showFullContent ? "overflow-x-auto block" : "overflow-hidden line-clamp-2"}`}
|
||||||
dangerouslySetInnerHTML={{ __html: snippet }}
|
dangerouslySetInnerHTML={{ __html: snippet }}
|
||||||
></p>
|
></p>
|
||||||
</Card>
|
</Card>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-[400px] mx-2">
|
<PopoverContent className="w-[400px] mx-2">
|
||||||
<Card
|
<Card
|
||||||
className={`w-auto overflow-hidden break-words text-balance rounded-lg p-2 border-none`}
|
className={`w-auto overflow-hidden break-words text-balance rounded-lg border-none p-2`}
|
||||||
>
|
>
|
||||||
<h3 className={`line-clamp-2 text-muted-foreground}`}>
|
<h3 className={`line-clamp-2 text-muted-foreground}`}>
|
||||||
{fileIcon}
|
{fileIcon}
|
||||||
{props.title}
|
{props.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p
|
<p
|
||||||
className={`overflow-hidden line-clamp-3`}
|
className={`border-t mt-1 pt-1 text-sm overflow-hidden line-clamp-5`}
|
||||||
dangerouslySetInnerHTML={{ __html: snippet }}
|
dangerouslySetInnerHTML={{ __html: snippet }}
|
||||||
></p>
|
></p>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
@ -109,8 +110,8 @@ interface CodeContextReferenceCardProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
|
function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
|
||||||
const fileIcon = getIconFromFilename(".py", "w-6 h-6 text-muted-foreground inline-flex mr-2");
|
const fileIcon = getIconFromFilename(".py", "!w-4 h-4 text-muted-foreground flex-shrink-0");
|
||||||
const sanitizedCodeSnippet = DOMPurify.sanitize(props.code.replace(/\n/g, "<br/>"));
|
const sanitizedCodeSnippet = DOMPurify.sanitize(props.code);
|
||||||
const [isHovering, setIsHovering] = useState(false);
|
const [isHovering, setIsHovering] = useState(false);
|
||||||
const [isDownloadHover, setIsDownloadHover] = useState(false);
|
const [isDownloadHover, setIsDownloadHover] = useState(false);
|
||||||
|
|
||||||
|
|
@ -152,32 +153,33 @@ 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 p-2 bg-muted border-none`}
|
className={`${props.showFullContent ? "w-auto" : "w-[200px]"} overflow-hidden break-words text-balance rounded-lg border-none p-2 bg-muted`}
|
||||||
>
|
|
||||||
<h3
|
|
||||||
className={`${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground}`}
|
|
||||||
>
|
>
|
||||||
|
<div className="flex flex-col px-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
{fileIcon}
|
{fileIcon}
|
||||||
Code
|
<h3
|
||||||
|
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground flex-grow`}
|
||||||
|
>
|
||||||
|
code artifacts
|
||||||
</h3>
|
</h3>
|
||||||
<p
|
</div>
|
||||||
className={`text-xs ${props.showFullContent ? "block" : "overflow-hidden line-clamp-3"}`}
|
<pre
|
||||||
dangerouslySetInnerHTML={{ __html: sanitizedCodeSnippet }}
|
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"}`}
|
||||||
></p>
|
>
|
||||||
{props.output_files && props.output_files.length > 0 && (
|
{sanitizedCodeSnippet}
|
||||||
<div className={`mt-2 border-t pt-2`}>
|
</pre>
|
||||||
|
{props.output_files?.length > 0 && (
|
||||||
|
<div className="border-t mt-1 pt-1">
|
||||||
{props.output_files
|
{props.output_files
|
||||||
.slice(0, props.showFullContent ? undefined : 1)
|
.slice(0, props.showFullContent ? undefined : 1)
|
||||||
.map((file, index) => {
|
.map((file, index) => {
|
||||||
const fileIcon = getIconFromFilename(
|
|
||||||
file.filename,
|
|
||||||
"w-4 h-4 text-muted-foreground inline-flex",
|
|
||||||
);
|
|
||||||
return (
|
return (
|
||||||
<div key={`${file.filename}-${index}`}>
|
<div key={`${file.filename}-${index}`}>
|
||||||
<h4 className="text-sm text-muted-foreground flex items-center">
|
<h4 className="text-sm text-muted-foreground flex items-center">
|
||||||
{fileIcon}
|
<span
|
||||||
<span className="flex items-center overflow-hidden mx-2">
|
className={`flex items-center overflow-hidden mr-2 font-bold`}
|
||||||
|
>
|
||||||
{file.filename}
|
{file.filename}
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
|
|
@ -196,12 +198,16 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
|
||||||
<ArrowCircleDown
|
<ArrowCircleDown
|
||||||
className="w-4 h-4"
|
className="w-4 h-4"
|
||||||
weight={
|
weight={
|
||||||
isDownloadHover ? "fill" : "regular"
|
isDownloadHover
|
||||||
|
? "fill"
|
||||||
|
: "regular"
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</h4>
|
</h4>
|
||||||
{file.filename.match(/\.(txt|org|md|csv|json)$/) ? (
|
{file.filename.match(
|
||||||
|
/\.(txt|org|md|csv|json)$/,
|
||||||
|
) ? (
|
||||||
<pre
|
<pre
|
||||||
className={`${props.showFullContent ? "block" : "line-clamp-2"} text-sm mt-1 p-1 bg-background rounded overflow-x-auto`}
|
className={`${props.showFullContent ? "block" : "line-clamp-2"} text-sm mt-1 p-1 bg-background rounded overflow-x-auto`}
|
||||||
>
|
>
|
||||||
|
|
@ -221,20 +227,24 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent className="w-[400px] mx-2">
|
<PopoverContent className="w-[400px] mx-2">
|
||||||
<Card
|
<Card
|
||||||
className={`w-auto overflow-hidden break-words text-balance rounded-lg p-2 border-none`}
|
className={`w-auto overflow-hidden break-words text-balance rounded-lg border-none p-2`}
|
||||||
>
|
>
|
||||||
<h3 className={`line-clamp-2 text-muted-foreground}`}>
|
<div className="flex items-center gap-2">
|
||||||
{fileIcon}
|
{fileIcon}
|
||||||
Code
|
<h3
|
||||||
|
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground flex-grow`}
|
||||||
|
>
|
||||||
|
code
|
||||||
</h3>
|
</h3>
|
||||||
<p
|
</div>
|
||||||
className={`text-xs overflow-hidden line-clamp-10`}
|
<pre className={`text-xs border-t mt-1 pt-1 verflow-hidden line-clamp-10`}>
|
||||||
dangerouslySetInnerHTML={{ __html: sanitizedCodeSnippet }}
|
{sanitizedCodeSnippet}
|
||||||
></p>
|
</pre>
|
||||||
</Card>
|
</Card>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
@ -291,21 +301,17 @@ 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 rounded-lg text-balance p-2 bg-muted border-none`}
|
className={`${props.showFullContent ? "w-auto" : "w-[200px]"} overflow-hidden break-words text-balance rounded-lg border-none p-2 bg-muted`}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<a
|
<a
|
||||||
href={props.link}
|
href={props.link}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="!no-underline p-2"
|
className="!no-underline px-1"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<img
|
<img src={favicon} alt="" className="!w-4 h-4 flex-shrink-0" />
|
||||||
src={favicon}
|
|
||||||
alt=""
|
|
||||||
className="!w-4 h-4 mr-2 flex-shrink-0"
|
|
||||||
/>
|
|
||||||
<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`}
|
||||||
>
|
>
|
||||||
|
|
@ -313,12 +319,12 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<h3
|
<h3
|
||||||
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} font-bold`}
|
className={`border-t mt-1 pt-1 overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} font-bold`}
|
||||||
>
|
>
|
||||||
{props.title}
|
{props.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p
|
<p
|
||||||
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-2"}`}
|
className={`overflow-hidden text-sm ${props.showFullContent ? "block" : "line-clamp-2"}`}
|
||||||
>
|
>
|
||||||
{props.description}
|
{props.description}
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -335,23 +341,23 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
|
||||||
href={props.link}
|
href={props.link}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="!no-underline p-2"
|
className="!no-underline px-1"
|
||||||
>
|
>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center gap-2">
|
||||||
<img src={favicon} alt="" className="!w-4 h-4 mr-2" />
|
<img src={favicon} alt="" className="!w-4 h-4 flex-shrink-0" />
|
||||||
<h3
|
<h3
|
||||||
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-2"} text-muted-foreground`}
|
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-2"} text-muted-foreground flex-grow`}
|
||||||
>
|
>
|
||||||
{domain}
|
{domain}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<h3
|
<h3
|
||||||
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-2"} font-bold`}
|
className={`border-t mt-1 pt-1 overflow-hidden ${props.showFullContent ? "block" : "line-clamp-2"} font-bold`}
|
||||||
>
|
>
|
||||||
{props.title}
|
{props.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p
|
<p
|
||||||
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-3"}`}
|
className={`overflow-hidden text-sm ${props.showFullContent ? "block" : "line-clamp-5"}`}
|
||||||
>
|
>
|
||||||
{props.description}
|
{props.description}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue