simple markdown ui fixes

minusxai · Nov 7, 2024 · 82a0877 · 82a0877
1 parent fd4b7cc
commit 82a0877
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/web/src/components/common/Chat.tsx b/web/src/components/common/Chat.tsx
@@ -80,7 +80,7 @@ const Chat: React.FC<ReturnType<typeof addStatusInfoToActionPlanMessages>[number
       <Box
         className={'bubble-container'}
         width="90%"
-        paddingBottom={1}
+        // paddingBottom={1}
         position="relative"
       >
         <Box
@@ -181,7 +181,7 @@ export const ChatSection = () => {
     messagesWithStatus.map((message, key) => (<Chat key={key} {...message} />))
 
   return (
-  <HStack className='chat-section' wrap="wrap" style={{ overflowY: 'scroll' }} width={'100%'}>
+  <HStack className='chat-section' wrap="wrap" style={{ overflowY: 'scroll' }} width={'100%'} gap={1.5}>
     {Chats}
     <OngoingActionStack />
     <div style={{ height: '10px', width: '100%' }} />

diff --git a/web/src/components/common/ChatContent.tsx b/web/src/components/common/ChatContent.tsx
@@ -14,7 +14,13 @@ function LinkRenderer(props: any) {
 
 function ModifiedParagraph(props: any) {
   return (
-    <p style={{margin: '0px'}}>{props.children}</p>
+    <p style={{margin: '0px 5px'}}>{props.children}</p>
+  )
+}
+
+function ModifiedUL(props: any) {
+  return (
+    <ul style={{padding: '0px 25px'}}>{props.children}</ul>
   )
 }
 
@@ -27,7 +33,7 @@ export const ChatContent: React.FC<{content: ChatMessageContent}> = ({
         {content.images.map(image => (
           <img src={image.url} key={image.url} />
         ))}
-        <Markdown remarkPlugins={[remarkGfm]} className={"markdown"} components={{ a: LinkRenderer, p: ModifiedParagraph}}>
+        <Markdown remarkPlugins={[remarkGfm]} className={"markdown"} components={{ a: LinkRenderer, p: ModifiedParagraph, ul: ModifiedUL}}>
           {content.text}
         </Markdown>
       </div>