Fix content truncation: Show full content instead of snippet
Browse files- Changed snippet preview to show full content with search highlighting
- Added expandable preview with gradient fade for long content
- Removed duplicate 'Full Content' section in expanded view
- Users now see complete content immediately, not truncated snippets
- Maintains clean UI with max-height and scroll for very long content
client/src/components/knowledge-base/result-card.tsx
CHANGED
@@ -305,14 +305,26 @@ export default function ResultCard({
|
|
305 |
</Button>
|
306 |
</div>
|
307 |
|
308 |
-
{/*
|
309 |
<div className="bg-slate-50 dark:bg-slate-900 rounded-lg p-4 mb-4">
|
310 |
-
<div
|
311 |
-
|
312 |
-
|
313 |
-
|
314 |
-
|
315 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
316 |
</div>
|
317 |
|
318 |
{/* AI Explanation */}
|
@@ -367,17 +379,6 @@ export default function ResultCard({
|
|
367 |
</span>
|
368 |
)}
|
369 |
</div>
|
370 |
-
)) || (
|
371 |
-
<div className="bg-slate-50 dark:bg-slate-900 rounded-lg p-3">
|
372 |
-
<p className="text-sm text-slate-700 dark:text-slate-300 mb-2">
|
373 |
-
<strong>Full Content:</strong>
|
374 |
-
</p>
|
375 |
-
<div className="max-h-96 overflow-y-auto bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-md p-3 mt-2">
|
376 |
-
<p className="text-sm text-slate-700 dark:text-slate-300 leading-relaxed whitespace-pre-wrap">
|
377 |
-
{document.content}
|
378 |
-
</p>
|
379 |
-
</div>
|
380 |
-
</div>
|
381 |
)}
|
382 |
</div>
|
383 |
</div>
|
|
|
305 |
</Button>
|
306 |
</div>
|
307 |
|
308 |
+
{/* Content Preview with Highlighted Hits */}
|
309 |
<div className="bg-slate-50 dark:bg-slate-900 rounded-lg p-4 mb-4">
|
310 |
+
<div className={`relative text-sm text-slate-700 dark:text-slate-300 leading-relaxed ${isExpanded ? 'max-h-96 overflow-y-auto' : 'max-h-32 overflow-hidden'}`}>
|
311 |
+
<div
|
312 |
+
dangerouslySetInnerHTML={{
|
313 |
+
__html: highlightSearchHits(document.content, (document as any).searchQuery || '')
|
314 |
+
}}
|
315 |
+
/>
|
316 |
+
{!isExpanded && document.content.length > 300 && (
|
317 |
+
<div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-slate-50 dark:from-slate-900 to-transparent pointer-events-none" />
|
318 |
+
)}
|
319 |
+
</div>
|
320 |
+
{!isExpanded && document.content.length > 300 && (
|
321 |
+
<button
|
322 |
+
onClick={onToggleExpanded}
|
323 |
+
className="mt-2 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium"
|
324 |
+
>
|
325 |
+
Show full content...
|
326 |
+
</button>
|
327 |
+
)}
|
328 |
</div>
|
329 |
|
330 |
{/* AI Explanation */}
|
|
|
379 |
</span>
|
380 |
)}
|
381 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
382 |
)}
|
383 |
</div>
|
384 |
</div>
|