fazeel007 commited on
Commit
cdc4bc7
·
1 Parent(s): 0e28fdd

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
- {/* Snippet Preview with Highlighted Hits */}
309
  <div className="bg-slate-50 dark:bg-slate-900 rounded-lg p-4 mb-4">
310
- <div
311
- className="text-sm text-slate-700 dark:text-slate-300 leading-relaxed"
312
- dangerouslySetInnerHTML={{
313
- __html: highlightSearchHits(document.snippet, (document as any).searchQuery || '')
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>