Fix: Issues and style fixes related to the 'Memory' page (#12469)

### What problem does this PR solve?

Fix:  Some bugs
- Issues and style fixes related to the 'Memory' page
- Data source icon replacement
- Build optimization

### Type of change

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

web/src/pages/memory/index.tsx

@@ -4,7 +4,7 @@ import { SideBar } from './sidebar';
 
 export default function DatasetWrapper() {
   return (
-    <section className="flex h-full flex-col w-full">
+    <section className="flex h-full flex-col w-full pt-3">
       <div className="flex flex-1 min-h-0">
         <SideBar></SideBar>
         <div className=" relative flex-1 overflow-auto border-[0.5px] border-border-button p-5 rounded-md mr-5 mb-5">

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

@@ -1,9 +1,12 @@
+import { FilterCollection } from '@/components/list-filter-bar/interface';
+import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
 import message from '@/components/ui/message';
 import { useHandleSearchChange } from '@/hooks/logic-hooks';
 import memoryService, { getMemoryDetailById } from '@/services/memory-service';
+import { groupListByType } from '@/utils/list-filter-util';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { t } from 'i18next';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router';
 import { MemoryApiAction } from '../constant';
 import {
@@ -18,13 +21,15 @@ export const useFetchMemoryMessageList = () => {
   const memoryBaseId = searchParams.get('id') || id;
   const { handleInputChange, searchString, pagination, setPagination } =
     useHandleSearchChange();
-
+  const { filterValue, handleFilterSubmit } = useHandleFilterSubmit();
   let queryKey: (MemoryApiAction | number)[] = [
     MemoryApiAction.FetchMemoryMessage,
   ];
-
+  const agentIds = Array.isArray(filterValue.agentId)
+    ? filterValue.agentId
+    : [];
   const { data, isFetching: loading } = useQuery<IMessageTableProps>({
-    queryKey: [...queryKey, searchString, pagination],
+    queryKey: [...queryKey, searchString, pagination, filterValue],
     initialData: {} as IMessageTableProps,
     gcTime: 0,
     queryFn: async () => {
@@ -33,6 +38,7 @@ export const useFetchMemoryMessageList = () => {
           keywords: searchString,
           page: pagination.current,
           page_size: pagination.pageSize,
+          agentId: agentIds.length > 0 ? agentIds.join(',') : undefined,
         });
         return data?.data ?? {};
       } else {
@@ -48,6 +54,8 @@ export const useFetchMemoryMessageList = () => {
     searchString,
     pagination,
     setPagination,
+    filterValue,
+    handleFilterSubmit,
   };
 };
 
@@ -164,3 +172,24 @@ export const useMessageAction = () => {
     handleClickUpdateMessageState,
   };
 };
+
+export function useSelectFilters() {
+  const { data } = useFetchMemoryMessageList();
+  const agentId = useMemo(() => {
+    return groupListByType(
+      data?.messages?.message_list ?? [],
+      'agent_id',
+      'agent_name',
+    );
+  }, [data?.messages?.message_list]);
+
+  const filters: FilterCollection[] = [
+    {
+      field: 'agentId',
+      list: agentId,
+      label: 'Agent',
+    },
+  ];
+
+  return { filters };
+}

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

@@ -1,6 +1,6 @@
 import ListFilterBar from '@/components/list-filter-bar';
 import { t } from 'i18next';
-import { useFetchMemoryMessageList } from './hook';
+import { useFetchMemoryMessageList, useSelectFilters } from './hook';
 import { MemoryTable } from './message-table';
 
 export default function MemoryMessage() {
@@ -11,25 +11,29 @@ export default function MemoryMessage() {
     pagination,
     handleInputChange,
     setPagination,
-    // filterValue,
-    // handleFilterSubmit,
+    filterValue,
+    handleFilterSubmit,
     loading,
   } = useFetchMemoryMessageList();
+  const { filters } = useSelectFilters();
   return (
     <div className="flex flex-col gap-2">
       <ListFilterBar
         title="Dataset"
         onSearchChange={handleInputChange}
         searchString={searchString}
-        showFilter={false}
+        // showFilter={false}
         // value={filterValue}
         // onChange={handleFilterSubmit}
         // onOpenChange={onOpenChange}
         // filters={filters}
+        filters={filters}
+        onChange={handleFilterSubmit}
+        value={filterValue}
         leftPanel={
           <div className="items-start">
             <div className="pb-1">{t('memory.sideBar.messages')}</div>
-            <div className="text-text-secondary text-sm">
+            <div className="text-text-secondary text-sm font-normal">
               {t('memory.messages.messageDescription')}
             </div>
           </div>

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

@@ -210,7 +210,7 @@ export function MemoryTable({
 
   return (
     <div className="w-full">
-      <Table rootClassName="max-h-[calc(100vh-282px)]">
+      <Table rootClassName="max-h-[calc(100vh-292px)]">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
@@ -257,7 +257,7 @@ export function MemoryTable({
           title={t('memory.messages.forgetMessage')}
           open={showDeleteDialog}
           onOpenChange={setShowDeleteDialog}
-          okButtonText={t('common.confirm')}
+          okButtonText={t('memory.messages.forget')}
           content={{
             title: t('memory.messages.forgetMessageTip'),
             node: (

web/src/pages/memory/memory-setting/advanced-settings-form.tsx

@@ -30,7 +30,9 @@ export const AdvancedSettingsForm = () => {
   return (
     <>
       <div
-        className="flex items-center gap-1 w-full cursor-pointer"
+        className={cn('flex items-center gap-1 w-full cursor-pointer', {
+          'text-primary': showAdvancedSettings,
+        })}
         onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
       >
         {showAdvancedSettings ? (
@@ -134,6 +136,7 @@ export const AdvancedSettingsForm = () => {
           />
           <RenderField
             field={{
+              className: '!items-start',
               name: 'system_prompt',
               label: t('memory.config.systemPrompt'),
               type: FormFieldType.Textarea,
@@ -144,6 +147,7 @@ export const AdvancedSettingsForm = () => {
           />
           <RenderField
             field={{
+              className: '!items-start',
               name: 'user_prompt',
               label: t('memory.config.userPrompt'),
               type: FormFieldType.Textarea,

web/src/pages/memory/memory-setting/basic-form.tsx

@@ -41,6 +41,7 @@ export const BasicInfo = () => {
         label={t('memory.config.description')}
         required={false}
         horizontal={true}
+        className="!items-start"
         // tooltip={field.tooltip}
         // labelClassName={labelClassName || field.labelClassName}
       >