sketch: simplify sketch-chat-input and diff comment handling
It seems like the top-level property in sketch-app-shell is enough
for the chat input, and we can just use that.
diff --git a/loop/webui/src/web-components/sketch-app-shell.ts b/loop/webui/src/web-components/sketch-app-shell.ts
index a0dd5aa..3350cac 100644
--- a/loop/webui/src/web-components/sketch-app-shell.ts
+++ b/loop/webui/src/web-components/sketch-app-shell.ts
@@ -323,24 +323,10 @@
const { comment } = event.detail;
if (!comment) return;
- // Find the chat input textarea
- const chatInput = this.shadowRoot?.querySelector("sketch-chat-input");
- if (chatInput) {
- // Update the chat input content using property
- const currentContent = chatInput.getAttribute("content") || "";
- const newContent = currentContent
- ? `${currentContent}\n\n${comment}`
- : comment;
- chatInput.setAttribute("content", newContent);
-
- // Dispatch an event to update the textarea value in the chat input component
- const updateEvent = new CustomEvent("update-content", {
- detail: { content: newContent },
- bubbles: true,
- composed: true,
- });
- chatInput.dispatchEvent(updateEvent);
+ if (this.chatMessageText.length > 0) {
+ this.chatMessageText += "\n\n";
}
+ this.chatMessageText += comment;
}
/**
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 bcd9f8e..6dd946a 100644
--- a/loop/webui/src/web-components/sketch-chat-input.test.ts
+++ b/loop/webui/src/web-components/sketch-chat-input.test.ts
@@ -56,7 +56,7 @@
(event) => {
resolve((event as CustomEvent).detail);
},
- { once: true },
+ { once: true }
);
});
});
@@ -67,10 +67,6 @@
// Wait for the event and check its details
const detail: any = await eventPromise;
expect(detail.message).toBe(testContent);
-
- // Check that content was cleared
- const content = await component.evaluate((el: SketchChatInput) => el.content);
- expect(content).toBe("");
});
test.skip("sends message when pressing Enter (without shift)", async ({
@@ -91,7 +87,7 @@
(event) => {
resolve((event as CustomEvent).detail);
},
- { once: true },
+ { once: true }
);
});
});
@@ -148,7 +144,7 @@
},
});
const origHeight = await component.evaluate(
- (el: SketchChatInput) => el.chatInput.style.height,
+ (el: SketchChatInput) => el.chatInput.style.height
);
// Enter very tall text in the textarea
@@ -159,32 +155,9 @@
// Check that textarea resized
const newHeight = await component.evaluate(
- (el: SketchChatInput) => el.chatInput.style.height,
+ (el: SketchChatInput) => el.chatInput.style.height
);
expect(Number.parseInt(newHeight)).toBeGreaterThan(
- Number.parseInt(origHeight),
+ Number.parseInt(origHeight)
);
});
-
-test("updates content when receiving update-content event", async ({
- mount,
-}) => {
- const component = await mount(SketchChatInput, {});
- const newContent = "Updated content";
-
- // Dispatch the update-content event
- await component.evaluate((el, newContent) => {
- const updateEvent = new CustomEvent("update-content", {
- detail: { content: newContent },
- bubbles: true,
- });
- el.dispatchEvent(updateEvent);
- }, newContent);
-
- // Wait for the component to update and check values
- await expect(component.locator("#chatInput")).toHaveValue(newContent);
-
- // Check the content property
- const content = await component.evaluate((el: SketchChatInput) => el.content);
- expect(content).toBe(newContent);
-});
diff --git a/loop/webui/src/web-components/sketch-chat-input.ts b/loop/webui/src/web-components/sketch-chat-input.ts
index 817190e..74570cc 100644
--- a/loop/webui/src/web-components/sketch-chat-input.ts
+++ b/loop/webui/src/web-components/sketch-chat-input.ts
@@ -66,51 +66,15 @@
constructor() {
super();
-
- // Binding methods
- this._handleUpdateContent = this._handleUpdateContent.bind(this);
}
- /**
- * Handle update-content event
- */
- private _handleUpdateContent(event: CustomEvent) {
- const { content } = event.detail;
- if (content !== undefined) {
- this.content = content;
-
- // Update the textarea value directly, otherwise it won't update until next render
- const textarea = this.shadowRoot?.querySelector(
- "#chatInput"
- ) as HTMLTextAreaElement;
- if (textarea) {
- textarea.value = content;
- // Adjust height after content is updated programmatically
- requestAnimationFrame(() => this.adjustChatSpacing());
- }
- }
- }
-
- // See https://lit.dev/docs/components/lifecycle/
connectedCallback() {
super.connectedCallback();
-
- // Listen for update-content events
- this.addEventListener(
- "update-content",
- this._handleUpdateContent as EventListener
- );
}
// See https://lit.dev/docs/components/lifecycle/
disconnectedCallback() {
super.disconnectedCallback();
-
- // Remove event listeners
- this.removeEventListener(
- "update-content",
- this._handleUpdateContent as EventListener
- );
}
sendChatMessage() {
@@ -120,9 +84,6 @@
composed: true,
});
this.dispatchEvent(event);
- // Clear the input after sending
- this.content = "";
- this.setAttribute("content", "");
}
adjustChatSpacing() {