Fix: Optimized variable node display and Agent template multi-language support #3221 (#9787)

### What problem does this PR solve?

Fix: Optimized variable node display and Agent template multi-language
support #3221

- Modified the VariableNode component to add parent label and icon
properties
- Updated the VariablePickerMenuPlugin to support displaying parent
labels and icons
- Adjusted useBuildNodeOutputOptions and useBuildBeginVariableOptions to
pass new properties
- Optimized the Agent TemplateCard component to switch the title and
description based on the language

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

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

@@ -6,7 +6,14 @@ import { DefaultOptionType } from 'antd/es/select';
 import { t } from 'i18next';
 import { isEmpty } from 'lodash';
 import get from 'lodash/get';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import {
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   AgentDialogueMode,
   BeginId,
@@ -17,6 +24,7 @@ import {
 import { AgentFormContext } from '../context';
 import { buildBeginInputListFromObject } from '../form/begin-form/utils';
 import { BeginQuery } from '../interface';
+import OperatorIcon from '../operator-icon';
 import useGraphStore from '../store';
 
 export function useSelectBeginNodeDataInputs() {
@@ -98,10 +106,14 @@ function filterAllUpstreamNodeIds(edges: Edge[], nodeIds: string[]) {
 export function buildOutputOptions(
   outputs: Record<string, any> = {},
   nodeId?: string,
+  parentLabel?: string | ReactNode,
+  icon?: ReactNode,
 ) {
   return Object.keys(outputs).map((x) => ({
     label: x,
     value: `${nodeId}@${x}`,
+    parentLabel,
+    icon,
     type: outputs[x]?.type,
   }));
 }
@@ -127,7 +139,12 @@ export function useBuildNodeOutputOptions(nodeId?: string) {
         label: x.data.name,
         value: x.id,
         title: x.data.name,
-        options: buildOutputOptions(x.data.form.outputs, x.id),
+        options: buildOutputOptions(
+          x.data.form.outputs,
+          x.id,
+          x.data.name,
+          <OperatorIcon name={x.data.label as Operator} />,
+        ),
       }));
   }, [edges, nodeId, nodes]);
 
@@ -162,9 +179,11 @@ export function useBuildBeginVariableOptions() {
     return [
       {
         label: <span>{t('flow.beginInput')}</span>,
-        title: 'Begin Input',
+        title: t('flow.beginInput'),
         options: inputs.map((x) => ({
           label: x.name,
+          parentLabel: <span>{t('flow.beginInput')}</span>,
+          icon: <OperatorIcon name={Operator.Begin} className="block" />,
           value: `begin@${x.key}`,
           type: transferToVariableType(x.type),
         })),
@@ -191,12 +210,13 @@ export function useBuildQueryVariableOptions(n?: RAGFlowNodeType) {
   const { data } = useFetchAgent();
   const node = useContext(AgentFormContext) || n;
   const options = useBuildVariableOptions(node?.id, node?.parentId);
-
   const nextOptions = useMemo(() => {
     const globals = data?.dsl?.globals ?? {};
     const globalOptions = Object.entries(globals).map(([key, value]) => ({
       label: key,
       value: key,
+      icon: <OperatorIcon name={Operator.Begin} className="block" />,
+      parentLabel: <span>{t('flow.beginInput')}</span>,
       type: Array.isArray(value)
         ? `${VariableType.Array}${key === AgentGlobals.SysFiles ? '<file>' : ''}`
         : typeof value,