From ffdf19b27fd966b8215bb048e386da8738444f95 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 4 Feb 2026 17:54:02 +0800
Subject: [PATCH] Fix: Variables within multiple parentheses cannot be
 displayed correctly. #12987 (#12988)

### What problem does this PR solve?
Fix: Variables within multiple parentheses cannot be displayed
correctly. #12987

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/pages/agent/canvas/node/variable-display.tsx       | 7 +++++--
 web/src/pages/agent/constant/index.tsx                     | 2 ++
 .../components/prompt-editor/variable-picker-plugin.tsx    | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/agent/canvas/node/variable-display.tsx b/web/src/pages/agent/canvas/node/variable-display.tsx
index cfca809f7..2c74ba3bf 100644
--- a/web/src/pages/agent/canvas/node/variable-display.tsx
+++ b/web/src/pages/agent/canvas/node/variable-display.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { VariableRegex } from '../../constant';
 
 interface VariableDisplayProps {
   content: string;
@@ -7,7 +8,9 @@ interface VariableDisplayProps {
 
 // This component mimics the VariableNode's decorate function from PromptEditor
 function VariableNodeDisplay({ label }: { label: ReactNode }) {
-  let content: ReactNode = <span className="text-accent-primary">{label}</span>;
+  const content: ReactNode = (
+    <span className="text-accent-primary">{label}</span>
+  );
 
   return <div className="inline-flex items-center mr-1">{content}</div>;
 }
@@ -16,7 +19,7 @@ export function VariableDisplay({ content, getLabel }: VariableDisplayProps) {
   if (!content) return null;
 
   // Regular expression to match content within {}
-  const regex = /{([^}]*)}/g;
+  const regex = VariableRegex;
   let match;
   let lastIndex = 0;
   const elements: ReactNode[] = [];
diff --git a/web/src/pages/agent/constant/index.tsx b/web/src/pages/agent/constant/index.tsx
index 6f3df42ec..a99b96bc1 100644
--- a/web/src/pages/agent/constant/index.tsx
+++ b/web/src/pages/agent/constant/index.tsx
@@ -1085,3 +1085,5 @@ export const BeginQueryTypeMap = {
   [BeginQueryType.Integer]: TypesWithArray.Number,
   [BeginQueryType.Boolean]: TypesWithArray.Boolean,
 };
+
+export const VariableRegex = /{([^{}]*)}/g;
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 621bdcc10..822a77d9b 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
@@ -31,7 +31,7 @@ import * as ReactDOM from 'react-dom';
 
 import { $createVariableNode } from './variable-node';
 
-import { JsonSchemaDataType } from '@/pages/agent/constant';
+import { JsonSchemaDataType, VariableRegex } from '@/pages/agent/constant';
 import {
   useFindAgentStructuredOutputLabel,
   useShowSecondaryMenu,
@@ -299,7 +299,7 @@ export default function VariablePickerMenuPlugin({
   // Handles variable references in the format {variable_name}.
   const parseLineContent = useCallback(
     (line: string, paragraph: ReturnType<typeof $createParagraphNode>) => {
-      const regex = /{([^}]*)}/g;
+      const regex = VariableRegex;
       let match;
       let lastIndex = 0;