bhd-components 0.5.6 → 0.5.8

package/es2017/customerService/index.module.less

@@ -0,0 +1,790 @@
+@import "../theme/variable.less";
+// @color-data-visualization-01: @color-background-info-base;
+// @color-text-primary: @color-background-info-base;
+
+.service_ChatWindow_Drawer,
+.ChatWindow_Modal {
+  width: 100% !important;
+  :global {
+    .bhd-drawer-mask {
+      background-color: @color-border-Tr !important;
+    }
+  }
+}
+.ChatWindow_Drawer,
+.ChatWindow_Modal {
+  /* 全局修改滚动条样式 */
+  textarea::-webkit-scrollbar {
+    background-color: #eaedf1;
+    background-color: transparent;
+    width: 4px;
+    height: 4px;
+  }
+  textarea::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+
+  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);
+  }
+
+  // background: #F5F5F5 !important;
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1) !important;
+  :global {
+    .bhd-drawer-body {
+      padding: 0 !important;
+    }
+  }
+  .header_wrap {
+    .top {
+      display: flex;
+      padding: 16px 24px;
+      justify-content: space-between;
+      align-items: center;
+      background-color: #fff;
+      line-height: 1;
+      .user {
+        color: #000;
+        font-size: 16px;
+        font-weight: 600;
+        position: relative;
+        padding-left: 36px;
+        i {
+          padding-right: 16px;
+          color: #111;
+          position: absolute;
+          font-size: 20px;
+          top: -2px;
+          left: 0;
+        }
+        .count{
+          position: absolute;
+          top: -6px;
+          right: 5px;
+          background-color: #f4523b;
+          color: #fff;
+          padding: 0 5px;
+          border-radius: 25px;
+          font-size: 12px;
+          line-height: 1.2;
+        }
+      }
+      .operate {
+        display: flex;
+        height: 16px;
+        i {
+          font-size: 16px;
+          margin-left: 23px;
+          cursor: pointer;
+        }
+        // :global{
+        //     .iconicon_guanbi_Close{
+        //         // font-size: 23px;
+        //         position: relative;
+        //         top: 1px;
+        //     }
+        // }
+        .line {
+          display: inline-block;
+          width: 1px;
+          height: 16px;
+          background-color: @color-border-Tr;
+          margin: 0 4px;
+          margin-left: 23px;
+        }
+      }
+    }
+  }
+  //newlabo中使用
+  .header_wrap_newlabo {
+    .top {
+      background-color: #f5f5f5;
+      border-bottom: 1px solid @color-border-Tr;
+      .user {
+        padding-left: 0;
+        font-weight: 400;
+      }
+    }
+  }
+  .Drawer_main {
+    max-height: calc(100vh - 110px);
+    overflow: auto;
+    background: #f5f5f5;
+    min-height: 500px;
+    .loading {
+      text-align: center;
+      margin: 10px 0;
+      img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    .message_con {
+      padding: 16px;
+      padding-top: 0;
+      .left {
+        .head_sculpture {
+          width: 32px;
+          height: 32px;
+          margin-top: 24px;
+          border-radius: 50%;
+          display: inline-block;
+          vertical-align: top;
+          overflow: hidden;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .right {
+        .head_sculpture {
+          width: 32px;
+          height: 32px;
+          margin-top: 24px;
+          line-height: 32px;
+          border-radius: 50%;
+          display: inline-block;
+          vertical-align: top;
+          overflow: hidden;
+          // background-color: @color-background-primary-base;
+          text-align: center;
+          i {
+            color: #fff;
+          }
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      & > li {
+        position: relative;
+        // margin-bottom: 24px;
+        display: flex;
+        width: 100%;
+        .main {
+          max-width: 80%;
+          .main_content {
+            position: relative;
+            &:hover {
+              .operate_modal {
+                // display: block;
+                visibility: visible;
+              }
+            }
+            .content {
+              max-width: 100%;
+              // width: 100%;
+              //以下优化ai返回的内容的样式
+              .content_child {
+                padding: 0;
+                line-height: 1;
+                p,
+                li {
+                  line-height: 1.5;
+                  color: rgba(0, 0, 0, 0.85);
+                }
+
+                & > h3 {
+                  font-size: 16px;
+                  font-weight: 600;
+                  padding: 10px 0;
+                }
+                ol {
+                  li p {
+                    padding: 4px 0;
+                    font-size: 14px;
+                    font-weight: 600;
+                  }
+                  li > ul li {
+                    list-style: inside;
+                    color: rgba(0, 0, 0, 0.65);
+                  }
+                }
+              }
+              pre {
+                background: rgba(0, 0, 0, 0.05);
+                padding: 12px;
+                line-height: 1.5;
+                margin: 4px 0;
+              }
+            }
+          }
+          .operate_modal {
+            // display: none;
+            visibility: hidden;
+            // min-width: 200px;
+            height: 24px;
+            white-space: nowrap;
+            position: relative;
+            right: 0;
+            top: -14px;
+            z-index: 99999;
+            text-align: right;
+            // padding-bottom: 10px;
+            .operate {
+              display: inline-flex;
+              align-items: center;
+              padding: 8px 0;
+              border-radius: 4px;
+              background: #fff;
+              box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+              line-height: 1;
+              color: @color-text-tertiary-Tr;
+              i {
+                color: @color-text-tertiary-Tr;
+                font-size: 16px;
+                cursor: pointer;
+                svg {
+                  color: @color-icon-fill-Tr;
+                }
+                &:hover {
+                  svg {
+                    color: @color-data-visualization-01;
+                  }
+                }
+              }
+              .active {
+                // color: @color-background-primary-base;
+                svg {
+                  color: @color-text-primary;
+                }
+              }
+              span {
+                margin: 0 8px;
+              }
+              .ask_question {
+                cursor: pointer;
+                color: @color-text-tertiary-Tr;
+                font-size: 12px;
+                line-height: 1;
+                padding: 2px 8px;
+                background-color: @color-background-filltertiary-Tr;
+                margin-right: 16px;
+              }
+            }
+          }
+          .operate_modal_bottom {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .operate {
+              display: inline-block;
+              padding: 8px;
+              line-height: 1;
+              color: @color-text-tertiary-Tr;
+              i {
+                color: @color-text-tertiary-Tr;
+                font-size: 16px;
+                cursor: pointer;
+                svg {
+                  color: @color-icon-fill-Tr;
+                }
+                &:hover {
+                  svg {
+                    color: @color-data-visualization-01;
+                  }
+                }
+              }
+              .active {
+                // color: @color-background-primary-base;
+                svg {
+                  color: @color-text-primary;
+                }
+              }
+              span {
+                margin: 0 8px;
+                cursor: pointer;
+              }
+            }
+            .stop_generate {
+              // position: absolute;
+              font-size: 12px;
+              color: @color-text-tertiary-Tr;
+              display: inline-block;
+              padding: 8px 0;
+              cursor: pointer;
+              .icon {
+                display: inline-block;
+                width: 10px;
+                height: 10px;
+                border-radius: 2px;
+                background-color: @color-text-tertiary-Tr;
+                margin-right: 4px;
+              }
+              .find_teacher {
+                padding: 2px 8px;
+                border-radius: 2px;
+                background-color: @color-background-filltertiary-Tr;
+                color: @color-text-tertiary-Tr;
+                font-size: 12px;
+                line-height: 1;
+                &:hover{
+                  color: @color-text-primary;
+                }
+              }
+            }
+            .stop_generate:hover{
+              color: @color-text-primary;
+              span{
+                color: @color-text-primary;
+              }
+            }
+            .stop_findTeacher {
+              font-size: 12px;
+              color: @color-text-tertiary-Tr;
+              display: inline-block;
+              padding: 8px 0;
+              cursor: pointer;
+              span {
+                padding: 2px 8px;
+                background-color: @color-background-filltertiary-Tr;
+                color: @color-text-tertiary-Tr;
+                &:hover{
+                  color: @color-text-primary;
+                }
+              }
+            }
+
+          }
+        }
+        .content {
+          padding: 12px 16px;
+          // max-width: 80%;
+          display: inline-block;
+          font-size: 14px;
+        }
+      }
+      .left {
+        justify-content: flex-end;
+        .main {
+          text-align: right;
+        }
+      }
+      li.left .content {
+        border-radius: 20px 2px 20px 20px;
+        background: #d1e4ff;
+        text-align: left;
+        // position: absolute;
+        // left: 0;
+        // float: right;
+      }
+      li.right .content {
+        border-radius: 2px 20px 20px 20px;
+        background: #fff;
+        // position: absolute;
+        // right: 0;
+      }
+
+      li .content {
+        .association_problem li {
+          color: #5991ef;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 1.8;
+          cursor: pointer;
+        }
+      }
+      .time {
+        display: block;
+        margin: 40px 0;
+        margin-bottom: 16px;
+        text-align: center;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.25);
+        position: relative;
+        &::before {
+          content: "";
+          width: 100px;
+          display: inline-block;
+          height: 1px;
+          background-color: #ebebeb;
+          position: relative;
+          top: -3px;
+          right: 16px;
+        }
+        &::after {
+          content: "";
+          width: 100px;
+          display: inline-block;
+          height: 1px;
+          background-color: #ebebeb;
+          position: relative;
+          top: -3px;
+          left: 16px;
+        }
+      }
+      .citation_content {
+        display: table;
+        margin-top: 4px;
+        padding: 8px;
+        border-radius: 2px;
+        background: #e7e7e7;
+        p {
+          color: @color-text-Secondary-Tr;
+          font-size: 12px;
+          line-height: 1.5;
+
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          display: -webkit-box;
+
+          max-height: 36px;
+          word-break: break-all;
+          cursor: pointer;
+
+          text-align: left;
+        }
+      }
+
+      .popover_content {
+        max-width: 400px;
+      }
+    }
+  }
+  .Drawer_main::-webkit-scrollbar {
+    background-color: #eff0f7;
+    background-color: transparent;
+    width: 6px;
+    height: 4px;
+  }
+  .Drawer_main::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(181, 184, 198, 0.8);
+  }
+  //newlabo中使用
+  .Drawer_main_newlabo {
+    pre {
+      background: #2b303b !important;
+      color: #fff;
+      overflow: auto;
+      pre::-webkit-scrollbar {
+        background-color: #eaedf1;
+        background-color: transparent;
+        width: 4px;
+        height: 4px;
+      }
+      pre::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background-color: #f4f4f4;
+      }
+    }
+  }
+  //隐藏聊天头像
+  .Drawer_main_newlabo_no_pic {
+    .head_sculpture {
+      display: none !important;
+    }
+  }
+  .Drawer_buttom_Issues_List {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    .issues_list_teacherList {
+      white-space: nowrap;
+      overflow: auto;
+      width: calc(100% - 40px);
+      box-sizing: border-box;
+      margin-bottom: 6px;
+
+      .item {
+        display: inline-block;
+        margin-right: 8px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+    .issues_list_teacherList::-webkit-scrollbar {
+      background-color: #eaedf1;
+      background-color: transparent;
+      width: 4px;
+      height: 4px;
+    }
+    .issues_list_teacherList::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: #fff;
+    }
+    .issues_list {
+      position: absolute;
+      bottom: 60px;
+      margin: 0 16px;
+      padding-bottom: 4px;
+      line-height: 1;
+      .item > span {
+        cursor: pointer;
+        max-width: 100%;
+        display: inline-block;
+        margin-bottom: 2px;
+        padding: 8px 16px;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        background: #ececec;
+        font-size: 14px;
+        line-height: 1;
+        overflow: hidden;
+        // white-space: nowrap;
+        // text-overflow: ellipsis;
+
+        &:hover {
+          background-color: #fff;
+        }
+        .sign {
+          color: @color-text-primary;
+        }
+      }
+    }
+    .Drawer_buttom {
+      display: flex;
+      align-items: flex-end;
+      margin-bottom: 12px;
+      padding: 0 16px;
+      .input_wrap {
+        // display: flex;
+        align-items: flex-end;
+        width: calc(100% - 36px);
+        background-color: #fff;
+        padding: 11px 16px;
+        border: 1px solid @color-border-secondary;
+        border-radius: 8px;
+        justify-content: space-between;
+        line-height: 1;
+        position: relative;
+        padding-right: 1px;
+        & > .input {
+          // width: calc(100% - 24px);
+          line-height: 1;
+          textarea {
+            max-height: 100px;
+            padding: 0;
+            border: none;
+            box-shadow: none !important;
+            resize: none;
+            padding-right: 48px;
+          }
+
+          :global {
+            textarea.bhd-input {
+              min-height: 21px !important;
+              line-height: 1.5;
+            }
+            .bhd-input[disabled] {
+              background-color: #fff !important;
+            }
+          }
+        }
+        & > .no_AI {
+          width: 100%;
+          textarea {
+            padding-right: 12px;
+          }
+        }
+        .voice {
+          position: absolute;
+          right: 14px;
+          bottom: 12px;
+          color: rgba(0, 0, 0, 0.65);
+          i {
+            cursor: pointer;
+            svg {
+              color: @color-icon-fill-Tr;
+              font-size: 20px;
+            }
+          }
+          .voice_btn {
+            width: 32px;
+            cursor: pointer;
+            position: absolute;
+            bottom: -6px;
+            right: 0px;
+          }
+        }
+        .disabled{
+          cursor:not-allowed !important;
+          color: rgba(0, 0, 0, 0.25) !important;
+          svg{
+            color: rgba(0, 0, 0, 0.25) !important;
+          }
+        }
+        .content_main {
+          display: flex;
+          align-items: center;
+          width: calc(100% - 24px);
+          // margin-right: 8px;
+          .content_con {
+            margin-top: 6px;
+            align-items: center;
+            padding: 8px;
+            background: #e7e7e7;
+            display: inline-block;
+            width: calc(100% - 60px);
+            //
+            p {
+              color: rgba(0, 0, 0, 0.65);
+              border-radius: 2px;
+              font-size: 12px;
+              line-height: 1.5;
+
+              overflow: hidden;
+              text-overflow: ellipsis;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 2;
+              display: -webkit-box;
+
+              max-height: 36px;
+              word-break: break-all;
+            }
+          }
+          .delete_quote {
+            font-size: 18px;
+            color: @color-icon-tertiary;
+            margin-top: 6px;
+          }
+        }
+      }
+
+      .sending {
+        width: 20px;
+        margin-left: 16px;
+        margin-bottom: 9px;
+        i {
+          svg {
+            font-size: 20px;
+            color: @color-icon-fill-Tr;
+          }
+        }
+        .disabled {
+          svg {
+            color: rgba(0, 0, 0, 0.25);
+            cursor: not-allowed;
+          }
+        }
+      }
+    }
+  }
+  //newlabo中使用
+  .Drawer_buttom_Issues_List_newlabo {
+    // bottom: revert-layer !important;
+    background-color: #f5f5f5 !important;
+  }
+
+  :global {
+    .anticon {
+      vertical-align: 0;
+    }
+  }
+}
+.ChatWindow_Drawer {
+  background: #f5f5f5 !important;
+  position: relative;
+  height: 100%;
+  :global {
+    .bhd-drawer-header {
+      display: none !important;
+    }
+  }
+}
+.ChatWindow_Modal {
+  :global {
+    .bhd-modal {
+      border-radius: 8px;
+      overflow: hidden;
+      position: relative;
+    }
+    .bhd-modal-content {
+      height: 100%;
+      background-color: #f5f5f5 !important;
+      .bhd-modal-close {
+        display: none !important;
+      }
+    }
+    .bhd-modal-header {
+      display: none !important;
+    }
+    .bhd-modal-body {
+      height: 100%;
+      padding: 0 !important;
+      border-radius: 4px !important;
+    }
+
+    .bhd-drawer-right > .bhd-drawer-content-wrapper {
+      top: 129px;
+      right: 200px;
+      height: 790px;
+    }
+  }
+  .main_list {
+    max-height: 650px;
+  }
+  .user {
+    padding-left: 0 !important;
+  }
+  .Drawer_buttom_Issues_List {
+    // position: relative;
+    // padding-bottom: 1px;
+    // background: #F5F5F5 !important;
+    border-radius: 4px;
+    width: calc(100% - 328px);
+    margin-left: 328px;
+  }
+  .Drawer_main {
+    max-height: 700px;
+
+    .chat_content {
+      width: calc(100% - 328px);
+      margin-left: 328px;
+      display: inline-block;
+    }
+  }
+}
+
+//引用气泡
+.popover_main_content {
+  min-width: 300px !important;
+  max-width: 340px !important;
+  background-color: #fff !important;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+
+  :global {
+    .bhd-tooltip-content {
+      background-color: #fff;
+      border-radius: 4px;
+      .bhd-tooltip-inner {
+        background-color: #fff;
+        color: @color-text-Tr;
+        font-size: 14px;
+        padding: 12px 16px;
+        border-radius: 4px;
+      }
+    }
+    .bhd-tooltip-arrow:before {
+      background: #ccc !important;
+    }
+    .bhd-tooltip-arrow::after {
+      width: 0 !important;
+      height: 0 !important;
+      border: 5px solid;
+      border-color: transparent transparent #fff transparent;
+      transform: none !important;
+      background: transparent !important;
+      bottom: 0px !important;
+      left: 0px !important;
+      right: 0 !important;
+      box-shadow: none !important;
+    }
+  }
+}