chore(首页): 新建会话优化

src/app.vue

@@ -6,6 +6,7 @@ import { themeOverrides } from '@/config/theme-config'
 import { useResizeObserver } from '@vueuse/core'
 import { useDesignSettingStore } from '@/store/modules/design-setting'
 import { useUserStore } from './store/modules/user'
+import MessageTipModal from '@/components/message-tip-modal/message-tip-modal.vue'
 
 const designSettingStore = useDesignSettingStore()
 const userStore = useUserStore()
@@ -48,6 +49,8 @@ useResizeObserver(rootContainer, (entries) => {
 
 <template>
   <div ref="rootContainer" class="h-full w-full">
+    <MessageTipModal />
+
     <NConfigProvider
       class="h-full w-full"
       :locale="currentLocale"

src/components/message-tip-modal/message-tip-modal.vue

+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const isShowModal = ref(false)
+
+const modalOptions = reactive({
+  title: t('common_module.tip'),
+  content: '',
+})
+
+let _modalStatusResolve = (_value?: any) => {}
+let _modalStatusReject = (_reason?: any) => {}
+
+onMounted(() => {
+  window.$message.ctWarning = handleShowModal
+})
+
+function handleCancel() {
+  isShowModal.value = false
+
+  _modalStatusReject(new Error('cancel show modal'))
+}
+
+function handleConfirm() {
+  isShowModal.value = false
+
+  _modalStatusResolve(true)
+}
+
+function handleShowModal(content: string, title?: string) {
+  content && (modalOptions.content = content)
+  title && (modalOptions.title = title)
+
+  isShowModal.value = true
+
+  return new Promise<boolean | Error>((resolve, reject) => {
+    _modalStatusResolve = resolve
+    _modalStatusReject = reject
+  })
+}
+</script>
+
+<template>
+  <n-modal v-model:show="isShowModal">
+    <div class="min-w-[420px] max-w-[600px] rounded-[10px] bg-[#fff] p-[30px]">
+      <div>
+        <h2>
+          <i class="iconfont icon-tishi text-[18px] text-[#f25744]"></i>
+          <span class="font-600 ml-[5px] text-[18px]">{{ modalOptions.title || t('common_module.tip') }}</span>
+        </h2>
+
+        <div class="mt-[20px] indent-4 text-[16px]">{{ modalOptions.content }}</div>
+      </div>
+
+      <div class="mt-[50px] text-end">
+        <n-button color="#F5F5F5" round class="!px-[34px] !py-[10px] !text-[14px] !text-[#333]" @click="handleCancel">
+          {{ t('common_module.cancel_btn_text') }}
+        </n-button>
+
+        <n-button color="#6F77FF" round class="!ml-[12px] !px-[34px] !py-[10px] !text-[14px]" @click="handleConfirm">
+          {{ t('common_module.confirm_btn_text') }}
+        </n-button>
+      </div>
+    </div>
+  </n-modal>
+</template>

src/locales/langs/zh-cn.yaml

@@ -108,6 +108,7 @@ home_module:
   the_selected_list_cannot_be_empty: '所选列表不能为空'
   history_record_item_apply_tip: '是否确定应用此会话记录？'
   historical_record: '历史记录'
+  interrupt_dialogue_prompt: '当前回复尚未完成，是否确定打断发起新会话？'
 
 router_title_module:
   login: '登录'

src/locales/langs/zh-hk.yaml

@@ -91,6 +91,7 @@ login_module:
   successful: '獲取成功'
   get_verification_code: '獲取驗証碼'
   other_login_methods: '其他登錄方式'
+  interrupt_dialogue_prompt: '當前回復尚未完成，是否確定打斷發起新會話？'
 
 home_module:
   agent_welcome_message: 'Hi, 歡迎使用SuperLink'

src/views/home/components/footer-operation.vue

@@ -27,6 +27,8 @@ const isAgentResponding = defineModel<boolean>('isAgentResponding', { required:
 
 const { t } = useI18n()
 
+let currentFetchEventSourceController: AbortController | null = null
+
 const isShowApplicationSelectMenu = ref(false)
 const agentApplicationSelectList = ref<AgentApplicationRecordItem[]>([])
 
@@ -61,7 +63,18 @@ function handleApplicationChange(agentApplicationItem: AgentApplicationRecordIte
 }
 
 function handleCreateNewSession() {
-  emit('createNewSession')
+  if (isAgentResponding.value) {
+    window.$message.ctWarning(t('home_module.interrupt_dialogue_prompt')).then(() => {
+      currentFetchEventSourceController && currentFetchEventSourceController.abort()
+
+      isAgentResponding.value = false
+
+      emit('createNewSession')
+      emit('historyRecordListUpdate')
+    })
+  } else {
+    emit('createNewSession')
+  }
 }
 
 function questionSubmit() {
@@ -96,7 +109,7 @@ function questionSubmit() {
   let isFirstClip = true
   let messageContent = ''
 
-  fetchEventStreamSource(
+  currentFetchEventSourceController = fetchEventStreamSource(
     '/agentApplicationRest/callAgentApplication.json',
     {
       dialogsId: props.currentSessionId, //会话ID

src/views/home/components/history-menu-sidebar.vue

 <script setup lang="ts">
 import { fetchHistoryRecordDelete, fetchSessionHistoryRecordList } from '@/apis/home-agent'
-import { computed, ref, nextTick, toValue, useTemplateRef } from 'vue'
-import MessageTipModal from './message-tip-modal.vue'
+import { computed, ref, nextTick, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 interface SessionHistoryRecordItem {
@@ -16,18 +15,12 @@ const emit = defineEmits<{
 const isShowHistoryMenu = defineModel<boolean>({ default: true })
 
 const { t } = useI18n()
-const messageTipModalRef = useTemplateRef<InstanceType<typeof MessageTipModal>>('messageTipModalRef')
 
 const sessionHistoryRecordList = ref<SessionHistoryRecordItem[]>([])
 const isHistoryListEdit = ref(false)
 
 const currentSelectHistoryRecordList = ref<SessionHistoryRecordItem['dialogsId'][]>([])
 
-const messageTipModalOptions = ref<{ title: string; content: string }>({
-  title: t('common_module.tip'),
-  content: t('home_module.history_record_item_delete_tip'),
-})
-
 const isSelectAllRecord = computed(() => {
   return (
     currentSelectHistoryRecordList.value.length === sessionHistoryRecordList.value.length &&
@@ -92,32 +85,28 @@ function handleRecordDelete() {
     return
   }
 
-  messageTipModalOptions.value = {
-    title: t('common_module.tip'),
-    content: t('home_module.history_record_item_delete_tip'),
-  }
+  window.$message.ctWarning(t('home_module.history_record_item_delete_tip'), t('common_module.tip')).then(() => {
+    const loadingCtl = window.$message.loading(`${t('common_module.during_operation')}...`)
 
-  if (messageTipModalRef.value) {
-    messageTipModalRef.value.showModal().then(() => {
-      const loadingCtl = window.$message.loading(`${t('common_module.during_operation')}...`)
+    fetchHistoryRecordDelete(toValue(currentSelectHistoryRecordList.value))
+      .then(() => {
+        nextTick(() => {
+          window.$message.success(t('common_module.delete_success_message'))
 
-      fetchHistoryRecordDelete(toValue(currentSelectHistoryRecordList.value))
-        .then(() => {
-          nextTick(() => {
-            window.$message.success(t('common_module.delete_success_message'))
-            getSessionHistoryRecordList()
-          })
-        })
-        .catch(() => {
-          nextTick(() => {
-            window.$message.error(t('common_module.deletion_failed_please_try_again'))
-          })
+          isHistoryListEdit.value = false
+
+          getSessionHistoryRecordList()
         })
-        .finally(() => {
-          loadingCtl.destroy()
+      })
+      .catch(() => {
+        nextTick(() => {
+          window.$message.error(t('common_module.deletion_failed_please_try_again'))
         })
-    })
-  }
+      })
+      .finally(() => {
+        loadingCtl.destroy()
+      })
+  })
 }
 
 function onHistoryRecordListUpdate() {
@@ -125,16 +114,9 @@ function onHistoryRecordListUpdate() {
 }
 
 function handleRecordItemApply(dialogsId: string) {
-  messageTipModalOptions.value = {
-    title: t('common_module.tip'),
-    content: t('home_module.history_record_item_apply_tip'),
-  }
-
-  if (messageTipModalRef.value) {
-    messageTipModalRef.value.showModal().then(() => {
-      emit('getMessageRecordList', dialogsId)
-    })
-  }
+  window.$message.ctWarning(t('home_module.history_record_item_apply_tip'), t('common_module.tip')).then(() => {
+    emit('getMessageRecordList', dialogsId)
+  })
 }
 
 defineExpose({
@@ -246,12 +228,6 @@ defineExpose({
       :class="{ '!rotate-0': !isShowHistoryMenu }"
     ></span>
   </button>
-
-  <MessageTipModal
-    ref="messageTipModalRef"
-    :title="messageTipModalOptions.title"
-    :content="messageTipModalOptions.content"
-  />
 </template>
 
 <style lang="scss" scoped>

src/views/home/home.vue

@@ -37,7 +37,7 @@ const questionContent = ref('')
 const messageList = ref(new Map<string, MessageItemInterface>())
 const isAgentResponding = ref(false)
 const isShowMessageList = ref(false)
-const isAgentLoading = ref(true)
+const isAgentInitLoading = ref(true)
 
 // messageList.value.set('1', {
 //   role: 'user',
@@ -93,7 +93,7 @@ function createSessionId() {
   fetchCreateSessionId<string>().then((res) => {
     currentSessionId.value = res.data
 
-    isAgentLoading.value = false
+    isAgentInitLoading.value = false
   })
 }
 
@@ -212,7 +212,7 @@ function onGetMessageRecordList(recordId: string) {
 
     <Transition name="mask" mode="out-in">
       <div
-        v-show="isAgentLoading"
+        v-show="isAgentInitLoading"
         class="z-100 absolute inset-0 flex flex-col items-center justify-center bg-[rgba(0,0,0,0.4)]"
       >
         <n-spin :size="38" />

types/global.d.ts

@@ -2,7 +2,9 @@ declare interface Window {
   ENV: 'DEV' | 'PROD'
   $loadingBar: import('naive-ui').LoadingBarProviderInst
   $dialog: import('naive-ui').DialogProviderInst
-  $message: import('naive-ui').MessageProviderInst
+  $message: import('naive-ui').MessageProviderInst & {
+    ctWarning: (message: string, title?: string) => Promise<boolean | Error>
+  }
   $notification: import('naive-ui').NotificationProviderInst
 }
 

types/locales.d.ts

@@ -113,6 +113,7 @@ declare namespace I18n {
       the_selected_list_cannot_be_empty: string
       history_record_item_apply_tip: string
       historical_record: string
+      interrupt_dialogue_prompt: string
     }
 
     router_title_module: {