Beam: Rays close to gen

icratech · Mar 10, 2024 · 0c17e18 · 0c17e18
1 parent 2bdbab3
commit 0c17e18
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 29 deletions.
diff --git a/src/apps/chat/components/beam/BeamRay.tsx b/src/apps/chat/components/beam/BeamRay.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
 import { Box, IconButton, styled, Tooltip } from '@mui/joy';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import LinkIcon from '@mui/icons-material/Link';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
 
@@ -40,15 +41,12 @@ const RayCard = styled(Box)(({ theme }) => ({
 RayCard.displayName = 'RayCard';
 
 
-const chatMessageSx: SxProps = {
-  p: 0,
-  m: 0,
+const chatMessageEmbeddedSx: SxProps = {
+  // style: to undo the style of ChatMessage
   border: 'none',
-  // border: '1px solid',
-  // borderColor: 'neutral.outlinedBorder',
-  // borderRadius: 'lg',
-  // borderBottomRightRadius: 0,
-  // boxShadow: 'sm',
+  m: 0,
+  px: 0,
+  py: 0,
 } as const;
 
 
@@ -78,17 +76,26 @@ export function BeamRay(props: {
 
       {/* Controls Row */}
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <IconButton disabled size='sm' sx={undefined /*{ ml: 'calc(-0.5 * var(--Card-padding))' }*/}>
+          <DragIndicatorIcon />
+        </IconButton>
         <Box sx={{ flex: 1 }}>
           {allChatLlmComponent}
         </Box>
         <Tooltip title={isLinked ? undefined : 'Link Model'}>
-          <IconButton disabled={isLinked} onClick={clearRayLlmId}>
+          <IconButton disabled={isLinked} size='sm' onClick={clearRayLlmId}>
             {isLinked ? <LinkIcon /> : <LinkOffIcon />}
           </IconButton>
         </Tooltip>
       </Box>
 
-      <ChatMessageMemo message={msg} fitScreen={props.isMobile} sx={chatMessageSx} />
+      <ChatMessageMemo
+        message={msg}
+        fitScreen={props.isMobile}
+        showAvatar={false}
+        adjustContentScaling={-1}
+        sx={chatMessageEmbeddedSx}
+      />
 
     </RayCard>
   );

diff --git a/src/apps/chat/components/beam/BeamView.tsx b/src/apps/chat/components/beam/BeamView.tsx
@@ -50,12 +50,23 @@ export function BeamView(props: {
   sx?: SxProps
 }) {
 
+  // external state
+  const isOpen = useBeamStore(props.conversationHandler, state => state.isOpen);
+
+  return isOpen ? <BeamViewBase {...props} /> : null;
+}
+
+function BeamViewBase(props: {
+  conversationHandler: ConversationHandler,
+  isMobile: boolean,
+  sx?: SxProps
+}) {
+
   const { conversationHandler } = props;
 
   // state
-  const { isOpen, inputHistory, configIssue, gatherLlmId, setMergedLlmId, raysCount } = useBeamStore(conversationHandler,
+  const { inputHistory, configIssue, gatherLlmId, setMergedLlmId, raysCount } = useBeamStore(conversationHandler,
     useShallow((state) => ({
-      isOpen: state.isOpen,
       inputHistory: state.inputHistory,
       configIssue: state.configIssue,
       gatherLlmId: state.gatherLlmId,
@@ -75,7 +86,7 @@ export function BeamView(props: {
     conversationHandler.beamClose();
   }, [conversationHandler]);
 
-  const handleSetBeamCount = React.useCallback((n: number) => {
+  const handleSetRayCount = React.useCallback((n: number) => {
     conversationHandler.beamSetRayCount(n);
   }, [conversationHandler]);
 
@@ -90,12 +101,12 @@ export function BeamView(props: {
 
   const bootup = !raysCount;
   React.useEffect(() => {
-    bootup && handleSetBeamCount(MIN_RAY_COUNT);
-  }, [bootup, handleSetBeamCount]);
+    bootup && handleSetRayCount(MIN_RAY_COUNT);
+  }, [bootup, handleSetRayCount]);
 
   // const beamCount = candidates.length;
   //
-  // const handleSetBeamCount = React.useCallback((n: number) => {
+  // const handleSetRayCount = React.useCallback((n: number) => {
   //   beamStore.setBeamCount(n);
   // }, [beamStore]);
   //
@@ -104,10 +115,6 @@ export function BeamView(props: {
   // }, [beamStore]);
 
 
-  if (!isOpen)
-    return null;
-
-
   return (
     <Box sx={{
       '--Pad': { xs: '1rem', md: '1.5rem', xl: '1.5rem' },
@@ -130,7 +137,7 @@ export function BeamView(props: {
       <BeamHeader
         isMobile={props.isMobile}
         rayCount={raysCount}
-        setRayCount={handleSetBeamCount}
+        setRayCount={handleSetRayCount}
         llmSelectComponent={allChatLlmComponent}
         onStart={handleCloseKeepRunning}
       />
@@ -142,7 +149,12 @@ export function BeamView(props: {
           display: 'grid',
           gap: 'var(--Pad_2)',
         }}>
-          <ChatMessageMemo message={lastMessage} fitScreen={props.isMobile} sx={chatMessageSx} />
+          <ChatMessageMemo
+            message={lastMessage}
+            fitScreen={props.isMobile}
+            adjustContentScaling={-1}
+            sx={chatMessageSx}
+          />
         </Box>
       )}
 

diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx
@@ -192,7 +192,7 @@ export function ChatMessage(props: {
   isBottom?: boolean,
   isImagining?: boolean,
   isSpeaking?: boolean,
-  showAvatar?: boolean,
+  showAvatar?: boolean, // auto if undefined
   showBlocksDate?: boolean,
   adjustContentScaling?: number,
   onConversationBranch?: (messageId: string) => void,

diff --git a/src/common/chats/store-beam.ts b/src/common/chats/store-beam.ts
@@ -32,10 +32,9 @@ export interface BeamStore extends BeamState {
   close: () => void;
 
   setMergedLlmId: (llmId: DLLMId | null) => void;
+  setRayCount: (count: number) => void;
 
-  setRayCount(count: number): void;
-
-  updateRay(index: number, update: Partial<DBeam>): void;
+  updateRay: (index: number, update: Partial<DBeam>) => void;
 
 }
 
@@ -59,9 +58,17 @@ export const createBeamStore = (initialLlmId: DLLMId | null) => createStore<Beam
       });
     },
 
-    close: () => _get().isOpen && _set({ isOpen: false, inputHistory: null, configIssue: null }),
-
-    setMergedLlmId: (llmId: DLLMId | null) => _set({ gatherLlmId: llmId }),
+    close: () => _get().isOpen && _set({
+      isOpen: false,
+      inputHistory: null,
+      configIssue: null,
+      // gatherLlmId: null,   // remember the selected llm
+      // rays: [],            // remember the rays configuration
+    }),
+
+    setMergedLlmId: (llmId: DLLMId | null) => _set({
+      gatherLlmId: llmId,
+    }),
 
     setRayCount: (count: number) => {
       const { rays } = _get();