Feat: add agent share team viewer (#6222)

### What problem does this PR solve?
Allow member view agent  
#  Canvas editor

![image](https://github.com/user-attachments/assets/042af36d-5fd1-43e2-acf7-05869220a1c1)
# List agent

![image](https://github.com/user-attachments/assets/8b9c7376-780b-47ff-8f5c-6c0e7358158d)
# Setting 

![image](https://github.com/user-attachments/assets/6cb7d12a-7a66-4dd7-9acc-5b53ff79a10a)
 
_Briefly describe what this PR aims to solve. Include background context
that will help reviewers understand the purpose of the PR._

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

---------

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>

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

@@ -0,0 +1,121 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { useFetchFlow, useSettingFlow } from '@/hooks/flow-hooks';
+import { normFile } from '@/utils/file-util';
+import { PlusOutlined } from '@ant-design/icons';
+import { Form, Input, Modal, Radio, Upload } from 'antd';
+import React, { useCallback, useEffect } from 'react';
+export function useFlowSettingModal() {
+  const [visibleSettingModal, setVisibleSettingMModal] = React.useState(false);
+
+  return {
+    visibleSettingModal,
+    setVisibleSettingMModal,
+  };
+}
+
+type FlowSettingModalProps = {
+  visible: boolean;
+  hideModal: () => void;
+  id: string;
+};
+export const FlowSettingModal = ({
+  hideModal,
+  visible,
+  id,
+}: FlowSettingModalProps) => {
+  const { data, refetch } = useFetchFlow();
+  const [form] = Form.useForm();
+  const { t } = useTranslate('flow.settings');
+  const { loading, settingFlow } = useSettingFlow();
+  // Initialize form with data when it becomes available
+  useEffect(() => {
+    if (data) {
+      form.setFieldsValue({
+        title: data.title,
+        description: data.description,
+        permission: data.permission,
+        avatar: data.avatar ? [{ thumbUrl: data.avatar }] : [],
+      });
+    }
+  }, [data, form]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!id) return;
+    try {
+      const { avatar, ...others } = await form.validateFields();
+      const param = {
+        ...others,
+        id,
+        avatar: avatar && avatar.length > 0 ? avatar[0].thumbUrl : '',
+      };
+      settingFlow(param);
+    } catch (error) {
+      console.error('Validation failed:', error);
+    }
+  }, [form, id, settingFlow]);
+  React.useEffect(() => {
+    if (!loading && refetch && visible) {
+      refetch();
+    }
+  }, [loading, refetch, visible]);
+  return (
+    <Modal
+      confirmLoading={loading}
+      title={'Agent Setting'}
+      open={visible}
+      onCancel={hideModal}
+      onOk={handleSubmit}
+      okText={t('save', { keyPrefix: 'common' })}
+      cancelText={t('cancel', { keyPrefix: 'common' })}
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 6 }}
+        wrapperCol={{ span: 18 }}
+        layout="horizontal"
+        style={{ maxWidth: 600 }}
+      >
+        <Form.Item
+          name="title"
+          label="Title"
+          rules={[{ required: true, message: 'Please input a title!' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="avatar"
+          label={t('photo')}
+          valuePropName="fileList"
+          getValueFromEvent={normFile}
+        >
+          <Upload
+            listType="picture-card"
+            maxCount={1}
+            beforeUpload={() => false}
+            showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
+          >
+            <button style={{ border: 0, background: 'none' }} type="button">
+              <PlusOutlined />
+              <div style={{ marginTop: 8 }}>{t('upload')}</div>
+            </button>
+          </Upload>
+        </Form.Item>
+        <Form.Item name="description" label="Description">
+          <Input.TextArea rows={4} />
+        </Form.Item>
+
+        <Form.Item
+          name="permission"
+          label={t('permissions')}
+          tooltip={t('permissionsTip')}
+          rules={[{ required: true }]}
+        >
+          <Radio.Group>
+            <Radio value="me">{t('me')}</Radio>
+            <Radio value="team">{t('team')}</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};