webui: Refactor tool calls
diff --git a/webui/src/web-components/sketch-tool-card-think.ts b/webui/src/web-components/sketch-tool-card-think.ts
new file mode 100644
index 0000000..fc0fe09
--- /dev/null
+++ b/webui/src/web-components/sketch-tool-card-think.ts
@@ -0,0 +1,70 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { marked } from "marked";
+import { ToolCall } from "../types";
+
+@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>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-tool-card-think": SketchToolCardThink;
+ }
+}
+
+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;
+ }
+}