1 files changed, 73 insertions, 0 deletions
diff --git a/extension/react-app/src/tabs/chat/MessageDiv.tsx b/extension/react-app/src/tabs/chat/MessageDiv.tsx
new file mode 100644
index 00000000..ab632220
--- /dev/null
+++ b/extension/react-app/src/tabs/chat/MessageDiv.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect } from "react";
+import { ChatMessage } from "../../redux/store";
+import styled from "styled-components";
+import {
+  buttonColor,
+  defaultBorderRadius,
+  secondaryDark,
+} from "../../components";
+import VSCodeFileLink from "../../components/VSCodeFileLink";
+import ReactMarkdown from "react-markdown";
+import "../../highlight/dark.min.css";
+import hljs from "highlight.js";
+import { useSelector } from "react-redux";
+import { selectIsStreaming } from "../../redux/selectors/chatSelectors";
+
+const Container = styled.div`
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 8px;
+  margin: 3px;
+  width: fit-content;
+  max-width: 75%;
+  overflow: scroll;
+  word-wrap: break-word;
+  -ms-word-wrap: break-word;
+  height: fit-content;
+  overflow: hidden;
+  background-color: ${(props) => {
+    if (props.role === "user") {
+      return buttonColor;
+    } else {
+      return secondaryDark;
+    }
+  }};
+  float: ${(props) => {
+    if (props.role === "user") {
+      return "right";
+    } else {
+      return "left";
+    }
+  }};
+  display: block;
+
+  & pre {
+    border: 1px solid gray;
+    border-radius: ${defaultBorderRadius};
+  }
+`;
+
+function MessageDiv(props: ChatMessage) {
+  const [richContent, setRichContent] = React.useState<JSX.Element[]>([]);
+  const isStreaming = useSelector(selectIsStreaming);
+
+  useEffect(() => {
+    if (!isStreaming) {
+      hljs.highlightAll();
+    }
+  }, [richContent, isStreaming]);
+
+  useEffect(() => {
+    setRichContent([<ReactMarkdown key={1}>{props.content}</ReactMarkdown>]);
+  }, [props.content]);
+
+  return (
+    <>
+      <div className="overflow-auto">
+        <Container role={props.role}>{richContent}</Container>
+      </div>
+    </>
+  );
+}
+
+export default MessageDiv;