Feat: Let system variables appear in operator prompts #3221 (#8154)

### What problem does this PR solve?
Feat: Let system variables appear in operator prompts #3221

### Type of change


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

web/src/pages/agent/form/agent-form/constant.ts

@@ -1,4 +0,0 @@
-export enum PromptRole {
-  User = 'user',
-  Assistant = 'assistant',
-}

web/src/pages/agent/form/agent-form/dynamic-prompt.tsx

@@ -11,8 +11,8 @@ import { X } from 'lucide-react';
 import { memo } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { PromptRole } from '../../constant';
 import { PromptEditor } from '../components/prompt-editor';
-import { PromptRole } from './constant';
 
 const options = [
   { label: 'User', value: PromptRole.User },

web/src/pages/agent/form/agent-form/use-watch-change.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { UseFormReturn, useWatch } from 'react-hook-form';
+import { PromptRole } from '../../constant';
 import useGraphStore from '../../store';
-import { PromptRole } from './constant';
 
 export function useWatchFormChange(id?: string, form?: UseFormReturn) {
   let values = useWatch({ control: form?.control });

web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx

@@ -20,19 +20,12 @@ import {
   $isRangeSelection,
   TextNode,
 } from 'lexical';
-import React, {
-  ReactElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react';
+import React, { ReactElement, useCallback, useEffect, useRef } from 'react';
 import * as ReactDOM from 'react-dom';
 
 import { $createVariableNode } from './variable-node';
 
-import { AgentFormContext } from '@/pages/agent/context';
-import { useBuildComponentIdSelectOptions } from '@/pages/agent/hooks/use-get-begin-query';
+import { useBuildQueryVariableOptions } from '@/pages/agent/hooks/use-get-begin-query';
 import { ProgrammaticTag } from './constant';
 import './index.css';
 class VariableInnerOption extends MenuOption {
@@ -109,15 +102,13 @@ export default function VariablePickerMenuPlugin({
   const [editor] = useLexicalComposerContext();
   const isFirstRender = useRef(true);
 
-  const node = useContext(AgentFormContext);
-
   const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
     minLength: 0,
   });
 
   const [queryString, setQueryString] = React.useState<string | null>('');
 
-  const options = useBuildComponentIdSelectOptions(node?.id, node?.parentId);
+  const options = useBuildQueryVariableOptions();
 
   const buildNextOptions = useCallback(() => {
     let filteredOptions = options;

web/src/pages/agent/form/components/query-variable.tsx

@@ -6,31 +6,15 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { useFetchAgent } from '@/hooks/use-agent-request';
-import { useContext, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { AgentFormContext } from '../../context';
-import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
+import { useBuildQueryVariableOptions } from '../../hooks/use-get-begin-query';
 
 export function QueryVariable() {
   const { t } = useTranslation();
   const form = useFormContext();
-  const { data } = useFetchAgent();
 
-  const node = useContext(AgentFormContext);
-  const options = useBuildComponentIdSelectOptions(node?.id, node?.parentId);
-
-  const nextOptions = useMemo(() => {
-    const globalOptions = Object.keys(data?.dsl?.globals ?? {}).map((x) => ({
-      label: x,
-      value: x,
-    }));
-    return [
-      { ...options[0], options: [...options[0]?.options, ...globalOptions] },
-      ...options.slice(1),
-    ];
-  }, [data.dsl.globals, options]);
+  const nextOptions = useBuildQueryVariableOptions();
 
   return (
     <FormField