Fix: Improve Agent templates functionality and fix some UI style issues (#9129)

### What problem does this PR solve?

Fix: Improve Agent templates functionality and fix some UI style issues
#3221

### Type of change

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

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

@@ -123,7 +123,7 @@ function BeginForm({ node }: INextOperatorForm) {
             )}
           />
         )}
-        {enablePrologue && (
+        {mode === AgentDialogueMode.Conversational && enablePrologue && (
           <FormField
             control={form.control}
             name={'prologue'}
@@ -175,7 +175,6 @@ function BeginForm({ node }: INextOperatorForm) {
             deleteRecord={handleDeleteRecord}
           ></QueryTable>
         </Collapse>
-
         {visible && (
           <ParameterDialog
             hideModal={hideModal}

web/src/pages/agent/form/begin-form/parameter-dialog.tsx

@@ -17,10 +17,11 @@ import {
 import { Input } from '@/components/ui/input';
 import { RAGFlowSelect, RAGFlowSelectOptionType } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
+import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { isEmpty } from 'lodash';
-import { useEffect, useMemo } from 'react';
+import { ChangeEvent, useEffect, useMemo } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
@@ -41,6 +42,7 @@ function ParameterForm({
   otherThanCurrentQuery,
   submit,
 }: ModalFormProps) {
+  const { t } = useTranslate('flow');
   const FormSchema = z.object({
     type: z.string(),
     key: z
@@ -84,7 +86,7 @@ function ParameterForm({
                 <Icon
                   className={`size-${cur === BeginQueryType.Options ? 4 : 5}`}
                 ></Icon>
-                {cur}
+                {t(cur.toLowerCase())}
               </div>
             ),
             value: cur,
@@ -116,6 +118,13 @@ function ParameterForm({
     submit(values);
   }
 
+  const handleKeyChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const name = form.getValues().name || '';
+    form.setValue('key', e.target.value.trim());
+    if (!name) {
+      form.setValue('name', e.target.value.trim());
+    }
+  };
   return (
     <Form {...form}>
       <form
@@ -144,7 +153,7 @@ function ParameterForm({
             <FormItem>
               <FormLabel>Key</FormLabel>
               <FormControl>
-                <Input {...field} autoComplete="off" />
+                <Input {...field} autoComplete="off" onBlur={handleKeyChange} />
               </FormControl>
               <FormMessage />
             </FormItem>

web/src/pages/agent/form/begin-form/query-table.tsx

@@ -53,7 +53,7 @@ export function QueryTable({ data = [], deleteRecord, showModal }: IProps) {
   const columns: ColumnDef<BeginQuery>[] = [
     {
       accessorKey: 'key',
-      header: 'key',
+      header: 'Key',
       meta: { cellClassName: 'max-w-30' },
       cell: ({ row }) => {
         const key: string = row.getValue('key');
@@ -90,7 +90,11 @@ export function QueryTable({ data = [], deleteRecord, showModal }: IProps) {
     {
       accessorKey: 'type',
       header: t('flow.type'),
-      cell: ({ row }) => <div>{row.getValue('type')}</div>,
+      cell: ({ row }) => (
+        <div>
+          {t(`flow.${(row.getValue('type')?.toString() || '').toLowerCase()}`)}
+        </div>
+      ),
     },
     {
       accessorKey: 'optional',