Add @click handler to stopButton in sketch-app-shell.ts
The stop button now sends a POST request to the /stop endpoint when clicked.
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index f74fd59..bb05a03 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -230,6 +230,7 @@
this._handleViewModeSelect = this._handleViewModeSelect.bind(this);
this._handleShowCommitDiff = this._handleShowCommitDiff.bind(this);
this._handlePopState = this._handlePopState.bind(this);
+ this._handleStopClick = this._handleStopClick.bind(this);
}
// See https://lit.dev/docs/components/lifecycle/
@@ -502,6 +503,34 @@
this.updateDocumentTitle();
}
+ /**
+ * Handle stop button click
+ * Sends a request to the server to stop the current operation
+ */
+ private async _handleStopClick(): Promise<void> {
+ try {
+ const response = await fetch("cancel", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ reason: "user requested cancellation" }),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ throw new Error(
+ `Failed to stop operation: ${response.status} - ${errorData}`,
+ );
+ }
+
+ this.messageStatus = "Stop request sent";
+ } catch (error) {
+ console.error("Error stopping operation:", error);
+ this.messageStatus = "Failed to stop operation";
+ }
+ }
+
async _sendChat(e: CustomEvent) {
console.log("app shell: _sendChat", e);
const message = e.detail.message?.trim();
@@ -565,7 +594,11 @@
></sketch-container-status>
<div class="refresh-control">
- <button id="stopButton" class="refresh-button stop-button">
+ <button
+ id="stopButton"
+ class="refresh-button stop-button"
+ @click="${this._handleStopClick}"
+ >
Stop
</button>