bhd-components 0.10.8 → 0.10.10

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/referencesIcon/index.js

@@ -55,7 +55,7 @@ const ReferencesIcon = (props)=>{
         }
     };
     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

@@ -45,8 +45,8 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { prefix, contentConfig, apiRef } = props;
     const { getList, coverRenderText, msgAction = [
         "copy",
-        "references"
-    ], coverRenderReferences, onRecordMessage = ()=>{}, onVoteChange = ()=>{}, onRefresh = ()=>{}, iconFileRender } = contentConfig;
+        "reference"
+    ], coverRenderReferences, onRecordMessage = ()=>{}, onVoteChange = ()=>{}, onRefresh = ()=>{}, helloMsg, fileCustomRender = {} } = contentConfig;
     const loadMoreProps = contentConfig.loadMore || true;
     const virtuosoRef = useRef(null);
     const [loading, setLoading] = useState(false); // 是否加载中
@@ -73,21 +73,7 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
     const htmlRenderCache = useRef(new Map()).current;
     useImperativeHandle(ref, ()=>{
         return {
-            addMsg: (msg)=>{
-                if (msg.id !== "inputing") {
-                    // 不记录"正在输入..."的消息
-                    onRecordMessage(msg);
-                }
-                setDataSource((data)=>{
-                    return [
-                        ...data,
-                        msg
-                    ];
-                });
-                timerRef.current.scrollTimer = setTimeout(()=>{
-                    scrollToBottom();
-                }, 100);
-            },
+            addMsg,
             updateMsg: (id, obj)=>{
                 setDataSource((data)=>{
                     return data.map((item)=>{
@@ -129,7 +115,19 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
         };
     });
     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);
         });
@@ -170,6 +168,40 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
         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({
@@ -179,24 +211,20 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
     };
     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;
@@ -226,26 +254,32 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
         // item.fileTitle = "这是一个文件名称.docx";
         // item.fileSize = "5Mb";
         if (item.type === "file") {
-            contentNode = /*#__PURE__*/ _jsxs("div", {
-                className: `${getCls("msgItem-file")}`,
-                children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        className: `${getCls("msgItem-file-left")}`,
-                        children: fileIconRender(item.suffix, iconFileRender)
-                    }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: `${getCls("msgItem-file-right")}`,
-                        children: [
-                            /*#__PURE__*/ _jsx("p", {
-                                children: item.fileTitle
-                            }),
-                            /*#__PURE__*/ _jsx("p", {
-                                children: item.fileSize
+            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", {
@@ -285,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 {
@@ -411,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")) {
@@ -607,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,
@@ -631,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

@@ -274,30 +274,33 @@
             border-radius: 8px;
             border: 1px solid #ebebeb;
             gap: 12px;
-            .msgItem-file-left{
+            min-width: 216px;
+            .msgItem-file-left {
               font-size: 24px;
               display: flex;
               justify-content: center;
               align-items: center;
               padding: 0;
               margin: 0;
-              &>i{
+              & > i {
                 display: flex;
                 font-size: 24px;
               }
             }
-            .msgItem-file-right{
+            .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);
+              margin: 0;
+              padding: 0;
+              & > p {
+                &:nth-child(1) {
+                  // margin-bottom: 4px;
                 }
+                // &:nth-child(2) {
+                //   font-size: 12px;
+                //   color: rgba(0, 0, 0, 0.25);
+                // }
               }
             }
           }
@@ -356,7 +359,7 @@
       }
     }
 
-    .msgItem-references-text {
+    .msgItem-reference-text {
       padding: 8px;
       border-radius: 2px;
       background: #e7e7e7;
@@ -375,6 +378,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,7 +62,12 @@ export interface contentConfigProps {
   onRecordMessage?: (item: dataItemType) => void; // 发送和接收的消息记录
   onVoteChange?: (type:string,item: dataItemType) => void; // 点赞 或踩
   onRefresh?: (item:dataItemType) => void;// 刷新
-  iconFileRender?: (suffix: string) => React.ReactNode; // 文件上传的 icon。参数 文件对象file 返回值为图标
+  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
@@ -206,6 +211,7 @@ export interface fileCustomProps {
   url: string;
   status: fileStatus | undefined;
   source: File | undefined;
+  size:number
 }
 
 // FileList 组件 ref props
@@ -294,7 +300,7 @@ export interface dataItemType {
   vote?:string;// "up":点赞。"down":踩
   type?:"file"|"text",
   suffix?:string;
-  fileSize?: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;
     };

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

@@ -55,7 +55,7 @@ var ReferencesIcon = function(props) {
         }
     };
     return /*#__PURE__*/ _jsx("div", {
-        className: "".concat(getCls("msgItem-action-references")),
+        className: "".concat(getCls("msgItem-action-reference")),
         onClick: function() {
             return clickFn();
         },

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

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