3 files changed, 30 insertions, 14 deletions
diff --git a/extension/react-app/src/components/StyledMarkdownPreview.tsx b/extension/react-app/src/components/StyledMarkdownPreview.tsx
index 9c2ecb62..98a08ea1 100644
--- a/extension/react-app/src/components/StyledMarkdownPreview.tsx
+++ b/extension/react-app/src/components/StyledMarkdownPreview.tsx
@@ -7,9 +7,12 @@ import {
 } from ".";
 import MarkdownPreview from "@uiw/react-markdown-preview";
 
-const StyledMarkdownPreview = styled(MarkdownPreview)`
+const StyledMarkdownPreview = styled(MarkdownPreview)<{
+  light: boolean | undefined;
+}>`
   pre {
-    background-color: ${secondaryDark};
+    background-color: ${(props) =>
+      props.light ? vscBackground : secondaryDark};
     padding: 1px;
     border-radius: ${defaultBorderRadius};
     border: 0.5px solid white;
@@ -23,11 +26,12 @@ const StyledMarkdownPreview = styled(MarkdownPreview)`
   }
 
   pre > code {
-    background-color: ${secondaryDark};
+    background-color: ${(props) =>
+      props.light ? vscBackground : secondaryDark};
     color: ${vscForeground};
   }
 
-  background-color: ${vscBackground};
+  background-color: ${(props) => (props.light ? "transparent" : vscBackground)};
   font-family: "Lexend", sans-serif;
   font-size: 13px;
   padding: 8px;
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;
diff --git a/extension/react-app/src/index.css b/extension/react-app/src/index.css
index 68f9d0ab..6a46800e 100644
--- a/extension/react-app/src/index.css
+++ b/extension/react-app/src/index.css
@@ -8,6 +8,10 @@
   --button-color: rgb(113, 28, 59);
   --button-color-hover: rgba(113, 28, 59, 0.667);
   --def-border-radius: 5px;
+
+  /* --vscode-editor-background: rgb(30, 30, 30);
+  --vscode-editor-foreground: rgb(197, 200, 198);
+  --vscode-textBlockQuote-background: rgba(255, 255, 255, 0.05); */
 }
 
 html,