BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): add Mermaid diagram zoom controls (#2100)

Browse Source 
* feat(chat): add mermaid diagram zoom controls

* fix(chat): handle malformed mermaid data urls

* fix(chat): preserve mermaid load error stack

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
Carson
2026-07-08 20:43:23 +03:00
committed by GitHub
co-authored by Bohdan Triapitsyn
parent dfed121bf1
commit 3d32ac7989
18 changed files with 1069 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/index.css
+43 -15
View File
@@ -1318,32 +1318,49 @@ html:not(.dark) .chat-scroll {
[data-markdown="mermaid-block"] [data-markdown="mermaid-scroll"] {
overflow: auto;
min-width: 0;
}
[data-markdown="mermaid-block"][data-mermaid-render="svg"] [data-markdown="mermaid-scroll"] {
overflow: hidden;
}
[data-markdown="mermaid-block"] [data-markdown="mermaid-viewport"] {
width: 100%;
min-width: 0;
height: min(24rem, 70vh);
min-height: 12rem;
overflow: hidden;
touch-action: none;
border-radius: 0.5rem;
background: var(--surface-elevated);
}
[data-markdown="mermaid-block"] [data-markdown="mermaid"] {
width: max-content;
min-width: 100%;
width: 100%;
height: 100%;
display: block;
}
[data-markdown="mermaid-block"][data-mermaid-panning="true"] [data-markdown="mermaid-viewport"] {
cursor: grabbing;
}
[data-markdown="mermaid-block"] [data-markdown="mermaid-ascii"] {
margin: 0;
white-space: pre;
width: max-content;
min-width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: var(--font-mono);
color: var(--surface-foreground);
background: transparent;
}
[data-markdown="mermaid-block"] [data-markdown="mermaid"] svg {
width: auto !important;
min-width: 100%;
width: 100% !important;
height: 100% !important;
min-width: 0;
max-width: none !important;
height: auto !important;
}
[data-markdown="mermaid-block"] svg {
display: block;
background: var(--surface-elevated);
}
@@ -1375,10 +1392,21 @@ html:not(.dark) .chat-scroll {
overflow: auto;
}
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] [data-markdown="mermaid"] {
width: max-content;
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"][data-mermaid-render="svg"] [data-markdown="mermaid-scroll"] {
overflow: hidden;
}
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] [data-markdown="mermaid-viewport"] {
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] [data-markdown="mermaid"] {
width: 100%;
height: 100%;
display: block;
}
@@ -1388,14 +1416,14 @@ html:not(.dark) .chat-scroll {
width: max-content;
min-width: 100%;
min-height: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: var(--font-mono);
color: var(--surface-foreground);
background: transparent;
}
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] svg {
width: auto !important;
height: auto !important;
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] [data-markdown="mermaid"] svg {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-width: 100%;