Improve result card: Remove empty additional context, enhance metadata
Browse files1. Remove 'Additional Context' section when empty (no more 'No additional context available')
2. Enhanced metadata display for academic papers:
- Renamed to 'Publication Details' for academic papers
- Authors prominently displayed with highlight background
- Added emojis for better visual hierarchy (π₯ Authors, π
Year, ποΈ Venue, etc.)
- Source-specific metadata (β Stars for GitHub repos)
- Better spacing and typography
Much cleaner and more informative interface\!
client/src/components/knowledge-base/result-card.tsx
CHANGED
@@ -365,64 +365,90 @@ export default function ResultCard({
|
|
365 |
{/* Expanded Content */}
|
366 |
{isExpanded && (
|
367 |
<div className="animate-in slide-in-from-top-2 duration-300">
|
368 |
-
|
369 |
-
|
370 |
-
<div className="
|
371 |
-
|
372 |
-
|
373 |
-
|
374 |
-
|
375 |
-
|
376 |
-
|
377 |
-
|
378 |
-
|
379 |
-
|
380 |
-
|
381 |
-
|
382 |
-
|
383 |
-
|
384 |
-
|
385 |
-
|
386 |
-
</p>
|
387 |
-
)}
|
388 |
</div>
|
389 |
-
|
390 |
|
391 |
{/* Metadata */}
|
392 |
{document.metadata && typeof document.metadata === 'object' ? (
|
393 |
<div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
|
394 |
-
<h4 className="font-medium text-slate-900 dark:text-slate-100 mb-
|
395 |
-
|
|
|
|
|
396 |
{(() => {
|
397 |
const metadata = document.metadata as Record<string, unknown>;
|
398 |
return (
|
399 |
<>
|
|
|
400 |
{metadata.authors && (
|
401 |
-
<div>
|
402 |
-
<span className="text-slate-500 dark:text-slate-400">
|
403 |
-
|
404 |
-
{renderMetadataValue(metadata.authors)}
|
405 |
</span>
|
|
|
|
|
|
|
406 |
</div>
|
407 |
)}
|
408 |
-
|
409 |
-
|
410 |
-
|
411 |
-
|
412 |
-
|
413 |
-
|
414 |
-
|
415 |
-
|
416 |
-
|
417 |
-
|
418 |
-
|
419 |
-
|
420 |
-
|
421 |
-
|
422 |
-
|
423 |
-
|
424 |
-
|
425 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
426 |
</>
|
427 |
);
|
428 |
})()}
|
|
|
365 |
{/* Expanded Content */}
|
366 |
{isExpanded && (
|
367 |
<div className="animate-in slide-in-from-top-2 duration-300">
|
368 |
+
{/* Only show Additional Context if it actually exists */}
|
369 |
+
{document.additionalContext && document.additionalContext.length > 0 && (
|
370 |
+
<div className="border-t border-slate-200 pt-4 mb-4">
|
371 |
+
<h4 className="font-medium text-slate-900 mb-3">Additional Context</h4>
|
372 |
+
<div className="space-y-3">
|
373 |
+
{document.additionalContext.map((context, index) => (
|
374 |
+
<div key={index} className="bg-slate-50 dark:bg-slate-900 rounded-lg p-3">
|
375 |
+
<p className="text-sm text-slate-700 dark:text-slate-300 mb-2">
|
376 |
+
<strong>{context.section}:</strong> {context.text}
|
377 |
+
</p>
|
378 |
+
{context.pageNumber && (
|
379 |
+
<span className="text-xs text-slate-500 dark:text-slate-400">
|
380 |
+
Page {context.pageNumber}
|
381 |
+
</span>
|
382 |
+
)}
|
383 |
+
</div>
|
384 |
+
))}
|
385 |
+
</div>
|
|
|
|
|
386 |
</div>
|
387 |
+
)}
|
388 |
|
389 |
{/* Metadata */}
|
390 |
{document.metadata && typeof document.metadata === 'object' ? (
|
391 |
<div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
|
392 |
+
<h4 className="font-medium text-slate-900 dark:text-slate-100 mb-3">
|
393 |
+
{document.sourceType === 'academic' ? 'Publication Details' : 'Metadata'}
|
394 |
+
</h4>
|
395 |
+
<div className="space-y-3">
|
396 |
{(() => {
|
397 |
const metadata = document.metadata as Record<string, unknown>;
|
398 |
return (
|
399 |
<>
|
400 |
+
{/* Authors - prominent display for academic papers */}
|
401 |
{metadata.authors && (
|
402 |
+
<div className={`${document.sourceType === 'academic' ? 'bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg' : ''}`}>
|
403 |
+
<span className="text-slate-500 dark:text-slate-400 font-medium">
|
404 |
+
{document.sourceType === 'academic' ? 'π₯ Authors:' : 'Authors:'}
|
|
|
405 |
</span>
|
406 |
+
<div className="mt-1 text-slate-700 dark:text-slate-300">
|
407 |
+
{renderMetadataValue(metadata.authors)}
|
408 |
+
</div>
|
409 |
</div>
|
410 |
)}
|
411 |
+
|
412 |
+
{/* Other metadata in grid */}
|
413 |
+
<div className="grid grid-cols-2 gap-3 text-sm">
|
414 |
+
{metadata.year && (
|
415 |
+
<div>
|
416 |
+
<span className="text-slate-500 dark:text-slate-400 font-medium">π
Year:</span>
|
417 |
+
<div className="text-slate-700 dark:text-slate-300">{renderMetadataValue(metadata.year)}</div>
|
418 |
+
</div>
|
419 |
+
)}
|
420 |
+
{metadata.venue && (
|
421 |
+
<div>
|
422 |
+
<span className="text-slate-500 dark:text-slate-400 font-medium">ποΈ Venue:</span>
|
423 |
+
<div className="text-slate-700 dark:text-slate-300">{renderMetadataValue(metadata.venue)}</div>
|
424 |
+
</div>
|
425 |
+
)}
|
426 |
+
{metadata.citations && (
|
427 |
+
<div>
|
428 |
+
<span className="text-slate-500 dark:text-slate-400 font-medium">π Citations:</span>
|
429 |
+
<div className="text-slate-700 dark:text-slate-300">{renderMetadataValue(metadata.citations)}</div>
|
430 |
+
</div>
|
431 |
+
)}
|
432 |
+
{metadata.language && (
|
433 |
+
<div>
|
434 |
+
<span className="text-slate-500 dark:text-slate-400 font-medium">π Language:</span>
|
435 |
+
<div className="text-slate-700 dark:text-slate-300">{renderMetadataValue(metadata.language)}</div>
|
436 |
+
</div>
|
437 |
+
)}
|
438 |
+
{/* Show other relevant metadata based on source type */}
|
439 |
+
{document.sourceType === 'code' && metadata.stars && (
|
440 |
+
<div>
|
441 |
+
<span className="text-slate-500 dark:text-slate-400 font-medium">β Stars:</span>
|
442 |
+
<div className="text-slate-700 dark:text-slate-300">{renderMetadataValue(metadata.stars)}</div>
|
443 |
+
</div>
|
444 |
+
)}
|
445 |
+
{document.sourceType === 'code' && metadata.language && (
|
446 |
+
<div>
|
447 |
+
<span className="text-slate-500 dark:text-slate-400 font-medium">π» Language:</span>
|
448 |
+
<div className="text-slate-700 dark:text-slate-300">{renderMetadataValue(metadata.language)}</div>
|
449 |
+
</div>
|
450 |
+
)}
|
451 |
+
</div>
|
452 |
</>
|
453 |
);
|
454 |
})()}
|