From 2cfac2f18b375fd5cf37b84e72035e255993bcb9 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Sun, 21 Apr 2024 22:05:08 -0700
Subject: [PATCH] Beam: combine two menus into one

---
 src/modules/beam/gather/BeamGatherPane.tsx    |  5 +--
 .../beam/gather/BeamGatherPaneDropdown.tsx    | 42 -------------------
 src/modules/beam/scatter/BeamScatterInput.tsx | 10 ++---
 .../beam/scatter/BeamScatterPaneDropdown.tsx  | 22 +++++++++-
 src/modules/beam/store-module-beam.tsx        |  5 +++
 5 files changed, 32 insertions(+), 52 deletions(-)
 delete mode 100644 src/modules/beam/gather/BeamGatherPaneDropdown.tsx

diff --git a/src/modules/beam/gather/BeamGatherPane.tsx b/src/modules/beam/gather/BeamGatherPane.tsx
index 010d290ca..ad1dd0e28 100644
--- a/src/modules/beam/gather/BeamGatherPane.tsx
+++ b/src/modules/beam/gather/BeamGatherPane.tsx
@@ -10,7 +10,6 @@ import { ScrollToBottomButton } from '~/common/scroll-to-bottom/ScrollToBottomBu
 import { animationColorBeamGather } from '~/common/util/animUtils';
 import { useLLMSelect } from '~/common/components/forms/useLLMSelect';
 
-import { BeamGatherDropdown } from './BeamGatherPaneDropdown';
 import { BeamStoreApi, useBeamStore } from '../store-beam.hooks';
 import { FFactoryId, FUSION_FACTORIES } from './instructions/beam.gather.factories';
 import { GATHER_COLOR } from '../beam.config';
@@ -109,14 +108,14 @@ export function BeamGatherPane(props: {
         <div>
           <Typography
             level='h4' component='h2'
-            endDecorator={<BeamGatherDropdown />}
+            // endDecorator={<BeamGatherDropdown />}
             // sx={{ my: 0.25 }}
           >
             <MainLlmIcon sx={{ fontSize: '1rem', animation: isGatheringAny ? `${animationColorBeamGather} 2s linear infinite` : undefined }} />&nbsp;Merge
           </Typography>
           <Typography level='body-sm' sx={{ whiteSpace: 'nowrap' }}>
             {/* may merge or not (hasInputs) N replies.. put this in pretty messages */}
-            {props.canGather ? `Combine the ${props.raysReady} replies` : /*'Fuse all replies'*/ ''}
+            {props.canGather ? `Combine the ${props.raysReady} replies` : /*'Fuse all replies'*/ 'Combine replies'}
           </Typography>
         </div>
         <ScrollToBottomButton inline />
diff --git a/src/modules/beam/gather/BeamGatherPaneDropdown.tsx b/src/modules/beam/gather/BeamGatherPaneDropdown.tsx
deleted file mode 100644
index aff81ea26..000000000
--- a/src/modules/beam/gather/BeamGatherPaneDropdown.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { useShallow } from 'zustand/react/shallow';
-
-import { Dropdown, IconButton, ListItem, ListItemDecorator, Menu, MenuButton, MenuItem, Typography } from '@mui/joy';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
-
-import { useModuleBeamStore } from '../store-module-beam';
-
-
-export function BeamGatherDropdown() {
-
-  // external (persisted) state
-  const {
-    gatherShowPrompts,
-    toggleGatherShowPrompts,
-  } = useModuleBeamStore(useShallow(state => ({
-    gatherShowPrompts: state.gatherShowPrompts,
-    toggleGatherShowPrompts: state.toggleGatherShowPrompts,
-  })));
-
-  return (
-    <Dropdown>
-      <MenuButton
-        aria-label='Merge Options'
-        slots={{ root: IconButton }}
-        slotProps={{ root: { size: 'sm', sx: { my: -0.5 /* to not disrupt the layouting */ } } }}
-      >
-        <MoreHorizRoundedIcon />
-      </MenuButton>
-      <Menu placement='right-end' sx={{ minWidth: 250, zIndex: 'var(--joy-zIndex-modal)' /* on top of its own modal in FS */ }}>
-        <ListItem>
-          <Typography level='body-sm'>Advanced</Typography>
-        </ListItem>
-        <MenuItem onClick={toggleGatherShowPrompts}>
-          <ListItemDecorator>{gatherShowPrompts && <CheckRoundedIcon />}</ListItemDecorator>
-          Show All Prompts
-        </MenuItem>
-      </Menu>
-    </Dropdown>
-  );
-}
\ No newline at end of file
diff --git a/src/modules/beam/scatter/BeamScatterInput.tsx b/src/modules/beam/scatter/BeamScatterInput.tsx
index 8b05d9a63..cd0c426b6 100644
--- a/src/modules/beam/scatter/BeamScatterInput.tsx
+++ b/src/modules/beam/scatter/BeamScatterInput.tsx
@@ -52,10 +52,10 @@ export function BeamScatterInput(props: {
 }) {
 
   // state
-  const [showHistoryMessage, setShowHistoryMessage] = React.useState(true);
+  // const [showHistoryMessage, setShowHistoryMessage] = React.useState(true);
 
   // external state
-  const gatherShowPrompts = useModuleBeamStore(state => state.gatherShowPrompts);
+  const scatterShowPrevMessages = useModuleBeamStore(state => state.scatterShowPrevMessages);
 
   // derived state
 
@@ -69,14 +69,14 @@ export function BeamScatterInput(props: {
   // user message decorator
 
   const userMessageDecorator = React.useMemo(() => {
-    return (showHistoryMessage && otherHistoryCount >= 1 && gatherShowPrompts) ? (
+    return (/*showHistoryMessage &&*/ otherHistoryCount >= 1 && scatterShowPrevMessages) ? (
       // <Chip color='primary' variant='outlined' endDecorator={<ChipDelete />} sx={{ my: 1 }}>
-      <Typography level='body-xs' sx={{ my: 1.5, opacity: 0.9 }} onClick={() => setShowHistoryMessage(on => !on)}>
+      <Typography level='body-xs' sx={{ my: 1.5 }} onClick={undefined /*() => setShowHistoryMessage(on => !on)*/}>
         ... {otherHistoryCount === 1 ? (isFirstMessageSystem ? '1 system message' : '1 message') : `${otherHistoryCount} messages`} before this input ...
       </Typography>
       // </Chip>
     ) : null;
-  }, [gatherShowPrompts, isFirstMessageSystem, otherHistoryCount, showHistoryMessage]);
+  }, [scatterShowPrevMessages, isFirstMessageSystem, otherHistoryCount/*, showHistoryMessage*/]);
 
 
   // skip rendering if no message
diff --git a/src/modules/beam/scatter/BeamScatterPaneDropdown.tsx b/src/modules/beam/scatter/BeamScatterPaneDropdown.tsx
index e34c1267b..664f70b7a 100644
--- a/src/modules/beam/scatter/BeamScatterPaneDropdown.tsx
+++ b/src/modules/beam/scatter/BeamScatterPaneDropdown.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Box, Button, DialogContent, DialogTitle, Dropdown, FormControl, FormLabel, IconButton, Input, ListItem, ListItemDecorator, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, Typography } from '@mui/joy';
+import { Box, Button, DialogContent, DialogTitle, Dropdown, FormControl, FormLabel, IconButton, Input, ListDivider, ListItem, ListItemDecorator, Menu, MenuButton, MenuItem, Modal, ModalClose, ModalDialog, Typography } from '@mui/joy';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
 import DriveFileRenameOutlineRoundedIcon from '@mui/icons-material/DriveFileRenameOutlineRounded';
@@ -67,7 +67,9 @@ export function BeamScatterDropdown(props: {
   const {
     scatterPresets, addScatterPreset, deleteScatterPreset,
     cardScrolling, toggleCardScrolling,
+    scatterShowPrevMessages, toggleScatterShowPrevMessages,
     scatterShowLettering, toggleScatterShowLettering,
+    gatherShowPrompts, toggleGatherShowPrompts,
   } = useModuleBeamStore();
 
 
@@ -146,9 +148,14 @@ export function BeamScatterDropdown(props: {
           <Typography level='body-sm'>View</Typography>
         </ListItem>
 
+        <MenuItem onClick={toggleScatterShowPrevMessages}>
+          <ListItemDecorator>{scatterShowPrevMessages && <CheckRoundedIcon />}</ListItemDecorator>
+          History
+        </MenuItem>
+
         <MenuItem onClick={toggleCardScrolling}>
           <ListItemDecorator>{cardScrolling && <CheckRoundedIcon />}</ListItemDecorator>
-          Fit Messages
+          Resize Beams
         </MenuItem>
 
         <MenuItem onClick={toggleScatterShowLettering}>
@@ -156,6 +163,17 @@ export function BeamScatterDropdown(props: {
           Response Numbers
         </MenuItem>
 
+        <ListItem>
+          <Typography level='body-sm'>Advanced</Typography>
+        </ListItem>
+
+        <MenuItem onClick={toggleGatherShowPrompts}>
+          <ListItemDecorator>{gatherShowPrompts && <CheckRoundedIcon />}</ListItemDecorator>
+          Detailed Custom Merges
+        </MenuItem>
+
+        <ListDivider inset='gutter' />
+
         <MenuItem onClick={props.onExplainerShow}>
           <ListItemDecorator>
             <SchoolRoundedIcon />
diff --git a/src/modules/beam/store-module-beam.tsx b/src/modules/beam/store-module-beam.tsx
index 65b67102a..a9f002ddb 100644
--- a/src/modules/beam/store-module-beam.tsx
+++ b/src/modules/beam/store-module-beam.tsx
@@ -23,6 +23,7 @@ interface ModuleBeamStore {
   scatterPresets: BeamScatterPreset[];
   cardScrolling: boolean;
   scatterShowLettering: boolean;
+  scatterShowPrevMessages: boolean;
   gatherShowPrompts: boolean;
 
   // actions
@@ -32,6 +33,7 @@ interface ModuleBeamStore {
 
   toggleCardScrolling: () => void;
   toggleScatterShowLettering: () => void;
+  toggleScatterShowPrevMessages: () => void;
   toggleGatherShowPrompts: () => void;
 }
 
@@ -42,6 +44,7 @@ export const useModuleBeamStore = create<ModuleBeamStore>()(persist(
     scatterPresets: [],
     cardScrolling: false,
     scatterShowLettering: false,
+    scatterShowPrevMessages: false,
     gatherShowPrompts: false,
 
 
@@ -68,6 +71,8 @@ export const useModuleBeamStore = create<ModuleBeamStore>()(persist(
 
     toggleScatterShowLettering: () => _set(state => ({ scatterShowLettering: !state.scatterShowLettering })),
 
+    toggleScatterShowPrevMessages: () => _set(state => ({ scatterShowPrevMessages: !state.scatterShowPrevMessages })),
+
     toggleGatherShowPrompts: () => _set(state => ({ gatherShowPrompts: !state.gatherShowPrompts })),
 
   }), {