summaryrefslogtreecommitdiff
path: root/extension
diff options
context:
space:
mode:
Diffstat (limited to 'extension')
-rw-r--r--extension/react-app/src/components/StepContainer.tsx39
-rw-r--r--extension/react-app/src/tabs/gui.tsx255
2 files changed, 160 insertions, 134 deletions
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 1eb1d1fd..74a1c4e8 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -49,9 +49,13 @@ const StepContainerDiv = styled.div<{ open: boolean }>`
/* padding: 8px; */
`;
-const HeaderDiv = styled.div<{ error: boolean }>`
+const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>`
background-color: ${(props) =>
- props.error ? "#522" : vscBackgroundTransparent};
+ props.error
+ ? "#522"
+ : props.loading
+ ? vscBackgroundTransparent
+ : vscBackground};
display: grid;
grid-template-columns: 1fr auto auto;
grid-gap: 8px;
@@ -76,12 +80,22 @@ const StyledCode = styled.code`
color: lightgray;
`;
+const gradient = keyframes`
+ 0% {
+ background-position: 0px 0;
+ }
+ 100% {
+ background-position: 100em 0;
+ }
+`;
+
const GradientBorder = styled.div<{
borderWidth?: number;
borderRadius?: string;
borderColor?: string;
isFirst: boolean;
isLast: boolean;
+ loading: boolean;
}>`
border-radius: ${(props) => props.borderRadius || "0"};
padding-top: ${(props) =>
@@ -91,13 +105,18 @@ const GradientBorder = styled.div<{
background: ${(props) =>
props.borderColor
? props.borderColor
- : `linear-gradient(
+ : `repeating-linear-gradient(
101.79deg,
#12887a 0%,
- #87245c 37.64%,
- #e12637 65.98%,
- #ffb215 110.45%
+ #87245c 16%,
+ #e12637 33%,
+ #ffb215 55%,
+ #e12637 67%,
+ #87245c 85%,
+ #12887a 99%
)`};
+ animation: ${(props) => (props.loading ? gradient : "")} 6s linear infinite;
+ background-size: 200% 200%;
`;
function StepContainer(props: StepContainerProps) {
@@ -138,10 +157,15 @@ function StepContainer(props: StepContainerProps) {
>
<StepContainerDiv open={props.open}>
<GradientBorder
+ loading={props.historyNode.active as boolean | false}
isFirst={props.isFirst}
isLast={props.isLast}
borderColor={
- props.historyNode.observation?.error ? "#f00" : undefined
+ props.historyNode.observation?.error
+ ? "#f00"
+ : props.historyNode.active
+ ? undefined
+ : "white"
}
className="overflow-hidden cursor-pointer"
onClick={(e) => {
@@ -153,6 +177,7 @@ function StepContainer(props: StepContainerProps) {
}}
>
<HeaderDiv
+ loading={props.historyNode.active as boolean | false}
error={props.historyNode.observation?.error ? true : false}
>
<h4 className="m-2">
diff --git a/extension/react-app/src/tabs/gui.tsx b/extension/react-app/src/tabs/gui.tsx
index eee2b1a0..2b72a63a 100644
--- a/extension/react-app/src/tabs/gui.tsx
+++ b/extension/react-app/src/tabs/gui.tsx
@@ -62,129 +62,129 @@ function GUI(props: GUIProps) {
const [dataSwitchChecked, setDataSwitchChecked] = useState(false);
const [showDataSharingInfo, setShowDataSharingInfo] = useState(false);
const [stepsOpen, setStepsOpen] = useState<boolean[]>([]);
- const [history, setHistory] = useState<History | undefined>();
- // {
- // timeline: [
- // {
- // step: {
- // name: "Waiting for user input",
- // cmd: "python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py",
- // description:
- // "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py` and ```\nprint(sum(first, second))\n```\n- Testing\n- Testing 2\n- Testing 3",
- // },
- // observation: {
- // title: "ERROR FOUND",
- // error:
- // "Traceback (most recent call last):\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n print(sum(first, second))\n ^^^^^^^^^^^^^^^^^^\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n return a + b\n ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'",
- // },
- // output: [
- // {
- // traceback: {
- // frames: [
- // {
- // filepath:
- // "/Users/natesesti/Desktop/continue/extension/examples/python/main.py",
- // lineno: 7,
- // function: "<module>",
- // code: "print(sum(first, second))",
- // },
- // ],
- // message: "unsupported operand type(s) for +: 'int' and 'str'",
- // error_type:
- // ' ^^^^^^^^^^^^^^^^^^\n File "/Users/natesesti/Desktop/continue/extension/examples/python/sum.py", line 2, in sum\n return a + b\n ~~^~~\nTypeError',
- // full_traceback:
- // "Traceback (most recent call last):\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n print(sum(first, second))\n ^^^^^^^^^^^^^^^^^^\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n return a + b\n ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'",
- // },
- // },
- // null,
- // ],
- // },
- // {
- // step: {
- // name: "EditCodeStep",
- // range_in_files: [
- // {
- // filepath:
- // "/Users/natesesti/Desktop/continue/extension/examples/python/main.py",
- // range: {
- // start: {
- // line: 0,
- // character: 0,
- // },
- // end: {
- // line: 6,
- // character: 25,
- // },
- // },
- // },
- // ],
- // prompt:
- // "I ran into this problem with my Python code:\n\n Traceback (most recent call last):\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n print(sum(first, second))\n ^^^^^^^^^^^^^^^^^^\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n return a + b\n ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'\n\n Below are the files that might need to be fixed:\n\n {code}\n\n This is what the code should be in order to avoid the problem:\n",
- // description:
- // "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py` and\n```python\nprint(sum(first, second))\n```\n- Testing\n- Testing 2\n- Testing 3",
- // },
- // output: [
- // null,
- // {
- // reversible: true,
- // actions: [
- // {
- // reversible: true,
- // filesystem: {},
- // filepath:
- // "/Users/natesesti/Desktop/continue/extension/examples/python/main.py",
- // range: {
- // start: {
- // line: 0,
- // character: 0,
- // },
- // end: {
- // line: 6,
- // character: 25,
- // },
- // },
- // replacement:
- // "\nfrom sum import sum\n\nfirst = 1\nsecond = 2\n\nprint(sum(first, second))",
- // },
- // ],
- // },
- // ],
- // },
- // {
- // step: {
- // name: "SolveTracebackStep",
- // traceback: {
- // frames: [
- // {
- // filepath:
- // "/Users/natesesti/Desktop/continue/extension/examples/python/main.py",
- // lineno: 7,
- // function: "<module>",
- // code: "print(sum(first, second))",
- // },
- // ],
- // message: "unsupported operand type(s) for +: 'int' and 'str'",
- // error_type:
- // ' ^^^^^^^^^^^^^^^^^^\n File "/Users/natesesti/Desktop/continue/extension/examples/python/sum.py", line 2, in sum\n return a + b\n ~~^~~\nTypeError',
- // full_traceback:
- // "Traceback (most recent call last):\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n print(sum(first, second))\n ^^^^^^^^^^^^^^^^^^\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n return a + b\n ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'",
- // },
- // description: "Running step: SolveTracebackStep",
- // },
- // output: [null, null],
- // },
- // {
- // step: {
- // name: "RunCodeStep",
- // cmd: "python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py",
- // description:
- // "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py`",
- // },
- // output: [null, null],
- // },
- // ],
- // current_index: 3,
- // } as any);
+ const [history, setHistory] = useState<History | undefined>({
+ timeline: [
+ {
+ step: {
+ name: "Waiting for user input",
+ cmd: "python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py",
+ description:
+ "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py` and ```\nprint(sum(first, second))\n```\n- Testing\n- Testing 2\n- Testing 3",
+ },
+ observation: {
+ title: "ERROR FOUND",
+ error:
+ "Traceback (most recent call last):\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n print(sum(first, second))\n ^^^^^^^^^^^^^^^^^^\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n return a + b\n ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'",
+ },
+ output: [
+ {
+ traceback: {
+ frames: [
+ {
+ filepath:
+ "/Users/natesesti/Desktop/continue/extension/examples/python/main.py",
+ lineno: 7,
+ function: "<module>",
+ code: "print(sum(first, second))",
+ },
+ ],
+ message: "unsupported operand type(s) for +: 'int' and 'str'",
+ error_type:
+ ' ^^^^^^^^^^^^^^^^^^\n File "/Users/natesesti/Desktop/continue/extension/examples/python/sum.py", line 2, in sum\n return a + b\n ~~^~~\nTypeError',
+ full_traceback:
+ "Traceback (most recent call last):\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n print(sum(first, second))\n ^^^^^^^^^^^^^^^^^^\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n return a + b\n ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'",
+ },
+ },
+ null,
+ ],
+ },
+ {
+ step: {
+ name: "EditCodeStep",
+ range_in_files: [
+ {
+ filepath:
+ "/Users/natesesti/Desktop/continue/extension/examples/python/main.py",
+ range: {
+ start: {
+ line: 0,
+ character: 0,
+ },
+ end: {
+ line: 6,
+ character: 25,
+ },
+ },
+ },
+ ],
+ prompt:
+ "I ran into this problem with my Python code:\n\n Traceback (most recent call last):\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n print(sum(first, second))\n ^^^^^^^^^^^^^^^^^^\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n return a + b\n ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'\n\n Below are the files that might need to be fixed:\n\n {code}\n\n This is what the code should be in order to avoid the problem:\n",
+ description:
+ "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py` and\n```python\nprint(sum(first, second))\n```\n- Testing\n- Testing 2\n- Testing 3",
+ },
+ output: [
+ null,
+ {
+ reversible: true,
+ actions: [
+ {
+ reversible: true,
+ filesystem: {},
+ filepath:
+ "/Users/natesesti/Desktop/continue/extension/examples/python/main.py",
+ range: {
+ start: {
+ line: 0,
+ character: 0,
+ },
+ end: {
+ line: 6,
+ character: 25,
+ },
+ },
+ replacement:
+ "\nfrom sum import sum\n\nfirst = 1\nsecond = 2\n\nprint(sum(first, second))",
+ },
+ ],
+ },
+ ],
+ },
+ {
+ active: false,
+ step: {
+ name: "SolveTracebackStep",
+ traceback: {
+ frames: [
+ {
+ filepath:
+ "/Users/natesesti/Desktop/continue/extension/examples/python/main.py",
+ lineno: 7,
+ function: "<module>",
+ code: "print(sum(first, second))",
+ },
+ ],
+ message: "unsupported operand type(s) for +: 'int' and 'str'",
+ error_type:
+ ' ^^^^^^^^^^^^^^^^^^\n File "/Users/natesesti/Desktop/continue/extension/examples/python/sum.py", line 2, in sum\n return a + b\n ~~^~~\nTypeError',
+ full_traceback:
+ "Traceback (most recent call last):\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/main.py\", line 7, in <module>\n print(sum(first, second))\n ^^^^^^^^^^^^^^^^^^\n File \"/Users/natesesti/Desktop/continue/extension/examples/python/sum.py\", line 2, in sum\n return a + b\n ~~^~~\nTypeError: unsupported operand type(s) for +: 'int' and 'str'",
+ },
+ description: "Running step: SolveTracebackStep",
+ },
+ output: [null, null],
+ },
+ {
+ step: {
+ name: "RunCodeStep",
+ cmd: "python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py",
+ description:
+ "Run `python3 /Users/natesesti/Desktop/continue/extension/examples/python/main.py`",
+ },
+ output: [null, null],
+ },
+ ],
+ current_index: 3,
+ } as any);
const [showFeedbackDialog, setShowFeedbackDialog] = useState(false);
@@ -270,8 +270,9 @@ function GUI(props: GUIProps) {
const onMainTextInput = () => {
if (mainTextInputRef.current) {
- if (!client) return;
let input = mainTextInputRef.current.value;
+ mainTextInputRef.current.value = "";
+ if (!client) return;
if (
history?.timeline.length &&
@@ -449,7 +450,7 @@ function GUI(props: GUIProps) {
onColor="#12887a"
checked={dataSwitchChecked}
/>
- <span style={{ cursor: "help", fontSize: "16px" }}>
+ <span style={{ cursor: "help", fontSize: "14px" }}>
Contribute Data
</span>
</div>
@@ -457,12 +458,12 @@ function GUI(props: GUIProps) {
onClick={() => {
client?.sendClear();
}}
- text="Clear History"
+ text="Clear All"
>
<Trash size="1.6em" />
</HeaderButtonWithText>
<a href="https://continue.dev/docs" className="no-underline">
- <HeaderButtonWithText text="Continue Docs">
+ <HeaderButtonWithText text="Docs">
<BookOpen size="1.6em" />
</HeaderButtonWithText>
</a>
generated by cgit v1.2.3-70-g09d2 (git 2.48.1) at 2025-02-02 18:04:19 +0000