index.tsx

Overview

index.tsx defines a React functional component named ChunkCard that renders an interactive card displaying a "chunk" of knowledge content. Each chunk card presents rich content that may include sanitized HTML text and an optional image with a preview popover. The card allows users to:

Select/deselect the chunk via a checkbox.
Toggle its availability state via a switch.
Edit the chunk by double-clicking its content.
Trigger a chunk selection event by clicking the content.
Preview an associated image on hover.

The component adapts visually to the application's current theme (light/dark) and supports different text display modes. It leverages several UI components from the project’s design system and uses React hooks for state management.

Component: `ChunkCard`

Purpose

ChunkCard is a reusable UI component designed to display and manage an individual chunk of knowledge data (IChunk). It provides selection, availability toggling, editing, and detailed content viewing functionalities, making it a core interactive element in chunk-based knowledge management interfaces.

Props

Prop	Type	Description
`item`	`IChunk`	The chunk data object containing content, availability, IDs, and optional image reference.
`checked`	`boolean`	Whether the chunk's checkbox is currently checked (selected).
`switchChunk`	(available?: number, chunkIds?: string[]) => void	Callback to toggle chunk availability. Receives the new availability state and chunk IDs.
`editChunk`	(chunkId: string) => void	Callback invoked to edit the chunk, triggered by double-clicking the content.
`handleCheckboxClick`	(chunkId: string, checked: boolean) => void	Callback triggered when the checkbox is clicked to select/deselect the chunk.
`selected`	`boolean`	Whether the chunk card is currently selected (affects styling).
`clickChunkCard`	(chunkId: string) => void	Callback triggered when the chunk content is clicked.
`textMode`	`ChunkTextMode`	Enum controlling the text display mode, e.g., full text or ellipsis/truncated text.

Internal State

enabled (boolean): Tracks if the chunk is enabled (available). Controlled both by prop changes and user toggling via the switch.
open (boolean): Controls the visibility of the popover that shows an enlarged image preview when hovering over the chunk image.

Methods and Handlers

Method	Parameters	Description
onChange	`checked: boolean`	Updates the `enabled` state and calls `switchChunk` to toggle chunk availability.
`handleCheck`	`e: CheckedState`	Handles checkbox changes, mapping 'indeterminate' to false, and calls `handleCheckboxClick` with the new state.
handleContentDoubleClick	None	Invokes `editChunk` callback with this chunk's ID for editing.
handleContentClick	None	Invokes `clickChunkCard` callback with this chunk's ID for selection or other click behavior.

Usage Example

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

const chunkData = {
  chunk_id: '123',
  content_with_weight: '<p>This is some <strong>rich</strong> chunk content.</p>',
  available_int: 1,
  image_id: 'img_001',
  // ... other IChunk fields
};

function onSwitchChunk(available, chunkIds) {
  console.log('Switch chunk availability:', available, chunkIds);
}

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

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

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

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

Implementation Details

Sanitized HTML Content: Uses DOMPurify to sanitize the chunk's HTML content (content_with_weight) before rendering using dangerouslySetInnerHTML to prevent XSS attacks.
Theme Awareness: Applies selected styling based on the current theme (light or dark) retrieved from useTheme hook.
Image Preview Popover: If the chunk has an image (image_id), the component renders a small image with a popover that shows a larger preview on mouse hover.
Checkbox and Switch Controls: The checkbox allows multi-selection of chunks, while the switch toggles chunk availability. Both trigger callback props to notify parent components.
State Synchronization: Syncs the internal enabled state with the available_int field from the chunk item whenever it changes.
Class Names: Uses classnames package and CSS modules (index.less) for conditional styling.

Interaction with Other System Parts

Data Interfaces: Relies on IChunk interface from the knowledge database layer, ensuring the chunk data structure is consistent.
UI Components: Integrates with shared UI components such as Card, Checkbox, Switch, Popover, and Image from the project's component library.
Theme Provider: Uses useTheme hook from the theme provider to adapt styles dynamically.
Constants: Uses ChunkTextMode enum for text display logic.
Parent Components: Interacts via callbacks (switchChunk, editChunk, handleCheckboxClick, clickChunkCard) to communicate user interactions back to higher-level components or state managers.

Visual Diagram: Component Interaction Diagram

componentDiagram
    direction LR

    ChunkCard <|-- Card
    ChunkCard *-- Checkbox
    ChunkCard *-- Switch
    ChunkCard *-- Popover
    Popover *-- PopoverTrigger
    Popover *-- PopoverContent
    ChunkCard *-- Image

    ChunkCard : props.item (IChunk)
    ChunkCard : props.checked (boolean)
    ChunkCard : props.selected (boolean)
    ChunkCard : props.textMode (ChunkTextMode)
    ChunkCard : props.switchChunk()
    ChunkCard : props.editChunk()
    ChunkCard : props.handleCheckboxClick()
    ChunkCard : props.clickChunkCard()

    ChunkCard --> ThemeProvider : useTheme()
    ChunkCard --> DOMPurify : sanitize HTML content

Summary

index.tsx implements a versatile, theme-aware React component for displaying knowledge chunks with interactive selection, availability toggling, and editing capabilities. It effectively combines sanitized HTML rendering, image preview popovers, and rich UI controls to provide a polished user experience. The component serves as a building block for chunk-based knowledge management interfaces, communicating user actions back to parent components for state management and processing.