all: fix formatting
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>
`;
}