bhd-components 0.10.7 → 0.10.9

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

@@ -129,7 +129,8 @@ const FileList = /*#__PURE__*/ forwardRef((props, ref)=>{
                                     fileId: fileId,
                                     url: "",
                                     status: "waiting",
-                                    source: file
+                                    source: file,
+                                    size: file.size
                                 };
                             }
                             return item;
@@ -152,7 +153,8 @@ const FileList = /*#__PURE__*/ forwardRef((props, ref)=>{
                                     fileId: fileId,
                                     url: "",
                                     status: "uploading",
-                                    source: file
+                                    source: file,
+                                    size: file.size
                                 };
                             }
                             return item;
@@ -234,7 +236,8 @@ const FileList = /*#__PURE__*/ forwardRef((props, ref)=>{
             fileId: params.fileId || guidGenerator(),
             url: params.url || "",
             status: params.status || "waiting",
-            source: file
+            source: file,
+            size: file.size
         };
         return customFile;
     };

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

@@ -30,6 +30,8 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
     if (fileUpload) {
         fileUpload = _object_spread({}, defaultFileUploadProps, fileUpload);
     }
+    const footerDomRef = useRef(null);
+    const resizeObserverRef = useRef(null);
     const fileListRef = useRef(null);
     const ctrl = useRef(); //停止生成ai回答时使用
     const [textValue, setTextValue] = useState("");
@@ -72,7 +74,9 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
         }, fileListRef.current);
     });
     useEffect(()=>{
+        listenerFooterHeight();
         return ()=>{
+            resizeObserverRef.current && resizeObserverRef.current.disconnect();
             clearTimeout(updateMsgRef.current);
         };
     }, []);
@@ -85,6 +89,16 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
         referencesSource,
         sending
     ]);
+    // 监听footer变化
+    const listenerFooterHeight = ()=>{
+        if (!footerDomRef.current) return;
+        // 创建ResizeObserver实例
+        resizeObserverRef.current = new ResizeObserver((entries)=>{
+            apiRef.contentApi && apiRef.contentApi.scrollToBottom();
+        });
+        // 开始观察footer元素
+        resizeObserverRef.current.observe(footerDomRef.current);
+    };
     // 是否允许发送消息
     const canSendMsg = useMemo(()=>{
         if (textValue.trim().length === 0) return false;
@@ -186,7 +200,8 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
             content: value,
             location: "right",
             reference: recordRef.current.referencesSource,
-            source: null
+            source: null,
+            fileList: fileListRef.current.getFileList()
         });
         sendMsgAjax();
     };
@@ -203,7 +218,8 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
             content: "正在输入...",
             location: "left",
             reference: null,
-            source: null
+            source: null,
+            fileList: fileListRef.current.getFileList()
         });
         let msgContent = "";
         setSending(true);
@@ -226,6 +242,7 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
                     setSending(false);
                     if (recordMsgObj.id) {
                         apiRef.contentApi.recordMsg(recordMsgObj);
+                        apiRef.contentApi.setSendingId(recordMsgObj.id);
                     }
                     console.log("onclose: ", recordMsgObj);
                 };
@@ -254,11 +271,12 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
                         delete data.content;
                         recordMsgObj = _object_spread({
                             createTime: createTime,
-                            content: msgContent,
+                            content: msgContent || "正在输入...",
                             location: "left",
                             reference: null,
                             source: null
                         }, data);
+                        apiRef.contentApi.setSendingId(data.id);
                         apiRef.contentApi.updateMsg(msgId, recordMsgObj);
                         msgId = data.id;
                         updateMsgRef.current = setTimeout(function() {
@@ -292,6 +310,7 @@ const Footer = /*#__PURE__*/ forwardRef((props, ref)=>{
     };
     return /*#__PURE__*/ _jsx("div", {
         className: `${getCls("footer")} ${className}`,
+        ref: footerDomRef,
         children: /*#__PURE__*/ _jsxs("div", {
             className: `${getCls("footerBody")} ${judegTextLengthWarn() ? getCls("footerBodyWarn") : ""}`,
             children: [

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

@@ -32,15 +32,30 @@ const ReferencesIcon = (props)=>{
         console.log("apiRef", apiRef);
         if (apiRef && apiRef.footerApi) {
             console.log("itemitem", item);
-            apiRef.footerApi.setReferences({
-                type: "text",
-                value: item.content,
-                source: item
-            });
+            if (item.type === "file") {
+                apiRef.footerApi.setReferences({
+                    type: "file",
+                    value: {
+                        name: item.fileTitle,
+                        suffix: item.suffix,
+                        fileId: item.id,
+                        url: "",
+                        status: "success",
+                        source: null
+                    },
+                    source: item
+                });
+            } else {
+                apiRef.footerApi.setReferences({
+                    type: "text",
+                    value: item.content,
+                    source: item
+                });
+            }
         }
     };
     return /*#__PURE__*/ _jsx("div", {
-        className: `${getCls("msgItem-action-references")}`,
+        className: `${getCls("msgItem-action-reference")}`,
         onClick: ()=>clickFn(),
         children: referencesIcon
     });

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

@@ -1,4 +1,4 @@
-.msgItem-action-references {
+.msgItem-action-reference {
   cursor: pointer;
   border-radius: 2px;
   display: flex;

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

@@ -13,6 +13,7 @@ import CopyIcon from "../copyIcon";
 import ReferencesIcon from "../referencesIcon";
 import { UpVoteBtn, DownVoteBtn } from "../remarkBtn";
 import RefreshBtn from "../refreshBtn";
+import { fileIconRender } from "../fileList/fileIcon";
 const Header = ({ context })=>{
     const { prefix, loading } = context;
     if (!loading) return null;
@@ -44,14 +45,15 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { prefix, contentConfig, apiRef } = props;
     const { getList, coverRenderText, msgAction = [
         "copy",
-        "references"
-    ], coverRenderReferences, onRecordMessage = ()=>{}, onVoteChange = ()=>{}, onRefresh = ()=>{} } = contentConfig;
+        "reference"
+    ], coverRenderReferences, onRecordMessage = ()=>{}, onVoteChange = ()=>{}, onRefresh = ()=>{}, helloMsg, fileCustomRender = {} } = contentConfig;
     const loadMoreProps = contentConfig.loadMore || true;
     const virtuosoRef = useRef(null);
     const [loading, setLoading] = useState(false); // 是否加载中
     const [dataSource, setDataSource] = useState([]);
     const [firstItemIndex, setFirstItemIndex] = useState(0);
     const [page, setPage] = useState(1);
+    const [sendingId, setSendingId] = useState("");
     const [pageSize, setPageSize] = useState(contentConfig.pageSize || 30);
     const [total, setTotal] = useState(0);
     const timerRef = useRef({
@@ -64,24 +66,14 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
         pageSize: pageSize,
         total: total,
         dataSource: dataSource,
-        maxPage: Math.ceil(total / pageSize)
+        maxPage: Math.ceil(total / pageSize),
+        sendingId: ""
     });
     const timeRenderCache = useRef(new Map()).current;
     const htmlRenderCache = useRef(new Map()).current;
     useImperativeHandle(ref, ()=>{
         return {
-            addMsg: (msg)=>{
-                if (msg.id !== "inputing") {
-                    // 不记录"正在输入..."的消息
-                    onRecordMessage(msg);
-                }
-                setDataSource((data)=>{
-                    return [
-                        ...data,
-                        msg
-                    ];
-                });
-            },
+            addMsg,
             updateMsg: (id, obj)=>{
                 setDataSource((data)=>{
                     return data.map((item)=>{
@@ -116,17 +108,26 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
             changeDataSource: (data)=>{
                 setDataSource(data);
             },
-            scrollToBottom: function() {
-                if (!virtuosoRef.current) return;
-                virtuosoRef.current.scrollToIndex({
-                    index: "LAST",
-                    behavior: "auto"
-                });
+            scrollToBottom,
+            setSendingId: (id)=>{
+                setSendingId(id);
             }
         };
     });
     useEffect(()=>{
-        getData(page, pageSize);
+        getData(page, pageSize).then(()=>{
+            if (helloMsg) {
+                addMsg({
+                    id: "helloMsg",
+                    createTime: new Date().getTime(),
+                    content: helloMsg,
+                    location: "left",
+                    reference: null,
+                    source: null,
+                    fileList: []
+                });
+            }
+        });
         let removeFn = delegate(wrapperRef.current, "click", `.${styles.copyCode}`, (event, target)=>{
             findCopyContent(event);
         });
@@ -159,32 +160,71 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
         recordRef.current.total = total;
         recordRef.current.dataSource = dataSource;
         recordRef.current.maxPage = Math.ceil(total / pageSize);
+        recordRef.current.sendingId = sendingId;
     }, [
         page,
         pageSize,
         total,
-        dataSource
+        dataSource,
+        sendingId
     ]);
+    const addMsg = (msg)=>{
+        if (msg.id !== "inputing" && msg.id !== "helloMsg") {
+            // 不记录"正在输入..."的消息
+            onRecordMessage(msg);
+        }
+        let list = [];
+        if (msg.location === "right" && msg.fileList && msg.fileList.length > 0) {
+            console.log("fileList", msg, msg.fileList);
+            msg.fileList.map((item)=>{
+                list.push({
+                    type: "file",
+                    id: item.fileId,
+                    createTime: msg.createTime,
+                    content: "",
+                    location: "right",
+                    reference: null,
+                    source: null,
+                    suffix: item.suffix,
+                    fileSize: item.size || 0,
+                    fileTitle: item.name
+                });
+            });
+        }
+        list.push(msg);
+        setDataSource((data)=>{
+            return [
+                ...data,
+                ...list
+            ];
+        });
+        timerRef.current.scrollTimer = setTimeout(()=>{
+            scrollToBottom();
+        }, 100);
+    };
+    const scrollToBottom = ()=>{
+        if (!virtuosoRef.current) return;
+        virtuosoRef.current.scrollToIndex({
+            index: "LAST",
+            behavior: "auto"
+        });
+    };
     const getData = (page, pageSize)=>{
         setLoading(true);
-        clearTimeout(timerRef.current.loadMore);
-        timerRef.current.loadMore = setTimeout(()=>{
+        return getList(page, pageSize).then((listObj)=>{
             setLoading(false);
-            getList(page, pageSize).then((listObj)=>{
-                setLoading(false);
-                console.log("listObjlistObj", listObj);
-                setDataSource((data)=>{
-                    return [
-                        ...data,
-                        ...listObj.dataSource
-                    ];
-                });
-                setTotal(listObj.total);
-                setPage(page);
-                setPageSize(pageSize);
-                setFirstItemIndex(listObj.total - pageSize * (page - 1));
+            console.log("listObjlistObj", listObj);
+            setDataSource((data)=>{
+                return [
+                    ...data,
+                    ...listObj.dataSource
+                ];
             });
-        }, 500);
+            setTotal(listObj.total);
+            setPage(page);
+            setPageSize(pageSize);
+            setFirstItemIndex(listObj.total - pageSize * (page - 1));
+        });
     };
     const getCls = (clsName)=>{
         return styles[clsName] + " " + prefix + "-" + clsName;
@@ -199,18 +239,7 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
     ]);
     const itemContent = (index, item)=>{
         const timeNode = renderTime(item);
-        let cahceKey = item.id + "-" + item.content;
         let contentNode = null;
-        // if (htmlRenderCache.has(cahceKey)) {
-        //   contentNode = htmlRenderCache.get(cahceKey);
-        // } else {
-        //   const html = markToHtml(item.content, item.id);
-        //   contentNode = <div dangerouslySetInnerHTML={{ __html: html }}></div>;
-        //   if (coverRenderText) {
-        //     contentNode = coverRenderText(item, html);
-        //   }
-        //   htmlRenderCache.set(cahceKey, contentNode);
-        // }
         const html = markToHtml(item.content, item.id);
         contentNode = /*#__PURE__*/ _jsx("div", {
             dangerouslySetInnerHTML: {
@@ -220,6 +249,38 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
         if (coverRenderText) {
             contentNode = coverRenderText(item, html);
         }
+        // item.type = "file";
+        // item.suffix = "docx";
+        // item.fileTitle = "这是一个文件名称.docx";
+        // item.fileSize = "5Mb";
+        if (item.type === "file") {
+            let renderFileObj = _object_spread({
+                fileTitleRender: (item)=>{
+                    return /*#__PURE__*/ _jsx(_Fragment, {
+                        children: item.fileTitle
+                    });
+                }
+            }, fileCustomRender);
+            if (renderFileObj.fileRender) {
+                contentNode = renderFileObj.fileRender(item);
+            } else {
+                contentNode = /*#__PURE__*/ _jsxs("div", {
+                    className: `${getCls("msgItem-file")}`,
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: `${getCls("msgItem-file-left")}`,
+                            children: fileIconRender(item.suffix, renderFileObj.iconFileRender)
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: `${getCls("msgItem-file-right")}`,
+                            children: /*#__PURE__*/ _jsx("p", {
+                                children: renderFileObj.fileTitleRender(item)
+                            })
+                        })
+                    ]
+                });
+            }
+        }
         // 是否显示时间
         let itemNode = /*#__PURE__*/ _jsx("div", {
             className: `${getCls("msgItem")} ${item.location === "left" ? getCls("msgItem-left") : getCls("msgItem-right")}`,
@@ -258,12 +319,30 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
         let referenceNode = null;
         if (reference.type === "text") {
             referenceNode = /*#__PURE__*/ _jsx("div", {
-                className: `${getCls("msgItem-references-text")}`,
+                className: `${getCls("msgItem-reference-text")}`,
                 children: /*#__PURE__*/ _jsx("div", {
                     children: reference.value
                 })
             });
         }
+        if (reference.type === "file") {
+            referenceNode = /*#__PURE__*/ _jsx("div", {
+                className: `${getCls("msgItem-reference-file")}`,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: `${getCls("msgItem-reference-file-box")}`,
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: `${getCls("msgItem-reference-file-left")}`,
+                            children: fileIconRender(reference.value.suffix, fileCustomRender.iconFileRender)
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: `${getCls("msgItem-reference-file-right")}`,
+                            children: reference.value.name
+                        })
+                    ]
+                })
+            });
+        }
         if (coverRenderReferences) {
             return coverRenderReferences(item, referenceNode);
         } else {
@@ -315,6 +394,7 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
         topDom.style.cssText = "";
     };
     const renderAction = (location, item)=>{
+        if (item.id === "inputing" || item.id === "helloMsg" || item.id === recordRef.current.sendingId) return null;
         let copyNode = /*#__PURE__*/ _jsx(CopyIcon, {
             prefix: prefix,
             content: item.content
@@ -328,6 +408,7 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
             prefix: prefix,
             isActive: item.vote === "up",
             clickFn: ()=>{
+                onVoteChange(item.vote === "up" ? "" : "up", item);
                 setDataSource((data)=>{
                     return data.map((ite)=>{
                         if (item.id === ite.id) {
@@ -336,13 +417,13 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
                         return ite;
                     });
                 });
-                onVoteChange(item.vote === "up" ? "" : "up", item);
             }
         });
         let DownVoteNode = /*#__PURE__*/ _jsx(DownVoteBtn, {
             prefix: prefix,
             isActive: item.vote === "down",
             clickFn: ()=>{
+                onVoteChange(item.vote === "down" ? "" : "down", item);
                 setDataSource((data)=>{
                     return data.map((ite)=>{
                         if (item.id === ite.id) {
@@ -351,7 +432,6 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
                         return ite;
                     });
                 });
-                onVoteChange(item.vote === "down" ? "" : "down", item);
             }
         });
         let RefreshNode = /*#__PURE__*/ _jsx(RefreshBtn, {
@@ -362,6 +442,12 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
             UpVoteNode = null;
             DownVoteNode = null;
         }
+        if (item.type === "file") {
+            copyNode = null;
+            UpVoteNode = null;
+            DownVoteNode = null;
+            RefreshNode = null;
+        }
         let leftNodes = null;
         let rightNodes = /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
@@ -377,7 +463,7 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
             if (!msgAction.includes("copy")) {
                 copyNode = null;
             }
-            if (!msgAction.includes("references")) {
+            if (!msgAction.includes("reference")) {
                 referencesNode = null;
             }
             if (!msgAction.includes("upVite")) {
@@ -573,6 +659,9 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
             p[0].innerText = "复制代码";
         }
     };
+    const onScroll = ()=>{
+        console.log("滚动滚动");
+    };
     return /*#__PURE__*/ _jsx("div", {
         className: `${getCls("virtuosoList-wrapper")}`,
         ref: wrapperRef,
@@ -597,7 +686,8 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
                 Header: Header
             },
             increaseViewportBy: 200,
-            overscan: 10
+            overscan: 10,
+            onScroll: onScroll
         })
     });
 });

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

@@ -71,11 +71,11 @@
             text-align: right;
             height: 37px;
             line-height: 37px;
-            padding: 0 ;
-            padding-right: 16px ;
+            padding: 0;
+            padding-right: 16px;
             position: relative;
             cursor: pointer;
-            font-weight: 400 ;
+            font-weight: 400;
             top: 6px;
             &.copyCodeFun {
               display: flex;
@@ -266,6 +266,42 @@
               border-radius: 0 0 4px 4px;
             }
           }
+          .msgItem-file {
+            display: flex;
+            align-items: center;
+            padding: 8px 12px;
+            background: #fafafa;
+            border-radius: 8px;
+            border: 1px solid #ebebeb;
+            gap: 12px;
+            min-width: 216px;
+            .msgItem-file-left {
+              font-size: 24px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 0;
+              margin: 0;
+              & > i {
+                display: flex;
+                font-size: 24px;
+              }
+            }
+            .msgItem-file-right {
+              font-size: 14px;
+              font-weight: 400;
+              color: rgba(0, 0, 0, 0.65);
+              & > p {
+                &:nth-child(1) {
+                  // margin-bottom: 4px;
+                }
+                // &:nth-child(2) {
+                //   font-size: 12px;
+                //   color: rgba(0, 0, 0, 0.25);
+                // }
+              }
+            }
+          }
         }
         .msgItem-action {
           border-top: 1px solid rgba(0, 0, 0, 0.06);
@@ -321,7 +357,7 @@
       }
     }
 
-    .msgItem-references-text {
+    .msgItem-reference-text {
       padding: 8px;
       border-radius: 2px;
       background: #e7e7e7;
@@ -340,6 +376,45 @@
         word-wrap: break-word;
       }
     }
+    .msgItem-reference-file {
+      padding: 8px;
+      border-radius: 2px;
+      background: #e7e7e7;
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.65);
+      margin-top: 8px;
+
+      .msgItem-reference-file-box {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        background: #fafafa;
+        border-radius: 8px;
+        border: 1px solid #ebebeb;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 8px 12px;
+        min-width: 216px;
+        .msgItem-reference-file-left {
+          font-size: 24px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 0;
+          margin: 0;
+          & > i {
+            display: flex;
+            font-size: 24px;
+          }
+        }
+        .msgItem-reference-file-right {
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(0, 0, 0, 0.65);
+        }
+      }
+    }
     &.msgItem-left {
       justify-content: flex-start;
       .msgItem-box {

package/es2017/AIMessageList/type.d.ts

@@ -62,6 +62,12 @@ export interface contentConfigProps {
   onRecordMessage?: (item: dataItemType) => void; // 发送和接收的消息记录
   onVoteChange?: (type:string,item: dataItemType) => void; // 点赞 或踩
   onRefresh?: (item:dataItemType) => void;// 刷新
+  fileCustomRender?: {// 文件对象的自定义渲染
+    iconFileRender?: (suffix: string) => React.ReactNode; // 文件上传的 icon。参数 文件对象file 返回值为图标
+    fileTitleRender?: (item: dataItemType) => React.ReactNode;
+    fileBottomRender?: (item: dataItemType) => React.ReactNode;
+    fileRender?: (item: dataItemType) => React.ReactNode;
+  };
 }
 
 // content props
@@ -205,6 +211,7 @@ export interface fileCustomProps {
   url: string;
   status: fileStatus | undefined;
   source: File | undefined;
+  size:number
 }
 
 // FileList 组件 ref props
@@ -271,6 +278,7 @@ export interface VirtuosoListRefProps {
   upateDataSource:(id:string,obj:dataItemType)=>void;
   changeDataSource:(list:dataItemType[])=>void;
   scrollToBottom: () => void;
+  setSendingId:(id:string)=>void;
 }
 
 export interface contentRefProps extends VirtuosoListRefProps {}
@@ -290,4 +298,9 @@ export interface dataItemType {
   reference: referenceType | null; // 引用数据
   source: any; //原消息对象
   vote?:string;// "up":点赞。"down":踩
+  type?:"file"|"text",
+  suffix?:string;
+  fileSize?:number;
+  fileTitle?:string;
+  fileList?:fileCustomProps[];
 }

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

@@ -139,7 +139,8 @@ var FileList = /*#__PURE__*/ forwardRef(function(props, ref) {
                                     fileId: fileId,
                                     url: "",
                                     status: "waiting",
-                                    source: file
+                                    source: file,
+                                    size: file.size
                                 };
                             }
                             return item;
@@ -161,7 +162,8 @@ var FileList = /*#__PURE__*/ forwardRef(function(props, ref) {
                                     fileId: fileId,
                                     url: "",
                                     status: "uploading",
-                                    source: file
+                                    source: file,
+                                    size: file.size
                                 };
                             }
                             return item;
@@ -248,7 +250,8 @@ var FileList = /*#__PURE__*/ forwardRef(function(props, ref) {
             fileId: params.fileId || guidGenerator(),
             url: params.url || "",
             status: params.status || "waiting",
-            source: file
+            source: file,
+            size: file.size
         };
         return customFile;
     };