feat: translate EmbedModal #345 (#455)

### What problem does this PR solve?

Embed the chat window into other websites through iframe

#345 

### Type of change


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

web/src/pages/chat/chat-overview-modal/index.tsx

@@ -1,17 +1,19 @@
-import CopyToClipboard from '@/components/copy-to-clipboard';
 import LineChart from '@/components/line-chart';
-import { useCreatePublicUrlToken } from '@/hooks/chatHooks';
 import { useSetModalState, useTranslate } from '@/hooks/commonHooks';
 import { IModalProps } from '@/interfaces/common';
 import { IDialog, IStats } from '@/interfaces/database/chat';
-import { ReloadOutlined } from '@ant-design/icons';
 import { Button, Card, DatePicker, Flex, Modal, Space, Typography } from 'antd';
 import { RangePickerProps } from 'antd/es/date-picker';
 import dayjs from 'dayjs';
 import camelCase from 'lodash/camelCase';
-import { Link } from 'umi';
 import ChatApiKeyModal from '../chat-api-key-modal';
-import { useFetchStatsOnMount, useSelectChartStatsList } from '../hooks';
+import EmbedModal from '../embed-modal';
+import {
+  useFetchStatsOnMount,
+  usePreviewChat,
+  useSelectChartStatsList,
+  useShowEmbedModal,
+} from '../hooks';
 import styles from './index.less';
 
 const { Paragraph } = Typography;
@@ -24,16 +26,18 @@ const ChatOverviewModal = ({
 }: IModalProps<any> & { dialog: IDialog }) => {
   const { t } = useTranslate('chat');
   const chartList = useSelectChartStatsList();
-  const { urlWithToken, createUrlToken, token } = useCreatePublicUrlToken(
-    dialog.id,
-    visible,
-  );
-
   const {
     visible: apiKeyVisible,
     hideModal: hideApiKeyModal,
     showModal: showApiKeyModal,
   } = useSetModalState();
+  const {
+    embedVisible,
+    hideEmbedModal,
+    showEmbedModal,
+    embedToken,
+    errorContextHolder,
+  } = useShowEmbedModal(dialog.id);
 
   const { pickerValue, setPickerValue } = useFetchStatsOnMount(visible);
 
@@ -41,6 +45,8 @@ const ChatOverviewModal = ({
     return current && current > dayjs().endOf('day');
   };
 
+  const { handlePreview, contextHolder } = usePreviewChat(dialog.id);
+
   return (
     <>
       <Modal
@@ -50,36 +56,41 @@ const ChatOverviewModal = ({
         width={'100vw'}
       >
         <Flex vertical gap={'middle'}>
-          <Card title={dialog.name}>
-            <Flex gap={8} vertical>
-              {t('publicUrl')}
-              <Flex className={styles.linkText} gap={10}>
-                <span>{urlWithToken}</span>
-                <CopyToClipboard text={urlWithToken}></CopyToClipboard>
-                <ReloadOutlined onClick={createUrlToken} />
-              </Flex>
-              <Space size={'middle'}>
-                <Button>
-                  <Link to={`/chat/share?shared_id=${token}`} target="_blank">
-                    {t('preview')}
-                  </Link>
-                </Button>
-                <Button>{t('embedded')}</Button>
-              </Space>
-            </Flex>
-          </Card>
           <Card title={t('backendServiceApi')}>
             <Flex gap={8} vertical>
               {t('serviceApiEndpoint')}
               <Paragraph copyable className={styles.linkText}>
-                This is a copyable text.
+                https://demo.ragflow.io/v1/api/
               </Paragraph>
             </Flex>
             <Space size={'middle'}>
               <Button onClick={showApiKeyModal}>{t('apiKey')}</Button>
-              <Button>{t('apiReference')}</Button>
+              <a
+                href={
+                  'https://github.com/infiniflow/ragflow/blob/main/docs/conversation_api.md'
+                }
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Button>{t('apiReference')}</Button>
+              </a>
             </Space>
           </Card>
+          <Card title={dialog.name}>
+            <Flex gap={8} vertical>
+              {t('publicUrl')}
+              {/* <Flex className={styles.linkText} gap={10}>
+                <span>{urlWithToken}</span>
+                <CopyToClipboard text={urlWithToken}></CopyToClipboard>
+                <ReloadOutlined onClick={createUrlToken} />
+              </Flex> */}
+              <Space size={'middle'}>
+                <Button onClick={handlePreview}>{t('preview')}</Button>
+                <Button onClick={showEmbedModal}>{t('embedded')}</Button>
+              </Space>
+            </Flex>
+          </Card>
+
           <Space>
             <b>{t('dateRange')}</b>
             <RangePicker
@@ -103,6 +114,13 @@ const ChatOverviewModal = ({
           hideModal={hideApiKeyModal}
           dialogId={dialog.id}
         ></ChatApiKeyModal>
+        <EmbedModal
+          token={embedToken}
+          visible={embedVisible}
+          hideModal={hideEmbedModal}
+        ></EmbedModal>
+        {contextHolder}
+        {errorContextHolder}
       </Modal>
     </>
   );