blob: 90cd549b314f000a99e3e50a23c4bc2b7008375c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import React, { useState } from "react";
import ReactMarkdown from "react-markdown";
import styled from "styled-components";
import { defaultBorderRadius, secondaryDark, vscBackground } from ".";
import HeaderButtonWithText from "./HeaderButtonWithText";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { HistoryNode } from "../../../schema/HistoryNode";
import StyledMarkdownPreview from "./StyledMarkdownPreview";
interface UserInputContainerProps {
onDelete: () => void;
children: string;
historyNode: HistoryNode;
}
const StyledDiv = styled.div`
position: relative;
background-color: ${secondaryDark};
font-size: 13px;
display: flex;
align-items: center;
border-bottom: 1px solid ${vscBackground};
padding: 8px;
padding-top: 0px;
padding-bottom: 0px;
`;
const DeleteButtonDiv = styled.div`
position: absolute;
top: 8px;
right: 8px;
`;
const StyledPre = styled.pre`
margin-right: 22px;
margin-left: 8px;
white-space: pre-wrap;
word-wrap: break-word;
font-family: "Lexend", sans-serif;
font-size: 13px;
`;
const UserInputContainer = (props: UserInputContainerProps) => {
const [isHovered, setIsHovered] = useState(false);
return (
<StyledDiv
onMouseEnter={() => {
setIsHovered(true);
}}
onMouseLeave={() => {
setIsHovered(false);
}}
>
{/* <StyledMarkdownPreview
light={true}
source={props.children}
className="mr-6"
/> */}
<StyledPre className="mr-6">{props.children}</StyledPre>
{/* <ReactMarkdown children={props.children} className="w-fit mr-10" /> */}
<DeleteButtonDiv>
{isHovered && (
<HeaderButtonWithText
onClick={(e) => {
props.onDelete();
e.stopPropagation();
}}
text="Delete"
>
<XMarkIcon width="1.4em" height="1.4em" />
</HeaderButtonWithText>
)}
</DeleteButtonDiv>
</StyledDiv>
);
};
export default UserInputContainer;
|
