Fix: The pop-up menu of the PromptEditor will be blocked. #14126 (#14127)

### What problem does this PR solve?

Fix: The pop-up menu of the PromptEditor will be blocked.  #14126

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

Co-authored-by: balibabu <assassin_cike@163.com>

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);

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,
         );