From 378de21fa2f87585ac6162f4eb45c1b71dc0ab9a Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Thu, 27 Mar 2025 19:42:01 +0800
Subject: [PATCH] feat: User input optimization

* fix: Fix img 404

* feat: User input optimization
---
 ui/public/fx/langsearch/detail.md             |  2 +-
 .../component/chat-input-operate/index.vue    |  2 --
 .../ai-chat/component/user-form/index.vue     | 13 ++++++----
 ui/src/components/ai-chat/index.vue           | 22 +++++++++++++++--
 ui/src/views/function-lib/index.vue           | 24 ++++++++++++-------
 5 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/ui/public/fx/langsearch/detail.md b/ui/public/fx/langsearch/detail.md
index 8189bb7f3..957001af6 100644
--- a/ui/public/fx/langsearch/detail.md
+++ b/ui/public/fx/langsearch/detail.md
@@ -7,7 +7,7 @@ LangSearch 是一个提供免费Web Search API和Rerank API的服务，支持新
 
 1. 获取API Key 
 在[Langsearch](https://langsearch.com/overview) 上申请 API 密钥。
-![API Key](/ui/fx/img/langsearchAPI_Key.jpg)
+![API Key](/ui/fx/img/langsearch_APIKey.jpg)
 2. 在函数库中配置
 在函数库的LangSearch函数面板中，点击 … > 启用参数，填写 API 密钥，并启用该函数。   
 ![启动参数](/ui/fx/img/langsearch_setting.jpg)
diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index.vue b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
index de216fd25..b4d62b23e 100644
--- a/ui/src/components/ai-chat/component/chat-input-operate/index.vue
+++ b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -780,6 +780,4 @@ onMounted(() => {
     }
   }
 }
-.chat-pc {
-}
 </style>
diff --git a/ui/src/components/ai-chat/component/user-form/index.vue b/ui/src/components/ai-chat/component/user-form/index.vue
index ea7d83f8b..125640230 100644
--- a/ui/src/components/ai-chat/component/user-form/index.vue
+++ b/ui/src/components/ai-chat/component/user-form/index.vue
@@ -65,6 +65,9 @@ import { useRoute } from 'vue-router'
 import { MsgWarning } from '@/utils/message'
 import { t } from '@/locales'
 const route = useRoute()
+const {
+  params: { accessToken }
+} = route
 const props = defineProps<{
   application: any
   type: 'log' | 'ai-chat' | 'debug-ai-chat'
@@ -78,6 +81,8 @@ const inputFieldList = ref<FormField[]>([])
 const apiInputFieldList = ref<FormField[]>([])
 const inputFieldConfig = ref({ title: t('chat.userInput') })
 const showUserInput = ref(true)
+const firstMounted = ref(false)
+
 const emit = defineEmits(['update:api_form_data', 'update:form_data', 'confirm', 'cancel'])
 
 const api_form_data_context = computed({
@@ -100,7 +105,7 @@ const form_data_context = computed({
 
 watch(
   () => props.application,
-  () => {
+  (data) => {
     handleInputFieldList()
   }
 )
@@ -352,15 +357,15 @@ const decodeQuery = (query: string) => {
   }
 }
 const confirmHandle = () => {
-  if (checkInputParam()) {
-    emit('confirm')
-  }
+  localStorage.setItem(`${accessToken}userForm`, JSON.stringify(form_data_context.value))
+  emit('confirm')
 }
 const cancelHandle = () => {
   emit('cancel')
 }
 defineExpose({ checkInputParam })
 onMounted(() => {
+  firstMounted.value = true
   handleInputFieldList()
 })
 </script>
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 6003af556..563e6fb49 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -196,13 +196,27 @@ const toggleUserInput = () => {
 }
 
 function UserFormConfirm() {
-  firsUserInput.value = false
-  showUserInput.value = false
+  if (userFormRef.value?.checkInputParam()) {
+    firsUserInput.value = false
+    showUserInput.value = false
+  }
 }
 
 function sendMessage(val: string, other_params_data?: any, chat?: chatType) {
   if (!userFormRef.value?.checkInputParam()) {
+    if (isUserInput.value) {
+      showUserInput.value = true
+    }
     return
+  } else {
+    let userFormData = JSON.parse(localStorage.getItem(`${accessToken}userForm`) || '{}')
+    const newData = Object.keys(form_data.value).reduce((result: any, key: string) => {
+      result[key] = Object.prototype.hasOwnProperty.call(userFormData, key)
+        ? userFormData[key]
+        : form_data.value[key]
+      return result
+    }, {})
+    localStorage.setItem(`${accessToken}userForm`, JSON.stringify(newData))
   }
   if (!loading.value && props.applicationDetails?.name) {
     handleDebounceClick(val, other_params_data, chat)
@@ -505,6 +519,10 @@ const handleScroll = () => {
 }
 
 onMounted(() => {
+  if (isUserInput.value && localStorage.getItem(`${accessToken}userForm`)) {
+    let userFormData = JSON.parse(localStorage.getItem(`${accessToken}userForm`) || '{}')
+    form_data.value = userFormData
+  }
   window.speechSynthesis.cancel()
   window.sendMessage = sendMessage
   bus.on('on:transcribing', (status: boolean) => {
diff --git a/ui/src/views/function-lib/index.vue b/ui/src/views/function-lib/index.vue
index a211fe9ae..989d08bd9 100644
--- a/ui/src/views/function-lib/index.vue
+++ b/ui/src/views/function-lib/index.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="function-lib-list-container p-24" style="padding-top: 16px">
-    <el-tabs v-model="functionType" @tab-change="selectUserId = ''">
+    <el-tabs
+      v-model="functionType"
+      @tab-change="
+      tabChangeHandle
+    
+      "
+    >
       <el-tab-pane :label="$t('views.functionLib.title')" name="PUBLIC"></el-tab-pane>
       <el-tab-pane :label="$t('views.functionLib.internalTitle')" name="INTERNAL"></el-tab-pane>
     </el-tabs>
@@ -280,11 +286,6 @@ import { isAppIcon } from '@/utils/application'
 import InfiniteScroll from '@/components/infinite-scroll/index.vue'
 import CardBox from '@/components/card-box/index.vue'
 import AddInternalFunctionDialog from '@/views/function-lib/component/AddInternalFunctionDialog.vue'
-// const internalDesc: Record<string, any> = import.meta.glob('/fx/*/detail.md', {
-//   eager: true,
-//   as: 'raw'
-// })
-// console.log(internalDesc)
 
 const { user } = useStore()
 
@@ -331,6 +332,11 @@ watch(
   { immediate: true }
 )
 
+function tabChangeHandle() {
+  selectUserId.value = 'all'
+  searchValue.value = ''
+}
+
 const canEdit = (row: any) => {
   return user.userInfo?.id === row?.user_id
 }
@@ -404,10 +410,12 @@ async function changeState(bool: Boolean, row: any) {
       })
   } else {
     const res = await functionLibApi.getFunctionLibById(row.id, changeStateloading)
-    if (!res.data.init_params &&
+    if (
+      !res.data.init_params &&
       res.data.init_field_list &&
       res.data.init_field_list.length > 0 &&
-      res.data.init_field_list.filter((item: any) => item.default_value).length !== res.data.init_field_list.length
+      res.data.init_field_list.filter((item: any) => item.default_value).length !==
+        res.data.init_field_list.length
     ) {
       InitParamDrawerRef.value.open(res.data, bool)
       row.is_active = false