Overview

The Components module contains 252 reusable UI building blocks: Shadcn/ui primitives (buttons, dialogs, forms) and RAGFlow-specific components (graph canvas nodes, visual form builder). All components follow accessibility best practices and theme consistency via Tailwind CSS + localStorage-based theme switching.

🎨 Component Categories

📂 Component Organization

src/components/
├── ui/                      # Shadcn primitives
│   ├── button.tsx
│   ├── dialog.tsx
│   ├── select.tsx
│   └── ... 17+ primitives
├── canvas/                  # Graph node components
│   ├── NodeCard.tsx
│   ├── ContextMenu.tsx
│   └── Controls.tsx
├── xyflow/                  # React Flow wrappers
│   ├── Canvas.tsx
│   ├── NodeRenderer.tsx
│   └── EdgeRenderer.tsx
├── ragflow-form/            # Dynamic form builder
│   ├── FormBuilder.tsx
│   ├── FieldRenderer.tsx
│   └── validators/
├── layout/                  # App layout
│   ├── Sidebar.tsx
│   ├── Header.tsx
│   └── Modal.tsx
├── data/                    # Tables & lists
│   ├── DataTable.tsx
│   ├── VirtualList.tsx
│   └── EmptyState.tsx
└── icons/                   # Icon components (SVG wrapped)

🎨 Theming & Styling

Theme Key: All components use localStorage.neutra-ip-theme (values: "dark" or "light")

Tailwind CSS: Utility-first styling with custom theme configuration in tailwind.config.ts. CSS variables for colors injected at build time from src/styles/colors.less.

Dark/Light Toggle: Button in Header component; toggles data-theme attribute on <html>; CSS :root selector switches variable values.

:root {
    --bg: #0d1117;           /* Dark theme background */
    --surface: #161b22;
    --text: #c9d1d9;
    --accent: #58a6ff;
}

[data-theme="light"] {
    --bg: #ffffff;
    --surface: #f6f8fa;
    --text: #1f2328;
    --accent: #0969da;
}

♿ Accessibility Standards

• WCAG 2.1 AA: Radix/Shadcn components inherit accessible defaults (ARIA roles, focus management)
• Keyboard navigation: Tab through buttons, dialogs, forms; Enter to activate
• Color contrast: Text meets 4.5:1 contrast ratio (checked with axe DevTools)
• Alt text: Images have descriptive alt= attributes
• Screen reader: Semantic HTML; aria-labels for icon-only buttons

Common Patterns

Form with Validation

// Use react-hook-form + zod
const { register, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
    mode: 'onChange'
});

return (
    <Input {...register('email')} />
    {errors.email && <span>{errors.email.message}</span>}
);

Modal Dialog

const [open, setOpen] = useState(false);

return (
    <>
        <Button onClick={() => setOpen(true)}>Open</Button>
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogContent>
                <h2>Confirm</h2>
                <Button onClick={() => setOpen(false)}>Close</Button>
            </DialogContent>
        </Dialog>
    </>
);

Next Steps

• Browse Pages to see components in action
• Explore Services for data wiring patterns
• Deep-dive: API Data Layer for mutation/query integration

Components Module/{{SUBMOD_NAME}}/ — {{SUBMOD_TITLE}}

Contents

Architecture

flowchart TD
  A["Component A"] --> B["Component B"]
  B --> C["Component C"]
  C --> D["Component D"]

Key Classes

Data Structures

Interactions

Configuration

Directory Map

submod_name/
├── file_a.ext                 ← Role: brief annotation
├── file_b.ext                 ← Role: brief annotation
├── file_c.ext                 ← Role: brief annotation
└── index.ext                  ← Role: entry point

📑 Annotated Code Walkthrough

The most important code in this sub-module, annotated with WHY each piece exists:

// Replace with actual code from the source
void key_function() {
    // ← WHY: Explain the purpose of this line
    // ← WHY: What constraint or requirement drives this?
}

⚠️ Edge Cases & Boundaries

Deep-Dive Highlights

Core mechanisms from this sub-module have been extracted into dedicated focus pages for in-depth exploration. Each page covers one algorithm, protocol, or subsystem with diagrams, code walks, and configuration details.

Deep-Dive Pages

Code Examples

Example: Typical Usage

// Replace with actual code example
void example() {
    // ...
}