general-assistant/build/AssistantAi/BuiltInCard/Markdown/index.js

General Assistant components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { useContext, useRef } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
import rehypeRaw from 'rehype-raw';
import gfm from 'remark-gfm';
import { useStore } from 'zustand';
import StoreContext from '../../_store/StoreContext';
import './index.css';
const handleCopy = (value, status, cptRef, cptIconRef) => {
    const targetElem = cptRef.current;
    const targetIconElem = cptIconRef.current;
    if (status) {
        targetElem.textContent = '\u2713 已复制!';
        targetIconElem.style.display = 'none';
    }
    setTimeout(() => {
        targetElem.textContent = '复制代码';
        targetIconElem.style.display = 'inline';
    }, 2000);
};
const CopyButton = ({ textToCopy }) => {
    const cptIconRef = useRef(null);
    const cptRef = useRef(null);
    return (_jsx(CopyToClipboard, { text: textToCopy, onCopy: (value, status) => handleCopy(value, status, cptRef, cptIconRef), children: _jsxs("div", { className: 'DS-GA-flex DS-GA-items-center\tDS-GA-cursor-pointer DS-GA-content-center DS-GA-text-xs hover:DS-GA-text-white', children: [_jsx("span", { ref: cptIconRef, className: 'icon iconfont-assistant icon-copy DS-GA-mr-1' }), _jsx("span", { ref: cptRef, children: "\u590D\u5236\u4EE3\u7801" })] }) }));
};
const CodeBlock = (obj, elem, styles) => {
    const codeNodeProps = obj?.children?.props;
    let language = codeNodeProps?.className;
    if (language?.startsWith('language-')) {
        language = language.substring('language-'.length);
    }
    const value = codeNodeProps.children;
    return (_jsxs("div", { className: 'DS-GA-relative DS-GA-my-1', children: [_jsxs("div", { className: 'toolbar DS-GA-flex DS-GA-justify-between', style: {}, children: [_jsx("span", { children: language }), _jsx("div", { className: `DS-GA-flex DS-GA-align-middle`, children: _jsx(CopyButton, { textToCopy: value }) })] }), _jsx(SyntaxHighlighter, { language: language, style: okaidia, children: value, className: 'code' })] }));
};
const Markdown = ({ data, ctx, styles = {} }) => {
    const { t } = useTranslation();
    const dataStore = useContext(StoreContext);
    const { getConfig } = useStore(dataStore, (state) => ({
        getConfig: state.getConfig
    }));
    const { fetchPendClass = 'DS-GA-animate-cursor' } = getConfig();
    const { _id, content } = data;
    const { data: cardData } = content;
    return (_jsx("div", { id: _id, className: classNames('DS-GA-text-sm DS-GA-overflow-y-auto'), children: _jsx(ReactMarkdown, { remarkPlugins: [gfm], rehypePlugins: [rehypeRaw], components: {
                pre: CodeBlock,
            }, className: 'markdown-body gal-markdown', children: cardData }) }));
};
export default Markdown;