Incoporated reasoning into frontend correctly

frontend/src/components/MatchesList.tsx

@@ -1,13 +1,16 @@
-// src/components/MatchesList.tsx
-
 import React from 'react';
-import { MatchedQAPair } from '../interfaces';
+import { MatchedChunk, MatchedQAPair } from '../interfaces';
 
 interface MatchesListProps {
-  matches: MatchedQAPair[]; // Assuming all matches have 'question' and 'answer'
+  matches: (MatchedChunk | MatchedQAPair)[];
   onMatchClick: (pageNumber: number) => void;
 }
 
+// Type guard to check if a match is of type MatchedChunk
+const isMatchedChunk = (match: MatchedChunk | MatchedQAPair): match is MatchedChunk => {
+  return (match as MatchedChunk).explanation !== undefined;
+};
+
 const MatchesList: React.FC<MatchesListProps> = ({
   matches,
   onMatchClick,
@@ -30,7 +33,15 @@ const MatchesList: React.FC<MatchesListProps> = ({
               <strong>
                 Rank {match.rank}, Page {match.page_number}:
               </strong>{' '}
-              {match.question}
+              {/* Use type guard to check if match is MatchedChunk */}
+              {isMatchedChunk(match) ? (
+                <p>{match.explanation}</p>
+              ) : (
+                <>
+                  <p><strong>Question:</strong> {match.question}</p>
+                  <p><strong>Answer:</strong> {match.answer}</p>
+                </>
+              )}
             </button>
           </li>
         ))}

frontend/src/components/SearchResultCard.tsx

@@ -9,7 +9,7 @@ interface SearchResultCardProps {
 }
 
 const SearchResultCard: FC<SearchResultCardProps> = ({ result, onClick, isSelected, precisionSearch }) => {
-  const matchType = precisionSearch ? 'QA Matches' : 'Page Matches';
+  const matchType = precisionSearch ? 'Matches' : 'Matches';
 
   return (
     <div