style: Adjust the recommended question style. (#566)

Author: ziyujiahao

backend/apps/chat/curd/chat.py

@@ -43,16 +43,15 @@ def list_chats(session: SessionDep, current_user: CurrentUser) -> List[Chat]:
 def list_recent_questions(session: SessionDep, current_user: CurrentUser, datasource_id: int) -> List[str]:
     chat_records = (
         session.query(
-            ChatRecord.question,
-            func.count(ChatRecord.question).label('question_count')
+            ChatRecord.question
         )
         .join(Chat, ChatRecord.chat_id == Chat.id)  # 关联Chat表
         .filter(
             Chat.datasource == datasource_id,  # 使用Chat表的datasource字段
             ChatRecord.question.isnot(None)
         )
         .group_by(ChatRecord.question)
-        .order_by(desc('question_count'), desc(func.max(ChatRecord.create_time)))
+        .order_by(desc(func.max(ChatRecord.create_time)))
         .limit(10)
         .all()
     )

frontend/src/i18n/en.json

@@ -193,8 +193,7 @@
     "chart_selected": "Selected {0}"
   },
   "qa": {
-    "recommended_repetitive_tips": "Duplicate questions exist",
-    "retrieve_error": "Model recommendation failed...",
+    "retrieve_error": "No content available",
     "retrieve_again": "Retrieve Again",
     "recently": "recently",
     "recommend": "recommend",
@@ -324,6 +323,7 @@
     }
   },
   "datasource": {
+    "recommended_repetitive_tips": "Duplicate questions exist",
     "recommended_problem_tips": "Custom configuration requires at least one problem, each problem should be 2-200 characters",
     "recommended_problem_configuration": "Recommended Problem Configuration",
     "problem_generation_method": "Problem Generation Method",
@@ -800,4 +800,4 @@
   "modelType": {
     "llm": "Large Language Model"
   }
-}
+}

frontend/src/i18n/ko-KR.json

@@ -193,8 +193,7 @@
     "chart_selected": "{0}개 선택됨"
   },
   "qa": {
-    "recommended_repetitive_tips": "중복된 문제가 존재합니다",
-    "retrieve_error": "모델 추천 문제 실패...",
+    "retrieve_error": "콘텐츠 없음",
     "retrieve_again": "다시 가져오기",
     "recently": "최근",
     "recommend": "추천",
@@ -324,6 +323,7 @@
     }
   },
   "datasource": {
+    "recommended_repetitive_tips": "중복된 문제가 존재합니다",
     "recommended_problem_tips": "사용자 정의 구성으로 최소 한 개의 문제를 생성하세요, 각 문제는 2~200자로 작성",
     "recommended_problem_configuration": "추천 문제 구성",
     "problem_generation_method": "문제 생성 방식",
@@ -800,4 +800,4 @@
   "modelType": {
     "llm": "대형 언어 모델"
   }
-}
+}

frontend/src/i18n/zh-CN.json

@@ -193,7 +193,8 @@
     "chart_selected": "已选{0}"
   },
   "qa": {
-    "retrieve_error": "模型推荐问题失败...",
+    "recommended_repetitive_tips": "Duplicate questions exist",
+    "retrieve_error": "暂无内容",
     "retrieve_again": "重新获取",
     "recently": "最近",
     "recommend": "推荐",
@@ -800,4 +801,4 @@
   "modelType": {
     "llm": "大语言模型"
   }
-}
+}

frontend/src/views/chat/QuickQuestion.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
 import icon_quick_question from '@/assets/svg/icon_quick_question.svg'
-import icon_close from '@/assets/svg/operate/ope-close.svg'
 import icon_replace_outlined from '@/assets/svg/icon_replace_outlined.svg'
 import { ChatInfo } from '@/api/chat.ts'
 import RecentQuestion from '@/views/chat/RecentQuestion.vue'
@@ -38,6 +37,9 @@ const loadingOver = () => {
   emits('loadingOver')
 }
 
+const onTitleChange = (title: string) => {
+  activeName.value = title
+}
 onMounted(() => {
   getRecommendQuestions()
 })
@@ -70,45 +72,54 @@ const props = withDefaults(
     popper-class="quick_question_popover"
     placement="top-start"
     trigger="click"
-    :width="320"
+    :width="240"
   >
-    <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">
-        <RecommendQuestionQuick
-          ref="recommendQuestionRef"
-          :current-chat="currentChat"
-          :record-id="recordId"
-          :questions="questions"
-          :disabled="disabled"
-          :first-chat="firstChat"
-          position="input"
-          @click-question="quickAsk"
-          @stop="onChatStop"
-          @loading-over="loadingOver"
-        />
-      </el-tab-pane>
-      <el-tab-pane v-if="datasourceId" :label="$t('qa.recently')" name="recently">
-        <RecentQuestion
-          ref="recentQuestionRef"
-          :disabled="disabled"
-          :datasource-id="datasourceId"
-          @click-question="quickAsk"
-        >
-        </RecentQuestion>
-      </el-tab-pane>
-    </el-tabs>
+    <div style="display: flex">
+      <div
+        class="quick_question_title"
+        :class="{ 'title-active': activeName == 'recommend' }"
+        @click="onTitleChange('recommend')"
+      >
+        {{ $t('qa.recommend') }}
+      </div>
+      <div
+        class="quick_question_title"
+        :class="{ 'title-active': activeName == 'recently' }"
+        @click="onTitleChange('recently')"
+      >
+        {{ $t('qa.recently') }}
+      </div>
+    </div>
+    <div class="quick_question_content">
+      <RecommendQuestionQuick
+        v-show="activeName === 'recommend'"
+        ref="recommendQuestionRef"
+        :current-chat="currentChat"
+        :record-id="recordId"
+        :questions="questions"
+        :disabled="disabled"
+        :first-chat="firstChat"
+        position="input"
+        @click-question="quickAsk"
+        @stop="onChatStop"
+        @loading-over="loadingOver"
+      />
+      <RecentQuestion
+        v-show="activeName == 'recently'"
+        ref="recentQuestionRef"
+        :disabled="disabled"
+        :datasource-id="datasourceId"
+        @click-question="quickAsk"
+      >
+      </RecentQuestion>
+    </div>
     <template #reference>
       <el-button plain size="small">
         <el-icon size="16" class="el-icon--left">
@@ -122,21 +133,43 @@ const props = withDefaults(
 
 <style lang="less">
 .quick_question_popover {
-  .quick_question_tab {
-    height: 230px;
-  }
-  .ed-tab-pane {
+  padding: 4px !important;
+  .quick_question_title {
+    width: 40px;
+    height: 24px;
+    border-radius: 6px;
+    opacity: 1;
+    padding: 2px 8px;
+    font-size: 12px;
     display: flex;
-    align-items: normal;
-    width: 100%;
+    align-items: center;
+    justify-content: center;
+    background: rgba(31, 35, 41, 0.1);
+    cursor: pointer;
+    margin-left: 8px;
+    &:hover {
+      color: rgba(24, 158, 122, 0.5);
+      background: rgba(28, 186, 144, 0.1);
+    }
   }
-  .ed-tabs__content {
-    overflow: auto;
+  .title-active {
+    color: rgba(24, 158, 122, 1);
+    background: rgba(28, 186, 144, 0.2);
+  }
+  .quick_question_content {
+    height: 168px;
+    margin-top: 4px;
+    padding: 4px 4px 4px 4px;
+    overflow-y: auto;
   }
   .ed-popover__title {
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 0;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
   }
   .close_icon {
     position: absolute;

frontend/src/views/chat/RecentQuestion.vue

@@ -37,27 +37,31 @@ defineExpose({
 </script>
 
 <template>
-  <div v-if="computedQuestions.length > 0 || loading" class="recent-questions">
-    <div class="question-grid-input">
-      <div
-        v-for="(question, index) in computedQuestions"
-        :key="index"
-        class="question"
-        :class="{ disabled: disabled }"
-        @click="clickQuestion(question)"
-      >
-        {{ question }}
+  <div style="width: 100%; height: 100%">
+    <div v-if="computedQuestions.length > 0 || loading" class="recent-questions">
+      <div class="question-grid-input">
+        <div
+          v-for="(question, index) in computedQuestions"
+          :key="index"
+          class="question"
+          :class="{ disabled: disabled }"
+          :title="question"
+          @click="clickQuestion(question)"
+        >
+          {{ question }}
+        </div>
       </div>
     </div>
+    <div v-else class="recommend-questions-error">
+      {{ $t('qa.retrieve_error') }}
+    </div>
   </div>
 </template>
 
 <style scoped lang="less">
 .recent-questions {
   height: 100%;
   width: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
   font-size: 14px;
   font-weight: 500;
   line-height: 22px;
@@ -72,7 +76,7 @@ defineExpose({
 
   .question-grid-input {
     display: grid;
-    grid-gap: 12px;
+    grid-gap: 1px;
     grid-template-columns: repeat(1, calc(100% - 6px));
   }
 
@@ -85,11 +89,13 @@ defineExpose({
   .question {
     font-weight: 400;
     cursor: pointer;
-    background: rgba(245, 246, 247, 1);
-    min-height: 32px;
-    border-radius: 6px;
-    padding: 5px 12px;
+    height: 32px;
+    border-radius: 4px;
+    padding: 5px 8px;
     line-height: 22px;
+    white-space: nowrap; /* 禁止换行 */
+    overflow: hidden; /* 隐藏溢出内容 */
+    text-overflow: ellipsis; /* 显示省略号 */
     &:hover {
       background: rgba(31, 35, 41, 0.1);
     }
@@ -99,4 +105,15 @@ defineExpose({
     }
   }
 }
+
+.recommend-questions-error {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(100, 106, 115, 1);
+  margin-top: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
 </style>