Feat: Implement full reset functionality for 'New story' button

Enhanced the 'resetStoryView' function to clear all selected parameters, input fields, and reset the UI state of the parameter containers to their initial configuration. This includes deselecting chips, clearing textareas and character inputs, and managing the visibility and state of parameter containers and the 'Generate story' button.

Author: Matteo-it

examples/bedtime-story-teller/assets/app.js

@@ -197,6 +197,68 @@ function resetStoryView() {
     document.getElementById('story-container').style.display = 'none';
     document.getElementById('prompt-display').innerHTML = '';
     document.getElementById('story-response').textContent = '';
+
+    // Reset parameter selections
+    document.querySelectorAll('.chip.selected').forEach(chip => {
+        chip.classList.remove('selected');
+    });
+
+    document.querySelectorAll('.selected-value').forEach(selectedValue => {
+        selectedValue.innerHTML = '';
+        selectedValue.style.display = 'none';
+    });
+
+    // Reset Story type optional text
+    document.querySelectorAll('.parameter-container:nth-child(3) .optional-text').forEach(optionalText => {
+        optionalText.textContent = '(optional)';
+    });
+
+    // Clear character inputs and remove extra groups
+    const characterInputGroups = document.querySelectorAll('.character-input-group');
+    characterInputGroups.forEach((group, index) => {
+        if (index === 0) { // Only clear the first group, others will be removed
+            group.querySelector('.character-name').value = '';
+            group.querySelector('.character-role').selectedIndex = 0;
+            group.querySelector('.character-description').value = '';
+            group.querySelector('.delete-character-button').style.display = 'none';
+        } else {
+            group.remove();
+        }
+    });
+    document.querySelector('.add-character-button').style.display = 'block'; // Ensure add character button is visible
+
+    // Clear "Other" textarea
+    const otherTextarea = document.querySelector('.other-textarea');
+    if (otherTextarea) {
+        otherTextarea.value = '';
+        const charCounter = document.querySelector('.char-counter');
+        if (charCounter) {
+            charCounter.textContent = `0 / ${otherTextarea.maxLength}`;
+        }
+    }
+
+    // Hide "Generate story" button
+    const generateStoryButton = document.querySelector('.generate-story-button');
+    if (generateStoryButton) {
+        generateStoryButton.style.display = 'none';
+    }
+
+    // Reset parameter containers state
+    const parameterContainers = document.querySelectorAll('.parameter-container');
+    parameterContainers.forEach((container, index) => {
+        const content = container.querySelector('.parameter-content');
+        const arrow = container.querySelector('.arrow-icon');
+
+        if (index === 0) { // Age container
+            content.style.display = 'block';
+            arrow.classList.add('rotated');
+            container.classList.remove('disabled');
+        } else {
+            container.classList.add('disabled');
+            content.style.display = 'none';
+            arrow.classList.remove('rotated');
+        }
+    });
 }
 
 document.addEventListener('DOMContentLoaded', () => {

examples/bedtime-story-teller/assets/style.css

@@ -479,6 +479,7 @@ body {
     color: #008184;
     padding: 8px 16px;
     border-radius: 200px;
+    border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -547,13 +548,26 @@ body {
 
 .modal-body {
     padding: 15px 0;
+    text-align: center;
+}
+
+.modal-body p {
+    color: #2C353A;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+}
+
+.modal-body-small {
+    font-size: 14px !important;
+    font-style: normal !important;
+    font-weight: 400 !important;
 }
 
 .modal-footer {
     display: flex;
     justify-content: flex-end;
     padding-top: 10px;
-    border-top: 1px solid #ddd;
 }
 
 #clear-story-button,
@@ -610,21 +624,6 @@ body {
     color: #2C353A;
 }
 
-#clear-story-button {
-    /* Style similar to other buttons */
-    border-radius: 8px;
-    background: #AA4335; /* A different color to distinguish */
-    color: white;
-    font-family: "Open Sans";
-    font-size: 12px;
-    font-weight: 600;
-    padding: 8px 16px;
-    border: none;
-    cursor: pointer;
-    margin-top: 16px;
-    align-self: center; /* Center the button */
-}
-
 .spinner {
     border: 4px solid #f3f3f3;
     border-top: 4px solid #3498db;