Make textarea in sketch-chat-input user-resizable
Fixes https://github.com/boldsoftware/sketch/issues/6
- Changed resize property from 'none' to 'vertical' to allow user resizing
- Increased max-height from 120px to 300px to allow more expansion
- Enhanced user experience by allowing them to resize the chat input according to their needs
- Automatically resize the textarea as the user types (up to max-height)
Co-Authored-By: sketch
diff --git a/loop/webui/src/web-components/sketch-chat-input.test.ts b/loop/webui/src/web-components/sketch-chat-input.test.ts
index e361ecd..de41c31 100644
--- a/loop/webui/src/web-components/sketch-chat-input.test.ts
+++ b/loop/webui/src/web-components/sketch-chat-input.test.ts
@@ -140,6 +140,25 @@
expect(content).toBe(testContent);
});
+test("resizes when user enters more text than will fit", async ({
+ mount,
+}) => {
+ const testContent = "Test message\n\n\n\n\n\n\n\n\n\n\n\n\nends here.";
+ const component = await mount(SketchChatInput, {
+ props: {
+ content: '',
+ },
+ });
+ const origHeight = await component.evaluate((el: SketchChatInput) => el.chatInput.style.height);
+
+ // Enter very tall text in the textarea
+ await component.locator("#chatInput").fill(testContent);
+
+ // Check that textarea resized
+ const newHeight = await component.evaluate((el: SketchChatInput) => el.chatInput.style.height);
+ expect(Number.parseInt(newHeight)).toBeGreaterThan(Number.parseInt(origHeight));
+});
+
test("updates content when receiving update-content event", async ({
mount,
}) => {