From 5a2099a1c7301720f6e502d22ddc92269c8e7dd9 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 27 Jun 2025 12:11:29 +0800
Subject: [PATCH] Feat: Fixed the issue where the prompt menu content was
 hidden #3221 (#8530)

### What problem does this PR solve?

Feat: Fixed the issue where the prompt menu content was hidden #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/package-lock.json                            | 13 +++++++++++++
 web/package.json                                 |  1 +
 web/src/pages/agent/constant.tsx                 |  3 ++-
 .../prompt-editor/variable-picker-plugin.tsx     |  4 +---
 .../form/string-transform-form/use-values.ts     | 16 +++++++++++-----
 web/tailwind.config.js                           |  6 +++++-
 6 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index ad3faec8f..f06080d39 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -89,6 +89,7 @@
         "remark-math": "^6.0.0",
         "sonner": "^1.7.4",
         "tailwind-merge": "^2.5.4",
+        "tailwind-scrollbar": "^3.1.0",
         "tailwindcss-animate": "^1.0.7",
         "umi": "^4.0.90",
         "umi-request": "^1.4.0",
@@ -31293,6 +31294,18 @@
         "url": "https://github.com/sponsors/dcastil"
       }
     },
+    "node_modules/tailwind-scrollbar": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/tailwind-scrollbar/-/tailwind-scrollbar-3.1.0.tgz",
+      "integrity": "sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "3.x"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.14",
       "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.14.tgz",
diff --git a/web/package.json b/web/package.json
index 6184959ef..f6810c800 100644
--- a/web/package.json
+++ b/web/package.json
@@ -100,6 +100,7 @@
     "remark-math": "^6.0.0",
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.5.4",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
     "umi": "^4.0.90",
     "umi-request": "^1.4.0",
diff --git a/web/src/pages/agent/constant.tsx b/web/src/pages/agent/constant.tsx
index ea78c9765..3697f9188 100644
--- a/web/src/pages/agent/constant.tsx
+++ b/web/src/pages/agent/constant.tsx
@@ -723,7 +723,7 @@ export const initialStringTransformValues = {
   method: StringTransformMethod.Merge,
   split_ref: '',
   script: '',
-  delimiters: [],
+  delimiters: [StringTransformDelimiter.Comma],
   outputs: {
     result: {
       type: 'string',
@@ -851,6 +851,7 @@ export const RestrictedUpstreamMap = {
   [Operator.WaitingDialogue]: [Operator.Begin],
   [Operator.Agent]: [Operator.Begin],
   [Operator.TavilySearch]: [Operator.Begin],
+  [Operator.StringTransform]: [Operator.Begin],
 };
 
 export const NodeMap = {
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 afa54d477..8797f2236 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
@@ -67,7 +67,6 @@ function VariablePickerMenuItem({
     option: VariableOption | VariableInnerOption,
   ) => void;
 }) {
-  console.info('xxxx');
   return (
     <li
       key={option.key}
@@ -245,11 +244,10 @@ export default function VariablePickerMenuPlugin({
       options={buildNextOptions()}
       menuRenderFn={(anchorElementRef, { selectOptionAndCleanUp }) => {
         const nextOptions = buildNextOptions();
-        console.log('🚀 ~ nextOptions:', nextOptions);
         return anchorElementRef.current && nextOptions.length
           ? ReactDOM.createPortal(
               <div className="typeahead-popover w-[200px] p-2">
-                <ul>
+                <ul className="overflow-y-auto !scrollbar-thin overflow-x-hidden">
                   {nextOptions.map((option, i: number) => (
                     <VariablePickerMenuItem
                       index={i}
diff --git a/web/src/pages/agent/form/string-transform-form/use-values.ts b/web/src/pages/agent/form/string-transform-form/use-values.ts
index 363f1567d..d4596e339 100644
--- a/web/src/pages/agent/form/string-transform-form/use-values.ts
+++ b/web/src/pages/agent/form/string-transform-form/use-values.ts
@@ -6,20 +6,26 @@ import {
   StringTransformMethod,
 } from '../../constant';
 
+function transferDelimiters(formData: typeof initialStringTransformValues) {
+  return formData.method === StringTransformMethod.Merge
+    ? formData.delimiters[0]
+    : formData.delimiters;
+}
+
 export function useValues(node?: RAGFlowNodeType) {
   const values = useMemo(() => {
     const formData = node?.data?.form;
 
     if (isEmpty(formData)) {
-      return initialStringTransformValues;
+      return {
+        ...initialStringTransformValues,
+        delimiters: transferDelimiters(formData),
+      };
     }
 
     return {
       ...formData,
-      delimiters:
-        formData.method === StringTransformMethod.Merge
-          ? formData.delimiters[0]
-          : formData.delimiters,
+      delimiters: transferDelimiters(formData),
     };
   }, [node?.data?.form]);
 
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 81237478f..e2c2a2e4b 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -219,5 +219,9 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/line-clamp')],
+  plugins: [
+    require('tailwindcss-animate'),
+    require('@tailwindcss/line-clamp'),
+    require('tailwind-scrollbar'),
+  ],
 };