1 files changed, 18 insertions, 10 deletions
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index d44be38e..25f836de 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import styled from "styled-components";
-import { buttonColor, secondaryDark, vscBackground } from ".";
+import { secondaryDark, vscBackground } from ".";
 import HeaderButtonWithText from "./HeaderButtonWithText";
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { RootStore } from "../redux/store";
-import { useSelector } from "react-redux";
 import { HistoryNode } from "../../../schema/HistoryNode";
+import StyledMarkdownPreview from "./StyledMarkdownPreview";
 
 interface UserInputContainerProps {
   onDelete: () => void;
@@ -15,21 +14,31 @@ interface UserInputContainerProps {
 }
 
 const StyledDiv = styled.div`
+  position: relative;
   background-color: ${secondaryDark};
-  padding: 8px;
-  padding-left: 16px;
-  padding-right: 16px;
   font-size: 13px;
   display: flex;
   align-items: center;
   border-bottom: 1px solid ${vscBackground};
+  padding: 8px;
+`;
+
+const DeleteButtonDiv = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 16px;
 `;
 
 const UserInputContainer = (props: UserInputContainerProps) => {
   return (
     <StyledDiv>
-      {props.children}
-      <div style={{ marginLeft: "auto" }}>
+      <StyledMarkdownPreview
+        light={true}
+        source={props.children}
+        className="mr-5"
+      />
+      {/* <ReactMarkdown children={props.children} className="w-fit mr-10" /> */}
+      <DeleteButtonDiv>
         <HeaderButtonWithText
           onClick={(e) => {
             props.onDelete();
@@ -39,9 +48,8 @@ const UserInputContainer = (props: UserInputContainerProps) => {
         >
           <XMarkIcon width="1.5em" height="1.5em" />
         </HeaderButtonWithText>
-      </div>
+      </DeleteButtonDiv>
     </StyledDiv>
   );
 };
-
 export default UserInputContainer;