@lobehub/ui/es/hooks/useStreamMermaid.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"useStreamMermaid.mjs","names":[],"sources":["../../src/hooks/useStreamMermaid.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useId, useMemo, useState } from 'react';\n\nimport {\n  type MermaidRenderResult,\n  type MermaidThemeName,\n  renderMermaid,\n  useCdnMermaidFallback,\n} from './useMermaid';\n\nconst EMPTY: MermaidRenderResult = { svg: '' };\n\nexport const useStreamMermaid = (\n  content: string,\n  {\n    enabled = true,\n    theme: customTheme,\n  }: {\n    enabled?: boolean;\n    theme?: MermaidThemeName;\n  },\n): MermaidRenderResult => {\n  const reactId = useId();\n  const scopeId = useMemo(() => `mermaid-${reactId.replaceAll(':', '')}`, [reactId]);\n  const [primary, setPrimary] = useState<MermaidRenderResult>(EMPTY);\n\n  useEffect(() => {\n    if (!enabled || !content) {\n      setPrimary(EMPTY);\n      return;\n    }\n\n    // Debounce rendering so streaming content only re-renders after it settles\n    const timer = setTimeout(() => {\n      setPrimary(renderMermaid(content, scopeId, customTheme));\n    }, 300);\n\n    return () => clearTimeout(timer);\n  }, [enabled, content, scopeId, customTheme]);\n\n  const fallback = useCdnMermaidFallback(content, {\n    enabled: enabled && Boolean(primary.error),\n    theme: customTheme,\n  });\n\n  return primary.error ? fallback : primary;\n};\n"],"mappings":";;;;AAWA,MAAM,QAA6B,EAAE,KAAK,GAAG;AAE7C,MAAa,oBACX,SACA,EACE,UAAU,MACV,OAAO,kBAKe;CACxB,MAAM,UAAU,MAAM;CACtB,MAAM,UAAU,cAAc,WAAW,QAAQ,WAAW,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC;CACjF,MAAM,CAAC,SAAS,cAAc,SAA8B,KAAK;CAEjE,gBAAgB;EACd,IAAI,CAAC,WAAW,CAAC,SAAS;GACxB,WAAW,KAAK;GAChB;EACF;EAGA,MAAM,QAAQ,iBAAiB;GAC7B,WAAW,cAAc,SAAS,SAAS,WAAW,CAAC;EACzD,GAAG,GAAG;EAEN,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAS;EAAS;EAAS;CAAW,CAAC;CAE3C,MAAM,WAAW,sBAAsB,SAAS;EAC9C,SAAS,WAAW,QAAQ,QAAQ,KAAK;EACzC,OAAO;CACT,CAAC;CAED,OAAO,QAAQ,QAAQ,WAAW;AACpC"}