修改删除常用语时面板被关闭的问题

yangyin

2024-11-08 b5e920831f3e2ea94c809b0dd99f08c16d9feceb

 src/components/chat/components/playBar/PlayBar.vue

@@ -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"
@@ -108,7 +110,14 @@
         @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>

@@ -118,14 +127,23 @@
import { ElMessage } from 'element-plus';
import _ from 'lodash';
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']);
const props = defineProps({
   isTalking: Boolean,
   isHome: Boolean,
   setCommonQuestionInfo: {
      type: Object,
      default: {},
   },
});

const { setCommonQuestionInfo } = toRefs(props);
const voicePageIsShow = defineModel('voicePageIsShow', {
   type: Boolean,
   default: false,
@@ -149,7 +167,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 +183,10 @@
            inputValue.value = mapValue;
            triggerShow.value = false;
         }
      } else if (arrowUp) {
         emits('showUpChatClick');
      } else if (arrowDown) {
         emits('showDownChatClick');
      }
   }
};
@@ -184,6 +208,7 @@
onClickOutside(tipEleRef, () => {
   triggerShow.value = false;
});

const inputText = (text) => {
   nextTick(() => {
      setTimeout(() => {
@@ -415,11 +440,10 @@

//#region ====================== 当前应用场景 ======================
const currentGroupTypeIsShow = computed(() => !!activeGroupType.value);

const groupTypeClick = (item) => {
   activeGroupType.value = item;

   inputRef.value.focus();
   commonPhrasesRef.value.getCommonPhrases();
};

// 关闭当前 groupType 面板
@@ -429,9 +453,37 @@
//#endregion

//#region ====================== 常用语功能 ======================
const commonPhrasesRef = ref(null);
const isMessageBoxVisible = ref(false);
// 常用语功能点击
const commonPhrasesClick = () => {
   isShowPhrase.value = true;
};
// 区域关闭常用语功能面板
onClickOutside(commonPhrasesRef, () => {
   const messageBoxElement = document.querySelector('.el-message-box');
   if (messageBoxElement) {
      isMessageBoxVisible.value = true;
      return;
   }
   isShowPhrase.value = false;
});
// 常用语功能输入框更新
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">