Feat: Memory-message supports categorized display (#12482)

### What problem does this PR solve?

Feat: Memory-message supports categorized display

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/memory/memory-message/interface.ts

@@ -2,7 +2,6 @@ export interface IMessageInfo {
   message_id: number;
   message_type: 'semantic' | 'raw' | 'procedural';
   source_id: string | '-';
-  id: string;
   user_id: string;
   agent_id: string;
   agent_name: string;
@@ -11,6 +10,7 @@ export interface IMessageInfo {
   invalid_at: string;
   forget_at: string;
   status: boolean;
+  extract?: IMessageInfo[];
 }
 
 export interface IMessageTableProps {

web/src/pages/memory/memory-message/message-table.tsx

@@ -17,15 +17,19 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Pagination } from '@/interfaces/common';
+import { cn } from '@/lib/utils';
 import { replaceText } from '@/pages/dataset/process-log-modal';
 import { MemoryOptions } from '@/pages/memories/constants';
 import {
   ColumnDef,
   ColumnFiltersState,
+  ExpandedState,
+  Row,
   SortingState,
   VisibilityState,
   flexRender,
   getCoreRowModel,
+  getExpandedRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
@@ -33,7 +37,13 @@ import {
 } from '@tanstack/react-table';
 import { t } from 'i18next';
 import { pick } from 'lodash';
-import { Copy, Eraser, TextSelect } from 'lucide-react';
+import {
+  Copy,
+  Eraser,
+  ListChevronsDownUp,
+  ListChevronsUpDown,
+  TextSelect,
+} from 'lucide-react';
 import * as React from 'react';
 import { useMemo, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -74,15 +84,55 @@ export function MemoryTable({
     handleClickMessageContentDialog,
   } = useMessageAction();
 
+  const disabledRowFunc = (row: Row<IMessageInfo>) => {
+    return row.original.forget_at !== 'None' && !!row.original.forget_at;
+  };
   // Define columns for the memory table
   const columns: ColumnDef<IMessageInfo>[] = useMemo(
     () => [
       {
         accessorKey: 'session_id',
-        header: () => <span>{t('memory.messages.sessionId')}</span>,
+        header: ({ table }) => (
+          <div className="flex items-center gap-1">
+            <button
+              {...{
+                onClick: table.getToggleAllRowsExpandedHandler(),
+              }}
+            >
+              {table.getIsAllRowsExpanded() ? (
+                <ListChevronsDownUp size={16} />
+              ) : (
+                <ListChevronsUpDown size={16} />
+              )}
+            </button>{' '}
+            <span>{t('memory.messages.sessionId')}</span>
+          </div>
+        ),
         cell: ({ row }) => (
-          <div className="text-sm font-medium ">
-            {row.getValue('session_id')}
+          <div className="flex items-center gap-1">
+            {row.getCanExpand() ? (
+              <button
+                {...{
+                  onClick: row.getToggleExpandedHandler(),
+                  style: { cursor: 'pointer' },
+                }}
+              >
+                {row.getIsExpanded() ? (
+                  <ListChevronsDownUp size={16} />
+                ) : (
+                  <ListChevronsUpDown size={16} />
+                )}
+              </button>
+            ) : (
+              ''
+            )}
+            <div
+              className={cn('text-sm font-medium', {
+                'pl-5': !row.getCanExpand(),
+              })}
+            >
+              {row.getValue('session_id')}
+            </div>
           </div>
         ),
       },
@@ -138,6 +188,7 @@ export function MemoryTable({
           return (
             <div className="flex items-center">
               <Switch
+                disabled={disabledRowFunc(row)}
                 defaultChecked={isEnabled}
                 onCheckedChange={(val) => {
                   handleClickUpdateMessageState(row.original, val);
@@ -166,6 +217,7 @@ export function MemoryTable({
             </Button>
             <Button
               variant={'delete'}
+              disabled={disabledRowFunc(row)}
               className="bg-transparent"
               aria-label="Edit"
               onClick={() => {
@@ -187,15 +239,18 @@ export function MemoryTable({
       pageSize: pagination.pageSize || 10,
     };
   }, [pagination]);
-
+  const [expanded, setExpanded] = React.useState<ExpandedState>({});
   const table = useReactTable({
     data: messages,
     columns,
+    onExpandedChange: setExpanded,
+    getSubRows: (row) => row.extract || undefined,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
     manualPagination: true,
@@ -204,6 +259,7 @@ export function MemoryTable({
       columnFilters,
       columnVisibility,
       pagination: currentPagination,
+      expanded,
     },
     rowCount: total,
   });
@@ -233,7 +289,9 @@ export function MemoryTable({
               <TableRow
                 key={row.id}
                 data-state={row.getIsSelected() && 'selected'}
-                className="group"
+                className={cn('group', {
+                  'bg-bg-list/5': !row.getCanExpand(),
+                })}
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>