authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-10-14 23:10:05+00:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-10-14 23:10:05+00:00
log5a4e9980533705774dc3f45b35cacf76c3d78dbc
tree1d8f661505aa514eb2cd52019e649232dc32e34a
parent7bdfed98d733d1bcda99f43d43b24cd6913f2fce
signature Signed by PGP key B5690EEEBB952194

fix(web): mermaid code toggle stays in place when switching views (#19601)


1 files changed, 12 insertions(+), 9 deletions(-)

apps/web/src/components/ChatMarkdown.tsx+12-9
......@@ -849,7 +849,7 @@ function MarkdownCodeBlock({
849849 theme,
850850 onRunShellCommand,
851851 isStreaming,
852 leadingActions,
852 viewToggle,
853853 canWrap = true,
854854 diagram = false,
855855 children,
......@@ -860,9 +860,10 @@ function MarkdownCodeBlock({
860860 theme: "light" | "dark";
861861 onRunShellCommand?: ((command: string) => void) | undefined;
862862 isStreaming: boolean;
863 leadingActions?: ReactNode;
863 /** Switches between source and rendered content; sits left of copy in both views. */
864 viewToggle?: ReactNode;
864865 canWrap?: boolean;
865 /** Renders content instead of code, with actions below it like tables. */
866 /** Renders content frameless, with the code header's actions above it. */
866867 diagram?: boolean;
867868 children: ReactNode;
868869}) {
......@@ -942,12 +943,14 @@ function MarkdownCodeBlock({
942943
943944 if (diagram) {
944945 return (
945 <div className="my-[0.65rem]" data-language={language}>
946 {children}
947 <div className="mt-0.5 flex items-center justify-between select-none">
948 {leadingActions}
946 // The transparent border and header padding match the code frame, so the
947 // actions stay in place when switching views.
948 <div className="my-[0.65rem] border border-transparent" data-language={language}>
949 <div className="flex items-center justify-end gap-0.5 pt-1.5 pr-1.5 select-none">
950 {viewToggle}
949951 {copyButton}
950952 </div>
953 {children}
951954 </div>
952955 );
953956 }
......@@ -962,7 +965,6 @@ function MarkdownCodeBlock({
962965 headerProps={THREAD_FIND_IGNORE_PROPS}
963966 actions={
964967 <span className="flex items-center gap-0.5" role="toolbar" aria-label="Code block actions">
965 {leadingActions}
966968 {canWrap ? (
967969 <Tooltip>
968970 <TooltipTrigger
......@@ -1000,6 +1002,7 @@ function MarkdownCodeBlock({
10001002 <TooltipPopup side="top">Run in terminal</TooltipPopup>
10011003 </Tooltip>
10021004 ) : null}
1005 {viewToggle}
10031006 {copyButton}
10041007 </span>
10051008 }
......@@ -1043,7 +1046,7 @@ function MarkdownMermaidCodeBlock({
10431046 isStreaming={isStreaming}
10441047 canWrap={!showDiagram}
10451048 diagram={showDiagram}
1046 leadingActions={
1049 viewToggle={
10471050 isStreaming ? null : (
10481051 <Tooltip>
10491052 <TooltipTrigger