webui/src/web-components/sketch-tool-card-dodo-get-project-config.ts

import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ToolCall } from "../types";

type DodoOutput = {
  config: string;
};

@customElement("sketch-tool-card-dodo-get-project-config")
export class SketchToolCardDodoGetProjectConfig extends LitElement {
  @property()
  toolCall: ToolCall;

  @property()
  open: boolean;

  static styles = css`
    .summary-text {
      font-family: monospace;
      color: #444;
      word-break: break-all;
    }

    .selector-input {
      font-family: monospace;
      background: rgba(0, 0, 0, 0.05);
      padding: 4px 8px;
      border-radius: 4px;
      display: inline-block;
      word-break: break-all;
    }
  `;

  render() {
    // Parse the input to get selector
    console.log(this.toolCall);
    let apiBaseAddress = "";
    let projectId = "";
    try {
      if (this.toolCall?.input) {
        const inp = JSON.parse(this.toolCall.input);
        apiBaseAddress = inp.apiBaseAddress || "";
        projectId = inp.projectId || "";
      }
    } catch (e) {
      console.error("Error parsing dodo input:", e);
    }

    let output: DodoOutput | null = null;
    try {
      if (this.toolCall?.result_message?.tool_result) {
        output = JSON.parse(this.toolCall.result_message.tool_result);
      }
    } catch (e) {
      console.error("Error parsing dodo output:", e);
    }

    if (output == null) {
      throw new Error("No output from dodo tool call");
    }

    return html`
      <sketch-tool-card .open=${this.open} .toolCall=${this.toolCall}>
        <span slot="summary" class="summary-text"> 🖱️ ${projectId} </span>
        <div slot="input">
          <div>
            API Base Address: <span class="selector-input">${apiBaseAddress}</span>
          </div>
          <div>
            Project ID: <span class="selector-input">${projectId}</span>
          </div>
        </div>
        <div slot="result">
          <pre>${output.config}</pre>
        </div>
      </sketch-tool-card>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "sketch-tool-card-dodo-get-project-config": SketchToolCardDodoGetProjectConfig;
  }
}