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/header/index.less

@@ -1,3 +1,10 @@
 .flowHeader {
   padding: 10px 20px;
 }
+.hideRibbon {
+  display: none !important;
+}
+
+.ribbon {
+  top: 4px;
+}

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

@@ -3,10 +3,13 @@ import { useShowEmbedModal } from '@/components/api-service/hooks';
 import { SharedFrom } from '@/constants/chat';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useFetchFlow } from '@/hooks/flow-hooks';
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Button, Flex, Space } from 'antd';
+import { Badge, Button, Flex, Space } from 'antd';
+import classNames from 'classnames';
 import { useCallback } from 'react';
 import { Link, useParams } from 'umi';
+import { FlowSettingModal, useFlowSettingModal } from '../flow-setting';
 import {
   useGetBeginNodeDataQuery,
   useGetBeginNodeDataQueryIsSafe,
@@ -32,6 +35,8 @@ interface IProps {
 const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
   const { saveGraph } = useSaveGraph();
   const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
+  const { data: userInfo } = useFetchUserInfo();
+
   const { data } = useFetchFlow();
   const { t } = useTranslate('flow');
   const { id } = useParams();
@@ -39,6 +44,8 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
   const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
     useShowEmbedModal();
+  const { setVisibleSettingMModal, visibleSettingModal } =
+    useFlowSettingModal();
   const isBeginNodeDataQuerySafe = useGetBeginNodeDataQueryIsSafe();
   const { setVisibleHistoryVersionModal, visibleHistoryVersionModal } =
     useHistoryVersionModal();
@@ -55,6 +62,10 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
     }
   }, [getBeginNodeDataQuery, handleRun, showChatDrawer]);
 
+  const showSetting = useCallback(() => {
+    setVisibleSettingMModal(true);
+  }, [setVisibleSettingMModal]);
+
   const showListVersion = useCallback(() => {
     setVisibleHistoryVersionModal(true);
   }, [setVisibleHistoryVersionModal]);
@@ -66,31 +77,56 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
         gap={'large'}
         className={styles.flowHeader}
       >
+        <Badge.Ribbon
+          text={data?.nickname}
+          style={{ marginRight: -data?.nickname?.length * 5 }}
+          color={userInfo?.nickname === data?.nickname ? '#1677ff' : 'pink'}
+          className={classNames(styles.ribbon, {
+            [styles.hideRibbon]: data.permission !== 'team',
+          })}
+        >
+          <Space className={styles.headerTitle} size={'large'}>
+            <Link to={`/flow`}>
+              <ArrowLeftOutlined />
+            </Link>
+            <div className="flex flex-col">
+              <span className="font-semibold text-[18px]">{data.title}</span>
+              <span className="font-normal text-sm">
+                {t('autosaved')} {time}
+              </span>
+            </div>
+          </Space>
+        </Badge.Ribbon>
         <Space size={'large'}>
-          <Link to={`/flow`}>
-            <ArrowLeftOutlined />
-          </Link>
-          <div className="flex flex-col">
-            <span className="font-semibold text-[18px]">{data.title}</span>
-            <span className="font-normal text-sm">
-              {t('autosaved')} {time}
-            </span>
-          </div>
-        </Space>
-        <Space size={'large'}>
-          <Button onClick={handleRunAgent}>
+          <Button
+            disabled={userInfo.nickname !== data.nickname}
+            onClick={handleRunAgent}
+          >
             <b>{t('run')}</b>
           </Button>
-          <Button type="primary" onClick={() => saveGraph()}>
+          <Button
+            disabled={userInfo.nickname !== data.nickname}
+            type="primary"
+            onClick={() => saveGraph()}
+          >
             <b>{t('save')}</b>
           </Button>
           <Button
             type="primary"
             onClick={handleShowEmbedModal}
-            disabled={!isBeginNodeDataQuerySafe}
+            disabled={
+              !isBeginNodeDataQuerySafe || userInfo.nickname !== data.nickname
+            }
           >
             <b>{t('embedIntoSite', { keyPrefix: 'common' })}</b>
           </Button>
+          <Button
+            disabled={userInfo.nickname !== data.nickname}
+            type="primary"
+            onClick={showSetting}
+          >
+            <b>{t('setting')}</b>
+          </Button>
           <Button type="primary" onClick={showListVersion}>
             <b>{t('historyversion')}</b>
           </Button>
@@ -106,6 +142,13 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
           isAgent
         ></EmbedModal>
       )}
+      {visibleSettingModal && (
+        <FlowSettingModal
+          id={id || ''}
+          visible={visibleSettingModal}
+          hideModal={() => setVisibleSettingMModal(false)}
+        ></FlowSettingModal>
+      )}
       {visibleHistoryVersionModal && (
         <HistoryVersionModal
           id={id || ''}