bhd-components 0.10.12 → 0.10.14

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

@@ -0,0 +1,467 @@
+.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;
+            padding: 0;
+            padding-right: 16px;
+            position: relative;
+            cursor: pointer;
+            font-weight: 400;
+            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;
+                }
+                &:first-child {
+                  padding-top: 8px;
+                }
+              }
+              li > ol li {
+                // padding-bottom: 8px;
+                &::marker {
+                  color: rgba(0, 0, 0, 0.45);
+                }
+
+                &:first-child {
+                  padding-top: 8px;
+                }
+              }
+              > 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;
+              }
+              &:last-child {
+                padding-bottom: 0;
+              }
+            }
+            > 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;
+              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-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);
+              margin: 0;
+              padding: 0;
+              & > 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);
+          padding: 12px 16px;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .msgItem-action-left {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          }
+          .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;
+          background: #fff;
+          line-height: 1;
+          z-index: 9;
+          padding: 4px 8px;
+          .msgItem-action-left {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          }
+          .msgItem-action-right {
+            display: flex;
+            align-items: center;
+            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-reference-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-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 {
+        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/esm/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/esm/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";
+var AIMessageList = /*#__PURE__*/ forwardRef(function(props, ref) {
+    var _props_prefix = props.prefix, prefix = _props_prefix === void 0 ? "bhd-AIMessageList" : _props_prefix, _props_className = props.className, className = _props_className === void 0 ? "" : _props_className, headerConfig = props.headerConfig, footerConfig = props.footerConfig, _props_errorCallback = props.errorCallback, errorCallback = _props_errorCallback === void 0 ? errorCallbackDefault : _props_errorCallback, contentConfig = props.contentConfig;
+    var footerRef = useRef(null);
+    var contentRef = useRef(null);
+    var apiRef = useRef({
+        contentApi: null,
+        footerApi: null
+    });
+    useImperativeHandle(ref, function() {
+        apiRef.current.contentApi = contentRef.current;
+        apiRef.current.footerApi = footerRef.current;
+        return apiRef.current;
+    });
+    var getCls = function(clsName) {
+        return styles[clsName] + " " + prefix + "-" + clsName;
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "".concat(getCls("root"), " ").concat(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/esm/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;
+  }
+}