From f9e67512791fd594cb926b09a0bc2117e8cc9960 Mon Sep 17 00:00:00 2001
From: Alexander Deshkevich <deshkevich.alexander@gmail.com>
Date: Mon, 16 Oct 2023 18:58:55 -0300
Subject: [PATCH] fix render lists in conversation

---
 .../ConversationBubble.module.css             | 11 ++++++
 .../src/conversation/ConversationBubble.tsx   | 35 ++++++++++---------
 2 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/conversation/ConversationBubble.module.css

diff --git a/frontend/src/conversation/ConversationBubble.module.css b/frontend/src/conversation/ConversationBubble.module.css
new file mode 100644
index 0000000..4a8d3a1
--- /dev/null
+++ b/frontend/src/conversation/ConversationBubble.module.css
@@ -0,0 +1,11 @@
+.list p {
+  display: inline;
+}
+
+.list li:not(:first-child) {
+  margin-top: 1em;
+}
+
+.list li > .list {
+  margin-top: 1em;
+}
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index ad7db7a..47fe709 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -1,6 +1,7 @@
 import { forwardRef, useState } from 'react';
 import Avatar from '../Avatar';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
+import classes from './ConversationBubble.module.css';
 import Alert from './../assets/alert.svg';
 import { ReactComponent as Like } from './../assets/like.svg';
 import { ReactComponent as Dislike } from './../assets/dislike.svg';
@@ -40,16 +41,6 @@ const ConversationBubble = forwardRef<
     }, 2000);
   };
 
-  const List = ({
-    ordered,
-    children,
-  }: {
-    ordered?: boolean;
-    children: React.ReactNode;
-  }) => {
-    const Tag = ordered ? 'ol' : 'ul';
-    return <Tag className="list-inside list-disc">{children}</Tag>;
-  };
   let bubble;
 
   if (type === 'QUESTION') {
@@ -104,11 +95,23 @@ const ConversationBubble = forwardRef<
                     </code>
                   );
                 },
-                ul({ node, children }) {
-                  return <List>{children}</List>;
+                ul({ children }) {
+                  return (
+                    <ul
+                      className={`list-inside list-disc whitespace-normal pl-4 ${classes.list}`}
+                    >
+                      {children}
+                    </ul>
+                  );
                 },
-                ol({ node, children }) {
-                  return <List ordered>{children}</List>;
+                ol({ children }) {
+                  return (
+                    <ol
+                      className={`list-inside list-decimal whitespace-normal pl-4 ${classes.list}`}
+                    >
+                      {children}
+                    </ol>
+                  );
                 },
               }}
             >
@@ -118,9 +121,7 @@ const ConversationBubble = forwardRef<
               <>
                 <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
                 <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
-                  <div className="py-1 text-base font-semibold">
-                    Sources:
-                  </div>
+                  <div className="py-1 text-base font-semibold">Sources:</div>
                   <div className="flex flex-row flex-wrap items-center justify-start gap-2">
                     {sources?.map((source, index) => (
                       <div