From 1622a4d80dd86d0fde35af6908937f9be670fee3 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期二, 17 十二月 2024 10:13:00 +0800 Subject: [PATCH] 停止生成 --- src/components/chat/components/playBar/PlayBar.vue | 99 +++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 83 insertions(+), 16 deletions(-) diff --git a/src/components/chat/components/playBar/PlayBar.vue b/src/components/chat/components/playBar/PlayBar.vue index e9ba850..673813b 100644 --- a/src/components/chat/components/playBar/PlayBar.vue +++ b/src/components/chat/components/playBar/PlayBar.vue @@ -2,7 +2,7 @@ <div class="playInput hl_input rounded-[22px] input-border input-shadow"> <!-- 搴旂敤鍦烘櫙 --> <div class="application-scenarios absolute bottom-[114%] left-4"> - <div class="flex-items-center space-x-2"> + <div class="flex-items-center space-x-2" :class="isHome ? 'set-next-group-type' : ''"> <div class="border border-gray-400 border-solid h-8 flex-items-center px-3 py-2 rounded-2xl cursor-pointer space-x-1 hover:bg-[#cae3ff]" :class="{ 'bg-[#c5e0ff]': activeGroupType === item, '!text-[#1c86ff]': activeGroupType === item }" @@ -65,8 +65,8 @@ class="absolute rounded-md bg-white border border-solid border-gray-400 py-2 z-10" :style="{ left: popUpPosition.left + 'px', bottom: popUpPosition.bottom + 'px' }" > - <div class="font-bold text-sm text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">Ctrl+鏁板瓧蹇嵎杈撳叆</div> - <div class="text-gray-400 text-sm text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">{{ inputValue }}</div> + <div class="font-bold text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">Ctrl+鏁板瓧蹇嵎杈撳叆</div> + <div class="text-gray-400 text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">{{ inputValue }}</div> <div class="max-w-96 flex flex-col"> <div class="hover:bg-gray-300 py-2 cursor-pointer px-5 text-nowrap overflow-hidden text-ellipsis" @@ -74,7 +74,7 @@ :key="index" @click="similarClick(item)" > - <span class="text-sm text-gray-500 pr-1.5">{{ index + 1 }}</span> + <span class="text-gray-500 pr-1.5">{{ index + 1 }}</span> <template v-if="sentenceSplitMap?.[item.question]"> <template v-for="part in sentenceSplitMap[item.question]"> <span v-if="part.isKeyword" class="text-blue-400 font-bold cursor-pointer">{{ part.partStr }}</span> @@ -94,11 +94,31 @@ <!-- <el-button title="AI璇煶瀵硅瘽" class="cursor-pointer" link style="margin-left: unset" @click="audioChangeWord"> <img src="/static/images/wave/HeadImg.png" class="set-img-icon box-border" /> </el-button> --> + <el-button + title="娓呴櫎" + class="cursor-pointer" + link + style="margin-left: unset" + @click="clearTextarea" + icon="ele-Close" + v-if="inputValue" + > + </el-button> + <el-button class="cursor-pointer" link> + <el-tooltip placement="top" content="鍋滄鐢熸垚" v-if="isTalking"> + <div + class="size-[28px] stop-breathe rounded-full flex-center border-2 border-solid border-black text-black" + @click="emits('stopGenClick')" + > + <span class="ywifont ywicon-jieshu"></span> + </div> + </el-tooltip> - <el-button title="鍙戦��" :disabled="isTalking" class="cursor-pointer" link @click="emits('sendClick')"> - <div class="send"> - <img src="/static/images/wave/QueryImg.png" /> - </div> + <el-tooltip v-else placement="top" content="鍙戦��"> + <div class="size-[36px] rounded-full bg-black flex-center" @click="emits('sendClick')"> + <img src="/static/images/wave/QueryImg.png" /> + </div> + </el-tooltip> </el-button> </div> </div> @@ -124,16 +144,25 @@ import { onClickOutside } from '@vueuse/core'; import type { InputInstance } from 'element-plus'; import { ElMessage } from 'element-plus'; -import _ from 'lodash'; +import { sortBy } from 'lodash-es'; import getCaretCoordinates from 'textarea-caret'; -import { computed, nextTick, ref } from 'vue'; +import { computed, nextTick, ref, toRefs, watch } from 'vue'; import InfoDetail from './InfoDetail.vue'; import CommonPhrases from './phrase/CommonPhrases.vue'; import VoicePage from './voicePage/VoicePage.vue'; import { getMetricsNames, querySimilarityHistory } from '/@/api/ai/chat'; import { activeGroupType, groupTypeList, groupTypeMapIcon } from '/@/stores/chatRoom'; -const emits = defineEmits(['sendClick', 'showUpChatClick', 'showDownChatClick']); -const props = defineProps(['isTalking', 'isHome']); +const emits = defineEmits(['sendClick', 'showUpChatClick', 'showDownChatClick', 'stopGenClick']); +const props = defineProps({ + isTalking: Boolean, + isHome: Boolean, + setCommonQuestionInfo: { + type: Object, + default: {}, + }, +}); + +const { setCommonQuestionInfo } = toRefs(props); const voicePageIsShow = defineModel('voicePageIsShow', { type: Boolean, default: false, @@ -146,7 +175,7 @@ type: String, }); -const tipIsShow = computed(() => !!inputValue.value.trim() && similarList.value?.length > 0 && triggerShow.value); +const tipIsShow = computed(() => !!inputValue.value?.trim() && similarList.value?.length > 0 && triggerShow.value); const triggerShow = ref(false); const inputRef = ref<InputInstance>(null); @@ -198,6 +227,9 @@ onClickOutside(tipEleRef, () => { triggerShow.value = false; }); +const clearTextarea = () => { + inputValue.value = ''; +}; const inputText = (text) => { nextTick(() => { setTimeout(() => { @@ -305,7 +337,7 @@ }; // 鎸� startIndex 鎺掑簭锛屾秷闄ゅ郊姝や箣闂撮噸鍚堝厓绱� - sentenceMatchList = _.sortBy(sentenceMatchList, (item) => item.startIndex).filter((value, index, array) => { + sentenceMatchList = sortBy(sentenceMatchList, (item) => item.startIndex).filter((value, index, array) => { if (nextIsMerge) { checkNextIsMerge(value, index, array); return false; @@ -429,11 +461,10 @@ //#region ====================== 褰撳墠搴旂敤鍦烘櫙 ====================== const currentGroupTypeIsShow = computed(() => !!activeGroupType.value); - const groupTypeClick = (item) => { activeGroupType.value = item; - inputRef.value.focus(); + commonPhrasesRef.value.getCommonPhrases(); }; // 鍏抽棴褰撳墠 groupType 闈㈡澘 @@ -444,13 +475,36 @@ //#region ====================== 甯哥敤璇姛鑳� ====================== const commonPhrasesRef = ref(null); +// 甯哥敤璇姛鑳界偣鍑� const commonPhrasesClick = () => { isShowPhrase.value = true; }; +// 鍖哄煙鍏抽棴甯哥敤璇姛鑳介潰鏉� +onClickOutside( + commonPhrasesRef, + () => { + isShowPhrase.value = false; + }, + { + ignore: ['.el-message-box'], + } +); +// 甯哥敤璇姛鑳借緭鍏ユ鏇存柊 const updateCommonChatInput = (val) => { inputValue.value = val; isShowPhrase.value = false; }; + +watch(setCommonQuestionInfo, (val) => { + if (!props.isHome) { + let obj = { + id: val?.historyId, + question: val?.content.values, + }; + commonPhrasesRef.value.commonChatByUser(obj); + isShowPhrase.value = true; + } +}); //#endregion </script> <style scoped lang="scss"> @@ -583,4 +637,17 @@ } } } + +.stop-breathe { + @keyframes breathe { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.35); + } + } + animation: breathe 3s infinite ease-in-out; +} </style> -- Gitblit v1.9.3