Persona Creator: correct display. #685

src/apps/personas/creator/Creator.tsx

@@ -6,14 +6,16 @@ import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import SettingsAccessibilityIcon from '@mui/icons-material/SettingsAccessibility';
 
 import { LLMChainStep, useLLMChain } from '~/modules/aifn/useLLMChain';
-import { RenderMarkdownMemo } from '~/modules/blocks/markdown/RenderMarkdown';
+import { ScaledTextBlockRenderer } from '~/modules/blocks/ScaledTextBlockRenderer';
 
+import type { ContentScaling } from '~/common/app.theme';
 import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { agiUuid } from '~/common/util/idUtils';
 import { copyToClipboard } from '~/common/util/clipboardUtils';
 import { useFormEditTextArray } from '~/common/components/forms/useFormEditTextArray';
 import { useLLMSelect, useLLMSelectLocalState } from '~/common/components/forms/useLLMSelect';
 import { useToggleableBoolean } from '~/common/util/hooks/useToggleableBoolean';
+import { useUIContentScaling } from '~/common/state/store-ui';
 
 import { FromText } from './FromText';
 import { FromYouTube } from './FromYouTube';
@@ -64,7 +66,10 @@ function createChain(instructions: string[], titles: string[]): LLMChainStep[] {
 }
 
 
-export const PersonaPromptCard = (props: { content: string }) =>
+export const PersonaPromptCard = (props: {
+  content: string,
+  contentScaling: ContentScaling,
+}) =>
   <Card sx={{ boxShadow: 'md', mt: 3 }}>
 
     <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
@@ -82,7 +87,11 @@ export const PersonaPromptCard = (props: { content: string }) =>
       <Alert variant='soft' color='success' sx={{ mb: 1 }}>
         You may now copy the text below and use it as Custom prompt!
       </Alert>
-      <RenderMarkdownMemo content={props.content} />
+      <ScaledTextBlockRenderer
+        text={props.content}
+        contentScaling={props.contentScaling}
+        textRenderVariant='markdown'
+      />
     </CardContent>
   </Card>;
 
@@ -97,6 +106,7 @@ export function Creator(props: { display: boolean }) {
   const [showIntermediates, setShowIntermediates] = React.useState(false);
 
   // external state
+  const contentScaling = useUIContentScaling();
   const [personaLlmId, setPersonaLlmId] = useLLMSelectLocalState(true);
   const [personaLlm, llmComponent] = useLLMSelect(personaLlmId, setPersonaLlmId, 'Persona Creation Model');
 
@@ -278,7 +288,10 @@ export function Creator(props: { display: boolean }) {
 
     {/* The Persona (Output) */}
     {chainOutputText && <>
-      <PersonaPromptCard content={chainOutputText} />
+      <PersonaPromptCard
+        content={chainOutputText}
+        contentScaling={contentScaling}
+      />
     </>}