<template>
    <div class="testBox">
        <div class="test_right">
            <div class="test_input_box" :class="{ focus: isFocused }">
                <div class="setting">
                    <el-tooltip :content=lang.knowSearchConfig placement="bottom" effect="dark">
                        <!-- content to trigger tooltip here -->
                        <i @click="openSetting"></i>
                        <!-- <span>知识库搜索配置</span> -->
                    </el-tooltip>
                </div>
                <el-input class="test_input" type="textarea" :rows="8" v-model="value" :placeholder=lang.inputTestText
                    resize="none" @focus="isFocused = true" @blur="isFocused = false">
                </el-input>
                <el-button class="btn" type="primary" size="mini" @click="testCheck"
                    v-loading="isLoading">{{ lang.test }}</el-button>
            </div>

            <div class="test_history" v-loading="isLoading2">
                <div class="title">{{ lang.testRecord }}</div>
                <div class="test_history_box" v-for="(item, index) in ragArray" :key="index" @click="checkRag(item)"
                    :class="{ acitve: item.id == ragJson.id }">
                    <div class="typeIcon" :class="{
                        type1: item.setting.useType == 1,
                        type2: item.setting.useType == 2,
                        type3: item.setting.useType == 3,
                    }">
                        {{ getUseType(item.setting.useType) }}
                    </div>
                    <div class="query">{{ item.setting.query }}</div>
                    <div class="time">{{ item.time }}</div>
                    <div class="del" @click.stop="deleteRag(item.id)"></div>
                </div>
            </div>
        </div>
        <div class="test_left">
            <div class="test_check" v-if="Object.keys(ragJson).length">
                <div class="title">{{ lang.testParameters }}</div>
                <div class="can_box">
                    <div class="can_one" v-if="ragJson.setting">
                        <div class="one_box">
                            <span>{{ lang.searchWay }}</span>
                            <span class="typeIcon" :class="{
                                type1: ragJson.setting.useType == 1,
                                type2: ragJson.setting.useType == 2,
                                type3: ragJson.setting.useType == 3,
                            }">{{ getUseType(ragJson.setting.useType) }}</span>
                        </div>
                        <div class="one_box">
                            <span>{{ lang.citations }}</span>
                            <span>{{ ragJson.setting.tokens }}</span>
                        </div>
                        <div class="one_box">
                            <span>{{ lang.minRelevance }}</span>
                            <span>{{ ragJson.setting.temperature }}</span>
                        </div>
                    </div>
                    <div class="can_one" v-if="ragJson.setting" style="margin-top: 10px">
                        <div class="one_box">
                            <span>{{ lang.testText }}</span>
                            <span>{{ ragJson.setting.query }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="test_result" v-if="Object.keys(ragJson).length">
                <div class="title">{{ lang.testResult }}</div>
                <div v-if="ragJson.json && ragJson.json.chunkSearchResults" class="result_box">
                    <div v-for="(item, index) in ragJson.json.chunkSearchResults" :key="index" class="result">
                        <el-tooltip :content=lang.distance placement="bottom" effect="dark">
                            <div class="result_score">
                                {{ getUseType(ragJson.setting.useType) }}
                                {{ item.score.toFixed(4) }}
                            </div>
                        </el-tooltip>

                        <div class="vditor-reset" style="font-size: 14px;" v-html="MarkdownT(item.text)"></div>
                        <el-tooltip :content=lang.viewFrom placement="bottom" effect="dark">
                            <div class="result_file" @click="downloadFile(item.documentId, item.metadata.title)">
                                {{ item.metadata.title }}
                            </div>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <div class="customC" v-if="!Object.keys(ragJson).length">
                <div style="height: 50px; line-height: 50px; width: 47.4px">
                    <img style="width: 100%" src="../../../../assets/flieKong.svg" alt="" />
                </div>
                <div style="margin-top: 10px">{{ lang.teResultArea }}</div>
            </div>
        </div>
        <el-dialog title="新建文件夹" :visible.sync="moveBox" width="650px" style="border-radius: 8px"
            @close="moveBox = false" class="canEditCss">
            <div class="canEditTit" slot="title">
                <img src="../../../../assets/icon/testC/dialog_setting.svg" alt="" />
                <span>{{ lang.knowSearchConfig }}</span>
            </div>
            <div style="width: 100%; padding: 10px 40px; box-sizing: border-box;">
                <div class="setting_nav">
                    <div class="setting_nav_box settingIcon" :class="{ active: searchType == 1 }"
                        @click="searchType = 1">
                        <span>{{ lang.searchType }}</span>
                    </div>
                    <div class="setting_nav_box searchIcon" :class="{ active: searchType == 2 }"
                        @click="searchType = 2">
                        <span>{{ lang.searchFiltration }}</span>
                    </div>
                </div>
                <div class="setting_serach" v-if="searchType == 1">
                    <div class="setting_type_box" @click="json.useType = 1" :class="{ active: json.useType == 1 }">
                        <div class="checkBox">
                            <el-radio v-model="json.useType" :label="1" fill="#3370ff"></el-radio>
                        </div>
                        <div class="setting_type_detail">
                            <div class="title">{{ lang.semanticRetrieval }}</div>
                            <div class="detail">{{ lang.semanticRetrievalD }}</div>
                        </div>
                    </div>
                    <div class="setting_type_box" @click="json.useType = 2" :class="{ active: json.useType == 2 }">
                        <div class="checkBox">
                            <el-radio v-model="json.useType" :label="2" fill="#3370ff"></el-radio>
                        </div>
                        <div class="setting_type_detail">
                            <div class="title">{{ lang.fullTextSearch }}</div>
                            <div class="detail">{{lang.fullTextSearchD }}</div>
                        </div>
                    </div>
                    <div class="setting_type_box" @click="json.useType = 3" :class="{ active: json.useType == 3 }">
                        <div class="checkBox">
                            <el-radio v-model="json.useType" :label="3" fill="#3370ff"></el-radio>
                        </div>
                        <div class="setting_type_detail">
                            <div class="title">{{ lang.mixSearch }}</div>
                            <div class="detail">{{ lang.mixSearchD }}</div>
                            <div class="slider" v-show="json.useType == 3">
                                <div style="display: flex; justify-content: space-between;">
                                    <span>{{ lang.fullTextSearch }}: {{ 10 - json.mixSearchRatio }}</span>
                                    <span>{{ lang.semanticRetrieval }}: {{ json.mixSearchRatio }}</span>
                                </div>
                                <el-slider v-model="json.mixSearchRatio" :min="1" :max="9" :step="1" :label-step="1"></el-slider>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="setting_serach" v-if="searchType == 2">
                    <div class="setting_serach_box">
                        <span class="title">{{ lang.citations }}
                            <el-tooltip :content=lang.token placement="bottom" effect="dark" popper-class="maxWidth">
                                <!-- content to trigger tooltip here -->
                                <i class="tips"></i>
                            </el-tooltip>
                        </span>
                        <el-slider class="slider" v-model="json.tokens" :min="100" :max="20000" :step="1"
                            :vertical="false"></el-slider>
                        <el-input-number class="number" controls-position="right" v-model="json.tokens" size="small"
                            min="100" max="20000" step="1"></el-input-number>
                    </div>
                    <div class="setting_serach_box">
                        <span class="title">{{ lang.minRelevance }}
                            <el-tooltip :content=lang.refiltering placement="bottom" effect="dark"
                                popper-class="maxWidth">
                                <!-- content to trigger tooltip here -->
                                <i class="tips"></i>
                            </el-tooltip>
                        </span>
                        <el-slider class="slider" v-model="json.temperature" :min="0" :max="1" :step="0.01"
                            :vertical="false"></el-slider>
                        <el-input-number class="number" controls-position="right" v-model="json.temperature"
                            size="small" min="0" max="1" step="0.01"></el-input-number>
                    </div>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="moveBox = false">{{ lang.cancel }}</el-button>
                <el-button type="primary" @click="confirmSetting">{{ lang.confirm }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import MarkdownIt from "markdown-it";
export default {
    data() {
        return {
            isFocused: "",
            value: "",
            isLoading: false,
            isLoading2: false,
            ragArray: [],
            ragJson: {},
            moveBox: false,
            tokens: 1500,
            temperature: 0,
            json: {
                temperature: 0,
                tokens: 1500,
            },
            searchType: 1,
            useType: 1,
            mixSearchRatio: 5
        };
    },
    props: {
        userid: {
            type: String,
        },
        folderid: {
            type: String,
        },
    },
    computed: {
        MarkdownT() {
            return function (c) {
                let md = new MarkdownIt({
                    html: true, // 允许渲染 HTML
                    // linkify: true, // 自动将URL链接转化为可点击链接
                    typographer: true, // 启用排版规则（如替换 `"` 为 “）
                });
                return c ? md.render(c) : "";
            };
        },
        getUseType() {
            return function (e) {
                if (e == 1) {
                    return this.lang.semanticRetrieval;
                } else if (e == 2) {
                    return this.lang.fullTextSearch;
                } else if (e == 3) {
                    return this.lang.mixSearch;
                }
            };
        },
    },
    watch: {
        folderid(newValue, oldValue) {
            this.getRagData();

        }
    },
    methods: {
        testCheck() {
            this.isLoading = true;
            let mixSearchRatio = 1
            if (this.useType == 1) {
                mixSearchRatio = 10
            } else if (this.useType == 2) {
                mixSearchRatio = 0
            } else {
                mixSearchRatio = this.mixSearchRatio
            }

            // let params = {
            //     userid: this.userid,
            //     ids: this.folderid,
            //     query: this.value,
            //     type: 2,
            //     useType: this.useType,
            //     fullTextWeight: 10 - mixSearchRatio,
            //     semanticWeight: mixSearchRatio,
            //     limit: 10,
            //     temperature: this.temperature,
            //     tokens: this.tokens,
            // };
            let params = {
                userid: this.userid,
                documentids: "",
                folderids: this.folderid,
                query: this.value,
                useType: this.useType,
                fullTextWeight: 10 - mixSearchRatio,
                semanticWeight: mixSearchRatio,
                limit: 10,
                temperature: this.temperature,
                tokens: this.tokens,
            };
            this.ajax
                .post(this.$store.state.fileApi + "searchFolder3", [params])
                // .post(this.$store.state.fileApi + "searchFolder", [params])
                .then((res) => {
                    this.isLoading = false;
                    this.getRagData();
                    console.log(res);
                })
                .catch((err) => {
                    this.isLoading = false;
                    console.error(err);
                });
        },
        getRagData() {
            this.isLoading2 = true;
            let params = {
                userid: this.userid,
                fid: this.folderid,
            };
            this.ajax
                .post(this.$store.state.fileApi + "getRagData", [params])
                .then((res) => {
                    this.isLoading2 = false;
                    console.log(res);
                    this.ragArray = res.data[0];
                    for (var i = 0; i < this.ragArray.length; i++) {
                        this.ragArray[i].setting = JSON.parse(this.ragArray[i].setting);
                        this.ragArray[i].json = JSON.parse(this.ragArray[i].json);
                    }
                    if (this.ragArray.length) {
                        this.ragJson = this.ragArray[0];
                        this.ragJson.setting = this.ragJson.setting;
                        this.ragJson.json = this.ragJson.json;
                    } else {
                        this.ragJson = {};
                    }
                })
                .catch((err) => {
                    this.isLoading2 = false;
                    console.error(err);
                });
        },
        downloadFile(id, rname) {
            let params = {
                documentid: id,
                filename: rname,
            };
            // 使用axios发送GET请求下载文件
            this.ajax
                .post(`${this.$store.state.fileApi}downloadFile2`, [params], {
                    responseType: "blob",
                })
                .then((response) => {
                    const url = window.URL.createObjectURL(new Blob([response.data]));
                    const link = document.createElement("a");
                    link.href = url;
                    link.setAttribute("download", rname); // 设置下载文件名
                    document.body.appendChild(link);
                    link.click();
                    link.remove();
                    this.$message({
                        message: this.lang.downloadSuccess,
                        type: "success",
                    });
                })
                .catch((err) => {
                    this.$message.error(this.lang.downloadFail);
                    console.error(err);
                });
        },
        checkRag(item) {
            if (item.id == this.ragJson.id) {
                return;
            }
            this.ragJson = item;
        },
        deleteRag(id) {
            this.$confirm(this.lang.sureDeRecord, this.lang.prompt, {
                confirmButtonText: this.lang.confirm,
                cancelButtonText: this.lang.cancel,
                type: "warning",
            })
                .then(() => {
                    let params = [
                        {
                            id: id,
                        },
                    ];
                    this.ajax
                        .post(this.$store.state.fileApi + "delRagData", params)
                        .then((res) => {
                            this.$message({
                                message: this.lang.deleteSuccess,
                                type: "success",
                            });
                            this.getRagData();
                        })
                        .catch((err) => {
                            this.$message.error(this.lang.deleteFail);
                            console.error(err);
                        });
                })
                .catch(() => { });
        },
        openSetting() {
            this.json = JSON.parse(JSON.stringify({
                tokens: this.tokens,
                temperature: this.temperature,
                useType: this.useType,
                mixSearchRatio: 5
            }));
            this.searchType = 1
            this.moveBox = true;
        },
        confirmSetting() {
            this.tokens = this.json.tokens
            this.temperature = this.json.temperature
            this.useType = this.json.useType
            this.mixSearchRatio = this.json.mixSearchRatio
            this.moveBox = false;
        }
    },
    mounted() {
        this.getRagData();
    },
};
</script>

<style scoped>
.testBox {
    display: flex;
    gap: 20px;
    height: 100%;
    overflow: hidden;
    padding: 10px 24px;
}

.testBox .test_right {
    width: 400px;
    min-width: 400px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.testBox .test_right .test_input_box {
    position: relative;
    display: flex;
    flex-direction: column;
    /* gap: 5px; */
    padding: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 2px solid #94b5ff;
    margin: 2.4px;
    transition: all .3s;
}

.testBox .test_right .test_input_box>.setting {
    margin-left: auto;
    display: flex;
    align-items: center;
    /* color: #667085;
    font-size: 14px; */
}

.test_input_box.focus {
    border-color: #487fff !important;
    box-shadow: rgba(51, 112, 255, 0.15) 0px 0px 0px 2.4px;
}

.testBox .test_right .test_input_box>.setting i {
    display: block;
    width: 18px;
    height: 18px;
    cursor: pointer;
    background-image: url(../../../../assets/icon/testC/test_setting.svg);
    background-size: 100% 100%;
}

.testBox .test_right .test_input_box .test_input {}

.testBox .test_right .test_input_box .test_input>>>.el-textarea__inner {
    border: none;
    padding: 5px;
}

.testBox .test_right .test_input_box>.btn {
    margin-left: auto;
}

.testBox .test_right .test_input_box>>>.el-button {
    height: 30px !important;
    font-size: 12.8px;
    background-color: #3370ff;
    border-radius: 6px;
    /* margin-left: 12px; */
    border: none;
}

.testBox .test_right .test_input_box>>>.el-button--primary:focus,
.f_box_top_right>>>.el-button--primary:hover {
    filter: brightness(120%);
}

.testBox .test_right .test_history {
    height: 100%;
    overflow: auto;
}

.testBox .test_right .test_history>.title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 16px;
}

.testBox .test_right .test_history>.title:before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-image: url(../../../../assets/icon/testC/test_history.svg);
    background-size: 100% 100%;
}

.testBox .test_right .test_history>.test_history_box {
    display: flex;
    font-size: 14px;
    align-items: center;
    padding: 5px 12px;
    box-sizing: border-box;
    width: 100%;
    color: #667085;
    border-radius: 8px;
    border: 1px solid #e8ebf0;
    cursor: pointer;
}

.test_history_box.acitve {
    background: #f0f4ff;
}

.testBox .test_right .test_history>.test_history_box+.test_history_box {
    margin-top: 8px;
}

.testBox .test_right .test_history>.test_history_box:hover {
    border: 1px solid #94b5ff;
}

.testBox .test_right .test_history>.test_history_box:hover .time {
    display: none;
}

.testBox .test_right .test_history>.test_history_box:hover .del {
    display: block;
}

.testBox .test_right .test_history>.test_history_box>.typeIcon {
    min-width: fit-content;
}

.testBox .test_right .test_history>.test_history_box>.query {
    margin: 5px;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
}

.testBox .test_right .test_history>.test_history_box>.time {
    margin-left: auto;
    min-width: fit-content;
}

.testBox .test_right .test_history>.test_history_box>.del {
    margin-left: auto;
    cursor: pointer;
    width: 14px;
    height: 14px;
    background-image: url("../../../../assets/icon/testC/del.svg");
    background-size: 100% 100%;
    display: none;
}

.testBox .test_left {
    width: 100%;
    flex: 1;
    height: 100%;
    overflow: auto;
}

.testBox .test_left .test_check {}

.testBox .test_left .test_check .title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
}

.testBox .test_left .test_check .title:before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-image: url(../../../../assets/icon/testC/test_can.svg);
    background-size: 100% 100%;
}

.can_box {
    width: 100%;
    overflow: auto;
    background: #f0f4ff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.can_one {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* height: 60px; */
}

.one_box {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    min-width: fit-content;
}

.one_box+.one_box {
    margin-left: 20px;
}

.one_box>span:nth-child(1) {
    color: #4a5568;
    font-weight: bold;
}

.one_box>span:nth-child(2) {
    font-weight: 400;
    color: #1d2532;
    word-break: break-all;
    margin-top: 10px;
}

.testBox .test_left .test_result {
    margin-top: 10px;
}

.testBox .test_left .test_result .title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
}

.testBox .test_left .test_result .title:before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-image: url(../../../../assets/icon/testC/test_result.svg);
    background-size: 100% 100%;
}

.typeIcon {
    display: flex;
    align-items: center;
}

.type1:before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background-image: url(../../../../assets/icon/testC/m_icon.svg);
    background-size: 100% 100%;
}

.type2:before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background-image: url(../../../../assets/icon/testC/m_icon2.svg);
    background-size: 100% 100%;
}

.type3:before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background-image: url(../../../../assets/icon/testC/m_icon3.svg);
    background-size: 100% 100%;
}

.result_box {
    width: 100%;
}

.result_box>.result {
    background: #f4f4f7;
    border-radius: 10px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.result_box>.result+.result {
    margin-top: 10px;
}

.result_box>.result .result_score {
    font-size: 14px;
    width: fit-content;
    border-radius: 7px;
    padding: 5px 12px;
    color: #2b5fd9;
    background: #f0f4ff;
    border: 1px solid #c5d7ff;
    margin-bottom: 10px;
}

.result_file {
    font-size: 14px;
    margin-top: 10px;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    width: fit-content;
}

.customC {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    flex-direction: column;
}

.canEditTit {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.canEditTit img {
    width: 25px;
    margin-right: 10px;
}

.canEditCss>>>.el-dialog__body {
    padding: 10px 20px;
}

.canEditCss>>>.el-dialog__header {
    background-color: rgb(251, 251, 252);
    border-radius: 8px 8px 0 0;
    font-family: Pingfang;
    border-bottom: 0.5px rgb(244, 246, 248) solid;
}

.canEditCss>>>.el-dialog {
    border-radius: 8px;
    width: 600px !important;
}

.setting_nav {
    display: flex;
    /* border-bottom: 1px solid #E2E8F0; */
    height: 30px;
    margin-bottom: 20px;
    /* justify-content: flex-start; */
}

.setting_nav_box {
    display: flex;
    height: 100%;
    width: calc(100% / 2);
    align-items: center;
    /* flex: 1; */
    color: #485264;
    justify-content: center;
    font-size: 16px;
    border-bottom: 1px solid #E2E8F0;
    cursor: pointer;
}

.setting_nav_box::before {
    content: '';
    background-size: 100%;
    margin-right: 5px;
    width: 16px;
    height: 16px;
    display: block;
}

.setting_nav_box:hover,
.setting_nav_box.active {
    color: #3370ff;
    border-color: #3370ff;
}

.searchIcon::before {
    background-image: url(../../../../assets/icon/testC/search.svg);
}

.setting_nav_box:hover.searchIcon::before,
.setting_nav_box.active.searchIcon::before {
    background-image: url(../../../../assets/icon/testC/search2.svg);
}

.settingIcon::before {
    background-image: url(../../../../assets/icon/testC/setting.svg);
}

.setting_nav_box:hover.settingIcon::before,
.setting_nav_box.active.settingIcon::before {
    background-image: url(../../../../assets/icon/testC/setting2.svg);
}


.setting_serach {
    width: 100%;
}

.setting_serach_box {
    width: 100%;
    display: flex;
    align-items: center;
    color: #111824;
    gap: 15px;
}

.setting_serach_box .title {
    display: flex;
    flex: 0 0 140px;
    -webkit-box-align: center;
    align-items: center;
}

.setting_serach_box .slider {
    flex: 1;
}

.setting_serach_box .slider>>>.el-slider__bar {
    background: unset;
}

.setting_serach_box .slider>>>.el-slider__button {
    border-color: #3370ff;
}

.setting_serach_box .number {
    flex: 0 0 120px;
}

.setting_serach_box+.setting_serach_box {
    margin-top: 30px;
}

.tips {
    display: block;
    background-image: url(../../../../assets/icon/testC/test_tips.svg);
    background-size: 100% 100%;
    height: 14px;
    width: 14px;
    margin-left: 5px;
}

@media screen and (max-width: 1300px) {
    .testBox {
        flex-direction: column;
    }

    .testBox .test_right {
        flex-direction: row;
        width: 100%;
        height: 250px;
    }

    .testBox .test_right .test_input_box {
        flex: 0 0 250px;
    }

    .testBox .test_right .test_history {
        flex: 1;
    }
}

.setting_type_box>>>.el-radio__input.is-checked .el-radio__inner {
    border-color: #3370ff;
    background: #3370ff;
}

.setting_type_box>>>.el-radio__label {
    display: none;
}

.setting_type_box .slider {
    margin-top: 15px;
}

.setting_type_box .slider>>>.el-slider__bar {
    background: #3370ff;
}

.setting_type_box .slider>>>.el-slider__runway {
    background: #f9518e;
}

.setting_type_box .slider>>>.el-slider__button {
    border-color: #3370ff;
}

.setting_type_box {
    display: flex;
    background: #f7f8fa;
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #eaedf1;
    border-radius: 5px;
    cursor: pointer;
    transition: all .3s;
}

.setting_type_box.active,
.setting_type_box:hover {
    border: 1px solid #3370ff;
}

.setting_type_box+.setting_type_box {
    margin-top: 15px;
}

.setting_type_box .checkBox {
    margin-right: 12px;
}

.setting_type_box .setting_type_detail {}

.setting_type_box .setting_type_detail>.title {
    color: #111824;
    margin-bottom: 3px;
}

.setting_type_box .setting_type_detail>.detail {
    color: #667085;
    word-break: break-word;
}
</style>

<style>
.maxWidth {
    max-width: 240px;
    word-break: break-all;
}
</style>