Add document content viewer to Sources page

Implement a modal that displays full document details
when clicking the view icon in the Sources table. This
allows to inspect all fields of individual documents
fetched from Elasticsearch, providing deeper insights
into the indexed content.

src/components/sources/DocumentModal.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  Text,
+  Link,
+  UnorderedList,
+  ListItem,
+  Box,
+  VStack,
+} from "@chakra-ui/react";
+
+interface DocumentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  document: Record<string, any> | null;
+  isLoading: boolean;
+  isError: boolean;
+  error?: string;
+}
+
+const formatValue = (value: any): string => {
+  if (typeof value === "string") {
+    return value;
+  } else if (typeof value === "number" || typeof value === "boolean") {
+    return value.toString();
+  } else if (value instanceof Date) {
+    return value.toISOString();
+  } else if (Array.isArray(value)) {
+    return "[Array]";
+  } else if (typeof value === "object" && value !== null) {
+    return "[Object]";
+  }
+  return "";
+};
+
+const RenderField = ({ name, value }: { name: string; value: any }) => {
+  if (Array.isArray(value)) {
+    return (
+      <Box mb={2}>
+        <Text fontWeight="bold">{name}:</Text>
+        <UnorderedList ml={5}>
+          {value.map((item, index) => (
+            <ListItem key={index}>
+              {typeof item === "object" ? (
+                <RenderObject object={item} />
+              ) : (
+                formatValue(item)
+              )}
+            </ListItem>
+          ))}
+        </UnorderedList>
+      </Box>
+    );
+  } else if (typeof value === "object" && value !== null) {
+    return (
+      <Box mb={2}>
+        <Text fontWeight="bold">{name}:</Text>
+        <Box ml={4}>
+          <RenderObject object={value} />
+        </Box>
+      </Box>
+    );
+  } else {
+    return (
+      <Text mb={2}>
+        <Text as="span" fontWeight="bold">
+          {name}:
+        </Text>{" "}
+        {formatValue(value)}
+      </Text>
+    );
+  }
+};
+
+const RenderObject = ({ object }: { object: Record<string, any> }) => {
+  return (
+    <VStack align="stretch" spacing={2}>
+      {Object.entries(object).map(([key, value]) => (
+        <RenderField key={key} name={key} value={value} />
+      ))}
+    </VStack>
+  );
+};
+
+const DocumentModal: React.FC<DocumentModalProps> = ({
+  isOpen,
+  onClose,
+  document,
+  isLoading,
+  isError,
+  error,
+}) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior="inside">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{document?.title || "Document Details"}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          {isLoading && <Text>Loading document content...</Text>}
+          {isError && (
+            <Text color="red.500">Error loading document: {error}</Text>
+          )}
+          {!isLoading && !isError && document && (
+            <VStack align="stretch" spacing={4}>
+              {document.url && (
+                <Link
+                  href={document.url}
+                  isExternal
+                  color="blue.500"
+                  _hover={{ textDecoration: "underline" }}
+                >
+                  {document.url}
+                </Link>
+              )}
+              <RenderObject object={document} />
+            </VStack>
+          )}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default DocumentModal;

src/components/sources/Documents.tsx

@@ -1,6 +1,10 @@
 import React, { useState } from "react";
+import { FaEye } from "react-icons/fa";
+
 import { useSourceDocuments } from "@/hooks/useSourceDocuments";
+import { useDocumentContent } from "@/hooks/useDocumentContent";
 import { formatTimeAgo } from "@/utils/dateUtils";
+import DocumentModal from "./DocumentModal";
 
 interface SourceDocumentsProps {
   domain: string;
@@ -19,13 +23,26 @@ const Documents: React.FC<SourceDocumentsProps> = ({ domain }) => {
   const [page, setPage] = useState(1);
   const { sourceDocuments, total, isLoading, isError, error } =
     useSourceDocuments(domain, page);
+  const [selectedDocumentUrl, setSelectedDocumentUrl] = useState<string | null>(
+    null
+  );
+  const {
+    documentContent,
+    isLoading: isContentLoading,
+    isError: isContentError,
+    error: contentError,
+  } = useDocumentContent(selectedDocumentUrl);
 
   if (isLoading) return <div>Loading source documents...</div>;
   if (isError)
     return <div>Error loading source documents: {error.message}</div>;
 
   const totalPages = Math.ceil(total / 10);
 
+  const handleViewDocument = (url: string) => {
+    setSelectedDocumentUrl(url);
+  };
+
   return (
     <div className="mt-4">
       <h3 className="text-lg font-semibold mb-2">Documents for {domain}</h3>
@@ -42,6 +59,7 @@ const Documents: React.FC<SourceDocumentsProps> = ({ domain }) => {
               <th className="px-4 py-2 border-b border-custom-stroke whitespace-nowrap">
                 Indexed At
               </th>
+              <th className="w-10 px-2 py-2 border-b border-custom-stroke"></th>
             </tr>
           </thead>
           <tbody>
@@ -80,6 +98,15 @@ const Documents: React.FC<SourceDocumentsProps> = ({ domain }) => {
                     </span>
                   </div>
                 </td>
+                <td className="w-10 px-2 py-2 border-b border-custom-stroke text-center">
+                  <button
+                    onClick={() => handleViewDocument(doc.url)}
+                    className="text-custom-accent hover:text-custom-accent-dark"
+                    title="View document"
+                  >
+                    <FaEye className="w-5 h-5 inline-block" />
+                  </button>
+                </td>
               </tr>
             ))}
           </tbody>
@@ -104,6 +131,14 @@ const Documents: React.FC<SourceDocumentsProps> = ({ domain }) => {
           Next
         </button>
       </div>
+      <DocumentModal
+        isOpen={!!selectedDocumentUrl}
+        onClose={() => setSelectedDocumentUrl(null)}
+        document={documentContent}
+        isLoading={isContentLoading}
+        isError={isContentError}
+        error={contentError?.message}
+      />
     </div>
   );
 };

src/hooks/useDocumentContent.ts

@@ -0,0 +1,39 @@
+import { useQuery } from "@tanstack/react-query";
+
+interface DocumentContent {
+  title: string;
+  url: string;
+  content: string;
+  indexed_at: string;
+}
+
+const fetchDocumentContent = async (url: string): Promise<DocumentContent> => {
+  const response = await fetch("/api/elasticSearchProxy/getDocumentContent", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ url }),
+  });
+  const data = await response.json();
+  if (!data.success) throw new Error(data.message);
+  return data.data;
+};
+
+export const useDocumentContent = (url: string) => {
+  const { data, isLoading, isError, error } = useQuery<DocumentContent, Error>({
+    queryKey: ["documentContent", url],
+    queryFn: () => fetchDocumentContent(url),
+    enabled: !!url,
+    cacheTime: Infinity,
+    staleTime: Infinity,
+    refetchOnWindowFocus: false,
+  });
+
+  return {
+    documentContent: data,
+    isLoading,
+    isError,
+    error,
+  };
+};

src/pages/api/elasticSearchProxy/getDocumentContent.ts

@@ -0,0 +1,55 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { client } from "@/config/elasticsearch";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({
+      error:
+        "Invalid request method. This endpoint only supports POST requests.",
+    });
+  }
+
+  const { url } = req.body;
+
+  if (!url) {
+    return res.status(400).json({
+      error: "URL is required",
+    });
+  }
+
+  try {
+    const result = await client.search({
+      index: process.env.INDEX,
+      body: {
+        query: {
+          term: { "url.keyword": url },
+        },
+        size: 1,
+      },
+    });
+
+    if (result.hits.hits.length === 0) {
+      return res.status(404).json({
+        success: false,
+        message: "Document not found",
+      });
+    }
+
+    const document = result.hits.hits[0]._source;
+
+    return res.status(200).json({
+      success: true,
+      data: document,
+    });
+  } catch (error) {
+    console.error(error);
+    return res.status(400).json({
+      success: false,
+      message:
+        error.message || "An error occurred while fetching document content",
+    });
+  }
+}