From 20c1c4455912a19878404b6b5733475db6eadfb8 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期一, 02 十二月 2024 17:47:33 +0800 Subject: [PATCH] 停止生成 --- src/components/chat/components/playBar/PlayBar.vue | 100 ++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 85 insertions(+), 15 deletions(-) diff --git a/src/components/chat/components/playBar/PlayBar.vue b/src/components/chat/components/playBar/PlayBar.vue index 2ad4d43..636ade5 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 }" @@ -49,8 +49,10 @@ class="relative align-bottom set-inputAnswer" type="textarea" resize="none" + maxlength="1024" :autosize="{ minRows: 1, maxRows: 8 }" v-elInputFocus + show-word-limit @keydown="keydownInput" @input="inputText" v-model="inputValue" @@ -92,11 +94,28 @@ <!-- <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 v-if="isTalking" placement="top" content="鍋滄鐢熸垚"> + <div class="size-[36px] 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> @@ -108,7 +127,13 @@ @updateInputValue="updateInputValue" :isHome="isHome" /> - <CommonPhrases v-model:isShow="isShowPhrase" v-show="isShowPhrase" :isHome="isHome"/> + <CommonPhrases + v-model:isShow="isShowPhrase" + v-show="isShowPhrase" + :isHome="isHome" + ref="commonPhrasesRef" + @updateCommonChatInput="updateCommonChatInput" + /> </div> </template> @@ -116,16 +141,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']); -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, @@ -138,7 +172,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); @@ -149,7 +183,9 @@ if (props.isTalking) return; const isEnterInput = !e.shiftKey && e.key == 'Enter'; const isDigitalInput = e.ctrlKey && e.code.startsWith('Digit') && tipIsShow.value; - if (isEnterInput || isDigitalInput) { + const arrowUp = e.key === 'ArrowUp'; + const arrowDown = e.key === 'ArrowDown'; + if (isEnterInput || isDigitalInput || arrowUp || arrowDown) { e.cancelBubble = true; //ie闃绘鍐掓场琛屼负 e.stopPropagation(); //Firefox闃绘鍐掓场琛屼负 e.preventDefault(); //鍙栨秷浜嬩欢鐨勯粯璁ゅ姩浣�*鎹㈣ @@ -163,6 +199,10 @@ inputValue.value = mapValue; triggerShow.value = false; } + } else if (arrowUp) { + emits('showUpChatClick'); + } else if (arrowDown) { + emits('showDownChatClick'); } } }; @@ -184,6 +224,9 @@ onClickOutside(tipEleRef, () => { triggerShow.value = false; }); +const clearTextarea = () => { + inputValue.value = ''; +}; const inputText = (text) => { nextTick(() => { setTimeout(() => { @@ -291,7 +334,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; @@ -415,11 +458,10 @@ //#region ====================== 褰撳墠搴旂敤鍦烘櫙 ====================== const currentGroupTypeIsShow = computed(() => !!activeGroupType.value); - const groupTypeClick = (item) => { activeGroupType.value = item; - inputRef.value.focus(); + commonPhrasesRef.value.getCommonPhrases(); }; // 鍏抽棴褰撳墠 groupType 闈㈡澘 @@ -429,9 +471,37 @@ //#endregion //#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"> -- Gitblit v1.9.3