openclaw
Version:
Multi-channel AI gateway with extensible messaging integrations
181 lines • 13.9 kB
JavaScript
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{Wn as t,wr as n}from"./control-ui-foundation-Cydpkyqa.js";import{Sc as r,cn as i,xc as a}from"./control-ui-core-Rwzhj6nO.js";import{$ as o,K as s,X as c,at as l,dt as u,q as d,st as f}from"./lit-runtime-CV_MH99K.js";import{Gt as p,Wt as m,Yt as h,Z as g,en as _}from"./control-ui-core-vvcQQV2m.js";import{wt as v}from"./control-ui-boot-shared-DfZ39Yj9.js";import{M as y,N as b}from"./markdown-runtime-Bn6OdBVq.js";import{n as x}from"./theme-color-BwHgSJo3.js";var S;function C(){return(C=e((()=>{S=``+new URL(`mermaid.min-BZuf2r7K.js`,import.meta.url).href})))()}var w;function T(){return(T=e((()=>{w=``+new URL(`frame-Cvb396Ae.js`,import.meta.url).href})))()}function E(e,t){if(e.length>M)throw Error(`Mermaid diagram output is too large.`);let n=b(window).sanitize(e,{ALLOWED_TAGS:L,ALLOWED_ATTR:R,ALLOW_DATA_ATTR:!1,ALLOW_ARIA_ATTR:!0,RETURN_DOM_FRAGMENT:!0}),r=n.firstElementChild;if(n.childElementCount!==1||!(r instanceof SVGSVGElement))throw Error(`Mermaid returned an invalid diagram.`);let i=[r,...r.querySelectorAll(`*`)];if(i.length>N)throw Error(`Mermaid diagram contains too many elements.`);let a=document.createElement(`canvas`).getContext(`2d`);if(!a)throw new k(`Mermaid diagram colors could not be prepared.`);for(let e of i){for(let t of[`marker-start`,`marker-mid`,`marker-end`,`clip-path`,`mask`]){let n=e.getAttribute(t);n&&n!==`none`&&!I.test(n)&&e.removeAttribute(t)}for(let t of[`fill`,`stroke`,`stop-color`]){let n=e.getAttribute(t);!n||n===`none`||I.test(n)||(a.fillStyle=`#000000`,a.fillStyle=n,e.setAttribute(t,a.fillStyle))}}r.setAttribute(`xmlns`,F);let o=document.createElementNS(F,`rect`),s=r.viewBox.baseVal;return o.setAttribute(`x`,String(s.x)),o.setAttribute(`y`,String(s.y)),o.setAttribute(`width`,`100%`),o.setAttribute(`height`,`100%`),a.fillStyle=t,o.setAttribute(`fill`,a.fillStyle),r.prepend(o),new XMLSerializer().serializeToString(r)}function D(){let e=document.createElement(`iframe`),n=new MessageChannel,r,i,a=new Promise((e,t)=>{r=e,i=t}),o,s=0,c=!1,l=!1,u=!1,d,f={frame:e,ready:a,dispose(t){u||(u=!0,window.clearTimeout(d),n.port1.close(),n.port2.close(),e.remove(),i(t),o?.reject(t),o=void 0,z===f&&(z=void 0))},render(t,r){return u||!e.isConnected?Promise.reject(new k(`Mermaid renderer is unavailable.`)):new Promise((e,i)=>{let a=++s;o={id:a,resolve:e,reject:i},d=window.setTimeout(()=>f.dispose(new k(`Mermaid diagram rendering timed out.`)),P),n.port1.postMessage({id:a,source:t,config:r,maxSvgLength:M,maxSvgElements:N})})}};n.port1.addEventListener(`message`,n=>{if(u||!e.isConnected)return;let i=t(n.data);if(!c&&i.type===`ready`){c=!0,window.clearTimeout(d),r();return}let a=o;!c||!a||i.id!==a.id||(o=void 0,window.clearTimeout(d),typeof i.error==`string`?a.reject(Error(i.error.slice(0,1e3))):typeof i.svg==`string`&&i.svg.length<=M?a.resolve(i.svg):a.reject(Error(`Mermaid returned an invalid diagram.`)))}),n.port1.start(),e.addEventListener(`load`,()=>{if(l){f.dispose(new k(`Mermaid renderer navigated unexpectedly.`));return}l=!0,e.contentWindow?.postMessage({type:`openclaw:mermaid-init`},`*`,[n.port2])}),e.setAttribute(`sandbox`,`allow-scripts`),e.setAttribute(`aria-hidden`,`true`),e.tabIndex=-1,e.inert=!0,e.referrerPolicy=`no-referrer`,e.style.cssText=`position:fixed;left:-10000px;top:0;width:1024px;height:768px;border:0;visibility:hidden;pointer-events:none`;let p=[S,w].map(e=>new URL(e,location.href).href),m=`default-src 'none'; script-src ${p.join(` `)}; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'`,h=document.implementation.createHTMLDocument(``),g=h.createElement(`meta`);g.httpEquiv=`Content-Security-Policy`,g.content=m,h.head.append(g);for(let e of p){let t=h.createElement(`script`);t.src=e,h.head.append(t)}return e.srcdoc=`<!doctype html>${h.documentElement.outerHTML}`,d=window.setTimeout(()=>f.dispose(new k(`Mermaid renderer could not be loaded.`)),P),document.body.append(e),f}function O(e,t){if(!e.trim()||e.length>A)return Promise.reject(Error(`Mermaid diagrams must contain 1–${A} characters.`));let n=B.then(async()=>{z&&!z.frame.isConnected&&z.dispose(new k(`Mermaid renderer was removed.`)),z??=D();let n=z;try{await n.ready;let r={startOnLoad:!1,securityLevel:`strict`,secure:[`dompurifyConfig`],htmlLabels:!1,suppressErrorRendering:!0,maxTextSize:A,maxEdges:j,arrowMarkerAbsolute:!1,theme:`base`,themeCSS:``,fontFamily:t.fontFamily,themeVariables:{darkMode:t.darkMode,background:t.background,primaryColor:t.background,primaryTextColor:t.foreground,primaryBorderColor:t.border,lineColor:t.muted,secondaryColor:t.accent,tertiaryColor:t.background,textColor:t.foreground,edgeLabelBackground:t.background}};return E(await n.render(e,r),t.background)}catch(e){throw n.dispose(e instanceof Error?e:Error(String(e))),e}});return B=n.then(()=>{},()=>{}),n}var k,A,j,M,N,P,F,I,L,R,z,B;function V(){return(V=e((()=>{y(),C(),T(),k=class extends Error{},A=2e4,j=200,M=1e6,N=5e3,P=15e3,F=`http://www.w3.org/2000/svg`,I=/^url\(["']?(#[^\s"'()]+)["']?\)$/u,L=[`svg`,`g`,`defs`,`marker`,`path`,`rect`,`circle`,`ellipse`,`polygon`,`polyline`,`line`,`text`,`tspan`,`title`,`desc`,`clipPath`,`mask`,`linearGradient`,`radialGradient`,`stop`,`pattern`],R=`id.xmlns.viewBox.width.height.x.y.dx.dy.x1.y1.x2.y2.cx.cy.r.rx.ry.d.points.transform.preserveAspectRatio.fill.fill-opacity.fill-rule.stroke.stroke-width.stroke-opacity.stroke-linecap.stroke-linejoin.stroke-dasharray.stroke-dashoffset.opacity.font-family.font-size.font-weight.font-style.text-anchor.dominant-baseline.alignment-baseline.baseline-shift.text-decoration.letter-spacing.word-spacing.visibility.display.markerWidth.markerHeight.refX.refY.orient.markerUnits.marker-start.marker-mid.marker-end.clip-path.mask.gradientUnits.gradientTransform.offset.stop-color.stop-opacity.patternUnits.patternContentUnits.patternTransform.role`.split(`.`),B=Promise.resolve(),window.addEventListener(`pagehide`,()=>z?.dispose(new k(`Mermaid renderer closed.`)))})))()}function H(){let e=document.documentElement,t=getComputedStyle(e),n=e.dataset.themeMode===`dark`;return{background:x(t,`--card`)||(n?`#181818`:`#ffffff`),foreground:x(t,`--text`)||(n?`#eeeeee`:`#171717`),muted:x(t,`--muted`)||`#888888`,border:x(t,`--border-hover`)||`#888888`,accent:x(t,`--accent`)||`#888888`,fontFamily:t.getPropertyValue(`--font-body`).trim()||`system-ui, sans-serif`,darkMode:n}}function U(e,t,n){let r=K.get(e);return r?K.delete(e):(r=O(t,n),r.catch(()=>{K.get(e)===r&&K.delete(e)})),K.set(e,r),K.size>G&&K.delete(K.keys().next().value),r}function W(e){let t=!1;for(let n of e.querySelectorAll(`.markdown-mermaid`)){let e=n.querySelector(`pre code`);if(!e)continue;let r=document.createElement(`openclaw-mermaid`);r.source=e.textContent??``,n.replaceChildren(r),t=!0}return t}var G,K,q;function J(){return(J=e((()=>{V(),s(),o(),h(),r(),p(),v(),g(),G=16,K=new Map,q=class extends a{constructor(...e){super(...e),this.source=``,this.imageUrl=``,this.showSource=!1,this.expanded=!1,this.renderKey=``,this.generation=0,this.copyAttempt=0,this.themeObserver=new MutationObserver(()=>void this.renderDiagram())}static{this.styles=u`
:host {
display: block;
position: relative;
min-width: 0;
margin: 12px 0;
border: 1px solid var(--border);
border-radius: var(--radius-md, 10px);
overflow: hidden;
background: var(--card);
color: var(--text);
font-family: var(--font-body);
}
.actions {
position: absolute;
inset-block-start: 6px;
inset-inline-end: 6px;
z-index: 1;
display: flex;
align-items: center;
gap: 2px;
}
button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: var(--radius-sm, 6px);
background: transparent;
color: var(--muted);
font: inherit;
cursor: default;
}
button:hover,
button[aria-expanded="true"] {
background: var(--bg-hover);
color: var(--text);
}
button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
button svg {
width: 15px;
height: 15px;
}
.copy-button {
opacity: 0;
pointer-events: none;
}
:host(:hover) .copy-button,
:host(:focus-within) .copy-button {
opacity: 1;
pointer-events: auto;
}
.copy-feedback {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
wa-dropdown::part(menu) {
min-width: 160px;
padding: var(--menu-padding);
border: 1px solid var(--overlay-border);
border-radius: var(--menu-radius);
background: var(--bg-elevated);
box-shadow: var(--overlay-shadow);
}
wa-dropdown-item {
min-height: var(--menu-item-height);
padding: 0 8px;
border-radius: var(--menu-item-radius);
color: var(--text);
font: 12px var(--font-body);
cursor: default;
}
wa-dropdown-item:hover,
wa-dropdown-item:focus-visible {
background: var(--bg-hover);
}
.preview {
padding: 36px 16px 16px;
overflow: auto;
}
img {
display: block;
width: 100%;
max-height: 480px;
object-fit: contain;
}
pre {
margin: 0;
padding: 36px 16px 16px;
overflow: auto;
max-height: 480px;
font: 12px/1.6 var(--mono);
tab-size: 2;
}
.status {
margin: 0;
padding: 36px 16px 12px;
font-size: 12px;
color: var(--muted);
}
@media (hover: none), (pointer: coarse) {
button {
width: 36px;
height: 36px;
}
.copy-button {
opacity: 1;
pointer-events: auto;
}
.preview,
pre,
.status {
padding-top: 44px;
}
}
`}connectedCallback(){super.connectedCallback(),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-theme`,`data-theme-mode`,`style`]}),this.hasUpdated&&this.renderDiagram()}disconnectedCallback(){this.themeObserver.disconnect(),this.generation+=1,this.copyAttempt+=1,this.renderKey=``,this.expanded=!1,this.releaseImage(),super.disconnectedCallback()}updated(e){e.has(`source`)&&(this.copyResult=void 0,this.copyAttempt+=1,this.releaseImage(),this.renderDiagram())}releaseImage(){this.imageUrl&&=(URL.revokeObjectURL(this.imageUrl),``)}async renderDiagram(){let e=H(),t=JSON.stringify([this.source,e]);if(!this.isConnected||t===this.renderKey)return;this.renderKey=t;let n=++this.generation;this.renderStatus=`rendering`;try{let r=await U(t,this.source,e);if(!this.isConnected||n!==this.generation)return;this.releaseImage(),this.imageUrl=URL.createObjectURL(new Blob([r],{type:`image/svg+xml`})),this.renderStatus=void 0}catch(e){this.isConnected&&n===this.generation&&(this.releaseImage(),this.renderStatus=e instanceof k?`rendererError`:`error`)}}async copySource(){let e=++this.copyAttempt,t=await i(this.source);this.isConnected&&e===this.copyAttempt&&(this.copyResult=t)}render(){let e=this.renderStatus!==void 0&&this.renderStatus!==`rendering`,t=this.showSource||e,n=_(this.copyResult===void 0?`chat.mermaid.copySource`:this.copyResult?`common.copied`:`common.copyFailed`);return c`
<div class="actions">
<button
class="copy-button"
type="button"
aria-label=${n}
title=${n}
@click=${()=>void this.copySource()}
>
<span aria-hidden="true"
>${this.copyResult===void 0?m.copy:this.copyResult?m.check:m.x}</span
>
</button>
<wa-dropdown
placement="bottom-end"
size="s"
.distance=${4}
aria-label=${_(`chat.mermaid.options`)}
@wa-select=${e=>{let t=e.detail.item.value;t===`expand`?this.expanded=!0:(t===`source`||t===`diagram`)&&(this.showSource=t===`source`)}}
>
<button
slot="trigger"
type="button"
aria-label=${_(`chat.mermaid.options`)}
title=${_(`chat.mermaid.options`)}
>
<span aria-hidden="true">${m.moreHorizontal}</span>
</button>
<wa-dropdown-item
value=${t?`diagram`:`source`}
?disabled=${t&&!this.imageUrl}
>${_(t?`chat.mermaid.diagram`:`chat.mermaid.source`)}</wa-dropdown-item
>
<wa-dropdown-item value="expand" ?disabled=${!this.imageUrl}
>${_(`chat.mermaid.expand`)}</wa-dropdown-item
>
</wa-dropdown>
</div>
<span class="copy-feedback" aria-live="polite"
>${this.copyResult===void 0?d:n}</span
>
${this.renderStatus&&(e||!this.imageUrl)?c`<p class="status" role="status">${_(`chat.mermaid.${this.renderStatus}`)}</p>`:d}
${t?c`<pre><code>${this.source}</code></pre>`:this.imageUrl?c`<div class="preview">
<img
src=${this.imageUrl}
alt=${_(`chat.mermaid.title`)}
@error=${()=>{this.renderStatus=`imageError`,this.releaseImage()}}
/>
</div>`:d}
${this.expanded&&this.imageUrl?c`<openclaw-image-lightbox
src=${this.imageUrl}
.imageTitle=${_(`chat.mermaid.title`)}
@image-lightbox-close=${()=>{this.expanded=!1}}
></openclaw-image-lightbox>`:d}
`}},n([f({attribute:!1})],q.prototype,`source`,void 0),n([l()],q.prototype,`imageUrl`,void 0),n([l()],q.prototype,`showSource`,void 0),n([l()],q.prototype,`expanded`,void 0),n([l()],q.prototype,`renderStatus`,void 0),n([l()],q.prototype,`copyResult`,void 0),customElements.get(`openclaw-mermaid`)||customElements.define(`openclaw-mermaid`,q)})))()}J();export{W as mountMermaidBlocks};
//# sourceMappingURL=markdown-mermaid-Dg-raW5O.js.map