bhd-components 0.10.7 → 0.10.8

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,11 +32,26 @@ 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", {

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;
@@ -45,13 +46,14 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { getList, coverRenderText, msgAction = [
         "copy",
         "references"
-    ], coverRenderReferences, onRecordMessage = ()=>{}, onVoteChange = ()=>{}, onRefresh = ()=>{} } = contentConfig;
+    ], coverRenderReferences, onRecordMessage = ()=>{}, onVoteChange = ()=>{}, onRefresh = ()=>{}, iconFileRender } = 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,7 +66,8 @@ 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;
@@ -81,6 +84,9 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
                         msg
                     ];
                 });
+                timerRef.current.scrollTimer = setTimeout(()=>{
+                    scrollToBottom();
+                }, 100);
             },
             updateMsg: (id, obj)=>{
                 setDataSource((data)=>{
@@ -116,12 +122,9 @@ 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);
             }
         };
     });
@@ -159,12 +162,21 @@ 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 scrollToBottom = ()=>{
+        if (!virtuosoRef.current) return;
+        virtuosoRef.current.scrollToIndex({
+            index: "LAST",
+            behavior: "auto"
+        });
+    };
     const getData = (page, pageSize)=>{
         setLoading(true);
         clearTimeout(timerRef.current.loadMore);
@@ -199,18 +211,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 +221,32 @@ 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") {
+            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 itemNode = /*#__PURE__*/ _jsx("div", {
             className: `${getCls("msgItem")} ${item.location === "left" ? getCls("msgItem-left") : getCls("msgItem-right")}`,
@@ -315,6 +342,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 +356,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 +365,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 +380,6 @@ const VirtuosoList = /*#__PURE__*/ forwardRef((props, ref)=>{
                         return ite;
                     });
                 });
-                onVoteChange(item.vote === "down" ? "" : "down", item);
             }
         });
         let RefreshNode = /*#__PURE__*/ _jsx(RefreshBtn, {
@@ -362,6 +390,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: [

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,41 @@
               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;
+            .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);

package/es2017/AIMessageList/type.d.ts

@@ -62,6 +62,7 @@ export interface contentConfigProps {
   onRecordMessage?: (item: dataItemType) => void; // 发送和接收的消息记录
   onVoteChange?: (type:string,item: dataItemType) => void; // 点赞 或踩
   onRefresh?: (item:dataItemType) => void;// 刷新
+  iconFileRender?: (suffix: string) => React.ReactNode; // 文件上传的 icon。参数 文件对象file 返回值为图标
 }
 
 // content props
@@ -271,6 +272,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 +292,9 @@ export interface dataItemType {
   reference: referenceType | null; // 引用数据
   source: any; //原消息对象
   vote?:string;// "up":点赞。"down":踩
+  type?:"file"|"text",
+  suffix?:string;
+  fileSize?:string;
+  fileTitle?:string;
+  fileList?:fileCustomProps[];
 }

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

@@ -32,6 +32,8 @@ var Footer = /*#__PURE__*/ forwardRef(function(props, ref) {
     if (fileUpload) {
         fileUpload = _object_spread({}, defaultFileUploadProps, fileUpload);
     }
+    var footerDomRef = useRef(null);
+    var resizeObserverRef = useRef(null);
     var fileListRef = useRef(null);
     var ctrl = useRef(); //停止生成ai回答时使用
     var _useState = _sliced_to_array(useState(""), 2), textValue = _useState[0], setTextValue = _useState[1];
@@ -74,7 +76,9 @@ var Footer = /*#__PURE__*/ forwardRef(function(props, ref) {
         }, fileListRef.current);
     });
     useEffect(function() {
+        listenerFooterHeight();
         return function() {
+            resizeObserverRef.current && resizeObserverRef.current.disconnect();
             clearTimeout(updateMsgRef.current);
         };
     }, []);
@@ -87,6 +91,16 @@ var Footer = /*#__PURE__*/ forwardRef(function(props, ref) {
         referencesSource,
         sending
     ]);
+    // 监听footer变化
+    var listenerFooterHeight = function() {
+        if (!footerDomRef.current) return;
+        // 创建ResizeObserver实例
+        resizeObserverRef.current = new ResizeObserver(function(entries) {
+            apiRef.contentApi && apiRef.contentApi.scrollToBottom();
+        });
+        // 开始观察footer元素
+        resizeObserverRef.current.observe(footerDomRef.current);
+    };
     // 是否允许发送消息
     var canSendMsg = useMemo(function() {
         if (textValue.trim().length === 0) return false;
@@ -188,7 +202,8 @@ var Footer = /*#__PURE__*/ forwardRef(function(props, ref) {
             content: value,
             location: "right",
             reference: recordRef.current.referencesSource,
-            source: null
+            source: null,
+            fileList: fileListRef.current.getFileList()
         });
         sendMsgAjax();
     };
@@ -213,7 +228,8 @@ var Footer = /*#__PURE__*/ forwardRef(function(props, ref) {
             content: "正在输入...",
             location: "left",
             reference: null,
-            source: null
+            source: null,
+            fileList: fileListRef.current.getFileList()
         });
         var msgContent = "";
         setSending(true);
@@ -236,6 +252,7 @@ var Footer = /*#__PURE__*/ forwardRef(function(props, ref) {
                     setSending(false);
                     if (recordMsgObj.id) {
                         apiRef.contentApi.recordMsg(recordMsgObj);
+                        apiRef.contentApi.setSendingId(recordMsgObj.id);
                     }
                     console.log("onclose: ", recordMsgObj);
                 };
@@ -266,11 +283,12 @@ var Footer = /*#__PURE__*/ forwardRef(function(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() {
@@ -304,6 +322,7 @@ var Footer = /*#__PURE__*/ forwardRef(function(props, ref) {
     };
     return /*#__PURE__*/ _jsx("div", {
         className: "".concat(getCls("footer"), " ").concat(className),
+        ref: footerDomRef,
         children: /*#__PURE__*/ _jsxs("div", {
             className: "".concat(getCls("footerBody"), " ").concat(judegTextLengthWarn() ? getCls("footerBodyWarn") : ""),
             children: [

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

@@ -32,11 +32,26 @@ var ReferencesIcon = function(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", {