Beam: clean styles

src/common/beam/BeamFusion.tsx

@@ -11,16 +11,16 @@ import { RayCard, rayCardClasses } from './BeamRay';
 
 const fusionRayCardSx: SxProps = {
   mx: 'var(--Pad)',
-  mt: 'calc(-1 * var(--Pad))',
+  mt: 'calc(-1 * var(--Pad))', // absorb gap to the prev-bottom
 
+  // boxShadow: 'sm',
   // borderColor: 'success.outlinedBorder',
   borderTop: 'none',
   borderTopLeftRadius: 0,
   borderTopRightRadius: 0,
-  // boxShadow: 'sm',
 };
 
-const chatMessageEmbeddedSx: SxProps = {
+const fusionChatMessageSx: SxProps = {
   // style: to undo the style of ChatMessage
   backgroundColor: 'none',
   border: 'none',
@@ -34,6 +34,7 @@ const chatMessageEmbeddedSx: SxProps = {
 export function BeamFusion(props: {
   fusionIndex: number | null, isMobile: boolean, beamStore: BeamStoreApi
 }) {
+
   return (
     <RayCard
       className={rayCardClasses.selectable}
@@ -44,7 +45,7 @@ export function BeamFusion(props: {
         fitScreen={props.isMobile}
         showAvatar={false}
         adjustContentScaling={-1}
-        sx={chatMessageEmbeddedSx}
+        sx={fusionChatMessageSx}
       />
     </RayCard>
   );

src/common/beam/BeamGatherConfig.tsx

@@ -8,15 +8,15 @@ import { ChatMessageMemo } from '../../apps/chat/components/message/ChatMessage'
 import { createDMessage } from '~/common/state/store-chats';
 
 
-const configWrapperSx: SxProps = {
+const gatherConfigWrapperSx: SxProps = {
   px: 'var(--Pad)',
-  mb: 'calc(-1 * var(--Pad))',
+  mb: 'calc(-1 * var(--Pad))', // absorb gap to the next-top
 };
 
-const configSx: SxProps = {
+const configChatMessageSx: SxProps = {
   backgroundColor: 'success.softBg',
   border: '1px solid',
-  borderColor: 'neutral.outlinedBorder',
+  borderColor: 'success.outlinedBorder',
   borderRadius: 'md',
   borderBottom: 'none',
   borderBottomLeftRadius: 0,
@@ -30,14 +30,16 @@ export function BeamGatherConfig(props: {
   fusionIndex: number | null
 }) {
 
+
+
   return (
-    <Box sx={configWrapperSx}>
+    <Box sx={gatherConfigWrapperSx}>
       <ChatMessageMemo
         message={createDMessage('assistant', 'Gather the messages you want to merge.')}
         fitScreen={props.isMobile}
         showAvatar={false}
         adjustContentScaling={-1}
-        sx={configSx}
+        sx={configChatMessageSx}
       />
     </Box>
   );

src/common/beam/BeamScatterInput.tsx

@@ -10,10 +10,10 @@ import type { DMessage } from '~/common/state/store-chats';
 import { BEAM_INVERT_USER_MESSAGE } from './beam.config';
 
 
-const userMessageContainerSx: SxProps = {
+const userMessageWrapperSx: SxProps = {
   pt: 'var(--Pad)',
   px: 'var(--Pad)',
-  mb: 'calc(-1 * var(--Pad))',
+  mb: 'calc(-1 * var(--Pad))', // absorb gap to the next-top
 
   // sticky user message, only displaced by the scatter controls
   // NOTE: disabled: should feel good but feels weird
@@ -21,13 +21,13 @@ const userMessageContainerSx: SxProps = {
   // top: 0,
 };
 
-const userMessageContainerInvertedSx: SxProps = {
-  ...userMessageContainerSx,
+const userMessageWrapperINVSx: SxProps = {
+  ...userMessageWrapperSx,
   backgroundColor: 'neutral.solidBg',
   pt: 0,
 };
 
-const userMessageSx: SxProps = {
+const userChatMessageSx: SxProps = {
   border: '1px solid',
   borderColor: 'primary.outlinedBorder',
   borderRadius: 'md',
@@ -81,7 +81,7 @@ export function BeamScatterInput(props: {
     return null;
 
   return (
-    <Box sx={BEAM_INVERT_USER_MESSAGE ? userMessageContainerInvertedSx : userMessageContainerSx}>
+    <Box sx={BEAM_INVERT_USER_MESSAGE ? userMessageWrapperINVSx : userMessageWrapperSx}>
       <ChatMessageMemo
         message={lastHistoryMessage}
         fitScreen={props.isMobile}
@@ -89,7 +89,7 @@ export function BeamScatterInput(props: {
         adjustContentScaling={-1}
         topDecorator={userMessageDecorator}
         onMessageEdit={props.editHistory}
-        sx={userMessageSx}
+        sx={userChatMessageSx}
       />
     </Box>
   );