webui/src/web-components/demo/mermaid-test/mermaid-test.ts

import { html, css, LitElement } from "lit";
import { customElement } from "lit/decorators.js";
import "../../sketch-timeline-message.ts";
// Using simple objects matching the AgentMessage interface

@customElement("mermaid-test-component")
export class MermaidTestComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
    .test-section {
      margin-bottom: 30px;
    }
    h2 {
      margin-top: 0;
      color: #444;
    }
  `;

  render() {
    // Create a sample message with Mermaid diagrams
    const flowchartMessage = {
      id: "test-1",
      type: "agent",
      content: `# Mermaid Flowchart Example

This is a test of a flowchart diagram in Mermaid syntax:

\`\`\`mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Try again]
    C --> E[Continue]
    D --> B
\`\`\`

The above should render as a Mermaid diagram.`,
      timestamp: new Date().toISOString(),
    };

    const sequenceDiagramMessage = {
      id: "test-2",
      type: "agent",
      content: `# Mermaid Sequence Diagram Example

Here's a sequence diagram showing a typical HTTP request:

\`\`\`mermaid
sequenceDiagram
    participant Browser
    participant Server
    Browser->>Server: GET /index.html
    Server-->>Browser: HTML Response
    Browser->>Server: GET /style.css
    Server-->>Browser: CSS Response
    Browser->>Server: GET /script.js
    Server-->>Browser: JS Response
\`\`\`

Complex diagrams should render properly.`,
      timestamp: new Date().toISOString(),
    };

    const classDiagramMessage = {
      id: "test-3",
      type: "agent",
      content: `# Mermaid Class Diagram Example

A simple class diagram in Mermaid:

\`\`\`mermaid
classDiagram
    class Animal {
        +string name
        +makeSound() void
    }
    class Dog {
        +bark() void
    }
    class Cat {
        +meow() void
    }
    Animal <|-- Dog
    Animal <|-- Cat
\`\`\`

This represents a basic inheritance diagram.`,
      timestamp: new Date().toISOString(),
    };

    const normalMarkdownMessage = {
      id: "test-4",
      type: "agent",
      content: `# Regular Markdown

This is regular markdown with:

- A bullet list
- **Bold text**
- *Italic text*

\`\`\`javascript
// Regular code block
const x = 10;
console.log('This is not Mermaid');
\`\`\`

Regular markdown should continue to work properly.`,
      timestamp: new Date().toISOString(),
    };

    return html`
      <div class="test-section">
        <h2>Flowchart Diagram Test</h2>
        <sketch-timeline-message
          .message=${flowchartMessage}
        ></sketch-timeline-message>
      </div>

      <div class="test-section">
        <h2>Sequence Diagram Test</h2>
        <sketch-timeline-message
          .message=${sequenceDiagramMessage}
        ></sketch-timeline-message>
      </div>

      <div class="test-section">
        <h2>Class Diagram Test</h2>
        <sketch-timeline-message
          .message=${classDiagramMessage}
        ></sketch-timeline-message>
      </div>

      <div class="test-section">
        <h2>Normal Markdown Test</h2>
        <sketch-timeline-message
          .message=${normalMarkdownMessage}
        ></sketch-timeline-message>
      </div>
    `;
  }
}