From e2b0bceb1bcd5576cecb74526eca7f51004e9754 Mon Sep 17 00:00:00 2001
From: so95 <is.thaison@gmail.com>
Date: Wed, 30 Apr 2025 13:48:41 +0700
Subject: [PATCH] Feat: filler list by user change input (#7389)

### What problem does this PR solve?

filler list by user change input

![Recording2025-04-28163440-ezgif
com-video-to-gif-converter](https://github.com/user-attachments/assets/6ff2cfea-dea9-4293-b9a6-b4c61ab9a549)

### Type of change

- [x] New Feature (non-breaking change which adds functionality)
---
 .../prompt-editor/variable-picker-plugin.tsx  | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/web/src/components/prompt-editor/variable-picker-plugin.tsx b/web/src/components/prompt-editor/variable-picker-plugin.tsx
index b50e540ee..7aeb798b6 100644
--- a/web/src/components/prompt-editor/variable-picker-plugin.tsx
+++ b/web/src/components/prompt-editor/variable-picker-plugin.tsx
@@ -20,7 +20,7 @@ import {
   $isRangeSelection,
   TextNode,
 } from 'lexical';
-import {
+import React, {
   ReactElement,
   useCallback,
   useContext,
@@ -114,11 +114,26 @@ export default function VariablePickerMenuPlugin({
     minLength: 0,
   });
 
-  const setQueryString = useCallback(() => {}, []);
+  const [queryString, setQueryString] = React.useState<string| null>('');
 
   const options = useBuildComponentIdSelectOptions(node?.id, node?.parentId);
 
-  const nextOptions: VariableOption[] = options.map(
+  const filteredOptions = React.useMemo(() => {
+    if (!queryString) return options;
+    const lowerQuery = queryString.toLowerCase();
+    return options
+      .map((x) => ({
+        ...x,
+        options: x.options.filter(
+          (y) =>
+            y.label.toLowerCase().includes(lowerQuery) ||
+            y.value.toLowerCase().includes(lowerQuery),
+        ),
+      }))
+      .filter((x) => x.options.length > 0);
+  }, [options, queryString]);
+
+  const nextOptions: VariableOption[] = filteredOptions.map(
     (x) =>
       new VariableOption(
         x.label,