index.tsx

Overview

index.tsx defines a React functional component named ChunkCard that visually represents and manages an individual "chunk" of data in a card format. This component provides interactive features including selection via a checkbox, toggling availability via a switch, editing on double-click, and displaying an associated image with a hover preview popover. It sanitizes and safely renders HTML content, accommodates different text display modes, and integrates with theming and state management hooks.

This file primarily serves as a UI component within a larger application handling "chunks" — discrete pieces of content stored in a knowledge database — enabling users to view, select, edit, and toggle these chunks efficiently.

Component: ChunkCard

Description

ChunkCard is a presentational and interactive UI component that renders a card with the following key elements:

• Checkbox for selecting the chunk.

• Image thumbnail with hover popover preview (if an image is associated).

• Content text with safe HTML rendering and optional ellipsis.

• Toggle switch to enable or disable chunk availability.

• Click and double-click handlers to trigger editing or selection behaviors.

The component manages local state for the toggle switch, syncs this state with external props, and communicates user interactions back to parent components via callback functions.

Props Interface: IProps

Internal State

• enabled (boolean): Reflects whether the chunk is currently enabled (availability toggle). Initialized and updated from item.available_int.

• open (boolean): Controls whether the image preview popover is open (visible).

Methods and Event Handlers

onChange(checked: boolean): void

• Purpose: Handles changes to the toggle switch that enables/disables the chunk.

• Parameters:

  • checked: New checked state of the switch.

• Behavior: Updates internal enabled state and triggers the switchChunk callback with availability toggled (if currently 0, switches to 1, else to 0) for this chunk's ID.

• Usage Example:

  <Switch checked={enabled} onCheckedChange={onChange} />
  

handleCheck(e: CheckedState): void

• Purpose: Handles checkbox state changes.

• Parameters:

  • e: The new checkbox state, which can be true, false, or 'indeterminate'.

• Behavior: Calls handleCheckboxClick with the chunk ID and a boolean checked state ('indeterminate' is treated as false).

• Usage Example:

  <Checkbox onCheckedChange={handleCheck} checked={checked} />
  

handleContentDoubleClick(): void

• Purpose: Invoked when the chunk content is double-clicked.

• Behavior: Calls the editChunk callback with the chunk's ID to trigger editing.

• Usage Example:

  <section onDoubleClick={handleContentDoubleClick}>...</section>
  

handleContentClick(): void

• Purpose: Invoked when the chunk content area is clicked.

• Behavior: Calls the clickChunkCard callback with the chunk's ID.

• Usage Example:

  <section onClick={handleContentClick}>...</section>
  

React Hooks Usage

• useState manages local state for enabled and image preview open state.

• useEffect syncs enabled state with item.available_int upon mount or when available changes.

• useTheme provides theming context, though theme is not directly used in rendering logic here.

Rendering Logic

• The root element is a styled Card component with dynamic background color classes depending on the selected prop.

• Checkbox is rendered on the left to allow selection.

• If item.image_id exists, a Popover wraps an Image component to show a thumbnail and a larger preview on hover.

• The content section:

  • Sanitizes and renders HTML from item.content_with_weight using DOMPurify to prevent XSS.

  • Applies ellipsis styling if textMode is set to ChunkTextMode.Ellipse.

  • Handles click and double-click events.

• A Switch toggles the chunk's availability.

Important Implementation Details

• Sanitization with DOMPurify: To safely render HTML content (item.content_with_weight), DOMPurify.sanitize is used to prevent XSS attacks.

• Conditional Popover: The image preview popover is only rendered if an image_id is present on the chunk.

• State Sync: The availability toggle (enabled) is initialized and kept in sync with the chunk's available_int value.

• Classnames utility: Used to apply conditional CSS classes dynamically based on props and state.

• Accessibility: The toggle switch has aria-readonly set, indicating a non-editable state to assistive technologies.

Interaction with Other Application Parts

• Data Model: Depends on IChunk interface which reflects a chunk entity from the knowledge database.

• UI Components: Composes reusable UI components (Card, Checkbox, Switch, Popover, Image) from the application UI library.

• Theme Provider: Uses useTheme hook to access theme info (though not visibly used here).

• Parent Components: Communicates user interactions (selection, toggling, editing) upward via prop callbacks (switchChunk, editChunk, handleCheckboxClick, clickChunkCard).

• Constants: Uses ChunkTextMode from a constants file to control text display.

• Styling: Imports scoped CSS module styles from index.less for layout and appearance.

Usage Example

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

const chunk = {
  chunk_id: 'abc123',
  content_with_weight: '<p>Example content</p>',
  available_int: 1,
  image_id: 'img001',
};

const MyComponent = () => {
  const [checked, setChecked] = useState(false);
  const [selected, setSelected] = useState(false);

  const switchChunk = (available, chunkIds) => {
    console.log('Switching availability:', available, chunkIds);
  };

  const editChunk = (chunkId) => {
    console.log('Edit chunk:', chunkId);
  };

  const handleCheckboxClick = (chunkId, checked) => {
    console.log('Checkbox clicked:', chunkId, checked);
    setChecked(checked);
  };

  const clickChunkCard = (chunkId) => {
    console.log('Chunk card clicked:', chunkId);
    setSelected(true);
  };

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

Mermaid Component Diagram

componentDiagram
    direction LR
    component ChunkCard {
      +props: IProps
      +state: enabled:boolean, open:boolean
      +onChange(checked:boolean): void
      +handleCheck(e: CheckedState): void
      +handleContentDoubleClick(): void
      +handleContentClick(): void
    }
    component Card
    component Checkbox
    component Switch
    component Popover
    component Image
    component DOMPurify

    ChunkCard --> Card
    ChunkCard --> Checkbox
    ChunkCard --> Switch
    ChunkCard --> Popover
    Popover --> Image
    ChunkCard --> Image
    ChunkCard --> DOMPurify

Summary

The index.tsx file provides a rich, interactive UI component (ChunkCard) for displaying and managing individual chunks of knowledge data. It balances user interaction (checkbox selection, toggling availability, editing) with safe content rendering and visual cueing (image previews, selection highlight). This component fits into a larger knowledge management system where chunks can be reviewed, selected, and edited efficiently.

The implementation follows React best practices, leverages reusable UI components, and ensures security by sanitizing HTML content before rendering. It also supports theme integration and flexible text display modes.

End of Documentation for index.tsx