feat: Add a back to bottom button to the chat page(#2957)

Author: wangdan-fit2cloud

ui/src/components/ai-chat/component/chat-input-operate/index.vue

@@ -3,8 +3,10 @@
     <div class="text-center mb-8" v-if="loading">
       <el-button class="border-primary video-stop-button" @click="stopChat">
         <app-icon iconName="app-video-stop" class="mr-8"></app-icon>
-        {{ $t('chat.operation.stopChat') }}</el-button>
+        {{ $t('chat.operation.stopChat') }}</el-button
+      >
     </div>
+
     <div class="operate-textarea">
       <el-scrollbar max-height="136">
         <div
@@ -332,7 +334,7 @@ const props = withDefaults(
     available: true,
   },
 )
-const emit = defineEmits(['update:chatId', 'update:loading', 'update:showUserInput'])
+const emit = defineEmits(['update:chatId', 'update:loading', 'update:showUserInput', 'backBottom'])
 const chartOpenId = ref<string>()
 const chatId_context = computed({
   get: () => {

ui/src/components/ai-chat/index.scss

@@ -7,6 +7,12 @@
   position: relative;
   color: var(--app-text-color);
   box-sizing: border-box;
+
+  .back-bottom-button {
+    position: absolute;
+    right: 14px;
+    top: -30px;
+  }
   &__content {
     padding-top: 0;
     box-sizing: border-box;
@@ -16,7 +22,6 @@
     }
 
     .content {
-
       :deep(ol) {
         margin-left: 16px !important;
       }

ui/src/components/ai-chat/index.vue

@@ -66,35 +66,39 @@
           </TransitionContent>
         </div>
       </el-scrollbar>
-
-      <ChatInputOperate
-        :app-id="appId"
-        :application-details="applicationDetails"
-        :is-mobile="isMobile"
-        :type="type"
-        :send-message="sendMessage"
-        :open-chat-id="openChatId"
-        :validate="validate"
-        :chat-management="ChatManagement"
-        v-model:chat-id="chartOpenId"
-        v-model:loading="loading"
-        v-model:show-user-input="showUserInput"
-        v-if="type !== 'log'"
-      >
-        <template #userInput>
-          <el-button
-            v-if="isUserInput || isAPIInput"
-            class="user-input-button mb-8"
-            @click="toggleUserInput"
-          >
-            <AppIcon iconName="app-edit" :size="16" class="mr-4"></AppIcon>
-            <span class="ellipsis">
-              {{ userInputTitle || $t('chat.userInput') }}
-            </span>
-          </el-button>
-        </template>
-      </ChatInputOperate>
-
+      <div style="position: relative">
+        <!-- 置底按钮 -->
+        <el-button v-if="isBottom" circle class="back-bottom-button" @click="setScrollBottom">
+          <el-icon><ArrowDownBold /></el-icon>
+        </el-button>
+        <ChatInputOperate
+          :app-id="appId"
+          :application-details="applicationDetails"
+          :is-mobile="isMobile"
+          :type="type"
+          :send-message="sendMessage"
+          :open-chat-id="openChatId"
+          :validate="validate"
+          :chat-management="ChatManagement"
+          v-model:chat-id="chartOpenId"
+          v-model:loading="loading"
+          v-model:show-user-input="showUserInput"
+          v-if="type !== 'log'"
+        >
+          <template #userInput>
+            <el-button
+              v-if="isUserInput || isAPIInput"
+              class="user-input-button mb-8"
+              @click="toggleUserInput"
+            >
+              <AppIcon iconName="app-edit" :size="16" class="mr-4"></AppIcon>
+              <span class="ellipsis">
+                {{ userInputTitle || $t('chat.userInput') }}
+              </span>
+            </el-button>
+          </template>
+        </ChatInputOperate>
+      </div>
       <Control></Control>
     </template>
   </div>
@@ -603,10 +607,12 @@ function chatMessage(chat?: any, problem?: string, re_chat?: boolean, other_para
 const scrollTop = ref(0)
 
 const scorll = ref(true)
+const isBottom = ref(false)
 
 const getMaxHeight = () => {
   return dialogScrollbar.value!.scrollHeight
 }
+
 /**
  * 滚动滚动条到最上面
  * @param $event
@@ -621,6 +627,8 @@ const handleScrollTop = ($event: any) => {
   } else {
     scorll.value = false
   }
+  isBottom.value =
+    scrollTop.value + scrollDiv.value.wrapRef.offsetHeight < dialogScrollbar.value!.scrollHeight
   emit('scroll', { ...$event, dialogScrollbar: dialogScrollbar.value, scrollDiv: scrollDiv.value })
 }
 /**

ui/src/components/app-table/index.vue

@@ -36,7 +36,7 @@
         <el-pagination
           v-model:current-page="paginationConfig.current_page"
           v-model:page-size="paginationConfig.page_size"
-          :page-sizes="pageSizes"
+          :page-sizes="paginationConfig.page_sizes|| pageSizes"
           :total="paginationConfig.total"
           layout="total, prev, pager, next, sizes"
           @size-change="handleSizeChange"

ui/src/styles/element-plus.scss

@@ -290,6 +290,11 @@
   height: 20px;
   font-weight: 400;
 }
+.el-tag--plain.el-tag--info {
+  color: var(--app-text-color-secondary);
+  font-weight: 500;
+  border-color: var(--app-text-color-light-1);
+}
 
 // el-select
 .el-select__selected-item {

ui/src/views/problem/index.vue

@@ -207,6 +207,7 @@ const paginationConfig = reactive({
   current_page: 1,
   page_size: 10,
   total: 0,
+  page_sizes: [10, 20, 50, 100, 1000],
 })
 
 const filterText = ref('')

ui/src/views/tool/component/ToolListContainer.vue

@@ -179,7 +179,7 @@
                 <template #title>
                   <div>
                     {{ item.name }}
-                    <el-tag v-if="item.version" class="ml-4">
+                    <el-tag v-if="item.version" class="ml-4" type="info" effect="plain">
                       {{ item.version }}
                     </el-tag>
                   </div>

ui/src/views/tool/toolStore/ToolCard.vue

@@ -1,10 +1,29 @@
 <template>
   <CardBox :title="props.tool.name" :description="props.tool.desc" class="cursor">
     <template #icon>
-      <el-avatar v-if="isAppIcon(props.tool?.icon)" shape="square" :size="32" style="background: none">
+      <el-avatar
+        v-if="isAppIcon(props.tool?.icon)"
+        shape="square"
+        :size="32"
+        style="background: none"
+      >
         <img :src="resetUrl(props.tool?.icon)" alt="" />
       </el-avatar>
-      <el-avatar v-else-if="props.tool?.name" :name="props.tool?.name" pinyinColor shape="square" :size="32" />
+      <el-avatar
+        v-else-if="props.tool?.name"
+        :name="props.tool?.name"
+        pinyinColor
+        shape="square"
+        :size="32"
+      />
+    </template>
+    <template #title>
+      <div>
+        {{ props.tool?.name }}
+        <el-tag v-if="props.tool?.version" class="ml-4" type="info" effect="plain">
+          {{ props.tool?.version }}
+        </el-tag>
+      </div>
     </template>
     <template #subTitle>
       <el-text class="color-secondary" size="small">
@@ -29,24 +48,24 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import {isAppIcon, resetUrl} from '@/utils/common'
+import { isAppIcon, resetUrl } from '@/utils/common'
 
 const props = defineProps<{
-  tool: any,
+  tool: any
   getSubTitle: (v: any) => string
   addLoading: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'handleAdd'): void;
-  (e: 'handleDetail'): void;
-}>();
+  (e: 'handleAdd'): void
+  (e: 'handleDetail'): void
+}>()
 </script>
 
 <style lang="scss" scoped>
 .el-card {
   :deep(.card-footer) {
-    &>div:first-of-type {
+    & > div:first-of-type {
       flex: 1;
     }