webui: fix multiple choice to append instead of replace chat content
Fix multiple choice button behavior to append selected text to existing
chat input content instead of replacing it entirely, providing a better
user experience when users have already typed text.
Problem Analysis:
When users clicked multiple choice buttons, the _handleMutlipleChoiceSelected
method was replacing all existing content in the chat input textarea:
chatInput.content = e.detail.responseText; // Replaces everything
This meant if users had typed some text and then clicked a multiple choice
option, their previous text would be completely lost.
Implementation:
Modified _handleMutlipleChoiceSelected in sketch-app-shell.ts to:
1. Check if existing content is present in the chat input
2. If content exists, add proper spacing (\n\n) between existing and new text
3. Append the selected response text instead of replacing
4. Call adjustChatSpacing() to resize textarea for new content
5. Maintain focus on the input field
Technical Details:
- Uses same append pattern as _handleDiffComment method in chat input
- Adds two newlines for proper visual separation when appending
- Triggers textarea height adjustment via requestAnimationFrame
- Preserves existing behavior when chat input is empty (no spacing added)
Testing:
- All existing Playwright tests continue to pass (40 passed, 4 skipped)
- TypeScript compilation successful with no errors
- Changes isolated to single method with clear behavioral improvement
This ensures users can build up their messages incrementally by typing
text and then selecting from multiple choice options without losing
their previous input.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s284c59aa73ee4311k
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index bdab955..0659241 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -1069,8 +1069,17 @@
"sketch-chat-input",
) as SketchChatInput;
if (chatInput) {
- chatInput.content = e.detail.responseText;
+ if (chatInput.content && chatInput.content.trim() !== "") {
+ chatInput.content += "\n\n";
+ }
+ chatInput.content += e.detail.responseText;
chatInput.focus();
+ // Adjust textarea height to accommodate new content
+ requestAnimationFrame(() => {
+ if (chatInput.adjustChatSpacing) {
+ chatInput.adjustChatSpacing();
+ }
+ });
}
}