Feat: Modify the text of the embedded website button #3909 (#4057)

### What problem does this PR solve?

Feat: Modify the text of the embedded website button #3909

### Type of change

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

web/src/components/api-service/embed-modal/index.less

@@ -10,3 +10,12 @@
 .id {
   .linkText();
 }
+
+.darkBg {
+  background-color: rgb(69, 68, 68);
+}
+
+.darkId {
+  color: white;
+  .darkBg();
+}

web/src/components/api-service/embed-modal/index.tsx

@@ -5,6 +5,8 @@ import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { Card, Modal, Tabs, TabsProps, Typography } from 'antd';
 
+import { useIsDarkTheme } from '@/components/theme-provider';
+import { cn } from '@/lib/utils';
 import styles from './index.less';
 
 const { Paragraph, Link } = Typography;
@@ -23,6 +25,7 @@ const EmbedModal = ({
   isAgent: boolean;
 }) => {
   const { t } = useTranslate('chat');
+  const isDarkTheme = useIsDarkTheme();
 
   const text = `
   ~~~ html
@@ -67,7 +70,7 @@ const EmbedModal = ({
 
   return (
     <Modal
-      title={t('embedModalTitle')}
+      title={t('embedIntoSite', { keyPrefix: 'common' })}
       open={visible}
       style={{ top: 300 }}
       width={'50vw'}
@@ -79,7 +82,12 @@ const EmbedModal = ({
         {t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
         <span className="ml-1 inline-block">ID</span>
       </div>
-      <Paragraph copyable={{ text: token }} className={styles.id}>
+      <Paragraph
+        copyable={{ text: token }}
+        className={cn(styles.id, {
+          [styles.darkId]: isDarkTheme,
+        })}
+      >
         {token}
       </Paragraph>
       <Link

web/src/locales/en.ts

@@ -33,6 +33,7 @@ export default {
       pleaseSelect: 'Please select',
       pleaseInput: 'Please input',
       submit: 'Submit',
+      embedIntoSite: 'Embed Into Site',
     },
     login: {
       login: 'Sign in',
@@ -1026,8 +1027,7 @@ The above is the content you need to summarize.`,
       noteDescription: 'Note',
       notePlaceholder: 'Please enter a note',
       invoke: 'Invoke',
-      invokeDescription:
-        `A component capable of calling remote services, using other components' outputs or constants as inputs.`,
+      invokeDescription: `A component capable of calling remote services, using other components' outputs or constants as inputs.`,
       url: 'Url',
       method: 'Method',
       timeout: 'Timeout',

web/src/locales/zh-traditional.ts

@@ -33,6 +33,7 @@ export default {
       pleaseSelect: '請選擇',
       pleaseInput: '請輸入',
       submit: '提交',
+      embedIntoSite: '嵌入網站',
     },
     login: {
       login: '登入',

web/src/locales/zh.ts

@@ -33,6 +33,7 @@ export default {
       pleaseSelect: '请选择',
       pleaseInput: '请输入',
       submit: '提交',
+      embedIntoSite: '嵌入网站',
     },
     login: {
       login: '登录',

web/src/pages/chat/index.tsx

@@ -1,6 +1,6 @@
 import { ReactComponent as ChatAppCube } from '@/assets/svg/chat-app-cube.svg';
 import RenameModal from '@/components/rename-modal';
-import { DeleteOutlined, EditOutlined, KeyOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import {
   Avatar,
   Button,
@@ -43,6 +43,7 @@ import {
 import { useTranslate } from '@/hooks/common-hooks';
 import { useSetSelectedRecord } from '@/hooks/logic-hooks';
 import { IDialog } from '@/interfaces/database/chat';
+import { PictureInPicture2 } from 'lucide-react';
 import styles from './index.less';
 
 const { Text } = Typography;
@@ -191,8 +192,9 @@ const Chat = () => {
         onClick: handleShowOverviewModal(dialog),
         label: (
           <Space>
-            <KeyOutlined />
-            {t('publish', { keyPrefix: 'flow' })}
+            {/* <KeyOutlined /> */}
+            <PictureInPicture2 className="size-4" />
+            {t('embedIntoSite', { keyPrefix: 'common' })}
           </Space>
         ),
       },

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

@@ -78,7 +78,7 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
             onClick={handleShowEmbedModal}
             disabled={!isBeginNodeDataQueryEmpty}
           >
-            <b>{t('publish')}</b>
+            <b>{t('embedIntoSite', { keyPrefix: 'common' })}</b>
           </Button>
         </Space>
       </Flex>