refactor: If the recommendation question fails, it can be retrieved again. (#516)

Author: ziyujiahao

frontend/src/i18n/en.json

@@ -184,6 +184,8 @@
     "chart_selected": "Selected {0}"
   },
   "qa": {
+    "retrieve_error": "Model recommendation failed...",
+    "retrieve_again": "Retrieve Again",
     "recently": "recently",
     "recommend": "recommend",
     "quick_question": "quick question",

frontend/src/i18n/ko-KR.json

@@ -184,6 +184,8 @@
     "chart_selected": "{0}개 선택됨"
   },
   "qa": {
+    "retrieve_error": "모델 추천 문제 실패...",
+    "retrieve_again": "다시 가져오기",
     "recently": "최근",
     "recommend": "추천",
     "quick_question": "빠른 질문",

frontend/src/i18n/zh-CN.json

@@ -184,6 +184,8 @@
     "chart_selected": "已选{0}"
   },
   "qa": {
+    "retrieve_error": "模型推荐问题失败...",
+    "retrieve_again": "重新获取",
     "recently": "最近",
     "recommend": "推荐",
     "quick_question": "快捷提问",

frontend/src/views/chat/QuickQuestion.vue

@@ -1,16 +1,23 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import icon_quick_question from '@/assets/svg/icon_quick_question.svg'
-import { Close } from '@element-plus/icons-vue'
+import icon_close from '@/assets/svg/operate/ope-close.svg'
+import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
 import RecommendQuestion from '@/views/chat/RecommendQuestion.vue'
 import { ChatInfo } from '@/api/chat.ts'
 import RecentQuestion from '@/views/chat/RecentQuestion.vue'
 const activeName = ref('recommend')
 const recommendQuestionRef = ref()
+const recentQuestionRef = ref()
 const popoverRef = ref()
 const getRecommendQuestions = () => {
   recommendQuestionRef.value.getRecommendQuestions()
 }
+
+const retrieveQuestions = () => {
+  getRecommendQuestions()
+  recentQuestionRef.value.getRecentQuestions()
+}
 const quickAsk = (question: string) => {
   emits('quickAsk', question)
   hiddenProps()
@@ -59,7 +66,18 @@ const props = withDefaults(
     trigger="click"
     :width="320"
   >
-    <el-icon class="close_icon"><Close @click="hiddenProps" /></el-icon>
+    <el-button class="tool-btn close_icon" text @click="hiddenProps">
+      <el-icon size="18">
+        <icon_close />
+      </el-icon>
+    </el-button>
+    <el-tooltip effect="dark" :offset="8" :content="$t('qa.retrieve_again')" placement="top">
+      <el-button class="tool-btn refresh_icon" text :disabled="disabled" @click="retrieveQuestions">
+        <el-icon size="18">
+          <icon_replace_outlined />
+        </el-icon>
+      </el-button>
+    </el-tooltip>
     <el-tabs v-model="activeName" class="quick_question_tab">
       <el-tab-pane :label="$t('qa.recommend')" name="recommend">
         <RecommendQuestion
@@ -76,7 +94,13 @@ const props = withDefaults(
         />
       </el-tab-pane>
       <el-tab-pane v-if="datasourceId" :label="$t('qa.recently')" name="recently">
-        <RecentQuestion :datasource-id="datasourceId" @click-question="quickAsk"> </RecentQuestion>
+        <RecentQuestion
+          ref="recentQuestionRef"
+          :disabled="disabled"
+          :datasource-id="datasourceId"
+          @click-question="quickAsk"
+        >
+        </RecentQuestion>
       </el-tab-pane>
     </el-tabs>
     <template #reference>
@@ -95,6 +119,11 @@ const props = withDefaults(
   .quick_question_tab {
     height: 230px;
   }
+  .ed-tab-pane {
+    display: flex;
+    align-items: normal;
+    width: 100%;
+  }
   .ed-tabs__content {
     overflow: auto;
   }
@@ -106,9 +135,38 @@ const props = withDefaults(
   .close_icon {
     position: absolute;
     cursor: pointer;
-    top: 12px;
-    right: 12px;
+    top: 4px;
+    right: 4px;
   }
+
+  .refresh_icon {
+    position: absolute;
+    cursor: pointer;
+    top: 30px;
+    right: 4px;
+    z-index: 1;
+  }
+
+  .tool-btn {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: rgba(100, 106, 115, 1);
+
+    .tool-btn-inner {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &:hover {
+      background: rgba(31, 35, 41, 0.1);
+    }
+    &:active {
+      background: rgba(31, 35, 41, 0.1);
+    }
+  }
+
   .ed-tabs__item {
     font-size: 14px;
     height: 38px;

frontend/src/views/chat/RecentQuestion.vue

@@ -5,9 +5,11 @@ import { chatApi } from '@/api/chat.ts'
 const props = withDefaults(
   defineProps<{
     datasourceId?: number
+    disabled?: boolean
   }>(),
   {
     datasourceId: undefined,
+    disabled: false,
   }
 )
 
@@ -29,6 +31,9 @@ async function getRecentQuestions() {
     computedQuestions.value = res
   })
 }
+defineExpose({
+  getRecentQuestions,
+})
 </script>
 
 <template>
@@ -38,6 +43,7 @@ async function getRecentQuestions() {
         v-for="(question, index) in computedQuestions"
         :key="index"
         class="question"
+        :class="{ disabled: disabled }"
         @click="clickQuestion(question)"
       >
         {{ question }}
@@ -49,6 +55,7 @@ async function getRecentQuestions() {
 <style scoped lang="less">
 .recent-questions {
   height: 100%;
+  width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   font-size: 14px;

frontend/src/views/chat/RecommendQuestion.vue

@@ -186,10 +186,14 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
       </div>
     </div>
   </div>
+  <div v-else-if="position === 'input'" class="recommend-questions-error">
+    {{ $t(qa.retrieve_error) }}
+  </div>
 </template>
 
 <style scoped lang="less">
 .recommend-questions {
+  width: 100%;
   font-size: 14px;
   font-weight: 500;
   line-height: 22px;
@@ -231,4 +235,15 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
     }
   }
 }
+
+.recommend-questions-error {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(100, 106, 115, 1);
+  margin-top: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
 </style>

frontend/src/views/system/prompt/index.vue

@@ -528,7 +528,7 @@ const typeChange = (val: any) => {
           <template #icon>
             <icon_add_outlined></icon_add_outlined>
           </template>
-          {{ $t('prompt.add_prompt_word') }}
+          {{ $t('prompt.add_prompt_word') }}11
         </el-button>
       </div>
     </div>
@@ -619,7 +619,7 @@ const typeChange = (val: any) => {
                   <template #icon>
                     <icon_add_outlined></icon_add_outlined>
                   </template>
-                  {{ $t('prompt.add_prompt_word') }}
+                  {{ $t('prompt.add_prompt_word') }}22
                 </el-button>
               </div>
             </template>