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/components/top-n-item.tsx

 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Slider } from 'antd';
-import { useFormContext } from 'react-hook-form';
-import { SingleFormSlider } from './ui/dual-range-slider';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from './ui/form';
+import { SliderInputFormField } from './slider-input-form-field';
 
 type FieldType = {
   top_n?: number;
 }
 
 export function TopNFormField({ max = 30 }: SimilaritySliderFormFieldProps) {
-  const form = useFormContext();
   const { t } = useTranslate('chat');
 
   return (
-    <FormField
-      control={form.control}
+    <SliderInputFormField
       name={'top_n'}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel tooltip={t('topNTip')}>{t('topN')}</FormLabel>
-          <FormControl>
-            <SingleFormSlider {...field} max={max}></SingleFormSlider>
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
+      label={t('topN')}
+      max={max}
+      tooltip={t('topNTip')}
+    ></SliderInputFormField>
   );
 }

web/src/constants/agent.ts

 module.exports = { main };
 `,
 };
+
+export enum AgentGlobals {
+  SysQuery = 'sys.query',
+  SysUserId = 'sys.user_id',
+  SysConversationTurns = 'sys.conversation_turns',
+  SysFiles = 'sys.files',
+}

web/src/hooks/use-agent-request.ts

+import { AgentGlobals } from '@/constants/agent';
 import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
 import i18n from '@/locales/config';
 import { BeginId } from '@/pages/agent/constant';
   history: [],
   path: [],
   globals: {
-    'sys.query': '',
-    'sys.user_id': '',
-    'sys.conversation_turns': 0,
-    'sys.files': [],
+    [AgentGlobals.SysQuery]: '',
+    [AgentGlobals.SysUserId]: '',
+    [AgentGlobals.SysConversationTurns]: 0,
+    [AgentGlobals.SysFiles]: [],
   },
 };
 

web/src/interfaces/database/flow.ts

   messages: Message[];
   reference: IReference[];
   globals: Record<string, any>;
+  retrieval: IReference[];
 }
 
 export interface IOperator {

web/src/pages/agent/canvas/index.tsx

 } from '../hooks';
 import { useAddNode } from '../hooks/use-add-node';
 import { useBeforeDelete } from '../hooks/use-before-delete';
-import { useShowDrawer } from '../hooks/use-show-drawer';
+import { useShowDrawer, useShowLogSheet } from '../hooks/use-show-drawer';
+import { LogSheet } from '../log-sheet';
 import RunSheet from '../run-sheet';
 import { ButtonEdge } from './edge';
 import styles from './index.less';
     hideDrawer,
   });
 
+  const { showLogSheet, logSheetVisible, hideLogSheet } = useShowLogSheet();
+
   const { handleBeforeDelete } = useBeforeDelete();
 
   useWatchNodeFormDataChange();
           hideModal={hideRunOrChatDrawer}
         ></ChatSheet>
       )}
-
       {runVisible && (
         <RunSheet
           hideModal={hideRunOrChatDrawer}
           showModal={showChatModal}
         ></RunSheet>
       )}
+      {logSheetVisible && (
+        <LogSheet hideModal={hideLogSheet} showModal={showLogSheet}></LogSheet>
+      )}
     </div>
   );
 }

web/src/pages/agent/chat/box.tsx

   return (
     <>
       <section className="flex flex-1 flex-col pl-5 h-[90vh]">
-        <div className="flex-1 ">
+        <div className="flex-1 overflow-auto">
           <div>
             <Spin spinning={loading}>
               {derivedMessages?.map((message, i) => {

web/src/pages/agent/chat/hooks.ts

 
 export const useSelectNextMessages = () => {
   const { data: flowDetail, loading } = useFetchAgent();
-  const reference = flowDetail.dsl.reference;
+  const reference = flowDetail.dsl.retrieval;
   const {
     derivedMessages,
     ref,
       addNewestAnswer({
         answer: content,
         id: id,
-        reference: {
-          chunks: [],
-          doc_aggs: [],
-          total: 0,
-        },
       });
     }
   }, [answerList, addNewestAnswer]);
     if (prologue) {
       addNewestAnswer({
         answer: prologue,
-        reference: {
-          chunks: [],
-          doc_aggs: [],
-          total: 0,
-        },
       });
     }
   }, [addNewestAnswer, prologue]);

web/src/pages/agent/constant.tsx

   initialKeywordsSimilarityWeightValue,
   initialSimilarityThresholdValue,
 } from '@/components/similarity-slider';
-import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent';
+import {
+  AgentGlobals,
+  CodeTemplateStrMap,
+  ProgrammingLanguage,
+} from '@/constants/agent';
 
 export enum AgentDialogueMode {
   Conversational = 'conversational',
   News = 'news',
 }
 
+export enum PromptRole {
+  User = 'user',
+  Assistant = 'assistant',
+}
+
 import {
   BranchesOutlined,
   DatabaseOutlined,
 export const initialAgentValues = {
   ...initialLlmBaseValues,
   sys_prompt: ``,
-  prompts: [],
+  prompts: [{ role: PromptRole.User, content: `{${AgentGlobals.SysQuery}}` }],
   message_history_window_size: 12,
   tools: [],
   outputs: {

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

-export enum PromptRole {
-  User = 'user',
-  Assistant = 'assistant',
-}

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

 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

 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

   $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 {
   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

   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

web/src/pages/agent/hooks/use-get-begin-query.tsx

+import { useFetchAgent } from '@/hooks/use-agent-request';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { Edge } from '@xyflow/react';
 import { DefaultOptionType } from 'antd/es/select';
 import { isEmpty } from 'lodash';
 import get from 'lodash/get';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { BeginId, Operator } from '../constant';
+import { AgentFormContext } from '../context';
 import { buildBeginInputListFromObject } from '../form/begin-form/utils';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
   );
   return getLabel;
 };
+
+export function useBuildQueryVariableOptions() {
+  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]);
+
+  return nextOptions;
+}

web/src/pages/agent/hooks/use-show-drawer.tsx

     showChatModal,
   };
 }
+
+export function useShowLogSheet() {
+  const { visible, showModal, hideModal } = useSetModalState();
+
+  return {
+    logSheetVisible: visible,
+    hideLogSheet: hideModal,
+    showLogSheet: showModal,
+  };
+}

web/src/pages/agent/log-sheet/index.tsx

+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { IModalProps } from '@/interfaces/common';
+
+export function LogSheet({ hideModal }: IModalProps<any>) {
+  return (
+    <Sheet open onOpenChange={hideModal}>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Are you absolutely sure?</SheetTitle>
+          <SheetDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  );
+}

web/src/pages/chat/utils.ts

   conversation: { message: IMessage[]; reference: IReference[] },
   message: IMessage,
 ) => {
-  const assistantMessages = conversation.message
-    ?.filter((x) => x.role === MessageType.Assistant)
-    .slice(1);
+  const assistantMessages = conversation.message?.filter(
+    (x) => x.role === MessageType.Assistant,
+  );
   const referenceIndex = assistantMessages.findIndex(
     (x) => x.id === message.id,
   );