all: fix formatting
diff --git a/webui/src/web-components/demo/mermaid-test/index.html b/webui/src/web-components/demo/mermaid-test/index.html
index e2fd202..3635122 100644
--- a/webui/src/web-components/demo/mermaid-test/index.html
+++ b/webui/src/web-components/demo/mermaid-test/index.html
@@ -1,34 +1,39 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Mermaid Diagram Test</title>
- <script type="module" src="./mermaid-test.ts"></script>
- <style>
- body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- padding: 20px;
- max-width: 1000px;
- margin: 0 auto;
- }
- h1 {
- color: #333;
- }
- .container {
- border: 1px solid #ddd;
- border-radius: 4px;
- padding: 20px;
- margin: 20px 0;
- }
- </style>
-</head>
-<body>
- <h1>Mermaid Diagram Testing</h1>
- <p>This page tests the integration of Mermaid diagrams in the markdown renderer.</p>
-
- <div class="container">
- <mermaid-test-component></mermaid-test-component>
- </div>
-</body>
-</html>
\ No newline at end of file
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Mermaid Diagram Test</title>
+ <script type="module" src="./mermaid-test.ts"></script>
+ <style>
+ body {
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+ Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ padding: 20px;
+ max-width: 1000px;
+ margin: 0 auto;
+ }
+ h1 {
+ color: #333;
+ }
+ .container {
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 20px;
+ margin: 20px 0;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Mermaid Diagram Testing</h1>
+ <p>
+ This page tests the integration of Mermaid diagrams in the markdown
+ renderer.
+ </p>
+
+ <div class="container">
+ <mermaid-test-component></mermaid-test-component>
+ </div>
+ </body>
+</html>
diff --git a/webui/src/web-components/demo/mermaid-test/mermaid-test.ts b/webui/src/web-components/demo/mermaid-test/mermaid-test.ts
index 7d8e04f..b697d92 100644
--- a/webui/src/web-components/demo/mermaid-test/mermaid-test.ts
+++ b/webui/src/web-components/demo/mermaid-test/mermaid-test.ts
@@ -1,9 +1,9 @@
-import { html, css, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import '../../sketch-timeline-message.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')
+@customElement("mermaid-test-component")
export class MermaidTestComponent extends LitElement {
static styles = css`
:host {
@@ -21,8 +21,8 @@
render() {
// Create a sample message with Mermaid diagrams
const flowchartMessage = {
- id: 'test-1',
- type: 'agent',
+ id: "test-1",
+ type: "agent",
content: `# Mermaid Flowchart Example
This is a test of a flowchart diagram in Mermaid syntax:
@@ -41,8 +41,8 @@
};
const sequenceDiagramMessage = {
- id: 'test-2',
- type: 'agent',
+ id: "test-2",
+ type: "agent",
content: `# Mermaid Sequence Diagram Example
Here's a sequence diagram showing a typical HTTP request:
@@ -64,8 +64,8 @@
};
const classDiagramMessage = {
- id: 'test-3',
- type: 'agent',
+ id: "test-3",
+ type: "agent",
content: `# Mermaid Class Diagram Example
A simple class diagram in Mermaid:
@@ -91,8 +91,8 @@
};
const normalMarkdownMessage = {
- id: 'test-4',
- type: 'agent',
+ id: "test-4",
+ type: "agent",
content: `# Regular Markdown
This is regular markdown with:
@@ -114,22 +114,30 @@
return html`
<div class="test-section">
<h2>Flowchart Diagram Test</h2>
- <sketch-timeline-message .message=${flowchartMessage}></sketch-timeline-message>
+ <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>
+ <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>
+ <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>
+ <sketch-timeline-message
+ .message=${normalMarkdownMessage}
+ ></sketch-timeline-message>
</div>
`;
}