Feat: Add a link to create a template to the operator parameter of the compiler operator. (#17563)

web/src/components/compilation-template-form-field.tsx

@@ -1,5 +1,6 @@
 import { RAGFlowFormItem } from '@/components/ragflow-form';
 import { useCompilationTemplateGroupOptions } from '@/hooks/use-compilation-template-group-request';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useTranslation } from 'react-i18next';
 import { SelectWithSearch } from './originui/select-with-search';
 
@@ -13,12 +14,17 @@ export function CompilationTemplateFormField({
   name = 'parser_config.compilation_template_group_id',
 }: CompilationTemplateFormFieldProps) {
   const { t } = useTranslation();
+  const { navigateToAgents } = useNavigatePage();
   const options = useCompilationTemplateGroupOptions();
 
   return (
     <RAGFlowFormItem
       name={name}
       label={t('knowledgeConfiguration.compilationTemplate')}
+      labelLink={{
+        text: t('knowledgeConfiguration.createTemplate'),
+        onClick: navigateToAgents,
+      }}
       className="pb-4"
       horizontal={horizontal}
     >

web/src/components/ragflow-form.tsx

@@ -6,6 +6,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { cn } from '@/lib/utils';
+import { ArrowUpRight } from 'lucide-react';
 import { ReactNode, cloneElement, isValidElement } from 'react';
 import {
   ControllerRenderProps,
@@ -23,6 +24,10 @@ type RAGFlowFormItemProps = {
   labelClassName?: string;
   valueClassName?: string;
   className?: string;
+  labelLink?: {
+    text: ReactNode;
+    onClick: () => void;
+  };
 } & Pick<UseControllerProps<any>, 'rules'>;
 
 export function RAGFlowFormItem({
@@ -36,6 +41,7 @@ export function RAGFlowFormItem({
   valueClassName,
   className,
   rules,
+  labelLink,
 }: RAGFlowFormItemProps) {
   const form = useFormContext();
   return (
@@ -47,19 +53,30 @@ export function RAGFlowFormItem({
         <FormItem
           className={cn(
             {
-              'flex items-center w-full space-y-0': horizontal,
+              'flex items-center w-full space-y-0 justify-between': horizontal,
             },
             className,
           )}
         >
           {label && (
-            <FormLabel
-              required={required}
-              tooltip={tooltip}
-              className={cn({ 'w-1/4': horizontal }, labelClassName)}
-            >
-              {label}
-            </FormLabel>
+            <div className={cn('flex items-center gap-2 justify-between')}>
+              <FormLabel
+                required={required}
+                tooltip={tooltip}
+                className={cn(labelClassName)}
+              >
+                {label}
+              </FormLabel>
+              {labelLink && (
+                <div
+                  className="text-sm flex text-text-primary cursor-pointer items-center shrink-0"
+                  onClick={labelLink.onClick}
+                >
+                  {labelLink.text}
+                  <ArrowUpRight size={14} />
+                </div>
+              )}
+            </div>
           )}
           <div
             className={cn(

web/src/locales/en.ts

@@ -954,6 +954,7 @@ The above is the content you need to summarize.`,
       randomSeedMessage: 'Random seed is required',
       entityTypes: 'Entity types',
       compilationTemplate: 'Operator',
+      createTemplate: 'Create template',
       scopeFile: 'File',
       vietnamese: 'Vietnamese',
       pageRank: 'Page rank',

web/src/locales/zh.ts

@@ -865,6 +865,7 @@ export default {
       maxClusterTip: '最多可创建的聚类数。',
       entityTypes: '实体类型',
       compilationTemplate: '算子',
+      createTemplate: '创建模板',
       scopeFile: '文件',
       pageRank: '页面排名',
       pageRankTip: `知识库检索时，你可以为特定知识库设置较高的 PageRank 分数，该知识库中匹配文本块的混合相似度得分会自动叠加 PageRank 分数，从而提升排序权重。详见 https://ragflow.io/docs/dev/set_page_rank。`,