index.tsx

Overview

This file defines a React functional component named ChunkCard. The component represents a UI card element for displaying and interacting with a "chunk" of knowledge data, modeled by the IChunk interface. It provides several interactive features including:

Checkbox selection of the chunk.
Displaying an associated image with a preview popover.
Displaying sanitized HTML content with optional ellipsis styling.
Editing the chunk on double-click.
Clicking the chunk card to trigger additional logic.
A toggle switch to enable or disable the chunk (reflecting its "availability" state).

The component is styled with CSS modules and adapts its appearance based on the current UI theme (light or dark). It integrates with Ant Design UI components for consistent styling and behavior.

Detailed Explanation

Interfaces and Types

IProps

Describes the props expected by the ChunkCard component.

Prop Name	Type	Description
`item`	`IChunk`	The chunk data object to display. Includes content, ID, availability, image, etc.
`checked`	`boolean`	Whether the chunk is currently checked (selected).
`switchChunk`	(available?: number, chunkIds?: string[]) => void	Callback to toggle chunk availability status.
`editChunk`	(chunkId: string) => void	Callback to edit the chunk, triggered on content double-click.
`handleCheckboxClick`	(chunkId: string, checked: boolean) => void	Callback invoked on checkbox toggle to update selection state.
`selected`	`boolean`	Whether this chunk card is currently selected (affects styling).
`clickChunkCard`	(chunkId: string) => void	Callback for handling card click events.
`textMode`	`ChunkTextMode`	Enum controlling text display style (e.g., full text or ellipsis).

Component: `ChunkCard`

A functional React component that renders a single chunk card with selection, editing, and toggle capabilities.

Parameters

Destructured from IProps as props.

Internal State

enabled: boolean
Tracks if the chunk is enabled (available) or not. Initial state is derived from item.available_int.

Hooks

useTheme()
Custom hook to get current UI theme (dark or light).
useEffect
Syncs the internal enabled state with the available prop when it changes.

Event Handlers

onChange(checked: boolean)
Triggered by the Switch toggle. Updates enabled state and calls switchChunk callback with new availability (0/1) and chunk ID.
handleCheck(e: CheckboxChangeEvent)
Triggered when the checkbox is toggled. Calls handleCheckboxClick with chunk ID and checkbox state.
handleContentDoubleClick()
Invokes editChunk callback for editing the chunk.
handleContentClick()
Invokes clickChunkCard callback for click interaction.

JSX Structure

The entire chunk is wrapped in an Ant Design Card component.
Contains a Flex container with:
- Checkbox for selection.
- Conditional image display with a Popover that shows an enlarged preview on hover.
- A content section showing sanitized HTML content from item.content_with_weight.
- A Switch toggle to enable/disable the chunk.

Styling

Uses CSS modules for scoped styles from index.less.
Dynamic class names using classnames library based on theme and selection state.
Content text supports ellipsis style based on textMode prop.

Security

Uses DOMPurify.sanitize to safely inject HTML content, preventing XSS vulnerabilities.

Usage Example

import ChunkCard from './index';
import { IChunk } from '@/interfaces/database/knowledge';
import { ChunkTextMode } from '../../constant';

const chunk: IChunk = {
  chunk_id: '123',
  content_with_weight: '<p>Hello <strong>world</strong></p>',
  available_int: 1,
  image_id: 'img_456',
  // other IChunk properties...
};

const MyComponent = () => {
  const [selectedChunks, setSelectedChunks] = useState<string[]>([]);
  const [selectedChunkId, setSelectedChunkId] = useState<string | null>(null);

  const switchChunk = (available?: number, chunkIds?: string[]) => {
    // handle toggling chunk availability state
  };

  const editChunk = (chunkId: string) => {
    // open chunk editor modal
  };

  const handleCheckboxClick = (chunkId: string, checked: boolean) => {
    if (checked) {
      setSelectedChunks((prev) => [...prev, chunkId]);
    } else {
      setSelectedChunks((prev) => prev.filter((id) => id !== chunkId));
    }
  };

  const clickChunkCard = (chunkId: string) => {
    setSelectedChunkId(chunkId);
  };

  return (
    <ChunkCard
      item={chunk}
      checked={selectedChunks.includes(chunk.chunk_id)}
      switchChunk={switchChunk}
      editChunk={editChunk}
      handleCheckboxClick={handleCheckboxClick}
      selected={selectedChunkId === chunk.chunk_id}
      clickChunkCard={clickChunkCard}
      textMode={ChunkTextMode.Ellipse}
    />
  );
};

Important Implementation Details

State Synchronization: The component maintains its own enabled state reflecting the chunk availability. This is synchronized with the incoming item.available_int prop using useEffect. This avoids stale UI state when props change externally.
Sanitization: The chunk content is rendered with dangerouslySetInnerHTML after sanitizing with DOMPurify to protect against cross-site scripting (XSS) attacks.
Theming: The component reacts dynamically to theme changes (dark/light) via a custom useTheme hook, applying different CSS styles for selected cards to maintain UI consistency.
Image Preview: If the chunk has an associated image (image_id), it is displayed as a small thumbnail with a hoverable popover that shows a larger preview, enhancing UX.

Interaction with Other System Parts

IChunk Interface: The component relies on the IChunk interface which presumably represents a knowledge chunk fetched from a database or API.
Theme Provider: Uses useTheme from a theme provider component to adapt styling.
Chunk Management Callbacks: The parent component provides callbacks for toggling chunk availability, editing, selection management, and click interactions. This decouples the ChunkCard UI from business logic and state management.
Image Component: Uses a custom Image component to render images by ID, possibly handling caching, lazy loading, or other optimizations.
ChunkTextMode Enum: Controls display mode of content text (full or ellipsis), allowing flexible UI presentation.

Mermaid Diagram: Component Interaction Diagram

componentDiagram
    ChunkCard --|> React.Component
    ChunkCard o-- IChunk : prop "item"
    ChunkCard --> Checkbox : renders
    ChunkCard --> Switch : renders
    ChunkCard --> Popover : renders (if image)
    Popover --> Image : contains image preview
    ChunkCard --> Image : displays thumbnail image
    ChunkCard --> useTheme : uses for theme info
    ChunkCard --> DOMPurify : sanitizes HTML content

    %% Callbacks from props
    ChunkCard ..> switchChunk : callback on Switch toggle
    ChunkCard ..> editChunk : callback on content double-click
    ChunkCard ..> handleCheckboxClick : callback on Checkbox change
    ChunkCard ..> clickChunkCard : callback on chunk card click

Summary

The index.tsx file implements the ChunkCard React component, a reusable UI element for displaying, selecting, toggling, and editing chunks of knowledge data. It integrates with theme context, safely renders HTML content, supports image previews, and exposes multiple interaction callbacks for parent components to handle business logic. The component uses Ant Design UI elements and CSS modules for styling, ensuring consistent and theme-aware presentation.

This component is a central piece in knowledge chunk management UIs, facilitating user interaction with chunk data in a rich and secure manner.