diff --git a/src/common/beam/BeamView.tsx b/src/common/beam/BeamView.tsx index 17bc7d858..55fdae78d 100644 --- a/src/common/beam/BeamView.tsx +++ b/src/common/beam/BeamView.tsx @@ -34,11 +34,11 @@ export function BeamView(props: { const { /* root */ inputHistory, inputIssues, inputReady, /* scatter */ isScattering, raysReady, - /* gather */ gatherLlmId, gatherShowPrompts, + /* gather */ gatherLlmId, } = useBeamStore(props.beamStore, useShallow(state => ({ inputHistory: state.inputHistory, inputIssues: state.inputIssues, inputReady: state.inputReady, isScattering: state.isScattering, raysReady: state.raysReady, - gatherLlmId: state.gatherLlmId, gatherShowPrompts: state.gatherShowPrompts, + gatherLlmId: state.gatherLlmId, }))); const rayIds = useBeamStore(props.beamStore, useShallow(state => state.rays.map(ray => ray.rayId))); const [_, gatherLlmComponent, gatherLlmIcon] = useLLMSelect(gatherLlmId, setGatherLlmId, props.isMobile ? '' : 'Merge Model', true); @@ -129,7 +129,6 @@ export function BeamView(props: { {/* Fusion Config */} {/* Gather Controls */} diff --git a/src/common/beam/gather/BeamGatherInput.tsx b/src/common/beam/gather/BeamGatherInput.tsx index 2d2027337..1994f9bb9 100644 --- a/src/common/beam/gather/BeamGatherInput.tsx +++ b/src/common/beam/gather/BeamGatherInput.tsx @@ -11,6 +11,7 @@ import type { ChatGenerateInstruction, Instruction } from './beam.gather.instruc import { BeamStoreApi, useBeamStore } from '../store-beam.hooks'; import { GATHER_SHOW_SYSTEM_PROMPT } from '../beam.config'; import { fusionIsEditable } from './beam.gather'; +import { useModuleBeamStore } from '../store-module-beam'; const gatherInputWrapperSx: SxProps = { @@ -175,11 +176,13 @@ function EditableInstruction(props: { export function BeamGatherInput(props: { beamStore: BeamStoreApi, - gatherShowPrompts: boolean }) { - // external state (all null if we don't have an index) - const { currentFusionId, currentIsEditable, currentInstructions } = useBeamStore(props.beamStore, useShallow(store => { + // external state + const gatherShowPrompts = useModuleBeamStore(state => state.gatherShowPrompts); + const { + currentFusionId, currentIsEditable, currentInstructions, + } = useBeamStore(props.beamStore, useShallow(store => { const fusion = store.currentFusionId !== null ? store.fusions.find(fusion => fusion.fusionId === store.currentFusionId) ?? null : null; return { currentFusionId: fusion?.fusionId ?? null, @@ -230,7 +233,7 @@ export function BeamGatherInput(props: { // render if existing and editable - if (currentFusionId === null || (!currentIsEditable && !props.gatherShowPrompts)) + if (currentFusionId === null || (!currentIsEditable && !gatherShowPrompts)) return null; return ( diff --git a/src/common/beam/gather/BeamGatherPane.tsx b/src/common/beam/gather/BeamGatherPane.tsx index c22fce938..672c835bc 100644 --- a/src/common/beam/gather/BeamGatherPane.tsx +++ b/src/common/beam/gather/BeamGatherPane.tsx @@ -8,8 +8,6 @@ import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined'; import MergeRoundedIcon from '@mui/icons-material/MergeRounded'; import StopRoundedIcon from '@mui/icons-material/StopRounded'; -import { BeamGatherDropdown } from '~/common/beam/gather/BeamGatherPaneDropdown'; -import { BeamStoreApi, useBeamStore } from '~/common/beam/store-beam.hooks'; import { ConfirmationModal } from '~/common/components/ConfirmationModal'; import { FormLabelStart } from '~/common/components/forms/FormLabelStart'; import { GoodTooltip } from '~/common/components/GoodTooltip'; @@ -17,9 +15,12 @@ import { ScrollToBottomButton } from '~/common/scroll-to-bottom/ScrollToBottomBu import { animationColorBeamGather, animationShadowLimey } from '~/common/util/animUtils'; import { useScrollToBottom } from '~/common/scroll-to-bottom/useScrollToBottom'; +import { BeamGatherDropdown } from './BeamGatherPaneDropdown'; +import { BeamStoreApi, useBeamStore } from '../store-beam.hooks'; import { FUSION_FACTORIES } from './beam.gather.factories'; import { GATHER_COLOR } from '../beam.config'; import { beamPaneSx } from '../BeamCard'; +import { useModuleBeamStore } from '../store-module-beam'; const gatherPaneClasses = { @@ -73,31 +74,24 @@ export function BeamGatherPane(props: { // external state const { - gatherShowDevMethods, gatherShowPrompts, fusions, currentFusionId, isGatheringAny, - toggleGatherShowDevMethods, toggleGatherShowPrompts, setCurrentFusionId, currentFusionStart, currentFusionStop, stopScatteringAll, - } = useBeamStore(props.beamStore, useShallow(state => { - return { - // state (gatherLlmId is lifted to the parent) - gatherShowDevMethods: state.gatherShowDevMethods, - gatherShowPrompts: state.gatherShowPrompts, - currentFusionId: state.currentFusionId, - fusions: state.fusions, - isGatheringAny: state.isGatheringAny, + } = useBeamStore(props.beamStore, useShallow(state => ({ + // state (gatherLlmId is lifted to the parent) + currentFusionId: state.currentFusionId, + fusions: state.fusions, + isGatheringAny: state.isGatheringAny, - // actions - toggleGatherShowDevMethods: state.toggleGatherShowDevMethods, - toggleGatherShowPrompts: state.toggleGatherShowPrompts, - setCurrentFusionId: state.setCurrentFusionId, - currentFusionStart: state.currentFusionStart, - currentFusionStop: state.currentFusionStop, + // actions + setCurrentFusionId: state.setCurrentFusionId, + currentFusionStart: state.currentFusionStart, + currentFusionStop: state.currentFusionStop, - // (external slice) scatter actions - stopScatteringAll: state.stopScatteringAll, - }; - })); + // (external slice) scatter actions + stopScatteringAll: state.stopScatteringAll, + }))); + const gatherShowDevMethods = useModuleBeamStore(state => state.gatherShowDevMethods); const { setStickToBottom } = useScrollToBottom(); @@ -145,16 +139,6 @@ export function BeamGatherPane(props: { }, [handleStopScatterConfirmation, props.scatterBusy, warnScatterBusy]); - const dropdownMemo = React.useMemo(() => ( - - ), [gatherShowDevMethods, gatherShowPrompts, toggleGatherShowDevMethods, toggleGatherShowPrompts]); - - const MainLlmIcon = props.gatherLlmIcon || (isGatheringAny ? AutoAwesomeIcon : AutoAwesomeOutlinedIcon); return <> @@ -168,7 +152,7 @@ export function BeamGatherPane(props: {
} // sx={{ my: 0.25 }} >  Merge diff --git a/src/common/beam/gather/BeamGatherPaneDropdown.tsx b/src/common/beam/gather/BeamGatherPaneDropdown.tsx index 0f0e63563..3d6a92d9d 100644 --- a/src/common/beam/gather/BeamGatherPaneDropdown.tsx +++ b/src/common/beam/gather/BeamGatherPaneDropdown.tsx @@ -1,16 +1,28 @@ 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 { + gatherShowDevMethods, + gatherShowPrompts, + toggleGatherShowDevMethods, + toggleGatherShowPrompts, + } = useModuleBeamStore(useShallow(state => ({ + gatherShowDevMethods: state.gatherShowDevMethods, + gatherShowPrompts: state.gatherShowPrompts, + toggleGatherShowDevMethods: state.toggleGatherShowDevMethods, + toggleGatherShowPrompts: state.toggleGatherShowPrompts, + }))); -export function BeamGatherDropdown(props: { - gatherShowDevMethods: boolean, - gatherShowPrompts: boolean, - toggleGatherShowDevMethods: () => void, - toggleGatherShowPrompts: () => void, -}) { return ( Advanced - - {props.gatherShowPrompts && } + + {gatherShowPrompts && } Show All Prompts - - {props.gatherShowDevMethods && } + + {gatherShowDevMethods && } Experimental Methods diff --git a/src/common/beam/gather/beam.gather.ts b/src/common/beam/gather/beam.gather.ts index 02f66eb93..c372ecf2d 100644 --- a/src/common/beam/gather/beam.gather.ts +++ b/src/common/beam/gather/beam.gather.ts @@ -65,9 +65,6 @@ interface GatherStateSlice { gatherLlmId: DLLMId | null; - gatherShowDevMethods: boolean; - gatherShowPrompts: boolean; - currentFusionId: BFusionId | null; fusions: BFusion[]; @@ -86,9 +83,6 @@ export const reInitGatherStateSlice = (prevFusions: BFusion[]): GatherStateSlice return { gatherLlmId: null, // will be re-set during open() of the Beam Store - gatherShowDevMethods: false, - gatherShowPrompts: false, - currentFusionId: (GATHER_DEFAULT_TO_FIRST_FUSION && newFusions.length) ? newFusions[0].fusionId : null, fusions: newFusions, @@ -101,8 +95,6 @@ export type FusionUpdateOrFn = Partial | ((fusion: BFusion) => (Partial export interface GatherStoreSlice extends GatherStateSlice { setGatherLlmId: (llmId: DLLMId | null) => void; - toggleGatherShowDevMethods: () => void; - toggleGatherShowPrompts: () => void; setCurrentFusionId: (fusionId: BFusionId | null) => void; _currentFusion: () => BFusion | null; @@ -127,16 +119,6 @@ export const createGatherSlice: StateCreator - _set(state => ({ - gatherShowDevMethods: !state.gatherShowDevMethods, - })), - - toggleGatherShowPrompts: () => - _set(state => ({ - gatherShowPrompts: !state.gatherShowPrompts, - })), - setCurrentFusionId: (fusionId: BFusionId | null) => _set({ diff --git a/src/common/beam/store-beam-vanilla.ts b/src/common/beam/store-beam-vanilla.ts index 5b00a7aba..f7671abf1 100644 --- a/src/common/beam/store-beam-vanilla.ts +++ b/src/common/beam/store-beam-vanilla.ts @@ -94,7 +94,7 @@ const createRootSlice: StateCreator = (_set, }, terminate: () => { /*_get().isOpen &&*/ - const { rays, fusions, gatherLlmId, gatherShowDevMethods, gatherShowPrompts } = _get(); + const { rays, fusions, gatherLlmId } = _get(); _set({ ...initRootStateSlice(), @@ -103,8 +103,6 @@ const createRootSlice: StateCreator = (_set, // remember after termination gatherLlmId, - gatherShowDevMethods, - gatherShowPrompts, }); }, diff --git a/src/common/beam/store-module-beam.tsx b/src/common/beam/store-module-beam.tsx index 60a953a08..9a390760f 100644 --- a/src/common/beam/store-module-beam.tsx +++ b/src/common/beam/store-module-beam.tsx @@ -18,6 +18,8 @@ interface ModuleBeamStore { // state scatterPresets: BeamScatterPreset[]; rayScrolling: boolean; + gatherShowDevMethods: boolean; + gatherShowPrompts: boolean; // actions addScatterPreset: (name: string, scatterLlmIds: DLLMId[]) => void; @@ -25,6 +27,9 @@ interface ModuleBeamStore { renameScatterPreset: (id: string, name: string) => void; toggleRayScrolling: () => void; + + toggleGatherShowDevMethods: () => void; + toggleGatherShowPrompts: () => void; } @@ -33,6 +38,8 @@ export const useModuleBeamStore = create()(persist( scatterPresets: [], rayScrolling: false, + gatherShowDevMethods: false, + gatherShowPrompts: false, addScatterPreset: (name, scatterLlmIds) => _set(state => ({ @@ -50,6 +57,11 @@ export const useModuleBeamStore = create()(persist( toggleRayScrolling: () => _set(state => ({ rayScrolling: !state.rayScrolling })), + + toggleGatherShowDevMethods: () => _set(state => ({ gatherShowDevMethods: !state.gatherShowDevMethods })), + + toggleGatherShowPrompts: () => _set(state => ({ gatherShowPrompts: !state.gatherShowPrompts })), + }), { name: 'app-module-beam', },