Feature：memory function complete (#11982)

### What problem does this PR solve? memory function complete ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-22 14:16:42 +08:00 · 2025-12-17 12:35:26 +08:00
parent 2595644dfd
commit 205a6483f5
20 changed files with 226 additions and 142 deletions
--- a/web/src/components/dynamic-form.tsx
+++ b/web/src/components/dynamic-form.tsx
@ -81,6 +81,7 @@ export interface FormFieldConfig {
  schema?: ZodSchema;
  shouldRender?: (formValues: any) => boolean;
  labelClassName?: string;
+  disabled?: boolean;
 }

 // Component props interface
@ -328,11 +329,7 @@ export const RenderField = ({
    }
    return (
      <RAGFlowFormItem
-        name={field.name}
-        label={field.label}
-        required={field.required}
-        horizontal={field.horizontal}
-        tooltip={field.tooltip}
+        {...field}
        labelClassName={labelClassName || field.labelClassName}
      >
        {(fieldProps) => {
@ -354,11 +351,7 @@ export const RenderField = ({
    case FormFieldType.Textarea:
      return (
        <RAGFlowFormItem
-          name={field.name}
-          label={field.label}
-          required={field.required}
-          horizontal={field.horizontal}
-          tooltip={field.tooltip}
+          {...field}
          labelClassName={labelClassName || field.labelClassName}
        >
          {(fieldProps) => {
@ -375,6 +368,7 @@ export const RenderField = ({
              <Textarea
                {...finalFieldProps}
                placeholder={field.placeholder}
+                disabled={field.disabled}
                // className="resize-none"
              />
            );
@ -385,11 +379,7 @@ export const RenderField = ({
    case FormFieldType.Select:
      return (
        <RAGFlowFormItem
-          name={field.name}
-          label={field.label}
-          required={field.required}
-          horizontal={field.horizontal}
-          tooltip={field.tooltip}
+          {...field}
          labelClassName={labelClassName || field.labelClassName}
        >
          {(fieldProps) => {
@ -410,6 +400,7 @@ export const RenderField = ({
                triggerClassName="!shrink"
                {...finalFieldProps}
                options={field.options}
+                disabled={field.disabled}
              />
            );
          }}
@ -419,11 +410,7 @@ export const RenderField = ({
    case FormFieldType.MultiSelect:
      return (
        <RAGFlowFormItem
-          name={field.name}
-          label={field.label}
-          required={field.required}
-          horizontal={field.horizontal}
-          tooltip={field.tooltip}
+          {...field}
          labelClassName={labelClassName || field.labelClassName}
        >
          {(fieldProps) => {
@ -447,6 +434,7 @@ export const RenderField = ({
                //   field.onChange?.(data);
                // }}
                options={field.options as MultiSelectOptionType[]}
+                disabled={field.disabled}
              />
            );
          }}
@ -504,6 +492,7 @@ export const RenderField = ({
                      formField.onChange(checked);
                      field.onChange?.(checked);
                    }}
+                    disabled={field.disabled}
                  />
                </div>
              </FormControl>
@ -517,11 +506,7 @@ export const RenderField = ({
    case FormFieldType.Tag:
      return (
        <RAGFlowFormItem
-          name={field.name}
-          label={field.label}
-          required={field.required}
-          horizontal={field.horizontal}
-          tooltip={field.tooltip}
+          {...field}
          labelClassName={labelClassName || field.labelClassName}
        >
          {(fieldProps) => {
@ -537,7 +522,10 @@ export const RenderField = ({
            return (
              //   <TagInput {...fieldProps} placeholder={field.placeholder} />
              <div className="w-full">
-                <EditTag {...finalFieldProps}></EditTag>
+                <EditTag
+                  {...finalFieldProps}
+                  disabled={field.disabled}
+                ></EditTag>
              </div>
            );
          }}
@ -547,11 +535,7 @@ export const RenderField = ({
    default:
      return (
        <RAGFlowFormItem
-          name={field.name}
-          label={field.label}
-          required={field.required}
-          horizontal={field.horizontal}
-          tooltip={field.tooltip}
+          {...field}
          labelClassName={labelClassName || field.labelClassName}
        >
          {(fieldProps) => {
@ -570,6 +554,7 @@ export const RenderField = ({
                  {...finalFieldProps}
                  type={field.type}
                  placeholder={field.placeholder}
+                  disabled={field.disabled}
                />
              </div>
            );
--- a/web/src/components/edit-tag/index.tsx
+++ b/web/src/components/edit-tag/index.tsx
@ -12,10 +12,11 @@ import { Input } from '../ui/input';
 interface EditTagsProps {
  value?: string[];
  onChange?: (tags: string[]) => void;
+  disabled?: boolean;
 }

 const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
-  ({ value = [], onChange }: EditTagsProps) => {
+  ({ value = [], onChange, disabled }: EditTagsProps) => {
    const [inputVisible, setInputVisible] = useState(false);
    const [inputValue, setInputValue] = useState('');
    const inputRef = useRef<HTMLInputElement>(null);
@ -61,6 +62,7 @@ const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
                <div className="max-w-80 overflow-hidden text-ellipsis">
                  {tag}
                </div>
+                {!disabled && (
                  <X
                    className="w-4 h-4 text-muted-foreground hover:text-primary"
                    onClick={(e) => {
@ -68,6 +70,7 @@ const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
                      handleClose(tag);
                    }}
                  />
+                )}
              </div>
            </div>
          </HoverCardTrigger>
@ -91,6 +94,7 @@ const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
            value={inputValue}
            onChange={handleInputChange}
            onBlur={handleInputConfirm}
+            disabled={disabled}
            onKeyDown={(e) => {
              if (e?.key === 'Enter') {
                handleInputConfirm();
@ -100,11 +104,12 @@ const EditTag = React.forwardRef<HTMLDivElement, EditTagsProps>(
        )}
        <div className="flex gap-2 py-1">
          {Array.isArray(tagChild) && tagChild.length > 0 && <>{tagChild}</>}
-          {!inputVisible && (
+          {!inputVisible && !disabled && (
            <Button
              variant="ghost"
              className="w-fit flex items-center justify-center gap-2 bg-bg-card border-dashed border"
              onClick={showInput}
+              disabled={disabled}
              style={tagPlusStyle}
            >
              <PlusOutlined />
--- a/web/src/components/originui/select-with-search.tsx
+++ b/web/src/components/originui/select-with-search.tsx
@ -179,7 +179,7 @@ export const SelectWithSearch = forwardRef<
          align="start"
        >
          <Command className="p-5">
-            {options && options.length > 0 && (
+            {options && options.length > 5 && (
              <CommandInput
                placeholder={t('common.search') + '...'}
                className=" placeholder:text-text-disabled"
@ -193,7 +193,7 @@ export const SelectWithSearch = forwardRef<
                if (group.options) {
                  return (
                    <Fragment key={idx}>
-                      <CommandGroup heading={group.label}>
+                      <CommandGroup heading={group.label} className="mb-1">
                        {group.options.map((option) => (
                          <CommandItem
                            key={option.value}
@ -221,11 +221,9 @@ export const SelectWithSearch = forwardRef<
                      value={group.value}
                      disabled={group.disabled}
                      onSelect={handleSelect}
-                      className={
-                        value === group.value
-                          ? 'bg-bg-card min-h-10'
-                          : 'min-h-10'
-                      }
+                      className={cn('mb-1 min-h-10 ', {
+                        'bg-bg-card ': value === group.value,
+                      })}
                    >
                      <span className="leading-none">{group.label}</span>

--- a/web/src/layouts/next-header.tsx
+++ b/web/src/layouts/next-header.tsx
@ -70,7 +70,7 @@ export function Header() {
      { path: Routes.Chats, name: t('header.chat'), icon: MessageSquareText },
      { path: Routes.Searches, name: t('header.search'), icon: Search },
      { path: Routes.Agents, name: t('header.flow'), icon: Cpu },
-      // { path: Routes.Memories, name: t('header.Memories'), icon: Cpu },
+      { path: Routes.Memories, name: t('header.Memories'), icon: Cpu },
      { path: Routes.Files, name: t('header.fileManager'), icon: File },
    ],
    [t],
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -102,8 +102,19 @@ export default {
      Memories: 'Memory',
    },
    memories: {
+      llmTooltip:
+        'Analyzes conversation content, extracts key information, and generates structured memory summaries.',
+      embeddingModelTooltip:
+        'Converts text into numerical vectors for meaning similarity search and memory retrieval.',
+      embeddingModelError:
+        'Memory type is required and "raw" cannot be deleted.',
+      memoryTypeTooltip: `Raw: The raw dialogue content between the user and the agent (Required by default). 
+Semantic Memory: General knowledge and facts about the user and world.
+Episodic Memory: Time-stamped records of specific events and experiences.
+Procedural Memory: Learned skills, habits, and automated procedures.`,
+      editName: 'Edit name',
      memory: 'Memory',
-      createMemory: 'Create Memory',
+      createMemory: 'Create memory',
      name: 'Name',
      memoryNamePlaceholder: 'memory name',
      memoryType: 'Memory type',
@ -114,6 +125,8 @@ export default {
    },
    memory: {
      messages: {
+        messageDescription:
+          'Memory retrieval is configured with Similarity threshold, Keyword similarity weight, and Top N from Advanced Settings.',
        copied: 'Copied!',
        contentEmbed: 'Content embed',
        content: 'Content',
--- a/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
+++ b/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
@ -72,16 +72,18 @@ export const EmbeddingSelect = ({
  isEdit,
  field,
  name,
+  disabled = false,
 }: {
  isEdit: boolean;
  field: FieldValues;
  name?: string;
+  disabled?: boolean;
 }) => {
  const { t } = useTranslate('knowledgeConfiguration');
  const form = useFormContext();
  const embeddingModelOptions = useSelectEmbeddingModelOptions();
  const { handleChange } = useHandleKbEmbedding();
-  const disabled = useHasParsedDocument(isEdit);
+
  const oldValue = useMemo(() => {
    const embdStr = form.getValues(name || 'embd_id');
    return embdStr || '';
@ -101,7 +103,7 @@ export const EmbeddingSelect = ({
            setLoading(true);
            const res = await handleChange({
              embed_id: value,
-              callback: field.onChange,
+              // callback: field.onChange,
            });
            if (res.code !== 0) {
              field.onChange(oldValue);
@ -109,6 +111,7 @@ export const EmbeddingSelect = ({
            setLoading(false);
          }
        }}
+        disabled={disabled && !isEdit}
        value={field.value}
        options={embeddingModelOptions}
        placeholder={t('embeddingModelPlaceholder')}
@ -120,6 +123,7 @@ export const EmbeddingSelect = ({
 export function EmbeddingModelItem({ line = 1, isEdit }: IProps) {
  const { t } = useTranslate('knowledgeConfiguration');
  const form = useFormContext();
+  const disabled = useHasParsedDocument(isEdit);
  return (
    <>
      <FormField
@ -149,6 +153,7 @@ export function EmbeddingModelItem({ line = 1, isEdit }: IProps) {
                  <EmbeddingSelect
                    isEdit={!!isEdit}
                    field={field}
+                    disabled={disabled}
                  ></EmbeddingSelect>
                </FormControl>
              </div>
--- a/web/src/pages/memories/add-or-edit-modal.tsx
+++ b/web/src/pages/memories/add-or-edit-modal.tsx
@ -1,9 +1,9 @@
-import { DynamicForm, DynamicFormRef } from '@/components/dynamic-form';
+import { DynamicForm } from '@/components/dynamic-form';
 import { useModelOptions } from '@/components/llm-setting-items/llm-form-field';
 import { HomeIcon } from '@/components/svg-icon';
 import { Modal } from '@/components/ui/modal/modal';
-import { t } from 'i18next';
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { createMemoryFields } from './constants';
 import { IMemory } from './interface';

@ -17,21 +17,16 @@ type IProps = {
 };
 export const AddOrEditModal = memo((props: IProps) => {
  const { open, onClose, onSubmit, initialMemory, isCreate } = props;
-  const [formInstance, setFormInstance] = useState<DynamicFormRef | null>(null);
-
-  const formCallbackRef = useCallback((node: DynamicFormRef | null) => {
-    if (node) {
-      // formRef.current = node;
-      setFormInstance(node);
-    }
-  }, []);
+  const { t } = useTranslation();
  const { modelOptions } = useModelOptions();

  const fields = useMemo(() => {
    if (!isCreate) {
-      return createMemoryFields.filter((field: any) => field.name === 'name');
+      return createMemoryFields(t).filter(
+        (field: any) => field.name === 'name',
+      );
    } else {
-      const tempFields = createMemoryFields.map((field: any) => {
+      const tempFields = createMemoryFields(t).map((field: any) => {
        if (field.name === 'llm_id') {
          return {
            ...field,
@ -57,14 +52,13 @@ export const AddOrEditModal = memo((props: IProps) => {
          <div>
            <HomeIcon name="memory" width={'24'} />
          </div>
-          {t('memories.createMemory')}
+          {isCreate ? t('memories.createMemory') : t('memories.editName')}
        </div>
      }
      showfooter={false}
      confirmLoading={props.loading}
    >
      <DynamicForm.Root
-        ref={formCallbackRef}
        fields={fields}
        onSubmit={() => {}}
        defaultValues={initialMemory}
--- a/web/src/pages/memories/constants/index.tsx
+++ b/web/src/pages/memories/constants/index.tsx
@ -1,8 +1,14 @@
 import { FormFieldConfig, FormFieldType } from '@/components/dynamic-form';
 import { EmbeddingSelect } from '@/pages/dataset/dataset-setting/configuration/common-item';
-import { t } from 'i18next';
-
-export const createMemoryFields = [
+import { TFunction } from 'i18next';
+export enum MemoryType {
+  Raw = 'raw',
+  Semantic = 'semantic',
+  Episodic = 'episodic',
+  Procedural = 'procedural',
+}
+export const createMemoryFields = (t: TFunction) =>
+  [
    {
      name: 'name',
      label: t('memories.name'),
@ -14,18 +20,26 @@ export const createMemoryFields = [
      label: t('memories.memoryType'),
      type: FormFieldType.MultiSelect,
      placeholder: t('memories.descriptionPlaceholder'),
+      tooltip: t('memories.memoryTypeTooltip'),
      options: [
-      { label: 'Raw', value: 'raw' },
-      { label: 'Semantic', value: 'semantic' },
-      { label: 'Episodic', value: 'episodic' },
-      { label: 'Procedural', value: 'procedural' },
+        { label: 'Raw', value: MemoryType.Raw },
+        { label: 'Semantic', value: MemoryType.Semantic },
+        { label: 'Episodic', value: MemoryType.Episodic },
+        { label: 'Procedural', value: MemoryType.Procedural },
      ],
      required: true,
+      customValidate: (value) => {
+        if (!value.includes(MemoryType.Raw) || !value.length) {
+          return t('memories.embeddingModelError');
+        }
+        return true;
+      },
    },
    {
      name: 'embd_id',
      label: t('memories.embeddingModel'),
      placeholder: t('memories.selectModel'),
+      tooltip: t('memories.embeddingModelTooltip'),
      required: true,
      // hideLabel: true,
      // type: 'custom',
@ -37,5 +51,13 @@ export const createMemoryFields = [
      placeholder: t('memories.selectModel'),
      required: true,
      type: FormFieldType.Select,
+      tooltip: t('memories.llmTooltip'),
    },
  ] as FormFieldConfig[];
+
+export const defaultMemoryFields = {
+  name: '',
+  memory_type: [MemoryType.Raw],
+  embd_id: '',
+  llm_id: '',
+};
--- a/web/src/pages/memories/hooks.ts
+++ b/web/src/pages/memories/hooks.ts
@ -74,12 +74,12 @@ export const useFetchMemoryList = () => {
    queryFn: async () => {
      const { data: response } = await memoryService.getMemoryList(
        {
-          data: {
+          params: {
            keywords: debouncedSearchString,
            page_size: pagination.pageSize,
            page: pagination.current,
          },
-          params: {},
+          data: {},
        },
        true,
      );
@ -197,6 +197,7 @@ export const useUpdateMemory = () => {
      if (response.code !== 0) {
        throw new Error(response.message || 'Failed to update memory');
      }
+
      return response.data;
    },
    onSuccess: (data, variables) => {
--- a/web/src/pages/memories/index.tsx
+++ b/web/src/pages/memories/index.tsx
@ -10,8 +10,9 @@ import { Plus } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useSearchParams } from 'umi';
 import { AddOrEditModal } from './add-or-edit-modal';
+import { defaultMemoryFields } from './constants';
 import { useFetchMemoryList, useRenameMemory } from './hooks';
-import { ICreateMemoryProps } from './interface';
+import { ICreateMemoryProps, IMemory } from './interface';
 import { MemoryCard } from './memory-card';

 export default function MemoryList() {
@ -45,7 +46,7 @@ export default function MemoryList() {
  const openCreateModalFun = useCallback(() => {
    // setIsEdit(false);
    setAddOrEditType('add');
-    showMemoryRenameModal();
+    showMemoryRenameModal(defaultMemoryFields as unknown as IMemory);
  }, [showMemoryRenameModal]);
  const handlePageChange = useCallback(
    (page: number, pageSize?: number) => {
@ -131,12 +132,12 @@ export default function MemoryList() {
              })}
            </CardContainer>
          </div>
-          {list?.data.total && list?.data.total > 0 && (
+          {list?.data.total_count && list?.data.total_count > 0 && (
            <div className="px-8 mb-4">
              <RAGFlowPagination
                {...pick(pagination, 'current', 'pageSize')}
                // total={pagination.total}
-                total={list?.data.total}
+                total={list?.data.total_count}
                onChange={handlePageChange}
              />
            </div>
--- a/web/src/pages/memories/interface.ts
+++ b/web/src/pages/memories/interface.ts
@ -36,12 +36,14 @@ export interface IMemory extends ICreateMemoryProps {
  temperature: string;
  system_prompt: string;
  user_prompt: string;
+  create_date: string;
+  create_time: number;
 }
 export interface MemoryListResponse {
  code: number;
  data: {
    memory_list: Array<IMemory>;
-    total: number;
+    total_count: number;
  };
  message: string;
 }
--- a/web/src/pages/memories/memory-card.tsx
+++ b/web/src/pages/memories/memory-card.tsx
@ -17,6 +17,7 @@ export function MemoryCard({ data, showMemoryRenameModal }: IProps) {
        name: data?.name,
        avatar: data?.avatar,
        description: data?.description,
+        update_time: data?.create_time,
      }}
      moreDropdown={
        <MemoryDropdown
--- a/web/src/pages/memory/memory-message/hook.ts
+++ b/web/src/pages/memory/memory-message/hook.ts
@ -30,7 +30,7 @@ export const useFetchMemoryMessageList = () => {
    queryFn: async () => {
      if (memoryBaseId) {
        const { data } = await getMemoryDetailById(memoryBaseId as string, {
-          keyword: searchString,
+          keywords: searchString,
          page: pagination.current,
          page_size: pagination.pageSize,
        });
@ -53,19 +53,24 @@ export const useFetchMemoryMessageList = () => {

 export const useMessageAction = () => {
  const queryClient = useQueryClient();
+  const { id: memoryId } = useParams();
  const [selectedMessage, setSelectedMessage] = useState<IMessageInfo>(
    {} as IMessageInfo,
  );
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const handleClickDeleteMessage = useCallback((message: IMessageInfo) => {
-    console.log('handleClickDeleteMessage', message);
    setSelectedMessage(message);
    setShowDeleteDialog(true);
  }, []);

  const handleDeleteMessage = useCallback(() => {
    // delete message
-    memoryService.deleteMemoryMessage(selectedMessage.message_id).then(() => {
+    memoryService
+      .deleteMemoryMessage({
+        memory_id: memoryId,
+        message_id: selectedMessage.message_id,
+      })
+      .then(() => {
        message.success(t('message.deleted'));
        queryClient.invalidateQueries({
          queryKey: [MemoryApiAction.FetchMemoryMessage],
@ -74,6 +79,35 @@ export const useMessageAction = () => {
    setShowDeleteDialog(false);
  }, [selectedMessage.message_id, queryClient]);

+  const handleUpdateMessageState = useCallback(
+    (messageInfo: IMessageInfo, enable: boolean) => {
+      // delete message
+      const selectedMessageInfo = messageInfo || selectedMessage;
+      memoryService
+        .updateMessageState({
+          memory_id: memoryId,
+          message_id: selectedMessageInfo.message_id,
+          status: enable || false,
+        })
+        .then(() => {
+          message.success(t('message.updated'));
+          queryClient.invalidateQueries({
+            queryKey: [MemoryApiAction.FetchMemoryMessage],
+          });
+        });
+      setShowDeleteDialog(false);
+    },
+    [selectedMessage, queryClient, memoryId],
+  );
+
+  const handleClickUpdateMessageState = useCallback(
+    (message: IMessageInfo, enable: boolean) => {
+      setSelectedMessage(message);
+      handleUpdateMessageState(message, enable);
+    },
+    [handleUpdateMessageState],
+  );
+
  const [showMessageContentDialog, setShowMessageContentDialog] =
    useState(false);
  const [selectedMessageContent, setSelectedMessageContent] =
@ -90,9 +124,10 @@ export const useMessageAction = () => {
    ],
    mutationFn: async () => {
      setShowMessageContentDialog(true);
-      const res = await memoryService.getMessageContent(
-        selectedMessage.message_id,
-      );
+      const res = await memoryService.getMessageContent({
+        memory_id: memoryId,
+        message_id: selectedMessage.message_id,
+      });
      if (res.data.code === 0) {
        setSelectedMessageContent(res.data.data);
      } else {
@ -117,6 +152,7 @@ export const useMessageAction = () => {
    setShowDeleteDialog,
    handleClickDeleteMessage,
    handleDeleteMessage,
+    handleUpdateMessageState,
    messageContent,
    fetchMessageContentLoading,
    fetchMessageContent,
@ -124,5 +160,6 @@ export const useMessageAction = () => {
    showMessageContentDialog,
    setShowMessageContentDialog,
    handleClickMessageContentDialog,
+    handleClickUpdateMessageState,
  };
 };
--- a/web/src/pages/memory/memory-message/index.tsx
+++ b/web/src/pages/memory/memory-message/index.tsx
@ -21,15 +21,16 @@ export default function MemoryMessage() {
        title="Dataset"
        onSearchChange={handleInputChange}
        searchString={searchString}
+        showFilter={false}
        // value={filterValue}
        // onChange={handleFilterSubmit}
        // onOpenChange={onOpenChange}
        // filters={filters}
        leftPanel={
          <div className="items-start">
-            <div className="pb-1">{t('knowledgeDetails.subbarFiles')}</div>
+            <div className="pb-1">{t('memory.sideBar.messages')}</div>
            <div className="text-text-secondary text-sm">
-              {t('knowledgeDetails.datasetDescription')}
+              {t('memory.messages.messageDescription')}
            </div>
          </div>
        }
--- a/web/src/pages/memory/memory-message/message-table.tsx
+++ b/web/src/pages/memory/memory-message/message-table.tsx
@ -66,7 +66,7 @@ export function MemoryTable({
    selectedMessage,
    handleDeleteMessage,

-    fetchMessageContent,
+    handleClickUpdateMessageState,
    selectedMessageContent,
    showMessageContentDialog,
    setShowMessageContentDialog,
@ -131,7 +131,12 @@ export function MemoryTable({
          const isEnabled = row.getValue('status') as boolean;
          return (
            <div className="flex items-center">
-              <Switch defaultChecked={isEnabled} onChange={() => {}} />
+              <Switch
+                defaultChecked={isEnabled}
+                onCheckedChange={(val) => {
+                  handleClickUpdateMessageState(row.original, val);
+                }}
+              />
            </div>
          );
        },
--- a/web/src/pages/memory/memory-setting/advanced-settings-form.tsx
+++ b/web/src/pages/memory/memory-setting/advanced-settings-form.tsx
@ -94,7 +94,7 @@ export const AdvancedSettingsForm = () => {
            horizontal: true,
            // placeholder: t('memory.config.storageTypePlaceholder'),
            options: [
-              { label: 'lru', value: 'lru' },
+              // { label: 'lru', value: 'lru' },
              { label: 'fifo', value: 'fifo' },
            ],
            required: false,
--- a/web/src/pages/memory/memory-setting/memory-model-form.tsx
+++ b/web/src/pages/memory/memory-setting/memory-model-form.tsx
@ -1,7 +1,8 @@
 import { FormFieldType, RenderField } from '@/components/dynamic-form';
 import { useModelOptions } from '@/components/llm-setting-items/llm-form-field';
 import { EmbeddingSelect } from '@/pages/dataset/dataset-setting/configuration/common-item';
-import { t } from 'i18next';
+import { MemoryType } from '@/pages/memories/constants';
+import { useTranslation } from 'react-i18next';
 import { z } from 'zod';

 export const memoryModelFormSchema = {
@ -13,11 +14,12 @@ export const memoryModelFormSchema = {
 export const defaultMemoryModelForm = {
  embd_id: '',
  llm_id: '',
-  memory_type: [],
+  memory_type: [MemoryType.Raw],
  memory_size: 0,
 };
 export const MemoryModelForm = () => {
  const { modelOptions } = useModelOptions();
+  const { t } = useTranslation();
  return (
    <>
      <RenderField
@ -29,7 +31,12 @@ export const MemoryModelForm = () => {
          horizontal: true,
          // hideLabel: true,
          type: FormFieldType.Custom,
-          render: (field) => <EmbeddingSelect field={field} isEdit={false} />,
+          disabled: true,
+          render: (field) => (
+            <EmbeddingSelect field={field} isEdit={false} disabled={true} />
+          ),
+
+          tooltip: t('memories.embeddingModelTooltip'),
        }}
      />
      <RenderField
@ -41,6 +48,7 @@ export const MemoryModelForm = () => {
          horizontal: true,
          type: FormFieldType.Select,
          options: modelOptions as { value: string; label: string }[],
+          tooltip: t('memories.llmTooltip'),
        }}
      />
      <RenderField
@ -50,6 +58,8 @@ export const MemoryModelForm = () => {
          type: FormFieldType.MultiSelect,
          horizontal: true,
          placeholder: t('memories.memoryTypePlaceholder'),
+          tooltip: t('memories.memoryTypeTooltip'),
+          disabled: true,
          options: [
            { label: 'Raw', value: 'raw' },
            { label: 'Semantic', value: 'semantic' },
--- a/web/src/pages/memory/sidebar/index.tsx
+++ b/web/src/pages/memory/sidebar/index.tsx
@ -3,7 +3,8 @@ import { Button } from '@/components/ui/button';
 import { useSecondPathName } from '@/hooks/route-hook';
 import { cn } from '@/lib/utils';
 import { Routes } from '@/routes';
-import { Banknote, Logs } from 'lucide-react';
+import { formatPureDate } from '@/utils/date';
+import { MemoryStick, Settings } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFetchMemoryBaseConfiguration } from '../hooks/use-memory-setting';
@ -19,12 +20,12 @@ export function SideBar() {
  const items = useMemo(() => {
    const list = [
      {
-        icon: <Logs className="size-4" />,
+        icon: <MemoryStick className="size-4" />,
        label: t(`memory.sideBar.messages`),
        key: Routes.MemoryMessage,
      },
      {
-        icon: <Banknote className="size-4" />,
+        icon: <Settings className="size-4" />,
        label: t(`memory.sideBar.configuration`),
        key: Routes.MemorySetting,
      },
@ -44,15 +45,13 @@ export function SideBar() {
          <h3 className="text-lg font-semibold line-clamp-1 text-text-primary text-ellipsis overflow-hidden">
            {data.name}
          </h3>
-          {/* <div className="flex justify-between">
-            <span>
-              {data.doc_num} {t('knowledgeDetails.files')}
-            </span>
-            <span>{formatBytes(data.size)}</span>
+          <div className="flex justify-between">
+            <span className="truncate ">{data.description}</span>
+            {/* <span>{formatBytes(data.size)}</span> */}
          </div>
          <div>
-            {t('knowledgeDetails.created')} {formatPureDate(data.)}
-          </div> */}
+            {t('knowledgeDetails.created')} {formatPureDate(data.create_time)}
+          </div>
        </div>
      </div>

--- a/web/src/services/memory-service.ts
+++ b/web/src/services/memory-service.ts
@ -11,6 +11,7 @@ const {
  getMemoryConfig,
  deleteMemoryMessage,
  getMessageContent,
+  updateMessageState,
  // getMemoryDetailShare,
 } = api;
 const methods = {
@ -29,6 +30,7 @@ const methods = {
  },
  deleteMemoryMessage: { url: deleteMemoryMessage, method: 'delete' },
  getMessageContent: { url: getMessageContent, method: 'get' },
+  updateMessageState: { url: updateMessageState, method: 'put' },
 } as const;
 const memoryService = registerNextServer<keyof typeof methods>(methods);
 export const updateMemoryById = (id: string, data: any) => {
--- a/web/src/utils/api.ts
+++ b/web/src/utils/api.ts
@ -235,9 +235,12 @@ export default {
  deleteMemory: (id: string) => `${api_host}/memory/rm/${id}`,
  getMemoryDetail: (id: string) => `${api_host}/memories/${id}`,
  updateMemorySetting: (id: string) => `${api_host}/memories/${id}`,
-  deleteMemoryMessage: (id: string) => `${api_host}/message/rm/${id}`,
-  getMessageContent: (message_id: string) =>
-    `${api_host}/messages/${message_id}/content`,
+  deleteMemoryMessage: (data: { memory_id: string; message_id: string }) =>
+    `${api_host}/messages/${data.memory_id}:${data.message_id}`,
+  getMessageContent: (data: { memory_id: string; message_id: string }) =>
+    `${api_host}/messages/${data.memory_id}:${data.message_id}/content`,
+  updateMessageState: (data: { memory_id: string; message_id: string }) =>
+    `${api_host}/messages/${data.memory_id}:${data.message_id}`,

  // data pipeline
  fetchDataflow: (id: string) => `${api_host}/dataflow/get/${id}`,