bhd-components 0.9.28 → 0.10.1

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

@@ -0,0 +1,381 @@
+.virtuosoList-wrapper {
+  width: 100%;
+  height: 100%;
+  .loadingIcon {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0 24px 0;
+    box-sizing: border-box;
+    & > img {
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  .msg-date {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 32px 16px 32px;
+    box-sizing: border-box;
+    gap: 16px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.25);
+    &:before {
+      content: "";
+      display: block;
+      flex: 1;
+      width: 50%;
+      height: 1px;
+      background: #ebebeb;
+    }
+    &:after {
+      content: "";
+      display: block;
+      flex: 1;
+      width: 50%;
+      height: 1px;
+      background: #ebebeb;
+    }
+  }
+
+  .msgItem {
+    width: 100%;
+    padding: 0px 16px;
+    padding-top: 0;
+    box-sizing: border-box;
+    display: flex;
+    .msgItem-box {
+      max-width: 80%;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.65);
+      display: flex;
+      flex-direction: column;
+      .msgItem-content {
+        position: relative;
+        width: fit-content;
+        max-width: 100%;
+        .msgItem-text {
+          padding: 12px 16px;
+          .copyCode {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            border-radius: 4px 4px 0px 0px;
+            border: 1px solid rgba(0, 0, 0, 0.06);
+            border-bottom-color: rgba(0, 0, 0, 0.06);
+            background: rgba(0, 0, 0, 0.02);
+            text-align: right;
+            height: 37px;
+            line-height: 37px !important;
+            padding: 0 !important;
+            padding-right: 16px !important;
+            position: relative;
+            cursor: pointer;
+            font-weight: 400 !important;
+            top: 6px;
+            &.copyCodeFun {
+              display: flex;
+            }
+            .copyCodeText {
+              line-height: 1;
+            }
+            .icon {
+              display: none;
+              margin-right: 8px;
+              color: rgba(0, 0, 0, 0.65);
+              font-size: 14px;
+              &.copy {
+                display: block;
+              }
+            }
+            &.copy_success {
+              .copyCode {
+                color: #f4523b;
+              }
+              .copy {
+                display: none;
+              }
+              .copy_success_flag {
+                display: inline-block;
+                color: #f4523b;
+              }
+              .copyCodeText {
+                color: #f4523b;
+              }
+            }
+          }
+          & > div {
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+              color: rgba(0, 0, 0, 0.85);
+            }
+            pre::-webkit-scrollbar {
+              background-color: #eaedf1;
+              background-color: transparent;
+              width: 4px;
+              height: 4px;
+            }
+            pre::-webkit-scrollbar-thumb {
+              border-radius: 4px;
+              background-color: rgba(0, 0, 0, 0.25);
+            }
+            p {
+              word-break: break-all;
+              white-space: break-spaces;
+            }
+            p,
+            li {
+              line-height: 1.5;
+              color: rgba(0, 0, 0, 0.85);
+            }
+
+            li {
+              margin-top: 8px;
+              &:first-child {
+                margin-top: 0;
+              }
+            }
+
+            & > h3 {
+              font-size: 16px;
+              font-weight: 600;
+              padding: 10px 0;
+            }
+            ol {
+              list-style: decimal;
+              padding-inline-start: 20px;
+
+              li {
+                list-style-type: auto;
+              }
+
+              li p {
+                // padding: 4px 0;
+                font-size: 14px;
+                font-weight: 600;
+              }
+              li > ul li {
+                // padding-bottom: 8px;
+                list-style: inside;
+                color: rgba(0, 0, 0, 0.85);
+                &::marker {
+                  color: #d9d9d9 !important;
+                }
+                &:first-child {
+                  padding-top: 8px !important;
+                }
+              }
+              li > ol li {
+                // padding-bottom: 8px;
+                &::marker {
+                  color: rgba(0, 0, 0, 0.45) !important;
+                }
+
+                &:first-child {
+                  padding-top: 8px !important;
+                }
+              }
+              > li:last-of-type {
+                pre {
+                  margin-bottom: 0;
+                }
+              }
+            }
+            // li{
+            //   margin-top:16px;
+            // }
+            // > * + ul, > * + ol {
+            //   margin-top:16px;
+            // }
+            // > ul + *, > ol + * {
+            //   margin-top:16px;
+            // }
+            > *:not(pre) {
+              padding-top: 8px;
+              padding-bottom: 8px;
+              &:first-child {
+                padding-top: 0 !important;
+              }
+              &:last-child {
+                padding-bottom: 0 !important;
+              }
+            }
+            > h3,
+            > h4 {
+              padding-top: 8px;
+              padding-bottom: 4px;
+            }
+            > p + p {
+              padding-top: 4px;
+              padding-bottom: 4px;
+            }
+
+            > pre:last-of-type {
+              margin-bottom: 0;
+
+              & + * {
+                margin-top: 8px;
+              }
+            }
+            hr {
+              height: 0;
+              padding: 0;
+              margin: 0;
+              border: none;
+            }
+            table {
+              width: 100%;
+              padding: 0 !important;
+              margin: 8px 0;
+              border-collapse: separate;
+              border-top: 1px solid #dfe6ec;
+              border-left: 1px solid #dfe6ec;
+              thead tr th {
+                background-color: #f8f8f9;
+                padding: 8px;
+                text-align: center;
+                border-bottom: 1px solid #dfe6ec;
+                border-right: 1px solid #dfe6ec;
+              }
+              tbody tr td {
+                padding: 8px;
+                line-height: 21px;
+                height: 37px; //设置单元格最小高度
+                border-bottom: 1px solid #dfe6ec;
+                border-right: 1px solid #dfe6ec;
+              }
+            }
+
+            pre {
+              background: #fafafa;
+              border: 1px solid rgba(0, 0, 0, 0.06);
+              border-top: none;
+
+              padding: 12px;
+              line-height: 1.5;
+              margin: 4px 0;
+              margin-bottom: 8px;
+              border-radius: 0 0 4px 4px;
+            }
+          }
+        }
+        .msgItem-action {
+          border-top: 1px solid rgba(0, 0, 0, 0.06);
+          padding: 12px 16px;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .msgItem-action-right {
+          }
+          .msgItem-action-right {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          }
+        }
+      }
+      .msgItem-action-operate {
+        height: 24px;
+        position: relative;
+        .msgItem-action-popover {
+          position: absolute;
+          width: max-content;
+          border-radius: 4px !important;
+          background: #fff;
+          line-height: 1;
+          z-index: 9;
+          padding: 4px 8px;
+          .msgItem-action-right {
+            display: flex;
+            gap: 8px;
+          }
+          &.msgItem-action-popover-floatTop {
+            bottom: 4px;
+            right: 0;
+            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
+          }
+          &.msgItem-action-popover-floatBottom {
+            box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.1);
+            right: 0;
+            top: 4px;
+          }
+        }
+      }
+    }
+
+    .msgItem-references-text {
+      padding: 8px;
+      border-radius: 2px;
+      background: #e7e7e7;
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.65);
+      margin-top: 8px;
+      & > div {
+        width: 100%;
+        max-height: 36px;
+        word-break: break-all;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+      }
+    }
+    &.msgItem-left {
+      justify-content: flex-start;
+      .msgItem-box {
+        align-items: flex-start;
+        .msgItem-content {
+          background: #ffffff;
+          border-radius: 2px 20px 20px 20px;
+          .msgItem-action {
+            border-radius: 0px 0px 20px 20px;
+          }
+        }
+        .msgItem-action-operate {
+          margin-left: auto;
+          .msgItem-action-popover {
+            display: none;
+          }
+        }
+      }
+    }
+    &.msgItem-right {
+      justify-content: flex-end;
+      padding-bottom: 24px;
+      .msgItem-box {
+        align-items: flex-end;
+        &:hover {
+          .msgItem-action-operate {
+            .msgItem-action-popover {
+              display: flex;
+            }
+          }
+        }
+        .msgItem-content {
+          border-radius: 20px 2px 20px 20px;
+          background: #d1e4ff;
+          .msgItem-action {
+            border-radius: 0px 0px 20px 20px;
+          }
+        }
+
+        .msgItem-action-operate {
+          .msgItem-action-popover {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

package/es2017/AIMessageList/index.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { AIMessageListProps, AIMessageListRefProps } from "./type";
+declare const AIMessageList: React.ForwardRefExoticComponent<AIMessageListProps & React.RefAttributes<AIMessageListRefProps>>;
+export default AIMessageList;

package/es2017/AIMessageList/index.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
+import * as React from "react";
+import { useRef, forwardRef, useImperativeHandle } from "react";
+import styles from "./index.module.less";
+import Header from "./components/header";
+import Content from "./components/content";
+import Footer from "./components/footer";
+import errorCallbackDefault from "./components/errorCallback";
+const AIMessageList = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { prefix = "bhd-AIMessageList", className = "", headerConfig, footerConfig, errorCallback = errorCallbackDefault, contentConfig } = props;
+    const footerRef = useRef(null);
+    const contentRef = useRef(null);
+    const apiRef = useRef({
+        contentApi: null,
+        footerApi: null
+    });
+    useImperativeHandle(ref, ()=>{
+        apiRef.current.contentApi = contentRef.current;
+        apiRef.current.footerApi = footerRef.current;
+        return apiRef.current;
+    });
+    const getCls = (clsName)=>{
+        return styles[clsName] + " " + prefix + "-" + clsName;
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `${getCls("root")} ${className}`,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: getCls("rootHeader"),
+                children: /*#__PURE__*/ _jsx(Header, {
+                    headerConfig: headerConfig,
+                    prefix: prefix,
+                    errorCallback: errorCallback
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: getCls("rootContent"),
+                children: /*#__PURE__*/ _jsx(Content, {
+                    prefix: prefix,
+                    contentConfig: contentConfig,
+                    ref: contentRef,
+                    apiRef: apiRef.current
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: getCls("rootFooter"),
+                children: /*#__PURE__*/ _jsx(Footer, {
+                    footerConfig: footerConfig,
+                    prefix: prefix,
+                    errorCallback: errorCallback,
+                    ref: footerRef,
+                    apiRef: apiRef.current
+                })
+            })
+        ]
+    });
+});
+export default AIMessageList;

package/es2017/AIMessageList/index.module.less

@@ -0,0 +1,20 @@
+.root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+  overflow: hidden;
+  .rootHeader {
+    width: 100%;
+    flex-shrink: 0;
+  }
+  .rootContent {
+    width: 100%;
+    flex: 1;
+  }
+  .rootFooter {
+    width: 100%;
+    flex-shrink: 0;
+  }
+}

package/es2017/AIMessageList/type.d.ts

@@ -0,0 +1,242 @@
+export interface AIMessageListProps {
+  prefix?: string; // 类名前缀 默认为 "bhd-AIMessageList"
+  className?: string; //全局的className
+  headerConfig: headerConfigProps;
+  footerConfig: footerConfigProps;
+  contentConfig: contentConfigProps;
+  errorCallback?: (error: errorMessageProps) => void;
+
+  // sendMsgAjax: () => any; //发送消息
+}
+
+export interface AIMessageListRefProps {
+  footerApi: footerRefProps;
+  contentApi: contentRefProps;
+}
+
+// header Props
+
+export interface headerConfigProps {
+  icon?: React.ReactNode; // 不传存在默认图标
+  title: React.ReactNode;
+  className?: string;
+  renderRightHead?: () => React.ReactNode; // 右侧区域的自定义渲染
+}
+
+export interface msgActionProps {
+  renderLeft?: (
+    copyNode: React.ReactNode,
+    referencesNode: React.ReactNode
+  ) => React.ReactNode;
+  renderRight?: (
+    copyNode: React.ReactNode,
+    referencesNode: React.ReactNode
+  ) => React.ReactNode;
+}
+
+export interface contentConfigProps {
+  className?: string;
+  msgAction?: string[] | msgActionProps;
+  // transformItem:(item: any) => dataItemType;
+  getList: (
+    page: number,
+    pageSize: number
+  ) => Promise<{
+    total: number;
+    dataSource: dataItemType[];
+  }>; // 列表数据
+  loadMore?: boolean; // 是否开启加载更多  // 默认为true
+  helloMsg?: string; //欢迎语
+  coverRenderText?: (item, html) => React.ReactNode; // 覆盖文本内容
+  coverRenderReferences?: (item:dataItemType,referenceNode:React.ReactNode) => React.ReactNode;//覆盖引用内容
+}
+
+// content props
+
+export interface contentProps {
+  prefix: string;
+  contentConfig: contentConfigProps;
+  apiRef: AIMessageListRefProps;
+}
+
+// footer Props
+
+export interface footerConfigProps {
+  placeholder?: string; // placeholder 默认值为“请输入内容”
+  className?: string;
+  maxLength?: number | ((value: string) => boolean); //字符长度 默认500
+  renderAction?: (
+    sendBtn: React.ReactNode,
+    uploadFileBtn: React.ReactNode
+  ) => React.ReactNode; // 自定义渲染操作栏
+  fileUpload?: boolean | fileUploadProps; // 默认为false
+  sendMsgAjaxParams: sendMsgAjaxParams;
+}
+
+export interface sendMsgAjaxParams {
+  url: string;
+  method?: string;
+  headers?: object;
+  params: (
+    value: string,
+    refereces: referenceType,
+    fileList: fileCustomProps[]
+  ) => string;
+  onOpen?: (res: Response) => void;
+  onMessage?: (ev: EventSourceMessage) => { id: string; content: string };
+  onClose?: () => void;
+  onError?: (err: any) => void;
+  coverProps?: object;
+}
+
+// footer file Props
+// 文件上传(需覆盖两种场景：存在解析和不存在解析的场景) flase 则不显示文件上传的 icon
+export interface fileUploadProps {
+  accept?: string; //文件类型 默认值 ".pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.txt,.text,.png,.jpg,.jpeg,.gif,.webp"
+  maxCount?: number; // 上传文件数量限制 -1为不限制 默认为10
+  maxSize?: number; // 默认为50Mb 目前不考虑切片上传 业务上不要设置太大
+  multiple?: boolean; // 是否允许多选
+  customRequest: (
+    file: File
+  ) => Promise<{ url: string; fileId: string; source: File,status:fileStatus }>; // 自定义上传方法
+  mapUploadCount?: number; // 并发上传的数量 默认为1
+  deleteFileAjax?: (fileId: string) => Promise<{ fileId: string }>; // 删除文件的ajax 返回删除文件的fileId
+  statusText?: (status: fileStatus) => React.ReactNode; // 自定义状态显示
+  parseFileAjax?: (fileId: string) => { status: fileStatus; fileId; string }; //文件解析的 ajax 请求 如不存在解析过程，可在此函数内直接返回上传成功的状态
+  iconFileRender?: (suffix: string) => React.ReactNode; // 文件上传的 icon。参数 文件对象file 返回值为图标
+}
+
+// file status  文件状态
+// 等待上传/上传中/上传失败/等待解析/解析中/解析成功/解析失败/上传成功
+export type fileStatus =
+  | "waiting"
+  | "uploading"
+  | "uploadError"
+  | "waitParse"
+  | "parsing"
+  | "parsingError"
+  | "success";
+
+// footer Ref Props
+
+export interface footerRefProps {
+  setTextValue: (value: string) => void; // 设置输入框的值
+  sendMsg: (value: string) => void; // 发送消息
+  clearText: () => void; // 清空输入框
+  getCanSendMsg: () => boolean; //获取当前是否允许发送消息的状态
+  stopMessage: () => void; //停止发送消息
+  setReferences:(reference:referenceType)=>void;// 添加引用
+}
+
+// sendBtn Props
+
+export interface sendBtnProps {
+  prefix: string;
+  canSendMsg: boolean;
+  sending: boolean;
+  stopMessage: () => void;
+}
+
+// uploadFileBtn Props
+export interface uploadFileBtnProps {
+  prefix: string;
+  fileUpload: fileUploadProps;
+  customRequest: (options: any) => void;
+}
+
+// fileList Props
+
+export interface fileListProps {
+  prefix: string;
+  fileUpload: fileUploadProps;
+  errorCallback: (error: errorMessageProps) => void;
+  changeFileCanSending:(flag:boolean)=>void;
+}
+
+
+// file 自定义对象
+
+export interface fileCustomProps {
+  name: string;
+  suffix: string;
+  fileId: string;
+  url: string;
+  status: fileStatus | undefined;
+  source: File | undefined;
+}
+
+// FileList 组件 ref props
+
+export interface FileListRefProps {
+  addFile: (file: File) => void;
+  changePage: (page: number) => void;
+  deleteFile: (fileId: string) => void;
+  updateFile: (fileId: string, status: fileStatus) => void;
+  getFileList: () => fileCustomProps[];
+  vaildFile: (file: File,fileId?:string) => boolean;// 校验文件是否合规
+  fileToCustomFile:(file:File)=>fileCustomProps
+}
+
+// error Message
+
+export interface errorMessageProps {
+  type: errorMessageType;
+  message: string;
+}
+/*  
+  fileAcceptError 文件类型错误
+  fileSizeEmpty 文件大小为空
+  fileSizeOver 文件大小超出限制
+  fileCountOver 文件数量超出限制
+  fileNameExist 文件名称已存在
+*/
+export type errorMessageType =
+  | "fileAcceptError"
+  | "fileSizeEmpty"
+  | "fileSizeOver"
+  | "fileCountOver"
+  | "fileNameExist";
+
+// 引用数据类型
+
+export type referenceType = referenceTypeText | referenceTypeFile;
+
+export type referenceTypeText = {
+  type: "text";
+  value: string;
+};
+
+export type referenceTypeFile = {
+  type: "file";
+  value: fileCustomProps;
+};
+
+export interface VirtuosoListProps {
+  prefix: string;
+  contentConfig: contentConfigProps;
+  apiRef: AIMessageListRefProps;
+}
+
+export interface VirtuosoListRefProps {
+  addMsg: (msg: dataItemType) => void;
+  updateMsg: (id: string, obj: any) => void;
+  clearInputing: () => void;//清楚正在输入的inputing
+}
+
+export interface contentRefProps extends VirtuosoListRefProps {}
+
+export interface EventSourceMessage {
+  id: string;
+  event: string;
+  data: string;
+  retry?: number;
+}
+
+export interface dataItemType {
+  id: string; // 唯一id
+  createTime: string | number; //创建时间
+  content: string; //消息内容
+  location: "left" | "right"; // 消息显示在左边还是右边
+  reference: referenceType | null; // 引用数据
+  source: any; //原消息对象
+}

package/es2017/bhdEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * as WangeditorForReact from "@wangeditor/editor-for-react";
+export * from "@wangeditor/editor";

package/es2017/bhdEditor/index.js

@@ -0,0 +1,3 @@
+import * as _WangeditorForReact from "@wangeditor/editor-for-react";
+export { _WangeditorForReact as WangeditorForReact };
+export * from "@wangeditor/editor";