feat: add css

src/components/MessageDivider/MessageDivider.scss

@@ -1,27 +1,21 @@
 @use '../../utils/variables';
 
-.divider {
-  width: fit-content;
-  max-width: 70%;
-  border-radius: 10px;
+divider {
+  display: flex;
+  flex-direction: row;
   font-size: 15px;
-
-  &.user {
-    background: variables.$dark-green;
-    color: white;
-  }
-
-  &.assistant {
-    background: #F2F0EF;
-  }
 }
-
-// bootstrap automatically adds a bottom margin of 1rem,
-// which we do not need for the chat messages
-.message p {
-  margin-bottom: 0rem;
+divider:before, divider:after{
+  content: "";
+  flex: 1 1;
+  border-bottom: 1px solid;
+  margin: auto;
 }
-
-.time {
-  font-size: 10px;
+divider:before {
+  margin-right: 10px;
+  margin-left: 10px
+}
+divider:after {
+  margin-right: 10px;
+  margin-left: 10px
 }

src/components/MessageDivider/index.jsx

@@ -1,17 +1,11 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 import './MessageDivider.scss';
 import PropTypes from 'prop-types';
 
 const MessageDivider = ({ text }) => (
-  <div
-    className={`divider ${text} text-center my-1 mx-2 py-2 px-3`}
-    data-hj-suppress
-  >
-    <ReactMarkdown>
-      {text}
-    </ReactMarkdown>
-  </div>
+  <divider>
+    {text}
+  </divider>
 );
 
 MessageDivider.propTypes = {