@workday/canvas-kit-docs/dist/es6/lib/DownloadLLMFile.js

Documentation components of Canvas Kit components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ExternalHyperlink, SecondaryButton } from '@workday/canvas-kit-react/button';
import { Card } from '@workday/canvas-kit-react/card';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
import { createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
import { documentIcon, downloadIcon } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
const flexBlock = createStencil({
    vars: {
        gap: '',
    },
    base: ({ gap }) => ({
        display: 'flex',
        alignItems: 'center',
        gap: cssVar(gap, system.gap.xs),
        code: {
            fontFamily: system.fontFamily.mono,
            padding: system.padding.xxs,
            paddingInline: system.padding.xs,
            backgroundColor: system.color.surface.alt.default,
            borderRadius: px2rem(2),
        },
    }),
});
export const DownloadLLMFile = ({ rawFileLink, filename }) => {
    const handleDownload = async () => {
        try {
            const response = await fetch(rawFileLink);
            const content = await response.text();
            const blob = new Blob([content], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        }
        catch (error) {
            console.error('Failed to download file:', error);
        }
    };
    return (_jsx(Card, { className: "sb-unstyled", cs: { boxShadow: 'none', borderStyle: 'dashed' }, children: _jsxs(Card.Body, { cs: { display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center' }, children: [_jsxs("div", { ...flexBlock(), children: [_jsx(SystemIcon, { icon: documentIcon }), _jsx("code", { children: filename })] }), _jsxs("div", { ...flexBlock({ gap: system.gap.md }), children: [_jsx(ExternalHyperlink, { href: rawFileLink, children: "View raw file" }), _jsx(SecondaryButton, { icon: downloadIcon, size: "small", onClick: handleDownload, children: "Download LLM File" })] })] }) }));
};