Feat: Add metadata configuration for new chats #3221 (#9502)

### What problem does this PR solve?

Feat: Add metadata configuration for new chats #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/chat/app-settings/chat-basic-settings.tsx

@@ -2,6 +2,8 @@
 
 import { FileUploader } from '@/components/file-uploader';
 import { KnowledgeBaseFormField } from '@/components/knowledge-base-item';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
 import { SwitchFormField } from '@/components/switch-fom-field';
 import { TavilyFormField } from '@/components/tavily-form-field';
 import {
@@ -14,11 +16,26 @@ import {
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { useTranslate } from '@/hooks/common-hooks';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { DatasetMetadata } from '../../constants';
+import { MetadataFilterConditions } from './metadata-filter-conditions';
 
 export default function ChatBasicSetting() {
   const { t } = useTranslate('chat');
   const form = useFormContext();
+  const kbIds: string[] = useWatch({ control: form.control, name: 'kb_ids' });
+  const metadata = useWatch({
+    control: form.control,
+    name: 'meta_data_filter.method',
+  });
+  const hasKnowledge = Array.isArray(kbIds) && kbIds.length > 0;
+
+  const MetadataOptions = Object.values(DatasetMetadata).map((x) => {
+    return {
+      value: x,
+      label: t(`meta.${x}`),
+    };
+  });
 
   return (
     <div className="space-y-8">
@@ -108,6 +125,18 @@ export default function ChatBasicSetting() {
       ></SwitchFormField>
       <TavilyFormField></TavilyFormField>
       <KnowledgeBaseFormField></KnowledgeBaseFormField>
+      {hasKnowledge && (
+        <RAGFlowFormItem
+          label={t('metadata')}
+          name={'meta_data_filter.method'}
+          tooltip={t('metadataTip')}
+        >
+          <SelectWithSearch options={MetadataOptions} />
+        </RAGFlowFormItem>
+      )}
+      {hasKnowledge && metadata === DatasetMetadata.Manual && (
+        <MetadataFilterConditions kbIds={kbIds}></MetadataFilterConditions>
+      )}
     </div>
   );
 }

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -9,6 +9,7 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { useParams } from 'umi';
 import { z } from 'zod';
+import { DatasetMetadata } from '../../constants';
 import ChatBasicSetting from './chat-basic-settings';
 import { ChatModelSettings } from './chat-model-settings';
 import { ChatPromptEngine } from './chat-prompt-engine';
@@ -38,6 +39,10 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
       top_n: 8,
       vector_similarity_weight: 0.2,
       top_k: 1024,
+      meta_data_filter: {
+        method: DatasetMetadata.Disabled,
+        manual: [],
+      },
     },
   });
 

web/src/pages/next-chats/chat/app-settings/metadata-filter-conditions.tsx

@@ -0,0 +1,129 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { useFetchKnowledgeMetadata } from '@/hooks/use-knowledge-request';
+import { SwitchOperatorOptions } from '@/pages/agent/constant';
+import { useBuildSwitchOperatorOptions } from '@/pages/agent/form/switch-form';
+import { Plus, X } from 'lucide-react';
+import { useCallback } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+export function MetadataFilterConditions({ kbIds }: { kbIds: string[] }) {
+  const { t } = useTranslation();
+  const form = useFormContext();
+  const name = 'meta_data_filter.manual';
+  const metadata = useFetchKnowledgeMetadata(kbIds);
+
+  const switchOperatorOptions = useBuildSwitchOperatorOptions();
+
+  const { fields, remove, append } = useFieldArray({
+    name,
+    control: form.control,
+  });
+
+  const add = useCallback(
+    (key: string) => () => {
+      append({
+        key,
+        value: '',
+        op: SwitchOperatorOptions[0].value,
+      });
+    },
+    [append],
+  );
+
+  return (
+    <section className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <FormLabel>{t('chat.conditions')}</FormLabel>
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <Button variant={'ghost'} type="button">
+              <Plus />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            {Object.keys(metadata.data).map((key, idx) => {
+              return (
+                <DropdownMenuItem key={idx} onClick={add(key)}>
+                  {key}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="space-y-5">
+        {fields.map((field, index) => {
+          const typeField = `${name}.${index}.key`;
+          return (
+            <div key={field.id} className="flex w-full items-center gap-2">
+              <FormField
+                control={form.control}
+                name={typeField}
+                render={({ field }) => (
+                  <FormItem className="flex-1 overflow-hidden">
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder={t('common.pleaseInput')}
+                      ></Input>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Separator className="w-3 text-text-secondary" />
+              <FormField
+                control={form.control}
+                name={`${name}.${index}.op`}
+                render={({ field }) => (
+                  <FormItem className="flex-1 overflow-hidden">
+                    <FormControl>
+                      <SelectWithSearch
+                        {...field}
+                        options={switchOperatorOptions}
+                      ></SelectWithSearch>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Separator className="w-3 text-text-secondary" />
+              <FormField
+                control={form.control}
+                name={`${name}.${index}.value`}
+                render={({ field }) => (
+                  <FormItem className="flex-1 overflow-hidden">
+                    <FormControl>
+                      <Input placeholder={t('common.pleaseInput')} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button variant={'ghost'} onClick={() => remove(index)}>
+                <X className="text-text-sub-title-invert " />
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

web/src/pages/next-chats/chat/app-settings/use-chat-setting-schema.tsx

@@ -43,6 +43,18 @@ export function useChatSettingSchema() {
     llm_id: z.string().optional(),
     ...vectorSimilarityWeightSchema,
     ...topnSchema,
+    meta_data_filter: z
+      .object({
+        method: z.string().optional(),
+        manual: z.array(
+          z.object({
+            key: z.string(),
+            op: z.string(),
+            value: z.string(),
+          }),
+        ),
+      })
+      .optional(),
   });
 
   return formSchema;

web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx

@@ -27,6 +27,7 @@ export function SingleChatBox({ controller }: IProps) {
     messageContainerRef,
     sendLoading,
     derivedMessages,
+    isUploading,
     handleInputChange,
     handlePressEnter,
     regenerateMessage,
@@ -91,6 +92,7 @@ export function SingleChatBox({ controller }: IProps) {
         }
         stopOutputMessage={stopOutputMessage}
         onUpload={handleUploadFile}
+        isUploading={isUploading}
       />
     </section>
   );

web/src/pages/next-chats/constants.ts

@@ -0,0 +1,7 @@
+export const EmptyConversationId = 'empty';
+
+export enum DatasetMetadata {
+  Disabled = 'disabled',
+  Automatic = 'automatic',
+  Manual = 'manual',
+}

web/src/pages/next-chats/hooks/use-send-chat-message.ts

@@ -138,7 +138,8 @@ export const useSendMessage = (controller: AbortController) => {
   const { conversationId, isNew } = useGetChatSearchParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
 
-  const { handleUploadFile, fileIds, clearFileIds } = useUploadFile();
+  const { handleUploadFile, fileIds, clearFileIds, isUploading } =
+    useUploadFile();
 
   const { send, answer, done } = useSendMessageWithSse(
     api.completeConversation,
@@ -285,5 +286,6 @@ export const useSendMessage = (controller: AbortController) => {
     removeMessageById,
     stopOutputMessage,
     handleUploadFile,
+    isUploading,
   };
 };

web/src/pages/next-chats/hooks/use-upload-file.ts

@@ -3,7 +3,7 @@ import { useUploadAndParseFile } from '@/hooks/use-chat-request';
 import { useCallback, useState } from 'react';
 
 export function useUploadFile() {
-  const { uploadAndParseFile } = useUploadAndParseFile();
+  const { uploadAndParseFile, loading } = useUploadAndParseFile();
   const [fileIds, setFileIds] = useState<string[]>([]);
 
   const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
@@ -23,5 +23,5 @@ export function useUploadFile() {
     setFileIds([]);
   }, []);
 
-  return { handleUploadFile, clearFileIds, fileIds };
+  return { handleUploadFile, clearFileIds, fileIds, isUploading: loading };
 }