Beam: rays increase button

icratech · Mar 10, 2024 · 8b4ba96 · 8b4ba96
1 parent 0c17e18
commit 8b4ba96
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git 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
@@ -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: {
       <BeamHeader
         isMobile={props.isMobile}
         rayCount={raysCount}
-        setRayCount={handleSetRayCount}
+        setRayCount={handleRaySetCount}
         llmSelectComponent={allChatLlmComponent}
         onStart={handleCloseKeepRunning}
       />
@@ -178,6 +183,17 @@ function BeamViewBase(props: {
               gatherLlmId={gatherLlmId}
             />
           ))}
+          {raysCount < MAX_RAY_COUNT && (
+            <RayCard>
+              <Button variant='plain' color='neutral' onClick={handleRayIncreaseCount} sx={{
+                width: '100%',
+                height: '100%',
+                minHeight: 'calc(3 * var(--Pad))',
+              }}>
+                <AddIcon />
+              </Button>
+            </RayCard>
+          )}
         </Box>
       )}
 

diff --git 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