try using the MarkdownSynapse renderer (seems to work well for most c…

…ases)
jay-hodgson · Sep 18, 2024 · 47abba8 · 47abba8
1 parent b19229c
commit 47abba8
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.tsx b/packages/synapse-react-client/src/components/SynapseChat/SynapseChatInteraction.tsx
@@ -5,6 +5,7 @@ import { ColorPartial } from '@mui/material/styles/createPalette'
 import { SkeletonParagraph } from '../Skeleton'
 import { SmartToyTwoTone } from '@mui/icons-material'
 import { SynapseSpinner } from '../LoadingScreen/LoadingScreen'
+import MarkdownSynapse from '../Markdown/MarkdownSynapse'
 
 export type SynapseChatInteractionProps = {
   userMessage: string
@@ -74,15 +75,15 @@ export const SynapseChatInteraction: React.FunctionComponent<
           >
             <SmartToyTwoTone sx={{ color: 'secondary.main' }} />
           </Box>
-          <ListItemText
-            primary={chatResponseText}
+          <Box
             sx={{
               borderRadius: '10px',
               padding: '10px',
               maxWidth: '100%',
-              whiteSpace: 'pre-wrap',
             }}
-          />
+          >
+            <MarkdownSynapse markdown={chatResponseText} />
+          </Box>
         </ListItem>
       )}
       {chatErrorReason && (