Feat: Add Template operator #3556 (#3559)

### What problem does this PR solve?

Feat: Add Template operator #3560

### Type of change


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

web/src/pages/chat/chat-id-modal/index.tsx

@@ -26,7 +26,7 @@ const ChatIdModal = ({
         {id}
       </Paragraph>
       <Link
-        href="https://ragflow.io/docs/dev/http_api_reference#create-session"
+        href="https://ragflow.io/docs/dev/http_api_reference#create-session-with-chat-assistant"
         target="_blank"
       >
         {t('howUseId')}

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

@@ -35,6 +35,7 @@ import { RelevantNode } from './node/relevant-node';
 import { RetrievalNode } from './node/retrieval-node';
 import { RewriteNode } from './node/rewrite-node';
 import { SwitchNode } from './node/switch-node';
+import { TemplateNode } from './node/template-node';
 
 const nodeTypes = {
   ragNode: RagNode,
@@ -50,6 +51,7 @@ const nodeTypes = {
   rewriteNode: RewriteNode,
   keywordNode: KeywordNode,
   invokeNode: InvokeNode,
+  templateNode: TemplateNode,
 };
 
 const edgeTypes = {

web/src/pages/flow/canvas/node/template-node.tsx

@@ -0,0 +1,68 @@
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import { get } from 'lodash';
+import { Handle, NodeProps, Position } from 'reactflow';
+import { useGetComponentLabelByValue } from '../../hooks';
+import { IGenerateParameter, NodeData } from '../../interface';
+import { LeftHandleStyle, RightHandleStyle } from './handle-icon';
+import NodeHeader from './node-header';
+
+import styles from './index.less';
+
+export function TemplateNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<NodeData>) {
+  const parameters: IGenerateParameter[] = get(data, 'form.parameters', []);
+  const getLabel = useGetComponentLabelByValue(id);
+
+  return (
+    <section
+      className={classNames(styles.logicNode, {
+        [styles.selectedNode]: selected,
+      })}
+    >
+      <Handle
+        id="c"
+        type="source"
+        position={Position.Left}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={LeftHandleStyle}
+      ></Handle>
+      <Handle
+        type="source"
+        position={Position.Right}
+        isConnectable={isConnectable}
+        className={styles.handle}
+        style={RightHandleStyle}
+        id="b"
+      ></Handle>
+
+      <NodeHeader
+        id={id}
+        name={data.name}
+        label={data.label}
+        className={styles.nodeHeader}
+      ></NodeHeader>
+
+      <Flex gap={8} vertical className={styles.generateParameters}>
+        {parameters.map((x) => (
+          <Flex
+            key={x.id}
+            align="center"
+            gap={6}
+            className={styles.conditionBlock}
+          >
+            <label htmlFor="">{x.key}</label>
+            <span className={styles.parameterValue}>
+              {getLabel(x.component_id)}
+            </span>
+          </Flex>
+        ))}
+      </Flex>
+    </section>
+  );
+}

web/src/pages/flow/constant.tsx

@@ -19,6 +19,7 @@ import { ReactComponent as NoteIcon } from '@/assets/svg/note.svg';
 import { ReactComponent as PubMedIcon } from '@/assets/svg/pubmed.svg';
 import { ReactComponent as QWeatherIcon } from '@/assets/svg/qweather.svg';
 import { ReactComponent as SwitchIcon } from '@/assets/svg/switch.svg';
+import { ReactComponent as TemplateIcon } from '@/assets/svg/template.svg';
 import { ReactComponent as TuShareIcon } from '@/assets/svg/tushare.svg';
 import { ReactComponent as WenCaiIcon } from '@/assets/svg/wencai.svg';
 import { ReactComponent as WikipediaIcon } from '@/assets/svg/wikipedia.svg';
@@ -85,6 +86,7 @@ export enum Operator {
   Note = 'Note',
   Crawler = 'Crawler',
   Invoke = 'Invoke',
+  Template = 'Template',
 }
 
 export const CommonOperatorList = Object.values(Operator).filter(
@@ -124,6 +126,7 @@ export const operatorIconMap = {
   [Operator.Note]: NoteIcon,
   [Operator.Crawler]: CrawlerIcon,
   [Operator.Invoke]: InvokeIcon,
+  [Operator.Template]: TemplateIcon,
 };
 
 export const operatorMap: Record<
@@ -253,6 +256,9 @@ export const operatorMap: Record<
   [Operator.Invoke]: {
     backgroundColor: '#dee0e2',
   },
+  [Operator.Template]: {
+    backgroundColor: '#dee0e2',
+  },
 };
 
 export const componentMenuList = [
@@ -286,6 +292,9 @@ export const componentMenuList = [
   {
     name: Operator.Concentrator,
   },
+  {
+    name: Operator.Template,
+  },
   {
     name: Operator.Note,
   },
@@ -566,6 +575,11 @@ export const initialInvokeValues = {
   clean_html: false,
 };
 
+export const initialTemplateValues = {
+  content: '',
+  parameters: [],
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -645,6 +659,7 @@ export const RestrictedUpstreamMap = {
   [Operator.Crawler]: [Operator.Begin],
   [Operator.Note]: [],
   [Operator.Invoke]: [Operator.Begin],
+  [Operator.Template]: [Operator.Begin, Operator.Relevant],
 };
 
 export const NodeMap = {
@@ -680,6 +695,7 @@ export const NodeMap = {
   [Operator.Note]: 'noteNode',
   [Operator.Crawler]: 'ragNode',
   [Operator.Invoke]: 'invokeNode',
+  [Operator.Template]: 'templateNode',
 };
 
 export const LanguageOptions = [

web/src/pages/flow/flow-drawer/index.tsx

@@ -39,6 +39,7 @@ import OperatorIcon from '../operator-icon';
 
 import { CloseOutlined } from '@ant-design/icons';
 import { lowerFirst } from 'lodash';
+import TemplateForm from '../form/template-form';
 import { getDrawerWidth } from '../utils';
 import styles from './index.less';
 
@@ -79,6 +80,7 @@ const FormMap = {
   [Operator.Invoke]: InvokeForm,
   [Operator.Concentrator]: () => <></>,
   [Operator.Note]: () => <></>,
+  [Operator.Template]: TemplateForm,
 };
 
 const EmptyContent = () => <div></div>;

web/src/pages/flow/flow-id-modal/index.tsx

@@ -24,7 +24,7 @@ const FlowIdModal = ({ hideModal }: IModalProps<any>) => {
         {id}
       </Paragraph>
       <Link
-        href="https://ragflow.io/docs/dev/http_api_reference#create-agent-session"
+        href="https://ragflow.io/docs/dev/http_api_reference#create-session-with-an-agent"
         target="_blank"
       >
         {t('howUseId')}

web/src/pages/flow/form/generate-form/dynamic-parameters.tsx

@@ -36,6 +36,7 @@ const DynamicParameters = ({ nodeId }: IProps) => {
       title: t('key'),
       dataIndex: 'key',
       key: 'key',
+      width: '40%',
       onCell: (record: IGenerateParameter) => ({
         record,
         editable: true,
@@ -49,6 +50,7 @@ const DynamicParameters = ({ nodeId }: IProps) => {
       dataIndex: 'component_id',
       key: 'component_id',
       align: 'center',
+      width: '40%',
       render(text, record) {
         return (
           <Select

web/src/pages/flow/form/template-form/index.tsx

@@ -0,0 +1,26 @@
+import { Form, Input } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { IOperatorForm } from '../../interface';
+import DynamicParameters from '../generate-form/dynamic-parameters';
+
+const TemplateForm = ({ onValuesChange, form, node }: IOperatorForm) => {
+  const { t } = useTranslation();
+
+  return (
+    <Form
+      name="basic"
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+      layout={'vertical'}
+    >
+      <Form.Item name={['content']} label={t('flow.content')}>
+        <Input.TextArea rows={8} placeholder={t('flow.blank')} />
+      </Form.Item>
+
+      <DynamicParameters nodeId={node?.id}></DynamicParameters>
+    </Form>
+  );
+};
+
+export default TemplateForm;

web/src/pages/flow/hooks.tsx

@@ -60,6 +60,7 @@ import {
   initialRetrievalValues,
   initialRewriteQuestionValues,
   initialSwitchValues,
+  initialTemplateValues,
   initialTuShareValues,
   initialWenCaiValues,
   initialWikipediaValues,
@@ -139,6 +140,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.Note]: initialNoteValues,
       [Operator.Crawler]: initialCrawlerValues,
       [Operator.Invoke]: initialInvokeValues,
+      [Operator.Template]: initialTemplateValues,
     };
   }, [llmId]);