perf: variable label picker scroll & focus disappear (#2135)

* fix: variable label picker scroll & focus disappear

* fix

* fix filter

* revert

projects/app/src/components/core/chat/ChatContainer/ChatBox/Provider.tsx

@@ -35,6 +35,7 @@ type useChatStoreType = OutLinkChatAuthProps &
   ChatProviderProps & {
     welcomeText: string;
     variableList: VariableItemType[];
+    allVariableList: VariableItemType[];
     questionGuide: boolean;
     ttsConfig: AppTTSConfigType;
     whisperConfig: AppWhisperConfigType;
@@ -189,6 +190,7 @@ const Provider = ({
     teamToken,
     welcomeText,
     variableList: variables.filter((item) => item.type !== VariableInputEnum.custom),
+    allVariableList: variables,
     questionGuide,
     ttsConfig,
     whisperConfig,

projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx

@@ -21,7 +21,7 @@ const VariableInput = ({
   const { t } = useTranslation();
 
   const { appAvatar, variableList, variablesForm } = useContextSelector(ChatBoxContext, (v) => v);
-  const { register, getValues, setValue, handleSubmit: handleSubmitChat, control } = variablesForm;
+  const { register, setValue, handleSubmit: handleSubmitChat, control } = variablesForm;
 
   return (
     <Box py={3}>

projects/app/src/components/core/chat/ChatContainer/ChatBox/index.tsx

@@ -140,6 +140,7 @@ const ChatBox = (
   const {
     welcomeText,
     variableList,
+    allVariableList,
     questionGuide,
     startSegmentedAudio,
     finishSegmentedAudio,
@@ -390,7 +391,7 @@ const ChatBox = (
 
           // delete invalid variables， 只保留在 variableList 中的变量
           const requestVariables: Record<string, any> = {};
-          variableList?.forEach((item) => {
+          allVariableList?.forEach((item) => {
             requestVariables[item.key] = variables[item.key] || '';
           });
 

projects/app/src/pages/app/detail/components/useChatTest.tsx

@@ -10,7 +10,6 @@ import {
   storeNodes2RuntimeNodes
 } from '@fastgpt/global/core/workflow/runtime/utils';
 import { useMemoizedFn } from 'ahooks';
-import { AppChatConfigType } from '@fastgpt/global/core/app/type';
 import { useContextSelector } from 'use-context-selector';
 import { AppContext } from './context';
 import { StoreNodeItemType } from '@fastgpt/global/core/workflow/type/node';
@@ -21,6 +20,7 @@ import dynamic from 'next/dynamic';
 import { useChat } from '@/components/core/chat/ChatContainer/useChat';
 import { Box } from '@chakra-ui/react';
 import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
+import { AppChatConfigType } from '@fastgpt/global/core/app/type';
 
 const PluginRunBox = dynamic(() => import('@/components/core/chat/ChatContainer/PluginRunBox'));
 

projects/app/src/pages/app/list/index.tsx

@@ -132,8 +132,9 @@ const MyApps = () => {
         </Box>
       )}
       <Flex gap={5} flex={'1 0 0'} h={0}>
-        <Box
+        <Flex
           flex={'1 0 0'}
+          flexDirection={'column'}
           h={'100%'}
           pr={folderDetail ? [4, 2] : [4, 10]}
           pl={3}
@@ -237,7 +238,7 @@ const MyApps = () => {
           <MyBox flex={'1 0 0'} isLoading={myApps.length === 0 && isFetchingApps}>
             <List />
           </MyBox>
-        </Box>
+        </Flex>
 
         {/* Folder slider */}
         {!!folderDetail && isPc && (