Beam: copy/use all #660

src/modules/beam/BeamCard.tsx

@@ -3,7 +3,7 @@ import { Box, styled } from '@mui/joy';
 
 import { animationShadowLimey } from '~/common/util/animUtils';
 
-import { BEAM_INVERT_BACKGROUND } from './beam.config';
+import { BEAM_INVERT_BACKGROUND, BEAM_PANE_ZINDEX } from './beam.config';
 
 
 export const beamCardClasses = {
@@ -97,7 +97,7 @@ export const beamPaneSx: SxProps = {
   // style
   p: 'var(--Pad)',
   py: 'calc(3 * var(--Pad) / 4)',
-  zIndex: 1, // cast shadow on the rays/fusion
+  zIndex: BEAM_PANE_ZINDEX, // cast shadow on the rays/fusion, and be on top of the overlay pane
 
   // layout
   display: 'flex',

src/modules/beam/BeamView.tsx

@@ -5,6 +5,8 @@ import { Alert, Box, CircularProgress } from '@mui/joy';
 
 import { ConfirmationModal } from '~/common/components/modals/ConfirmationModal';
 import { animationEnterScaleUp } from '~/common/util/animUtils';
+import { copyToClipboard } from '~/common/util/clipboardUtils';
+import { messageFragmentsReduceText } from '~/common/stores/chat/chat.message';
 import { useUICounter } from '~/common/state/store-ui';
 
 import { BeamExplainer } from './BeamExplainer';
@@ -68,6 +70,22 @@ export function BeamView(props: {
 
   const handleRayIncreaseCount = React.useCallback(() => setRayCount(raysCount + 1), [setRayCount, raysCount]);
 
+  const handleRaysOperation = React.useCallback((operation: 'copy' | 'use') => {
+    const { rays, onSuccessCallback } = props.beamStore.getState();
+    const allFragments = rays.flatMap(ray => ray.message.fragments);
+    if (allFragments.length) {
+      switch (operation) {
+        case 'copy':
+          const combinedText = messageFragmentsReduceText(allFragments, '\n\n\n---\n\n\n');
+          copyToClipboard(combinedText, 'All Beams');
+          break;
+        case 'use':
+          onSuccessCallback?.({ fragments: allFragments });
+          break;
+      }
+    }
+  }, [props.beamStore]);
+
   const handleScatterStart = React.useCallback(() => {
     setHasAutoMerged(false);
     startScatteringAll();
@@ -176,8 +194,10 @@ export function BeamView(props: {
         isMobile={props.isMobile}
         rayIds={rayIds}
         showRayAdd={cardAdd}
+        showRaysOps={(isScattering || raysReady < 2) ? undefined : raysReady}
         hadImportedRays={hadImportedRays}
         onIncreaseRayCount={handleRayIncreaseCount}
+        onRaysOperation={handleRaysOperation}
         // linkedLlmId={currentGatherLlmId}
       />
 

src/modules/beam/beam.config.ts

@@ -1,4 +1,5 @@
 import type { SxProps } from '@mui/joy/styles/types';
+import { OVERLAY_BUTTON_ZINDEX } from '~/modules/blocks/OverlayButton';
 
 // BEAM recap - Nomenclature:
 //  - Beam (public name) = Scatter (technology process) -> Ray[] (single scatter thread)
@@ -7,6 +8,7 @@ import type { SxProps } from '@mui/joy/styles/types';
 // configuration [BEAM Common]
 export const BEAM_INVERT_BACKGROUND = true;
 export const BEAM_BTN_SX: SxProps = { minWidth: 128 };
+export const BEAM_PANE_ZINDEX = OVERLAY_BUTTON_ZINDEX + 1; // on top of the overlay buttons
 
 // configuration [BEAM Scatter]
 export const SCATTER_COLOR = 'neutral' as const;

src/modules/beam/scatter/BeamRayGrid.tsx

@@ -3,6 +3,8 @@ import * as React from 'react';
 import type { SxProps } from '@mui/joy/styles/types';
 import { Box, Button } from '@mui/joy';
 import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import TelegramIcon from '@mui/icons-material/Telegram';
 
 import type { BeamStoreApi } from '../store-beam.hooks';
 import { BeamCard } from '../BeamCard';
@@ -30,8 +32,10 @@ export function BeamRayGrid(props: {
   hadImportedRays: boolean,
   isMobile: boolean,
   onIncreaseRayCount: () => void,
+  onRaysOperation: (operation: 'copy' | 'use') => void,
   rayIds: string[],
   showRayAdd: boolean,
+  showRaysOps: undefined | number,
 }) {
 
   const raysCount = props.rayIds.length;
@@ -67,6 +71,25 @@ export function BeamRayGrid(props: {
         </BeamCard>
       )}
 
+      {/* Multi-Use and Copy Buttons */}
+      {!!props.showRaysOps && (
+        <Box sx={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'center', gap: 2, mt: 2 }}>
+          <Button size='sm' variant='outlined' color='neutral' onClick={() => props.onRaysOperation('copy')} endDecorator={<ContentCopyIcon sx={{ fontSize: 'md' }} />} sx={{
+            backgroundColor: 'background.surface',
+            '&:hover': { backgroundColor: 'background.popup' },
+          }}>
+            Copy {props.showRaysOps}
+          </Button>
+          <Button size='sm' variant='outlined' color='success' onClick={() => props.onRaysOperation('use')} endDecorator={<TelegramIcon sx={{ fontSize: 'xl' }} />} sx={{
+            justifyContent: 'space-between',
+            backgroundColor: 'background.surface',
+            '&:hover': { backgroundColor: 'background.popup' },
+          }}>
+            Use {props.showRaysOps == 2 ? 'both' : 'all ' + props.showRaysOps} messages
+          </Button>
+        </Box>
+      )}
+
       {/*/!* Takes a full row *!/*/}
       {/*<Divider sx={{*/}
       {/*  gridColumn: '1 / -1',*/}

src/modules/blocks/OverlayButton.tsx

@@ -4,7 +4,9 @@ import type { SxProps } from '@mui/joy/styles/types';
 import { IconButton, IconButtonProps, styled, Tooltip, TooltipProps } from '@mui/joy';
 
 
-export const BUTTON_RADIUS = '4px'; // note: can't use 'sm', 'md', etc.
+// configuration
+export const OVERLAY_BUTTON_RADIUS = '4px';   // note: can't use 'sm', 'md', etc.
+export const OVERLAY_BUTTON_ZINDEX = 2;       // top of message and its chips
 
 export const overlayButtonsClassName = 'overlay-buttons';
 
@@ -13,7 +15,7 @@ export const overlayButtonsTopRightSx: SxProps = {
   position: 'absolute',
   top: 0,
   right: 0,
-  zIndex: 2, // top of message and its chips
+  zIndex: OVERLAY_BUTTON_ZINDEX, // top of message and its chips
 
   // stype
   p: 0.5,
@@ -55,7 +57,7 @@ export const overlayButtonShadowSx: SxProps = {
 
 export const overlayGroupWithShadowSx: SxProps = {
   ...overlayButtonShadowSx,
-  '--ButtonGroup-radius': BUTTON_RADIUS,
+  '--ButtonGroup-radius': OVERLAY_BUTTON_RADIUS,
 };
 
 

src/modules/blocks/code/RenderCode.tsx

@@ -17,7 +17,7 @@ import { copyToClipboard } from '~/common/util/clipboardUtils';
 import { useFullscreenElement } from '~/common/components/useFullscreenElement';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
-import { BUTTON_RADIUS, OverlayButton, overlayButtonsActiveSx, overlayButtonsClassName, overlayButtonsTopRightSx, overlayGroupWithShadowSx, StyledOverlayButton } from '../OverlayButton';
+import { OVERLAY_BUTTON_RADIUS, OverlayButton, overlayButtonsActiveSx, overlayButtonsClassName, overlayButtonsTopRightSx, overlayGroupWithShadowSx, StyledOverlayButton } from '../OverlayButton';
 import { RenderCodeHtmlIFrame } from './code-renderers/RenderCodeHtmlIFrame';
 import { RenderCodeMermaid } from './code-renderers/RenderCodeMermaid';
 import { RenderCodeSVG } from './code-renderers/RenderCodeSVG';
@@ -81,7 +81,7 @@ const renderCodecontainerSx: SxProps = {
   position: 'relative',
 
   // style
-  '--IconButton-radius': BUTTON_RADIUS,
+  '--IconButton-radius': OVERLAY_BUTTON_RADIUS,
 
   // fade in children buttons
   [`&:hover > .${overlayButtonsClassName}`]: overlayButtonsActiveSx,