diff options
Diffstat (limited to 'extension/react-app')
| -rw-r--r-- | extension/react-app/public/continue_arrow.png | bin | 1350 -> 0 bytes | |||
| -rw-r--r-- | extension/react-app/public/play_button.png | bin | 0 -> 1017 bytes | |||
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 39 | ||||
| -rw-r--r-- | extension/react-app/src/tabs/gui.tsx | 39 |
4 files changed, 66 insertions, 12 deletions
diff --git a/extension/react-app/public/continue_arrow.png b/extension/react-app/public/continue_arrow.png Binary files differdeleted file mode 100644 index 3b16ddf9..00000000 --- a/extension/react-app/public/continue_arrow.png +++ /dev/null diff --git a/extension/react-app/public/play_button.png b/extension/react-app/public/play_button.png Binary files differnew file mode 100644 index 00000000..af379375 --- /dev/null +++ b/extension/react-app/public/play_button.png 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 96e1d2a6..2431b134 100644 --- a/extension/react-app/src/tabs/gui.tsx +++ b/extension/react-app/src/tabs/gui.tsx @@ -54,6 +54,7 @@ function GUI(props: GUIProps) { (state: RootStore) => state.config.vscMachineId ); + const [usingFastModel, setUsingFastModel] = useState(false); const [waitingForSteps, setWaitingForSteps] = useState(false); const [userInputQueue, setUserInputQueue] = useState<string[]>([]); const [availableSlashCommands, setAvailableSlashCommands] = useState< @@ -63,7 +64,7 @@ function GUI(props: GUIProps) { const [showDataSharingInfo, setShowDataSharingInfo] = useState(false); const [stepsOpen, setStepsOpen] = useState<boolean[]>([]); const [history, setHistory] = useState<History | undefined>(); - // { + // { // timeline: [ // { // step: { @@ -151,6 +152,7 @@ function GUI(props: GUIProps) { // ], // }, // { + // active: false, // step: { // name: "SolveTracebackStep", // traceback: { @@ -211,6 +213,20 @@ function GUI(props: GUIProps) { }, [topGuiDivRef.current, scrollTimeout]); useEffect(() => { + const listener = (e: any) => { + // Cmd + J to toggle fast model + if (e.key === "j" && e.metaKey) { + setUsingFastModel((prev) => !prev); + } + }; + window.addEventListener("keydown", listener); + + return () => { + window.removeEventListener("keydown", listener); + }; + }, []); + + useEffect(() => { console.log("CLIENT ON STATE UPDATE: ", client, client?.onStateUpdate); client?.onStateUpdate((state) => { // Scroll only if user is at very bottom of the window. @@ -270,8 +286,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,20 +466,32 @@ function GUI(props: GUIProps) { onColor="#12887a" checked={dataSwitchChecked} /> - <span style={{ cursor: "help", fontSize: "16px" }}> + <span style={{ cursor: "help", fontSize: "14px" }}> Contribute Data </span> </div> + {/* <HeaderButtonWithText + onClick={() => { + setUsingFastModel((prev) => !prev); + }} + text={usingFastModel ? "gpt-3.5-turbo" : "gpt-4"} + > + <div + style={{ fontSize: "18px", marginLeft: "2px", marginRight: "2px" }} + > + {usingFastModel ? "⚡" : "🧠"} + </div> + </HeaderButtonWithText> */} <HeaderButtonWithText 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> |
