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 | 124 +++++++++++++++++++++++++++++++++++------ 1 files changed, 105 insertions(+), 19 deletions(-) diff --git a/src/components/chat/components/playBar/PlayBar.vue b/src/components/chat/components/playBar/PlayBar.vue index 6c36c6f..636ade5 100644 --- a/src/components/chat/components/playBar/PlayBar.vue +++ b/src/components/chat/components/playBar/PlayBar.vue @@ -1,8 +1,8 @@ <template> - <div class="playInput hl_input rounded-[22px] input-border input-shadow" > + <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 }" @@ -31,7 +31,12 @@ </el-tooltip> </div> --> <div class="assembly flex"> - <el-button title="鎻掍欢鑿滃崟" class="label flex items-center cursor-pointer" link> + <el-button + title="杈撳叆甯哥敤璇爣棰橈紝鍙揩鎹疯皟鐢ㄥ父鐢ㄨ" + class="label flex items-center cursor-pointer" + link + @click="commonPhrasesClick" + > <img src="/static/images/wave/PlugIn.png" class="set-icon box-border" /> </el-button> </div> @@ -44,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" @@ -87,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> @@ -103,24 +127,44 @@ @updateInputValue="updateInputValue" :isHome="isHome" /> + <CommonPhrases + v-model:isShow="isShowPhrase" + v-show="isShowPhrase" + :isHome="isHome" + ref="commonPhrasesRef" + @updateCommonChatInput="updateCommonChatInput" + /> </div> </template> <script setup lang="ts"> +import { onClickOutside } from '@vueuse/core'; import type { InputInstance } from 'element-plus'; import { ElMessage } from 'element-plus'; +import { sortBy } from 'lodash-es'; import getCaretCoordinates from 'textarea-caret'; -import { computed, nextTick, ref, triggerRef } 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 { onClickOutside } from '@vueuse/core'; -import _ from 'lodash'; 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, +}); +const isShowPhrase = defineModel('isShowPhrase', { type: Boolean, default: false, }); @@ -128,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); @@ -139,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(); //鍙栨秷浜嬩欢鐨勯粯璁ゅ姩浣�*鎹㈣ @@ -153,6 +199,10 @@ inputValue.value = mapValue; triggerShow.value = false; } + } else if (arrowUp) { + emits('showUpChatClick'); + } else if (arrowDown) { + emits('showDownChatClick'); } } }; @@ -174,6 +224,9 @@ onClickOutside(tipEleRef, () => { triggerShow.value = false; }); +const clearTextarea = () => { + inputValue.value = ''; +}; const inputText = (text) => { nextTick(() => { setTimeout(() => { @@ -213,7 +266,7 @@ lastIsFinish = false; const res = await querySimilarityHistory({ question: text, - group_type:activeGroupType.value + group_type: activeGroupType.value, }); lastIsFinish = true; const handleValues = res?.values ?? []; @@ -281,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; @@ -405,11 +458,10 @@ //#region ====================== 褰撳墠搴旂敤鍦烘櫙 ====================== const currentGroupTypeIsShow = computed(() => !!activeGroupType.value); - const groupTypeClick = (item) => { activeGroupType.value = item; - inputRef.value.focus(); + commonPhrasesRef.value.getCommonPhrases(); }; // 鍏抽棴褰撳墠 groupType 闈㈡澘 @@ -417,6 +469,40 @@ activeGroupType.value = null; }; //#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"> .set-waterTitle { -- Gitblit v1.9.3