index.tsx

Overview

index.tsx defines a React functional component named PdfDrawer, which provides a modal dialog interface to preview document chunks, particularly PDF files or other supported document types. This component integrates with several custom hooks and components to fetch the document URL, retrieve chunk-specific highlights, and render the document preview with these highlights inside a modal window.

The file's primary purpose is to display a detailed preview of a document chunk, showing highlights and metadata, in a user-friendly modal popup. It is part of a larger system that manages documents split into chunks, possibly for knowledge management or chat-based applications.

Detailed Explanation

Interfaces and Types

IProps

Extends the generic modal properties interface IModalProps<any>, adding:

• documentId: string
  The unique identifier of the document to preview.

• chunk: IChunk & IReferenceChunk & { docnm_kwd: string; document_name: string }
  The chunk of the document to display, combining knowledge and reference chunk interfaces, with additional fields for the document name keywords and full document name.

Functions

getFileExtensionRegex(filename: string): string

Extracts and returns the file extension from a given filename string.

• Parameters

  • filename: The name of the file including extension, e.g., "document.pdf".

• Returns

  • The lowercase file extension string without the dot, e.g., "pdf".

  • Returns an empty string if no extension is found.

• Implementation Details
  Uses a regular expression to find the last occurrence of a dot and capture the following characters until the end of the string.

• Example Usage

const extension = getFileExtensionRegex("report.docx"); // returns "docx"
const noExt = getFileExtensionRegex("README"); // returns ""

Components

PdfDrawer

A React functional component displaying a modal with a document preview.

• Props (IProps)

  • visible: boolean (default false) — Controls modal visibility.

  • hideModal: () => void — Callback to close the modal.

  • documentId: string — The document's unique ID used to fetch the URL.

  • chunk: IChunk & IReferenceChunk & { docnm_kwd: string; document_name: string } — Document chunk data including the document name.

• State

  • fileType: string — Stores the detected file extension of the document chunk.

• Hooks used

  • useGetDocumentUrl(documentId) — Returns a function that retrieves the document's URL.

  • useGetChunkHighlights(chunk) — Returns highlights for the chunk and a method to set the display dimensions.

  • useEffect — Detects and sets the file extension whenever chunk document names change.

• Rendering

  • Displays a Modal component with:

    • Title showing an icon (via FileIcon) and the document's name.

    • Content rendered by a DocumentPreview component, which shows the document content with highlights and handles layout sizing.

• Usage Example

<PdfDrawer
  visible={true}
  hideModal={() => setShowModal(false)}
  documentId="1234"
  chunk={{
    id: 'chunk1',
    content: '...',
    docnm_kwd: 'example.pdf',
    document_name: 'example.pdf',
    // other IChunk and IReferenceChunk fields
  }}
/>

Important Implementation Details

• The file type detection relies on the docnm_kwd or document_name fields of the chunk to determine the file extension, which implies these fields must contain a valid filename or keyword with extension.

• The URL fetching and highlights retrieval are abstracted behind custom hooks (useGetDocumentUrl and useGetChunkHighlights), allowing this component to remain declarative and focused on presentation.

• The DocumentPreview component receives a calculated height (calc(100dvh - 300px)) to ensure it fits well within the viewport and modal constraints, improving UX.

• The modal's footer is disabled (showfooter={false}), focusing user attention on the document content.

Interaction with Other System Components

• Hooks Interaction

  • useGetDocumentUrl(documentId) is presumably a hook that fetches or constructs the URL to the actual document resource, possibly from a backend or cloud storage.

  • useGetChunkHighlights(chunk) manages fetching and applying highlights related to the chunk, supporting interactive or contextual display of document excerpts.

• UI Components

  • Modal is a generic modal dialog component used application-wide for popups.

  • FileIcon visually represents the file type via an icon, enhancing recognition.

  • DocumentPreview is responsible for rendering the file content itself, likely handling multiple file types and rendering highlights.

• Data Interfaces

  • The component depends on interfaces IChunk and IReferenceChunk which represent document chunk data structures used elsewhere in the system, indicating that this file is part of a modular document management or knowledge system.

Visual Diagram

componentDiagram
    component PdfDrawer {
      +visible: boolean
      +hideModal(): void
      +documentId: string
      +chunk: IChunk & IReferenceChunk & { docnm_kwd, document_name }
      +fileType: string (state)
    }
    component Modal {
      +title: ReactNode
      +onCancel: function
      +open: boolean
      +showfooter: boolean
      -- renders -->
      DocumentPreview
    }
    component DocumentPreview {
      +fileType: string
      +highlights: Highlight[]
      +setWidthAndHeight: function
      +url: string
    }
    component Hooks {
      useGetDocumentUrl()
      useGetChunkHighlights()
    }
    PdfDrawer --> Modal
    Modal --> DocumentPreview
    PdfDrawer --> Hooks
    PdfDrawer --> FileIcon

Summary

index.tsx provides a focused UI component (PdfDrawer) for previewing document chunks inside a modal window with highlight support. It acts as a bridge between document data, metadata extraction (file type), and rendering logic abstracted in hooks and child components. This file is a crucial part of document chunk visualization in the application, leveraging modular hooks and reusable UI components for maintainability and extensibility.