Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 1x 1x 40x 73x 73x 73x 73x 73x 73x 73x 73x 73x 73x 73x 40x 73x 73x 73x 73x 73x 73x 73x 73x 73x 73x 73x 40x 73x 69x 17x 73x 40x 40x 40x 73x 73x 73x 73x 73x 73x 73x 73x 73x 73x 73x 73x 73x 8x 8x 8x 73x 8x 8x 8x 73x 6x 6x 6x 73x 6x 6x 6x 73x 8x 8x 8x 73x 6x 6x 6x 73x 6x 6x 6x 73x 6x 6x 6x 73x 73x 40x 40x 40x | import React from 'react';
import type { ChatSource } from './types';
interface SourceListProps {
sources: ChatSource[];
}
export const SourceList: React.FC<SourceListProps> = ({ sources }) => {
const getSourceIcon = (type: string): string => {
const icons: { [key: string]: string } = {
'story': '📖',
'event': '🎉',
'heritage': '🏛️',
'health': '🏥',
'person': '👤',
'multimedia': '🎬',
'default': '📄'
};
return icons[type] || icons.default;
};
const getSourceTypeLabel = (type: string): string => {
const labels: { [key: string]: string } = {
'story': '家庭故事',
'event': '重要事件',
'heritage': '文化传承',
'health': '健康记录',
'person': '家庭成员',
'multimedia': '多媒体',
'default': '其他'
};
return labels[type] || labels.default;
};
const getRelevanceColor = (relevance: number): string => {
if (relevance >= 0.8) return '#10b981'; // Green
if (relevance >= 0.6) return '#f59e0b'; // Yellow
return '#ef4444'; // Red
};
return (
<div className="source-list">
{sources.map((source, index) => (
<div key={`${source.type}-${source.id}-${index}`} className="source-item">
<div className="source-header">
<span className="source-icon">{getSourceIcon(source.type)}</span>
<span className="source-type">{getSourceTypeLabel(source.type)}</span>
<span
className="source-relevance"
style={{ color: getRelevanceColor(source.relevance) }}
>
{(source.relevance * 100).toFixed(0)}%
</span>
</div>
<div className="source-content">
<h4 className="source-title">{source.title}</h4>
{/* Source-specific details */}
{source.story_type && (
<span className="source-detail">
<strong>故事类型:</strong> {source.story_type}
</span>
)}
{source.event_type && (
<span className="source-detail">
<strong>事件类型:</strong> {source.event_type}
</span>
)}
{source.heritage_type && (
<span className="source-detail">
<strong>传承类型:</strong> {source.heritage_type}
</span>
)}
{source.person && (
<span className="source-detail">
<strong>相关人员:</strong> {source.person}
</span>
)}
{source.people && source.people.length > 0 && (
<span className="source-detail">
<strong>涉及人员:</strong> {source.people.join(', ')}
</span>
)}
{source.date && (
<span className="source-detail">
<strong>日期:</strong> {source.date}
</span>
)}
{source.importance && (
<span className="source-detail">
<strong>重要程度:</strong> {source.importance}
</span>
)}
{source.is_hereditary && (
<span className="source-detail hereditary">
<strong>遗传性:</strong> 是
</span>
)}
</div>
</div>
))}
</div>
);
}; |