| import { css, html, LitElement } from "lit"; |
| import { unsafeHTML } from "lit/directives/unsafe-html.js"; |
| import { customElement, property, state } from "lit/decorators.js"; |
| import { ToolCall, MultipleChoiceOption, MultipleChoiceParams } from "../types"; |
| import { marked, MarkedOptions } from "marked"; |
| |
| // Shared utility function for markdown rendering |
| function renderMarkdown(markdownContent: string): string { |
| try { |
| return marked.parse(markdownContent, { |
| gfm: true, |
| breaks: true, |
| async: false, |
| }) as string; |
| } catch (error) { |
| console.error("Error rendering markdown:", error); |
| return markdownContent; |
| } |
| } |
| |
| // Common styles shared across all tool cards |
| const commonStyles = css` |
| :host { |
| display: block; |
| max-width: 100%; |
| width: 100%; |
| box-sizing: border-box; |
| overflow: hidden; |
| } |
| pre { |
| background: rgb(236, 236, 236); |
| color: black; |
| padding: 0.5em; |
| border-radius: 4px; |
| white-space: pre-wrap; |
| word-break: break-word; |
| max-width: 100%; |
| width: 100%; |
| box-sizing: border-box; |
| overflow-wrap: break-word; |
| } |
| .summary-text { |
| overflow: hidden !important; |
| text-overflow: ellipsis !important; |
| white-space: nowrap !important; |
| max-width: 100% !important; |
| width: 100% !important; |
| font-family: monospace; |
| display: block; |
| } |
| `; |
| |
| @customElement("sketch-tool-card") |
| export class SketchToolCard extends LitElement { |
| @property() toolCall: ToolCall; |
| @property() open: boolean; |
| @state() detailsVisible: boolean = false; |
| |
| static styles = css` |
| .tool-call { |
| display: flex; |
| flex-direction: column; |
| width: 100%; |
| } |
| .tool-row { |
| display: flex; |
| width: 100%; |
| box-sizing: border-box; |
| padding: 6px 8px 6px 12px; |
| align-items: center; |
| gap: 8px; |
| cursor: pointer; |
| border-radius: 4px; |
| position: relative; |
| overflow: hidden; |
| flex-wrap: wrap; |
| } |
| .tool-row:hover { |
| background-color: rgba(0, 0, 0, 0.02); |
| } |
| .tool-name { |
| font-family: monospace; |
| font-weight: 500; |
| color: #444; |
| background-color: rgba(0, 0, 0, 0.05); |
| border-radius: 3px; |
| padding: 2px 6px; |
| flex-shrink: 0; |
| min-width: 45px; |
| font-size: 12px; |
| text-align: center; |
| white-space: nowrap; |
| } |
| .tool-success { |
| color: #5cb85c; |
| font-size: 14px; |
| } |
| .tool-error { |
| color: #6c757d; |
| font-size: 14px; |
| } |
| .tool-pending { |
| color: #f0ad4e; |
| font-size: 14px; |
| } |
| .summary-text { |
| white-space: normal; |
| overflow-wrap: break-word; |
| word-break: break-word; |
| flex-grow: 1; |
| flex-shrink: 1; |
| color: #444; |
| font-family: monospace; |
| font-size: 12px; |
| padding: 0 4px; |
| min-width: 50px; |
| max-width: calc(100% - 150px); |
| display: inline-block; |
| } |
| .tool-status { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| margin-left: auto; |
| flex-shrink: 0; |
| min-width: 120px; |
| justify-content: flex-end; |
| padding-right: 8px; |
| } |
| .tool-call-status { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| .tool-call-status.spinner { |
| animation: spin 1s infinite linear; |
| } |
| @keyframes spin { |
| 0% { |
| transform: rotate(0deg); |
| } |
| 100% { |
| transform: rotate(360deg); |
| } |
| } |
| .elapsed { |
| font-size: 11px; |
| color: #777; |
| white-space: nowrap; |
| min-width: 40px; |
| text-align: right; |
| } |
| .tool-details { |
| padding: 8px; |
| background-color: rgba(0, 0, 0, 0.02); |
| margin-top: 1px; |
| border-top: 1px solid rgba(0, 0, 0, 0.05); |
| display: none; |
| font-family: monospace; |
| font-size: 12px; |
| color: #333; |
| border-radius: 0 0 4px 4px; |
| max-width: 100%; |
| width: 100%; |
| box-sizing: border-box; |
| overflow: hidden; |
| } |
| .tool-details.visible { |
| display: block; |
| } |
| .cancel-button { |
| cursor: pointer; |
| color: white; |
| background-color: #d9534f; |
| border: none; |
| border-radius: 3px; |
| font-size: 11px; |
| padding: 2px 6px; |
| white-space: nowrap; |
| min-width: 50px; |
| } |
| .cancel-button:hover { |
| background-color: #c9302c; |
| } |
| .cancel-button[disabled] { |
| background-color: #999; |
| cursor: not-allowed; |
| } |
| `; |
| |
| _cancelToolCall = async (tool_call_id: string, button: HTMLButtonElement) => { |
| button.innerText = "Cancelling"; |
| button.disabled = true; |
| try { |
| const response = await fetch("cancel", { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ |
| tool_call_id: tool_call_id, |
| reason: "user requested cancellation", |
| }), |
| }); |
| if (response.ok) { |
| button.parentElement.removeChild(button); |
| } else { |
| button.innerText = "Cancel"; |
| } |
| } catch (e) { |
| console.error("cancel", tool_call_id, e); |
| } |
| }; |
| |
| _toggleDetails(e: Event) { |
| e.stopPropagation(); |
| this.detailsVisible = !this.detailsVisible; |
| } |
| |
| render() { |
| // Status indicator based on result |
| let statusIcon = html`<span class="tool-call-status spinner tool-pending" |
| >⏳</span |
| >`; |
| if (this.toolCall?.result_message) { |
| statusIcon = this.toolCall?.result_message.tool_error |
| ? html`<span class="tool-call-status tool-error">〰️</span>` |
| : html`<span class="tool-call-status tool-success">✓</span>`; |
| } |
| |
| // Cancel button for pending operations |
| const cancelButton = this.toolCall?.result_message |
| ? "" |
| : html`<button |
| class="cancel-button" |
| title="Cancel this operation" |
| @click=${(e: Event) => { |
| e.stopPropagation(); |
| this._cancelToolCall( |
| this.toolCall?.tool_call_id, |
| e.target as HTMLButtonElement, |
| ); |
| }} |
| > |
| Cancel |
| </button>`; |
| |
| // Elapsed time display |
| const elapsed = this.toolCall?.result_message?.elapsed |
| ? html`<span class="elapsed" |
| >${(this.toolCall?.result_message?.elapsed / 1e9).toFixed(1)}s</span |
| >` |
| : html`<span class="elapsed"></span>`; |
| |
| // Initialize details visibility based on open property |
| if (this.open && !this.detailsVisible) { |
| this.detailsVisible = true; |
| } |
| |
| return html`<div class="tool-call"> |
| <div class="tool-row" @click=${this._toggleDetails}> |
| <span class="tool-name">${this.toolCall?.name}</span> |
| <span class="summary-text"><slot name="summary"></slot></span> |
| <div class="tool-status">${statusIcon} ${elapsed} ${cancelButton}</div> |
| </div> |
| <div class="tool-details ${this.detailsVisible ? "visible" : ""}"> |
| <slot name="input"></slot> |
| <slot name="result"></slot> |
| </div> |
| </div>`; |
| } |
| } |
| |
| @customElement("sketch-tool-card-bash") |
| export class SketchToolCardBash extends LitElement { |
| @property() toolCall: ToolCall; |
| @property() open: boolean; |
| |
| static styles = [ |
| commonStyles, |
| css` |
| :host { |
| max-width: 100%; |
| display: block; |
| } |
| .input { |
| display: flex; |
| width: 100%; |
| max-width: 100%; |
| flex-direction: column; |
| overflow-wrap: break-word; |
| word-break: break-word; |
| } |
| .command-wrapper { |
| max-width: 100%; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .input pre { |
| width: 100%; |
| margin-bottom: 0; |
| border-radius: 4px 4px 0 0; |
| box-sizing: border-box; |
| } |
| .result pre { |
| margin-top: 0; |
| color: #555; |
| border-radius: 0 0 4px 4px; |
| width: 100%; |
| box-sizing: border-box; |
| } |
| .result pre.scrollable-on-hover { |
| max-height: 300px; |
| overflow-y: auto; |
| } |
| .tool-call-result-container { |
| width: 100%; |
| position: relative; |
| } |
| .background-badge { |
| display: inline-block; |
| background-color: #6200ea; |
| color: white; |
| font-size: 10px; |
| font-weight: bold; |
| padding: 2px 6px; |
| border-radius: 10px; |
| margin-left: 8px; |
| vertical-align: middle; |
| } |
| .command-wrapper { |
| display: inline-block; |
| max-width: 100%; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| `, |
| ]; |
| |
| render() { |
| const inputData = JSON.parse(this.toolCall?.input || "{}"); |
| const isBackground = inputData?.background === true; |
| const backgroundIcon = isBackground ? "🔄 " : ""; |
| |
| // Truncate the command if it's too long to display nicely |
| const command = inputData?.command || ""; |
| const displayCommand = |
| command.length > 80 ? command.substring(0, 80) + "..." : command; |
| |
| return html` <sketch-tool-card |
| .open=${this.open} |
| .toolCall=${this.toolCall} |
| > |
| <span |
| slot="summary" |
| class="summary-text" |
| style="display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" |
| > |
| <div |
| class="command-wrapper" |
| style="max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" |
| > |
| ${backgroundIcon}${displayCommand} |
| </div> |
| </span> |
| <div slot="input" class="input"> |
| <div class="tool-call-result-container"> |
| <pre>${backgroundIcon}${inputData?.command}</pre> |
| </div> |
| </div> |
| ${this.toolCall?.result_message?.tool_result |
| ? html`<div slot="result" class="result"> |
| <div class="tool-call-result-container"> |
| <pre class="tool-call-result"> |
| ${this.toolCall?.result_message.tool_result}</pre |
| > |
| </div> |
| </div>` |
| : ""} |
| </sketch-tool-card>`; |
| } |
| } |
| |
| @customElement("sketch-tool-card-codereview") |
| export class SketchToolCardCodeReview extends LitElement { |
| @property() toolCall: ToolCall; |
| @property() open: boolean; |
| |
| // Determine the status icon based on the content of the result message |
| getStatusIcon(resultText: string): string { |
| if (!resultText) return ""; |
| if (resultText === "OK") return "✔️"; |
| if (resultText.includes("# Errors")) return "⚠️"; |
| if (resultText.includes("# Info")) return "ℹ️"; |
| if (resultText.includes("uncommitted changes in repo")) return "🧹"; |
| if (resultText.includes("no new commits have been added")) return "🐣"; |
| if (resultText.includes("git repo is not clean")) return "🧼"; |
| return "❓"; |
| } |
| |
| render() { |
| const resultText = this.toolCall?.result_message?.tool_result || ""; |
| const statusIcon = this.getStatusIcon(resultText); |
| |
| return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}> |
| <span slot="summary" class="summary-text">${statusIcon}</span> |
| <div slot="result"><pre>${resultText}</pre></div> |
| </sketch-tool-card>`; |
| } |
| } |
| |
| @customElement("sketch-tool-card-done") |
| export class SketchToolCardDone extends LitElement { |
| @property() toolCall: ToolCall; |
| @property() open: boolean; |
| |
| render() { |
| const doneInput = JSON.parse(this.toolCall.input); |
| return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}> |
| <span slot="summary" class="summary-text"></span> |
| <div slot="result"> |
| ${Object.keys(doneInput.checklist_items).map((key) => { |
| const item = doneInput.checklist_items[key]; |
| let statusIcon = "⛔"; |
| if (item.status == "yes") { |
| statusIcon = "👍"; |
| } else if (item.status == "not applicable") { |
| statusIcon = "🤷♂️"; |
| } |
| return html`<div> |
| <span>${statusIcon}</span> ${key}:${item.status} |
| </div>`; |
| })} |
| </div> |
| </sketch-tool-card>`; |
| } |
| } |
| |
| @customElement("sketch-tool-card-patch") |
| export class SketchToolCardPatch extends LitElement { |
| @property() toolCall: ToolCall; |
| @property() open: boolean; |
| |
| static styles = css` |
| .summary-text { |
| color: #555; |
| font-family: monospace; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| border-radius: 3px; |
| } |
| `; |
| |
| render() { |
| const patchInput = JSON.parse(this.toolCall?.input); |
| return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}> |
| <span slot="summary" class="summary-text"> |
| ${patchInput?.path}: ${patchInput.patches.length} |
| edit${patchInput.patches.length > 1 ? "s" : ""} |
| </span> |
| <div slot="input"> |
| ${patchInput.patches.map((patch) => { |
| return html`Patch operation: <b>${patch.operation}</b> |
| <pre>${patch.newText}</pre>`; |
| })} |
| </div> |
| <div slot="result"> |
| <pre>${this.toolCall?.result_message?.tool_result}</pre> |
| </div> |
| </sketch-tool-card>`; |
| } |
| } |
| |
| @customElement("sketch-tool-card-think") |
| export class SketchToolCardThink extends LitElement { |
| @property() toolCall: ToolCall; |
| @property() open: boolean; |
| |
| static styles = css` |
| .thought-bubble { |
| overflow-x: auto; |
| margin-bottom: 3px; |
| font-family: monospace; |
| padding: 3px 5px; |
| background: rgb(236, 236, 236); |
| border-radius: 6px; |
| user-select: text; |
| cursor: text; |
| -webkit-user-select: text; |
| -moz-user-select: text; |
| -ms-user-select: text; |
| font-size: 13px; |
| line-height: 1.3; |
| } |
| .summary-text { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| font-family: monospace; |
| } |
| `; |
| |
| render() { |
| return html` |
| <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}> |
| <span slot="summary" class="summary-text"> |
| ${JSON.parse(this.toolCall?.input)?.thoughts?.split("\n")[0]} |
| </span> |
| <div slot="input" class="thought-bubble"> |
| <div class="markdown-content"> |
| ${unsafeHTML( |
| renderMarkdown(JSON.parse(this.toolCall?.input)?.thoughts), |
| )} |
| </div> |
| </div> |
| </sketch-tool-card> |
| `; |
| } |
| } |
| |
| @customElement("sketch-tool-card-title") |
| export class SketchToolCardTitle extends LitElement { |
| @property() toolCall: ToolCall; |
| @property() open: boolean; |
| |
| static styles = css` |
| .summary-text { |
| font-style: italic; |
| } |
| pre { |
| display: inline; |
| font-family: monospace; |
| background: rgb(236, 236, 236); |
| padding: 2px 4px; |
| border-radius: 2px; |
| margin: 0; |
| } |
| `; |
| |
| render() { |
| const inputData = JSON.parse(this.toolCall?.input || "{}"); |
| return html` |
| <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}> |
| <span slot="summary" class="summary-text"> |
| Title: "${inputData.title}" |
| </span> |
| <div slot="input"> |
| <div>Set title to: <b>${inputData.title}</b></div> |
| </div> |
| </sketch-tool-card> |
| `; |
| } |
| } |
| |
| @customElement("sketch-tool-card-precommit") |
| export class SketchToolCardPrecommit extends LitElement { |
| @property() |
| toolCall: ToolCall; |
| |
| @property() |
| open: boolean; |
| |
| static styles = css` |
| .summary-text { |
| font-style: italic; |
| } |
| pre { |
| display: inline; |
| font-family: monospace; |
| background: rgb(236, 236, 236); |
| padding: 2px 4px; |
| border-radius: 2px; |
| margin: 0; |
| } |
| `; |
| constructor() { |
| super(); |
| } |
| |
| connectedCallback() { |
| super.connectedCallback(); |
| } |
| |
| disconnectedCallback() { |
| super.disconnectedCallback(); |
| } |
| |
| render() { |
| const inputData = JSON.parse(this.toolCall?.input || "{}"); |
| return html` |
| <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}> |
| <span slot="summary" class="summary-text"> |
| Branch: sketch/${inputData.branch_name} |
| </span> |
| <div slot="input"> |
| <div>Set branch to: <code>sketch/${inputData.branch_name}</code></div> |
| </div> |
| </sketch-tool-card> |
| `; |
| } |
| } |
| |
| @customElement("sketch-tool-card-multiple-choice") |
| export class SketchToolCardMultipleChoice extends LitElement { |
| @property() toolCall: ToolCall; |
| @property() open: boolean; |
| @property() selectedOption: MultipleChoiceOption = null; |
| |
| static styles = css` |
| .options-container { |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin: 10px 0; |
| } |
| .option { |
| display: inline-flex; |
| align-items: center; |
| padding: 8px 12px; |
| border-radius: 4px; |
| background-color: #f5f5f5; |
| cursor: pointer; |
| transition: all 0.2s; |
| border: 1px solid transparent; |
| user-select: none; |
| } |
| .option:hover { |
| background-color: #e0e0e0; |
| border-color: #ccc; |
| transform: translateY(-1px); |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
| .option:active { |
| transform: translateY(0); |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
| background-color: #d5d5d5; |
| } |
| .option.selected { |
| background-color: #e3f2fd; |
| border-color: #2196f3; |
| border-width: 1px; |
| border-style: solid; |
| } |
| .option-checkmark { |
| margin-left: 6px; |
| color: #2196f3; |
| } |
| .summary-text { |
| font-style: italic; |
| padding: 0.5em; |
| } |
| .summary-text strong { |
| font-style: normal; |
| color: #2196f3; |
| font-weight: 600; |
| } |
| `; |
| |
| connectedCallback() { |
| super.connectedCallback(); |
| this.updateSelectedOption(); |
| } |
| |
| updated(changedProps) { |
| if (changedProps.has("toolCall")) { |
| this.updateSelectedOption(); |
| } |
| } |
| |
| updateSelectedOption() { |
| if (this.toolCall?.result_message?.tool_result) { |
| try { |
| this.selectedOption = JSON.parse( |
| this.toolCall.result_message.tool_result, |
| ).selected; |
| } catch (e) { |
| console.error("Error parsing result:", e); |
| } |
| } else { |
| this.selectedOption = null; |
| } |
| } |
| |
| async handleOptionClick(choice) { |
| this.selectedOption = this.selectedOption === choice ? null : choice; |
| |
| const event = new CustomEvent("multiple-choice-selected", { |
| detail: { |
| responseText: this.selectedOption.responseText, |
| toolCall: this.toolCall, |
| }, |
| bubbles: true, |
| composed: true, |
| }); |
| this.dispatchEvent(event); |
| } |
| |
| render() { |
| let choices = []; |
| let question = ""; |
| try { |
| const inputData = JSON.parse( |
| this.toolCall?.input || "{}", |
| ) as MultipleChoiceParams; |
| choices = inputData.responseOptions || []; |
| question = inputData.question || "Please select an option:"; |
| } catch (e) { |
| console.error("Error parsing multiple-choice input:", e); |
| } |
| |
| const summaryContent = |
| this.selectedOption !== null |
| ? html`<span class="summary-text"> |
| ${question}: <strong>${this.selectedOption.caption}</strong> |
| </span>` |
| : html`<span class="summary-text">${question}</span>`; |
| |
| return html` |
| <div class="multiple-choice-card"> |
| ${summaryContent} |
| <div class="options-container"> |
| ${choices.map((choice) => { |
| const isSelected = |
| this.selectedOption !== null && this.selectedOption === choice; |
| return html` |
| <div |
| class="option ${isSelected ? "selected" : ""}" |
| @click=${() => this.handleOptionClick(choice)} |
| title="${choice.responseText}" |
| > |
| <span class="option-label">${choice.caption}</span> |
| ${isSelected |
| ? html`<span class="option-checkmark">✓</span>` |
| : ""} |
| </div> |
| `; |
| })} |
| </div> |
| </div> |
| `; |
| } |
| } |
| |
| @customElement("sketch-tool-card-generic") |
| export class SketchToolCardGeneric extends LitElement { |
| @property() toolCall: ToolCall; |
| @property() open: boolean; |
| |
| render() { |
| return html`<sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}> |
| <span |
| slot="summary" |
| style="display: block; white-space: normal; word-break: break-word; overflow-wrap: break-word; max-width: 100%; width: 100%;" |
| >${this.toolCall?.input}</span |
| > |
| <div |
| slot="input" |
| style="max-width: 100%; overflow-wrap: break-word; word-break: break-word;" |
| > |
| Input: |
| <pre |
| style="max-width: 100%; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;" |
| > |
| ${this.toolCall?.input}</pre |
| > |
| </div> |
| <div |
| slot="result" |
| style="max-width: 100%; overflow-wrap: break-word; word-break: break-word;" |
| > |
| Result: |
| ${this.toolCall?.result_message?.tool_result |
| ? html`<pre>${this.toolCall?.result_message.tool_result}</pre>` |
| : ""} |
| </div> |
| </sketch-tool-card>`; |
| } |
| } |
| |
| declare global { |
| interface HTMLElementTagNameMap { |
| "sketch-tool-card": SketchToolCard; |
| "sketch-tool-card-generic": SketchToolCardGeneric; |
| "sketch-tool-card-bash": SketchToolCardBash; |
| "sketch-tool-card-codereview": SketchToolCardCodeReview; |
| "sketch-tool-card-done": SketchToolCardDone; |
| "sketch-tool-card-patch": SketchToolCardPatch; |
| "sketch-tool-card-think": SketchToolCardThink; |
| "sketch-tool-card-title": SketchToolCardTitle; |
| "sketch-tool-card-precommit": SketchToolCardPrecommit; |
| "sketch-tool-card-multiple-choice": SketchToolCardMultipleChoice; |
| // TODO: We haven't implemented this for browser tools. |
| } |
| } |