Skip to content

Loading #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tofu11 wants to merge 4 commits into
base: development
Choose a base branch
from
Open

Loading #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cd8ac6f
Edited textbox to expand horizontally as well as added padding to the…
tofu11 Oct 27, 2025
15c3808
added a loading bar while the message is generating
tofu11 Oct 27, 2025
c179f0e
added loading dots instead of a loading bar
tofu11 Oct 27, 2025
4064c4d
Resized the 3 dots, and placed it to the right of "Unfolding Story"
tofu11 Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions unfold_studio/static/base/base_style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,27 @@ a:hover {}
left: 0;
}

/* Add responsive padding for solo mode (when code is hidden) */
.twopane.solo #player {
margin: 0 auto;
padding: 0 20px;
}

/* Responsive padding for different screen sizes */
@media (max-width: 900px) {
.twopane.solo #player {
max-width: 100%;
padding: 0 15px;
}
}

@media (min-width: 1200px) {
.twopane.solo #player {
max-width: 900px;
padding: 0 40px;
}
}

.helptext {
display: none;
}
Expand Down Expand Up @@ -378,16 +399,13 @@ form button[type="submit"]:hover {
.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;
}
resize: both;}

.input-container textarea:focus {
border-color: #3498db;
Expand All @@ -399,11 +417,13 @@ form button[type="submit"]:hover {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
width: fit-content;
min-width: 100%;
}

.input-container form button[type="submit"] {
align-self: flex-start;
width: auto;
margin-top: 0;
}

48 changes: 39 additions & 9 deletions unfold_studio/static/player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ InkPlayer.prototype = {
this.continueStory();
},
scheduleInputBox: function(placeholder, variableName) {
const eventHandler = (userInput) => {
const eventHandler = async (userInput) => {
this.inputFunctionCalled = false;
this.story.variablesState[variableName] = userInput;
this.createStoryPlayRecord(
Expand All @@ -229,7 +229,12 @@ InkPlayer.prototype = {
userInput
);
this.running = true;
this.continueStory();
await this.continueStory();
// Remove loading indicator after response is complete
const loadingContainer = document.querySelector('.input-container');
if (loadingContainer) {
loadingContainer.remove();
}
};

formContainer = this.createInputForm(
Expand All @@ -241,13 +246,18 @@ InkPlayer.prototype = {
this.inputBoxToInsert = formContainer;
},
scheduleInputBoxForContinue: function(placeholder = "what would you like to do next?") {
const eventHandler = (userInput) => {
const eventHandler = async (userInput) => {
this.createStoryPlayRecord(
this.getStoryPlayInstanceUUID(),
"READERS_CONTINUE_ENTERED_TEXT",
userInput
);
this.handleUserInputForContinue(userInput);
await this.handleUserInputForContinue(userInput);
// Remove loading indicator after response is complete
const loadingContainer = document.querySelector('.input-container');
if (loadingContainer) {
loadingContainer.remove();
}
};

formContainer = this.createInputForm(
Expand All @@ -267,7 +277,12 @@ InkPlayer.prototype = {
inputElement.placeholder = placeholder;
inputElement.required = true;
inputElement.rows = 3;
inputElement.style.resize = "vertical";
inputElement.style.resize = "both";
inputElement.style.minWidth = "300px";
inputElement.style.minHeight = "60px";
inputElement.style.maxWidth = "900px";
inputElement.style.boxSizing = "border-box";
inputElement.style.maxWidth = "95%";

// Auto-resize functionality
inputElement.addEventListener("input", function() {
Expand All @@ -285,11 +300,26 @@ InkPlayer.prototype = {
formElement.addEventListener("submit", (event) => {
event.preventDefault();
const userInput = inputElement.value.trim();
eventHandler(userInput);

inputElement.disabled = true;
buttonElement.disabled = true;
formElement.style.opacity = "0.5";
// Replace form with loading indicator
formContainer.innerHTML = `
<div style="padding: 20px; text-align: center;">
<div style="margin-bottom: 15px; color: #666;">
Unfolding Story
<span style="font-size: 14px; color: #9b59b6; animation: bounce 0.6s infinite alternate; margin: 0 4px; display: inline-block;">●</span>
<span style="font-size: 14px; color: #9b59b6; animation: bounce 0.6s infinite alternate 0.2s; margin: 0 4px; display: inline-block;">●</span>
<span style="font-size: 14px; color: #9b59b6; animation: bounce 0.6s infinite alternate 0.4s; margin: 0 4px; display: inline-block;">●</span>
</div>
</div>
<style>
@keyframes bounce {
0% { transform: translateY(0px); }
100% { transform: translateY(-5px); }
}
</style>
`;

eventHandler(userInput);
});

this.createStoryPlayRecord(
Expand Down
Loading