Dynamic Text Size switching. Fixes enricoros#399

jimjonesbabyfreshout · Feb 19, 2024 · a84ea85 · a84ea85
1 parent b6ec943
commit a84ea85
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 29 deletions.
diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx
@@ -202,10 +202,11 @@ function ChatMessage(props: {
   const [isEditing, setIsEditing] = React.useState(false);
 
   // external state
-  const { cleanerLooks, renderMarkdown, doubleClickToEdit } = useUIPreferencesStore(state => ({
+  const { cleanerLooks, doubleClickToEdit, messageTextSize, renderMarkdown } = useUIPreferencesStore(state => ({
     cleanerLooks: state.zenMode === 'cleaner',
-    renderMarkdown: state.renderMarkdown,
     doubleClickToEdit: state.doubleClickToEdit,
+    messageTextSize: state.messageTextSize,
+    renderMarkdown: state.renderMarkdown,
   }), shallow);
   const [showDiff, setShowDiff] = useChatShowTextDiff();
   const textDiffs = useSanityTextDiffs(props.message.text, props.diffPreviousText, showDiff);
@@ -455,6 +456,7 @@ function ChatMessage(props: {
           text={messageText}
           fromRole={messageRole}
           renderTextAsMarkdown={renderMarkdown}
+          messageTextSize={messageTextSize}
           errorMessage={errorMessage}
           isBottom={props.isBottom}
           showDate={props.blocksShowDate === true ? messageUpdated || messageCreated || undefined : undefined}

diff --git a/src/apps/chat/components/message/blocks/BlocksRenderer.tsx b/src/apps/chat/components/message/blocks/BlocksRenderer.tsx
@@ -6,6 +6,7 @@ import type { SxProps } from '@mui/joy/styles/types';
 import { Box, Button, Tooltip, Typography } from '@mui/joy';
 
 import type { DMessage } from '~/common/state/store-chats';
+import type { UIMessageTextSize } from '~/common/state/store-ui';
 import { InlineError } from '~/common/components/InlineError';
 import { lineHeightChatText } from '~/common/app.theme';
 
@@ -39,16 +40,13 @@ const renderBlocksSx: SxProps = {
   overflowX: 'auto',
 } as const;
 
-const typographySx: SxProps = {
-  lineHeight: lineHeightChatText,
-} as const;
-
 
 export function BlocksRenderer(props: {
 
   // required
   text: string;
   fromRole: DMessage['role'];
+  messageTextSize?: UIMessageTextSize;
   renderTextAsMarkdown: boolean;
   renderTextDiff?: TextDiff[];
 
@@ -94,17 +92,24 @@ export function BlocksRenderer(props: {
 
   // Memo the code style, to minimize re-renders
 
-  const codeSx: SxProps = React.useMemo(() => (
+  const scaledCodeSx: SxProps = React.useMemo(() => (
     {
       backgroundColor: props.specialDiagramMode ? 'background.surface' : fromAssistant ? 'neutral.plainHoverBg' : 'primary.plainActiveBg',
       boxShadow: props.specialDiagramMode ? 'md' : 'xs',
       fontFamily: 'code',
-      fontSize: '0.875rem',
+      fontSize: props.messageTextSize === 'xs' ? '0.75rem' : props.messageTextSize === 'sm' ? '0.75rem' : '0.875rem',
       fontVariantLigatures: 'none',
       lineHeight: lineHeightChatText,
       borderRadius: 'var(--joy-radius-sm)',
     }
-  ), [fromAssistant, props.specialDiagramMode]);
+  ), [fromAssistant, props.messageTextSize, props.specialDiagramMode]);
+
+  const scaledTypographySx: SxProps = React.useMemo(() => (
+    {
+      lineHeight: lineHeightChatText,
+      fontSize: (!props.messageTextSize || props.messageTextSize === 'md') ? undefined : props.messageTextSize,
+    }
+  ), [props.messageTextSize]);
 
 
   // Block splitter, with memoand special recycle of former blocks, to help React minimize render work
@@ -169,18 +174,18 @@ export function BlocksRenderer(props: {
         blocks.map(
           (block, index) =>
             block.type === 'html'
-              ? <RenderHtml key={'html-' + index} htmlBlock={block} sx={codeSx} />
+              ? <RenderHtml key={'html-' + index} htmlBlock={block} sx={scaledCodeSx} />
               : block.type === 'code'
-                ? <RenderCodeMemo key={'code-' + index} codeBlock={block} sx={codeSx} noCopyButton={props.specialDiagramMode} />
+                ? <RenderCodeMemo key={'code-' + index} codeBlock={block} sx={scaledCodeSx} noCopyButton={props.specialDiagramMode} />
                 : block.type === 'image'
                   ? <RenderImage key={'image-' + index} imageBlock={block} isFirst={!index} allowRunAgain={props.isBottom === true} onRunAgain={props.onImageRegenerate} />
                   : block.type === 'latex'
-                    ? <RenderLatex key={'latex-' + index} latexBlock={block} sx={typographySx} />
+                    ? <RenderLatex key={'latex-' + index} latexBlock={block} sx={scaledTypographySx} />
                     : block.type === 'diff'
-                      ? <RenderTextDiff key={'latex-' + index} diffBlock={block} sx={typographySx} />
+                      ? <RenderTextDiff key={'latex-' + index} diffBlock={block} sx={scaledTypographySx} />
                       : (props.renderTextAsMarkdown && !fromSystem && !(fromUser && block.content.startsWith('/')))
-                        ? <RenderMarkdownMemo key={'text-md-' + index} textBlock={block} />
-                        : <RenderText key={'text-' + index} textBlock={block} sx={typographySx} />)
+                        ? <RenderMarkdownMemo key={'text-md-' + index} textBlock={block} sx={scaledTypographySx} />
+                        : <RenderText key={'text-' + index} textBlock={block} sx={scaledTypographySx} />)
 
       )}
 

diff --git a/src/apps/chat/components/message/blocks/RenderLatex.tsx b/src/apps/chat/components/message/blocks/RenderLatex.tsx
@@ -14,14 +14,15 @@ const RenderLatexDynamic = React.lazy(async () => {
   };
 });
 
-export const RenderLatex = ({ latexBlock, sx }: { latexBlock: LatexBlock; sx?: SxProps; }) =>
+export const RenderLatex = (props: { latexBlock: LatexBlock; sx?: SxProps; }) =>
   <Box
     sx={{
       mx: 1.5,
+      my: '0.5em',
       textAlign: 'center',
-      ...(sx || {}),
+      ...props.sx,
     }}>
     <React.Suspense fallback={<div />}>
-      <RenderLatexDynamic latex={latexBlock.latex} />
+      <RenderLatexDynamic latex={props.latexBlock.latex} />
     </React.Suspense>
   </Box>;
diff --git a/src/apps/chat/components/message/blocks/RenderMarkdown.tsx b/src/apps/chat/components/message/blocks/RenderMarkdown.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { CSVLink } from 'react-csv';
 
+import type { SxProps } from '@mui/joy/styles/types';
 import { Box, Button, styled } from '@mui/joy';
 import DownloadIcon from '@mui/icons-material/Download';
 
@@ -115,9 +116,12 @@ const DynamicReactGFM = React.lazy(async () => {
   return { default: ReactMarkdownWithRemarkGfm };
 });
 
-function RenderMarkdown(props: { textBlock: TextBlock }) {
+function RenderMarkdown(props: { textBlock: TextBlock; sx?: SxProps; }) {
   return (
-    <RenderMarkdownBox className='markdown-body' /* NODE: see GithubMarkdown.css for the dark/light switch, synced with Joy's */ >
+    <RenderMarkdownBox
+      className='markdown-body' /* NODE: see GithubMarkdown.css for the dark/light switch, synced with Joy's */
+      sx={props.sx}
+    >
       <React.Suspense fallback={<div>Loading...</div>}>
         <DynamicReactGFM>
           {props.textBlock.content}

diff --git a/src/apps/chat/components/message/blocks/RenderText.tsx b/src/apps/chat/components/message/blocks/RenderText.tsx
@@ -9,7 +9,9 @@ import type { TextBlock } from './blocks';
 
 
 export const RenderText = (props: { textBlock: TextBlock; sx?: SxProps; }) => {
+
   const elements = extractChatCommand(props.textBlock.content);
+
   return (
     <Typography
       sx={{
@@ -18,7 +20,7 @@ export const RenderText = (props: { textBlock: TextBlock; sx?: SxProps; }) => {
         alignItems: 'baseline',
         overflowWrap: 'anywhere',
         whiteSpace: 'break-spaces',
-        ...(props.sx || {}),
+        ...props.sx,
       }}
     >
       {elements.map((element, index) =>

diff --git a/src/apps/chat/components/message/blocks/RenderTextDiff.tsx b/src/apps/chat/components/message/blocks/RenderTextDiff.tsx
@@ -37,13 +37,13 @@ export function useSanityTextDiffs(_text: string, _diffText: string | undefined,
 }
 
 
-export const RenderTextDiff = ({ diffBlock, sx }: { diffBlock: DiffBlock; sx?: SxProps; }) => {
+export const RenderTextDiff = (props: { diffBlock: DiffBlock; sx?: SxProps; }) => {
 
   // external state
   const theme = useTheme();
 
   // derived state
-  const textDiffs: TextDiff[] = diffBlock.textDiffs;
+  const textDiffs: TextDiff[] = props.diffBlock.textDiffs;
 
   // text added
   const styleAdd = {
@@ -74,7 +74,7 @@ export const RenderTextDiff = ({ diffBlock, sx }: { diffBlock: DiffBlock; sx?: S
         whiteSpace: 'break-spaces',
         display: 'block',
         zIndex: 200,
-        ...(sx || {}),
+        ...props.sx,
       }}
     >
       {textDiffs.map(([op, text], index) =>

diff --git a/src/apps/chat/components/message/blocks/code/RenderCode.tsx b/src/apps/chat/components/message/blocks/code/RenderCode.tsx
@@ -227,7 +227,7 @@ const RenderCodeDynamic = React.lazy(async () => {
 
 function RenderCode(props: { codeBlock: CodeBlock, noCopyButton?: boolean, sx?: SxProps }) {
   return (
-    <React.Suspense fallback={<Box component='code' sx={{ p: 1.5, display: 'block', ...(props.sx || {}) }} />}>
+    <React.Suspense fallback={<Box component='code' sx={{ p: 1.5, display: 'block', ...props.sx }} />}>
       <RenderCodeDynamic {...props} />
     </React.Suspense>
   );

diff --git a/src/apps/settings-modal/settings-ui/SettingTextSize.tsx b/src/apps/settings-modal/settings-ui/SettingTextSize.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Box, FormControl, IconButton, Step, Stepper } from '@mui/joy';
+import { FormControl, IconButton, Step, Stepper } from '@mui/joy';
 
 import type { UIMessageTextSize } from '~/common/state/store-ui';
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
@@ -44,9 +44,7 @@ export function SettingTextSize({ textSize, onChangeTextSize }: {
                     borderColor: 'primary.solidBg',
                   }}
                 >
-                  <Box>
-                    {sizeKey}
-                  </Box>
+                  {'Aa' /* Nothing says 'font' more than this */ }
                 </IconButton>
               }
             />