fix: Restrict the agent to using memory compatible with the embedding model. (#16699)

web/src/components/memories-form-field.tsx

@@ -1,26 +1,94 @@
 import { useFetchAllMemoryList } from '@/hooks/use-memory-request';
+import { IMemory } from '@/interfaces/database/memory';
+import { useMemo, useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { RAGFlowAvatar } from './ragflow-avatar';
 import { RAGFlowFormItem } from './ragflow-form';
 import { MultiSelect } from './ui/multi-select';
 
 type MemoriesFormFieldProps = {
   label: string;
+  name?: string;
 };
 
-export function MemoriesFormField({ label }: MemoriesFormFieldProps) {
-  const { t } = useTranslation();
-  const memoryList = useFetchAllMemoryList();
+function MemoryLabel({ text }: { text: string }) {
+  return (
+    <div className="text-xs px-3 p-1 bg-bg-card text-text-secondary rounded-lg border border-bg-card">
+      {text}
+    </div>
+  );
+}
 
-  const options = memoryList.data?.map((memory) => ({
-    label: memory.name,
-    value: memory.id,
-  }));
+export function useDisableDifferenceEmbeddingMemory(name: string) {
+  const form = useFormContext();
+  const memoryIds = useWatch({ name, control: form.control });
+  const { data: memoryListOrigin } = useFetchAllMemoryList();
+  const memoryCacheRef = useRef(new Map<string, IMemory>());
+
+  const memoryList = useMemo(() => {
+    memoryListOrigin?.forEach((memory) => {
+      memoryCacheRef.current.set(memory.id, memory);
+    });
+
+    const selectedIds = Array.isArray(memoryIds) ? memoryIds : [];
+    const selectedMemories = selectedIds
+      .map((id) => memoryCacheRef.current.get(id))
+      .filter(Boolean) as IMemory[];
+
+    return Array.from(
+      new Map(
+        [...(memoryListOrigin ?? []), ...selectedMemories].map((memory) => [
+          memory.id,
+          memory,
+        ]),
+      ).values(),
+    );
+  }, [memoryIds, memoryListOrigin]);
+
+  const selectedEmbedId = useMemo(() => {
+    const data = memoryList?.find((item) => item.id === memoryIds?.[0]);
+    return data?.embd_id ?? '';
+  }, [memoryIds, memoryList]);
+
+  const options = useMemo(() => {
+    return memoryList
+      .filter(Boolean)
+      .map((item: IMemory) => {
+        return {
+          label: item.name,
+          icon: () => (
+            <RAGFlowAvatar
+              className="size-4"
+              avatar={item.avatar ?? ''}
+              name={item.name}
+            />
+          ),
+          suffix: <MemoryLabel text={item.embd_id} />,
+          value: item.id,
+          disabled:
+            item.embd_id !== selectedEmbedId && selectedEmbedId !== '',
+        };
+      });
+  }, [memoryList, selectedEmbedId]);
+
+  return {
+    options,
+  };
+}
+
+export function MemoriesFormField({
+  label,
+  name = 'memory_ids',
+}: MemoriesFormFieldProps) {
+  const { t } = useTranslation();
+  const { options } = useDisableDifferenceEmbeddingMemory(name);
 
   return (
-    <RAGFlowFormItem name="memory_ids" label={label}>
+    <RAGFlowFormItem name={name} label={label}>
       {(field) => (
         <MultiSelect
-          options={options || []}
+          options={options}
           placeholder={t('common.pleaseSelect')}
           maxCount={100}
           onValueChange={field.onChange}

web/src/interfaces/database/memory.ts

@@ -8,4 +8,6 @@ export interface IMemory {
   permissions: string;
   storage_type: string;
   tenant_id: string;
+  embd_id: string;
+  llm_id: string;
 }