From 608af741ea63f2f7923626a2250ec9fa76e4ad14 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 15 Dec 2023 17:36:42 +0100
Subject: [PATCH] feat(frontend): Add submitted text prop (#2864)

* feat(frontend): add a prop to control the text after a file is uploaded

* feat(frontend): add a prop to control the text after a file is uploaded
---
 .../components/apps/components/inputs/AppFileInput.svelte | 8 ++++++++
 .../apps/components/layout/AppDecisionTree.svelte         | 1 -
 .../lib/components/apps/editor/component/components.ts    | 5 +++++
 .../src/lib/components/common/fileInput/FileInput.svelte  | 3 ++-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
index 093fd74fe1..2c46d5e783 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
@@ -20,6 +20,7 @@
 	let allowMultiple: boolean | undefined = undefined
 	let text: string | undefined = undefined
 	let includeMimeType: boolean | undefined = undefined
+	let submittedFileText: string | undefined = undefined
 
 	let outputs = initOutput($worldStore, id, {
 		result: [] as { name: string; data: string }[] | undefined
@@ -58,6 +59,12 @@
 <InputValue key="multiple" {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
 <InputValue key="text" {id} input={configuration.text} bind:value={text} />
 <InputValue key="mime" {id} input={configuration.includeMimeType} bind:value={includeMimeType} />
+<InputValue
+	key="submittedFileText"
+	{id}
+	input={configuration.submittedFileText}
+	bind:value={submittedFileText}
+/>
 
 <InitializeComponent {id} />
 
@@ -73,6 +80,7 @@
 			}}
 			class={twMerge('w-full h-full', css?.container?.class, 'wm-file-input')}
 			style={css?.container?.style}
+			submittedText={submittedFileText}
 		>
 			{text}
 		</FileInput>
diff --git a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
index ed1a9b71e7..4c536880e2 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
@@ -170,7 +170,6 @@
 	{#if nodes[0].id !== currentNodeId}
 		<Button on:click={prev} size="xs2" color="light" startIcon={{ icon: ArrowLeft }}>Prev</Button>
 	{/if}
-	<span class="text-xs text-primary">Tab: {currentNodeId}</span>
 	<Button
 		on:click={next}
 		size="xs2"
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 48c299232f..5c004a0ba3 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/frontend/src/lib/components/apps/editor/component/components.ts
@@ -2357,6 +2357,11 @@ This is a paragraph.
 					value: false,
 					fieldType: 'boolean',
 					tooltip: 'If enabled, the mime type of the file will be included.'
+				},
+				submittedFileText: {
+					type: 'static',
+					value: 'Selected file',
+					fieldType: 'text'
 				}
 			}
 		}
diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
index 8349f50fd7..8f42e3dd10 100644
--- a/frontend/src/lib/components/common/fileInput/FileInput.svelte
+++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -16,6 +16,7 @@
 	export let hideIcon = false
 	export let iconSize = 36
 	export let returnFileNames = false
+	export let submittedText: string | undefined = undefined
 	const dispatch = createEventDispatcher()
 	let input: HTMLInputElement
 	let files: File[] | undefined = undefined
@@ -124,7 +125,7 @@
 		<div class="w-full max-h-full overflow-auto px-6">
 			<slot name="selected-title">
 				<div class="text-center mb-2 px-2">
-					Selected file{files.length > 1 ? 's' : ''}:
+					{submittedText ? submittedText : `Selected file${files.length > 1 ? 's' : ''}`}:
 				</div>
 			</slot>
 			<ul class="relative z-20 max-w-[500px] bg-surface rounded-lg overflow-hidden mx-auto">