Function ChunkPage

frontend/src/components/chunkPage/index.tsx:19–244

({ collectionId }: { collectionId: string })

import ClipboardJS from 'clipboard';
import { useTranslation } from 'react-i18next';
function ChunkPage({ collectionId }: { collectionId: string }) {
    const { t } = useTranslation();
    const { tooltipEditTitle, tooltipDeleteTitle } = tooltipTitle();
    const handleCopy = (text: string) => {
        const clipboard = new ClipboardJS('.icon-copy', {
            text: () => text
        });
        clipboard.on('success', function () {
            toast.success(`${t('CopiedToClipboard')}`)
            clipboard.destroy()
        });
        clipboard.on('error', function (e) {
            console.log(e);
        });
    }
    const columns = [
        {
            title: `${t('projectModelID')}`,
            dataIndex: 'chunk_id',
            key: 'chunk_id',
            width: 240,
            fixed: 'left',
            render: (text: string) =>
                <div style={{ display: 'flex', alignItems: 'center', margin: 0 }}>
                    <span style={{ fontSize: '12px', color: '#777' }}>{text}</span><CopyOutlined className='icon-copy' onClick={() => handleCopy(text)} />
                </div>
            ,
        },
        {
            title: `${t('projectChunkColumnContent')}`,
            width: 480,
            dataIndex: 'content',
            key: 'content',
            ellipsis: true,
            render: (text: any) => (
                <Tooltip title={text} placement='bottom'><span style={{ maxWidth: '480px', overflow: 'hidden', display: 'inline-block' }}>{text}</span></Tooltip>
            ),
        },
        {
            title: t('record'),
            dataIndex: 'record_id',
            key: 'record_id',
            width: 180,
            render: (text: string) => (
                <div>
                    {text}
                </div>
            )
        },
        {
            title: `# ${t('projectChunkColumnTokens')}`,
            dataIndex: 'num_tokens',
            key: 'num_tokens',
            width: 180,
            render: (text: string) => (
                <div>
                    {text}
                </div>