From 9fd2f798ff962a3a290723ea0b45c23a15970cf6 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 20 Sep 2024 15:19:38 +0800
Subject: [PATCH] feat: add type palcehloder in picker

---
 .../_base/components/variable/var-reference-picker.tsx | 10 ++++++++++
 .../workflow/nodes/document-extractor/panel.tsx        |  1 +
 .../components/workflow/nodes/list-filter/panel.tsx    |  1 +
 3 files changed, 12 insertions(+)

diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 1856d9a9a8..c29c1ad282 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -58,6 +58,7 @@ type Props = {
   valueTypePlaceHolder?: string
   isInTable?: boolean
   onRemove?: () => void
+  typePlaceHolder?: string
 }
 
 const VarReferencePicker: FC<Props> = ({
@@ -79,6 +80,7 @@ const VarReferencePicker: FC<Props> = ({
   valueTypePlaceHolder,
   isInTable,
   onRemove,
+  typePlaceHolder,
 }) => {
   const { t } = useTranslation()
   const store = useStoreApi()
@@ -362,6 +364,14 @@ const VarReferencePicker: FC<Props> = ({
                 onClick={() => onRemove?.()}
               />
             )}
+
+            {!hasValue && typePlaceHolder && (
+              <Badge
+                className='absolute right-2 top-1.5'
+                text={typePlaceHolder}
+                uppercase={false}
+              />
+            )}
           </>
         </WrapElem>
         <PortalToFollowElemContent style={{
diff --git a/web/app/components/workflow/nodes/document-extractor/panel.tsx b/web/app/components/workflow/nodes/document-extractor/panel.tsx
index 7ba258c1e3..c09f0d51ff 100644
--- a/web/app/components/workflow/nodes/document-extractor/panel.tsx
+++ b/web/app/components/workflow/nodes/document-extractor/panel.tsx
@@ -36,6 +36,7 @@ const Panel: FC<NodePanelProps<DocExtractorNodeType>> = ({
             value={inputs.variable_selector || []}
             onChange={handleVarChanges}
             filterVar={filterVar}
+            typePlaceHolder='File | Array[File]'
           />
         </Field>
       </div>
diff --git a/web/app/components/workflow/nodes/list-filter/panel.tsx b/web/app/components/workflow/nodes/list-filter/panel.tsx
index fa5699f923..9ae6991a13 100644
--- a/web/app/components/workflow/nodes/list-filter/panel.tsx
+++ b/web/app/components/workflow/nodes/list-filter/panel.tsx
@@ -50,6 +50,7 @@ const Panel: FC<NodePanelProps<ListFilterNodeType>> = ({
             value={inputs.variable || []}
             onChange={handleVarChanges}
             filterVar={filterVar}
+            typePlaceHolder='Array'
           />
         </Field>