From 5f9a104d0f4046bb8e08131a70e54bc3ebdee31d Mon Sep 17 00:00:00 2001 From: tofu11 <87494814+tofu11@users.noreply.github.com> Date: Wed, 8 Oct 2025 14:53:14 -0400 Subject: [PATCH 1/4] Initial push for More graceful user input in the UI #234 --- poetry.lock | 65 +++++++----------------- pyproject.toml | 3 ++ unfold_studio/static/base/base_style.css | 44 +++++++++++++++- unfold_studio/static/player.js | 22 +++++--- 4 files changed, 77 insertions(+), 57 deletions(-) diff --git a/poetry.lock b/poetry.lock index c1c8ca6..4db94e6 100644 --- a/poetry.lock +++ b/poetry.lock @@ -1,4 +1,4 @@ -# This file is automatically @generated by Poetry 2.1.3 and should not be changed by hand. +# This file is automatically @generated by Poetry 2.1.4 and should not be changed by hand. [[package]] name = "annotated-types" @@ -89,21 +89,6 @@ docs = ["cogapp", "furo", "myst-parser", "sphinx", "sphinx-notfound-page", "sphi tests = ["cloudpickle ; platform_python_implementation == \"CPython\"", "hypothesis", "mypy (>=1.11.1) ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pytest-xdist[psutil]"] tests-mypy = ["mypy (>=1.11.1) ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pytest-mypy-plugins ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\""] -[[package]] -name = "autopep8" -version = "2.3.2" -description = "A tool that automatically formats Python code to conform to the PEP 8 style guide" -optional = false -python-versions = ">=3.9" -groups = ["dev"] -files = [ - {file = "autopep8-2.3.2-py2.py3-none-any.whl", hash = "sha256:ce8ad498672c845a0c3de2629c15b635ec2b05ef8177a6e7c91c74f3e9b51128"}, - {file = "autopep8-2.3.2.tar.gz", hash = "sha256:89440a4f969197b69a995e4ce0661b031f455a9f776d2c5ba3dbd83466931758"}, -] - -[package.dependencies] -pycodestyle = ">=2.12.0" - [[package]] name = "boto3" version = "1.38.11" @@ -475,14 +460,14 @@ django = ">=4.2" [[package]] name = "django-debug-toolbar" -version = "5.2.0" +version = "6.0.0" description = "A configurable set of panels that display various debug information about the current request/response." optional = false python-versions = ">=3.9" -groups = ["dev"] +groups = ["main", "dev"] files = [ - {file = "django_debug_toolbar-5.2.0-py3-none-any.whl", hash = "sha256:15627f4c2836a9099d795e271e38e8cf5204ccd79d5dbcd748f8a6c284dcd195"}, - {file = "django_debug_toolbar-5.2.0.tar.gz", hash = "sha256:9e7f0145e1a1b7d78fcc3b53798686170a5b472d9cf085d88121ff823e900821"}, + {file = "django_debug_toolbar-6.0.0-py3-none-any.whl", hash = "sha256:0cf2cac5c307b77d6e143c914e5c6592df53ffe34642d93929e5ef095ae56841"}, + {file = "django_debug_toolbar-6.0.0.tar.gz", hash = "sha256:6eb9fa6f4a5884bf04004700ffb5a44043f1fff38784447fc52c1633448c8c14"}, ] [package.dependencies] @@ -553,22 +538,24 @@ django = ">=4.2" [[package]] name = "django-silk" -version = "5.3.2" +version = "5.4.3" description = "Silky smooth profiling for the Django Framework" optional = false python-versions = ">=3.9" -groups = ["dev"] +groups = ["main", "dev"] files = [ - {file = "django_silk-5.3.2-py3-none-any.whl", hash = "sha256:49f1caebfda28b1707f0cfef524e0476beb82b8c5e40f5ccff7f73a6b4f6d3ac"}, - {file = "django_silk-5.3.2.tar.gz", hash = "sha256:b0db54eebedb8d16f572321bd6daccac0bd3f547ae2618bb45d96fe8fc02229d"}, + {file = "django_silk-5.4.3-py3-none-any.whl", hash = "sha256:f7920ae91a34716654296140b2cbf449e9798237a0c6eb7cf2cd79c2cfb39321"}, + {file = "django_silk-5.4.3.tar.gz", hash = "sha256:bedb17c8fd9c029a7746cb947864f5c9ea943ae33d6a9581e60f67c45e4490ad"}, ] [package.dependencies] -autopep8 = "*" Django = ">=4.2" gprof2dot = ">=2017.09.19" sqlparse = "*" +[package.extras] +formatting = ["autopep8"] + [[package]] name = "django-storages" version = "1.14.6" @@ -678,7 +665,7 @@ version = "2025.4.14" description = "Generate a dot graph from the output of several profilers." optional = false python-versions = ">=3.8" -groups = ["dev"] +groups = ["main", "dev"] files = [ {file = "gprof2dot-2025.4.14-py3-none-any.whl", hash = "sha256:0742e4c0b4409a5e8777e739388a11e1ed3750be86895655312ea7c20bd0090e"}, {file = "gprof2dot-2025.4.14.tar.gz", hash = "sha256:35743e2d2ca027bf48fa7cba37021aaf4a27beeae1ae8e05a50b55f1f921a6ce"}, @@ -1564,18 +1551,6 @@ docs = ["Sphinx (>=5.0)", "furo (==2022.6.21)", "sphinx-autobuild (>=2021.3.14)" pool = ["psycopg-pool"] test = ["anyio (>=4.0)", "mypy (>=1.14)", "pproxy (>=2.7)", "pytest (>=6.2.5)", "pytest-cov (>=3.0)", "pytest-randomly (>=3.5)"] -[[package]] -name = "pycodestyle" -version = "2.13.0" -description = "Python style guide checker" -optional = false -python-versions = ">=3.9" -groups = ["dev"] -files = [ - {file = "pycodestyle-2.13.0-py2.py3-none-any.whl", hash = "sha256:35863c5974a271c7a726ed228a14a4f6daf49df369d8c50cd9a6f58a5e143ba9"}, - {file = "pycodestyle-2.13.0.tar.gz", hash = "sha256:c8415bf09abe81d9c7f872502a6eee881fbe85d8763dd5b9924bb0a01d67efae"}, -] - [[package]] name = "pycparser" version = "2.22" @@ -2439,22 +2414,16 @@ doc = ["sphinx"] [[package]] name = "structlog" -version = "25.3.0" +version = "25.4.0" description = "Structured Logging for Python" optional = false python-versions = ">=3.8" groups = ["main"] files = [ - {file = "structlog-25.3.0-py3-none-any.whl", hash = "sha256:a341f5524004c158498c3127eecded091eb67d3a611e7a3093deca30db06e172"}, - {file = "structlog-25.3.0.tar.gz", hash = "sha256:8dab497e6f6ca962abad0c283c46744185e0c9ba900db52a423cb6db99f7abeb"}, + {file = "structlog-25.4.0-py3-none-any.whl", hash = "sha256:fe809ff5c27e557d14e613f45ca441aabda051d119ee5a0102aaba6ce40eed2c"}, + {file = "structlog-25.4.0.tar.gz", hash = "sha256:186cd1b0a8ae762e29417095664adf1d6a31702160a46dacb7796ea82f7409e4"}, ] -[package.extras] -dev = ["freezegun (>=0.2.8)", "mypy (>=1.4)", "pretend", "pytest (>=6.0)", "pytest-asyncio (>=0.17)", "rich", "simplejson", "twisted"] -docs = ["cogapp", "furo", "myst-parser", "sphinx", "sphinx-notfound-page", "sphinxcontrib-mermaid", "sphinxext-opengraph", "twisted"] -tests = ["freezegun (>=0.2.8)", "pretend", "pytest (>=6.0)", "pytest-asyncio (>=0.17)", "simplejson"] -typing = ["mypy (>=1.4)", "rich", "twisted"] - [[package]] name = "sympy" version = "1.14.0" @@ -2877,4 +2846,4 @@ h11 = ">=0.9.0,<1" [metadata] lock-version = "2.1" python-versions = ">=3.12,<4.0" -content-hash = "e5886f7b3ffde70cae43dd812ee100e29a8be8c3d27942250bdb9846c391c907" +content-hash = "7cb94f8f3a1ccc0c7a759f72834aecc0b96cd05a8b1165ccbd43b8021a19b465" diff --git a/pyproject.toml b/pyproject.toml index 589d2e9..8a9b8af 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -30,6 +30,9 @@ dependencies = [ "openai >= 1.35.13", "django-structlog >= 9.0.0", "pytz >= 2024.2", + "django-debug-toolbar (>=6.0.0,<7.0.0)", + "django-silk (>=5.4.3,<6.0.0)", + "structlog (>=25.4.0,<26.0.0)", ] [project.urls] diff --git a/unfold_studio/static/base/base_style.css b/unfold_studio/static/base/base_style.css index 5432b81..bead076 100644 --- a/unfold_studio/static/base/base_style.css +++ b/unfold_studio/static/base/base_style.css @@ -355,4 +355,46 @@ form.new_story_form { form.new_story_form > div { display: flex; flex-direction: column; -} \ No newline at end of file +} + +.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; +} + +.input-container button { + align-self: flex-start; + width: auto; +} diff --git a/unfold_studio/static/player.js b/unfold_studio/static/player.js index dbf1830..33992d5 100644 --- a/unfold_studio/static/player.js +++ b/unfold_studio/static/player.js @@ -260,13 +260,20 @@ 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"; @@ -274,7 +281,7 @@ InkPlayer.prototype = { 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; From 27ce1348c929f72a48f6ffea05d988ba8c30ed51 Mon Sep 17 00:00:00 2001 From: tofu11 <87494814+tofu11@users.noreply.github.com> Date: Thu, 9 Oct 2025 22:14:41 -0400 Subject: [PATCH 2/4] moved submit button below the textbox --- unfold_studio/static/base/base_style.css | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/unfold_studio/static/base/base_style.css b/unfold_studio/static/base/base_style.css index bead076..2b6cc0a 100644 --- a/unfold_studio/static/base/base_style.css +++ b/unfold_studio/static/base/base_style.css @@ -394,7 +394,23 @@ form button[type="submit"]:hover { outline: none; } +/* Force vertical layout for input container */ +.input-container { + display: flex !important; + flex-direction: column !important; + gap: 10px !important; + align-items: flex-start !important; +} + +.input-container form { + display: flex !important; + flex-direction: column !important; + gap: 10px !important; + width: 100% !important; +} + .input-container button { - align-self: flex-start; - width: auto; + align-self: flex-start !important; + width: auto !important; + margin-top: 0 !important; } From d0338f4db3071f4302916f33b25b0653ba846d92 Mon Sep 17 00:00:00 2001 From: tofu11 <87494814+tofu11@users.noreply.github.com> Date: Sat, 11 Oct 2025 20:13:17 -0400 Subject: [PATCH 3/4] edited my code to be more concise --- unfold_studio/static/base/base_style.css | 25 +++++++++--------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/unfold_studio/static/base/base_style.css b/unfold_studio/static/base/base_style.css index 2b6cc0a..8cbd12d 100644 --- a/unfold_studio/static/base/base_style.css +++ b/unfold_studio/static/base/base_style.css @@ -394,23 +394,16 @@ form button[type="submit"]:hover { outline: none; } -/* Force vertical layout for input container */ -.input-container { - display: flex !important; - flex-direction: column !important; - gap: 10px !important; - align-items: flex-start !important; -} - +/* Keep flex styling only on the form for textarea and button layout */ .input-container form { - display: flex !important; - flex-direction: column !important; - gap: 10px !important; - width: 100% !important; + display: flex; + flex-direction: column; + gap: 10px; + width: 100%; } -.input-container button { - align-self: flex-start !important; - width: auto !important; - margin-top: 0 !important; +.input-container form button[type="submit"] { + align-self: flex-start; + width: auto; + margin-top: 0; } From d88de01a9f56680fa3430b01fffabf6db1416f88 Mon Sep 17 00:00:00 2001 From: tofu11 <87494814+tofu11@users.noreply.github.com> Date: Wed, 15 Oct 2025 15:57:23 -0400 Subject: [PATCH 4/4] reverted changes to poetry.lock and pyproject.toml files --- pyproject.toml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index 8a9b8af..02e23ae 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -29,10 +29,7 @@ dependencies = [ "boto3 >= 1.34.131", "openai >= 1.35.13", "django-structlog >= 9.0.0", - "pytz >= 2024.2", - "django-debug-toolbar (>=6.0.0,<7.0.0)", - "django-silk (>=5.4.3,<6.0.0)", - "structlog (>=25.4.0,<26.0.0)", + "pytz >= 2024.2" ] [project.urls]