Textbox

pyproject.toml

@@ -65,4 +65,4 @@ django-silk = ">= 5.3.2"
 
 [build-system]
 requires = ["poetry-core"]
-build-backend = "poetry.core.masonry.api"
+build-backend = "poetry.core.masonry.api"

unfold_studio/static/base/base_style.css

@@ -355,4 +355,55 @@ form.new_story_form {
 form.new_story_form > div {
     display: flex;
     flex-direction: column;
-}
+}
+
+.input-container button,
+form button[type="submit"] {
+    background-color: #8e44ad;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.input-container button:hover,
+form button[type="submit"]:hover {
+    background-color: #2980b9;
+}
+
+/* Style textarea for longer responses */
+.input-container textarea {
+    width: 350px;
+    min-height: 60px;
+    max-height: 200px;
+    padding: 8px;
+    font-size: 14px;
+    font-family: inherit;
+    border: 2px solid #bdc3c7;
+    border-radius: 4px;
+    box-sizing: border-box;
+    resize: vertical;
+    overflow-y: auto;
+}
+
+.input-container textarea:focus {
+    border-color: #3498db;
+    outline: none;
+}
+
+/* Keep flex styling only on the form for textarea and button layout */
+.input-container form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+}
+
+.input-container form button[type="submit"] {
+    align-self: flex-start;
+    width: auto;
+    margin-top: 0;
+}

unfold_studio/static/player.js

@@ -260,21 +260,28 @@ InkPlayer.prototype = {
     createInputForm: function(formType, eventHandler, placeholder, variableName=null) {
         const formContainer = document.createElement("div");
         formContainer.classList.add("input-container");
-    
+
         const formElement = document.createElement("form");
 
-        const inputElement = document.createElement("input");
-        inputElement.type = "text";
+        const inputElement = document.createElement("textarea");
         inputElement.placeholder = placeholder;
         inputElement.required = true;
+        inputElement.rows = 3;
+        inputElement.style.resize = "vertical";
+
+        // Auto-resize functionality
+        inputElement.addEventListener("input", function() {
+            this.style.height = "auto";
+            this.style.height = this.scrollHeight + "px";
+        });
 
         const buttonElement = document.createElement("button");
         buttonElement.type = "submit";
         buttonElement.innerText = "Submit";
 
         formElement.appendChild(inputElement);
         formElement.appendChild(buttonElement);
-    
+
         formElement.addEventListener("submit", (event) => {
             event.preventDefault();
             const userInput = inputElement.value.trim();
@@ -284,16 +291,15 @@ InkPlayer.prototype = {
             buttonElement.disabled = true;
             formElement.style.opacity = "0.5";
         });
-    
+
         this.createStoryPlayRecord(
             this.getStoryPlayInstanceUUID(),
             formType,
             {"placeholder": placeholder, "variableName": variableName}
         );
-
-        formContainer.appendChild(formElement);
 
-        return formContainer
+        formContainer.appendChild(formElement);
+        return formContainer;
     },
     handleUserInputForContinue: async function(userInput){
         targetKnotName = this.currentTargetKnot;