webui: add tooltips to 🥷 and 🐢 in bash tool cards
For when people are curious.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: sc49577a78023541dk
diff --git a/webui/src/web-components/demo/sketch-tool-card.demo.html b/webui/src/web-components/demo/sketch-tool-card.demo.html
index ba53164..c7a3a1e 100644
--- a/webui/src/web-components/demo/sketch-tool-card.demo.html
+++ b/webui/src/web-components/demo/sketch-tool-card.demo.html
@@ -47,6 +47,8 @@
input: JSON.stringify({
command:
"docker ps -a --format '{{.ID}} {{.Image }} {{.Names}}' | grep sketch | awk '{print $1 }' | xargs -I {} docker rm {} && docker image prune -af",
+ background: true,
+ slow_ok: true,
}),
result_message: {
type: "tool",
@@ -124,6 +126,7 @@
name: "bash",
input: JSON.stringify({
command: "sleep 200",
+ slow_ok: true,
}),
result_message: {
type: "tool",
@@ -131,6 +134,17 @@
},
},
{
+ name: "bash",
+ input: JSON.stringify({
+ command: "npm start",
+ background: true,
+ }),
+ result_message: {
+ type: "tool",
+ tool_result: "Started server in background",
+ },
+ },
+ {
name: "title",
input: JSON.stringify({
title: "a new title for this sketch",
diff --git a/webui/src/web-components/sketch-tool-card.ts b/webui/src/web-components/sketch-tool-card.ts
index 72d4a48..674a27c 100644
--- a/webui/src/web-components/sketch-tool-card.ts
+++ b/webui/src/web-components/sketch-tool-card.ts
@@ -83,8 +83,8 @@
const inputData = JSON.parse(this.toolCall?.input || "{}");
const isBackground = inputData?.background === true;
const isSlowOk = inputData?.slow_ok === true;
- const backgroundIcon = isBackground ? "🥷 " : "";
- const slowIcon = isSlowOk ? "🐢 " : "";
+ const backgroundIcon = isBackground ? html`<span title="Running in background">🥷</span> ` : "";
+ const slowIcon = isSlowOk ? html`<span title="Extended timeouts">🐢</span> ` : "";
// Truncate the command if it's too long to display nicely
const command = inputData?.command || "";
@@ -101,10 +101,10 @@
class="flex w-full max-w-full flex-col overflow-wrap-break-word break-words"
>
<div class="w-full relative">
- ${createPreElement(
- `${backgroundIcon}${slowIcon}${inputData?.command}`,
- "w-full mb-0 rounded-t rounded-b-none box-border",
- )}
+ <pre
+ class="bg-gray-200 text-black p-2 rounded whitespace-pre-wrap break-words max-w-full w-full box-border overflow-wrap-break-word w-full mb-0 rounded-t rounded-b-none box-border"
+ >
+${backgroundIcon}${slowIcon}${inputData?.command}</pre>
</div>
</div>`;