mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-08 20:42:30 +08:00
0fcb564261
### 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)
108 lines
2.6 KiB
TypeScript
108 lines
2.6 KiB
TypeScript
import CopyToClipboard from '@/components/copy-to-clipboard';
|
|
import HightLightMarkdown from '@/components/highlight-markdown';
|
|
import { SharedFrom } from '@/constants/chat';
|
|
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;
|
|
|
|
const EmbedModal = ({
|
|
visible,
|
|
hideModal,
|
|
token = '',
|
|
form,
|
|
beta = '',
|
|
isAgent,
|
|
}: IModalProps<any> & {
|
|
token: string;
|
|
form: SharedFrom;
|
|
beta: string;
|
|
isAgent: boolean;
|
|
}) => {
|
|
const { t } = useTranslate('chat');
|
|
const isDarkTheme = useIsDarkTheme();
|
|
|
|
const text = `
|
|
~~~ html
|
|
<iframe
|
|
src="${location.origin}/chat/share?shared_id=${token}&from=${form}&auth=${beta}"
|
|
style="width: 100%; height: 100%; min-height: 600px"
|
|
frameborder="0"
|
|
>
|
|
</iframe>
|
|
~~~
|
|
`;
|
|
|
|
const items: TabsProps['items'] = [
|
|
{
|
|
key: '1',
|
|
label: t('fullScreenTitle'),
|
|
children: (
|
|
<Card
|
|
title={t('fullScreenDescription')}
|
|
extra={<CopyToClipboard text={text}></CopyToClipboard>}
|
|
className={styles.codeCard}
|
|
>
|
|
<HightLightMarkdown>{text}</HightLightMarkdown>
|
|
</Card>
|
|
),
|
|
},
|
|
{
|
|
key: '2',
|
|
label: t('partialTitle'),
|
|
children: t('comingSoon'),
|
|
},
|
|
{
|
|
key: '3',
|
|
label: t('extensionTitle'),
|
|
children: t('comingSoon'),
|
|
},
|
|
];
|
|
|
|
const onChange = (key: string) => {
|
|
console.log(key);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={t('embedIntoSite', { keyPrefix: 'common' })}
|
|
open={visible}
|
|
style={{ top: 300 }}
|
|
width={'50vw'}
|
|
onOk={hideModal}
|
|
onCancel={hideModal}
|
|
>
|
|
<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
|
|
<div className="text-base font-medium mt-4 mb-1">
|
|
{t(isAgent ? 'flow' : 'chat', { keyPrefix: 'header' })}
|
|
<span className="ml-1 inline-block">ID</span>
|
|
</div>
|
|
<Paragraph
|
|
copyable={{ text: token }}
|
|
className={cn(styles.id, {
|
|
[styles.darkId]: isDarkTheme,
|
|
})}
|
|
>
|
|
{token}
|
|
</Paragraph>
|
|
<Link
|
|
href={
|
|
isAgent
|
|
? 'https://ragflow.io/docs/dev/http_api_reference#create-session-with-an-agent'
|
|
: 'https://ragflow.io/docs/dev/http_api_reference#create-session-with-chat-assistant'
|
|
}
|
|
target="_blank"
|
|
>
|
|
{t('howUseId')}
|
|
</Link>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default EmbedModal;
|