Messages: controllable Avatar sightings and content scaling offset

src/apps/chat/components/message/ChatMessage.tsx

@@ -30,8 +30,8 @@ import { DMessage } from '~/common/state/store-chats';
 import { InlineTextarea } from '~/common/components/InlineTextarea';
 import { KeyStroke } from '~/common/components/KeyStroke';
 import { Link } from '~/common/components/Link';
+import { adjustContentScaling, cssRainbowColorKeyframes, themeScalingMap } from '~/common/app.theme';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
-import { cssRainbowColorKeyframes, themeScalingMap } from '~/common/app.theme';
 import { prettyBaseModel } from '~/common/util/modelUtils';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 import { useUXLabsStore } from '~/common/state/store-ux-labs';
@@ -192,7 +192,9 @@ export function ChatMessage(props: {
   isBottom?: boolean,
   isImagining?: boolean,
   isSpeaking?: boolean,
-  blocksShowDate?: boolean,
+  showAvatar?: boolean,
+  showBlocksDate?: boolean,
+  adjustContentScaling?: number,
   onConversationBranch?: (messageId: string) => void,
   onConversationRestartFrom?: (messageId: string, offset: number, chatEffectBeam: boolean) => Promise<void>,
   onConversationTruncate?: (messageId: string) => void,
@@ -213,9 +215,9 @@ export function ChatMessage(props: {
 
   // external state
   const labsChatBeam = useUXLabsStore(state => state.labsChatBeam);
-  const { cleanerLooks, contentScaling, doubleClickToEdit, renderMarkdown } = useUIPreferencesStore(state => ({
-    cleanerLooks: state.zenMode === 'cleaner',
-    contentScaling: state.contentScaling,
+  const { showAvatar, contentScaling, doubleClickToEdit, renderMarkdown } = useUIPreferencesStore(state => ({
+    showAvatar: props.showAvatar !== undefined ? props.showAvatar : state.zenMode !== 'cleaner',
+    contentScaling: adjustContentScaling(state.contentScaling, props.adjustContentScaling),
     doubleClickToEdit: state.doubleClickToEdit,
     renderMarkdown: state.renderMarkdown,
   }), shallow);
@@ -240,8 +242,6 @@ export function ChatMessage(props: {
   const fromSystem = messageRole === 'system';
   const wasEdited = !!messageUpdated;
 
-  const showAvatars = !cleanerLooks;
-
   const textSel = selMenuText ? selMenuText : messageText;
   const isSpecialT2I = textSel.startsWith('https://images.prodia.xyz/') || textSel.startsWith('/draw ') || textSel.startsWith('/imagine ') || textSel.startsWith('/img ');
   const couldDiagram = textSel?.length >= 100 && !isSpecialT2I;
@@ -402,8 +402,8 @@ export function ChatMessage(props: {
 
   // avatar
   const avatarEl: React.JSX.Element | null = React.useMemo(
-    () => showAvatars ? makeAvatar(messageAvatar, messageRole, messageOriginLLM, messagePurposeId, messageSender, messageTyping) : null,
-    [messageAvatar, messageOriginLLM, messagePurposeId, messageRole, messageSender, messageTyping, showAvatars],
+    () => showAvatar ? makeAvatar(messageAvatar, messageRole, messageOriginLLM, messagePurposeId, messageSender, messageTyping) : null,
+    [messageAvatar, messageOriginLLM, messagePurposeId, messageRole, messageSender, messageTyping, showAvatar],
   );
 
 
@@ -424,7 +424,7 @@ export function ChatMessage(props: {
     >
 
       {/* Avatar */}
-      {showAvatars && (
+      {showAvatar && (
         <Box
           onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}
           onClick={event => setOpsMenuAnchor(event.currentTarget)}
@@ -480,7 +480,7 @@ export function ChatMessage(props: {
           isBottom={props.isBottom}
           renderTextAsMarkdown={renderMarkdown}
           renderTextDiff={textDiffs || undefined}
-          showDate={props.blocksShowDate === true ? messageUpdated || messageCreated || undefined : undefined}
+          showDate={props.showBlocksDate === true ? messageUpdated || messageCreated || undefined : undefined}
           wasUserEdited={wasEdited}
           onContextMenu={(props.onMessageEdit && ENABLE_SELECTION_RIGHT_CLICK_MENU) ? handleBlocksContextMenu : undefined}
           onDoubleClick={(props.onMessageEdit && doubleClickToEdit) ? handleBlocksDoubleClick : undefined}

src/apps/link-chat/LinkChatViewer.tsx

@@ -142,7 +142,7 @@ export function LinkChatViewer(props: { conversation: DConversation, storedAt: D
                 key={'msg-' + message.id}
                 message={message}
                 fitScreen={isMobile}
-                blocksShowDate={idx === 0 || idx === filteredMessages.length - 1 /* first and last message */}
+                showBlocksDate={idx === 0 || idx === filteredMessages.length - 1 /* first and last message */}
                 onMessageEdit={(_messageId, text: string) => message.text = text}
               />,
             )}

src/common/app.theme.ts

@@ -149,6 +149,14 @@ export const themeBreakpoints = appTheme.breakpoints.values;
 // Dyanmic UI Sizing
 export type ContentScaling = 'xs' | 'sm' | 'md';
 
+export function adjustContentScaling(scaling: ContentScaling, offset?: number) {
+  if (!offset) return scaling;
+  const scalingArray = ['xs', 'sm', 'md'];
+  const scalingIndex = scalingArray.indexOf(scaling);
+  const newScalingIndex = Math.max(0, Math.min(scalingArray.length - 1, scalingIndex + offset));
+  return scalingArray[newScalingIndex] as ContentScaling;
+}
+
 interface ContentScalingOptions {
   // BlocksRenderer
   blockCodeFontSize: string;