Fix: Switching back and forth between the wiki template's custom options caused the Instructions to disappear. (#17805)

web/src/pages/agents/compilation-template-card.tsx

@@ -33,7 +33,7 @@ export function CompilationTemplateCard({
 
   return (
     <Card className="group cursor-pointer h-full" onClick={onClick}>
-      <CardContent className="p-4 flex gap-3">
+      <CardContent className="py-4 px-2.5 flex gap-3">
         <RAGFlowAvatar
           avatar={data.avatar}
           name={data.name}

web/src/pages/user-setting/compilation-templates/edit-next/components/blueprint-section.tsx

@@ -4,6 +4,7 @@ import { SelectWithSearch } from '@/components/originui/select-with-search';
 import { RAGFlowFormItem } from '@/components/ragflow-form';
 import { Textarea } from '@/components/ui/textarea';
 import { useFetchWikiPresets } from '@/hooks/use-compilation-template-request';
+import { ICompilationTemplateBuiltin } from '@/interfaces/database/compilation-template';
 import { UseFormReturn } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -13,11 +14,13 @@ import { FormSchemaType } from '../schema';
 type BlueprintSectionProps = {
   form: UseFormReturn<FormSchemaType>;
   selectedTemplateIndex: number;
+  builtins: ICompilationTemplateBuiltin[];
 };
 
 export function BlueprintSection({
   form,
   selectedTemplateIndex,
+  builtins,
 }: BlueprintSectionProps) {
   const { t } = useTranslation();
   const { data: presets } = useFetchWikiPresets();
@@ -28,7 +31,7 @@ export function BlueprintSection({
     instructionPath,
     pageExample,
     handlePageExampleChange,
-  } = useBlueprintSelection({ form, selectedTemplateIndex, presets });
+  } = useBlueprintSelection({ form, selectedTemplateIndex, presets, builtins });
 
   if (presets.length === 0) {
     return null;

web/src/pages/user-setting/compilation-templates/edit-next/components/template-configuration.tsx

@@ -1,7 +1,6 @@
 import { ModelTreeSelectFormField } from '@/components/model-tree-select';
 import { SelectWithSearch } from '@/components/originui/select-with-search';
 import { RAGFlowFormItem } from '@/components/ragflow-form';
-import { Checkbox } from '@/components/ui/checkbox';
 import { SwitchFormField } from '@/components/switch-fom-field';
 import { Input } from '@/components/ui/input';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -195,17 +194,11 @@ export function TemplateConfiguration({
           </RAGFlowFormItem>
 
           {kind === CompilationTemplateKind.Artifacts && (
-            <RAGFlowFormItem
+            <SwitchFormField
               name={`templates.${selectedTemplateIndex}.config.plan`}
               label={t('setting.plan')}
-            >
-              {(field) => (
-                <Checkbox
-                  checked={!!field.value}
-                  onCheckedChange={(v: boolean) => field.onChange(v)}
-                />
-              )}
-            </RAGFlowFormItem>
+              vertical={false}
+            />
           )}
 
           {kind === CompilationTemplateKind.Tree ? (

web/src/pages/user-setting/compilation-templates/edit-next/hooks/use-blueprint-selection.ts

@@ -1,10 +1,15 @@
 import { SelectWithSearchFlagOptionType } from '@/components/originui/select-with-search';
-import { IWikiPreset } from '@/interfaces/database/compilation-template';
+import {
+  ICompilationTemplateBuiltin,
+  IWikiPreset,
+} from '@/interfaces/database/compilation-template';
+import { capitalize, lowerCase } from 'lodash';
 import { useCallback, useMemo, useState } from 'react';
 import { UseFormReturn, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { FormSchemaType } from '../schema';
+import { splitExampleToBlueprintFields } from '../utils';
 
 export const CustomBlueprintValue = '__custom__';
 
@@ -12,6 +17,7 @@ type UseBlueprintSelectionParams = {
   form: UseFormReturn<FormSchemaType>;
   selectedTemplateIndex: number;
   presets: IWikiPreset[];
+  builtins: ICompilationTemplateBuiltin[];
 };
 
 const isSameBlueprintContent = (
@@ -26,10 +32,12 @@ export function useBlueprintSelection({
   form,
   selectedTemplateIndex,
   presets,
+  builtins,
 }: UseBlueprintSelectionParams) {
   const { t } = useTranslation();
   const [explicitValue, setExplicitValue] = useState<string>();
 
+  const kindPath = `templates.${selectedTemplateIndex}.kind` as const;
   const instructionPath =
     `templates.${selectedTemplateIndex}.config.instruction` as const;
   const pageExamplePath =
@@ -37,6 +45,10 @@ export function useBlueprintSelection({
   const useBlueprintPath =
     `templates.${selectedTemplateIndex}.config.use_blueprint` as const;
 
+  const kind = useWatch({
+    control: form.control,
+    name: kindPath,
+  });
   const instruction = useWatch({
     control: form.control,
     name: instructionPath,
@@ -63,7 +75,7 @@ export function useBlueprintSelection({
   const options = useMemo<SelectWithSearchFlagOptionType[]>(
     () => [
       ...presets.map((preset) => ({
-        label: preset.id,
+        label: capitalize(lowerCase(preset.id)),
         value: preset.id,
       })),
       { label: t('setting.custom'), value: CustomBlueprintValue },
@@ -77,19 +89,23 @@ export function useBlueprintSelection({
       setExplicitValue(value);
 
       if (value === CustomBlueprintValue) {
-        const defaultConfig =
-          form.formState.defaultValues?.templates?.[selectedTemplateIndex]
-            ?.config;
-        form.setValue(
-          instructionPath,
-          String(defaultConfig?.instruction ?? ''),
-          { shouldValidate: false },
-        );
-        form.setValue(
-          pageExamplePath,
-          String(defaultConfig?.page_example ?? ''),
-          { shouldValidate: false },
+        const builtinTemplate = builtins.find(
+          (template) => template.kind === kind,
         );
+        const example =
+          typeof builtinTemplate?.config?.example === 'string'
+            ? builtinTemplate.config.example
+            : '';
+        const {
+          instruction: defaultInstruction,
+          page_example: defaultPageExample,
+        } = splitExampleToBlueprintFields(example);
+        form.setValue(instructionPath, defaultInstruction, {
+          shouldValidate: false,
+        });
+        form.setValue(pageExamplePath, defaultPageExample, {
+          shouldValidate: false,
+        });
       } else {
         const preset = presets.find((item) => item.id === value);
         if (!preset) return;
@@ -104,11 +120,12 @@ export function useBlueprintSelection({
       form.setValue(useBlueprintPath, true, { shouldValidate: false });
     },
     [
+      builtins,
       form,
       instructionPath,
+      kind,
       pageExamplePath,
       presets,
-      selectedTemplateIndex,
       selectedValue,
       useBlueprintPath,
     ],

web/src/pages/user-setting/compilation-templates/edit-next/index.tsx

@@ -66,6 +66,7 @@ export default function EditNextCompilationTemplate() {
               <BlueprintSection
                 form={form}
                 selectedTemplateIndex={SelectedTemplateIndex}
+                builtins={builtins}
               />
             )}
           </TemplateConfiguration>