🐛 fix(markdown): render mermaid in notebook document (#12624)

* 🐛 fix(markdown): render mermaid blocks in notebook documents

Render `mermaid` code fences with the Mermaid component in MDX code blocks so notebook documents display diagrams consistently with chat flow.

Made-with: Cursor

* fix: search event

Signed-off-by: Innei <tukon479@gmail.com>

---------

Signed-off-by: Innei <tukon479@gmail.com>

src/components/OllamaSetupGuide/index.tsx

@@ -28,7 +28,17 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 }));
 
 const SetupGuide = memo(() => {
-  const iconColor = useMemo(() => readableColor(cssVar.colorPrimary), []);
+  const iconColor = useMemo(() => {
+    if (typeof window === 'undefined') return '#fff';
+
+    const variableExpression = cssVar.colorPrimary;
+    const variableName = variableExpression.match(/var\((--[^),\s]+)/)?.[1];
+    const computedColor = variableName
+      ? getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
+      : variableExpression;
+
+    return readableColor(computedColor || '#1677ff');
+  }, []);
   const { t } = useTranslation('components');
   return (
     <>
@@ -51,7 +61,12 @@ const SetupGuide = memo(() => {
                         ns={'components'}
                         components={[
                           <span key="0" />,
-                          <a href={'https://ollama.com/download'} key="1" rel="noreferrer" target="_blank" />,
+                          <a
+                            href={'https://ollama.com/download'}
+                            key="1"
+                            rel="noreferrer"
+                            target="_blank"
+                          />,
                         ]}
                       />
                     ),
@@ -66,7 +81,7 @@ const SetupGuide = memo(() => {
                         <Flexbox gap={8}>
                           {t('OllamaSetupGuide.cors.macos')}
                           <Snippet language={'bash'}>
-                            { }
+                            {}
                             launchctl setenv OLLAMA_ORIGINS "*"
                           </Snippet>
                           {t('OllamaSetupGuide.cors.reboot')}
@@ -97,7 +112,12 @@ const SetupGuide = memo(() => {
                         ns={'components'}
                         components={[
                           <span key="0" />,
-                          <a href={'https://ollama.com/download'} key="1" rel="noreferrer" target="_blank" />,
+                          <a
+                            href={'https://ollama.com/download'}
+                            key="1"
+                            rel="noreferrer"
+                            target="_blank"
+                          />,
                         ]}
                       />
                     ),
@@ -162,11 +182,10 @@ const SetupGuide = memo(() => {
                         <div>{t('OllamaSetupGuide.cors.description')}</div>
 
                         <div>{t('OllamaSetupGuide.cors.linux.systemd')}</div>
-                        { }
+                        {}
                         <Snippet language={'bash'}> sudo systemctl edit ollama.service</Snippet>
                         {t('OllamaSetupGuide.cors.linux.env')}
                         <Highlighter
-                           
                           fullFeatured
                           showLanguage
                           fileName={'ollama.service'}
@@ -216,7 +235,7 @@ Environment="OLLAMA_ORIGINS=*"`}
                           fileName={'ollama.service'}
                           language={'bash'}
                         >
-                          { }
+                          {}
                           docker run -d --gpus=all -v ollama:/root/.ollama -e OLLAMA_ORIGINS="*" -p
                           11434:11434 --name ollama ollama/ollama
                         </Highlighter>
@@ -232,6 +251,9 @@ Environment="OLLAMA_ORIGINS=*"`}
             label: 'Docker',
           },
         ]}
+        style={{
+          width: '500px',
+        }}
       />
     </>
   );

src/components/mdx/CodeBlock.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Mermaid } from '@lobehub/ui';
 import { Pre, PreSingleLine } from '@lobehub/ui/mdx';
 import { type FC, type PropsWithChildren } from 'react';
 
@@ -35,7 +36,9 @@ const CodeBlock: FC<PropsWithChildren> = ({ children }) => {
   if (!code) return;
 
   if (code.isSingleLine) return <PreSingleLine language={code.lang}>{code.content}</PreSingleLine>;
-
+  if (code.lang === 'mermaid') {
+    return <Mermaid variant={'borderless'}>{code.content}</Mermaid>;
+  }
   return (
     <Pre fullFeatured allowChangeLanguage={false} language={code.lang}>
       {code.content}

src/features/ModelSwitchPanel/components/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { Flexbox, Icon, SearchBar, Segmented } from '@lobehub/ui';
+import { Flexbox, Icon, SearchBar, Segmented, stopPropagation } from '@lobehub/ui';
 import { ProviderIcon } from '@lobehub/ui/icons';
 import { Brain } from 'lucide-react';
 import { memo } from 'react';
@@ -35,6 +35,7 @@ export const Toolbar = memo<ToolbarProps>(
           value={searchKeyword}
           variant="borderless"
           onChange={(e) => onSearchKeywordChange(e.target.value)}
+          onKeyDown={stopPropagation}
         />
         <Segmented
           size="small"

src/features/ModelSwitchPanel/index.tsx

@@ -4,6 +4,7 @@ import {
   DropdownMenuPositioner,
   DropdownMenuRoot,
   DropdownMenuTrigger,
+  stopPropagation,
   TooltipGroup,
 } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
@@ -40,7 +41,7 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
           <DropdownMenuTrigger openOnHover={openOnHover}>{children}</DropdownMenuTrigger>
           <DropdownMenuPortal>
             <DropdownMenuPositioner hoverTrigger={openOnHover} placement={placement}>
-              <DropdownMenuPopup className={styles.container}>
+              <DropdownMenuPopup className={styles.container} onKeyDown={stopPropagation}>
                 <PanelContent
                   model={modelProp}
                   provider={providerProp}