init

frontend/src/conversation/ConversationBubble.tsx

@@ -4,6 +4,9 @@ import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
 import Alert from './../assets/alert.svg';
 import { ReactComponent as Like } from './../assets/like.svg';
 import { ReactComponent as Dislike } from './../assets/dislike.svg';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 const ConversationBubble = forwardRef<
   HTMLDivElement,
@@ -26,7 +29,9 @@ const ConversationBubble = forwardRef<
       <div ref={ref} className={`flex flex-row-reverse self-end ${className}`}>
         <Avatar className="mt-4 text-2xl" avatar="🧑‍💻"></Avatar>
         <div className="mr-2 ml-10 flex items-center rounded-3xl bg-blue-1000 p-3.5 text-white">
-          <p className="whitespace-pre-wrap break-words">{message}</p>
+          <ReactMarkdown className="whitespace-pre-wrap break-words">
+            {message}
+          </ReactMarkdown>
         </div>
       </div>
     );
@@ -49,7 +54,31 @@ const ConversationBubble = forwardRef<
           {type === 'ERROR' && (
             <img src={Alert} alt="alert" className="mr-2 inline" />
           )}
-          <p className="whitespace-pre-wrap break-words">{message}</p>
+          <ReactMarkdown
+            className="whitespace-pre-wrap break-words"
+            components={{
+              code({ node, inline, className, children, ...props }) {
+                const match = /language-(\w+)/.exec(className || '');
+
+                return !inline && match ? (
+                  <SyntaxHighlighter
+                    PreTag="div"
+                    language={match[1]}
+                    {...props}
+                    style={vs}
+                  >
+                    {String(children).replace(/\n$/, '')}
+                  </SyntaxHighlighter>
+                ) : (
+                  <code className={className ? className : ''} {...props}>
+                    {children}
+                  </code>
+                );
+              },
+            }}
+          >
+            {message}
+          </ReactMarkdown>
         </div>
         <div
           className={`mr-2 flex items-center justify-center ${