Implementation:Infiniflow Ragflow TemplateSidebar Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Agent_System, UI_Components
Last Updated	2026-02-12 06:00 GMT

Overview

Category sidebar for agent templates page with enum-based menu configuration.

Description

This component renders a vertical sidebar navigation for the agent templates page, providing category-based filtering. It defines a `MenuItemKey` enum with seven categories (Recommended, Agent, Customer Support, Marketing, Consumer App, Ingestion Pipeline, Other) and constructs a `menuItems` configuration array mapping each category to a Lucide icon (Sparkle, Box, MessageCircleCode, ChartPie, Component, Route, PencilRuler), a translated label, and a key. The `SideBar` component renders each item as a `Button` with ghost or secondary variant based on active state, and displays a glowing purple indicator bar on the right edge of the selected item. Menu item labels are resolved via i18next translation keys derived from the enum values.

Usage

Used as a child component of the `AgentTemplates` page to provide category-based template filtering. The parent page passes the selected category and a change handler, and filters the template list based on the selected sidebar item.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/agents/template-sidebar.tsx
• Lines: 1-119

Signature

export enum MenuItemKey {
  Recommended = 'Recommended',
  Agent = 'Agent',
  CustomerSupport = 'Customer Support',
  Marketing = 'Marketing',
  ConsumerApp = 'Consumer App',
  Pipeline = 'Ingestion Pipeline',
  Other = 'Other',
}

export function SideBar({
  change,
  selected,
}: {
  change: (keyword: string) => void;
  selected?: string;
}): JSX.Element;

Import

import { SideBar, MenuItemKey } from '@/pages/agents/template-sidebar';

I/O Contract

Inputs

Name	Type	Required	Description
change	(keyword: string) => void	Yes	Callback invoked when a menu item is clicked, receiving the MenuItemKey string value.
selected	string	No	The currently selected menu item key. Defaults to MenuItemKey.Recommended.

Outputs

Name	Type	Description
JSX.Element	JSX.Element	A 303px wide aside element with vertically stacked category buttons, each with an icon, label, and active indicator.

Usage Examples

import { SideBar, MenuItemKey } from '@/pages/agents/template-sidebar';
import { useState } from 'react';

function AgentTemplatesPage() {
  const [selected, setSelected] = useState<string>(MenuItemKey.Recommended);

  return (
    <div className="flex">
      <SideBar change={setSelected} selected={selected} />
      <main>
        {/* Template cards filtered by selected category */}
      </main>
    </div>
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment