Implementation:Infiniflow Ragflow Memories Page
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Memory |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Memories list page with CRUD operations, pagination, and card-based layout.
Description
This page component displays the user's memory collections in a card-based grid layout. It features an empty state with a prominent create action when no memories exist, a `ListFilterBar` with search input and filter dropdowns (owner, memory type, storage type), paginated memory cards via `RAGFlowPagination`, and an `AddOrEditModal` dialog for creating and editing memories. The component manages add/edit mode state, delegates CRUD operations to the `useRenameMemory` hook (which handles both creation and updating), and supports URL-based auto-open of the create modal via the `isCreate` search parameter. Each memory is rendered as a `MemoryCard` component with an edit action that opens the modal in edit mode pre-populated with the memory's current data.
Usage
Served as the main memories management page in the application. Users navigate here to view, search, create, and edit their memory collections. The page is also deep-linkable with `?isCreate=true` to auto-open the creation dialog.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/memories/index.tsx
- Lines: 1-173
Signature
export default function MemoryList(): JSX.Element;
Import
import MemoryList from '@/pages/memories/index';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| URL search param: isCreate | string | No | When set to "true", auto-opens the create memory modal on page load. |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | JSX.Element | Full page layout with conditional empty state, filter bar, memory card grid, pagination footer, and add/edit modal. |
Usage Examples
// In route configuration (UmiJS routes)
{
path: '/memories',
component: '@/pages/memories/index',
}
// Deep-link to auto-open create modal
// Navigate to: /memories?isCreate=true
// The page automatically fetches and displays memory list
// using useFetchMemoryList hook with search, filter, and pagination