webui: Add Mermaid diagram support to markdown
* Installed mermaid library
* Extended markdown renderer to support mermaid code blocks
* Added CSS styling for mermaid diagrams
* Added a demo page for testing mermaid diagrams
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/demo/sketch-timeline-message.demo.html b/webui/src/web-components/demo/sketch-timeline-message.demo.html
index 3c5d77e..add83a1 100644
--- a/webui/src/web-components/demo/sketch-timeline-message.demo.html
+++ b/webui/src/web-components/demo/sketch-timeline-message.demo.html
@@ -19,6 +19,21 @@
content: "a tool use message",
},
{
+ type:"agent",
+ content: `Mermaid Sequence Diagram Example
+\`\`\`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
+\`\`\``,
+ },
+ {
type: "commit",
end_of_turn: false,
content: "",