klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-06 13:22: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

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

@@ -71,10 +71,9 @@ 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}`}
@@ -87,7 +86,7 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
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,10 +213,9 @@ 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}
@@ -235,7 +233,7 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
{props.output_files?.length > 0 && {props.output_files?.length > 0 &&
renderOutputFiles(props.output_files, false)} renderOutputFiles(props.output_files, false)}
</div> </div>
} )}
</Card> </Card>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[400px] mx-2"> <PopoverContent className="w-[400px] mx-2">
@@ -314,15 +312,18 @@ 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 src={favicon} alt="" className="!w-4 h-4 flex-shrink-0" /> <img
src={favicon}
alt=""
className="!w-4 h-4 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`}
> >
@@ -342,7 +343,7 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
{props.description} {props.description}
</p> </p>
</div> </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 (