KnowledgeBase/web/components/SearchResultsPanel.tsx

import React from 'react';
import { RagSearchResult } from '../services/ragService';
import { FileText, Star } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

interface SearchResultsPanelProps {
  results: RagSearchResult[];
  isVisible: boolean;
  onClose: () => void;
}

const SearchResultsPanel: React.FC<SearchResultsPanelProps> = ({ results, isVisible, onClose }) => {
  const { t } = useLanguage();
  
  if (!isVisible || results.length === 0) return null;

  return (
    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
      <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
        <div className="p-4 border-b border-slate-200 flex justify-between items-center">
          <h3 className="text-lg font-semibold text-slate-800">{t('searchResults')}</h3>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-600 text-xl"
          >
            ×
          </button>
        </div>
        
        <div className="overflow-y-auto max-h-[60vh] p-4 space-y-4">
          {results.map((result, index) => (
            <div key={index} className="border border-slate-200 rounded-lg p-4 hover:bg-slate-50">
              <div className="flex items-center gap-2 mb-2">
                <FileText className="w-4 h-4 text-blue-600" />
                <span className="font-medium text-slate-700">{result.fileName}</span>
                <div className="flex items-center gap-1 ml-auto">
                  <Star className="w-3 h-3 text-yellow-500" />
                  <span className="text-xs text-slate-500">{result.score.toFixed(3)}</span>
                </div>
              </div>
              <p className="text-sm text-slate-600 line-clamp-4">{result.content}</p>
              <div className="mt-2 text-xs text-slate-400">
                {t('chunkNumber')} #{result.chunkIndex + 1}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default SearchResultsPanel;