bhd-components 0.5.6 → 0.5.7

package/esm/customerService/index.module.less

@@ -0,0 +1,727 @@
+@import "../theme/variable.less";
+    .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.10) !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;
+                    }
+                }
+                .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.10);
+                                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: #f4523b;
+                                        }
+                                       
+                                    }
+                                }
+                                .active{
+                                    color: @color-background-primary-base;
+                                }
+                                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: #f4523b;
+                                        }
+                                    }
+                                }
+                                .active{
+                                    color: @color-background-primary-base;
+                                }
+                                span{
+                                    margin: 0 16px;
+                                }
+                            }
+                            .stop_generate{
+                                // position: absolute;
+                                font-size: 12px;
+                                color: @color-text-tertiary-Tr;
+                                display: inline-block;
+                                padding: 8px 0;
+                                cursor: pointer;
+                                span{
+                                    display: inline-block;
+                                    width: 10px;
+                                    height: 10px;
+                                    border-radius: 2px;
+                                    background-color: @color-text-tertiary-Tr;
+                                    margin-right: 4px;
+                                    
+                                }
+                                
+                            }
+                            .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;
+                                }
+                            }
+                        }
+                        
+                        
+                    }
+                    .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: inline-block;
+                    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;
+                        
+                        height: 36px;
+                        word-break: break-all;
+                        cursor: pointer;
+    
+                        text-align: left;
+                    }
+                }
+    
+                .popover_content{
+                    max-width: 400px;
+                }
+            }
+        }
+        //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_buttom_Issues_List{
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            .issues_list_teacherList{
+                .item {
+                    display: inline-block;
+                    margin-right: 8px;
+                }
+            }
+            .issues_list{
+                position: absolute;
+                bottom: 60px;
+                padding: 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;
+                        i{
+                            cursor: pointer;
+                            svg{
+                                color:@color-icon-fill-Tr;
+                                font-size: 20px;
+                            }
+                        }
+                        .voice_btn{
+                           width: 32px;
+                           cursor: pointer;
+                           position: absolute;
+                           bottom: -6px;
+                           right: 0px;
+                        }
+                    }
+                    .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;
+                                
+                                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;
+            }
+            
+        }
+        
+    }