sketch: another attempt at chat/diff fixes.
Now, I've moved the chat message property to sketch-chat-input
and out of sketch-app-shell, which means the message for diff
updates goes straight there. The issue was that sketch-chat-input
was mutating this anyway, so clearing the chat message in
app-shell didn't make sense and/or didn't work.
diff --git a/loop/webui/src/web-components/sketch-chat-input.ts b/loop/webui/src/web-components/sketch-chat-input.ts
index 74570cc..74e462f 100644
--- a/loop/webui/src/web-components/sketch-chat-input.ts
+++ b/loop/webui/src/web-components/sketch-chat-input.ts
@@ -1,9 +1,9 @@
import { css, html, LitElement, PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { customElement, property, state, query } from "lit/decorators.js";
@customElement("sketch-chat-input")
export class SketchChatInput extends LitElement {
- @property()
+ @state()
content: string = "";
// See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
@@ -66,15 +66,29 @@
constructor() {
super();
+ this._handleDiffComment = this._handleDiffComment.bind(this);
}
connectedCallback() {
super.connectedCallback();
+ window.addEventListener("diff-comment", this._handleDiffComment);
+ }
+
+ private _handleDiffComment(event: CustomEvent) {
+ const { comment } = event.detail;
+ if (!comment) return;
+
+ if (this.content != "") {
+ this.content += "\n\n";
+ }
+ this.content += comment;
+ requestAnimationFrame(() => this.adjustChatSpacing());
}
// See https://lit.dev/docs/components/lifecycle/
disconnectedCallback() {
super.disconnectedCallback();
+ window.removeEventListener("diff-comment", this._handleDiffComment);
}
sendChatMessage() {
@@ -84,6 +98,9 @@
composed: true,
});
this.dispatchEvent(event);
+
+ // TODO(philip?): Ideally we only clear the content if the send is successful.
+ this.content = ""; // Clear content after sending
}
adjustChatSpacing() {
@@ -99,7 +116,7 @@
this.chatInput.style.height = `${scrollHeight}px`;
}
- _sendChatClicked() {
+ async _sendChatClicked() {
this.sendChatMessage();
this.chatInput.focus(); // Refocus the input after sending
// Reset height after sending a message