Feat: Allow users to select prompt word templates in agent operators. #9935 (#9936)

### What problem does this PR solve?

Feat: Allow users to select prompt word templates in agent operators.
#9935

### Type of change


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

web/src/pages/agent/form/agent-form/index.tsx

@@ -39,6 +39,7 @@ import { Output } from '../components/output';
 import { PromptEditor } from '../components/prompt-editor';
 import { QueryVariable } from '../components/query-variable';
 import { AgentTools, Agents } from './agent-tools';
+import { useBuildPromptExtraPromptOptions } from './use-build-prompt-options';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
@@ -85,6 +86,9 @@ function AgentForm({ node }: INextOperatorForm) {
 
   const defaultValues = useValues(node);
 
+  const { extraOptions } = useBuildPromptExtraPromptOptions();
+  console.log('🚀 ~ AgentForm ~ prompts:', extraOptions);
+
   const ExceptionMethodOptions = Object.values(AgentExceptionMethod).map(
     (x) => ({
       label: t(`flow.${x}`),
@@ -150,6 +154,7 @@ function AgentForm({ node }: INextOperatorForm) {
                     {...field}
                     placeholder={t('flow.messagePlaceholder')}
                     showToolbar={false}
+                    extraOptions={extraOptions}
                   ></PromptEditor>
                 </FormControl>
               </FormItem>

web/src/pages/agent/form/agent-form/use-build-prompt-options.ts

@@ -0,0 +1,30 @@
+import { useFetchPrompt } from '@/hooks/use-agent-request';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const PromptIdentity = 'RAGFlow-Prompt';
+
+function wrapPromptWithTag(text: string, tag: string) {
+  const capitalTag = tag.toUpperCase();
+  return `<${capitalTag}>
+  ${text}
+</${capitalTag}>`;
+}
+
+export function useBuildPromptExtraPromptOptions() {
+  const { data: prompts } = useFetchPrompt();
+  const { t } = useTranslation();
+
+  const options = useMemo(() => {
+    return Object.entries(prompts || {}).map(([key, value]) => ({
+      label: key,
+      value: wrapPromptWithTag(value, key),
+    }));
+  }, [prompts]);
+
+  const extraOptions = [
+    { label: PromptIdentity, title: t('flow.frameworkPrompts'), options },
+  ];
+
+  return { extraOptions };
+}