bhd-components 0.10.30 → 0.10.32

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

@@ -1,471 +1,471 @@
-.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-action-empty{
-      min-height: 24px;
-    }
-
-    .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;
-          }
-        }
-      }
-    }
-  }
-}
+.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-action-empty{
+      min-height: 24px;
+    }
+
+    .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;
+          }
+        }
+      }
+    }
+  }
+}