template-card.tsx

Overview

template-card.tsx defines a React functional component named TemplateCard that visually represents a flow template in a card format. This component is part of a UI library for displaying flow templates with localized titles and descriptions, an avatar, and an interactive button to trigger actions such as using or creating a flow based on the template.

The component is designed to be reusable within a larger application that manages or displays flow templates (likely a workflow or automation system). It handles localization, user interaction, and UI presentation cohesively.

Detailed Explanation

Component: TemplateCard

Purpose

TemplateCard displays information for a single flow template (IFlowTemplate). It shows an avatar, localized title and description, and a button that when clicked, triggers a modal to use or create a flow from this template.

Props

Internal Hooks & Variables

• useTranslation(): React-i18next hook used for internationalization to retrieve the localized string for the button label.

• useCallback: Memoizes the handleClick function to avoid unnecessary re-renders.

• useMemo: Memoizes the language selection from the i18n configuration, defaults to 'en' if none set.

JSX Structure

• Card: The outer container with styling and border.

• CardContent: Padding and layout wrapper for content inside the card.

• RAGFlowAvatar: Custom avatar component displaying the template’s avatar image or a default GitHub image.

• Title & Description: Localized title and description texts.

• Overlay with Button: A hidden overlay that appears on hover (group-hover CSS class) with a centered button labeled "Use Template" (localized) that triggers showModal.

Usage Example

import { TemplateCard } from './template-card';
import { IFlowTemplate } from '@/interfaces/database/flow';

const template: IFlowTemplate = {
  id: 'template1',
  avatar: 'https://example.com/avatar.png',
  title: { en: 'My Template', zh: '我的模板' },
  description: { en: 'A description in English.', zh: '中文描述。' },
  // other properties...
};

function onShowModal(template: IFlowTemplate) {
  console.log('Open modal for template:', template);
}

<TemplateCard data={template} showModal={onShowModal} />;

Implementation Details and Algorithms

• Localization Handling: The component uses the i18n module to detect the current language (en or zh) and then displays the title and description accordingly. This is done using useMemo to optimize performance by avoiding repeated language lookups.

• Performance Optimization: The handleClick callback is memoized with useCallback to prevent unnecessary re-renders of child components that might depend on this function.

• Conditional Avatar: If the template’s avatar URL is unavailable, a default avatar image (https://github.com/shadcn.png) is used to maintain visual consistency.

• CSS Interaction: The button to "Use Template" only appears when the user hovers over the card, achieved through Tailwind CSS utility classes (group-hover and positioning classes).

Interaction with Other Parts of the System

• IFlowTemplate Interface: The data prop data conforms to the IFlowTemplate interface, which likely defines the structure of flow templates stored in the database or fetched from an API.

• RAGFlowAvatar Component: Displays the avatar image and name initials. This is a reusable component imported from the shared components folder.

• UI Components: Uses shared UI components such as Card, CardContent, and Button from the UI library (@/components/ui/), ensuring consistent styling across the application.

• Localization (i18n and react-i18next): The file integrates with the localization framework for multi-language support.

• Modal Handling: The showModal function passed in props is expected to trigger a modal elsewhere in the app, enabling users to take action based on the selected template.

Visual Diagram

componentDiagram
    direction TB
    TemplateCard <|-- Card
    TemplateCard <|-- CardContent
    TemplateCard <|-- RAGFlowAvatar
    TemplateCard <|-- Button

    Card -- contains --> CardContent
    CardContent -- contains --> RAGFlowAvatar
    CardContent -- contains --> Title & Description Text
    CardContent -- contains --> OverlayButton

    RAGFlowAvatar : props.avatar
    RAGFlowAvatar : props.name

    Button : onClick = handleClick
    Button : label = t('flow.useTemplate')

    TemplateCard : props.data (IFlowTemplate)
    TemplateCard : props.showModal(record)

    note right of TemplateCard
      - Uses i18n.language for localization
      - Calls showModal(data) on button click
    end note

Summary

• template-card.tsx provides a localized, interactive card UI component for displaying flow templates.

• It handles avatar display, localization for English and Chinese, and user interaction to open a modal.

• The component relies on shared UI components and localization utilities.

• Optimized with React hooks (useCallback, useMemo) for performance.

• Designed to integrate seamlessly into a larger workflow or automation management system.

This file is primarily a presentational and interaction component within the flow template management UI.