blob: a0053519b0fe3b49b897239c915772ac774c4b88 (
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 { useState } from "react";
import styled from "styled-components";
import {
defaultBorderRadius,
MainContainerWithBorder,
secondaryDark,
vscBackground,
} from ".";
import { RangeInFile, FileEdit } from "../../../src/client";
import CodeBlock from "./CodeBlock";
import SubContainer from "./SubContainer";
import { ChevronDown, ChevronRight } from "@styled-icons/heroicons-outline";
export interface IterationContext {
codeSelections: RangeInFile[];
instruction: string;
suggestedChanges: FileEdit[];
status: "waiting" | "accepted" | "rejected";
summary?: string;
action: string;
error?: string;
}
interface IterationContainerProps {
iterationContext: IterationContext;
}
const IterationContainerDiv = styled.div<{ open: boolean }>`
background-color: ${(props) => (props.open ? vscBackground : secondaryDark)};
border-radius: ${defaultBorderRadius};
padding: ${(props) => (props.open ? "2px" : "8px")};
`;
function IterationContainer(props: IterationContainerProps) {
const [open, setOpen] = useState(false);
return (
<MainContainerWithBorder className="m-2 overflow-hidden">
<IterationContainerDiv open={open}>
<p
className="m-2 cursor-pointer"
onClick={() => setOpen((prev) => !prev)}
>
{open ? <ChevronDown size="1.4em" /> : <ChevronRight size="1.4em" />}
{props.iterationContext.summary ||
props.iterationContext.codeSelections
.map((cs) => cs.filepath)
.join("\n")}
</p>
{open && (
<>
<SubContainer title="Action">
{props.iterationContext.action}
</SubContainer>
{props.iterationContext.error && (
<SubContainer title="Error">
<CodeBlock>{props.iterationContext.error}</CodeBlock>
</SubContainer>
)}
{props.iterationContext.suggestedChanges.map((sc) => {
return (
<SubContainer title="Suggested Change">
{sc.filepath}
<CodeBlock>{sc.replacement}</CodeBlock>
</SubContainer>
);
})}
</>
)}
</IterationContainerDiv>
</MainContainerWithBorder>
);
}
export default IterationContainer;
|
