summaryrefslogtreecommitdiff
path: root/extension/react-app/src/tabs/chat/MessageDiv.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'extension/react-app/src/tabs/chat/MessageDiv.tsx')
-rw-r--r--extension/react-app/src/tabs/chat/MessageDiv.tsx75
1 files changed, 0 insertions, 75 deletions
diff --git a/extension/react-app/src/tabs/chat/MessageDiv.tsx b/extension/react-app/src/tabs/chat/MessageDiv.tsx
deleted file mode 100644
index 3543dd93..00000000
--- a/extension/react-app/src/tabs/chat/MessageDiv.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-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-y: 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} children={props.content}></ReactMarkdown>,
- ]);
- }, [props.content]);
-
- return (
- <>
- <div className="overflow-auto">
- <Container role={props.role}>{richContent}</Container>
- </div>
- </>
- );
-}
-
-export default MessageDiv;