webui: convert sketch-tool-calls to inherit from SketchTailwindElement
- Replace LitElement with SketchTailwindElement inheritance
- Remove custom CSS styles in favor of Tailwind classes
- Update template to use Tailwind utility classes:
- Container: mt-2 pt-1 max-w-full w-full box-border
- Card: flex flex-col bg-white/60 rounded-md mb-1.5 overflow-hidden cursor-pointer border-l-2 border-black/10 shadow-sm max-w-full break-words
- Add basic unit tests to verify component functionality
- Maintain existing component API and behavior
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s9bc7a30829559ed9k
diff --git a/webui/src/web-components/sketch-tool-calls.ts b/webui/src/web-components/sketch-tool-calls.ts
index 508c668..d1b2018 100644
--- a/webui/src/web-components/sketch-tool-calls.ts
+++ b/webui/src/web-components/sketch-tool-calls.ts
@@ -1,7 +1,8 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { repeat } from "lit/directives/repeat.js";
import { State, ToolCall } from "../types";
+import { SketchTailwindElement } from "./sketch-tailwind-element.js";
import "./sketch-tool-card";
import "./sketch-tool-card-take-screenshot";
import "./sketch-tool-card-about-sketch";
@@ -18,7 +19,7 @@
import "./sketch-tool-card-browser-clear-console-logs";
@customElement("sketch-tool-calls")
-export class SketchToolCalls extends LitElement {
+export class SketchToolCalls extends SketchTailwindElement {
@property()
toolCalls: ToolCall[] = [];
@@ -31,70 +32,10 @@
@state()
expanded: boolean = false;
- static styles = css`
- /* Tool calls container styles */
- .tool-calls-container {
- margin-top: 8px;
- padding-top: 4px;
- max-width: 100%;
- width: 100%;
- box-sizing: border-box;
- }
-
- /* Card container */
- .tool-call-card {
- display: flex;
- flex-direction: column;
- background-color: rgba(255, 255, 255, 0.6);
- border-radius: 6px;
- margin-bottom: 6px;
- overflow: hidden;
- cursor: pointer;
- border-left: 2px solid rgba(0, 0, 0, 0.1);
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
- max-width: 100%;
- overflow-wrap: break-word;
- word-break: break-word;
- }
-
- /* Status indicators for tool calls */
- .tool-call-status {
- margin-right: 4px;
- text-align: center;
- }
-
- .tool-call-status.spinner {
- animation: spin 1s infinite linear;
- display: inline-block;
- width: 1em;
- }
-
- @keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
-
- .tool-call-cards-container {
- display: block;
- }
- `;
-
constructor() {
super();
}
- connectedCallback() {
- super.connectedCallback();
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- }
-
cardForToolCall(toolCall: ToolCall, open: boolean) {
switch (toolCall.name) {
case "bash":
@@ -238,8 +179,8 @@
return html``;
}
- return html`<div class="tool-calls-container">
- <div class="tool-call-cards-container">
+ return html`<div class="mt-2 pt-1 max-w-full w-full box-border">
+ <div class="block">
${repeat(this.toolCalls, this.toolUseKey, (toolCall, idx) => {
let shouldOpen = false;
// Always expand screenshot tool calls, expand last tool call if this.open is true
@@ -251,7 +192,7 @@
}
return html`<div
id="${toolCall.tool_call_id}"
- class="tool-call-card ${toolCall.name}"
+ class="flex flex-col bg-white/60 rounded-md mb-1.5 overflow-hidden cursor-pointer border-l-2 border-black/10 shadow-sm max-w-full break-words ${toolCall.name}"
>
${this.cardForToolCall(toolCall, shouldOpen)}
</div>`;