klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show more references in teaser ref section of chat response on web app

Browse Source
This commit is contained in:
Debanjum
2025-02-15 14:10:34 +05:30
parent b6e745336b
commit 5dfb59e1ee
1 changed files with 78 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/interface/web/app/components/referencePanel/referencePanel.tsx
View File

@@ -71,23 +71,22 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
onMouseLeave={() => setIsHovering(false)} onMouseLeave={() => setIsHovering(false)}
className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2 shadow-none`} className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2 shadow-none`}
> >
{ {!props.showFullContent ? (
!props.showFullContent ? <SimpleIcon type="notes" key={`${props.title}`} />
<SimpleIcon type="notes" key={`${props.title}`} /> ) : (
: <>
<> <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.showFullContent ? props.title : fileName}
{props.showFullContent ? props.title : fileName} </h3>
</h3> <p
<p className={`text-sm overflow-x-auto block`}
className={`text-sm overflow-x-auto block`} dangerouslySetInnerHTML={{ __html: snippet }}
dangerouslySetInnerHTML={{ __html: snippet }} ></p>
></p> </>
</> )}
}
</Card> </Card>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[400px] mx-2"> <PopoverContent className="w-[400px] mx-2">
@@ -214,28 +213,27 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
onMouseLeave={() => setIsHovering(false)} onMouseLeave={() => setIsHovering(false)}
className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2 shadow-none`} className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2 shadow-none`}
> >
{ {!props.showFullContent ? (
!props.showFullContent ? <SimpleIcon type="code" key={`code-${props.code}`} />
<SimpleIcon type="code" key={`code-${props.code}`} /> ) : (
: <div className="flex flex-col px-1">
<div className="flex flex-col px-1"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> {fileIcon}
{fileIcon} <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 {props.output_files?.length > 0 ? "artifacts" : ""}
</h3>
</div>
<pre
className={`text-xs pb-2 ${props.showFullContent ? "block overflow-x-auto" : props.output_files?.length > 0 ? "hidden" : "overflow-hidden line-clamp-3"}`}
> >
{sanitizedCodeSnippet} code {props.output_files?.length > 0 ? "artifacts" : ""}
</pre> </h3>
{props.output_files?.length > 0 &&
renderOutputFiles(props.output_files, false)}
</div> </div>
} <pre
className={`text-xs pb-2 ${props.showFullContent ? "block overflow-x-auto" : props.output_files?.length > 0 ? "hidden" : "overflow-hidden line-clamp-3"}`}
>
{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">
@@ -252,10 +250,10 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
</div> </div>
{(props.output_files?.length > 0 && {(props.output_files?.length > 0 &&
renderOutputFiles(props.output_files?.slice(0, 1), true)) || ( renderOutputFiles(props.output_files?.slice(0, 1), true)) || (
<pre className="text-xs border-t mt-1 pt-1 overflow-hidden line-clamp-10"> <pre className="text-xs border-t mt-1 pt-1 overflow-hidden line-clamp-10">
{sanitizedCodeSnippet} {sanitizedCodeSnippet}
</pre> </pre>
)} )}
</Card> </Card>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
@@ -314,35 +312,38 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2 shadow-none`} className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2 shadow-none`}
> >
{ {!props.showFullContent ? (
!props.showFullContent ? <SimpleIcon type="online" key={props.title} link={props.link} />
<SimpleIcon type="online" key={props.title} link={props.link} /> ) : (
: <div className="flex flex-col">
<div className="flex flex-col"> {
{ <Link href={props.link}>
<Link href={props.link}> <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}
<h3 alt=""
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground flex-grow`} className="!w-4 h-4 flex-shrink-0"
> />
{domain} <h3
</h3> className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground flex-grow`}
</div> >
</Link> {domain}
} </h3>
<h3 </div>
className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} font-bold`} </Link>
> }
{props.title} <h3
</h3> className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} font-bold`}
<p >
className={`overflow-hidden text-sm ${props.showFullContent ? "block" : "line-clamp-2"}`} {props.title}
> </h3>
{props.description} <p
</p> className={`overflow-hidden text-sm ${props.showFullContent ? "block" : "line-clamp-2"}`}
</div> >
} {props.description}
</p>
</div>
)}
</Card> </Card>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[400px] mx-2"> <PopoverContent className="w-[400px] mx-2">
@@ -496,7 +497,6 @@ interface SimpleIconProps {
} }
function SimpleIcon(props: SimpleIconProps) { function SimpleIcon(props: SimpleIconProps) {
let favicon = ``; let favicon = ``;
let domain = "unknown"; let domain = "unknown";
@@ -519,16 +519,10 @@ function SimpleIcon(props: SimpleIconProps) {
symbol = <Code className={`${itemClasses}`} />; symbol = <Code className={`${itemClasses}`} />;
break; break;
case "online": case "online":
symbol = symbol = <img src={favicon} alt="" className={`${itemClasses}`} />;
<img
src={favicon}
alt=""
className={`${itemClasses}`}
/>;
break; break;
case "notes": case "notes":
symbol = symbol = <Note className={`${itemClasses}`} />;
<Note className={`${itemClasses}`} />;
break; break;
default: default:
symbol = null; symbol = null;
@@ -538,11 +532,7 @@ function SimpleIcon(props: SimpleIconProps) {
return null; return null;
} }
return ( return <div className="flex items-center gap-2">{symbol}</div>;
<div className="flex items-center gap-2">
{symbol}
</div>
);
} }
export interface TeaserReferenceSectionProps { export interface TeaserReferenceSectionProps {
@@ -597,7 +587,7 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
const [numTeaserSlots, setNumTeaserSlots] = useState(3); const [numTeaserSlots, setNumTeaserSlots] = useState(3);
useEffect(() => { useEffect(() => {
setNumTeaserSlots(props.isMobileWidth ? 1 : 3); setNumTeaserSlots(props.isMobileWidth ? 3 : 5);
}, [props.isMobileWidth]); }, [props.isMobileWidth]);
if (!props.notesReferenceCardData && !props.onlineReferenceCardData) { if (!props.notesReferenceCardData && !props.onlineReferenceCardData) {
@@ -611,10 +601,9 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
); );
const onlineDataToShow = const onlineDataToShow =
notesDataToShow.length + codeDataToShow.length < numTeaserSlots notesDataToShow.length + codeDataToShow.length < numTeaserSlots
? props.onlineReferenceCardData.filter((online) => online.link).slice( ? props.onlineReferenceCardData
0, .filter((online) => online.link)
numTeaserSlots - codeDataToShow.length - notesDataToShow.length, .slice(0, numTeaserSlots - codeDataToShow.length - notesDataToShow.length)
)
: []; : [];
return ( return (