From af4079f1c03eddc68fec77b731688b25f633a88d Mon Sep 17 00:00:00 2001
From: ymayarajan3 <mayarajan222@gmail.com>
Date: Wed, 7 Aug 2024 00:49:45 -0400
Subject: [PATCH] text input

---
 extensions/src/doodlebot/FileArgument.svelte | 40 +++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/extensions/src/doodlebot/FileArgument.svelte b/extensions/src/doodlebot/FileArgument.svelte
index e5351a4a8..589002f9c 100644
--- a/extensions/src/doodlebot/FileArgument.svelte
+++ b/extensions/src/doodlebot/FileArgument.svelte
@@ -39,14 +39,52 @@
         if (input.files && input.files[0]) {
           const file = input.files[0];
           const blobUrl = URL.createObjectURL(file);
+          // Set the file name to the text input and the full value
+          document.getElementById("textInput").value = file.name;
           value = file.name + "---name---" + blobUrl;
           text = file.name;
         }
       });
+
+    // Handle text input change
+    document.getElementById("textInput")?.addEventListener("input", (event) => {
+      const input = event.target as HTMLInputElement;
+      // Update the value with the current text input value and maintain the blob URL
+      const blobUrl = document.querySelector("#fileInput").files[0]
+        ? URL.createObjectURL(document.querySelector("#fileInput").files[0])
+        : "";
+      value = input.value + "---name---" + blobUrl;
+      text = input.value;
+    });
   });
 </script>
 
-<input type="file" id="fileInput" />
+<div class="container">
+  <input type="file" id="fileInput" />
+  <input type="text" id="textInput" />
+</div>
 
 <style>
+  .container {
+    display: flex;
+    flex-direction: column; /* Arrange children vertically */
+    gap: 10px; /* Space between inputs */
+    max-width: 300px; /* Set a maximum width if desired */
+    margin: 20px; /* Margin around the container */
+  }
+
+  input {
+    padding: 8px; /* Add padding for better appearance */
+    font-size: 16px; /* Increase font size for better readability */
+    border: 1px solid #ccc; /* Light border */
+    border-radius: 4px; /* Rounded corners */
+  }
+
+  input[type="file"] {
+    border: 2px dashed #007bff; /* Dashed border for file input */
+  }
+
+  input[type="text"] {
+    border: 2px solid #007bff; /* Solid border for text input */
+  }
 </style>