Zen mode improvements. Fixes #586

enricoros · Jul 8, 2024 · 8ea3eb7 · 8ea3eb7
1 parent 3addc4e
commit 8ea3eb7
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 23 deletions.
diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx
@@ -38,7 +38,7 @@ import { ContentFragments } from './fragments-content/ContentFragments';
 import { DocumentFragments } from './fragments-attachment-doc/DocumentFragments';
 import { ImageAttachmentFragments } from './fragments-attachment-image/ImageAttachmentFragments';
 import { ReplyToBubble } from './ReplyToBubble';
-import { avatarIconSx, makeMessageAvatar, messageAsideColumnSx, messageBackground } from './messageUtils';
+import { avatarIconSx, makeMessageAvatarIcon, messageAsideColumnSx, messageBackground, messageZenAsideColumnSx } from './messageUtils';
 import { useChatShowTextDiff } from '../../store-app-chat';
 
 
@@ -71,7 +71,7 @@ export function ChatMessage(props: {
   isBottom?: boolean,
   isImagining?: boolean,
   isSpeaking?: boolean,
-  showAvatar?: boolean, // auto if undefined
+  hideAvatar?: boolean,
   showBlocksDate?: boolean,
   showUnsafeHtml?: boolean,
   adjustContentScaling?: number,
@@ -102,8 +102,8 @@ export function ChatMessage(props: {
   const [textContentEditState, setTextContentEditState] = React.useState<ChatMessageTextPartEditState | null>(null);
 
   // external state
-  const { showAvatar, contentScaling, doubleClickToEdit, renderMarkdown } = useUIPreferencesStore(useShallow(state => ({
-    showAvatar: props.showAvatar !== undefined ? props.showAvatar : state.zenMode !== 'cleaner',
+  const { isZenMode, contentScaling, doubleClickToEdit, renderMarkdown } = useUIPreferencesStore(useShallow(state => ({
+    isZenMode: state.zenMode === 'cleaner',
     contentScaling: adjustContentScaling(state.contentScaling, props.adjustContentScaling),
     doubleClickToEdit: state.doubleClickToEdit,
     renderMarkdown: state.renderMarkdown,
@@ -417,9 +417,10 @@ export function ChatMessage(props: {
   const backgroundColor = messageBackground(messageRole, wasEdited, false /*isAssistantError && !errorMessage*/);
 
   // avatar
-  const avatarEl: React.JSX.Element | null = React.useMemo(
-    () => showAvatar ? makeMessageAvatar(messageAvatar, messageRole, messageOriginLLM, messagePurposeId, !!messagePendingIncomplete, true) : null,
-    [messageAvatar, messageOriginLLM, messagePendingIncomplete, messagePurposeId, messageRole, showAvatar],
+  const showAvatarIcon = !props.hideAvatar && !isZenMode;
+  const avatarIconEl: React.JSX.Element | null = React.useMemo(
+    () => showAvatarIcon ? makeMessageAvatarIcon(messageAvatar, messageRole, messageOriginLLM, messagePurposeId, !!messagePendingIncomplete, true) : null,
+    [messageAvatar, messageOriginLLM, messagePendingIncomplete, messagePurposeId, messageRole, showAvatarIcon],
   );
 
 
@@ -486,8 +487,8 @@ export function ChatMessage(props: {
         )}
 
         {/* [aside B] Avatar (Persona) */}
-        {showAvatar && !isEditingText && (
-          <Box sx={messageAsideColumnSx}>
+        {!props.hideAvatar && !isEditingText && (
+          <Box sx={isZenMode ? messageZenAsideColumnSx : messageAsideColumnSx}>
 
             {/* Persona Avatar or Menu Button */}
             <Box
@@ -500,17 +501,22 @@ export function ChatMessage(props: {
               onMouseLeave={props.isMobile ? undefined : () => setIsHovering(false)}
               sx={{ display: 'flex' }}
             >
-              {(isHovering || opsMenuAnchor) ? (
-                <IconButton variant={opsMenuAnchor ? 'solid' : 'soft'} color={(fromAssistant || fromSystem) ? 'neutral' : 'primary'} sx={avatarIconSx}>
+              {!isHovering && !opsMenuAnchor && !isZenMode ? (
+                avatarIconEl
+              ) : (
+                <IconButton
+                  size='sm'
+                  variant={opsMenuAnchor ? 'solid' : isZenMode ? 'plain' : 'soft'}
+                  color={(fromAssistant || fromSystem) ? 'neutral' : 'primary'}
+                  sx={avatarIconSx}
+                >
                   <MoreVertIcon />
                 </IconButton>
-              ) : (
-                avatarEl
               )}
             </Box>
 
             {/* Assistant (llm/function) name */}
-            {fromAssistant && (
+            {fromAssistant && !isZenMode && (
               <Tooltip arrow title={messagePendingIncomplete ? null : (messageOriginLLM || 'unk-model')} variant='solid'>
                 <Typography level='body-xs' sx={{
                   overflowWrap: 'anywhere',

diff --git a/src/apps/chat/components/message/CleanerMessage.tsx b/src/apps/chat/components/message/CleanerMessage.tsx
@@ -8,7 +8,7 @@ import { DMessage, messageFragmentsReduceText } from '~/common/stores/chat/chat.
 
 import { TokenBadgeMemo } from '../composer/TokenBadge';
 import { isErrorChatMessage } from './explainServiceErrors';
-import { makeMessageAvatar, messageBackground } from './messageUtils';
+import { makeMessageAvatarIcon, messageBackground } from './messageUtils';
 
 
 /**
@@ -62,8 +62,8 @@ export function CleanerMessage(props: { message: DMessage, selected: boolean, re
 
   const backgroundColor = messageBackground(messageRole, !!messageUpdated, isAssistantError);
 
-  const avatarEl: React.JSX.Element | null = React.useMemo(() =>
-      makeMessageAvatar(messageAvatar, messageRole, messageOriginLLM, messagePurposeId, !!messagePendingIncomplete),
+  const avatarIconEl: React.JSX.Element | null = React.useMemo(() =>
+      makeMessageAvatarIcon(messageAvatar, messageRole, messageOriginLLM, messagePurposeId, !!messagePendingIncomplete),
     [messageAvatar, messageOriginLLM, messagePendingIncomplete, messagePurposeId, messageRole],
   );
 
@@ -86,7 +86,7 @@ export function CleanerMessage(props: { message: DMessage, selected: boolean, re
       </Box>}
 
       <Box sx={{ display: { xs: 'none', sm: 'flex' }, minWidth: { xs: 40, sm: 48 }, justifyContent: 'center' }}>
-        {avatarEl}
+        {avatarIconEl}
       </Box>
 
       <Typography level='body-sm' sx={{ minWidth: 64 }}>

diff --git a/src/apps/chat/components/message/messageUtils.tsx b/src/apps/chat/components/message/messageUtils.tsx
@@ -35,13 +35,20 @@ export const messageAsideColumnSx: SxProps = {
   alignItems: 'center',
 };
 
+export const messageZenAsideColumnSx: SxProps = {
+  ...messageAsideColumnSx,
+  minWidth: undefined,
+  maxWidth: undefined,
+  mx: -1,
+};
+
 export const avatarIconSx = {
   width: 36,
   height: 36,
 } as const;
 
 
-export function makeMessageAvatar(
+export function makeMessageAvatarIcon(
   messageAvatarUrl: string | null,
   messageRole: DMessageRole | string,
   messageOriginLLM: string | undefined,

diff --git a/src/modules/beam/gather/Fusion.tsx b/src/modules/beam/gather/Fusion.tsx
@@ -144,7 +144,7 @@ export function Fusion(props: {
             <ChatMessageMemo
               message={fusion.outputDMessage}
               fitScreen={true}
-              showAvatar={false}
+              hideAvatar
               showUnsafeHtml={true}
               adjustContentScaling={-1}
               sx={!cardScrolling ? beamCardMessageSx : beamCardMessageScrollingSx}

diff --git a/src/modules/beam/gather/instructions/ChatGenerateInstruction.tsx b/src/modules/beam/gather/instructions/ChatGenerateInstruction.tsx
@@ -81,7 +81,7 @@ export async function executeChatGenerate(_i: ChatGenerateInstruction, inputs: E
           <ChatMessage
             message={inputs.intermediateDMessage}
             fitScreen={true}
-            showAvatar={false}
+            hideAvatar
             adjustContentScaling={-1}
             sx={!getBeamCardScrolling() ? beamCardMessageSx : beamCardMessageScrollingSx}
           />,

diff --git a/src/modules/beam/scatter/BeamRay.tsx b/src/modules/beam/scatter/BeamRay.tsx
@@ -207,7 +207,7 @@ export function BeamRay(props: {
             <ChatMessageMemo
               message={ray.message}
               fitScreen={true}
-              showAvatar={false}
+              hideAvatar
               showUnsafeHtml={true}
               adjustContentScaling={-1}
               sx={!cardScrolling ? beamCardMessageSx : beamCardMessageScrollingSx}

diff --git a/src/modules/beam/scatter/BeamScatterInput.tsx b/src/modules/beam/scatter/BeamScatterInput.tsx
@@ -91,7 +91,6 @@ export function BeamScatterInput(props: {
         message={lastHistoryMessage}
         fitScreen={props.isMobile}
         isMobile={props.isMobile}
-        showAvatar={true}
         adjustContentScaling={-1}
         topDecorator={userMessageDecorator}
         onMessageFragmentReplace={props.onMessageFragmentReplace}