Blocks: extract overlay button

src/modules/blocks/OverlayButton.tsx

@@ -0,0 +1,42 @@
+import type { SxProps } from '@mui/joy/styles/types';
+import { IconButton, styled } from '@mui/joy';
+
+
+export const overlayButtonsClassName = 'overlay-buttons';
+
+export const overlayButtonsSx: SxProps = {
+  // stick to the top-right corner
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  zIndex: 2, // top of message and its chips
+
+  // stype
+  p: 0.5,
+
+  // layout
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 1,
+
+  // faded-out defaults
+  opacity: 'var(--AGI-overlay-start-opacity, 0)',
+  pointerEvents: 'none',
+  transition: 'opacity 0.2s cubic-bezier(.17,.84,.44,1)',
+  // buttongroup: background
+  // '& > div > button': {
+  //   backgroundColor: 'background.surface',
+  //   backdropFilter: 'blur(12px)',
+  // },
+};
+
+export const overlayButtonsActiveSx = {
+  opacity: 1,
+  pointerEvents: 'auto',
+};
+
+
+export const OverlayButton = styled(IconButton)(({ theme, variant }) => ({
+  backgroundColor: variant === 'outlined' ? theme.palette.background.surface : undefined,
+  '--Icon-fontSize': theme.fontSize.lg,
+})) as typeof IconButton;

src/modules/blocks/code/ButtonCodePen.tsx

@@ -6,7 +6,7 @@ import { Brand } from '~/common/app.config';
 import { CodePenIcon } from '~/common/components/icons/3rdparty/CodePenIcon';
 import { prettyTimestampForFilenames } from '~/common/util/timeUtils';
 
-import { OverlayButton } from './RenderCode';
+import { OverlayButton } from '../OverlayButton';
 
 
 // CodePen is a web-based HTML, CSS, and JavaScript code editor

src/modules/blocks/code/ButtonJSFiddle.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Tooltip } from '@mui/joy';
 
-import { OverlayButton } from './RenderCode';
+import { OverlayButton } from '../OverlayButton';
 
 
 // JSFiidle is a web-based HTML, CSS, and JavaScript code editor

src/modules/blocks/code/ButtonStackBlitz.tsx

@@ -6,7 +6,7 @@ import { Brand } from '~/common/app.config';
 import { StackBlitzIcon } from '~/common/components/icons/3rdparty/StackBlitzIcon';
 import { prettyTimestampForFilenames } from '~/common/util/timeUtils';
 
-import { OverlayButton } from './RenderCode';
+import { OverlayButton } from '../OverlayButton';
 
 
 const _languages = [

src/modules/blocks/code/RenderCode.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useShallow } from 'zustand/react/shallow';
 
 import type { SxProps } from '@mui/joy/styles/types';
-import { Box, ButtonGroup, IconButton, Sheet, styled, Tooltip, Typography } from '@mui/joy';
+import { Box, ButtonGroup, Sheet, Tooltip, Typography } from '@mui/joy';
 import ChangeHistoryTwoToneIcon from '@mui/icons-material/ChangeHistoryTwoTone';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import FitScreenIcon from '@mui/icons-material/FitScreen';
@@ -28,44 +28,7 @@ import { heuristicIsBlockTextHTML } from '../html/RenderHtmlResponse';
 
 // style for line-numbers
 import './RenderCode.css';
-
-
-export const OverlayButton = styled(IconButton)(({ theme, variant }) => ({
-  backgroundColor: variant === 'outlined' ? theme.palette.background.surface : undefined,
-  '--Icon-fontSize': theme.fontSize.lg,
-})) as typeof IconButton;
-
-
-export const overlayButtonsSx: SxProps = {
-  // stick to the top-right corner
-  position: 'absolute',
-  top: 0,
-  right: 0,
-  zIndex: 2, // top of message and its chips
-
-  // stype
-  p: 0.5,
-
-  // layout
-  display: 'flex',
-  flexDirection: 'row',
-  gap: 1,
-
-  // faded-out defaults
-  opacity: 'var(--AGI-overlay-start-opacity, 0)',
-  pointerEvents: 'none',
-  transition: 'opacity 0.2s cubic-bezier(.17,.84,.44,1)',
-  // buttongroup: background
-  // '& > div > button': {
-  //   backgroundColor: 'background.surface',
-  //   backdropFilter: 'blur(12px)',
-  // },
-};
-
-export const overlayButtonsActiveSx = {
-  opacity: 1,
-  pointerEvents: 'auto',
-};
+import { OverlayButton, overlayButtonsActiveSx, overlayButtonsClassName, overlayButtonsSx } from '~/modules/blocks/OverlayButton';
 
 
 interface RenderCodeBaseProps {
@@ -180,7 +143,7 @@ function RenderCodeImpl(props: RenderCodeImplProps) {
         '[data-joy-color-scheme="dark"] &': (renderPlantUML || renderMermaid) ? { backgroundColor: 'neutral.500' } : {},
 
         // fade in children buttons
-        '&:hover > .overlay-buttons': overlayButtonsActiveSx,
+        [`&:hover > ${overlayButtonsClassName}`]: overlayButtonsActiveSx,
 
         // lots more style, incl font, background, embossing, radius, etc.
         ...props.sx,
@@ -205,7 +168,7 @@ function RenderCodeImpl(props: RenderCodeImplProps) {
               : <RenderCodeSyntax highlightedSyntaxAsHtml={highlightedCode} />}
 
       {/* Overlay Buttons */}
-      <Box className='overlay-buttons' sx={overlayButtonsSx}>
+      <Box className={overlayButtonsClassName} sx={overlayButtonsSx}>
 
         {/* Show HTML */}
         {isHTML && (

src/modules/blocks/html/RenderHtmlResponse.tsx

@@ -8,8 +8,8 @@ import WebIcon from '@mui/icons-material/Web';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
 
 import type { HtmlBlock } from '../blocks.types';
-import { OverlayButton, overlayButtonsActiveSx, overlayButtonsSx } from '../code/RenderCode';
-import { RenderCodeHtmlIFrame } from '~/modules/blocks/code/RenderCodeHtmlIFrame';
+import { OverlayButton, overlayButtonsActiveSx, overlayButtonsClassName, overlayButtonsSx } from '../OverlayButton';
+import { RenderCodeHtmlIFrame } from '../code/RenderCodeHtmlIFrame';
 
 
 // this is used by the blocks parser (for full text detection) and by the Code component (for inline rendering)
@@ -41,7 +41,7 @@ export function RenderHtmlResponse(props: { htmlBlock: HtmlBlock, sx?: SxProps }
           p: 1.5, // this block gets a thicker border
           display: 'block',
           overflowX: 'auto',
-          '&:hover > .overlay-buttons': overlayButtonsActiveSx,
+          [`&:hover > ${overlayButtonsClassName}`]: overlayButtonsActiveSx,
           ...sx,
         }}
       >
@@ -68,7 +68,7 @@ export function RenderHtmlResponse(props: { htmlBlock: HtmlBlock, sx?: SxProps }
         }
 
         {/* External HTML Buttons */}
-        <Box className='overlay-buttons' sx={overlayButtonsSx}>
+        <Box className={overlayButtonsClassName} sx={overlayButtonsSx}>
           <Tooltip title={showHTML ? 'Hide' : 'Show Web Page'} variant='solid'>
             <OverlayButton variant={showHTML ? 'solid' : 'outlined'} color='danger' onClick={() => setShowHTML(!showHTML)}>
               <WebIcon />

src/modules/blocks/image/RenderImageURL.tsx

@@ -14,7 +14,7 @@ import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { Link } from '~/common/components/Link';
 
 import type { ImageBlock } from '../blocks.types';
-import { OverlayButton, overlayButtonsActiveSx, overlayButtonsSx } from '../code/RenderCode';
+import { OverlayButton, overlayButtonsActiveSx, overlayButtonsClassName, overlayButtonsSx } from '../OverlayButton';
 
 
 const mdImageReferenceRegex = /^!\[([^\]]*)]\(([^)]+)\)$/;
@@ -164,7 +164,7 @@ export const RenderImageURL = (props: {
           // resizeable image
           '& picture': { display: 'flex', justifyContent: 'center' },
           '& img': { maxWidth: '100%', maxHeight: '100%' },
-          '&:hover .overlay-buttons': overlayButtonsActiveSx,
+          [`&:hover > ${overlayButtonsClassName}`]: overlayButtonsActiveSx,
           '&:hover .overlay-text': overlayButtonsActiveSx,
 
           // layout
@@ -231,7 +231,7 @@ export const RenderImageURL = (props: {
         )}
 
         {/* [overlay] Buttons */}
-        <Box className='overlay-buttons' sx={{
+        <Box className={overlayButtonsClassName} sx={{
           ...overlayButtonsSx,
           display: 'grid',
           gridTemplateColumns: 'auto auto',