Skip to content

perf: refine user input style #2680

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 25, 2025
Merged

perf: refine user input style #2680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions ui/src/assets/fx/bochaai/detail.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@

博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.


## 配置

1. 获取API Key 
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/bocha_APIKey.jpg)
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/bocha_APIKey.jpg)
1. 在函数库中配置
在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/bocha_setting.jpg)
在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/bocha_setting.jpg)
1. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/bocha_app_used.jpg)
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/bocha_app_used.jpg)
25 changes: 12 additions & 13 deletions ui/src/assets/fx/google_search/detail.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,18 @@ Google 搜索工具是一个实时 API，可提取搜索引擎结果，提供来
## 配置

1. 创建 Google Custom Search Engine
在[Programmable Search Engine]（https://programmablesearchengine.google.com/）中 添加 Search Engine
![google 创建引擎](/src/assets/fx/img/google_AddSearchEngine.jpg)
在[Programmable Search Engine]（https://programmablesearchengine.google.com/）中 添加 Search Engine
![google 创建引擎](/src/assets/fx/img/google_AddSearchEngine.jpg)
2. 获取cx参数
进入添加引擎，在【基本】菜单中获取搜索引擎的ID，即cx。
![google cx ](/src/assets/fx/img/google_cx.jpg)
3.获取 API Key
打开 https://developers.google.com/custom-search/v1/overview?hl=zh-cn，获取API Key。
![google API Key](/src/assets/fx/img/google_APIKey.jpg)
进入添加引擎，在【基本】菜单中获取搜索引擎的ID，即cx。
![google cx ](/src/assets/fx/img/google_cx.jpg) 3.获取 API Key
打开 https://developers.google.com/custom-search/v1/overview?hl=zh-cn，获取API Key。
![google API Key](/src/assets/fx/img/google_APIKey.jpg)

4. 配置启动参数
在Google搜索函数的启动参数中填写配置以上参数。
![启动参数](/src/assets/fx/img/google_setting.jpg)
3. 配置启动参数
在Google搜索函数的启动参数中填写配置以上参数。
![启动参数](/src/assets/fx/img/google_setting.jpg)

5. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/google_app_used.jpg)
4. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/google_app_used.jpg)
16 changes: 7 additions & 9 deletions ui/src/assets/fx/langsearch/detail.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@

博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.


## 配置

1. 获取API Key 
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/langsearch_APIKey.jpg)
在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
![API Key](/src/assets/fx/img/langsearch_APIKey.jpg)
2. 在函数库中配置
在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/langsearch_setting.jpg)
1. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/langsearch_app_used.jpg)

在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。
![启动参数](/src/assets/fx/img/langsearch_setting.jpg)
3. 在应用中使用
在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
![应用中使用](/src/assets/fx/img/langsearch_app_used.jpg)
1 change: 0 additions & 1 deletion ui/src/components/ai-chat/component/chat-input-operate/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -749,7 +749,6 @@ onMounted(() => {

@media only screen and (max-width: 768px) {
.ai-chat {
height: calc(100% - 100px);
&__operate {
position: fixed;
bottom: 0;
Expand Down
24 changes: 19 additions & 5 deletions ui/src/components/ai-chat/component/user-form/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@
(inputFieldList.length > 0 || (type === 'debug-ai-chat' && apiInputFieldList.length > 0)) &&
type !== 'log'
"
class="mb-16 w-full"
style="padding: 0 24px; max-width: 400px"
class="user-form-container mb-16 w-full"
>
<el-card shadow="always" class="border-r-8" style="--el-card-padding: 16px 8px">
<div class="flex align-center cursor w-full" style="padding: 0 8px">
Expand All @@ -16,9 +15,14 @@
{{ inputFieldConfig.title }}
</span>
</div>
<el-scrollbar max-height="160">

<el-scrollbar :max-height="first ? 0 : 450">
<el-collapse-transition>
<div v-show="showUserInput" class="mt-16" style="padding: 0 8px">
<div
v-show="showUserInput"
class="mt-16"
style="padding: 0 8px; height: calc(100% - 100px)"
>
<DynamicsForm
:key="dynamicsFormRefresh"
v-model="form_data_context"
Expand All @@ -40,6 +44,7 @@
</div>
</el-collapse-transition>
</el-scrollbar>

<div class="text-right mr-8">
<el-button type="primary" v-if="first" @click="confirmHandle">{{
$t('chat.operation.startChat')
Expand Down Expand Up @@ -359,4 +364,13 @@ onMounted(() => {
handleInputFieldList()
})
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.user-form-container {
padding: 0 24px;
}
@media only screen and (max-width: 768px) {
.user-form-container {
max-width: 100%;
}
}
</style>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are no significant issues with the provided code snippet. It appears to be maintaining proper logic for displaying input fields based on various conditions and handling form submissions.

Optimization suggestions include:

  1. Reducing unnecessary CSS complexity by combining similar declarations in media queries.
  2. Ensuring that all classes have clear naming conventions and describe their functionality effectively.

These changes can help improve maintainability and readability of the codebase.

24 changes: 22 additions & 2 deletions ui/src/components/ai-chat/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<template>
<div ref="aiChatRef" class="ai-chat" :class="type">
<div
ref="aiChatRef"
class="ai-chat"
:class="type"
:style="{ height: firsUserInput ? '100%' : undefined }"
>
<div
v-show="showUserInputContent"
:class="firsUserInput ? 'firstUserInput' : 'popperUserInput'"
Expand Down Expand Up @@ -521,7 +526,15 @@ defineExpose({
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
.user-form-container {
max-width: 70%;
}
}
.debug-ai-chat {
.user-form-container {
max-width: 100%;
}
}
.popperUserInput {
position: absolute;
Expand All @@ -531,4 +544,11 @@ defineExpose({
width: calc(100% - 50px);
max-width: 400px;
}
@media only screen and (max-width: 768px) {
.firstUserInput {
.user-form-container {
max-width: 100%;
}
}
}
</style>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided TypeScript Vue component for an AI chat with additional styles is generally clean and functional, but there are a couple of minor suggestions and corrections:

Suggested Corrections/Improvements

  1. Remove Redundant :show Binding:
    The v-show="showUserInputContent" directive in the <div>vShow> element can sometimes be redundant when used on child elements that rely on their parent's existence.

  2. Add Missing Close Brace to CSS Block:
    Ensure that each closing brace (}) in your SCSS or LESS is properly paired. In this case, the .debug-ai-chat, @media only screen and (max-width: 768px) block should have its corresponding closing bracket.

  3. Correct Variable Usage:
    The variable heightStyleProp is not being utilized anywhere in your template logic, which might indicate it should either be removed or updated based on its intended use.

  4. Optimization Suggestions

    • Avoid Repeated Class Names: Since both .ai-chat and .debug-ai-chat share similar style rules, consider combining them into one class if they don't differ significantly.

    • Use Conditional Classes Wisely: Instead of applying different classes like firstUserInput or popperUserInput conditionally, you could refactor the logic for these styles directly in the inline styles or computed properties to improve readability.

  5. Enhance Responsiveness:
    If you want to ensure the user input container has a maximum width even at very small screens without affecting the entire dialog box, reconsider using media queries more strategically and possibly adding conditional wrapping around larger layout components.

Below is the revised version of your code incorporating some of these considerations:

<template>
  <div ref="aiChatRef" class="ai-chat" :class="type" :style="[...baseStyles, customStyles]">
    <!-- Your existing content here -->
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose} from 'vue';

const aiChatRef = ref(null);
const firsUserInput = reactive(false);

// Define your props and other necessary variables

defineExpose({
  // Export your expose methods here
});
</script>

<style scoped>
.ai-chat {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* Removed unnecessary padding */
}

.user-form-container {
  /* Add default styling as needed */
  max-width: 70%; /* Adjusted based on your needs */
}

.debug-ai-chat {
  .user-form-container {
    max-width: 100%; /* Ensures wider than default on smaller screens */
  }
}

.popperUserInput {
  position: absolute;
  background-color: #fff;
  border-radius: 8px;
  font-size: 16px;
  padding: 1rem;
  z-index: 1000;
  width: calc(100% - 50px);
  max-width: 400px;
}

@media only screen and (max-width: 768px) {
  .firstUserInput {
    .user-form-container {
      max-width: 100%; /* Always ensures wide form container on mobile */
    }
  }
}
</style>

By making these adjustments and optimizations, your AI chat component will be more efficient, maintainable, and responsive across devices.

4 changes: 2 additions & 2 deletions ui/src/layout/components/sidebar/SidebarItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ function showMenu() {
}
}

function clickHandle(item: any) {
if (isWorkFlow(type) && item.name === 'AppSetting') {
function clickHandle(item?: any) {
if (isWorkFlow(type) && item?.name === 'AppSetting') {
router.push({ path: `/application/${id}/workflow` })
}
}
Expand Down
9 changes: 9 additions & 0 deletions ui/src/views/function-lib/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,12 +152,21 @@
size="small"
class="mr-4"
/>
<el-divider direction="vertical" />
<el-dropdown trigger="click">
<el-button text @click.stop>
<el-icon><MoreFilled /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-if="!item.template_id"
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
@click.stop="openCreateDialog(item)"
>
<el-icon><EditPen /></el-icon>
{{ $t('common.edit') }}
</el-dropdown-item>
<el-dropdown-item
:disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
v-if="!item.template_id"
Expand Down
6 changes: 0 additions & 6 deletions ui/src/workflow/common/NodeControl.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
<el-button link @click="zoomOut">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.zoomOut')"
placement="top"
Expand All @@ -14,7 +13,6 @@
</el-button>
<el-button link @click="zoomIn">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.zoomIn')"
placement="top"
Expand All @@ -26,7 +24,6 @@
</el-button>
<el-button link @click="fitView">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.fitView')"
placement="top"
Expand All @@ -40,7 +37,6 @@
<el-divider direction="vertical" />
<el-button link @click="retract">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.retract')"
placement="top"
Expand All @@ -54,7 +50,6 @@
</el-button>
<el-button link @click="extend">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.extend')"
placement="top"
Expand All @@ -68,7 +63,6 @@
</el-button>
<el-button link @click="layout">
<el-tooltip
class="box-item"
effect="dark"
:content="$t('views.applicationWorkflow.control.beautify')"
placement="top"
Expand Down
2 changes: 1 addition & 1 deletion ui/src/workflow/icons/function-lib-node-icon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<script setup lang="ts">
import { isAppIcon } from '@/utils/application'
const props = defineProps<{
item: {
item?: {
name: string
icon: string
}
Expand Down
41 changes: 16 additions & 25 deletions ui/src/workflow/nodes/ai-chat-node/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,22 +116,33 @@
/>
</el-form-item>

<el-form-item>
<div class="flex-between mb-16">
<div class="lighter">{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
<el-button type="primary" link @click="openMcpServersDialog" @refreshForm="refreshParam">
<el-icon><Setting /></el-icon>
</el-button>
</div>

<el-form-item @click.prevent>
<template #label>
<div class="flex-between">
<div>{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
<div class="flex-between w-full">
<div>
<span>{{
$t('views.application.applicationForm.form.reasoningContent.label')
}}</span>
</div>
<el-button
type="primary"
link
@click="openMcpServersDialog"
@click="openReasoningParamSettingDialog"
@refreshForm="refreshParam"
>
<el-icon><Setting /></el-icon>
</el-button>
</div>
</template>
<el-switch size="small" v-model="chat_data.model_setting.reasoning_content_enable" />
</el-form-item>

<el-form-item @click.prevent>
<template #label>
<div class="flex align-center">
Expand All @@ -151,26 +162,6 @@
</template>
<el-switch size="small" v-model="chat_data.is_result" />
</el-form-item>
<el-form-item @click.prevent>
<template #label>
<div class="flex-between w-full">
<div>
<span>{{
$t('views.application.applicationForm.form.reasoningContent.label')
}}</span>
</div>
<el-button
type="primary"
link
@click="openReasoningParamSettingDialog"
@refreshForm="refreshParam"
>
<el-icon><Setting /></el-icon>
</el-button>
</div>
</template>
<el-switch size="small" v-model="chat_data.model_setting.reasoning_content_enable" />
</el-form-item>
</el-form>
</el-card>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code contains some formatting discrepancies and redundancy. Here are my recommendations:

  1. In line 116, replace @click="openMcpServersDialog" with <button> tag.
  2. Remove the duplicate el-form-item at line 171 because it has already been rendered above.

Here's what the updated code should look like:

@@ -116,28 +116,43 @@
           />
         </el-form-item>

+        <div class="flex-between mb-16">
+          <div class="lighter">{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
+          <button type="primary" link @click="openMcpServersDialog">Settings</button>
+        </div>
       
       <el-form @click.prevent>
         <template #label>
           <div class="flex-between">
             <div>{{ $t('views.applicationApplicationForm.form.reasoningContent.label') }}</div>
-            <el-button
-              type="primary"
-              link
-              @click="openReasoningParamSettingDialog"
-              @refreshForm="refreshParam"
-            >
-              Settings
-            </el-button>
+            <button type="primary" link @click="openReasoningParamSettingDialog">Settings</button>
           </div>
         </template>
         <el-switch size="small" v-model="chat_data.model_setting.reasoning_content_enable" />
       </el-form>   
     </el-card>

Expand Down
5 changes: 3 additions & 2 deletions ui/src/workflow/nodes/mcp-node/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,18 @@
:key="item.value"
:label="item.name"
:value="item.name"
class="flex align-center"
>
<el-tooltip
class="box-item"
effect="dark"
:content="item.description"
placement="top-start"
popper-class="max-w-350"
>
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip>

<span>{{ item.name }}</span>
<span class="ml-4">{{ item.name }}</span>
</el-option>
</el-select>
</el-form-item>
Expand Down