zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-11 14:10:15 -07:00
Code Issues Packages Projects Releases Wiki Activity

Beam: Gather layout

Browse Source
This commit is contained in:
Enrico Ros
2024-03-18 03:48:30 -07:00
parent 512e867034
commit 2cf15a24eb
5 changed files with 96 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/beam/BeamPaneGather.tsx
+85 -54
View File
@@ -1,13 +1,18 @@
import * as React from 'react';
import type { SxProps } from '@mui/joy/styles/types';
import { Box, Button, ButtonGroup, FormControl, Radio, RadioGroup, Typography } from '@mui/joy';
import { Box, Button, ButtonGroup, FormControl, Typography } from '@mui/joy';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
import AutoAwesomeOutlinedIcon from '@mui/icons-material/AutoAwesomeOutlined';
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
import MergeRoundedIcon from '@mui/icons-material/MergeRounded';
import StopRoundedIcon from '@mui/icons-material/StopRounded';
import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
import { ScrollToBottomButton } from '~/common/scroll-to-bottom/ScrollToBottomButton';
import { animationColorBeamScatter } from '~/common/util/animUtils';
import { BEAM_GATHER_COLOR } from './beam.config';
import { beamControlsSx } from './BeamPaneScatter';
@@ -20,16 +25,20 @@ const beamGatherControlsSx: SxProps = {
// layout
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
// display: 'grid',
// gridTemplateColumns: 'repeat(auto-fit, minmax(max(200px, 100%/4), 1fr))',
// gridAutoFlow: 'row dense',
gap: 'var(--Pad_2)',
justifyContent: 'space-between',
columnGap: 'var(--Pad_2)',
rowGap: 'var(--Pad)',
py: 'calc(2 * var(--Pad) / 3)',
};
const desktopBeamControlsSx: SxProps = {
...beamGatherControlsSx,
// undo the larger mobile padding
rowGap: 'var(--Pad_2)',
// the fact that this works, means we got the CSS and layout right
position: 'sticky',
bottom: 0,
@@ -51,67 +60,89 @@ export function BeamPaneGather(props: {
return (
<Box sx={props.isMobile ? beamGatherControlsSx : desktopBeamControlsSx}>
{/* Title */}
<Box sx={{ display: 'flex', gap: 'var(--Pad_2)', my: 'auto' }}>
{/*<Typography level='h4'>*/}
{/* <ChatBeamIcon sx={{ animation: `${animationColorDarkerRainbow} 2s linear 2.66` }} />*/}
{/*</Typography>*/}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 184 }}>
<div>
<Typography level='h4' component='h2'>
<AutoAwesomeOutlinedIcon sx={{ fontSize: '1rem' }} /> Merge
{gatherBusy
? <AutoAwesomeIcon sx={{ fontSize: '1rem', animation: `${animationColorBeamScatter} 2s linear infinite` }} />
: <AutoAwesomeOutlinedIcon sx={{ fontSize: '1rem' }} />} Merge
</Typography>
<Typography level='body-sm'>
<Typography level='body-sm' sx={{ whiteSpace: 'nowrap' }}>
Combine the {gatherCount > 1 ? `${gatherCount} replies` : 'replies'}
</Typography>
</div>
<Box sx={{ my: 'auto' }}>
<ScrollToBottomButton inline />
</Box>
<ScrollToBottomButton inline />
</Box>
{/* LLM cell */}
<Box sx={{ display: 'flex', gap: 'calc(var(--Pad) / 2)', alignItems: 'center', justifyContent: props.isMobile ? undefined : 'center' }}>
{/* Method */}
<FormControl sx={{ my: '-0.25rem' }}>
<FormLabelStart title={<><AutoAwesomeRoundedIcon sx={{ fontSize: 'md', mr: 0.5 }} />Method</>} sx={{ mb: '0.25rem' /* orig: 6px */ }} />
<ButtonGroup variant='outlined'>
{['Guided', 'Fusion'].map((n, idx) => {
const isActive = idx === 0; //fasn === props.rayCount;
return (
<Button
key={n}
color={isActive ? BEAM_GATHER_COLOR : 'neutral'}
// size='sm'
sx={{
// backgroundColor: isActive ? 'background.popup' : undefined,
backgroundColor: isActive ? `${BEAM_GATHER_COLOR}.softBg` : 'background.popup',
fontWeight: isActive ? 'xl' : 400, /* reset, from 600 */
// width: '3.125rem',
// minHeight: '2.25rem',
}}
>
{n}
</Button>
);
})}
</ButtonGroup>
</FormControl>
{/* Method (Radio)*/}
{/*<FormControl>*/}
{/* <FormLabelStart title={<><AutoAwesomeRoundedIcon sx={{ fontSize: 'md', mr: 0.5 }} />Method</>} sx={{ mb: '0.25rem' /* orig: 6px } />*!/*/}
{/* <RadioGroup orientation={props.isMobile ? 'vertical' : 'horizontal'}>*/}
{/* <Radio color={BEAM_GATHER_COLOR} value='one' label='Guided' />*/}
{/* <Radio color={BEAM_GATHER_COLOR} value='many' label={<Typography>Fusion</Typography>} />*/}
{/* /!*<Radio value='one' label={<Typography startDecorator={<AutoAwesomeRoundedIcon />}>Chooose</Typography>} />*!/*/}
{/* /!*<Radio value='many' label={<Typography startDecorator={<AutoAwesomeRoundedIcon />}>Improve</Typography>} />*!/*/}
{/* /!*<Radio value='all' label={<Typography startDecorator={<AutoAwesomeRoundedIcon />}>Fuse</Typography>} />*!/*/}
{/* /!*<Radio value='manual' label='Manual' />*!/*/}
{/* </RadioGroup>*/}
{/*</FormControl>*/}
{/* LLM */}
<Box sx={{ my: '-0.25rem', minWidth: 190, maxWidth: 220 }}>
{props.mergeLlmComponent}
</Box>
{/* Algo */}
{false && <FormControl disabled={!gatherEnabled}>
{!props.isMobile && <FormLabelStart title={`Beam Fusion${gatherEnabled ? ` (${props.gatherCount})` : ''}`} />}
<ButtonGroup disabled={!gatherEnabled} variant='soft' color='success'>
<Button
sx={{
// fontWeight: isActive ? 'xl' : 400, /* reset, from 600 */
// backgroundColor: isActive ? 'background.popup' : undefined,
// maxWidth: '3rem',
}}
>
test
</Button>
<Button variant='solid'>
ya
</Button>
<Button>
ya
</Button>
</ButtonGroup>
</FormControl>}
{/*{gatherEnabled && (*/}
{/* // <FormControl sx={{ mx: 'auto' }}>*/}
{/* // <FormLabelStart title={`Candidates ${gatherEnabled ? ` (${props.gatherCount})` : ''}`} />*/}
<RadioGroup size='sm' orientation={props.isMobile ? 'vertical' : 'horizontal'} sx={{ mx: 'auto' }}>
<Radio value='one' label={<Typography startDecorator={<AutoAwesomeRoundedIcon />}>Chooose</Typography>} />
{/*<Radio value='many' label={<Typography startDecorator={<AutoAwesomeRoundedIcon />}>Improve</Typography>} />*/}
<Radio value='all' label={<Typography startDecorator={<AutoAwesomeRoundedIcon />}>Fuse</Typography>} />
<Radio value='manual' label='Manual' />
</RadioGroup>
{/*// </FormControl>*/}
{/*)}*/}
<Button variant='solid' color='neutral' onClick={props.onClose} sx={{ ml: 'auto', minWidth: 100 }}>
Close
</Button>
{/* Start / Stop buttons */}
{!gatherBusy ? (
<Button
// key='gather-start' // used for animation triggering, which we don't have now
variant='solid' color={BEAM_GATHER_COLOR}
disabled={!gatherEnabled || gatherBusy} loading={gatherBusy}
endDecorator={<MergeRoundedIcon />}
onClick={props.onStart}
sx={{ minWidth: 120 }}
>
Merge
</Button>
) : (
<Button
// key='gather-stop'
variant='solid' color='danger'
endDecorator={<StopRoundedIcon />}
onClick={props.onStop}
sx={{ minWidth: 120 }}
>
Stop
</Button>
)}
</Box>
);
src/common/beam/BeamPaneScatter.tsx
+3 -3
View File
@@ -58,8 +58,8 @@ export function BeamPaneScatter(props: {
return (
<Box sx={props.isMobile ? beamScatterControlsSx : desktopBeamScatterControlsSx}>
{/* Title Cell */}
<Box sx={{ my: 'auto' }}>
{/* Title */}
<Box>
<Typography
level='h4' component='h2'
onDoubleClick={props.onExplainerShow/* Undocumented way to re-run the wizard, for now */}
@@ -73,7 +73,7 @@ export function BeamPaneScatter(props: {
</Typography>
</Box>
{/* Count and Start cell */}
{/* Ray presets */}
<FormControl sx={{ my: '-0.25rem' }}>
<FormLabelStart title='Beam Count' sx={{ mb: '0.25rem' /* orig: 6px */ }} />
<ButtonGroup variant='outlined'>
src/common/beam/BeamView.tsx
+6 -1
View File
@@ -23,6 +23,11 @@ const userMessageContainerSx: SxProps = {
pt: 'var(--Pad)',
px: 'var(--Pad)',
mb: 'calc(-1 * var(--Pad))',
// sticky user message, only displaced by the scatter controls
// NOTE: disabled: should feel good but feels weird
// position: 'sticky',
// top: 0,
};
const userMessageContainerInvertedSx: SxProps = {
@@ -92,7 +97,7 @@ export function BeamView(props: {
isGathering: state.isGathering,
})));
const { editInputHistoryMessage, setRayCount, startScatteringAll, stopScatteringAll, setMergeLlmId, terminate } = props.beamStore.getState();
const [_, mergeLlmComponent] = useLLMSelect(mergeLlmId, setMergeLlmId, props.isMobile ? '' : 'Merge Model');
const [_, mergeLlmComponent] = useLLMSelect(mergeLlmId, setMergeLlmId, props.isMobile ? '' : 'Merge Model', true);
// configuration
src/common/beam/beam.config.ts
+1
View File
@@ -14,5 +14,6 @@ export const GATHER_PLACEHOLDER = '📦 ...';
// BEAM graphics
export const BEAM_SCATTER_COLOR = 'neutral' as const;
export const BEAM_GATHER_COLOR= 'success' as const;
export const BEAM_INVERT_USER_MESSAGE = true;
export const SCATTER_RAY_SHOW_DRAG_HANDLE = false;
src/common/components/forms/useLLMSelect.tsx
+1 -1
View File
@@ -106,7 +106,7 @@ export function useLLMSelect(
// Memo the Select component
const llmSelectComponent = React.useMemo(() => (
<FormControl orientation={isHorizontal ? 'horizontal' : undefined}>
{!!label && <FormLabelStart title={label} />}
{!!label && <FormLabelStart title={label} sx={{ mb: '0.25rem' /* orig: 6px */ }} />}
{/*<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>*/}
<Select
variant='outlined'