| | |
| | | <!-- <span class="title">{{ agentTitle }}</span>--> |
| | | |
| | | <a-popover position="bottom" trigger="click"> |
| | | <a-button border |
| | | <a-button border> |
| | | <span |
| | | style=" |
| | | width: 100px; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | " |
| | | >{{ from.name }}</span |
| | | > |
| | | <span style=" |
| | | width: 100px; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | ">{{ from.name }}</span> |
| | | <icon-down style="margin-left: 4px" /> |
| | | </a-button> |
| | | <template #content> |
| | |
| | | ref="scrollbar" |
| | | id="home" |
| | | class="chat-list" |
| | | style=" |
| | | width: 80%; |
| | | overflow: auto; |
| | | margin: 0px auto 20px; |
| | | " |
| | | style="width: 80%; overflow: auto; margin: 0px auto 20px" |
| | | :style="{ |
| | | height:uploaditemList.length > 0 ? 'calc(100vh - 480px)' : 'calc(100vh - 380px)' |
| | | height: |
| | | uploaditemList.length > 0 |
| | | ? 'calc(100vh - 480px)' |
| | | : 'calc(100vh - 380px)', |
| | | }" |
| | | > |
| | | <div |
| | |
| | | /> |
| | | </template> |
| | | <template #content> |
| | | <div :class="{ chartUserText: theme === 'light' }" |
| | | >{{ sessionDetail.content }} |
| | | <div :class="{ chartUserText: theme === 'light' }"> |
| | | {{ sessionDetail.content }} |
| | | <!-- <a-input |
| | | :style="{ width: '100%' }" |
| | | v-model="sessionDetail.content" |
| | | v-if="isEdit" |
| | | /> |
| | | |
| | | <div v-else> |
| | | {{ sessionDetail.content }} |
| | | </div> --> |
| | | </div> |
| | | <!-- <div v-if="!isEdit"> |
| | | <span |
| | | class="action" |
| | | v-if="index != 0" |
| | | @click="copy(sessionDetail.content)" |
| | | > |
| | | <icon-copy /> 复制 |
| | | </span> |
| | | <span class="action" @click="edit()"> |
| | | <icon-pen /> 编辑 |
| | | </span> |
| | | </div> |
| | | <a-space v-else> |
| | | <a-button type="outline" size="mini" @click="cancelEdit(1)" |
| | | >取消</a-button |
| | | > |
| | | <a-button type="primary" size="mini" @click="cancelEdit(2)" |
| | | >确定</a-button |
| | | > |
| | | </a-space> --> |
| | | </template> |
| | | </a-comment> |
| | | <a-comment v-else-if="sessionDetail.role === 'assistant'"> |
| | | <template #avatar> |
| | | <img |
| | | class="icon-user-jpg" |
| | | src="../../assets/images/icon-chart.png" |
| | | src="../../assets/images/icon-picture.png" |
| | | alt="本地图片" |
| | | /> |
| | | </template> |
| | | <template #content> |
| | | <!-- <a-card :class="{ chatItemAnswer: theme === 'light' }">--> |
| | | <!-- <div--> |
| | | <!-- :class="{ light: theme === 'light' }"--> |
| | | <!-- v-html="sessionDetail.content.replace(/\n/g, '<br/>')"--> |
| | | <!-- >--> |
| | | <!-- </div>--> |
| | | <!-- </a-card>--> |
| | | <a-textarea |
| | | readonly |
| | | auto-size |
| | | v-model="sessionDetail.content" |
| | | :class="{ chatItemAnswer: theme === 'light' }" |
| | | :style="{ |
| | | backgroundColor: |
| | | theme === 'light' ? '#ffffff' : '#000000', |
| | | }" |
| | | style="border: none" |
| | | > |
| | | </a-textarea> |
| | | <a-card v-if="isExistTip(sessionDetail.content)"> |
| | | <div |
| | | :class="{ chatItemAnswer: theme === 'light' }" |
| | | :style="{ |
| | | backgroundColor: |
| | | theme === 'light' ? '#ffffff' : '#000000', |
| | | }" |
| | | style="border: none" |
| | | v-for="(breakContent, breakIndex) in breakLine( |
| | | sessionDetail.content |
| | | )" |
| | | > |
| | | <div |
| | | :class="{ chatItemAnswer: theme === 'light' }" |
| | | :style="{ |
| | | backgroundColor: |
| | | theme === 'light' ? '#ffffff' : '#000000', |
| | | }" |
| | | style="border: none" |
| | | v-if="isExistTip(breakContent)" |
| | | > |
| | | <div |
| | | :class="{ chatItemAnswer: theme === 'light' }" |
| | | :style="{ |
| | | backgroundColor: |
| | | theme === 'light' ? '#ffffff' : '#000000', |
| | | }" |
| | | style="border: none" |
| | | v-for="(item, tipIndex) in tipMatch(breakContent)" |
| | | > |
| | | <span v-if="tipIndex == 0"> |
| | | {{ breakContent.substring(0, item.index) }} |
| | | <a-tooltip |
| | | background-color="#3491FA" |
| | | :content=" |
| | | getTipContent(messagenList.reference, index) |
| | | " |
| | | > |
| | | <img |
| | | style="width: 20px; height: 20px" |
| | | :src="tipImage" |
| | | /> |
| | | </a-tooltip> |
| | | </span> |
| | | <span v-else-if="tipIndex == item.len - 1"> |
| | | {{ |
| | | breakContent.substring( |
| | | item.preIndex + item.item.length, |
| | | item.index |
| | | ) |
| | | }} |
| | | <a-tooltip |
| | | background-color="#3491FA" |
| | | :content=" |
| | | getTipContent(messagenList.reference, index) |
| | | " |
| | | > |
| | | <img |
| | | style="width: 20px; height: 20px" |
| | | :src="tipImage" |
| | | /> |
| | | </a-tooltip> |
| | | {{ breakContent.substring(item.index + 5) }} |
| | | </span> |
| | | <span v-else> |
| | | {{ |
| | | breakContent.substring( |
| | | item.preIndex + item.item.length, |
| | | item.index |
| | | ) |
| | | }} |
| | | <a-tooltip |
| | | background-color="#3491FA" |
| | | :content=" |
| | | getTipContent(messagenList.reference, index) |
| | | " |
| | | > |
| | | <img |
| | | style="width: 20px; height: 20px" |
| | | :src="tipImage" |
| | | /> |
| | | </a-tooltip> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div v-else> |
| | | {{ breakContent }} |
| | | </div> |
| | | </div> |
| | | </a-card> |
| | | <a-card v-else> |
| | | <a-textarea |
| | | readonly |
| | | auto-size |
| | | :default-value="chartText(sessionDetail.content)" |
| | | :class="{ chatItemAnswer: theme === 'light' }" |
| | | :style="{ |
| | | backgroundColor: |
| | | theme === 'light' ? '#ffffff' : '#000000', |
| | | }" |
| | | style="border: none" |
| | | > |
| | | </a-textarea> |
| | | </a-card> |
| | | <!-- <div class="prompt"> |
| | | <ul> |
| | | <li class="prompt-item" @click="copyText('43234')"> |
| | | <span> |
| | | 344343klsdjkjksdjkjksdjk就开始大家看数据库登记卡受打击凯撒登记卡受打击凯撒登记卡受打击凯撒的43</span |
| | | > |
| | | <span style="margin-left: 20px"> |
| | | <icon-right /> |
| | | </span> |
| | | </li> |
| | | </ul> |
| | | </div> --> |
| | | </template> |
| | | <!-- <div>{{ sessionDetail.role === 'assistant' }}</div> --> |
| | | <template #actions> |
| | |
| | | > |
| | | <icon-refresh /> 重新生成 |
| | | </span> |
| | | <!-- <span class="action"><icon-to-bottom />下载 </span> --> |
| | | </template> |
| | | </a-comment> |
| | | <a-comment v-else-if="sessionDetail.role === 'last'"> |
| | | <template #avatar> |
| | | <img |
| | | class="icon-user-jpg" |
| | | src="../../assets/images/icon-chart.png" |
| | | src="../../assets/images/icon-picture.png" |
| | | alt="本地图片" |
| | | /> |
| | | </template> |
| | |
| | | v-model="inputMsg" |
| | | @keydown.shift.enter="handleShiftEnter" |
| | | @keydown.enter="sendMessage" |
| | | :placeholder="uploaditemList.length>0?'整理这些文件的核心内容':'输入您想了解的内容,Shift+Enter换行,Enter发送'" |
| | | :placeholder=" |
| | | uploaditemList.length > 0 |
| | | ? '整理这些文件的核心内容' |
| | | : '输入您想了解的内容,Shift+Enter换行,Enter发送' |
| | | " |
| | | allow-clear |
| | | show-word-limit |
| | | :disabled="chatDis" |
| | |
| | | maxRows: 5, |
| | | }" |
| | | /> |
| | | <div style="width: 100%;display: flex;justify-content: space-between"> |
| | | <updataFile ref="fileInput" :sessionId="activeSessionId" @selectFileCallback="selectFileCallback"></updataFile> |
| | | <div |
| | | style=" |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | " |
| | | class="uploadFileDis" |
| | | > |
| | | <updataFile |
| | | ref="fileInput" |
| | | :sessionId="activeSessionId" |
| | | @selectFileCallback="selectFileCallback" |
| | | ></updataFile> |
| | | <!-- <uploadFile |
| | | ref="fileInput" |
| | | :sessionId="activeSessionId" |
| | | @selectFileCallback="selectFileCallback" |
| | | ></uploadFile> --> |
| | | <a-button |
| | | :disabled="chatDis" |
| | | @click="sentClick" |
| | |
| | | class="files" |
| | | v-for="(item, index) in uploaditemList" |
| | | :key="index" |
| | | style="position: relative; width: 200px; margin-top: 10px;margin-right: 20px" |
| | | style=" |
| | | position: relative; |
| | | width: 200px; |
| | | margin-top: 10px; |
| | | margin-right: 20px; |
| | | " |
| | | > |
| | | <a-comment |
| | | :author="item.name" |
| | |
| | | </template> |
| | | </a-spin> |
| | | <!-- <a-button type="text" :loading="onFileSelectedLoading" v-if="onFileSelectedLoading"></a-button>--> |
| | | <!-- <a-avatar v-if="!onFileSelectedLoading">--> |
| | | <!-- <icon-file style="color: #0960bd" />--> |
| | | <!-- </a-avatar>--> |
| | | <img :src="getIconByExtension(item.name)" alt="" /> |
| | | <!-- <a-avatar v-if="!onFileSelectedLoading">--> |
| | | <!-- <icon-file style="color: #0960bd" />--> |
| | | <!-- </a-avatar>--> |
| | | <img :src="getIconByExtension(item.name)" alt="" /> |
| | | </template> |
| | | </a-comment> |
| | | <icon-close-circle-fill |
| | |
| | | ></smartAi> |
| | | </div> |
| | | </a-col> |
| | | <a-col :span="23" v-show="agentType == '5'"> |
| | | <div class="center"> |
| | | <seniorAgentSession :modalObj="agentObj"></seniorAgentSession> |
| | | </div> |
| | | </a-col> |
| | | </a-row> |
| | | <a-modal title=" " v-model:visible="fileVisible" :footer="false" fullscreen> |
| | | <!-- <docx previewSrc="http://192.168.20.116:1080/v1/document/get/405c3efa4d8c11ef97560242ac120006"></docx>--> |
| | | <docx v-if="documenttype == 'docx'" :previewSrc="previewSrc"></docx> |
| | | <excel v-if="documenttype == 'excel'" :previewSrc="previewSrc"></excel> |
| | | <txtPdf v-if="documenttype == 'txtPdf'" :previewSrc="previewSrc"></txtPdf> |
| | | </a-modal> |
| | | <a-modal |
| | | v-model:visible="visible" |
| | | title="修改名称" |
| | |
| | | :footer="false" |
| | | title-align="start" |
| | | > |
| | | <a-form |
| | | ref="formRef" |
| | | :rules="rules" |
| | | :model="from" |
| | | @submit="handleSubmit" |
| | | > |
| | | <a-form ref="formRef" :rules="rules" :model="from" @submit="handleSubmit"> |
| | | <a-form-item field="name" label="名称"> |
| | | <a-input v-model="from.name" placeholder="请输入名称" /> |
| | | </a-form-item> |
| | |
| | | </div> |
| | | </template> |
| | | <script setup lang="ts"> |
| | | import { useAppStore, useUserStore } from '@/store'; |
| | | import { useAppStore, userModelState, useUserStore } from '@/store'; |
| | | import { |
| | | computed, |
| | | nextTick, |
| | |
| | | import chatMenu from '@/views/sessionManager/components/chatMenu.vue'; |
| | | import AddSession from '@/views/sessionManager/components/addSession.vue'; |
| | | import agentSession from '@/views/sessionManager/components/agentSession.vue'; |
| | | import seniorAgentSession from '@/views/sessionManager/components/seniorAgentSession.vue'; |
| | | import historySession from '@/views/sessionManager/components/historySession.vue'; |
| | | import smartAi from '@/views/sessionManager/components/smartAi.vue'; |
| | | import updataFile from '@/views/sessionManager/components/updataFile.vue'; |
| | | |
| | | import EventBus from '@/utils/EventBus'; |
| | | import { |
| | | addSessionApi, |
| | |
| | | import pdfImg3 from '@/assets/session/execl.png'; |
| | | import pdfImg4 from '@/assets/session/icon-txt.png'; |
| | | import pdfImg5 from '@/assets/session/txt.png'; |
| | | import tipImage from '@/assets/session/tip.png'; |
| | | |
| | | import docx from '@/views/dmx/knowledgeLib/components/docx.vue'; |
| | | import excel from '@/views/dmx/knowledgeLib/components/excel.vue'; |
| | | import txtPdf from '@/views/dmx/knowledgeLib/components/txtPdf.vue'; |
| | | import { is } from 'immutable'; |
| | | import uploadFile from './components/uploadFile.vue'; |
| | | |
| | | // const url = ref('../../assets/session/PDF.png'); |
| | | |
| | | const sessionDetailList = ref([]); //根据会话id出来的会话详情 |
| | | const sessionDetailList = ref([ |
| | | { |
| | | content: '你好! 我是你的助理,有什么可以帮到你的吗?', |
| | | role: 'assistant', |
| | | }, |
| | | ]); //根据会话id出来的会话详情 |
| | | const messagenList = ref({}); |
| | | const sessionList = ref([]); //会话列表 |
| | | const modalObj = reactive({ add: false }); |
| | |
| | | const agentTitle = ref('未命名会话'); |
| | | let chatObj = reactive({}); |
| | | let from = reactive({ |
| | | name:'未命名会话', |
| | | name: '未命名会话', |
| | | }); |
| | | const isStopChat = ref(false); |
| | | const currIndex = ref(0); |
| | |
| | | const uploadRef = ref(); |
| | | const files = ref([]); |
| | | const file = ref(''); |
| | | const fileInput = ref(null); |
| | | const fileInput = ref(); |
| | | const chatDataMeg = reactive({}); |
| | | const visible = ref(false); |
| | | const fileVisible = ref(false); |
| | | let toStop = false; |
| | | let documenttype = ref('docx'); |
| | | let previewSrc = ref(''); |
| | | |
| | | const modelStore = userModelState(); |
| | | const httpUrl = modelStore.hrefUrl; |
| | | |
| | | const rules = { |
| | | name: [ |
| | |
| | | } |
| | | }; |
| | | let dataItem = []; |
| | | const getTxt = (data, role, message, index) => { |
| | | const isExistTip = (message: string): boolean => { |
| | | if (/##[0-9]\$\$/.test(message)) { |
| | | return true; |
| | | } else { |
| | | return false; |
| | | } |
| | | }; |
| | | |
| | | const breakLine = (message: string): string[] => { |
| | | //按\n分割字符串 |
| | | let arr = message.split('\n'); |
| | | return arr; |
| | | }; |
| | | |
| | | const chartText = (message: string): string => { |
| | | //去除所有的#和** |
| | | let arr = message.replace(/\*\*|\#\#\#/g, ''); |
| | | return arr; |
| | | }; |
| | | |
| | | const tipMatch = (msg: string): any[] => { |
| | | //match session.content中的##[0-9]$$的索引 |
| | | |
| | | let indexs: any[] = []; |
| | | let preTip = 0; |
| | | let matches = msg.match(/##([0-9]+)\$\$/g); |
| | | matches?.map((item) => { |
| | | let i = msg.indexOf(item); |
| | | indexs.push({ |
| | | index: i, |
| | | item: item, |
| | | preIndex: preTip, |
| | | len: matches.length, |
| | | }); |
| | | preTip = i; |
| | | }); |
| | | return indexs; |
| | | }; |
| | | |
| | | const getTxt = (data, role, message, index) => { |
| | | if (isExistTip(message)) { |
| | | if (role == 'assistant' && index) { |
| | | let i = index / 2 - 1 > 0 ? index / 2 - 1 : 0; |
| | | dataItem = data[i].doc_aggs; |
| | |
| | | return dataItem; |
| | | }; |
| | | |
| | | const clickHref = (item) => { |
| | | // return Message.warning('暂无法查看'); |
| | | // window.open(`/api/v1/document/get/${item.doc_id}`, '_blank'); |
| | | downloadFile({ |
| | | url: `/api/v1/document/get/${item.doc_id}`, |
| | | filename: item.doc_name, |
| | | const getTipContent = (data, index): string => { |
| | | let maxSimilarityContent = ''; |
| | | let i = index / 2 - 1 > 0 ? index / 2 - 1 : 0; |
| | | let maxSimilarity = 0; |
| | | data[i].chunks.forEach((chunk) => { |
| | | if (chunk.similarity > maxSimilarity) { |
| | | maxSimilarity = chunk.similarity; |
| | | maxSimilarityContent = chunk.content_with_weight; |
| | | } |
| | | }); |
| | | return maxSimilarityContent; |
| | | }; |
| | | |
| | | const downloadFile = ({ |
| | | url, |
| | | filename, |
| | | target, |
| | | }: { |
| | | const clickHref = async (item) => { |
| | | documenttype.value = item.doc_name.split('.').pop(); |
| | | previewSrc.value = httpUrl + `/api/v1/document/get/${item.doc_id}`; |
| | | fileVisible.value = true; |
| | | }; |
| | | |
| | | const downloadFile = ({ |
| | | url, |
| | | filename, |
| | | target, |
| | | }: { |
| | | url: string; |
| | | filename?: string; |
| | | target?: string; |
| | |
| | | }; |
| | | |
| | | const selectFileCallback = (data) => { |
| | | console.log(data, 'selectFileCallback'); |
| | | uploaditemList.value = data; |
| | | // debugger; |
| | | // console.log(data, 'selectFileCallback'); |
| | | uploaditemList.value = [...uploaditemList.value, ...data]; |
| | | }; |
| | | |
| | | let onFileSelectedLoading = ref(false); |
| | | |
| | | const deleteFile = (item) => { |
| | | console.log(uploaditemList.value); |
| | | uploaditemList.value.splice(item.index,1); |
| | | uploaditemList.value.splice(item.index, 1); |
| | | }; |
| | | |
| | | const { toClipboard } = useClipboard(); |
| | |
| | | await toClipboard(text); //参数为要复制的文本 |
| | | }; |
| | | |
| | | |
| | | const isEdit = ref(false); |
| | | const edit = () => { |
| | | isEdit.value = !isEdit.value; |
| | | }; |
| | | const cancelEdit = (val) => { |
| | | if (val == 1) { |
| | | isEdit.value = !isEdit.value; |
| | | } else { |
| | | //编辑保存 |
| | | isEdit.value = !isEdit.value; |
| | | } |
| | | }; |
| | | |
| | | const DialogList = async () => { |
| | | const { code, data } = await getDialogListApi(); |
| | |
| | | // 发送 |
| | | const sentClick = () => { |
| | | sendMessage('click'); |
| | | uploaditemList.value = []; |
| | | }; |
| | | // 重新生成 |
| | | const reGenerate = () => { |
| | |
| | | event.preventDefault(); // 阻止默认行为,即不换行 |
| | | } |
| | | |
| | | // if (!activeSessionId.value) { |
| | | // Message.warning("请选择会话"); |
| | | // chatDis.value = false; |
| | | // loading.value = false; |
| | | // return; |
| | | // } |
| | | |
| | | // if (displayedText.value) { |
| | | // querySessionList(); |
| | | // } |
| | | |
| | | if (inputMsg.value) { |
| | | startChat(inputMsg.value); |
| | | |
| | | inputMsg.value = ''; |
| | | if (!activeSessionId.value) { |
| | | //新建会话 |
| | | // 如果有会话id |
| | | console.log(inputMsg.value, '新建会话名称'); |
| | | const res = await addSessionApi({ |
| | | dialog_id: '', |
| | | conversation_desc: inputMsg.value, |
| | | }); |
| | | // console.log(res, "res"); |
| | | if (res.code == 200) { |
| | | // console.log(res.data.conversation_id); |
| | | activeSessionId.value = res.data?.conversation_id; |
| | | const { code, data } = await getSessionDetailsApi( |
| | | res.data?.conversation_id |
| | | ); |
| | | if (code === 200) { |
| | | console.log(data, '新建会话详情'); |
| | | Object.assign(chatObj, data); |
| | | startChat(inputMsg.value); |
| | | inputMsg.value = ''; |
| | | } |
| | | } else { |
| | | Message.error('创建会话失败,请重试'); |
| | | } |
| | | } else { |
| | | startChat(inputMsg.value); |
| | | inputMsg.value = ''; |
| | | } |
| | | } else { |
| | | Message.warning('消息不能为空'); |
| | | } |
| | |
| | | sessionDetailList.value = sessionDetailList.value |
| | | .splice(0, sessionDetailList.value.length - 2) |
| | | .concat(lastArr); |
| | | |
| | | console.log(sessionDetailList.value, 'sessionDetailList2'); |
| | | console.log(chatObj, 'chatObj对象'); |
| | | chatObj.message = chatObj.message.concat(lastArr); |
| | |
| | | querySessionList(); |
| | | }; |
| | | onBeforeMount(() => { |
| | | // DialogList(); |
| | | //新建会话 |
| | | createSession(''); |
| | | activeSessionId.value = ''; |
| | | }); |
| | | onMounted(() => { |
| | | let container = document.getElementById('container'); |
| | | container.addEventListener('click', () => { |
| | | fileInput.value.cancel(); |
| | | |
| | | }) |
| | | }); |
| | | EventBus.on('newChat', () => { |
| | | agentType.value = '1'; |
| | | createSession(''); |
| | | // createSession(''); |
| | | activeSessionId.value = ''; |
| | | sessionDetailList.value = [ |
| | | { |
| | | content: '你好! 我是你的助理,有什么可以帮到你的吗?', |
| | | role: 'assistant', |
| | | }, |
| | | ]; |
| | | from.name = '未命名会话'; |
| | | }); |
| | | }); |
| | | onBeforeUnmount(() => { |
| | |
| | | font-size: 12px; |
| | | padding-left: 10px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | // .uploadFileDis { |
| | | // :deep(.arco-upload-list-type-text) { |
| | | // display: none; |
| | | // } |
| | | // } |
| | | .prompt { |
| | | ul { |
| | | margin: 0; |
| | | padding: 0; |
| | | display: flex; |
| | | } |
| | | ul > li { |
| | | list-style-type: none; |
| | | } |
| | | .prompt-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | background-color: #fff; |
| | | cursor: pointer; |
| | | border-radius: 8px; |
| | | padding: 10px; |
| | | border: #e5e5e5; |
| | | &:hover { |
| | | background-color: #eee; |
| | | } |
| | | } |
| | | } |
| | |
| | | color: #333; |
| | | margin-top: 4px; |
| | | } |
| | | :deep(.arco-card-body) { |
| | | padding: 0; |
| | | border-radius: 10px; |
| | | } |
| | | :deep(.arco-textarea) { |
| | | padding-top: 10px !important; |
| | | } |
| | | :deep(.arco-comment-inner-content) { |
| | | border-radius: 10px; |
| | | } |
| | | :deep(.arco-card-bordered) { |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | .icon-user-jpg { |
| | | border: 1px solid #d9d9d9; |
| | |
| | | :deep(.arco-upload-list-item-operation) { |
| | | //display: none; |
| | | } |
| | | .uploadFileList{ |
| | | .uploadFileList { |
| | | width: 100%; |
| | | max-height: 140px; |
| | | overflow-y: auto; |