From 3b9f5d064379a7f56426c3eb2f49405728c58e36 Mon Sep 17 00:00:00 2001 From: zhangxiao <898441624@qq.com> Date: 星期一, 19 八月 2024 10:05:38 +0800 Subject: [PATCH] fix: 修改bug --- src/views/sessionManager/index.vue | 668 +++++++++++++++++++++++++++++++------------------------ 1 files changed, 377 insertions(+), 291 deletions(-) diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue index d1f4042..9ef1ed5 100644 --- a/src/views/sessionManager/index.vue +++ b/src/views/sessionManager/index.vue @@ -1,162 +1,41 @@ <template> <div class="container"> - <AddSession - :modalObj="modalObj" - @addSession="addSession" - :dialogId="dialogId" - ></AddSession> + <!-- <AddSession--> + <!-- :modalObj="modalObj"--> + <!-- @addSession="addSession"--> + <!-- :dialogId="dialogId"--> + <!-- ></AddSession>--> <!-- <a-card class="top-title">AI浼氳瘽璁板綍</a-card>--> - <a-row :gutter="[5, 5]" style="margin-top: 3px;"> - <!-- <a-col :span="6">--> - <!-- <a-card class="left-select">--> - <!-- <a-select--> - <!-- v-model="selectValue"--> - <!-- :options="dialogs"--> - <!-- :field-names="fieldNames"--> - <!-- @change="dialogChange"--> - <!-- >--> - <!-- </a-select>--> - <!-- </a-card>--> - <!-- <a-card style="height: 50px">--> - <!-- <template #cover>--> - <!-- <div style="display: flex; justify-content: space-between">--> - <!-- <a-button--> - <!-- type="primary"--> - <!-- shape="round"--> - <!-- class="card-btn-1"--> - <!-- @click="modalObj.add = true"--> - <!-- >--> - <!-- +鏂板缓浼氳瘽--> - <!-- </a-button>--> - <!-- <!– <a-button type="text" shape="circle" class="card-btn-2">--> - <!-- <icon-search />--> - <!-- </a-button> –>--> - <!-- </div>--> - <!-- </template>--> - <!-- </a-card>--> - <!-- <a-card class="left">--> - <!-- <a-scrollbar--> - <!-- class="left-list"--> - <!-- style="--> - <!-- height: calc(100vh - 350px);--> - <!-- overflow-y: auto;--> - <!-- overflow-x: hidden;--> - <!-- "--> - <!-- >--> - <!-- <div--> - <!-- class="item left-list-item"--> - <!-- v-for="session in sessionList"--> - <!-- @click="querySessionDetail(session)"--> - <!-- :class="{ isLeftActive: activeSessionId === session.id }"--> - <!-- >--> - <!-- <div class="text" :class="{ time: theme === 'dark' }"--> - <!-- >{{ session.name }}--> - <!-- </div>--> - <!-- <div class="time"--> - <!-- >{{--> - <!-- moment(new Date(session.create_time)).format(--> - <!-- 'YYYY-MM-DD HH:mm:ss'--> - <!-- )--> - <!-- }}--> - <!-- </div>--> - <!-- </div>--> - <!-- </a-scrollbar>--> - <!-- </a-card>--> - <!-- </a-col>--> + <a-row :gutter="[5, 5]" style="margin-top: 3px"> <a-col :span="1"> - <chatMenu></chatMenu> + <chatMenu + @createSession="createSession" + @querySessionDetail="querySessionDetail" + @changeAgentType="changeAgentType" + ></chatMenu> </a-col> <!-- 鏅鸿兘浣撲細璇�--> <a-col :span="23" v-show="agentType == '1'"> - <!-- <div - v-if="sessionDetailList.length === 0" - style=" - width: 90%; - overflow: auto; - height: 65vh; - margin: 0px auto 20px; - " - > - <div class="center-title">鏅鸿兘闂瓟</div> - <div class="center-content"> - 鎴戝彲浠ョ悊瑙e拰瀛︿範浜虹被鐨勮瑷�锛屽叿澶囧杞璇濈殑鑳藉姏锛岀幇鍦ㄥ拰鎴戝紑濮嬩氦娴佸惂~ - </div> - <div class="center-question"> - <div class="center-question-left">璇曚竴璇曡繖鏍烽棶鎴�</div> - <div class="center-question-right"> - <a-button type="primary">鎹竴鎹�</a-button> + <div class="center"> + <div class="header___lEPyH"> + <div class="chatHeader"> + <div class="chatHeaderBox"> + <span class="title">{{ agentTitle }}</span> + </div> </div> </div> - <a-row justify="space-around" class="center-list"> - <a-col :span="7" class="item"> - <div class="item-title"> - <IconTiktokColor></IconTiktokColor> - 鎶栭煶甯﹁揣鑴氭湰 - </div> - <div class="item-content" :class="{ dark: theme === 'dark' }"> - 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑... - </div> - </a-col> - <a-col :span="7" class="item"> - <div class="item-title"> - <IconTiktokColor></IconTiktokColor> - 鎶栭煶甯﹁揣鑴氭湰 - </div> - <div class="item-content" :class="{ dark: theme === 'dark' }"> - 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑... - </div> - </a-col> - <a-col :span="7" class="item"> - <div class="item-title"> - <IconTiktokColor></IconTiktokColor> - 鎶栭煶甯﹁揣鑴氭湰 - </div> - <div class="item-content" :class="{ dark: theme === 'dark' }"> - 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑... - </div> - </a-col> - <a-col :span="7" class="item"> - <div class="item-title"> - <IconTiktokColor></IconTiktokColor> - 鎶栭煶甯﹁揣鑴氭湰 - </div> - <div class="item-content" :class="{ dark: theme === 'dark' }"> - 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑... - </div> - </a-col> - <a-col :span="7" class="item"> - <div class="item-title"> - <IconTiktokColor></IconTiktokColor> - 鎶栭煶甯﹁揣鑴氭湰 - </div> - <div class="item-content" :class="{ dark: theme === 'dark' }"> - 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑... - </div> - </a-col> - <a-col :span="7" class="item"> - <div class="item-title"> - <IconTiktokColor></IconTiktokColor> - 鎶栭煶甯﹁揣鑴氭湰 - </div> - <div class="item-content" :class="{ dark: theme === 'dark' }"> - 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑... - </div> - </a-col> - </a-row> - </div> --> - <div class="center"> <a-scrollbar ref="scrollbar" id="home" class="chat-list" style=" - width: 90%; + width: 80%; overflow: auto; - height: calc(100vh - 300px); + height: calc(100vh - 380px); margin: 0px auto 20px; " > - <div class="chat-item" v-for="sessionDetail in sessionDetailList"> + <div class="chat-item" v-for="(sessionDetail,index) in sessionDetailList"> <a-comment v-if="sessionDetail.role === 'user'"> <template #avatar> <img @@ -180,11 +59,30 @@ /> </template> <template #content> - <a-card :class="{ chatItemAnswer: theme === 'light' }"> - <div :class="{ light: theme === 'light' }" - >{{ sessionDetail.content }} - </div> - </a-card> + <!-- <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> + </template> + <template #actions> + <span class="action" v-if="index != 0" @click="copy(sessionDetail.content)"> + <icon-copy /> 澶嶅埗 + </span> + <span class="action" v-if="index != 0 && index == sessionDetailList.length - 1" @click="reGenerate()"> + <icon-refresh /> 閲嶆柊鐢熸垚 + </span> </template> </a-comment> <a-comment v-else-if="sessionDetail.role === 'last'"> @@ -201,8 +99,18 @@ auto-size v-model="displayedText" :class="{ chatItemAnswer: theme === 'light' }" + :style="{backgroundColor: theme === 'light' ? '#ffffff' : '#000000'}" + style="border: none" > </a-textarea> + </template> + <template #actions> + <div class="action" + @click="stopChat" + style="background: var(--color-bg-2);color: var(--color-primary-light-4);" v-if="displayedText != ''"> + <icon-record-stop /> + 鍋滄鐢熸垚 + </div> </template> </a-comment> </div> @@ -211,7 +119,8 @@ > <div class="chartStart v-else" @click="stopChat">閲嶆柊鐢熸垚</div> --> </a-scrollbar> - <div class="chat_bottom"> + + <div class="chat_bottom" > <div class="center-bottom"> <!-- <a-textarea v-model="inputMsg" @@ -232,23 +141,35 @@ show-word-limit :disabled="chatDis" :class="{ textItemAnswer: theme === 'dark' }" + :style="{backgroundColor: theme === 'light' ? '#ffffff' : '#000000'}" + style="border: none" :auto-size="{ minRows: 12, maxRows: 5, }" /> + <div style="margin-left: 20px"> + <a-upload + ref="uploadRef" + :file-list="uploadList" + multiple + :custom-request="customRequest" + style="font-size: 24px;"> + <template #upload-button> + <icon-attachment style="color: #0960bd"/> + </template> + </a-upload> + </div> + <div class="btn-send"> - <!-- <icon-send size="32" /> --> <a-button :disabled="chatDis" @click="sentClick" - type="primary" + type="text" style="border-radius: 24px" :loading="loading" - size="large" - >鍙戦�� - </a-button - > + ><icon-send size="32" style="color: #0960bd"/> + </a-button> </div> </div> </div> @@ -259,67 +180,23 @@ <agentSession :modalObj="agentObj"></agentSession> </div> </a-col> - - <!-- <a-col :span="5"> - <a-card class="right"> - <div class="right-top"> - <div class="right-title">鏁版櫤搴�</div> - <div class="right-btn"> - <a-button type="outline" shape="circle" style="border: none"> - <icon-search /> - </a-button> - <a-button - type="outline" - shape="circle" - style="border: none; margin-left: -10px" - > - <icon-close /> - </a-button> - </div> - </div> - <div class="right-tag"> - <a-button type="primary" size="mini" class="btn">鍏ㄩ儴 </a-button> - <a-button type="outline" size="mini" class="btn" - >鏂囨。鍒涗綔 - </a-button> - <a-button type="outline" size="mini" class="btn" - >鐭ヨ瘑瀛︿範 - </a-button> - <a-button type="outline" size="mini" class="btn" - >鏁堢巼鎻愬崌 - </a-button> - </div> - <div class="right-list"> - <div class="right-item"> - <div class="item-title"> - <IconTiktokColor></IconTiktokColor> - 鎶栭煶甯﹁揣鑴氭湰 - </div> - <div class="item-content" :class="{ dark: theme === 'dark' }"> - 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑... - </div> - </div> - <div class="right-item"> - <div class="item-title"> - <IconTiktokColor></IconTiktokColor> - 鎶栭煶甯﹁揣鑴氭湰 - </div> - <div class="item-content" :class="{ dark: theme === 'dark' }"> - 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑... - </div> - </div> - <div class="right-item"> - <div class="item-title"> - <IconTiktokColor></IconTiktokColor> - 鎶栭煶甯﹁揣鑴氭湰 - </div> - <div class="item-content" :class="{ dark: theme === 'dark' }"> - 缂栧啓寮曚汉娉ㄧ洰涓斿叿鏈夎鏈嶅姏鐨勩�侀�傜敤浜庝骇鍝佺殑... - </div> - </div> - </div> - </a-card> - </a-col> --> + <a-col :span="23" v-show="agentType == '3'"> + <div class="center" style="padding: 0"> + <historySession + @querySessionDetail="querySessionDetail" + @changeAgentType="changeAgentType" + ></historySession> + </div> + </a-col> + <a-col :span="23" v-show="agentType == '4'"> + <div class="center" style="padding: 0"> + <smartAi + @createSession="createSession" + @querySessionDetail="querySessionDetail" + @changeAgentType="changeAgentType" + ></smartAi> + </div> + </a-col> </a-row> </div> </template> @@ -330,7 +207,16 @@ IconTiktokColor } from "@arco-design/web-vue/es/icon"; import { useAppStore, useUserStore } from "@/store"; -import { computed, nextTick, onMounted, watch, reactive, ref } from "vue"; +import { + computed, + nextTick, + onMounted, + watch, + reactive, + ref, + onBeforeMount, + onBeforeUnmount +} from "vue"; import { Message } from "@arco-design/web-vue"; import { EventSourceParserStream } from "eventsource-parser/stream"; @@ -338,16 +224,20 @@ 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 historySession from "@/views/sessionManager/components/historySession.vue"; +import smartAi from "@/views/sessionManager/components/smartAi.vue"; +import EventBus from "@/utils/EventBus"; import { + addSessionApi, chatApi, getDialogListApi, getSessionDetailsApi, - sessionListApi + sessionListApi, uploadWithoutKb } from "@/api/session"; import { getAuthorization } from "@/utils/auth"; import { queryCanvasList } from "@/api/Agent"; import { getAgentSessionDetailsApi } from "@/api/agentSession"; - +import useClipboard from "vue-clipboard3"; const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯� const sessionList = ref([]); //浼氳瘽鍒楄〃 const modalObj = reactive({ add: false }); @@ -355,7 +245,9 @@ const chatDis = ref(false); const loading = ref(false); const agentType = ref("1"); - +const agentTitle = ref("鏈懡鍚嶄細璇�"); +let chatObj = reactive({}); +const isStopChat = ref(false) const currIndex = ref(0); const displayedText = ref(""); // 姝e湪鏄剧ず鐨勬枃瀛� let timer: number | null = null; @@ -369,6 +261,50 @@ const agentList = ref([]); const selectValue = ref(""); const sectionList = ref({}); +const uploadList = ref([]); +const uploadRef = ref(); +const files = ref([]); + +const { toClipboard } = useClipboard(); +const copy = async (text) => { + await toClipboard(text); //鍙傛暟涓鸿澶嶅埗鐨勬枃鏈� +} + +const onChange = (fileList) => { + // files.value = fileList; +}; + +const submitOne = (e) => { + e.stopPropagation(); + console.log(files.value); + uploadRef.value.submit(files.value.find((x) => x.status === 'init')); +}; +// 涓婁紶鏂囦欢 +const customRequest = async(option) => { + const {onProgress, onError, onSuccess, fileItem, name} = option + + const { code, data } = await getSessionDetailsApi(activeSessionId.value); + if (code === 200) { + console.log(data, "璇︽儏"); + if (fileItem.file) { + const formData = new FormData(); + formData.append('file', fileItem.file); + formData.append('conversation_id', data.dialog_id); + uploadWithoutKb(formData).then((res) => { + console.log(res); + uploadList.value = []; + if (res.code == 0) { + console.log(res); + + } + }); + } + } + +} + + + const DialogList = async () => { const { code, data } = await getDialogListApi(); if (code === 200) { @@ -382,7 +318,6 @@ }); console.log(data, "dialogs"); queryCanvas(); - // querySessionList(); } } }; @@ -403,12 +338,32 @@ // 鍒ゆ柇褰撳墠鏄櫤鑳戒綋鎴朼gent // console.log(val, 'val'); - if (dialogs.value.length > 0) { - dialogChange(dialogs.value[0].id); - } + // if (dialogs.value.length > 0) { + // dialogChange(dialogs.value[0].id); + // } + //鏂板缓浼氳瘽 + createSession(dialogs.value[0].id); } catch (err) { // you can report use errorHandler or other } finally { + } +}; +// 鏂板缓浼氳瘽 +const createSession = async (id, name = "鏈懡鍚嶄細璇�") => { + // 濡傛灉鏈変細璇漣d + console.log(name, "鏂板缓浼氳瘽鍚嶇О"); + + const res = await addSessionApi({ + dialog_id: id, + conversation_desc: name + }); + // console.log(res, "res"); + if (res.code == 200) { + // console.log(res.data.conversation_id); + activeSessionId.value = res.data?.conversation_id; + queryNewSessionDetail(res.data?.conversation_id); + } else { + Message.error("鍒涘缓浼氳瘽澶辫触锛岃閲嶈瘯"); } }; @@ -427,18 +382,26 @@ }); console.log(dialogObj.type, "dialogObj"); if (dialogObj.type == 1) { - agentType.value = 1; + agentType.value = '1'; querySessionList(); } else { - agentType.value = 2; + agentType.value = '2'; queryAgentSessionList(); } // querySessionList(); }; + +// 鍙戦�� const sentClick = () => { sendMessage("click"); }; +// 閲嶆柊鐢熸垚 +const reGenerate = () => { + let inputContent = sessionDetailList.value[sessionDetailList.value.length-2].content + startChat(inputContent) +}; + const sendMessage = async (event) => { if (event.keyCode == 13 || event === "click") { if (!event.shiftKey) { @@ -447,82 +410,147 @@ event.preventDefault(); // 闃绘榛樿琛屼负锛屽嵆涓嶆崲琛� } - chatDis.value = true; - loading.value = true; - if (!activeSessionId.value) { - Message.warning("璇烽�夋嫨浼氳瘽"); - chatDis.value = false; - loading.value = false; - return; - } + + // if (!activeSessionId.value) { + // Message.warning("璇烽�夋嫨浼氳瘽"); + // chatDis.value = false; + // loading.value = false; + // return; + // } // if (displayedText.value) { // querySessionList(); // } if (inputMsg.value) { - sessionDetailList.value.push({ - content: inputMsg.value, - role: "user" - }); - sessionDetailList.value.push({ role: "last" }); - refreshScroll(); - const response = await fetch( - "/api/tech/cloudminds/query?modeltype=localragflow", - { - method: "POST", - headers: { - "Authorization": getAuthorization(), - "Content-Type": "application/json" - }, - body: JSON.stringify({ - conversation_id: activeSessionId.value, - messages: inputMsg.value - }) - } - ); - const reader = response?.body - ?.pipeThrough(new TextDecoderStream()) - .pipeThrough(new EventSourceParserStream()) - .getReader(); - currIndex.value = 0; - while (true) { - const x = await reader?.read(); - if (x) { - const { done, value } = x; - console.log(x, 999); - try { - const val = JSON.parse(value?.data || ""); - const d = val?.data; - if (typeof d !== "boolean") { - console.info("data:", d); - streamStr.value = d.content; - startDisplayStr(); - } - } catch (e) { - console.warn(e); - } - if (done) { - console.info("done"); - displayedText.value = ""; - querySessionDetail(sectionList.value); - break; - } - } - } - querySessionList(); - chatDis.value = false; - loading.value = false; + startChat(inputMsg.value) + inputMsg.value = ""; } else { Message.warning("娑堟伅涓嶈兘涓虹┖"); - chatDis.value = false; - loading.value = false; } } } }; + +const startChat = async(valMsg)=>{ + chatDis.value = true; + loading.value = true; + sessionDetailList.value.push({ + content: valMsg, + role: "user" + }); + sessionDetailList.value.push({ role: "last" }); + refreshScroll(); + const response = await fetch( + "/api/tech/cloudminds/query?modeltype=localragflow", + { + method: "POST", + headers: { + "Authorization": getAuthorization(), + "Content-Type": "application/json" + }, + body: JSON.stringify({ + conversation_id: activeSessionId.value, + messages: valMsg + }) + } + ); + + const reader = response?.body + ?.pipeThrough(new TextDecoderStream()) + .pipeThrough(new EventSourceParserStream()) + .getReader(); + currIndex.value = 0; + while (true) { + const x = await reader?.read(); + if (x) { + const { done, value } = x; + // console.log(x, 999); + try { + const val = JSON.parse(value?.data || ""); + const d = val?.data; + if (typeof d !== "boolean") { + // console.info("data:", d); + streamStr.value = d.content; + startDisplayStr(); + } + } catch (e) { + console.warn(e); + } + if (done) { + console.info("done"); + displayedText.value = ""; + // if(!isStopChat.value){ + // queryNewSessionDetail(activeSessionId.value); + // } + queryNewSessionDetail(activeSessionId.value); + EventBus.emit("queryAppUsageList"); + break; + } + } + } + // querySessionList(); + chatDis.value = false; + loading.value = false; +} + +const stopChat=async()=>{ + // const { code, data } = await stopChatApi(activeSessionId.value); + // if (code === 200) { + // Message.success("宸插仠姝�"); + // queryNewSessionDetail(activeSessionId.value); + // } + isStopChat.value = true; + console.log('stopChat'); + console.log(displayedText.value, 'displayedText'); + console.log(sessionDetailList.value, 'sessionDetailList'); + let inputText = sessionDetailList.value[sessionDetailList.value.length-2].content + // 鏁扮粍鍚堝苟 + let lastArr = [{ + content: inputText, + role: "user" + },{ + content: displayedText.value, + role: "assistant" + }] + 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); + // clearTimeout(timer!); + // timer = null; + // const { code, data } = await addSessionApi(chatObj); + // if (data) { + // //鍋滄瀹氭椂鍣� + // clearTimeout(timer!); + // timer = null; + // displayedText.value = ""; + // queryNewSessionDetail(activeSessionId.value); + // } + + +} + +const queryNewSessionDetail = async (id) => { + activeSessionId.value = id; + const { code, data } = await getSessionDetailsApi(id); + if (code === 200) { + console.log(data, "鏂板缓浼氳瘽璇︽儏"); + Object.assign(chatObj, data); + sessionDetailList.value = data.message; + agentTitle.value = data.name; + refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃� + isStopChat.value = false; + } +}; + +const changeAgentType = (val, session) => { + agentType.value = val; + console.log(val, "val"); +}; + const querySessionDetail = async (session) => { sectionList.value = session; activeSessionId.value = session.id; @@ -574,8 +602,19 @@ const addSession = () => { querySessionList(); }; +onBeforeMount(() => { + // DialogList(); + //鏂板缓浼氳瘽 + createSession(""); +}); onMounted(() => { - DialogList(); + EventBus.on("newChat", () => { + agentType.value = "1"; + createSession(""); + }); +}); +onBeforeUnmount(() => { + EventBus.off("newChat"); }); const appStore = useAppStore(); @@ -639,8 +678,8 @@ .left { /* height: calc(100vh - 160px); - overflow-y: auto; - overflow-x: hidden;*/ + overflow-y: auto; + overflow-x: hidden;*/ border: 0px; .left-list { @@ -694,6 +733,7 @@ .center { position: relative; + padding-left: 50px; .center-title { line-height: 60px; @@ -757,7 +797,8 @@ .chat_bottom { display: flex; align-items: center; - + width: 78%; + margin: 0 auto; .center-bottom { // position: absolute; // width: 90%; @@ -779,7 +820,7 @@ .btn-send { position: absolute !important; right: 10px; - bottom: 10px; + top: 110px; z-index: 10; } @@ -862,4 +903,49 @@ } } } + +.header___lEPyH { + width: 100%; + height: 46px; + position: relative; + backdrop-filter: blur(15px); + display: flex; + align-items: center; + justify-content: center; + -webkit-backdrop-filter: blur(15px); + + .chatHeaderBox { + width: auto; + border-radius: 8px; + padding: 4px 20px; + transition: all var(--animation-duration) var(--animation-transition); + display: flex; + align-items: flex-end; + overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */ + text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙锋潵浠f浛琚殣钘忕殑鏂囧瓧 */ + white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */ + max-width: 200px; + + .title { + color: var(--color-text-1); + font-size: 12px; + } + } +} + +.action { + cursor: pointer; + display: inline-block; + padding: 0 10px; + color: var(--color-text-1); + line-height: 24px; + background: transparent; + border-radius: 2px; + cursor: pointer; + transition: all 0.1s ease; + font-size: 12px; +} +.action:hover { + background: var(--color-fill-3); +} </style> -- Gitblit v1.8.0