diff --git a/web/package-lock.json b/web/package-lock.json
index da7ecd28ef..951419452d 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -12,6 +12,7 @@
         "@ant-design/pro-layout": "^7.17.16",
         "@antv/g2": "^5.2.10",
         "@antv/g6": "^5.1.0",
+        "@floating-ui/react": "^0.27.19",
         "@hookform/resolvers": "^3.9.1",
         "@js-preview/excel": "^1.7.14",
         "@lexical/react": "^0.23.1",
@@ -2466,31 +2467,46 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz",
-      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/utils": "^0.2.11"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.4.tgz",
-      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "version": "1.7.6",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.7.3",
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.19",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/react/-/react-0.27.19.tgz",
+      "integrity": "sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.8",
+        "@floating-ui/utils": "^0.2.11",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
-      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.7.4"
+        "@floating-ui/dom": "^1.7.6"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -2498,9 +2514,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz",
-      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "version": "0.2.11",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
     "node_modules/@hookform/devtools": {
@@ -26413,6 +26429,12 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmmirror.com/tabbable/-/tabbable-6.4.0.tgz",
+      "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "2.6.1",
       "resolved": "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
diff --git a/web/package.json b/web/package.json
index df8a039ade..990664e9bf 100644
--- a/web/package.json
+++ b/web/package.json
@@ -31,6 +31,7 @@
     "@ant-design/pro-layout": "^7.17.16",
     "@antv/g2": "^5.2.10",
     "@antv/g6": "^5.1.0",
+    "@floating-ui/react": "^0.27.19",
     "@hookform/resolvers": "^3.9.1",
     "@js-preview/excel": "^1.7.14",
     "@lexical/react": "^0.23.1",
diff --git a/web/src/components/llm-setting-items/next.tsx b/web/src/components/llm-setting-items/next.tsx
index bb764c1e3f..dcb9e8b6f3 100644
--- a/web/src/components/llm-setting-items/next.tsx
+++ b/web/src/components/llm-setting-items/next.tsx
@@ -149,7 +149,7 @@ export function LlmSettingFieldItems({
             <FormLabel className="flex-1">{t('freedom')}</FormLabel>
             <FormControl>
               <Select
-                {...field}
+                value={field.value}
                 onValueChange={(val) => {
                   handleChange(val);
                   field.onChange(val);
diff --git a/web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx b/web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx
index a54980c8d1..a68bfd4fd9 100644
--- a/web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx
+++ b/web/src/pages/agent/form/components/prompt-editor/variable-picker-plugin.tsx
@@ -48,10 +48,18 @@ import {
   useShowSecondaryMenu,
 } from '@/pages/agent/hooks/use-build-structured-output';
 import { useFilterQueryVariableOptionsByTypes } from '@/pages/agent/hooks/use-get-begin-query';
+import {
+  flip,
+  FloatingPortal,
+  offset,
+  shift,
+  useFloating,
+} from '@floating-ui/react';
 import { LucideChevronRight } from 'lucide-react';
 import { PromptIdentity } from '../../agent-form/use-build-prompt-options';
 import { StructuredOutputSecondaryMenu } from '../structured-output-secondary-menu';
 import { ProgrammaticTag } from './constant';
+
 import './index.css';
 
 const SelectedValueContext = createContext<string>('');
@@ -649,6 +657,11 @@ export default function VariablePickerMenuPlugin({
     }
   }, [parseTextToVariableNodes, editor, value]);
 
+  const { x, y, refs, strategy } = useFloating({
+    placement: 'bottom-start',
+    middleware: [offset(6), flip(), shift()],
+  });
+
   // Fixed the issue where the cursor would go to the end when changing its own data
   useEffect(() => {
     return editor.registerUpdateListener(({ editorState, tags }) => {
@@ -678,6 +691,11 @@ export default function VariablePickerMenuPlugin({
       }
       triggerFn={testTriggerFn}
       options={unifiedOptions.flattened}
+      onOpen={(r) => {
+        refs.setPositionReference({
+          getBoundingClientRect: r.getRect,
+        });
+      }}
       menuRenderFn={(
         anchorElementRef,
         { selectOptionAndCleanUp, options, selectedIndex },
@@ -694,21 +712,32 @@ export default function VariablePickerMenuPlugin({
               ''
             }
           >
-            <div className="typeahead-popover w-80 bg-bg-base border-0.5 border-border">
-              <ScrollArea className="p-2">
-                <div className="max-h-64 space-y-2">
-                  {unifiedOptions.treeified.map((group) => (
-                    <VariablePickerOptionGroup
-                      key={group.title}
-                      title={group.title}
-                      options={group.options}
-                      types={types}
-                      selectOptionAndCleanUp={selectOptionAndCleanUp}
-                    />
-                  ))}
-                </div>
-              </ScrollArea>
-            </div>
+            <FloatingPortal>
+              <div
+                ref={refs.setFloating}
+                className="typeahead-popover w-80 bg-bg-base border-0.5 border-border"
+                style={{
+                  position: strategy,
+                  top: y ?? 0,
+                  left: x ?? 0,
+                  width: 'max-content',
+                }}
+              >
+                <ScrollArea className="p-2">
+                  <div className="max-h-64 space-y-2">
+                    {unifiedOptions.treeified.map((group) => (
+                      <VariablePickerOptionGroup
+                        key={group.title}
+                        title={group.title}
+                        options={group.options}
+                        types={types}
+                        selectOptionAndCleanUp={selectOptionAndCleanUp}
+                      />
+                    ))}
+                  </div>
+                </ScrollArea>
+              </div>
+            </FloatingPortal>
           </SelectedValueContext.Provider>,
           anchorElementRef.current,
         );