webui/src/web-components/sketch-timeline-message.ts

import { css, html, LitElement, render } from "lit";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { customElement, property, state } from "lit/decorators.js";
import { AgentMessage } from "../types";
import { marked, MarkedOptions, Renderer, Tokens } from "marked";
import mermaid from "mermaid";
import DOMPurify from "dompurify";
import "./sketch-tool-calls";
@customElement("sketch-timeline-message")
export class SketchTimelineMessage extends LitElement {
  @property()
  message: AgentMessage;

  @property()
  previousMessage: AgentMessage;

  @property()
  open: boolean = false;

  @property()
  firstMessageIndex: number = 0;

  @state()
  showInfo: boolean = false;

  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
  // Note that these styles only apply to the scope of this web component's
  // shadow DOM node, so they won't leak out or collide with CSS declared in
  // other components or the containing web page (...unless you want it to do that).
  static styles = css`
    .message {
      position: relative;
      margin-bottom: 6px;
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .message-container {
      display: flex;
      position: relative;
      width: 100%;
    }

    .message-metadata-left {
      flex: 0 0 80px;
      padding: 3px 5px;
      text-align: right;
      font-size: 11px;
      color: #777;
      align-self: flex-start;
    }

    .message-metadata-right {
      flex: 0 0 80px;
      padding: 3px 5px;
      text-align: left;
      font-size: 11px;
      color: #777;
      align-self: flex-start;
    }

    .message-bubble-container {
      flex: 1;
      display: flex;
      max-width: calc(100% - 160px);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .user .message-bubble-container {
      justify-content: flex-end;
    }

    .agent .message-bubble-container,
    .tool .message-bubble-container,
    .error .message-bubble-container {
      justify-content: flex-start;
    }

    .message-content {
      position: relative;
      padding: 6px 10px;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      max-width: 100%;
      width: fit-content;
      min-width: min-content;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    /* User message styling */
    .user .message-content {
      background-color: #2196f3;
      color: white;
      border-bottom-right-radius: 5px;
    }

    /* Agent message styling */
    .agent .message-content,
    .tool .message-content,
    .error .message-content {
      background-color: #f1f1f1;
      color: black;
      border-bottom-left-radius: 5px;
    }

    /* Copy button styles */
    .message-text-container,
    .tool-result-container {
      position: relative;
    }

    .message-actions {
      position: absolute;
      top: 5px;
      right: 5px;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .message-text-container:hover .message-actions,
    .tool-result-container:hover .message-actions {
      opacity: 1;
    }

    .message-actions {
      display: flex;
      gap: 6px;
    }

    .copy-icon,
    .info-icon {
      background-color: transparent;
      border: none;
      color: rgba(0, 0, 0, 0.6);
      cursor: pointer;
      padding: 3px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      transition: all 0.15s ease;
    }

    .user .copy-icon,
    .user .info-icon {
      color: rgba(255, 255, 255, 0.8);
    }

    .copy-icon:hover,
    .info-icon:hover {
      background-color: rgba(0, 0, 0, 0.08);
    }

    .user .copy-icon:hover,
    .user .info-icon:hover {
      background-color: rgba(255, 255, 255, 0.15);
    }

    /* Message metadata styling */
    .message-type {
      font-weight: bold;
      font-size: 11px;
    }

    .message-timestamp {
      display: block;
      font-size: 10px;
      color: #888;
      margin-top: 2px;
    }

    .message-duration {
      display: block;
      font-size: 10px;
      color: #888;
      margin-top: 2px;
    }

    .message-usage {
      display: block;
      font-size: 10px;
      color: #888;
      margin-top: 3px;
    }

    .conversation-id {
      font-family: monospace;
      font-size: 12px;
      padding: 2px 4px;
      margin-left: auto;
    }

    .parent-info {
      font-size: 11px;
      opacity: 0.8;
    }

    .subconversation {
      border-left: 2px solid transparent;
      padding-left: 5px;
      margin-left: 20px;
      transition: margin-left 0.3s ease;
    }

    .message-text {
      overflow-x: auto;
      margin-bottom: 0;
      font-family: sans-serif;
      padding: 2px 0;
      user-select: text;
      cursor: text;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      font-size: 14px;
      line-height: 1.35;
      text-align: left;
    }

    /* Style for code blocks within messages */
    .message-text pre,
    .message-text code {
      font-family: monospace;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      padding: 2px 4px;
      overflow-x: auto;
      max-width: 100%;
      white-space: pre-wrap; /* Allow wrapping for very long lines */
      word-break: break-all; /* Break words at any character */
      box-sizing: border-box; /* Include padding in width calculation */
    }

    /* Code block container styles */
    .code-block-container {
      position: relative;
      margin: 8px 0;
      border-radius: 6px;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.05);
    }

    .user .code-block-container {
      background: rgba(255, 255, 255, 0.2);
    }

    .code-block-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 8px;
      background: rgba(0, 0, 0, 0.1);
      font-size: 12px;
    }

    .user .code-block-header {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }

    .code-language {
      font-family: monospace;
      font-size: 11px;
      font-weight: 500;
    }

    .code-copy-button {
      background: transparent;
      border: none;
      color: inherit;
      cursor: pointer;
      padding: 2px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.7;
      transition: all 0.15s ease;
    }

    .code-copy-button:hover {
      opacity: 1;
      background: rgba(0, 0, 0, 0.1);
    }

    .user .code-copy-button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .code-block-container pre {
      margin: 0;
      padding: 8px;
      background: transparent;
    }

    .code-block-container code {
      background: transparent;
      padding: 0;
      display: block;
      width: 100%;
    }

    .user .message-text pre,
    .user .message-text code {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }

    .tool-details {
      margin-top: 3px;
      padding-top: 3px;
      border-top: 1px dashed #e0e0e0;
      font-size: 12px;
    }

    .tool-name {
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 2px;
      background: #f0f0f0;
      padding: 2px 4px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .tool-input,
    .tool-result {
      margin-top: 2px;
      padding: 3px 5px;
      background: #f7f7f7;
      border-radius: 2px;
      font-family: monospace;
      font-size: 12px;
      overflow-x: auto;
      white-space: pre;
      line-height: 1.3;
      user-select: text;
      cursor: text;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
    }

    .tool-result {
      max-height: 300px;
      overflow-y: auto;
    }

    .usage-info {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #e0e0e0;
      font-size: 12px;
      color: #666;
    }

    /* Custom styles for IRC-like experience */
    .user .message-content {
      border-left-color: #2196f3;
    }

    .agent .message-content {
      border-left-color: #4caf50;
    }

    .tool .message-content {
      border-left-color: #ff9800;
    }

    .error .message-content {
      border-left-color: #f44336;
    }

    /* Compact message styling - distinct visual separation */
    .compact {
      background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
      border: 2px solid #fd7e14;
      border-radius: 12px;
      margin: 20px 0;
      padding: 0;
    }

    .compact .message-content {
      border-left: 4px solid #fd7e14;
      background: rgba(253, 126, 20, 0.05);
      font-weight: 500;
    }

    .compact .message-text {
      color: #8b4513;
      font-size: 13px;
      line-height: 1.4;
    }

    .compact::before {
      content: "📚 CONVERSATION EPOCH";
      display: block;
      text-align: center;
      font-size: 11px;
      font-weight: bold;
      color: #8b4513;
      background: #fd7e14;
      color: white;
      padding: 4px 8px;
      margin: 0;
      border-radius: 8px 8px 0 0;
      letter-spacing: 1px;
    }

    /* Pre-compaction messages get a subtle diagonal stripe background */
    .pre-compaction {
      background: repeating-linear-gradient(
        45deg,
        #ffffff,
        #ffffff 10px,
        #f8f8f8 10px,
        #f8f8f8 20px
      );
      opacity: 0.85;
      border-left: 3px solid #ddd;
    }

    .pre-compaction .message-content {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(1px);
    }

    /* Make message type display bold but without the IRC-style markers */
    .message-type {
      font-weight: bold;
    }

    /* Commit message styling */
    .commits-container {
      margin-top: 10px;
    }

    .commit-notification {
      background-color: #e8f5e9;
      color: #2e7d32;
      font-weight: 500;
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 10px;
      margin-bottom: 8px;
      text-align: center;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .commit-card {
      background-color: #f5f5f5;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 6px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
      padding: 6px 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .commit-hash {
      color: #0366d6;
      font-weight: bold;
      font-family: monospace;
      cursor: pointer;
      text-decoration: none;
      background-color: rgba(3, 102, 214, 0.08);
      padding: 2px 5px;
      border-radius: 4px;
    }

    .commit-hash:hover {
      background-color: rgba(3, 102, 214, 0.15);
    }

    .commit-branch {
      color: #28a745;
      font-weight: 500;
      cursor: pointer;
      font-family: monospace;
      background-color: rgba(40, 167, 69, 0.08);
      padding: 2px 5px;
      border-radius: 4px;
    }

    .commit-branch:hover {
      background-color: rgba(40, 167, 69, 0.15);
    }

    .commit-subject {
      font-size: 13px;
      color: #333;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .commit-diff-button {
      padding: 3px 8px;
      border: none;
      border-radius: 4px;
      background-color: #0366d6;
      color: white;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: block;
      margin-left: auto;
    }

    .commit-diff-button:hover {
      background-color: #0256b4;
    }

    /* Tool call cards */
    .tool-call-cards-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }

    /* Error message specific styling */
    .error .message-content {
      background-color: #ffebee;
      border-left: 3px solid #f44336;
    }

    .end-of-turn {
      margin-bottom: 15px;
    }

    .end-of-turn-indicator {
      display: block;
      font-size: 11px;
      color: #777;
      padding: 2px 0;
      margin-top: 8px;
      text-align: right;
      font-style: italic;
    }

    .user .end-of-turn-indicator {
      color: rgba(255, 255, 255, 0.7);
    }

    /* Message info panel styling */
    .message-info-panel {
      margin-top: 8px;
      padding: 8px;
      background-color: rgba(0, 0, 0, 0.03);
      border-radius: 6px;
      font-size: 12px;
      transition: all 0.2s ease;
      border-left: 2px solid rgba(0, 0, 0, 0.1);
    }

    .user .message-info-panel {
      background-color: rgba(255, 255, 255, 0.15);
      border-left: 2px solid rgba(255, 255, 255, 0.2);
    }

    .info-row {
      margin-bottom: 3px;
      display: flex;
    }

    .info-label {
      font-weight: bold;
      margin-right: 5px;
      min-width: 60px;
    }

    .info-value {
      flex: 1;
    }

    .conversation-id {
      font-family: monospace;
      font-size: 10px;
      word-break: break-all;
    }

    .markdown-content {
      box-sizing: border-box;
      min-width: 200px;
      margin: 0 auto;
    }

    .markdown-content p {
      margin-block-start: 0.3em;
      margin-block-end: 0.3em;
    }

    .markdown-content p:first-child {
      margin-block-start: 0;
    }

    .markdown-content p:last-child {
      margin-block-end: 0;
    }

    /* Styling for markdown elements */
    .markdown-content a {
      color: inherit;
      text-decoration: underline;
    }

    .user .markdown-content a {
      color: #fff;
      text-decoration: underline;
    }

    .markdown-content ul,
    .markdown-content ol {
      padding-left: 1.5em;
      margin: 0.5em 0;
    }

    .markdown-content blockquote {
      border-left: 3px solid rgba(0, 0, 0, 0.2);
      padding-left: 1em;
      margin-left: 0.5em;
      font-style: italic;
    }

    .user .markdown-content blockquote {
      border-left: 3px solid rgba(255, 255, 255, 0.4);
    }

    /* Mermaid diagram styling */
    .mermaid-container {
      margin: 1em 0;
      padding: 0.5em;
      background-color: #f8f8f8;
      border-radius: 4px;
      overflow-x: auto;
    }

    .mermaid {
      text-align: center;
    }
  `;

  // Track mermaid diagrams that need rendering
  private mermaidDiagrams = new Map();

  constructor() {
    super();
    // Initialize mermaid with specific config
    mermaid.initialize({
      startOnLoad: false,
      suppressErrorRendering: true,
      theme: "default",
      securityLevel: "loose", // Allows more flexibility but be careful with user-generated content
      fontFamily: "monospace",
    });
  }

  // See https://lit.dev/docs/components/lifecycle/
  connectedCallback() {
    super.connectedCallback();
  }

  // After the component is updated and rendered, render any mermaid diagrams
  updated(changedProperties: Map<string, unknown>) {
    super.updated(changedProperties);
    this.renderMermaidDiagrams();
    this.setupCodeBlockCopyButtons();
  }

  // Render mermaid diagrams after the component is updated
  renderMermaidDiagrams() {
    // Add a small delay to ensure the DOM is fully rendered
    setTimeout(() => {
      // Find all mermaid containers in our shadow root
      const containers = this.shadowRoot?.querySelectorAll(".mermaid");
      if (!containers || containers.length === 0) return;

      // Process each mermaid diagram
      containers.forEach((container) => {
        const id = container.id;
        const code = container.textContent || "";
        if (!code || !id) return; // Use return for forEach instead of continue

        try {
          // Clear any previous content
          container.innerHTML = code;

          // Render the mermaid diagram using promise
          mermaid
            .render(`${id}-svg`, code)
            .then(({ svg }) => {
              container.innerHTML = svg;
            })
            .catch((err) => {
              console.error("Error rendering mermaid diagram:", err);
              // Show the original code as fallback
              container.innerHTML = `<pre>${code}</pre>`;
            });
        } catch (err) {
          console.error("Error processing mermaid diagram:", err);
          // Show the original code as fallback
          container.innerHTML = `<pre>${code}</pre>`;
        }
      });
    }, 100); // Small delay to ensure DOM is ready
  }

  // Setup code block copy buttons after component is updated
  setupCodeBlockCopyButtons() {
    setTimeout(() => {
      // Find all copy buttons in code blocks
      const copyButtons =
        this.shadowRoot?.querySelectorAll(".code-copy-button");
      if (!copyButtons || copyButtons.length === 0) return;

      // Add click event listener to each button
      copyButtons.forEach((button) => {
        button.addEventListener("click", (e) => {
          e.stopPropagation();
          const codeId = (button as HTMLElement).dataset.codeId;
          if (!codeId) return;

          const codeElement = this.shadowRoot?.querySelector(`#${codeId}`);
          if (!codeElement) return;

          const codeText = codeElement.textContent || "";
          const buttonRect = button.getBoundingClientRect();

          // Copy code to clipboard
          navigator.clipboard
            .writeText(codeText)
            .then(() => {
              // Show success indicator
              const originalHTML = button.innerHTML;
              button.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              `;

              // Display floating message
              this.showFloatingMessage("Copied!", buttonRect, "success");

              // Reset button after delay
              setTimeout(() => {
                button.innerHTML = originalHTML;
              }, 2000);
            })
            .catch((err) => {
              console.error("Failed to copy code:", err);
              this.showFloatingMessage("Failed to copy!", buttonRect, "error");
            });
        });
      });
    }, 100); // Small delay to ensure DOM is ready
  }

  // See https://lit.dev/docs/components/lifecycle/
  disconnectedCallback() {
    super.disconnectedCallback();
  }

  renderMarkdown(markdownContent: string): string {
    try {
      // Create a custom renderer
      const renderer = new Renderer();
      const originalCodeRenderer = renderer.code.bind(renderer);

      // Override the code renderer to handle mermaid diagrams and add copy buttons
      renderer.code = function ({ text, lang, escaped }: Tokens.Code): string {
        if (lang === "mermaid") {
          // Generate a unique ID for this diagram
          const id = `mermaid-diagram-${Math.random().toString(36).substring(2, 10)}`;

          // Just create the container and mermaid div - we'll render it in the updated() lifecycle method
          return `<div class="mermaid-container">
                   <div class="mermaid" id="${id}">${text}</div>
                 </div>`;
        }

        // For regular code blocks, call the original renderer to get properly escaped HTML
        const originalCodeHtml = originalCodeRenderer({ text, lang, escaped });

        // Extract the code content from the original HTML to add our custom wrapper
        // The original renderer returns: <pre><code class="language-x">escapedText</code></pre>
        const codeMatch = originalCodeHtml.match(
          /<pre><code[^>]*>([\s\S]*?)<\/code><\/pre>/,
        );
        if (!codeMatch) {
          // Fallback to original if we can't parse it
          return originalCodeHtml;
        }

        const escapedText = codeMatch[1];
        const id = `code-block-${Math.random().toString(36).substring(2, 10)}`;
        const langClass = lang ? ` class="language-${lang}"` : "";

        return `<div class="code-block-container">
                 <div class="code-block-header">
                   ${lang ? `<span class="code-language">${lang}</span>` : ""}
                   <button class="code-copy-button" title="Copy code" data-code-id="${id}">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                       <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                       <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                     </svg>
                   </button>
                 </div>
                 <pre><code id="${id}"${langClass}>${escapedText}</code></pre>
               </div>`;
      };

      // Set markdown options for proper code block highlighting
      const markedOptions: MarkedOptions = {
        gfm: true, // GitHub Flavored Markdown
        breaks: true, // Convert newlines to <br>
        async: false,
        renderer: renderer,
      };

      // Parse markdown and sanitize the output HTML with DOMPurify
      const htmlOutput = marked.parse(markdownContent, markedOptions) as string;
      return DOMPurify.sanitize(htmlOutput, {
        // Allow common HTML elements that are safe
        ALLOWED_TAGS: [
          "p",
          "br",
          "strong",
          "em",
          "b",
          "i",
          "u",
          "s",
          "code",
          "pre",
          "h1",
          "h2",
          "h3",
          "h4",
          "h5",
          "h6",
          "ul",
          "ol",
          "li",
          "blockquote",
          "a",
          "div",
          "span", // For mermaid diagrams and code blocks
          "svg",
          "g",
          "path",
          "rect",
          "circle",
          "text",
          "line",
          "polygon", // For mermaid SVG
          "button", // For code copy buttons
        ],
        ALLOWED_ATTR: [
          "href",
          "title",
          "target",
          "rel", // For links
          "class",
          "id", // For styling and functionality
          "data-*", // For code copy buttons
          // SVG attributes for mermaid diagrams
          "viewBox",
          "width",
          "height",
          "xmlns",
          "fill",
          "stroke",
          "stroke-width",
          "d",
          "x",
          "y",
          "x1",
          "y1",
          "x2",
          "y2",
          "cx",
          "cy",
          "r",
          "rx",
          "ry",
          "points",
          "transform",
          "text-anchor",
          "font-size",
          "font-family",
        ],
        // Allow data attributes for functionality
        ALLOW_DATA_ATTR: true,
        // Keep whitespace for code formatting
        KEEP_CONTENT: true,
      });
    } catch (error) {
      console.error("Error rendering markdown:", error);
      // Fallback to sanitized plain text if markdown parsing fails
      return DOMPurify.sanitize(markdownContent);
    }
  }

  /**
   * Format timestamp for display
   */
  formatTimestamp(
    timestamp: string | number | Date | null | undefined,
    defaultValue: string = "",
  ): string {
    if (!timestamp) return defaultValue;
    try {
      const date = new Date(timestamp);
      if (isNaN(date.getTime())) return defaultValue;

      // Format: Mar 13, 2025 09:53:25 AM
      return date.toLocaleString("en-US", {
        month: "short",
        day: "numeric",
        year: "numeric",
        hour: "numeric",
        minute: "2-digit",
        second: "2-digit",
        hour12: true,
      });
    } catch (e) {
      return defaultValue;
    }
  }

  formatNumber(
    num: number | null | undefined,
    defaultValue: string = "0",
  ): string {
    if (num === undefined || num === null) return defaultValue;
    try {
      return num.toLocaleString();
    } catch (e) {
      return String(num);
    }
  }
  formatCurrency(
    num: number | string | null | undefined,
    defaultValue: string = "$0.00",
    isMessageLevel: boolean = false,
  ): string {
    if (num === undefined || num === null) return defaultValue;
    try {
      // Use 4 decimal places for message-level costs, 2 for totals
      const decimalPlaces = isMessageLevel ? 4 : 2;
      return `$${parseFloat(String(num)).toFixed(decimalPlaces)}`;
    } catch (e) {
      return defaultValue;
    }
  }

  // Format duration from nanoseconds to a human-readable string
  _formatDuration(nanoseconds: number | null | undefined): string {
    if (!nanoseconds) return "0s";

    const seconds = nanoseconds / 1e9;

    if (seconds < 60) {
      return `${seconds.toFixed(1)}s`;
    } else if (seconds < 3600) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes}min ${remainingSeconds.toFixed(0)}s`;
    } else {
      const hours = Math.floor(seconds / 3600);
      const remainingSeconds = seconds % 3600;
      const minutes = Math.floor(remainingSeconds / 60);
      return `${hours}h ${minutes}min`;
    }
  }

  showCommit(commitHash: string) {
    this.dispatchEvent(
      new CustomEvent("show-commit-diff", {
        bubbles: true,
        composed: true,
        detail: { commitHash },
      }),
    );
  }

  _toggleInfo(e: Event) {
    e.stopPropagation();
    this.showInfo = !this.showInfo;
  }

  copyToClipboard(text: string, event: Event) {
    const element = event.currentTarget as HTMLElement;
    const rect = element.getBoundingClientRect();

    navigator.clipboard
      .writeText(text)
      .then(() => {
        this.showFloatingMessage("Copied!", rect, "success");
      })
      .catch((err) => {
        console.error("Failed to copy text: ", err);
        this.showFloatingMessage("Failed to copy!", rect, "error");
      });
  }

  showFloatingMessage(
    message: string,
    targetRect: DOMRect,
    type: "success" | "error",
  ) {
    // Create floating message element
    const floatingMsg = document.createElement("div");
    floatingMsg.textContent = message;
    floatingMsg.className = `floating-message ${type}`;

    // Position it near the clicked element
    // Position just above the element
    const top = targetRect.top - 30;
    const left = targetRect.left + targetRect.width / 2 - 40;

    floatingMsg.style.position = "fixed";
    floatingMsg.style.top = `${top}px`;
    floatingMsg.style.left = `${left}px`;
    floatingMsg.style.zIndex = "9999";

    // Add to document body
    document.body.appendChild(floatingMsg);

    // Animate in
    floatingMsg.style.opacity = "0";
    floatingMsg.style.transform = "translateY(10px)";

    setTimeout(() => {
      floatingMsg.style.opacity = "1";
      floatingMsg.style.transform = "translateY(0)";
    }, 10);

    // Remove after animation
    setTimeout(() => {
      floatingMsg.style.opacity = "0";
      floatingMsg.style.transform = "translateY(-10px)";

      setTimeout(() => {
        document.body.removeChild(floatingMsg);
      }, 300);
    }, 1500);
  }

  render() {
    // Calculate if this is an end of turn message with no parent conversation ID
    const isEndOfTurn =
      this.message?.end_of_turn && !this.message?.parent_conversation_id;

    const isPreCompaction =
      this.message?.idx !== undefined &&
      this.message.idx < this.firstMessageIndex;

    return html`
      <div
        class="message ${this.message?.type} ${isEndOfTurn
          ? "end-of-turn"
          : ""} ${isPreCompaction ? "pre-compaction" : ""}"
      >
        <div class="message-container">
          <!-- Left area (empty for simplicity) -->
          <div class="message-metadata-left"></div>

          <!-- Message bubble -->
          <div class="message-bubble-container">
            <div class="message-content">
              <div class="message-text-container">
                <div class="message-actions">
                  ${copyButton(this.message?.content)}
                  <button
                    class="info-icon"
                    title="Show message details"
                    @click=${this._toggleInfo}
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <circle cx="12" cy="12" r="10"></circle>
                      <line x1="12" y1="16" x2="12" y2="12"></line>
                      <line x1="12" y1="8" x2="12.01" y2="8"></line>
                    </svg>
                  </button>
                </div>
                ${this.message?.content
                  ? html`
                      <div class="message-text markdown-content">
                        ${unsafeHTML(
                          this.renderMarkdown(this.message?.content),
                        )}
                      </div>
                    `
                  : ""}

                <!-- End of turn indicator inside the bubble -->
                ${isEndOfTurn && this.message?.elapsed
                  ? html`
                      <div class="end-of-turn-indicator">
                        end of turn
                        (${this._formatDuration(this.message?.elapsed)})
                      </div>
                    `
                  : ""}

                <!-- Info panel that can be toggled -->
                ${this.showInfo
                  ? html`
                      <div class="message-info-panel">
                        <div class="info-row">
                          <span class="info-label">Type:</span>
                          <span class="info-value">${this.message?.type}</span>
                        </div>
                        <div class="info-row">
                          <span class="info-label">Time:</span>
                          <span class="info-value"
                            >${this.formatTimestamp(
                              this.message?.timestamp,
                              "",
                            )}</span
                          >
                        </div>
                        ${this.message?.elapsed
                          ? html`
                              <div class="info-row">
                                <span class="info-label">Duration:</span>
                                <span class="info-value"
                                  >${this._formatDuration(
                                    this.message?.elapsed,
                                  )}</span
                                >
                              </div>
                            `
                          : ""}
                        ${this.message?.usage
                          ? html`
                              <div class="info-row">
                                <span class="info-label">Tokens:</span>
                                <span class="info-value">
                                  ${this.message?.usage
                                    ? html`
                                        <div>
                                          Input:
                                          ${this.formatNumber(
                                            this.message?.usage?.input_tokens ||
                                              0,
                                          )}
                                        </div>
                                        ${this.message?.usage
                                          ?.cache_creation_input_tokens
                                          ? html`
                                              <div>
                                                Cache creation:
                                                ${this.formatNumber(
                                                  this.message?.usage
                                                    ?.cache_creation_input_tokens,
                                                )}
                                              </div>
                                            `
                                          : ""}
                                        ${this.message?.usage
                                          ?.cache_read_input_tokens
                                          ? html`
                                              <div>
                                                Cache read:
                                                ${this.formatNumber(
                                                  this.message?.usage
                                                    ?.cache_read_input_tokens,
                                                )}
                                              </div>
                                            `
                                          : ""}
                                        <div>
                                          Output:
                                          ${this.formatNumber(
                                            this.message?.usage?.output_tokens,
                                          )}
                                        </div>
                                        <div>
                                          Cost:
                                          ${this.formatCurrency(
                                            this.message?.usage?.cost_usd,
                                          )}
                                        </div>
                                      `
                                    : "N/A"}
                                </span>
                              </div>
                            `
                          : ""}
                        ${this.message?.conversation_id
                          ? html`
                              <div class="info-row">
                                <span class="info-label">Conversation ID:</span>
                                <span class="info-value conversation-id"
                                  >${this.message?.conversation_id}</span
                                >
                              </div>
                            `
                          : ""}
                      </div>
                    `
                  : ""}
              </div>

              <!-- Tool calls - only shown for agent messages -->
              ${this.message?.type === "agent"
                ? html`
                    <sketch-tool-calls
                      .toolCalls=${this.message?.tool_calls}
                      .open=${this.open}
                    ></sketch-tool-calls>
                  `
                : ""}

              <!-- Commits section (redesigned as bubbles) -->
              ${this.message?.commits
                ? html`
                    <div class="commits-container">
                      <div class="commit-notification">
                        ${this.message.commits.length} new
                        commit${this.message.commits.length > 1 ? "s" : ""}
                        detected
                      </div>
                      ${this.message.commits.map((commit) => {
                        return html`
                          <div class="commit-card">
                            <span
                              class="commit-hash"
                              title="Click to copy: ${commit.hash}"
                              @click=${(e) =>
                                this.copyToClipboard(
                                  commit.hash.substring(0, 8),
                                  e,
                                )}
                            >
                              ${commit.hash.substring(0, 8)}
                            </span>
                            ${commit.pushed_branch
                              ? html`
                                  <span
                                    class="commit-branch pushed-branch"
                                    title="Click to copy: ${commit.pushed_branch}"
                                    @click=${(e) =>
                                      this.copyToClipboard(
                                        commit.pushed_branch,
                                        e,
                                      )}
                                    >${commit.pushed_branch}</span
                                  >
                                `
                              : ``}
                            <span class="commit-subject"
                              >${commit.subject}</span
                            >
                            <button
                              class="commit-diff-button"
                              @click=${() => this.showCommit(commit.hash)}
                            >
                              View Diff
                            </button>
                          </div>
                        `;
                      })}
                    </div>
                  `
                : ""}
            </div>
          </div>

          <!-- Right side (empty for consistency) -->
          <div class="message-metadata-right"></div>
        </div>
      </div>
    `;
  }
}

function copyButton(textToCopy: string) {
  // Use an icon of overlapping rectangles for copy
  const buttonClass = "copy-icon";

  // SVG for copy icon (two overlapping rectangles)
  const copyIcon = html`<svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
  </svg>`;

  // SVG for success check mark
  const successIcon = html`<svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M20 6L9 17l-5-5"></path>
  </svg>`;

  const ret = html`<button
    class="${buttonClass}"
    title="Copy to clipboard"
    @click=${(e: Event) => {
      e.stopPropagation();
      const copyButton = e.currentTarget as HTMLButtonElement;
      const originalInnerHTML = copyButton.innerHTML;
      navigator.clipboard
        .writeText(textToCopy)
        .then(() => {
          copyButton.innerHTML = "";
          const successElement = document.createElement("div");
          copyButton.appendChild(successElement);
          render(successIcon, successElement);
          setTimeout(() => {
            copyButton.innerHTML = originalInnerHTML;
          }, 2000);
        })
        .catch((err) => {
          console.error("Failed to copy text: ", err);
          setTimeout(() => {
            copyButton.innerHTML = originalInnerHTML;
          }, 2000);
        });
    }}
  >
    ${copyIcon}
  </button>`;

  return ret;
}

// Create global styles for floating messages
const floatingMessageStyles = document.createElement("style");
floatingMessageStyles.textContent = `
  .floating-message {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: system-ui, sans-serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .floating-message.success {
    background-color: rgba(40, 167, 69, 0.9);
  }

  .floating-message.error {
    background-color: rgba(220, 53, 69, 0.9);
  }

  /* Style for code, pre elements, and tool components to ensure proper wrapping/truncation */
  pre, code, sketch-tool-calls, sketch-tool-card, sketch-tool-card-bash {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  
  /* Special rule for the message content container */
  .message-content {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Ensure tool call containers don't overflow */
  ::slotted(sketch-tool-calls) {
    max-width: 100%;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
`;
document.head.appendChild(floatingMessageStyles);

declare global {
  interface HTMLElementTagNameMap {
    "sketch-timeline-message": SketchTimelineMessage;
  }
}