fix: Fix the styling issue on the conversation page

Author: wangdan-fit2cloud

ui/src/components/ai-chat/component/operation-button/MobileVoteReasonDrawer.vue

@@ -1,5 +1,11 @@
 <template>
-  <el-drawer v-model="visible" direction="btt" size="-" footer-class="mobile-vote-drawer-footer" :modal="true">
+  <el-drawer
+    v-model="visible"
+    direction="btt"
+    size="-"
+    footer-class="mobile-vote-drawer-footer"
+    :modal="true"
+  >
     <template #header>
       <h4 class="text-center">{{ title }}</h4>
     </template>
@@ -28,8 +34,8 @@
     </template>
     <template #footer>
       <el-space fill wrap :fill-ratio="40" style="width: 100%">
-        <el-button @click="visible = false"> {{ $t('common.cancel') }}</el-button>
-        <el-button :disabled="isSubmitDisabled" type="primary" @click="voteHandle()">
+        <el-button @click="visible = false" size="large"> {{ $t('common.cancel') }}</el-button>
+        <el-button :disabled="isSubmitDisabled" type="primary" size="large" @click="voteHandle()">
           {{ $t('common.submit') }}</el-button
         >
       </el-space>
@@ -122,6 +128,6 @@ defineExpose({ open })
 <style lang="scss">
 .mobile-vote-drawer-footer {
   padding: 0 24px 32px 24px;
-  border: none!important;
+  border: none !important;
 }
 </style>

ui/src/components/ai-chat/component/question-content/index.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- 问题内容 -->
-  <div @mouseenter.stop="showIcon = true" @mouseleave.stop="showIcon = false">
+  <div
+    @mouseenter.stop="showIcon = true"
+    @mouseleave.stop="showIcon = false"
+  >
     <div class="question-content item-content lighter">
       <div v-if="!isReQuestion" class="content p-12-16 border-r-8" :class="getClassName">
         <div class="text break-all pre-wrap">
@@ -104,12 +107,12 @@
           placement="top"
           v-if="props.isLast && props.type !== 'log'"
         >
-          <el-button text @click="handleEdit(chatRecord)">
+          <el-button text @click.stop="handleEdit(chatRecord)">
             <AppIcon class="color-secondary" iconName="app-edit"></AppIcon>
           </el-button>
         </el-tooltip>
         <el-tooltip effect="dark" :content="$t('common.copy')" placement="top">
-          <el-button text @click="copyClick(chatRecord?.problem_text)">
+          <el-button text @click.stop="copyClick(chatRecord?.problem_text)">
             <AppIcon class="color-secondary" iconName="app-copy"></AppIcon>
           </el-button>
         </el-tooltip>

ui/src/locales/lang/en-US/views/application.ts

@@ -8,9 +8,9 @@ export default {
   senior: 'WORKFLOW',
   simpleAgent: 'Simple Agent',
   AdvancedAgent: 'Advanced Agent',
-  simplePlaceholder: 'Suitable for beginners to create assistant using form settings',
+  simplePlaceholder: 'Quickly build intelligent agents with basic functions through form settings',
   advancedPlaceholder:
-    'Suitable for advanced users to build complex logic AI assistants using low-code drag-and-drop',
+    'Using low-code drag-and-drop methods, flexibly orchestrate complex logic and feature-rich agents',
   appTest: 'Debug Preview',
   skill: 'Skill',
   operation: {

ui/src/locales/lang/zh-CN/views/application.ts

@@ -8,8 +8,8 @@ export default {
   senior: '高级',
   simpleAgent: '简易智能体',
   AdvancedAgent: '高级智能体',
-  simplePlaceholder: '适用于初级用户使用表单设置构建AI对话助手',
-  advancedPlaceholder: '适用于高级用户使用低代码拖拉拽方式构建复杂逻辑的AI对话助手',
+  simplePlaceholder: '通过表单设置方式，快速搭建基础功能的智能体',
+  advancedPlaceholder: '使用低代码拖拉拽方式，灵活编排复杂逻辑、功能丰富的智能体',
   appTest: '调试预览',
   skill: '技能',
 

ui/src/locales/lang/zh-Hant/views/application.ts

@@ -8,8 +8,8 @@ export default {
   simpleAgent: '簡易智能體',
   simple: '簡易',
   senior: '進階',
-  simplePlaceholder: '適用於初級用戶使用表單設定構建AI對話助手',
-  advancedPlaceholder: '適用於高階用戶使用低代碼拖拉拽方式構建複雜邏輯的AI對話助手',
+  simplePlaceholder: '通過表單設置方式，快速搭建基礎功能的智能體',
+  advancedPlaceholder: '使用低代碼拖拉拽方式，靈活編排複雜邏輯、功能豐富的智能體',
   appTest: '調試預覽',
   skill: '技能',
   operation: {

ui/src/views/application/ApplicationSetting.vue

@@ -269,13 +269,14 @@
                     </div>
 
                     <div>
-                      <el-button type="primary" link @click="openParamSettingDialog">
-                        <AppIcon iconName="app-setting" class="mr-4"></AppIcon>
-                        {{ $t('common.paramSetting') }}
-                      </el-button>
+                      <span class="mr-4">
+                        <el-button type="primary" link @click="openParamSettingDialog">
+                          <AppIcon iconName="app-setting"></AppIcon>
+                        </el-button>
+                      </span>
+
                       <el-button type="primary" link @click="openKnowledgeDialog">
-                        <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
-                        {{ $t('common.add') }}
+                        <AppIcon iconName="app-add-outlined"></AppIcon>
                       </el-button>
                     </div>
                   </div>
@@ -349,7 +350,6 @@
                           @refreshForm="refreshParam"
                         >
                           <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
-                          {{ $t('common.add') }}
                         </el-button>
                       </div>
                     </div>
@@ -415,14 +415,14 @@
                         style="padding: 5px 8px"
                       >
                         <div class="flex align-center" style="line-height: 20px">
-                          <ToolIcon type="MCP" class="mr-8" :size="20"/>
+                          <ToolIcon type="MCP" class="mr-8" :size="20" />
                           <div class="ellipsis">
                             {{ $t('common.custom') + ' MCP' }}
                           </div>
                         </div>
-                        <el-button text @click="applicationForm.mcp_servers=''">
+                        <el-button text @click="applicationForm.mcp_servers = ''">
                           <el-icon>
-                            <Close/>
+                            <Close />
                           </el-icon>
                         </el-button>
                       </div>
@@ -452,7 +452,6 @@
                           @refreshForm="refreshParam"
                         >
                           <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
-                          {{ $t('common.add') }}
                         </el-button>
                       </div>
                     </div>
@@ -527,7 +526,6 @@
                           @refreshForm="refreshParam"
                         >
                           <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
-                          {{ $t('common.add') }}
                         </el-button>
                       </div>
                     </div>
@@ -1054,6 +1052,7 @@ function submitMcpServersDialog(config: any) {
   applicationForm.value.mcp_servers = config.mcp_servers
   applicationForm.value.mcp_tool_ids = config.mcp_tool_ids
   applicationForm.value.mcp_source = config.mcp_source
+  collapseData.MCP = true
 }
 
 const toolDialogRef = ref()
@@ -1063,6 +1062,7 @@ function openToolDialog() {
 
 function submitToolDialog(config: any) {
   applicationForm.value.tool_ids = config.tool_ids
+  collapseData.tool = true
 }
 
 const applicationDialogRef = ref()
@@ -1072,6 +1072,7 @@ function openApplicationDialog() {
 
 function submitApplicationDialog(config: any) {
   applicationForm.value.application_ids = config.application_ids
+  collapseData.agent = true
 }
 
 const applicationSelectOptions = ref<any[]>([])

ui/src/views/chat/component/HistoryPanel.vue

@@ -120,56 +120,74 @@
         <template #title>
           <AppIcon iconName="app-history-outlined" />
         </template>
+        <div class="flex-between p-8 ml-8">
+          <span>{{ $t('chat.history') }}</span>
+          <el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
+            <el-button text @click.stop="clearChat">
+              <AppIcon
+                iconName="app-delete"
+                class="color-secondary"
+                style="font-size: 16px"
+              ></AppIcon>
+            </el-button>
+          </el-tooltip>
+        </div>
+
         <div class="left-height">
           <el-scrollbar>
-            <el-menu-item-group v-loading="leftLoading">
-              <template #title>
-                <div class="flex-between w-full">
-                  <span>{{ $t('chat.history') }}</span>
-                  <el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
-                    <el-button text @click.stop="clearChat">
-                      <AppIcon
-                        iconName="app-delete"
-                        class="color-secondary"
-                        style="font-size: 16px"
-                      ></AppIcon>
-                    </el-button>
-                  </el-tooltip>
-                </div>
-              </template>
+            <InfiniteScroll
+              :size="chatLogData.length"
+              :total="_chatLogPagination?.total || 0"
+              :page_size="_chatLogPagination?.page_size || 20"
+              v-model:current_page="_chatLogPagination.current_page"
+              @load="scrollData"
+              :loading="leftLoading"
+            >
+              <div v-loading="leftLoading">
+                <el-menu-item
+                  v-for="row in chatLogData"
+                  :index="row.id"
+                  :key="row.id"
+                  @click="handleClickList(row)"
+                  @mouseenter="mouseenter(row)"
+                  @mouseleave="mouseId = ''"
+                >
+                  <div class="flex-between w-full lighter">
+                    <span :title="row.abstract" class="ellipsis">
+                      {{ row.abstract }}
+                    </span>
+                    <div @click.stop class="flex" v-show="mouseId === row.id && row.id !== 'new'">
+                      <el-dropdown trigger="click" :teleported="false">
+                        <el-button text class="lighter" style="padding: 1px !important">
+                          <AppIcon iconName="app-more" style="margin-right: 0"></AppIcon>
+                        </el-button>
 
-              <el-menu-item
-                v-for="row in chatLogData"
-                :index="row.id"
-                :key="row.id"
-                @click="handleClickList(row)"
-                @mouseenter="mouseenter(row)"
-                @mouseleave="mouseId = ''"
-              >
-                <div class="flex-between w-full lighter">
-                  <span :title="row.abstract" class="ellipsis">
-                    {{ row.abstract }}
-                  </span>
-                  <div @click.stop class="flex" v-show="mouseId === row.id && row.id !== 'new'">
-                    <el-dropdown trigger="click" :teleported="false">
-                      <AppIcon iconName="app-more" class="mt-4 lighter"></AppIcon>
-                      <template #dropdown>
-                        <el-dropdown-menu>
-                          <el-dropdown-item @click.stop="editLogTitle(row)">
-                            <AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
-                            {{ $t('common.edit') }}
-                          </el-dropdown-item>
-                          <el-dropdown-item @click.stop="deleteChatLog(row)">
-                            <AppIcon iconName="app-delete" class="color-secondary"></AppIcon>
-                            {{ $t('common.delete') }}
-                          </el-dropdown-item>
-                        </el-dropdown-menu>
-                      </template>
-                    </el-dropdown>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item @click.stop="editLogTitle(row)">
+                              <AppIcon
+                                iconName="app-edit"
+                                style="color: var(--app-text-color-secondary)"
+                                class="mr-4"
+                              ></AppIcon>
+                              {{ $t('common.edit') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item @click.stop="deleteChatLog(row)">
+                              <AppIcon
+                                iconName="app-delete"
+                                style="color: var(--app-text-color-secondary)"
+                                class="mr-4"
+                              ></AppIcon>
+                              {{ $t('common.delete') }}
+                            </el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </div>
                   </div>
-                </div>
-              </el-menu-item>
-            </el-menu-item-group>
+                </el-menu-item>
+              </div>
+            </InfiniteScroll>
           </el-scrollbar>
         </div>
         <div v-if="!chatLogData?.length" class="text-center">
@@ -289,6 +307,7 @@ function refreshFieldTitle(chatId: string, abstract: string) {
 </style>
 <style lang="scss">
 .chat-pc-popper {
+  background: #eef1f4;
   .el-menu {
     background: var(--el-color-primary-light-06) !important;
   }