semi-design/packages/semi-foundation/aiChatDialogue/aiChatDialogue.scss

@import './variables.scss';

$module: #{$prefix}-ai-chat-dialogue;

@mixin loading-circle-common() {
    border-radius: $radius-aiChatDialogue_loading_circle;
    height: $width-aiChatDialogue_loading_circle;
    width: $height-aiChatDialogue_loading_circle;
    background-color: $color-aiChatDialogue_loading_circle_bg;
    background-color: $color-aiChatDialogue_loading_circle-bg;
}

.#{$module} {
    &-wrapper {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: $width-aiChatDialogue_wrapper;
        flex-wrap: nowrap;
        padding: $spacing-aiChatDialogue_wrapper-paddingY $spacing-aiChatDialogue_wrapper-paddingX;
    
       .#{$module}-checkbox {
            width: $width-aiChatDialogue_checkbox;
        }

        .#{$module}-container {
            flex: 1 1 auto;
            display: flex;
            flex-direction: row;
            column-gap: $spacing-aiChatDialogue_container-columnGap;


            &-right {
                flex-direction: row-reverse;

                .#{$module}-inner {
                    width: $width-aiChatDialogue_inner;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                }

                .#{$module}-content {
                    &-no-bubble, &-user, &-custom-renderer {
                        margin-left: auto;
                    }
                }

            }
        }

        &:hover {
            .#{$module}-action:not(.#{$module}-action-hidden) {
                visibility: visible;
            }
        }
    }

    &-title {
        line-height: $font-aiChatDialogue_title-lineHeight;
        font-size: $font-aiChatDialogue_title-fontSize;
        font-weight: $font-aiChatDialogue_title-fontWeight;
        text-overflow: ellipsis;
    }

    &-avatar {
        flex-shrink: 0;
        width: $width-aiChatDialogue_avatar;
        height: $height-aiChatDialogue_avatar;

        &-hidden {
            visibility: hidden;
        }
    }

    &-content {
        width: $width-aiChatDialogue_content;
        max-width: $width-aiChatDialogue_content_max;
        font-size: $font-aiChatDialogue_content-fontSize;

        pre {
            background-color: transparent;
        } 

        &-editing {
            width: $width-aiChatDialogue_content_editing;
        }

        &-wrapper {
            display: flex;
            align-items: end;
        }

        &-inner {
            margin-left: auto;
        }

        &-failed {
            color: $color-aiChatDialogue_failed;
            margin-right: $spacing-aiChatDialogue_content_failed-marginRight;
        }

        &-bubble, &-userBubble {
            margin-top: $spacing-aiChatDialogue_content_bubble-marginTop;
            padding: $spacing-aiChatDialogue_bubble-paddingY $spacing-aiChatDialogue_bubble-paddingX;
            border-radius: $radius-aiChatDialogue_bubble;
            background-color: $color-aiChatDialogue_bubble-bg;
            max-width: $width-aiChatDialogue_bubble_max;
            box-sizing: border-box;
            width: $width-aiChatDialogue_bubble;
        }

        &-no-bubble {
            margin-top: $spacing-aiChatDialogue_content_noBubble-marginTop;
        }

        &-loading {
            display: flex;
            align-items: baseline;
            margin-top: $spacing-aiChatDialogue_content_loading-marginTop;

            &-item {
                @include loading-circle-common();
                margin: $spacing-aiChatDialogue_loading_item-marginY $spacing-aiChatDialogue_loading_item-marginX;

                overflow: visible;
                position: relative;

                animation: #{$module}-loading-flashing .8s infinite alternate;
                animation-delay: -0.2s;
                animation-timing-function: ease;


                &::before {
                    content: '';
                    @include loading-circle-common();

                    position: absolute;
                    top: 0;
                    left: $spacing-aiChatDialogue_loading_item_before-left;

                    animation: #{$module}-loading-flashing .8s infinite alternate;
                    animation-timing-function: ease;
                    animation-delay: -0.4s;  
                }

                &::after {
                    content: '';
                    @include loading-circle-common();
                    position: absolute;
                    top: 0;
                    left: $spacing-aiChatDialogue_loading_item_after-left;
                    
                    animation: #{$module}-loading-flashing .8s infinite alternate;
                    animation-delay: 0s;
                    animation-timing-function: ease;
                }
            }

            &-text {
                margin-left: $spacing-aiChatDialogue_loading_text-marginLeft;
                color: var(--semi-color-text-3);
                font-size: $font-aiChatDialogue_loading_text-fontSize;
            }
        }

        &-img {
            margin-top: $spacing-aiChatDialogue_img-marginTop;
            border-radius: $radius-aiChatDialogue_img;

            img {
                width: $width-aiChatDialogue_img;
                height: $height-aiChatDialogue_img;
                object-fit: cover;
            }

            &-list {
                display: inline-flex;
                flex-direction: column;
                margin-right: $spacing-aiChatDialogue_img_list-marginRight;

                img {
                    width: $width-aiChatDialogue_img_list;
                    height: $height-aiChatDialogue_img_list;
                    object-fit: cover;
                }
            }

            &-list:last-child {
                margin-right: 0;
            }
        }

        &-file {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            height: $height-aiChatDialogue_file;
            width: $width-aiChatDialogue_file;
            column-gap: $spacing-aiChatDialogue_file-columnGap;
            padding: $spacing-aiChatDialogue_file-paddingY $spacing-aiChatDialogue_file-paddingX;
            margin-top: $spacing-aiChatDialogue_file-marginTop;
            margin-right: $spacing-aiChatDialogue_file-marginRight;
            border-radius: $radius-aiChatDialogue_file;
            background: $color-aiChatDialogue_file-bg;
            text-decoration: none;

            &:last-child {
                margin-right: 0;
            }

            &-icon {
                color: $color-aiChatDialogue_icon-text;

                &-wrapper {
                    width: $width-aiChatDialogue_file_icon_wrapper;
                    height: $height-aiChatDialogue_file_icon_wrapper;
                    border-radius: $radius-aiChatDialogue_icon_wrapper;
                    @include all-center;
                }

                &-code {
                    background-color: $color-aiChatDialogue_code_icon-bg;
                }

                &-word {
                    background-color: $color-aiChatDialogue_word_icon-bg;
                }

                &-pdf {
                    background-color: $color-aiChatDialogue_pdf_icon-bg;
                }

                &-excel {
                    background-color: $color-aiChatDialogue_excel_icon-bg;
                }

                &-image {
                    background-color: $color-aiChatDialogue_image_icon-bg;
                }

                &-default {
                    background-color: $color-aiChatDialogue_default_icon-bg;
                }
            }

            &-info {
                display: flex;
                flex-direction: column;
            }

            &-title {
                font-size: $font-aiChatDialogue_file_title-fontSize;
                color: $color-aiChatDialogue_file_title-text;
                max-width: $width-aiChatDialogue_file_title_max;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            &-metadata {
                font-size: $font-aiChatDialogue_file_metadata-fontSize;
                color: $color-aiChatDialogue_file_metadata-text;
            }

            &-type {
                text-transform: uppercase;
            }
        }

        &-tool-call {
            display: flex;
            color: $color-aiChatDialogue_tool_call-text;
            padding: $spacing-aiChatDialogue_tool_call-paddingY $spacing-aiChatDialogue_tool_call-paddingX;
            background-color: $color-aiChatDialogue_tool_call-bg;
            border-radius: $radius-aiChatDialogue_tool_call;
            width: $width-aiChatDialogue_tool_call;
            align-items: center;
            justify-content: center;
            column-gap: $spacing-aiChatDialogue_tool_call-columnGap;
            margin-top: $spacing-aiChatDialogue_tool_call-marginTop;
        }

        &-custom-renderer {
            margin-top: $spacing-aiChatDialogue_custom_renderer-marginTop;
            width: $width-aiChatDialogue_custom_renderer;
        }
    }


    &-action {
        margin-top: $spacing-aiChatDialogue_action-marginTop;
        visibility: hidden;

        &-btn {
            width: $width-aiChatDialogue_action_btn;
            height: $height-aiChatDialogue_action_btn;
        }

        &-icon-flip {
            transform: scaleY(-1);
        }

        &-show {
            visibility: visible;
        }

        &.#{$module}-action-hidden, &:hover.#{$module}-action-hidden {
            visibility: hidden;
        }

        &-dropdown {

            li {
                color: $color-aiChatDialogue_action_dropdown-text;
            }

            .#{$prefix}-icon {
                font-size: $font-aiChatDialogue_dropdown_icon-fontSize;
            }
        }
    }

    &-reasoning {
        width: $width-aiChatDialogue_reasoning;

        &-wrapper {
            width: $width-aiChatDialogue_reasoning_wrapper;
            margin-top: $spacing-aiChatDialogue_reasoning_wrapper-marginTop;
            flex: 1 1 auto;
            // min-width: 0; 
            cursor: pointer;
            border: $width-aiChatDialogue_reasoning-border solid $color-aiChatDialogue_reasoning-border;
            border-radius: $radius-aiChatDialogue_reasoning_wrapper;
        }

        &-header {
            box-sizing: border-box; 
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: $spacing-aiChatDialogue_reasoning_header-padding;

            &-prefix, &-suffix {
                width: $width-aiChatDialogue_reasoning_prefix;
                height: $height-aiChatDialogue_reasoning_prefix;
                @include all-center;
            }

            &-title {
                flex: 1 1 auto;
                // min-width: 0; 
                line-height: $font-aiChatDialogue_reasoning_header_title-lineHeight;
                font-weight: $font-aiChatDialogue_reasoning_header_title-fontWeight;
            }
        }

        &-content {
            padding: $spacing-aiChatDialogue_reasoning_content-paddingY $spacing-aiChatDialogue_reasoning_content-paddingX;
            border-top: $width-aiChatDialogue_reasoning-border solid var(--semi-color-border);
        }
    }

    &-step {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        line-height: $font-aiChatDialogue_step-lineHeight;
        padding: $spacing-aiChatDialogue_step-paddingY $spacing-aiChatDialogue_step-paddingX;
        border: $width-aiChatDialogue_step-border solid var(--semi-color-border);
        border-radius: $radius-aiChatDialogue_step;
        margin-top: $spacing-aiChatDialogue_step-marginTop;
        font-size: $font-aiChatDialogue_step-fontSize;

        &-completed {
            color: $color-aiChatDialogue_step_completed-text;
        }

        &-summary {
            display: inline-block;
            width: $width-aiChatDialogue_step_summary;
            cursor: pointer;
        }

        &-prefix {
            width: $width-aiChatDialogue_step_prefix;
            height: $height-aiChatDialogue_step_prefix;
            @include all-center;
            margin-right: $spacing-aiChatDialogue_step_prefix-marginRight;
        }

        &-suffix {
            width: $width-aiChatDialogue_step_suffix;
            height: $height-aiChatDialogue_step_suffix;
            @include all-center;
            color: $color-aiChatDialogue_step_suffix-text;
            margin-left: $spacing-aiChatDialogue_step_suffix-marginLeft;
        }

        &-panel {
            display: flex;
            gap: $spacing-aiChatDialogue_step_panel-gap;
        }

        &-line {
            width: $width-aiChatDialogue_step_line; 
            background-color: $color-aiChatDialogue_step-border;
            margin-left: $spacing-aiChatDialogue_step_line-marginLeft;
        }

        &-action {
            line-height: $font-aiChatDialogue_step_action-lineHeight;
            margin-top: $spacing-aiChatDialogue_step_action-marginTop;
            font-size: $font-aiChatDialogue_step_action-fontSize;
            
            &-summary {
                margin-bottom: $spacing-aiChatDialogue_step_action_summary-marginBottom;
            }
    
            &-desc {
                display: inline-flex;
                color: $color-aiChatDialogue_step_action-text;
                padding: $spacing-aiChatDialogue_step_action_desc-paddingY $spacing-aiChatDialogue_step_action_desc-paddingX;
                background-color: $color-aiChatDialogue_step_action-bg;
                border-radius: $radius-aiChatDialogue_action_desc;
                width: $width-aiChatDialogue_step_action_desc;
                align-items: center;
                justify-content: center;
                column-gap: $spacing-aiChatDialogue_step_action_desc-columnGap;
            }
        }
    }

    &-step-wrapper {
        > .#{$module}-step:first-child {
            margin-top: $spacing-aiChatDialogue_step_wrapper-marginTop;
        }
    }

    &-annotation {
        width: $width-aiChatDialogue_annotation;

        &-wrapper {
            width: $width-aiChatDialogue_annotation_wrapper;
            margin-top: $spacing-aiChatDialogue_annotation_wrapper-marginTop;
            flex: 1 1 auto;
            border: $width-aiChatDialogue_annotation-border solid $color-aiChatDialogue_annotation-border;
            border-radius: $radius-aiChatDialogue_annotation_wrapper;
            padding: $spacing-aiChatDialogue_annotation_wrapper-paddingY $spacing-aiChatDialogue_annotation_wrapper-paddingX;

            &:hover {
                background-color: $color-aiChatDialogue_annotation-bg-hover;
            }
        }

        &-content {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            column-gap: $spacing-aiChatDialogue_annotation_content-columnGap;
            font-size: $font-aiChatDialogue_annotation_content-fontSize;
            color: $color-aiChatDialogue_annotation-text;
            cursor: pointer;

            .#{$prefix}-avatar-group {
                display: flex;
            }

            &-logo {
                width: $width-aiChatDialogue_annotation_logo;
                height: $height-aiChatDialogue_annotation_logo;
                display: flex;
            }

            &-logo-renderMore {
                width: $width-aiChatDialogue_annotation_logo;
                height: $height-aiChatDialogue_annotation_logo;
            }

            &-icon {
                @include all-center;
            }
        }


    }

    &-references {
        display: flex;
        flex-wrap: wrap;
        font-size: $font-aiChatDialogue_references-fontSize;
        line-height: $font-aiChatDialogue_references-lineHeight;
        color: $color-aiChatDialogue_reference-text;
        margin-top: $spacing-aiChatDialogue_references-marginTop;
        column-gap: $spacing-aiChatDialogue_references-columnGap;
        row-gap: $spacing-aiChatDialogue_references-rowGap;

        .#{$module}-reference {
            display: flex;
            padding: $spacing-aiChatDialogue_reference-paddingY $spacing-aiChatDialogue_reference-paddingX;
            box-sizing: border-box;
            width: $width-aiChatDialogue_reference;
            max-width: $width-aiChatDialogue_reference_max;
            flex-shrink: 1;
            align-items: center;
            column-gap: $spacing-aiChatDialogue_reference-columnGap;
            background-color: $color-aiChatDialogue_reference-bg;
            border-radius: $radius-aiChatDialogue_reference;
    
            &-content { 
                display: flex;
                align-items: center;
                flex-grow: 1;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            &-icon {
                @include all-center;
                margin-right: $spacing-aiChatDialogue_reference_icon-marginRight;
                color: $color-aiChatDialogue_icon-text;
                width: $width-aiChatDialogue_reference_icon;
                height: $height-aiChatDialogue_reference_icon;
                border-radius: $radius-aiChatDialogue_reference_icon;

                &-word {
                    background-color: $color-aiChatDialogue_word_icon-bg;
                }

                &-pdf {
                    background-color: $color-aiChatDialogue_pdf_icon-bg;
                }

                &-excel {
                    background-color: $color-aiChatDialogue_excel_icon-bg;
                }

                &-video {
                    background-color: $color-aiChatDialogue_video_icon-bg;
                }

                &-code {
                    background-color: $color-aiChatDialogue_code_icon-bg;
                }
            }

            &-img {
                margin-right: $spacing-aiChatDialogue_reference_img-marginRight;
            }
    
            &-name {
                display: inline-block;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }
        }

    }

    &-code {
        border-radius: $radius-aiChatDialogue_code;
        overflow: hidden;
        border: $width-aiChatDialogue_code-border solid $color-aiChatDialogue_code-border;
        line-height: $font-aiChatDialogue_code-lineHeight;

        & .#{$prefix}-codeHighlight pre {
            word-break: break-all;
            white-space: pre-wrap;
        }

        &-topSlot {
            display: flex;
            justify-content: space-between;
            background-color: $color-aiChatDialogue_code_topSlot-bg;
            align-items: center;
            padding: $spacing-aiChatDialogue_code_topSlot-paddingY $spacing-aiChatDialogue_code_topSlot-paddingX;
            color: $color-aiChatDialogue_code_topSlot-text;
            font-size: $font-aiChatDialogue_code_topSlot-fontSize;
            
            &-copy {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                width: $width-aiChatDialogue_action_copy;

                &-wrapper {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    background: transparent;
                    border: none;
                }
                    
            }
        }  
        
        .#{$prefix}-codeHighlight-defaultTheme pre[class*=language-] {
            margin: 0px;
            background: $color-aiChatDialogue_code_content-bg;
        } 

    }

    &-hints {
        display: flex;
        flex-direction: column;
        row-gap: $spacing-aiChatDialogue_hints-rowGap;
        margin-top: $spacing-aiChatDialogue_hints-marginTop; 
        margin-bottom: $spacing-aiChatDialogue_hints-marginBottom;
    }

    &-hint {
        &-item {
            cursor: pointer;
            display: flex;
            flex-direction: row;
            width: fit-content;
            background: $color-aiChatDialogue_hint-bg;
            align-items: center;
            border: $width-aiChatDialogue_hint-border solid $color-aiChatDialogue_hint-border;
            padding: $spacing-aiChatDialogue_hint_item-paddingY $spacing-aiChatDialogue_hint_item-paddingX;
            border-radius: $radius-aiChatDialogue_hint_item;

            &:hover {
                background-color: $color-aiChatDialogue_hint-bg-hover;
            }
        }

        &-content {
            font-size: $font-aiChatDialogue_hint_content-fontSize;
            color: $color-aiChatDialogue_hint-text;
        }
    }

}


@keyframes #{$module}-loading-flashing {
    0% {
        opacity: 1;;
    }
    50% {
        opacity: 0.1;
    }
    to {
        opacity: 1;
    }
}

@import './rtl.scss';