Feat: Allow users to enter text in the middle of a chat #3221 (#8569)

### What problem does this PR solve?

Feat: Allow users to enter text in the middle of a chat #3221
### Type of change


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

web/src/pages/agent/canvas/node/begin-node.tsx

@@ -1,6 +1,6 @@
 import { IBeginNode } from '@/interfaces/database/flow';
+import { cn } from '@/lib/utils';
 import { NodeProps, Position } from '@xyflow/react';
-import { Flex } from 'antd';
 import get from 'lodash/get';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +20,7 @@ import { NodeWrapper } from './node-wrapper';
 // TODO: do not allow other nodes to connect to this node
 function InnerBeginNode({ data, id }: NodeProps<IBeginNode>) {
   const { t } = useTranslation();
-  const query: BeginQuery[] = get(data, 'form.query', []);
+  const inputs: Record<string, BeginQuery> = get(data, 'form.inputs', {});
 
   return (
     <NodeWrapper>
@@ -39,24 +39,22 @@ function InnerBeginNode({ data, id }: NodeProps<IBeginNode>) {
           {t(`flow.begin`)}
         </div>
       </section>
-      <Flex gap={8} vertical className={styles.generateParameters}>
-        {query.map((x, idx) => {
-          const Icon = BeginQueryTypeIconMap[x.type as BeginQueryType];
+      <section className={cn(styles.generateParameters, 'flex gap-2 flex-col')}>
+        {Object.entries(inputs).map(([key, val], idx) => {
+          const Icon = BeginQueryTypeIconMap[val.type as BeginQueryType];
           return (
-            <Flex
+            <div
               key={idx}
-              align="center"
-              gap={6}
-              className={styles.conditionBlock}
+              className={cn(styles.conditionBlock, 'flex gap-1.5 items-center')}
             >
               <Icon className="size-4" />
-              <label htmlFor="">{x.key}</label>
-              <span className={styles.parameterValue}>{x.name}</span>
-              <span className="flex-1">{x.optional ? 'Yes' : 'No'}</span>
-            </Flex>
+              <label htmlFor="">{key}</label>
+              <span className={styles.parameterValue}>{val.name}</span>
+              <span className="flex-1">{val.optional ? 'Yes' : 'No'}</span>
+            </div>
           );
         })}
-      </Flex>
+      </section>
     </NodeWrapper>
   );
 }