1  import React, { useState, useEffect } from 'react';
 2  import { BLACK, BLUE, WHITE } from '../constants/colors';
 3  import SearchComponent from './SemanticSearch/src/SearchComponent';
 4  
 5  const SearchPanel = ({ isOpen, onSearch, onClose, repoNames }) => {
 6    const [searchResults, setSearchResults] = useState([]);
 7  
 8    useEffect(() => {
 9      const handleEscape = (event) => {
10        if (event.key === 'Escape') {
11          onClose();
12          onSearch([]); // Reset search results
13        }
14      };
15  
16      window.addEventListener('keydown', handleEscape);
17      return () => {
18        window.removeEventListener('keydown', handleEscape);
19      };
20    }, [onClose, onSearch]);
21  
22    if (!isOpen) return null;
23  
24    const handleSearchStart = () => {
25      // You can add any logic needed when search starts
26    };
27  
28    const handleSearchComplete = (results) => {
29      const formattedResults = results.map(([name, similarity]) => ({
30        repoName: name,
31        similarity: similarity
32      }));
33      console.log('Formatted search results in SearchPanel:', formattedResults);
34      setSearchResults(formattedResults);
35      onSearch(formattedResults); // Pass the semantic search results to the main app
36    };
37  
38    return (
39      <div style={{
40        position: 'fixed',
41        top: '10px',
42        left: '50%',
43        transform: 'translateX(-50%)',
44        backgroundColor: BLACK,
45        color: WHITE,
46        padding: '10px',
47        borderRadius: '8px',
48        zIndex: 1000,
49        boxShadow: `0 0 0 2px ${BLUE}`,
50      }}>
51        <SearchComponent
52          maxResults={5} // You can adjust this or make it a prop
53          targets={repoNames} // Provide the repo names as targets for semantic search
54          onSearchStart={handleSearchStart}
55          onSearchComplete={handleSearchComplete}
56        />
57        {/* Display search results */}
58        <div style={{ marginTop: '10px', maxHeight: '300px', overflowY: 'auto' }}>
59          {searchResults.map(({ repoName, similarity }) => (
60            <div key={repoName} style={{ marginBottom: '5px' }}>
61              {repoName}: {similarity.toFixed(4)}
62            </div>
63          ))}
64        </div>
65      </div>
66    );
67  };
68  
69  export default SearchPanel;