diff --git a/src/apps/chat/components/beam/BeamRay.tsx b/src/apps/chat/components/beam/BeamRay.tsx index ad412ee729..c610bd8189 100644 --- a/src/apps/chat/components/beam/BeamRay.tsx +++ b/src/apps/chat/components/beam/BeamRay.tsx @@ -19,7 +19,7 @@ const rayCardClasses = { active: 'beamRay-Active', } as const; -const RayCard = styled(Box)(({ theme }) => ({ +export const RayCard = styled(Box)(({ theme }) => ({ '--Card-padding': '1rem', padding: 'var(--Card-padding)', diff --git a/src/apps/chat/components/beam/BeamView.tsx b/src/apps/chat/components/beam/BeamView.tsx index 4959225961..dfb3407fe4 100644 --- a/src/apps/chat/components/beam/BeamView.tsx +++ b/src/apps/chat/components/beam/BeamView.tsx @@ -4,13 +4,14 @@ import { useShallow } from 'zustand/react/shallow'; import type { SxProps } from '@mui/joy/styles/types'; import { Alert, Box, Button, Sheet } from '@mui/joy'; +import AddIcon from '@mui/icons-material/Add'; import type { ConversationHandler } from '~/common/chats/ConversationHandler'; import { useBeamStore } from '~/common/chats/store-beam'; import { useLLMSelect } from '~/common/components/forms/useLLMSelect'; import { BeamHeader } from './BeamHeader'; -import { BeamRay } from './BeamRay'; +import { BeamRay, RayCard } from './BeamRay'; import { ChatMessageMemo } from '../message/ChatMessage'; @@ -86,10 +87,14 @@ function BeamViewBase(props: { conversationHandler.beamClose(); }, [conversationHandler]); - const handleSetRayCount = React.useCallback((n: number) => { + const handleRaySetCount = React.useCallback((n: number) => { conversationHandler.beamSetRayCount(n); }, [conversationHandler]); + const handleRayIncreaseCount = React.useCallback(() => { + conversationHandler.beamIncreaseRayCount(); + }, [conversationHandler]); + const handleStart = React.useCallback(() => { console.log('Start'); @@ -101,12 +106,12 @@ function BeamViewBase(props: { const bootup = !raysCount; React.useEffect(() => { - bootup && handleSetRayCount(MIN_RAY_COUNT); - }, [bootup, handleSetRayCount]); + bootup && handleRaySetCount(MIN_RAY_COUNT); + }, [bootup, handleRaySetCount]); // const beamCount = candidates.length; // - // const handleSetRayCount = React.useCallback((n: number) => { + // const handleRaySetCount = React.useCallback((n: number) => { // beamStore.setBeamCount(n); // }, [beamStore]); // @@ -137,7 +142,7 @@ function BeamViewBase(props: { @@ -178,6 +183,17 @@ function BeamViewBase(props: { gatherLlmId={gatherLlmId} /> ))} + {raysCount < MAX_RAY_COUNT && ( + + + + )} )} diff --git a/src/common/chats/ConversationHandler.ts b/src/common/chats/ConversationHandler.ts index b2f8a3fae5..ad891f4221 100644 --- a/src/common/chats/ConversationHandler.ts +++ b/src/common/chats/ConversationHandler.ts @@ -94,6 +94,10 @@ export class ConversationHandler { this.beamStore.getState().setRayCount(count); } + beamIncreaseRayCount() { + this.beamStore.getState().setRayCount(this.beamStore.getState().rays.length + 1); + } + // Ephemerals