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/list/index.tsx

@@ -1,10 +1,21 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { Button, Empty, Flex, Spin } from 'antd';
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Divider,
+  Empty,
+  Flex,
+  Input,
+  Skeleton,
+  Space,
+  Spin,
+} from 'antd';
 import AgentTemplateModal from './agent-template-modal';
 import FlowCard from './flow-card';
 import { useFetchDataOnMount, useSaveFlow } from './hooks';
 
 import { useTranslate } from '@/hooks/common-hooks';
+import { useMemo } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
 import styles from './index.less';
 
 const FlowList = () => {
@@ -17,29 +28,66 @@ const FlowList = () => {
   } = useSaveFlow();
   const { t } = useTranslate('flow');
 
-  const { list, loading } = useFetchDataOnMount();
+  const {
+    data,
+    loading,
+    searchString,
+    handleInputChange,
+    fetchNextPage,
+    hasNextPage,
+  } = useFetchDataOnMount();
+
+  const nextList = useMemo(() => {
+    const list =
+      data?.pages?.flatMap((x) => (Array.isArray(x.kbs) ? x.kbs : [])) ?? [];
+    return list;
+  }, [data?.pages]);
+
+  const total = useMemo(() => {
+    return data?.pages.at(-1).total ?? 0;
+  }, [data?.pages]);
 
   return (
     <Flex className={styles.flowListWrapper} vertical flex={1} gap={'large'}>
       <Flex justify={'end'}>
-        <Button
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={showFlowSettingModal}
-        >
-          {t('createGraph')}
-        </Button>
+        <Space size={'large'}>
+          <Input
+            placeholder={t('searchAgentPlaceholder')}
+            value={searchString}
+            style={{ width: 220 }}
+            allowClear
+            onChange={handleInputChange}
+            prefix={<SearchOutlined />}
+          />
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={showFlowSettingModal}
+          >
+            {t('createGraph')}
+          </Button>
+        </Space>
       </Flex>
+
       <Spin spinning={loading}>
-        <Flex gap={'large'} wrap="wrap" className={styles.flowCardContainer}>
-          {list.length > 0 ? (
-            list.map((item) => {
-              return <FlowCard item={item} key={item.id}></FlowCard>;
-            })
-          ) : (
-            <Empty className={styles.knowledgeEmpty}></Empty>
-          )}
-        </Flex>
+        <InfiniteScroll
+          dataLength={nextList?.length ?? 0}
+          next={fetchNextPage}
+          hasMore={hasNextPage}
+          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
+          endMessage={!!total && <Divider plain>{t('noMoreData')} 🤐</Divider>}
+          scrollableTarget="scrollableDiv"
+        >
+          <Flex gap={'large'} wrap="wrap" className={styles.flowCardContainer}>
+            {nextList.length > 0 ? (
+              nextList.map((item) => {
+                return <FlowCard item={item} key={item.id}></FlowCard>;
+              })
+            ) : (
+              <Empty className={styles.knowledgeEmpty}></Empty>
+            )}
+          </Flex>
+        </InfiniteScroll>
       </Spin>
       {flowSettingVisible && (
         <AgentTemplateModal