Feat: Modify the data structure of the chunk in the conversation #3909 (#3955)

### What problem does this PR solve?

Feat: Modify the data structure of the chunk in the conversation #3909

### Type of change


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

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

@@ -1,13 +1,15 @@
-import ChatOverviewModal from '@/components/api-service/chat-overview-modal';
-import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
+import EmbedModal from '@/components/api-service/embed-modal';
+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 { ArrowLeftOutlined } from '@ant-design/icons';
 import { Button, Flex, Space } from 'antd';
 import { useCallback } from 'react';
 import { Link, useParams } from 'umi';
-import FlowIdModal from '../flow-id-modal';
 import {
   useGetBeginNodeDataQuery,
+  useGetBeginNodeDataQueryIsEmpty,
   useSaveGraph,
   useSaveGraphBeforeOpeningDebugDrawer,
   useWatchAgentChange,
@@ -25,15 +27,16 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
   const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
   const { data } = useFetchFlow();
   const { t } = useTranslate('flow');
-  const {
-    visible: overviewVisible,
-    hideModal: hideOverviewModal,
-    // showModal: showOverviewModal,
-  } = useSetModalState();
-  const { visible, hideModal, showModal } = useSetModalState();
   const { id } = useParams();
   const time = useWatchAgentChange(chatDrawerVisible);
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+  const { showEmbedModal, hideEmbedModal, embedVisible, beta } =
+    useShowEmbedModal();
+  const isBeginNodeDataQueryEmpty = useGetBeginNodeDataQueryIsEmpty();
+
+  const handleShowEmbedModal = useCallback(() => {
+    showEmbedModal();
+  }, [showEmbedModal]);
 
   const handleRunAgent = useCallback(() => {
     const query: BeginQuery[] = getBeginNodeDataQuery();
@@ -70,23 +73,25 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
           <Button type="primary" onClick={() => saveGraph()}>
             <b>{t('save')}</b>
           </Button>
-          {/* <Button type="primary" onClick={showOverviewModal} disabled>
+          <Button
+            type="primary"
+            onClick={handleShowEmbedModal}
+            disabled={!isBeginNodeDataQueryEmpty}
+          >
             <b>{t('publish')}</b>
-          </Button> */}
-          <Button type="primary" onClick={showModal}>
-            <b>Agent ID</b>
           </Button>
         </Space>
       </Flex>
-      {overviewVisible && (
-        <ChatOverviewModal
-          visible={overviewVisible}
-          hideModal={hideOverviewModal}
-          id={id!}
-          idKey="canvasId"
-        ></ChatOverviewModal>
+      {embedVisible && (
+        <EmbedModal
+          visible={embedVisible}
+          hideModal={hideEmbedModal}
+          token={id!}
+          form={SharedFrom.Agent}
+          beta={beta}
+          isAgent
+        ></EmbedModal>
       )}
-      {visible && <FlowIdModal hideModal={hideModal}></FlowIdModal>}
     </>
   );
 };