1 files changed, 32 insertions, 39 deletions
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index d1a8a46a..6fa4ba13 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import styled, { keyframes } from "styled-components";
 import {
   appear,
@@ -15,9 +15,8 @@ import {
 } from "@styled-icons/heroicons-outline";
 import { StopCircle } from "@styled-icons/heroicons-solid";
 import { HistoryNode } from "../../../schema/HistoryNode";
-import ReactMarkdown from "react-markdown";
 import HeaderButtonWithText from "./HeaderButtonWithText";
-import CodeBlock from "./CodeBlock";
+import MarkdownPreview from "@uiw/react-markdown-preview";
 
 interface StepContainerProps {
   historyNode: HistoryNode;
@@ -72,19 +71,6 @@ const ContentDiv = styled.div<{ isUserInput: boolean }>`
   font-size: 13px;
 `;
 
-const MarkdownPre = styled.pre`
-  background-color: ${secondaryDark};
-  padding: 10px;
-  border-radius: ${defaultBorderRadius};
-  border: 0.5px solid white;
-`;
-
-const StyledCode = styled.code`
-  word-wrap: break-word;
-  color: #f69292;
-  background: transparent;
-`;
-
 const gradient = keyframes`
   0% {
     background-position: 0px 0;
@@ -124,6 +110,31 @@ const GradientBorder = styled.div<{
   background-size: 200% 200%;
 `;
 
+const StyledMarkdownPreview = styled(MarkdownPreview)`
+  pre {
+    background-color: ${secondaryDark};
+    padding: 1px;
+    border-radius: ${defaultBorderRadius};
+    border: 0.5px solid white;
+  }
+
+  code {
+    color: #f69292;
+    word-wrap: break-word;
+  }
+
+  pre > code {
+    background-color: ${secondaryDark};
+    color: white;
+  }
+
+  background-color: ${vscBackground};
+  font-family: "Lexend", sans-serif;
+  font-size: 13px;
+  padding: 8px;
+  color: white;
+`;
+
 // #endregion
 
 function StepContainer(props: StepContainerProps) {
@@ -158,7 +169,7 @@ function StepContainer(props: StepContainerProps) {
     >
       <StepContainerDiv open={props.open}>
         <GradientBorder
-          loading={props.historyNode.active as boolean || false}
+          loading={(props.historyNode.active as boolean) || false}
           isFirst={props.isFirst}
           isLast={props.isLast}
           borderColor={
@@ -178,7 +189,7 @@ function StepContainer(props: StepContainerProps) {
           }}
         >
           <HeaderDiv
-            loading={props.historyNode.active as boolean || false}
+            loading={(props.historyNode.active as boolean) || false}
             error={props.historyNode.observation?.error ? true : false}
           >
             <div className="m-2">
@@ -246,27 +257,9 @@ function StepContainer(props: StepContainerProps) {
               {props.historyNode.observation.error as string}
             </pre>
           ) : (
-            <ReactMarkdown
-              key={1}
-              className="overflow-x-scroll"
-              components={{
-                pre: ({ node, ...props }) => {
-                  return (
-                    <CodeBlock
-                      children={(props.children[0] as any).props.children[0]}
-                    />
-                  );
-                },
-                code: ({ node, ...props }) => {
-                  return <StyledCode children={props.children[0] as any} />;
-                },
-                ul: ({ node, ...props }) => {
-                  return <ul className="ml-0" {...props} />;
-                },
-              }}
-            >
-              {props.historyNode.step.description as any}
-            </ReactMarkdown>
+            <StyledMarkdownPreview
+              source={props.historyNode.step.description || ""}
+            />
           )}
         </ContentDiv>
       </StepContainerDiv>