index.tsx

Overview

index.tsx defines the ChunkCard React functional component, which renders a user interface card representing a single "chunk" of content (likely a piece of knowledge or data). This component is part of a larger system managing knowledge chunks, allowing users to view, select, edit, and toggle the availability of these chunks.

Key functionalities include:

Displaying chunk content with optional image preview.
Allowing selection via checkbox.
Enabling/disabling the chunk via a switch.
Supporting user interactions like clicking and double-clicking on the chunk content to trigger editing or selection.
Rendering content securely using DOMPurify to sanitize HTML.
Adapting styles dynamically based on theme (dark/light) and selection state.

This component integrates Ant Design UI elements and custom hooks for theme management.

Component: `ChunkCard`

Description

ChunkCard is a presentational and interactive card component designed to display an individual chunk of knowledge data, including its content, image (if available), and controls to toggle availability and selection.

It visually represents a chunk and handles user interactions, delegating state changes and actions to callbacks passed as props.

Props Interface: `IProps`

Prop Name	Type	Description
`item`	`IChunk`	The chunk data object containing content, IDs, availability, and image references.
`checked`	`boolean`	Indicates if the chunk is currently selected (checked).
`switchChunk`	(available?: number, chunkIds?: string[]) => void	Callback to toggle chunk availability, receives new availability state and chunk IDs.
`editChunk`	(chunkId: string) => void	Callback to trigger editing of the chunk by ID.
`handleCheckboxClick`	(chunkId: string, checked: boolean) => void	Callback when the checkbox is toggled, providing the chunk ID and new checked state.
`selected`	`boolean`	Indicates if the chunk card is currently selected (for UI styling).
`clickChunkCard`	(chunkId: string) => void	Callback when the chunk card content is clicked (single click).
`textMode`	`ChunkTextMode`	Enum value controlling how the chunk content text is displayed (e.g., truncated or full).

Usage Example

import { ChunkCard } from './index';
import { ChunkTextMode } from '../../constant';

const chunkItem = {
  chunk_id: 'abc123',
  content_with_weight: '<p>Chunk content here</p>',
  available_int: 1,
  image_id: 'img456',
  // ... other IChunk properties
};

function onSwitchChunk(available?: number, chunkIds?: string[]) {
  console.log('Switch chunk availability:', available, chunkIds);
}

function onEditChunk(chunkId: string) {
  console.log('Edit chunk:', chunkId);
}

function onCheckboxClick(chunkId: string, checked: boolean) {
  console.log('Checkbox clicked:', chunkId, checked);
}

function onClickChunkCard(chunkId: string) {
  console.log('Chunk card clicked:', chunkId);
}

<ChunkCard
  item={chunkItem}
  checked={false}
  switchChunk={onSwitchChunk}
  editChunk={onEditChunk}
  handleCheckboxClick={onCheckboxClick}
  selected={false}
  clickChunkCard={onClickChunkCard}
  textMode={ChunkTextMode.Ellipse}
/>;

Internal State and Variables

enabled (boolean): Local state mirroring chunk availability, used to control the Switch UI.
available (number): Derived from item.available_int, interpreted as 0 or 1 for disabled/enabled.
theme (string): Current UI theme ('dark' or other), obtained from useTheme() context hook, used for conditional styling.

Methods and Handlers

Method Name	Description	Parameters	Returns
`onChange`	Handler for the Switch toggle. Updates `enabled` state and calls `switchChunk` callback with updated availability.	`checked: boolean`	`void`
`handleCheck`	Handler for Checkbox change event. Calls `handleCheckboxClick` with chunk ID and checked state.	`e: CheckboxChangeEvent`	`void`
`handleContentDoubleClick`	Handler for double-click events on chunk content. Invokes `editChunk` callback for editing.	None	`void`
`handleContentClick`	Handler for single-click events on chunk content. Invokes `clickChunkCard` callback.	None	`void`

Render Structure

Card (from Ant Design)
- Applies dynamic CSS classes based on theme and selection status using classnames.
Flex container (Ant Design's Flex component)
- Contains:
  - Checkbox: For selecting the chunk.
  - Image with Popover: If item.image_id exists, displays a small image thumbnail that on hover shows a larger preview in a popover.
  - Content section:
    - Displays sanitized HTML content (item.content_with_weight) using dangerouslySetInnerHTML with DOMPurify sanitation.
    - Supports single and double click handlers.
    - Applies ellipsis text style if textMode is set to Ellipse.
  - Switch: Toggles chunk availability (enabled/disabled).

Implementation Details

Sanitization: The chunk content HTML is sanitized using DOMPurify before injecting into the DOM to prevent XSS attacks.
Theming Support: Uses a custom useTheme hook to apply different styles depending on light or dark mode.
Conditional Styling: Uses classnames to merge CSS classes dynamically for selected state and theme.
State Synchronization: The component initializes enabled state based on item.available_int via useEffect and updates it when availability changes.
Image Handling: Uses a custom Image component for rendering images by ID, wrapped in an Ant Design Popover to display a preview on hover.
Accessibility: Click and double-click handlers are attached to the content section for intuitive editing and selection.

Interaction with Other System Components

IChunk Interface: Represents the chunk data structure with properties like chunk_id, content_with_weight, available_int, and image_id.
useTheme Hook: Provides theme context used for styling.
Image Component: Used to render images by their ID, allowing preview functionality.
Ant Design UI Library: Utilizes components like Card, Checkbox, Flex, Popover, and Switch for building the UI.
Callbacks: Relies on parent components or context to handle actions like editing chunks, switching availability, checkbox toggling, and clicking chunk cards. This allows it to remain a reusable and controlled component.

Visual Diagram

componentDiagram
    ChunkCard <|-- React.FC

    ChunkCard : +props: IProps
    ChunkCard : +state: enabled:boolean
    ChunkCard : +onChange(checked:boolean): void
    ChunkCard : +handleCheck(e): void
    ChunkCard : +handleContentDoubleClick(): void
    ChunkCard : +handleContentClick(): void

    ChunkCard -- "uses" --> Checkbox
    ChunkCard -- "uses" --> Switch
    ChunkCard -- "uses" --> Card
    ChunkCard -- "uses" --> Flex
    ChunkCard -- "uses" --> Popover
    ChunkCard -- "uses" --> Image
    ChunkCard -- "uses" --> DOMPurify
    ChunkCard -- "uses" --> useTheme

    ChunkCard ..> IChunk : via prop "item"
    ChunkCard ..> ChunkTextMode : via prop "textMode"

Summary

index.tsx defines a theme-aware, interactive React card component (ChunkCard) that displays and manages a single knowledge chunk's content, image, selection, and availability. It is a controlled component reliant on parent callbacks for state management and integrates with custom and third-party UI utilities to provide a rich user experience.

This component serves as a fundamental UI building block in applications dealing with chunked knowledge or data entities, enabling users to efficiently browse, select, edit, and toggle chunks.