bhd-components 0.9.28 → 0.10.1

package/es2017/AIMessageList/components/footer/index.js

@@ -0,0 +1,296 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
+import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef, useMemo } from "react";
+import styles from "./index.module.less";
+import { fetchEventSource } from "@microsoft/fetch-event-source";
+import BhdEnterInput from "../../../bhdEnterInput";
+import { Divider } from "antd";
+import SendBtn from "../sendBtn";
+import UploadFileBtn from "../uplodaFileBtn";
+import FileList from "../fileList";
+import References from "../renderReferrnce";
+import { guidGenerator } from "../../../utils/number";
+const { TextArea } = BhdEnterInput;
+const defaultProps = {
+    placeholder: "请输入内容\n按Enter发送，Shift+Enter换行",
+    className: "",
+    maxLength: 500,
+    fileUpload: false
+};
+const defaultFileUploadProps = {
+    accept: ".pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt,.text,.png,.jpg,.jpeg,.gif,.webp",
+    maxCount: 10,
+    maxSize: 50 * 1024 * 1024,
+    mapUploadCount: 1,
+    multiple: true
+};
+const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
+    let { footerConfig, prefix, errorCallback, apiRef } = props;
+    let { placeholder = defaultProps.placeholder, className = defaultProps.className, maxLength = defaultProps.maxLength, renderAction, fileUpload, sendMsgAjaxParams } = footerConfig;
+    if (fileUpload) {
+        fileUpload = _object_spread({}, defaultFileUploadProps, fileUpload);
+    }
+    const fileListRef = useRef(null);
+    const ctrl = useRef(); //停止生成ai回答时使用
+    const [textValue, setTextValue] = useState("");
+    const [sending, setSending] = useState(false);
+    const [fileCanSending, setFileCanSending] = useState(true); // 是否允许发送 关联文件
+    // const [referencesSource, setReferencesSource] = useState<referenceType>({
+    //   type: "file",
+    //   value: {
+    //     name: "文件名字.doc",
+    //     suffix: "doc",
+    //     fileId: "",
+    //     url: "",
+    //     status: undefined,
+    //     source: undefined,
+    //   },
+    // });
+    const [referencesSource, setReferencesSource] = useState(null);
+    const recordRef = useRef({
+        value: textValue,
+        referencesSource: referencesSource,
+        sending: sending
+    });
+    useImperativeHandle(ref, ()=>{
+        return _object_spread({
+            setTextValue,
+            sendMsg: sendMsg,
+            clearText: ()=>{
+                setTextValue("");
+            },
+            getCanSendMsg: ()=>{
+                return canSendMsg;
+            },
+            stopMessage: ()=>{
+                stopMessage();
+            },
+            setReferences: (reference)=>{
+                setReferencesSource(reference);
+            }
+        }, fileListRef.current);
+    });
+    useEffect(()=>{
+        recordRef.current.value = textValue;
+        recordRef.current.referencesSource = referencesSource;
+        recordRef.current.sending = sending;
+    }, [
+        textValue,
+        referencesSource,
+        sending
+    ]);
+    // 是否允许发送消息
+    const canSendMsg = useMemo(()=>{
+        if (textValue.trim().length === 0) return false;
+        if (typeof maxLength === "function") {
+            if (maxLength(textValue)) return false;
+        }
+        if (textValue.trim().length > maxLength) return false;
+        if (sending) return false;
+        if (!fileCanSending) return false;
+        return true;
+    }, [
+        textValue,
+        maxLength,
+        sending,
+        fileCanSending
+    ]);
+    const stopMessage = ()=>{
+        ctrl.current && ctrl.current.abort();
+        apiRef.contentApi.clearInputing();
+        setSending(false);
+    };
+    const getCls = (clsName)=>{
+        return styles[clsName] + " " + prefix + "-" + clsName;
+    };
+    const renderBtn = ()=>{
+        let sendNode = /*#__PURE__*/ _jsx(SendBtn, {
+            prefix: prefix,
+            canSendMsg: canSendMsg,
+            sending: sending,
+            stopMessage: stopMessage
+        });
+        if (fileUpload) {
+            let fileNode = /*#__PURE__*/ _jsx(UploadFileBtn, {
+                prefix: prefix,
+                fileUpload: fileUpload,
+                customRequest: (options)=>{
+                    var _fileListRef_current;
+                    console.log("customRequestcustomRequest", options);
+                    (_fileListRef_current = fileListRef.current) === null || _fileListRef_current === void 0 ? void 0 : _fileListRef_current.addFile(options.file);
+                }
+            });
+            if (renderAction) {
+                return renderAction(sendNode, fileNode);
+            } else {
+                return /*#__PURE__*/ _jsxs("div", {
+                    className: `${getCls("footerActionBtn")}`,
+                    children: [
+                        fileNode,
+                        /*#__PURE__*/ _jsx(Divider, {
+                            type: "vertical"
+                        }),
+                        sendNode
+                    ]
+                });
+            }
+        } else {
+            let fileNode = null;
+            if (renderAction) {
+                return renderAction(sendNode, fileNode);
+            } else {
+                return /*#__PURE__*/ _jsx("div", {
+                    className: `${getCls("footerActionBtn")}`,
+                    children: sendNode
+                });
+            }
+        }
+    };
+    const onPressEnter = (e)=>{
+        // 判断是否按下了 Shift 键
+        if (e.shiftKey) {
+            // 如果按下了 Shift + Enter，则允许换行（默认行为）
+            return;
+        } else {
+            if (textValue.length === 0) {
+                // 内容为空时 执行换行操作
+                return;
+            }
+            // 如果只按了 Enter，则阻止默认行为并发送消息
+            e.preventDefault();
+            // 在这里添加发送消息的逻辑
+            sendMsg(textValue);
+        }
+    };
+    // 发现消息
+    const sendMsg = (value)=>{
+        if (value.trim().length === 0) return;
+        if (!canSendMsg) return;
+        console.log("发送消息：", value);
+        apiRef.contentApi.addMsg({
+            id: guidGenerator(),
+            createTime: new Date().getTime(),
+            content: value,
+            location: "right",
+            reference: recordRef.current.referencesSource,
+            source: null
+        });
+        sendMsgAjax();
+    };
+    const sendMsgAjax = ()=>{
+        const { url, method = "POST", headers = {}, params = ()=>"", onOpen = ()=>{}, onMessage = (ev)=>ev, onClose = ()=>{}, onError = ()=>{}, coverProps = {} } = sendMsgAjaxParams;
+        ctrl.current = new AbortController();
+        // apiRef
+        console.log("apiRef", apiRef);
+        let msgId = "inputing";
+        let createTime = new Date().getTime();
+        apiRef.contentApi.addMsg({
+            id: msgId,
+            createTime: createTime,
+            content: "正在输入...",
+            location: "left",
+            reference: null,
+            source: null
+        });
+        let msgContent = "";
+        setSending(true);
+        setTextValue("");
+        setReferencesSource(null);
+        let arg = [
+            recordRef.current.value,
+            recordRef.current.referencesSource,
+            fileListRef.current ? fileListRef.current.getFileList() : []
+        ];
+        fetchEventSource(url, _object_spread({
+            method,
+            headers: _object_spread({
+                "Content-Type": "application/json",
+                Accept: "text/event-stream,application/json"
+            }, headers),
+            body: params(...arg),
+            openWhenHidden: true,
+            signal: ctrl.current.signal,
+            onopen: (res)=>{
+                onOpen(res);
+                if (res.status === 200) {}
+                return null;
+            },
+            onmessage: (ev)=>{
+                let data = onMessage(ev);
+                msgContent += data.content;
+                delete data.content;
+                apiRef.contentApi.updateMsg(msgId, _object_spread({
+                    createTime: createTime,
+                    content: msgContent,
+                    location: "left",
+                    reference: null,
+                    source: null
+                }, data));
+                msgId = data.id;
+            },
+            onclose: ()=>{
+                onClose();
+                setSending(false);
+                console.log("onclose: ", event);
+            },
+            onerror: (err)=>{
+                onError(err);
+                console.log("onerror: ", err);
+            }
+        }, coverProps));
+    };
+    // 判断是否超出最大字数
+    const judegTextLengthWarn = ()=>{
+        if (typeof maxLength === "function") {
+            return maxLength(textValue);
+        } else {
+            return textValue.length > maxLength;
+        }
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: `${getCls("footer")} ${className}`,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: `${getCls("footerBody")} ${judegTextLengthWarn() ? getCls("footerBodyWarn") : ""}`,
+            children: [
+                fileUpload && /*#__PURE__*/ _jsx("div", {
+                    className: getCls("footerFile"),
+                    children: /*#__PURE__*/ _jsx(FileList, {
+                        prefix: prefix,
+                        fileUpload: fileUpload,
+                        ref: fileListRef,
+                        errorCallback: errorCallback,
+                        changeFileCanSending: setFileCanSending
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: getCls("footerInput"),
+                    children: [
+                        /*#__PURE__*/ _jsx(TextArea, {
+                            value: textValue,
+                            onChange: (e)=>{
+                                setTextValue(e.target.value);
+                            },
+                            placeholder: placeholder,
+                            autoSize: {
+                                minRows: 2,
+                                maxRows: 6
+                            },
+                            onPressEnter: onPressEnter
+                        }),
+                        /*#__PURE__*/ _jsx(References, {
+                            prefix: prefix,
+                            referencesSource: referencesSource,
+                            fileUpload: fileUpload,
+                            deleteReferences: ()=>setReferencesSource(null)
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: getCls("footerAction"),
+                    children: renderBtn()
+                })
+            ]
+        })
+    });
+});
+export default Footer;

package/es2017/AIMessageList/components/footer/index.module.less

@@ -0,0 +1,51 @@
+.footer {
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  .footerBody {
+    width: 100%;
+    border-radius: 8px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    padding-bottom: 12px;
+    &.footerBodyWarn {
+      border-color: #f4523b;
+    }
+
+    .footerFile {
+      width: 100%;
+    }
+    .footerInput {
+      :global {
+        .bhd-input {
+          border: none;
+          box-shadow: none;
+          background: transparent;
+          padding: 12px 16px;
+        }
+      }
+    }
+    .footerAction {
+      width: 100%;
+      padding: 0 16px;
+      box-sizing: border-box;
+      .footerActionBtn {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        :global {
+          .bhd-divider {
+            border-color: rgba(0, 0, 0, 0.06);
+            height: 16px;
+            top: 0;
+            margin: 0 16px;
+          }
+          .bhd-upload-wrapper {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+}

package/es2017/AIMessageList/components/header/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { headerConfigProps, errorMessageProps } from "../../type";
+interface IProps {
+    headerConfig: headerConfigProps;
+    prefix: string;
+    errorCallback: (error: errorMessageProps) => void;
+}
+declare const Header: (props: IProps) => React.JSX.Element;
+export default Header;

package/es2017/AIMessageList/components/header/index.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
+import React from "react";
+import styles from "./index.module.less";
+const defaultProps = {
+    icon: /*#__PURE__*/ _jsx("i", {
+        children: /*#__PURE__*/ _jsxs("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "1em",
+            height: "1em",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            children: [
+                /*#__PURE__*/ _jsx("path", {
+                    d: "M12.6063 14C12.2547 13.9994 11.9095 13.9066 11.6051 13.7309C11.3006 13.5551 11.0476 13.3025 10.8714 12.9983L7.15187 6.55597L4.21122 11.6493H7.67426C7.98599 11.6493 8.28495 11.7731 8.50538 11.9935C8.7258 12.2139 8.84963 12.5129 8.84963 12.8246C8.84963 13.1364 8.7258 13.4353 8.50538 13.6557C8.28495 13.8762 7.98599 14 7.67426 14H2.17613C1.96974 14.0001 1.76696 13.9459 1.58818 13.8428C1.40939 13.7397 1.26091 13.5913 1.15766 13.4126C1.05441 13.2339 1.00003 13.0312 1 12.8248C0.999967 12.6184 1.05428 12.4157 1.15747 12.2369L6.13322 3.61754C6.23638 3.43887 6.38476 3.29051 6.56343 3.18736C6.7421 3.08421 6.94478 3.0299 7.15109 3.0299C7.3574 3.0299 7.56008 3.08421 7.73875 3.18736C7.91742 3.29051 8.0658 3.43887 8.16896 3.61754L12.2582 10.6998V4.20522C12.2582 3.8935 12.3821 3.59454 12.6025 3.37411C12.8229 3.15368 13.1219 3.02985 13.4336 3.02985C13.7453 3.02985 14.0443 3.15368 14.2647 3.37411C14.4851 3.59454 14.609 3.8935 14.609 4.20522V11.9966C14.609 12.5279 14.398 13.0373 14.0224 13.413C13.6469 13.7887 13.1375 13.9998 12.6063 14Z",
+                    fill: "url(#paint0_linear_34_244)"
+                }),
+                /*#__PURE__*/ _jsx("path", {
+                    d: "M13.4336 2.35075C14.0827 2.35075 14.609 1.82451 14.609 1.17537C14.609 0.526232 14.0827 0 13.4336 0C12.7845 0 12.2582 0.526232 12.2582 1.17537C12.2582 1.82451 12.7845 2.35075 13.4336 2.35075Z",
+                    fill: "url(#paint1_linear_34_244)"
+                }),
+                /*#__PURE__*/ _jsxs("defs", {
+                    children: [
+                        /*#__PURE__*/ _jsxs("linearGradient", {
+                            id: "paint0_linear_34_244",
+                            x1: "14.609",
+                            y1: "0",
+                            x2: "-0.275842",
+                            y2: "13.609",
+                            gradientUnits: "userSpaceOnUse",
+                            children: [
+                                /*#__PURE__*/ _jsx("stop", {
+                                    "stop-color": "#F87AFD"
+                                }),
+                                /*#__PURE__*/ _jsx("stop", {
+                                    offset: "1",
+                                    "stop-color": "#41DAF8"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("linearGradient", {
+                            id: "paint1_linear_34_244",
+                            x1: "14.609",
+                            y1: "0",
+                            x2: "-0.275842",
+                            y2: "13.609",
+                            gradientUnits: "userSpaceOnUse",
+                            children: [
+                                /*#__PURE__*/ _jsx("stop", {
+                                    "stop-color": "#F87AFD"
+                                }),
+                                /*#__PURE__*/ _jsx("stop", {
+                                    offset: "1",
+                                    "stop-color": "#41DAF8"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    }),
+    className: "",
+    renderRightHead: ()=>null
+};
+const Header = (props)=>{
+    const { headerConfig, prefix } = props;
+    const { icon = defaultProps.icon, title, className = defaultProps.className, renderRightHead = defaultProps.renderRightHead } = headerConfig;
+    const getCls = (clsName)=>{
+        return styles[clsName] + " " + prefix + "-" + clsName;
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `${getCls("header")} ${className}`,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: getCls("headerLeft"),
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: getCls("headerIcon"),
+                        children: icon
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: getCls("headerTitle"),
+                        children: title
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: getCls("headerRight"),
+                children: renderRightHead()
+            })
+        ]
+    });
+};
+export default Header;

package/es2017/AIMessageList/components/header/index.module.less

@@ -0,0 +1,31 @@
+.header {
+  width: 100%;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: space-between;
+  border-bottom: 1px solid #ebebeb;
+  .headerLeft {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    .headerIcon {
+        &>i{
+            line-height: 1;
+            font-size: 16px;
+            display: flex;
+        }
+    }
+    .headerTitle {
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 16px;
+      line-height: 1.5;
+    }
+  }
+  .headerRight {
+    font-size: 16px;
+  }
+}

package/es2017/AIMessageList/components/referencesIcon/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { dataItemType, AIMessageListRefProps } from "../../type";
+interface ReferencesIconProps {
+    prefix: string;
+    item: dataItemType;
+    apiRef: AIMessageListRefProps;
+}
+declare const ReferencesIcon: (props: ReferencesIconProps) => React.JSX.Element;
+export default ReferencesIcon;

package/es2017/AIMessageList/components/referencesIcon/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "@ice/jsx-runtime/jsx-runtime";
+import React from "react";
+import styles from "./index.module.less";
+const referencesIcon = /*#__PURE__*/ _jsx("i", {
+    children: /*#__PURE__*/ _jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M8.28467 5.03809C8.4743 4.91639 8.61455 4.90994 8.76123 5.10059C8.92876 5.31834 9.04161 5.46433 9.09912 5.53906C9.18641 5.65254 9.15264 5.80277 9.06201 5.87988C7.69541 6.75725 6.13959 8.64084 6.02295 9.32031C5.90632 9.99981 6.57509 9.82255 7.66846 10.3311C8.76173 10.8396 9.66644 12.6996 8.15674 14.165C6.64677 15.6306 3.66696 13.9994 4.10107 10.667C4.38007 8.52662 5.77465 6.65005 8.28467 5.03809ZM14.8931 5.03809C15.0828 4.91629 15.2239 4.90989 15.3706 5.10059C15.5383 5.31849 15.6511 5.46448 15.7085 5.53906C15.7958 5.65256 15.7611 5.80278 15.6704 5.87988C14.3038 6.75727 12.748 8.64086 12.6313 9.32031C12.5147 9.99975 13.1836 9.82261 14.2769 10.3311C15.3702 10.8395 16.2751 12.6995 14.7651 14.165C13.2552 15.6306 10.2754 13.9994 10.7095 10.667C10.9885 8.52661 12.3831 6.65005 14.8931 5.03809Z"
+        })
+    })
+});
+const ReferencesIcon = (props)=>{
+    const { prefix, apiRef, item } = props;
+    const getCls = (clsName)=>{
+        return styles[clsName] + " " + prefix + "-" + clsName;
+    };
+    const clickFn = ()=>{
+        console.log("apiRef", apiRef);
+        if (apiRef && apiRef.footerApi) {
+            console.log("itemitem", item);
+            apiRef.footerApi.setReferences({
+                type: "text",
+                value: item.content
+            });
+        }
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: `${getCls("msgItem-action-references")}`,
+        onClick: ()=>clickFn(),
+        children: referencesIcon
+    });
+};
+export default ReferencesIcon;

package/es2017/AIMessageList/components/referencesIcon/index.module.less

@@ -0,0 +1,13 @@
+.msgItem-action-references {
+  cursor: pointer;
+  border-radius: 2px;
+  display: flex;
+  line-height: 1;
+  & > i {
+    color: rgba(140, 140, 140, 1);
+    font-size: 20px;
+  }
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+}

package/es2017/AIMessageList/components/renderReferrnce/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { referenceType, fileUploadProps } from "../../type";
+interface IProps {
+    prefix: string;
+    referencesSource: referenceType;
+    fileUpload: boolean | fileUploadProps;
+    deleteReferences: () => void;
+}
+declare const References: (props: IProps) => React.JSX.Element;
+export default References;

package/es2017/AIMessageList/components/renderReferrnce/index.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
+import React from "react";
+import styles from "./index.module.less";
+import { CloseCircleFilled } from "../../../icons";
+import { fileIconRender } from "../fileList/fileIcon";
+const References = (props)=>{
+    const { prefix, referencesSource, fileUpload, deleteReferences } = props;
+    const getCls = (clsName)=>{
+        return styles[clsName] + " " + prefix + "-" + clsName;
+    };
+    if (!referencesSource) return null;
+    if (referencesSource.type === "text") {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: `${getCls("footerReferences")}`,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: `${getCls("footerReferences_left")}`,
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: `${getCls("footerReferences_left_text")}`,
+                        children: referencesSource.value
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: `${getCls("footerReferences_right")}`,
+                    children: /*#__PURE__*/ _jsx(CloseCircleFilled, {
+                        onPointerEnterCapture: undefined,
+                        onPointerLeaveCapture: undefined,
+                        onClick: ()=>deleteReferences()
+                    })
+                })
+            ]
+        });
+    }
+    if (referencesSource.type === "file" && fileUpload) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: `${getCls("footerReferences")}`,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: `${getCls("footerReferences_left")}`,
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: `${getCls("footerReferences_left_file")}`,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${getCls("footerReferences_left_file_icon")}`,
+                                children: fileIconRender(referencesSource.value.suffix, fileUpload.iconFileRender)
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${getCls("footerReferences_left_file_title")}`,
+                                title: referencesSource.value.name,
+                                children: referencesSource.value.name
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: `${getCls("footerReferences_right")}`,
+                    children: /*#__PURE__*/ _jsx(CloseCircleFilled, {
+                        onPointerEnterCapture: undefined,
+                        onPointerLeaveCapture: undefined,
+                        onClick: ()=>deleteReferences()
+                    })
+                })
+            ]
+        });
+    }
+    return null;
+};
+export default References;