bhd-components 0.9.29 → 0.10.1

package/esm/AIMessageList/components/virtuosoList/index.js

@@ -0,0 +1,484 @@
+import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ice/jsx-runtime/jsx-runtime";
+import React, { useRef, useState, useCallback, useEffect, forwardRef, useImperativeHandle } from "react";
+import styles from "./index.module.less";
+import { copyText, findParent, delegate } from "../../../utils/dom";
+import { Virtuoso } from "react-virtuoso";
+import loading2Gif from "../../../images/loading2";
+import { parseDate } from "../../../utils/Date";
+import { Remarkable } from "remarkable";
+import hljs from "highlight.js";
+import "highlight.js/styles/github.css";
+import CopyIcon from "../copyIcon";
+import ReferencesIcon from "../referencesIcon";
+var Header = function(param) {
+    var context = param.context;
+    var prefix = context.prefix, loading = context.loading;
+    if (!loading) return null;
+    var getCls = function(clsName) {
+        return styles[clsName] + " " + prefix + "-" + clsName;
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(getCls("loadingIcon")),
+        children: /*#__PURE__*/ _jsx("img", {
+            src: loading2Gif,
+            alt: ""
+        })
+    });
+};
+var remarkable = new Remarkable({
+    highlight: function highlight(str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+            try {
+                return hljs.highlight(lang, str).value;
+            } catch (err) {}
+        }
+        try {
+            return hljs.highlightAuto(str).value;
+        } catch (err) {}
+        return ""; // use external default escaping
+    }
+});
+var VirtuosoList = /*#__PURE__*/ forwardRef(function(props, ref) {
+    var prefix = props.prefix, contentConfig = props.contentConfig, apiRef = props.apiRef;
+    var getList = contentConfig.getList, coverRenderText = contentConfig.coverRenderText, _contentConfig_msgAction = contentConfig.msgAction, msgAction = _contentConfig_msgAction === void 0 ? [
+        "copy",
+        "references"
+    ] : _contentConfig_msgAction, coverRenderReferences = contentConfig.coverRenderReferences;
+    var loadMoreProps = contentConfig.loadMore || true;
+    var virtuosoRef = useRef(null);
+    var _useState = _sliced_to_array(useState(false), 2), loading = _useState[0], setLoading = _useState[1]; // 是否加载中
+    var _useState1 = _sliced_to_array(useState([]), 2), dataSource = _useState1[0], setDataSource = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(0), 2), firstItemIndex = _useState2[0], setFirstItemIndex = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(1), 2), page = _useState3[0], setPage = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(30), 2), pageSize = _useState4[0], setPageSize = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(0), 2), total = _useState5[0], setTotal = _useState5[1];
+    var timerRef = useRef({
+        loadMore: null,
+        scrollTimer: null
+    });
+    var wrapperRef = useRef(null);
+    var recordRef = useRef({
+        page: page,
+        pageSize: pageSize,
+        total: total,
+        dataSource: dataSource,
+        maxPage: Math.ceil(total / pageSize)
+    });
+    var timeRenderCache = useRef(new Map()).current;
+    useImperativeHandle(ref, function() {
+        return {
+            addMsg: function(msg) {
+                setDataSource(function(data) {
+                    return _to_consumable_array(data).concat([
+                        msg
+                    ]);
+                });
+            },
+            updateMsg: function(id, obj) {
+                setDataSource(function(data) {
+                    return data.map(function(item) {
+                        if (item.id === id) {
+                            return _object_spread({}, item, obj);
+                        }
+                        return item;
+                    });
+                });
+            },
+            clearInputing: function clearInputing() {
+                setDataSource(function(data) {
+                    return data.filter(function(item) {
+                        return item.id !== "inputing";
+                    });
+                });
+            }
+        };
+    });
+    useEffect(function() {
+        getData(page, pageSize);
+        var removeFn = delegate(wrapperRef.current, "click", ".".concat(styles.copyCode), function(event, target) {
+            findCopyContent(event);
+        });
+        return function() {
+            removeFn();
+            clearTimeout(timerRef.current.loadMore);
+            clearTimeout(timerRef.current.scrollTimer);
+        };
+    }, []);
+    useEffect(function() {
+        if (!virtuosoRef.current) return;
+        virtuosoRef.current.scrollToIndex({
+            index: "LAST",
+            behavior: "auto"
+        });
+        clearTimeout(timerRef.current.scrollTimer);
+        timerRef.current.scrollTimer = setTimeout(function() {
+            virtuosoRef.current.scrollToIndex({
+                index: "LAST",
+                behavior: "auto",
+                align: "end"
+            });
+        }, 500);
+    }, [
+        dataSource
+    ]);
+    useEffect(function() {
+        recordRef.current.page = page;
+        recordRef.current.pageSize = pageSize;
+        recordRef.current.total = total;
+        recordRef.current.dataSource = dataSource;
+        recordRef.current.maxPage = Math.ceil(total / pageSize);
+    }, [
+        page,
+        pageSize,
+        total,
+        dataSource
+    ]);
+    var getData = function(page, pageSize) {
+        setLoading(true);
+        clearTimeout(timerRef.current.loadMore);
+        timerRef.current.loadMore = setTimeout(function() {
+            setLoading(false);
+            getList(page, pageSize).then(function(listObj) {
+                setLoading(false);
+                console.log("listObjlistObj", listObj);
+                setDataSource(function(data) {
+                    return _to_consumable_array(data).concat(_to_consumable_array(listObj.dataSource));
+                });
+                setTotal(listObj.total);
+                setPage(page);
+                setPageSize(pageSize);
+                setFirstItemIndex(listObj.total - pageSize * (page - 1));
+            });
+        }, 500);
+    };
+    var getCls = function(clsName) {
+        return styles[clsName] + " " + prefix + "-" + clsName;
+    };
+    var loadMore = useCallback(function() {
+        if (!loadMoreProps) return;
+        if (recordRef.current.page >= recordRef.current.maxPage) return;
+        getData(page + 1, pageSize);
+    }, [
+        page,
+        pageSize
+    ]);
+    var itemContent = function(index, item) {
+        var timeNode = renderTime(item);
+        var html = markToHtml(item.content, item.id);
+        var contentNode = /*#__PURE__*/ _jsx("div", {
+            dangerouslySetInnerHTML: {
+                __html: html
+            }
+        });
+        if (coverRenderText) {
+            contentNode = coverRenderText(item, html);
+        }
+        // 是否显示时间
+        var itemNode = /*#__PURE__*/ _jsx("div", {
+            className: "".concat(getCls("msgItem"), " ").concat(item.location === "left" ? getCls("msgItem-left") : getCls("msgItem-right")),
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "".concat(getCls("msgItem-box")),
+                "data-id": item.id,
+                onMouseEnter: function() {
+                    return onMouseEnter(item);
+                },
+                onMouseLeave: function() {
+                    return onMouseLeave(item);
+                },
+                children: [
+                    renderAction("floatTop", item),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "".concat(getCls("msgItem-content")),
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "".concat(getCls("msgItem-text")),
+                                children: contentNode
+                            }),
+                            renderAction("bottom", item)
+                        ]
+                    }),
+                    item.location === "left" && renderAction("floatBottom", item),
+                    renderReference(item)
+                ]
+            })
+        });
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                timeNode,
+                itemNode
+            ]
+        });
+    };
+    var renderReference = function(item) {
+        var reference = item.reference;
+        if (!item.reference) return null;
+        var referenceNode = null;
+        if (reference.type === "text") {
+            referenceNode = /*#__PURE__*/ _jsx("div", {
+                className: "".concat(getCls("msgItem-references-text")),
+                children: /*#__PURE__*/ _jsx("div", {
+                    children: reference.value
+                })
+            });
+        }
+        if (coverRenderReferences) {
+            return coverRenderReferences(item, referenceNode);
+        } else {
+            return referenceNode;
+        }
+    };
+    var onMouseEnter = function(item) {
+        var dom = document.querySelector('[data-id="'.concat(item.id, '"]'));
+        var container = wrapperRef.current;
+        if (!dom) return;
+        var topDom = dom.querySelector("." + styles["msgItem-action-popover-floatTop"]);
+        var bottomDom = dom.querySelector("." + styles["msgItem-action-popover-floatBottom"]);
+        if (!topDom || !bottomDom) return;
+        console.log("itemitem", dom, container);
+        var con_obj = container.getBoundingClientRect(); // 外层盒子
+        var dom_obj = dom.getBoundingClientRect(); // 鼠标滑过元素
+        var y = dom_obj.y - con_obj.y;
+        if (y > 0) {
+            // 元素tou在可视区域内
+            // 判断底部是否在可视区域内
+            if (y + dom_obj.height < con_obj.height) {
+                // 底部在可视区域内
+                // 显示在下边
+                bottomDom.style.cssText = "display:flex";
+            } else {
+                // 显示在上
+                topDom.style.cssText = "display:flex";
+            }
+        } else {
+            console.log("yyyy", y, dom_obj, con_obj, y + dom_obj.height < con_obj.height);
+            // 元素top不在可视区域内
+            if (y + dom_obj.height < con_obj.height) {
+                // 底部在可视区域内
+                // 显示在下边
+                bottomDom.style.cssText = "display:flex";
+            } else {
+                // 头部和底部都不在可视区域内 移动 topDom到可视区域
+                topDom.style.cssText = "display:flex;top:".concat(-1 * y + 24, "px;bottom:auto;");
+            }
+        }
+    };
+    var onMouseLeave = function(item) {
+        var dom = document.querySelector('[data-id="'.concat(item.id, '"]'));
+        if (!dom) return;
+        var topDom = dom.querySelector("." + styles["msgItem-action-popover-floatTop"]);
+        var bottomDom = dom.querySelector("." + styles["msgItem-action-popover-floatBottom"]);
+        if (!topDom || !bottomDom) return;
+        bottomDom.style.cssText = "";
+        topDom.style.cssText = "";
+    };
+    var renderAction = function(location, item) {
+        var copyNode = /*#__PURE__*/ _jsx(CopyIcon, {
+            prefix: prefix,
+            content: item.content
+        });
+        var referencesNode = /*#__PURE__*/ _jsx(ReferencesIcon, {
+            prefix: prefix,
+            apiRef: apiRef,
+            item: item
+        });
+        var leftNodes = null;
+        var rightNodes = /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                copyNode,
+                referencesNode
+            ]
+        });
+        if (_instanceof(msgAction, Array)) {
+            if (msgAction.length == 0) return null;
+            // 数组
+            if (!msgAction.includes("copy")) {
+                copyNode = null;
+            }
+            if (!msgAction.includes("references")) {
+                referencesNode = null;
+            }
+        } else if (typeof msgAction === "object") {
+            if (msgAction.renderLeft) {
+                leftNodes = msgAction.renderLeft(copyNode, referencesNode);
+            }
+            if (msgAction.renderRight) {
+                rightNodes = msgAction.renderRight(copyNode, referencesNode);
+            }
+        }
+        var index = recordRef.current.dataSource.findIndex(function(ite) {
+            return ite.id == item.id;
+        });
+        if (location === "bottom") {
+            if (item.location === "left" && item.id !== "helloMsg" && item.id !== "inputing") {
+                if (index === recordRef.current.dataSource.length - 1) {
+                    return /*#__PURE__*/ _jsxs("div", {
+                        className: "".concat(getCls("msgItem-action")),
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "".concat(getCls("msgItem-action-left")),
+                                children: leftNodes
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "".concat(getCls("msgItem-action-right")),
+                                children: rightNodes
+                            })
+                        ]
+                    });
+                }
+            }
+        // 只有最后一条才显示底部操作啦 且是左侧消息 且不是招呼语
+        }
+        if (location === "floatTop" || location === "floatBottom") {
+            if (item.location === "left" && item.id !== "helloMsg" && item.id !== "inputing" && index === recordRef.current.dataSource.length - 1) return null;
+            // 浮框
+            return /*#__PURE__*/ _jsx("div", {
+                className: "".concat(getCls("msgItem-action-operate")),
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "".concat(getCls("msgItem-action"), " ").concat(getCls("msgItem-action-popover"), " ").concat(getCls("msgItem-action-popover-" + location)),
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "".concat(getCls("msgItem-action-left")),
+                            children: leftNodes
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "".concat(getCls("msgItem-action-right")),
+                            children: rightNodes
+                        })
+                    ]
+                })
+            });
+        }
+        return null;
+    };
+    var markToHtml = function(markStr, id) {
+        var html = remarkable.render(markStr);
+        var position = 0;
+        html = html.replace(new RegExp("<pre", "ig"), function() {
+            position++;
+            return "<p class='".concat(getCls("copyCode"), " ").concat(styles.copyCodeFun, "' data-id=").concat(id, " data-position=").concat(position, ">\n                <span class='").concat(getCls("icon"), " ").concat(getCls("copy"), '\'>\n                  <svg\n                    width="1em"\n                    height="1em"\n                    viewBox="0 0 14 14"\n                    shape-rendering="geometricPrecision"\n                    fill="currentColor"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <g clip-path="url(#clip0_518_8403)">\n                      <path\n                        d="M6.16666 1.66666H13.1667C13.4761 1.66666 13.7728 1.78957 13.9916 2.00837C14.2104 2.22716 14.3333 2.5239 14.3333 2.83332V9.83332C14.3333 10.1427 14.2104 10.4395 13.9916 10.6583C13.7728 10.8771 13.4761 11 13.1667 11H6.16666C5.85724 11 5.5605 10.8771 5.34171 10.6583C5.12291 10.4395 5 10.1427 5 9.83332V2.83332C5 2.5239 5.12291 2.22716 5.34171 2.00837C5.5605 1.78957 5.85724 1.66666 6.16666 1.66666ZM6.16666 2.66666C6.12246 2.66666 6.08007 2.68422 6.04881 2.71547C6.01756 2.74673 6 2.78912 6 2.83332V9.83332C6 9.85521 6.00431 9.87688 6.01268 9.8971C6.02106 9.91732 6.03334 9.9357 6.04881 9.95117C6.06429 9.96665 6.08266 9.97893 6.10288 9.9873C6.1231 9.99568 6.14478 9.99999 6.16666 9.99999H13.1667C13.2109 9.99999 13.2533 9.98243 13.2845 9.95117C13.3158 9.91992 13.3333 9.87753 13.3333 9.83332V2.83332C13.3333 2.78912 13.3158 2.74673 13.2845 2.71547C13.2533 2.68422 13.2109 2.66666 13.1667 2.66666H6.16666ZM10 12C10 11.8674 10.0527 11.7402 10.1464 11.6464C10.2402 11.5527 10.3674 11.5 10.5 11.5C10.6326 11.5 10.7598 11.5527 10.8536 11.6464C10.9473 11.7402 11 11.8674 11 12V13.1667C11 13.4761 10.8771 13.7728 10.6583 13.9916C10.4395 14.2104 10.1427 14.3333 9.83333 14.3333H2.83333C2.52391 14.3333 2.22717 14.2104 2.00837 13.9916C1.78958 13.7728 1.66666 13.4761 1.66666 13.1667V6.16666C1.66666 5.85724 1.78958 5.56049 2.00837 5.3417C2.22717 5.12291 2.52391 4.99999 2.83333 4.99999H4C4.13261 4.99999 4.25978 5.05267 4.35355 5.14644C4.44732 5.2402 4.5 5.36738 4.5 5.49999C4.5 5.6326 4.44732 5.75978 4.35355 5.85354C4.25978 5.94731 4.13261 5.99999 4 5.99999H2.83333C2.78913 5.99999 2.74674 6.01755 2.71548 6.04881C2.68422 6.08006 2.66666 6.12245 2.66666 6.16666V13.1667C2.66666 13.2109 2.68422 13.2533 2.71548 13.2845C2.74674 13.3158 2.78913 13.3333 2.83333 13.3333H9.83333C9.87753 13.3333 9.91993 13.3158 9.95118 13.2845C9.98244 13.2533 10 13.2109 10 13.1667V12Z"\n                      />\n                    </g>\n                    <defs>\n                      <clipPath id="clip0_518_8403">\n                        <rect width="16" height="16" />\n                      </clipPath>\n                    </defs>\n                  </svg>\n                </span>\n                <span class=\'').concat(getCls("icon"), " ").concat(getCls("copy_success_flag"), '\'>\n                  <svg\n                    width="1em"\n                    height="1em"\n                    shape-rendering="geometricPrecision"\n                    fill="currentColor"\n                    viewBox="0 0 12 7"\n                    xmlns="http://www.w3.org/2000/svg"\n                  >\n                    <path d="M11.2242 0.375687C11.4586 0.610002 11.4586 0.989901 11.2242 1.22422L4.82424 7.62422C4.58992 7.85853 4.21003 7.85853 3.97571 7.62422L0.775712 4.42422C0.541397 4.1899 0.541397 3.81 0.775712 3.57569C1.01003 3.34137 1.38993 3.34137 1.62424 3.57569L4.39998 6.35142L10.3757 0.375687C10.61 0.141373 10.9899 0.141373 11.2242 0.375687Z" />\n                  </svg>\n                </span><span class="').concat(getCls("copyCodeText"), '">复制代码</span></p><pre');
+        });
+        return html;
+    };
+    var renderTime = function(item) {
+        // 生成缓存键
+        var cacheKey = "".concat(item.id);
+        // 检查缓存中是否已有结果
+        if (timeRenderCache.has(cacheKey)) {
+            return timeRenderCache.get(cacheKey);
+        }
+        var index = recordRef.current.dataSource.findIndex(function(i) {
+            return i.id === item.id;
+        });
+        var timeObj = parseDate(item.createTime);
+        var time = null;
+        if (index === 0) {
+            // 第一项 显示年月日 时分
+            time = "".concat(timeObj.year, "-").concat(timeObj.month, "-").concat(timeObj.day, " ").concat(timeObj.hours, ":").concat(timeObj.minutes);
+        } else {
+            // 非第一项 与上一项进行对比
+            var prevItem = recordRef.current.dataSource[index - 1];
+            if (prevItem) {
+                var beforeTime = prevItem.createTime;
+                var beforeTimeObj = parseDate(beforeTime);
+                // 判断与上一条数据 是否跨天
+                if (timeObj.year !== beforeTimeObj.year || timeObj.month !== beforeTimeObj.month || timeObj.day !== beforeTimeObj.day) {
+                    // 显示 年月日 时分
+                    time = "".concat(timeObj.year, "-").concat(timeObj.month, "-").concat(timeObj.day, " ").concat(timeObj.hours, ":").concat(timeObj.minutes);
+                } else {
+                    // 没有跨天 判断是否相隔超过10分钟
+                    if (timeObj.timestamp - beforeTimeObj.timestamp > 10 * 60 * 1000) {
+                        // 超过10分钟 显示 时分
+                        time = "".concat(timeObj.hours, ":").concat(timeObj.minutes);
+                    }
+                }
+            }
+        }
+        var result = time ? /*#__PURE__*/ _jsx("div", {
+            className: "".concat(getCls("msg-date")),
+            children: time
+        }) : null;
+        // 将结果存入缓存
+        timeRenderCache.set(cacheKey, result);
+        return result;
+    };
+    var findCopyContent = function(e) {
+        var source = findParent(e.target, styles.copyCode);
+        if (!source) return;
+        var id = source.getAttribute("data-id");
+        var position = source.getAttribute("data-position");
+        if (!id && !position) return;
+        var message = "";
+        recordRef.current.dataSource.forEach(function(item) {
+            if (item.id === id) {
+                message = item.content;
+            }
+        });
+        if (!message) return;
+        var codeConment = "";
+        var i = 0;
+        message.replaceAll(new RegExp(/```(?:.|\n)*?```/, "ig"), function(con) {
+            i++;
+            if (i == position) {
+                // 异常标记
+                con = con.replace(/^```[\s\S]*?\n/, "").replace(/\n```$/, "");
+                codeConment = con;
+                return con;
+            } else {
+                return null;
+            }
+        });
+        resetStyles();
+        source.classList.add(styles.copy_success);
+        source.children[2].innerText = "复制成功";
+        copyText(codeConment);
+        setTimeout(function() {
+            try {
+                resetStyles();
+            } catch (error) {}
+        }, 3000);
+    };
+    //初始化样式
+    var resetStyles = function() {
+        var dom_list = document.getElementsByClassName(styles.copy_success);
+        for(var i = 0; i < dom_list.length; i++){
+            dom_list[i].classList.remove(styles.copy_success);
+        }
+        var dom_list2 = document.getElementsByClassName(styles.copyCodeFun);
+        for(var i = 0; i < dom_list2.length; i++){
+            var p = dom_list2[i].getElementsByClassName(styles.copyCodeText);
+            p[0].innerText = "复制代码";
+        }
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: "".concat(getCls("virtuosoList-wrapper")),
+        ref: wrapperRef,
+        children: /*#__PURE__*/ _jsx(Virtuoso, {
+            ref: virtuosoRef,
+            style: {
+                height: "100%"
+            },
+            data: dataSource,
+            initialTopMostItemIndex: {
+                index: "LAST",
+                align: "end"
+            },
+            startReached: loadMore,
+            firstItemIndex: firstItemIndex,
+            context: {
+                loading: loading,
+                prefix: prefix
+            },
+            itemContent: itemContent,
+            components: {
+                Header: Header
+            },
+            increaseViewportBy: 200,
+            overscan: 10
+        })
+    });
+});
+export default VirtuosoList;