function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}
function _object_spread(target) {
    for(var i = 1; i < arguments.length; i++){
        var source = arguments[i] != null ? arguments[i] : {};
        var ownKeys = Object.keys(source);
        if (typeof Object.getOwnPropertySymbols === "function") {
            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
            }));
        }
        ownKeys.forEach(function(key) {
            _define_property(target, key, source[key]);
        });
    }
    return target;
}
function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);
    if (Object.getOwnPropertySymbols) {
        var symbols = Object.getOwnPropertySymbols(object);
        if (enumerableOnly) {
            symbols = symbols.filter(function(sym) {
                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
            });
        }
        keys.push.apply(keys, symbols);
    }
    return keys;
}
function _object_spread_props(target, source) {
    source = source != null ? source : {};
    if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
        ownKeys(Object(source)).forEach(function(key) {
            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
    }
    return target;
}
import { Popover, theme } from "antd";
import React, { useContext, useEffect, useMemo } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { MarkdownEditor, parserMdToSchema } from "../..";
import { BubbleConfigContext } from "../BubbleConfigProvide";
import { MessagesContext } from "./BubbleContext";
/**
 * Markdown 预览组件
 * @component MarkdownPreview
 *
 * @param {Object} props - 组件属性
 * @param {string} props.content - Markdown 内容
 * @param {ReactNode} props.extra - 额外的内容
 * @param {boolean} props.typing - 是否正在输入
 * @param {React.RefObject} props.htmlRef - HTML 元素的引用
 * @param {Object} props.fncProps - 功能属性
 * @param {ReactNode} props.docListNode - 文档列表节点
 * @param {boolean} props.isFinished - 内容是否已完成
 * @param {ReactNode} props.beforeContent - 在 content 前面插入的 DOM 元素
 * @param {ReactNode} props.afterContent - 在 content 后面插入的 DOM 元素
 *
 * @description
 * 这是一个用于渲染 Markdown 内容的预览组件。它支持以下功能：
 * - 普通 Markdown 渲染
 * - 支持打字机效果
 * - 错误边界处理
 * - 支持 Apaasify 自定义渲染
 * - 支持紧凑模式和标准模式
 * - 支持弹出层展示额外内容
 * - 支持在 content 前后插入自定义 DOM 元素
 *
 * @example
 * ```tsx
 * <MarkdownPreview
 *   content="# Hello World"
 *   typing={false}
 *   htmlRef={ref}
 *   beforeContent={<div>前置内容</div>}
 *   afterContent={<div>后置内容</div>}
 * />
 * ```
 */ export var MarkdownPreview = function(props) {
    var _props_originData;
    var content = props.content, extra = props.extra, typing = props.typing, htmlRef = props.htmlRef, fncProps = props.fncProps, docListNode = props.docListNode, isFinished = props.isFinished, beforeContent = props.beforeContent, afterContent = props.afterContent;
    var MarkdownEditorRef = React.useRef(undefined);
    var hidePadding = (useContext(MessagesContext) || {}).hidePadding;
    var _ref = useContext(BubbleConfigContext) || {}, locale = _ref.locale, standalone = _ref.standalone;
    var token = theme.useToken().token;
    useEffect(function() {
        if (isFinished) {
            var _MarkdownEditorRef_current;
            (_MarkdownEditorRef_current = MarkdownEditorRef.current) === null || _MarkdownEditorRef_current === void 0 ? void 0 : _MarkdownEditorRef_current.store.setMDContent(content);
            return;
        }
    }, [
        isFinished
    ]);
    var isPaddingHidden = useMemo(function() {
        return !!extra;
    }, [
        extra,
        typing
    ]);
    useEffect(function() {
        var _MarkdownEditorRef_current;
        var schema = parserMdToSchema(content).schema;
        (_MarkdownEditorRef_current = MarkdownEditorRef.current) === null || _MarkdownEditorRef_current === void 0 ? void 0 : _MarkdownEditorRef_current.store.updateNodeList(schema);
    }, [
        content
    ]);
    var markdown = useMemo(function() {
        var _ref;
        var _content_includes, _htmlRef_current, _htmlRef_current1, _props_markdownRenderConfig, _props_originData, _props_originData1, _props_originData2, _props_markdownRenderConfig1, _props_markdownRenderConfig2, _props_markdownRenderConfig3;
        var minWidth = (content === null || content === void 0 ? void 0 : (_content_includes = content.includes) === null || _content_includes === void 0 ? void 0 : _content_includes.call(content, 'chartType')) ? standalone ? Math.max(((htmlRef === null || htmlRef === void 0 ? void 0 : (_htmlRef_current = htmlRef.current) === null || _htmlRef_current === void 0 ? void 0 : _htmlRef_current.clientWidth) || 600) - 23, 500) : Math.min(((htmlRef === null || htmlRef === void 0 ? void 0 : (_htmlRef_current1 = htmlRef.current) === null || _htmlRef_current1 === void 0 ? void 0 : _htmlRef_current1.clientWidth) || 600) - 128, 500) : undefined;
        return /*#__PURE__*/ React.createElement(MarkdownEditor, _object_spread_props(_object_spread({}, props.markdownRenderConfig || {}), {
            fncProps: fncProps,
            editorRef: MarkdownEditorRef,
            initValue: content,
            toc: false,
            width: "100%",
            height: "auto",
            contentStyle: props.style,
            tableConfig: _object_spread({
                actions: {
                    fullScreen: 'modal'
                }
            }, ((_props_markdownRenderConfig = props.markdownRenderConfig) === null || _props_markdownRenderConfig === void 0 ? void 0 : _props_markdownRenderConfig.tableConfig) || {}),
            deps: [
                String((_props_originData = props.originData) === null || _props_originData === void 0 ? void 0 : _props_originData.isLast),
                String((_props_originData1 = props.originData) === null || _props_originData1 === void 0 ? void 0 : _props_originData1.isFinished),
                String((_props_originData2 = props.originData) === null || _props_originData2 === void 0 ? void 0 : _props_originData2.isAborted)
            ],
            rootContainer: htmlRef,
            editorStyle: _object_spread({
                fontSize: 14
            }, ((_props_markdownRenderConfig1 = props.markdownRenderConfig) === null || _props_markdownRenderConfig1 === void 0 ? void 0 : _props_markdownRenderConfig1.editorStyle) || {}),
            typewriter: (_ref = (_props_markdownRenderConfig2 = props.markdownRenderConfig) === null || _props_markdownRenderConfig2 === void 0 ? void 0 : _props_markdownRenderConfig2.typewriter) !== null && _ref !== void 0 ? _ref : typing,
            style: _object_spread({
                minWidth: minWidth ? "min(".concat(minWidth, "px,100%)") : undefined,
                maxWidth: standalone ? '100%' : undefined,
                padding: isPaddingHidden ? 0 : undefined,
                margin: isPaddingHidden ? 0 : undefined
            }, ((_props_markdownRenderConfig3 = props.markdownRenderConfig) === null || _props_markdownRenderConfig3 === void 0 ? void 0 : _props_markdownRenderConfig3.style) || {}),
            readonly: true
        }));
    }, [
        hidePadding,
        typing,
        (_props_originData = props.originData) === null || _props_originData === void 0 ? void 0 : _props_originData.isLast,
        isPaddingHidden,
        content
    ]);
    var errorDom = /*#__PURE__*/ React.createElement("div", {
        style: {
            padding: 'var(--padding-5x)',
            background: ' #FFFFFF',
            color: token.colorError,
            borderRadius: '16px 16px 2px 16px',
            border: '1px solid ' + token.colorErrorBorder,
            marginLeft: props.placement === 'right' ? 0 : 24,
            marginRight: props.placement === 'right' ? 24 : 0
        }
    }, (locale === null || locale === void 0 ? void 0 : locale['error.unexpected']) || '出现点意外情况，请重新发送');
    if (props.placement !== 'right') {
        return /*#__PURE__*/ React.createElement("div", {
            style: {
                display: 'flex',
                flexDirection: 'column',
                minWidth: 0,
                maxWidth: '100%'
            }
        }, /*#__PURE__*/ React.createElement(ErrorBoundary, {
            fallback: errorDom
        }, beforeContent, markdown, docListNode, afterContent), extra);
    }
    return /*#__PURE__*/ React.createElement(Popover, {
        align: {
            points: [
                'tr',
                'br'
            ],
            offset: [
                0,
                -12
            ]
        },
        content: extra,
        styles: {
            root: {
                padding: 0,
                borderRadius: 'var(--radius-control-sm)',
                background: 'var(--color-primary-bg-page)',
                boxShadow: 'var(--shadow-control-base)'
            },
            body: {
                padding: 'var(--padding-0-5x)',
                borderRadius: 'var(--radius-control-sm)',
                background: 'var(--color-primary-bg-page)',
                boxShadow: 'var(--shadow-control-base)'
            }
        },
        arrow: false,
        placement: "bottomRight"
    }, /*#__PURE__*/ React.createElement("div", {
        style: {
            display: 'flex',
            flexDirection: 'column',
            minWidth: 0,
            maxWidth: '100%'
        }
    }, /*#__PURE__*/ React.createElement(ErrorBoundary, {
        fallback: errorDom
    }, beforeContent, markdown, docListNode, afterContent)));
};
